论坛首页 Web前端技术论坛

我对Javascript闭包的理解

浏览 17229 次
精华帖 (1) :: 良好帖 (12) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-12-11  
中国这些个牛人高手专家们,什么时候能把技术书籍写的跟相声快板一样喜闻乐见就太好了。
0 请登录后投票
   发表时间:2011-12-12  
读起来挺带感的...
0 请登录后投票
   发表时间:2011-12-12  
支持。博主这种钻研精神!
0 请登录后投票
   发表时间:2011-12-12  
下面是jquery代码结构的分析,我主要是把闭包的结构分解出来,剩下的东西,大家可以和源码对比一下

第一次分解
/***********************************************/
/*代码总体结构是一个闭包*/
(function(window, undefined){

})(window);

/*这个写法等价与*/
function fun(win, undefined){

}
fun(window);


第二次分解
/***********************************************/
/*代码总体结构是一个闭包*/
(function(window, undefined){
//定义三个变量
var document = window.document,
  navigator = window.navigator,
  location = window.location;
//定义真正工作的对象
var jquery = (function(){

})();
window.jQuery = window.$ = jQuery;
})(window);



第三次分解
/***********************************************/
/*代码总体结构是一个闭包*/
(function(window, undefined){
//定义三个变量
var document = window.document,
  navigator = window.navigator,
  location = window.location;
//定义真正工作的对象
var jQuery = (function(){
//从这里开始是定义了一堆的局部变量
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
},
_jQuery = window.jQuery,
/* ...  */
class2type = {};
//局部变量的定义到这里结束。

/*这个是真正的jQuery初始化函数*/
jQuery.fn = jQuery.prototype ={/* ...  */};
jQuery.fn.init.prototype = jQuery.fn;
jQuery.extend = jQuery.fn.extend = function() {/* ...  */}

jQuery.extend({/* ...  */});

jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) {});

/*以下是一些局部使用的函数*/
browserMatch = jQuery.uaMatch( userAgent );
browserMatch = jQuery.uaMatch( userAgent );

if ( browserMatch.browser ) {
jQuery.browser[ browserMatch.browser ] = true;
jQuery.browser.version = browserMatch.version;
}

// Deprecated, use jQuery.browser.webkit instead
if ( jQuery.browser.webkit ) {
jQuery.browser.safari = true;
}

// IE doesn't match non-breaking spaces with \s
if ( rnotwhite.test( "\xA0" ) ) {
trimLeft = /^[\s\xA0]+/;
trimRight = /[\s\xA0]+$/;
}

// All jQuery objects should point back to these
rootjQuery = jQuery(document);

// Cleanup functions for the document ready method
if ( document.addEventListener ) {
/* ...  */
} else if ( document.attachEvent ) {
/* ...  */
}

// The DOM ready check for Internet Explorer
function doScrollCheck() {/* ...  */ }

return jQuery;
})();
window.jQuery = window.$ = jQuery;
})(window);
/***********************************************/
0 请登录后投票
   发表时间:2011-12-13  
哈哈,有意思,看好多遍都忘,这次忘不了了
0 请登录后投票
   发表时间:2011-12-14  
panduozhi 写道
下面是jquery代码结构的分析,我主要是把闭包的结构分解出来,剩下的东西,大家可以和源码对比一下

第一次分解
/***********************************************/
/*代码总体结构是一个闭包*/
(function(window, undefined){

})(window);

/*这个写法等价与*/
function fun(win, undefined){

}
fun(window);


第二次分解
/***********************************************/
/*代码总体结构是一个闭包*/
(function(window, undefined){
//定义三个变量
var document = window.document,
  navigator = window.navigator,
  location = window.location;
//定义真正工作的对象
var jquery = (function(){

})();
window.jQuery = window.$ = jQuery;
})(window);



第三次分解
/***********************************************/
/*代码总体结构是一个闭包*/
(function(window, undefined){
//定义三个变量
var document = window.document,
  navigator = window.navigator,
  location = window.location;
//定义真正工作的对象
var jQuery = (function(){
//从这里开始是定义了一堆的局部变量
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
},
_jQuery = window.jQuery,
/* ...  */
class2type = {};
//局部变量的定义到这里结束。

/*这个是真正的jQuery初始化函数*/
jQuery.fn = jQuery.prototype ={/* ...  */};
jQuery.fn.init.prototype = jQuery.fn;
jQuery.extend = jQuery.fn.extend = function() {/* ...  */}

jQuery.extend({/* ...  */});

jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) {});

/*以下是一些局部使用的函数*/
browserMatch = jQuery.uaMatch( userAgent );
browserMatch = jQuery.uaMatch( userAgent );

if ( browserMatch.browser ) {
jQuery.browser[ browserMatch.browser ] = true;
jQuery.browser.version = browserMatch.version;
}

// Deprecated, use jQuery.browser.webkit instead
if ( jQuery.browser.webkit ) {
jQuery.browser.safari = true;
}

// IE doesn't match non-breaking spaces with \s
if ( rnotwhite.test( "\xA0" ) ) {
trimLeft = /^[\s\xA0]+/;
trimRight = /[\s\xA0]+$/;
}

// All jQuery objects should point back to these
rootjQuery = jQuery(document);

// Cleanup functions for the document ready method
if ( document.addEventListener ) {
/* ...  */
} else if ( document.attachEvent ) {
/* ...  */
}

// The DOM ready check for Internet Explorer
function doScrollCheck() {/* ...  */ }

return jQuery;
})();
window.jQuery = window.$ = jQuery;
})(window);
/***********************************************/

分析的很好!
0 请登录后投票
   发表时间:2011-12-14  
今天豁然开朗。
0 请登录后投票
   发表时间:2011-12-15  
以前看到有个经典的解释忘了在哪了:
闭包是外部的代码引用了function内部的一个局部变量,所以如果外部的引用一直存在,则该function局部成员不会释放
0 请登录后投票
   发表时间:2011-12-15  
简明扼要...
0 请登录后投票
   发表时间:2011-12-15  
tmd()调用处(匿名函数外部)得不到tmdNum哈!?
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics