通常我们在引入jquery时,或者引用js插件时经常看到开头有一些让人很难以理解的js代码,如果不理解清楚,会对阅读插件源码进行高阶编程造成障碍。
比如,jquery源码中
-
(function( global, factory ) {
//jquery内容window.jQuery = window.$ = jQuery; return jQuery;
});
先来看一个写法如:
- var a = function(t) { return t; }
- (1 + 2).toString();
- alert(a);
注意,上面一个代码片段的第一行之间由于没有分号隔开,就构成了一个匿名函数、导致最终alert的内容a的值为3,如果加了分号隔开,最终结果就是function(t) { return t; }
显然,该匿名函数进行了传参操作,匿名函数的原始写法为
-
(function(param) {
//jquery内容//这里操作param
})(3);
以上小括号里的(3)会作为一个值传递给param;所以就有了以下
- var a = function(t) { return t; }
- (1 + 2).toString(); //由于该行和上一行没有分号,该行又是以小括号开始,符合匿名函数规则即(函数)(参数);注:等同于函数(参数);所以会把计算后3的值传给参数t,最终a的值为3
接下来我们来看一下匿名函数还有没有其它用处
场景是这样的,比如我随便打开一个网页,这个网页加载完,我想在这个网站上绑定我自己的js文件以便达到操作该界面内容的目的,现在以chrome的控制台为例进行如下操作,比如我想在一个页面引入jquery文件,然后通过jquery操作dom元素
代码如下:
-
(function(){ function callback(){ document.head.appendChild(s); }; var s=document.createElement("script"); s.src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"; if(s.addEventListener){ s.addEventListener("load",callback(),false); }else if(s.readyState){ s.onreadystatechange=callback(); }
document.body.appendChild(s);})();//该段代码既可以在url地址栏执行,只要在代码前面加上javascript:即可,也可以在chrome控制台执行
-
var script = document.createElement("script") script.type = "text/javascript"; script.src = "http://cdn.bootcss.com/jquery/3.1.0/jquery.js"; document.getElementsByTagName("head")[0].appendChild(script); //片段2的普通代码和1的效果一样,直接贴到控制台运行,匿名函数可以看作是执行一行代码