隨著時代發展,javascript陣營裡面出現了越來越多的優秀的框架,大大簡化了我們的開發工作,在我們使用這些框架的時候是不是也應該飲水思源想想它們都是怎樣構建起來的呢?如果你不滿足於僅僅是使用一些現成的API,而是深入了解它們內部的實現機制(照某人的說法, API是貶值最快的東西),最好的辦法就是閱讀它們的源代碼了,前提是你讀懂。
最近兩天研究了一下jQuery的源碼,在這裡將本人一些粗淺認識分享出來,不當之處請各位指正。好了,下面我們就來看看jQuery大概是怎麼運作的,我假定你已經具備了一些基本的javascript知識,如果基礎不夠俺推薦你閱讀《JavaScript高級程式設計》和《悟透JavaScript》這兩本書。本文不適合對js裡面的類別、物件、函數、prototype等概念沒有了解的朋友。
我們從最開始的說起:
首先建構一個物件給使用者,假定我們這個框架叫Shaka ( 俺的名字;) )
var Shaka = function(){}; 這裡我們建立了一個空函數,裡面什麼都沒有,這個函數其實就是我們的建構子。為了讓我們產生的物件能夠呼叫在prototype裡定義出來的方法, 我們需要用原型的方式(把Shaka當作是一個類別)給Shaka加入一些方法,於是定義:
Shaka.fn = Shaka.prototype = {};
這裡的Shaka.fn相當於Shaka.prototype的別名,方便以後使用,它們指向同一個引用。
OK,我們添加一個sayHello的方法, 給Shaka添加一個參數,這樣這個框架最基本的樣子已經有了,如果它有生命的話那麼它現在是1歲, 看代碼:
運行程式碼框
[Ctrl+A 全部選擇提示:你可先修改部分程式碼,再按執行]
好啦,先別激動, 我們注意到這個框架跟jQuery在使用上是有一些差別的, 比如在jq 中我們可以這樣寫:
jQuery('#myid').someMethod();
這是怎麼做到的呢, 也就是說jQuery()這個建構子回傳了一個jQuery的物件實例,因此我們可以在上面呼叫它的方法,所以Shaka的建構子應該回傳一個實例,它看起來應該是這個樣子:
var Shaka = function(){ return //傳回Shaka的實例; };
那我們要如何取得一個Shaka的實例呢, 我們先來回顧一下使用prototype方式來模擬類別的時候var someObj = new MyClass(); 這個時候實際上是創建一個新物件someObje,把新物件當作this指針,呼叫MyClass函數,即類別的建構子, 然後someObj 就獲得了在MyClass.prototype裡面定義的方法, 這些方法內的this指標指當前物件實例。