WEB前端 -- jquery中的;(function ( $, window, document, undefined )介绍

WEB前端 – jquery中的;(function ( $, window, document, undefined )介绍

在jquery插件中我们经常看到以下这段代码：

;(function ( $, window,document, undefined ){
 //函数体内具体代码
 })(jQuery, window,document);

解释:

1.分号

代码前面的分号,可以防止多个文件压缩合并比为其他文件的最后一行语句没加分号,而引起合并后的语法错误

2.匿名函数(function(){})();

由于JavaScript执行表达式是从圆括号里面到外面,所以可以用圆括号强制执行声明的函数.避免函数体内和外部的变量冲突.

$实参

是jQuery的简写,这里$接受jQuery对象,也是为了避免$变量冲突,保证插件可以正常运行.

window,document实参

分别接受window,document对象,且window,document对象全都是全局环境下的,而在函数体内window,document其实是局部变量,不是全局的window,document对象.

好处：提高性能,减少作用域链的查询时间,若在函数体内需要多次调用window或document对象,这样把window或document对象当做参数传进去,这样做是很必要的.拖插件用不到这2个对象,那就不用传递这两个参数.

undefined形参:

undefined在老一辈的浏览器是不被支持的，直接使用会报错，js框架要考虑到兼容性，因此增加一个形参undefined

自执行的匿名函数：

1. 什么是自执行的匿名函数?
它是指形如这样的函数: (function {// code})();

2. 疑问
为什么(function {// code})();可以被执行, 而function {// code}();却会报错?

3. 分析
(1). 首先, 要清楚两者的区别:
(function {// code})是表达式, function {// code}是函数声明.
(2). 其次, js"预编译"的特点:
js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.
(3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;
当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.

另外， 函数转换为表达式的方法并不一定要靠分组操作符()，我们还可以用void操作符，~操作符，!操作符……
如：
!function(){
alert(“另类的匿名函数自执行”);
}();

参考文档：http://www.jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0628/290.html
https://www.cnblogs.com/baiJr/p/6135979.html