js组件中那些晦涩难懂的写法,理解这个以后看组件会容易很多,包括JQ源码

来源:互联网 发布:java中compare to 编辑:程序博客网 时间:2024/06/07 10:30

以下会列出一些常见的简洁写法:

1 (function(){})()

基本上现在能看到的组件都是以这种形式来写的,这样写有什么好处?首先第一个就是防止全局变量的污染,那它是怎么个防止法呢?比如下面的写法:

//1:普通写法xx.js文件var a,b,c;//全局变量function k(){}k();//假设我们在一个文件中,引入了两个js组件,而且他们的写法都是上面这种形式,那么这两个文件的全局变量就会有冲突,最后我们获得的值将会是最后倒入的JS文件的值。为了防止这个情况的发生//(function(){})()就是很好的写法,比如(function(){var a,b,c;//这些变量只会存在于这个匿名函数当中,如果要调用这里面的参数,我们可以通过命名空间来区分,比如window.xx={//把它挂载到window对象上面,则我们可以通过xx这个命名来调用内部的局部变量,同理,其他的组件也以这种方式来处理,只要命名空间不一致,就不会出现冲突a:a,f:function(){...}}})()

另外(function(){})()这个写法,实际的意思是,立即执行里面的匿名函数,其根本就是()运算符,通常我们会将比较长的表达式用()括起来,形成一个整体,这里也是同样的道理,用()将匿名函数包裹起来,意思就是将它作为一个整体并返回,实际上它就是将括号里面的东西作为一个整体返回,因此,括号里面是个匿名函数,则返回一个匿名函数,再在后面加上一个括号,实际上就是调用该返回的匿名函数,这就是()()的写法

2 逗号运算符

我们经常会看到类似于 return a,b;这种写法,实际上意思是,依次从左到右执行并返回最后一个表达式的值
比如:

(function(){var T=function(){var a,b;return a=1,b=2,console.log(a),b;}console.log(T());})()//结果输出  1   2//前面两个表达式复制完毕后输出a,也就是1,然后返回 b在console.log(T())中再次输出返回的b值//这就是逗号运算符

() 小括号,广义的代码包装

在三元表达式中我们可能会看到以下的写法

var t=(a>2,b<1)?(console.log('Y'),'yes'):(console.log('N'),'no');

上面这个表达式中,有()以及前面提到的逗号运算符,()把括号内部的运算作为一个整体,逗号运算符则返回最右侧的值,也就是说,真正决定输出Y或者N的是b的值,而与a无关,所以只要b的取值<1,则会执行
(console.log('Y','yes'))
所以结果会先输出‘Y’,然后t被赋值为’yes’

||、&&、if()之间的使用

通常情况下我们会通过if判断语句来判断,但是我们又经常能看见类似于:a&&a()这种写法

那么它到底是什么意思,我们先来了解&&的用法,我们都知道在双&的情况下,只要满足了判断的条件,它是不会去检测右侧的表达式的,比如

0&&1左侧已经确认是false,则不会再去判断右侧的值是真假,只有左侧为真的时候,他才会继续判断右侧是否为真,所以他的用法就相当于

if(0){1}//因为是false,他不会再去检测右侧,也就相当于if语句中,如果为false不回去执行里面的内容,所以我们经常看到对于一个function的判断是这样的假设function a(){}a&&a()等价于if(a){a();}那么什么时候a才是真的呢?我们只要记住有N种情况js是将它视为false:1 false2 03 null4 ''5 undefined6 NaN其他情况全是真,同理,||也是如此,只要左侧为真,则不会执行右侧,除非左侧为false,一般我们会用来做赋值语句:var a=xx||1只要xx为false则a=1 console.log(0||1);//输出1再把上面的集中起来var T=(a,b,c,d)&&(e,f)||g;几个表达式之间为&&运算,则表示依次运算几个表达式的值,如果都为真值则返回最后一个表达式的值,自己可以通过console.log(9&&0||1)来体验一下他们的运算方式,此处结果为1console.log(9&&10||1) //结果为10

搞懂了上面的运算符,相信大部分组件都能看懂,只不过里面可能写了很多很长很长的表达式,可能是几个,有可能是十几个,只要拆分开来,理解了运算符的用法就可以了。

所以以后我们也可以写 a&&a()来替代 if(a){a()};此处要说明的是对象也为真,a是一个function所以值也是真。

大量运用这些算法,可以看出是非常简洁的,同时也是不好阅读的。所以一般不是对加载优化需求特别强烈的时候不建议这样写,毕竟不利于阅读。简短的一些表达式可以这样写,很清晰,如果是十几个表达式连在一起就不好阅读了,感受下:

e.circular || (f.onBeforeSeek(function(a, b) {                      setTimeout(function() {                                  a.isDefaultPrevented()                                          || (n.toggleClass(e.disabledClass,                                                  b <= 0), o.toggleClass(                                                  e.disabledClass, b >= f                                                          .getSize()                                                          - 1))                              }, 1)                  }), e.initialIndex || n.addClass(e.disabledClass)), f.getSize() < 2                  && n.add(o).addClass(e.disabledClass), e.mousewheel                  && a.fn.mousewheel && b.mousewheel(function(a, b) {                              if (e.mousewheel) {                                  f.move(b < 0 ? 1 : -1, e.wheelSpeed || 50);                                  return !1                              }                          });  
阅读全文
0 0
原创粉丝点击