最近想看一下jquery原始碼,搜到了這樣一篇部落格《從jquery原始碼學到的10件事情》
黑箱系統的概念是給定輸入返回輸出的乙個系統,黑箱把實現過程進行封裝。這裡說的jquery黑箱是為js全域性變數window輸出jquery 和 $,而過程被封裝到黑箱裡,與外界互不干擾。
jquery 1.4版本的黑箱是利用了類似如下的自執行函式
(function( window, undefined){})(window)
作者給了乙個比較通用的實現黑箱的方法
jquery的黑箱裡多傳了第三個形參叫做undefined,而傳實參的時候並沒有傳值,js裡沒有傳值的形參會被設定為undefined,保證了黑箱內部undefined的正確性。js中,undefined作為乙個全域性屬性,是可以被賦值的,比如上述**中的undefined = true;
(function(window, document, undefined)
})(this, document)
undefined = true;
以自執行函式的模式實現黑箱的另外乙個好處是利於壓縮,比如下述的情況,我們只需要在黑箱內部使用簡單的變數。
(function(a, b, c)))(this, document)
作者為匿名函式自執行舉了很多例子,比如下面這個,為頁面的某一部分不停地更新(以及不斷地執行)
jquery 1.11版本的黑箱採用了全新的工廠方法,本文不**(function loop())
//settimeout(loop, 100)
})()
這個函式的差異不大,1.11 版本**如下
我們可以看到防衝突的實現是先把之前的jquery 和 $ 存起來,noconflict被呼叫的時候,再還給它們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;
};
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 = ;
調皮的原作者做了這樣一些事情:
一種是可以對default屬性做條件判斷,還有一種自定義速度,比如」veryfast」var isie
//...
jquery.fx.speeds._default = isie ? 800 : 400
jquery.fx.speeds.veryfast = 200;
$('...').fadein('veryfast')
ready函式 1.11版本和1.4版本有較大的差距,新版中很多東西我也不太能理解,我們就簡單的把核心拿出來看一下
.ready 利用了下面的.promise去做確保載入完成的工作,重點是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 );
};
document.addeventlistener( "domcontentloaded", completed, false );
window.addeventlistener( "load", completed, false );
document.attachevent( "onreadystatechange", completed );
window.attachevent( "onload", completed );
相容性考量的四種檢查方式
原作者在這裡說了乙個jquery效率的問題,上面的方法更快一些,而下面的方法稍微慢,簡單地說是因為下面的方法呼叫了sizzle,通過sizzle其實轉換成上述的模式,而id的呼叫則是直接過jquery.init.$('#id').find('tag.thing') --- faster
$('#id tag.thing') ------- using sizzle
這裡需要擴充套件一下,我們來看一下1.11裡jquery物件究竟長啥樣
jquery = function( selector, context )
jquery物件其實是return了乙個它自己的建構函式叫做init,我們再來看一下init做了些什麼
jq的狀態選擇符,比如// 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;
:not
,:has
,:eq
存放在
sizzle.selectors.pseudos
裡面
重灌ubuntu後要做的幾件事情
root 帳號 sudo passwd root bashrc alias cls clear screen vimrc 安裝vim後修改.vimrc檔案內容如下 高亮顯示匹配的括號 set showmatch 繼承前一行的縮排方式,特別適用於多行注釋 set autoindent 為c程式提供自動...
Python 編碼時應該注意的幾件事情
在程式設計過程中,多了解語言周邊的一些知識,以及一些技巧,可以讓你加速成為乙個優秀的程式設計師。對於python程式設計師,你需要注意一下本文所提到的這些事情。你也可以看看 zen of python python之禪 這裡面提到了一些注意事項,並配以示例,可以幫助你快速提高。1.漂亮勝於醜陋 實現...
傷自尊的幾件事
傷自尊 記得小時候屬於人見人愛那種小孩子,尤其是父母的同事們特別喜歡,總教我唱歌跳舞啥的。十幾年過去了,有天有位叔叔和我媽在街上碰到了,他們兩個相當意外,也很高興。當我媽就介紹了一下我,這位叔叔瞅了我好幾眼,喃喃的說了 啊!十多年沒見,咋長成這樣了!真傷自尊啊!做運動去 年夏天的乙個傍晚,沒事幹和l...