这篇文章主要介绍了详解 JavaScript 的另类写法的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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 的另类写法的相关介绍,希望对大家有所帮助!
来源: http://www.phperz.com/article/17/0221/266363.html