记得那时在学习写基于jQuery的插件时,了解到(function($){...})(jQuery)
的代码结构,一开始还没发觉,后来百度了解它的语意时,从搜索结果中发现了jQuery(function(){...})
,当时就懵逼了(只知道$(function(){}) 23333)。后面通过别人的回答和博客逐渐了解清楚了,今天突然又看到了这个,概念又有些模糊了,恰有时间自己也来总结一下。
本文有些标题党了,其实这两个小东西并不能算兄弟,只不过是长的有些像而已。
1、jQuery(function(){...}):
用过jQuery的人应该都熟悉它真正的兄弟$(function(){...})
【完整版:jQuery(document).ready(function(){...})
】,表示在DOM(文档对象模型)加载好之后对DOM节点进行相应的操作。
2、(function($){...})(jQuery):
这其实是定义一个匿名函数function($){...},然后立即传入实参jQuery执行该函数。由于操作符的优先级,所以给匿名函数加上括号,之所以只在形参处使用$,而实参处使用jQuery,是为了避免与其他库中的$冲突。
为了便于理解,可以将上述语句拆分一下:
1 var fn = function($){ 2 //code 3 .... 4 }; 5 fn(jQuery);//调用函数fn
注意,拆分只是为了方便理解,不是真的存在fn函数。在使用时为了方便和简化代码,将之压缩为(function($){...})(jQuery)
,它的作用可以理解为预定义一些函数(方法),在写基于jQuery的插件时,经常会用到。