关于jQuery源码中(function(window,undefined){//dosomething()})(window)写法解释

时间:2022-12-27 16:37:42

  一、首先是最常见的闭包 (Closure) 范式自执行函数的写法,这里用匿名函数封装(构造块级作用域),避免了匿名函数内部的代码与外部之间发生冲突(如使用了相同的变量名).

(function() {// ...})();

  二、自执行函数和其他函数类似,都可以传入参数:jQuery源码中将window作为一个参数传入, window是DOM对象模型的最顶层对象,把全局变量传进来,就避免了到外层去寻找,提高效率:

(function(window) {// ...})(window);

当然你也可以写成这样去压缩代码,在自执行函数里面就可以通过win去访问window全局对象了

(function(win) {// ...})(window);

  三、最重要的是undefined参数,将undefined(未定义)作为一个的参数传入,防止undefined在外围被定义(占用)(undefined非关键字)。还有undefined在老一辈的浏览器是不被支持的,直接使用会报错,考虑兼容性,因此增加一个形参undefined。不要用window.undefined传递给形参,window.undefined有可能被其他人修改了,最好就是甚么都不传,形参的undefined就是真正的undefined。

 var undefined=myValue;
(function(window){
  alert(window.undefined); //myValue
  alert(undefined); //myValue
})(window); var undefined=myValue;
(function(window,undefined){
  alert(window.undefined); //myValue
  alert(undefined); //此处undefined参数为局部的名称为undefined变量,值为undefined
})(window);

  所以后者,就算外面的人把 undefined 定义了,里面的 undefined 依然不受影响

  另外:jQuery都是以$(function(){//$('#box').onclick=function(){//handle};......})开始的分析:

 // All jQuery objects should point back to these
rootjQuery = jQuery(document); // Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
}, jQuery.fn = jQuery.prototype = {
// The current version of jQuery being used
jquery: core_version,
constructor: jQuery,
init: function( selector, context, rootjQuery ) {
...... // HANDLE: $(function)
// Shortcut for document ready
else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}

  由源码我们可以得知其实$(function(){})===jQuery(document).ready(function(){})==window.onload=function(){}

  但是前者是页面框架加载完成就执行,后者页面中所有内容加载完成才执行