從jQuery學到的幾件事情

最近想看一下jquery原始碼，搜到了這樣一篇部落格《從jquery原始碼學到的10件事情》

黑箱系統的概念是給定輸入返回輸出的乙個系統，黑箱把實現過程進行封裝。這裡說的jquery黑箱是為js全域性變數window輸出jquery 和 $,而過程被封裝到黑箱裡，與外界互不干擾。

jquery 1.4版本的黑箱是利用了類似如下的自執行函式

(function( window, undefined){})(window)

作者給了乙個比較通用的實現黑箱的方法

undefined = true;
(function(window, document, undefined)
})(this, document)

jquery的黑箱裡多傳了第三個形參叫做undefined，而傳實參的時候並沒有傳值，js裡沒有傳值的形參會被設定為undefined,保證了黑箱內部undefined的正確性。js中，undefined作為乙個全域性屬性，是可以被賦值的，比如上述**中的undefined = true;

以自執行函式的模式實現黑箱的另外乙個好處是利於壓縮，比如下述的情況，我們只需要在黑箱內部使用簡單的變數。

(function(a, b, c)))(this, document)

作者為匿名函式自執行舉了很多例子，比如下面這個，為頁面的某一部分不停地更新（以及不斷地執行）

(function loop())
//settimeout(loop, 100)
})()

jquery 1.11版本的黑箱採用了全新的工廠方法，本文不**

這個函式的差異不大，1.11 版本**如下

var
// map over jquery in case of overwrite
_jquery = window.jquery,
// map over the $ in case of overwrite
_$ = window.$;
jquery.noconflict = function( deep ) 
if ( deep && window.jquery === jquery ) 
return jquery;
};

我們可以看到防衝突的實現是先把之前的jquery 和 $ 存起來，noconflict被呼叫的時候，再還給它們

1.4版本用的是props物件來存放jquery對屬性操作與原生js屬性操作的對應關係

1.11版縮減版本是這樣的

jquery.extend(,
prop: function( elem, name, value ) ,
prophooks: 
});jquery.each([
"tabindex",
"readonly",
"maxlength",
"cellspacing",
"cellpadding",
"rowspan",
"colspan",
"usemap",
"frameborder",
"contenteditable"
], function() );

propfix這個物件是存放對應關係表的，比如class轉換成classname，prop函式負責處理這個關係表。

而下面的each很有意思，遍歷陣列中那些屬性，然後把他們小寫格式對應到自己，放到propfix

我們知道在jquery裡一些動畫我們可以直接通過normal,fast,slow 來定義實現速度，這個在原始碼裡是這樣定義的

jquery.fx.speeds = ;

調皮的原作者做了這樣一些事情：

var isie 
//...
jquery.fx.speeds._default = isie ? 800 : 400
jquery.fx.speeds.veryfast = 200;
$('...').fadein('veryfast')

一種是可以對default屬性做條件判斷，還有一種自定義速度，比如」veryfast」

ready函式 1.11版本和1.4版本有較大的差距，新版中很多東西我也不太能理解，我們就簡單的把核心拿出來看一下

jquery.ready.promise = function( obj )  else if ( document.addeventlistener )  else  catch(e) {}
if ( top && top.doscroll ) catch(e) 
// detach all dom ready events
detach();
// and execute any waiting functions
jquery.ready();
}})();}}
}return readylist.promise( obj );
};

.ready 利用了下面的.promise去做確保載入完成的工作，重點是

document.addeventlistener( "domcontentloaded", completed, false );

window.addeventlistener( "load", completed, false );

document.attachevent( "onreadystatechange", completed );

window.attachevent( "onload", completed );

相容性考量的四種檢查方式

$('#id').find('tag.thing') --- faster
$('#id tag.thing') ------- using sizzle

原作者在這裡說了乙個jquery效率的問題，上面的方法更快一些，而下面的方法稍微慢,簡單地說是因為下面的方法呼叫了sizzle，通過sizzle其實轉換成上述的模式，而id的呼叫則是直接過jquery.init.

這裡需要擴充套件一下，我們來看一下1.11裡jquery物件究竟長啥樣

jquery = function( selector, context )

jquery物件其實是return了乙個它自己的建構函式叫做init,我們再來看一下init做了些什麼

// initialize a jquery object
init = jquery.fn.init = function( selector, context ) ;
// give the init function the jquery prototype for later instantiation
init.prototype = jquery.fn;

jq的狀態選擇符，比如:not,:has,:eq存放在

sizzle.selectors.pseudos裡面

從jQuery學到的幾件事情

重灌ubuntu後要做的幾件事情

Python 編碼時應該注意的幾件事情

傷自尊的幾件事

從jQuery學到的幾件事情

重灌ubuntu後要做的幾件事情

Python 編碼時應該注意的幾件事情

傷自尊的幾件事

相關推薦