详解JavaScript的另类写法


Posted in Javascript onApril 11, 2016

JavaScript 是属于网络的脚本语言!

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。

JavaScript 是因特网上最流行的脚本语言。

JavaScript 很容易使用!你一定会喜欢它的!

JavaScript一种解释型的脚本语言,语法灵活,让不同的人对同一个功能有很多种不同的写法。怎样组织JavaScript代码才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?

匿名函数的N种写法

Js的匿名函数是未申明函数名的自执行函数,格式如下:

(function(){})();

实际在项目上我们经常是在前面加上“;”:

;function(){}();

因为Js的语法是可以省略分号的,但是这种机制也会导致意外的错误。为了避免代码上线后合并压缩成一个文件造成语法错误,所以加上“;”可以避免未知错误。

但有时我们看见别人的库或是插件里面会这样写匿名函数:

+function(){}();

“+”在这里是运算符,运算符具有极高的优先级,所以右边的函数声明加上括号的部分(实际上就是函数执行的写法)就直接执行了。其实不止前面可以是“+”号,“-”、“!”、“~”、“++”等运算符均可。这里只是做扩展介绍,具体用哪种写法看团队统一规范。

抛弃Math.ceil()和Math.floor取整

也许在别的代码中看到过这两种符号~~和|0,直接看运行结果:

>> var a1 = 1.23
>> ~~a1
1
>> var a2 = 2.345
>> a2|0
2
>> var a3 = -3.45
>> ~~a3
-3
>> var a4 = -4.5
>> a4|0
-4

注明下,这种写法不是原创,只是引用过来分析和说明下这种另类的写法。简单解释,~是按位取反的运算符,可以将浮点数通过舍去小数点后面的所有位来转换为整数。正整数可转换为无符号的十六进制值。然后再取反一次(~~)负负得正,就得到原来的整数。就是这么任性不爱调方法,你说算不算也是一种优化呢。

注意:如果需要做严格的四舍五入运算就要慎用此方法,那就还是得用Math函数。

if和else也不是唯一

用if-else的条件判断是很清晰的逻辑,在处理数据量不大情况下看起就不是很简洁:

if (a===1) { //此处强烈建议用严格等于符号“===”,不会进行类型转换
a=2
} else if (a===3) {
a=4
} else {
a=5
}

看看用||和&&给代码瘦身后:

((a===1)&&(true,a=2))||((a===3)&&(true,a=4))||(a=5)

一行就搞定,瘦身成功。||和&&,很简单的原理就不用说啦,里面用到逗号运算符还不容易理解,可以继续换成三元运算符:

(a===1 )? a=2:( (a===3) ? (a=4) : (a=5) )

这种写法看起来结构是够简化,但是别人看你的代码会有点吃力。

用toString替代烦人的字符串拼接DOM结构

如果要动态生成一个dom结构一般我们是这样实现的 :

var template = "<div>" 
+ "<h2>{title}</h2>"
+ "<div class='content' yAttr=''>{content}</div>"
+ "</div>"

如果再添加各种属性和参数进去,大、小引号混乱很容易报错。然而ES6提供了Template String帮我们解决了这个问题,你可以这样写:

var template = <div> 
<h2>{title}</h2> 
<div class='content' yAttr=''>{content}</div> 
</div>

 可问题是ES6现在还未正式来啊…不怕,function.toString来解决我们青黄不接时的尴尬:

var rComment = /\/\*([\s\S]*?)\*\//;
// multiply string 
function ms(fn){ 
return fn.toString().match(rComment)[1]
}; 
ms(function(){/* 
<div> 
<h2>{title}</h2> 
<div class='content' yAttr=''>{content}</div> 
</div> */
})

这里的输出和前面的字符串输出一样一样滴,前端程序猿们只需要关注自己的dom结构就好了。

添加AMD模块支持,提示代码B格

给你写的代码声明一下AMD(异步模块定义,Asynchronous Module Definition)模块规范,这样别人就可以直接通过AMD的规范来加载你的模块了,如果别人没有通过规范来加载你的模块,你也可以优雅地返回一个常规的全局对象。来看看jQueryUI的写法:

(function( factory ) { 
if ( typeof define === "function" && define.amd ) { 
// AMD模式。且依赖"jQuery"这个插件 
define( [ "jquery" ], factory ); } 
else { 
// 浏览器全局模式 
factory( jQuery ); 
} 
}(function( $ ) { 
// 这里放模块代码 
return $.widget; 
}));

改成AMD模块的结构,让你的代码更适于浏览器端加载脚本依赖,按照这种格式来写代码,保证别人一看代码就知道你是个专业的开发者。

继承最优法

JavaScript的灵活性,大大小小的继承方式有十余种之多。每种写法优缺点各异,各家方法不一一列举,举个常用的继承方法为例,原型继承:

function Parent() {}
function Child() {}
Child.prototype = Parent.prototype
Child.prototype.constructor = Child ;

这种这种方法实际上是将Child.prototype和Parent.prototype中保存的指针指向了同一个对象,所以子对象原型中扩展一些属性以便之后继续继承的话,父对象的原型也会被改写。所以为了解决这个问题,尝试借用一个临时构造器的写法:

function Empty(){}
Empty.prototype = Parent.prototype;
Child.prototype = new Empty();
Child.prototype.constructor = Child;

这样父对象的自身属性和原型方法得到保护。“最优”有点夸大,但是是相比较而言的。相信每个人都有自己的写法,还有借用call和apply实现属性继承的优缺点,篇幅有限不一一介绍。

总结

上述所有的JavaScript的另类写法,一些是为了程序易懂或者效率提高的语法糖,这样的做法是比较可取的,比如前面所说的省略if-else的做法。一些是为了提升我们代码的兼容性和性能,比如AMD和继承的方式。……本人菜鸟一枚,上述内容肯定还有不全和没解释透彻的地方以后再补充。

以上内容是针对JavaScript的另类写法的相关介绍,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
Angular工具方法学习
Dec 26 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
详解jQuery中的empty、remove和detach
Apr 11 #Javascript
JQuery导航菜单选择特效
Apr 11 #Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 #Javascript
javascript冒泡排序小结
Apr 10 #Javascript
javascript原生ajax写法分享
Apr 10 #Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 #Javascript
jQuery实现点击水纹波动动画
Apr 10 #Javascript
You might like
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
jQuery之过滤元素操作小结
2013/11/30 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
ionic3 懒加载
2017/08/16 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
python爬虫添加请求头代码实例
2019/12/28 Python
python IDLE添加行号显示教程
2020/04/25 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
python爬取抖音视频的实例分析
2021/01/19 Python
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
学生请假条
2014/04/11 职场文书
司法助理专业自荐书
2014/06/13 职场文书
保险专业求职信
2014/07/07 职场文书
师范生教育见习总结
2015/06/23 职场文书
公司管理建议书
2015/09/14 职场文书
情况说明书怎么写
2015/10/08 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python