jquery插件开发;(function ( $, window, document, undefined ){}(jQuery, window,document)分析

经常看到许多jquery插件是这种形式:

;(function( $, window, document, undefined ){}){
      //...code
}(jquery,window,document)

一开始自己也是不太清楚,后台查了许多资料博客,基本了解大意,所以总结出来,以供之后查阅更正。

1.自调函数(function(){})()

这是一个自调函数,函数定义后自行调用。将匿名函数放在括号之内,并紧跟一个括号。第二个括号的意思是“立即调用”。同时第二个括号也是向匿名函数传递参数的地方。

比如:

(function(){
    alert(1);       //输出1
})();

(function(name){
    alert(name);    //输出xiaoming
})("xiaoming");

使用自调匿名函数好处是不会产生任何全局变量。缺点是无法重复执行(除非放在某个循环或其他函数中)。因此,匿名自调函数适合只执行一次性或初始化的任务。对于插件来说,这种定义方式,既不会产生全局变量,同时引入一次就够了。
据此回到插件的这种写法,可以理解为,该插件需要传入jquery,window,document,undefinded;几个参数作用为:

(a)$实参:$是jquery的简写,很多方法和类库也使用$,这里$接受jQuery对象,也是为了避免$变量冲突,保证插件可以正常运行。

(b)window, document实参分别接受window, document对象,window, document对象都是全局环境下的,而在函数体内的window, document其实是局部变量,不是全局的window, document对象。这样做有个好处就是可以提高性能,减少作用域链的查询时间,如果你在函数体内需要多次调用window 或 document对象,这样把window 或 document对象当作参数传进去,这样做是非常有必要的。当然如果你的插件用不到这两个对象,那么就不用传递这两个参数了。

(c)最后剩下一个undefined形参了,那么这个形参是干什么用的呢,看起来是有点多余。undefined在老一辈的浏览器是不被支持的,直接使用会报错,js框架要考虑到兼容性,因此增加一个形参undefined

2.“;”分号作用:防止多个文件压缩合并以为其他文件最后一行语句没加分号,而引起合并后的语法错误。

总结:插件这种形式,本质就是定义一个匿名自调函数,同时为了提高性能或者兼容性,增加了“;”传入jquery,window,document,undefinded参数。

参考资料:《javascript面向对象编程》Stoyan Stefanov著;

《高性能javascript》

时间: 2024-10-20 01:21:56

jquery插件开发;(function ( $, window, document, undefined ){}(jQuery, window,document)分析的相关文章

jQuery插件开发(一):jQuery类方法

一.jQuery插件开发的方法 jQuery插件的编写方法主要有两种: 1.基于jQuery对象的插件 2.基于jQuery类的插件 二.基于jQuery类的插件 1.什么是jQuery类的插件? jQuery类方法其实就是jquery全局函数,即jquery对象的方法,实际上就是位于jquery命名空间的内部函数.这些函数有一个特征就是不操作DOM元素,而是操作 Javascript非元素对象.直观的理解就是给jquery类添加类方法,可以理解为添加静态方法 2.给jQuery类添加方法. /

jQuery插件开发,jquery插件

关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课.开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多.这里我把我自己总结出来的东西分享出来,帮助那些和我一样曾经遇到过同样问题的人. 我要做什么 我想要得到的javascript 插件应该会有以下几个特征 * 以下的代码均假设存在 jQuery 插件的第一形态 面对这种情况,通常我们会通过定义function的方式来实现. function pluginName($selector){

jQuery插件开发前准备

[前言] 关于jQuery的插件,网上一搜一大把,一开始在项目中使用别人写的插件的时候,真是佩服的五体投地,调用的时候简简单单的几句代码,就能实现很复杂的功能.那么如何开发自己的插件呢?其实并不难,从简单的开始,一步一步网上添加功能,最后咋们也能写出功能强大的插件. [jQuery插件开发模式] jQuery插件开发模式有三种: (1)通过$.extend()来扩展jQuery 多用于拓展工具方法,比如给一个数组封装一个方法,功能是将其中的重复元素删除:$.removeSameItem([1,1

详解jquery插件中参数( $, window, document, undefined )的作用

示例代码如下: 1 ;(function($,window,document){ 2 //行内代码 3 })(jQuery,window,document); 1.代码最前面的分号,可以防止多个文件压缩合并时其他文件最后一行语句没加分号,而引起合并后的语法错误: 2.匿名函数(function(){})(); 由于Javascript执行表达式是从圆括号里面到外面,所以可以用圆括号强制执行声明的函数.避免函数体内和外部的变量冲突. 3.$:$是jquery的简写,很多方法和类库也使用$,这里$接

转载 jquery $(document).ready() 与window.onload的区别

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个          $(d

[Javascript]jquery $(document).ready() 与window.onload的区别

引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间         window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同      

js中window.onload与jquery中$(document.ready())的区别

$(document).ready()是在DOM结构载入完后执行的,而window.onload是得在所有文件都加载完后执行的,注意区别,一个是DOM加载完,一个是所有文件加载完 耳听为虚,眼见为实.通过下面的实例可查看两者的异同(注意:aa.jpg最好是一张大容量图片) <html> <head> <script type='text/javascript' src='jquery-1.3.2.min.js'></script> <script ty

jQuery $(document).ready()和window.onload

jQuery $(document).ready()和window.onload 根据ready()方法的API说明http://api.jquery.com/ready/. 这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded. 即当DOM加载完毕的时候,执行这个指定的方法. 因为只有document的状态ready之后,对page的操作才是

;(function( $, window, undefined ){ }(jQuery,window))为何需要往里面传$,window,undefined这些参数

(function( $, jQuery , undefined ) {})(jQuery); 为什么要将window和undefined作为参数传给它? 因为 ecmascript 执行JS代码是从里到外,因此把全局变量window或jQuery对象传进来,就避免了到外层去寻找,提高效率.undefined在老一辈的浏览器是不被支持的,直接使用会报错,js框架要考虑到兼容性,因此增加一个形参undefined. var undefined = 8; (function( window ) {