隨著時代發展,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指針指當前對象實例。