|
隨著時(shí)代發(fā)展，javascript陣營(yíng)里面出現(xiàn)了越來(lái)越多的優(yōu)秀的框架，大大簡(jiǎn)化了我們的開發(fā)工作，在我們使用這些框架的時(shí)候是不是也應(yīng)該飲水思源想想它們都是怎樣構(gòu)建起來(lái)的呢？如果你不滿足于僅僅是使用一些現(xiàn)成的API，而是深入了解它們內(nèi)部的實(shí)現(xiàn)機(jī)制(照某人的說(shuō)法, API是貶值最快的東西)，最好的辦法就是閱讀它們的源代碼了，前提是你讀得懂。
最近兩天研究了一下jQuery的源碼，在這里將本人一些粗淺認(rèn)識(shí)分享出來(lái)，不當(dāng)之處請(qǐng)各位指正。好了，下面我們就來(lái)看看jQuery大概是怎樣工作的，我假定你已經(jīng)具備了一些基本的javascript知識(shí)，如果基礎(chǔ)不夠俺推薦你閱讀《JavaScript高級(jí)程序設(shè)計(jì)》和《悟透JavaScript》這兩本書。本文不適合對(duì)js里面的類、對(duì)象、函數(shù)、prototype等概念沒(méi)有了解的朋友。
我們從最開始的說(shuō)起:
首先構(gòu)造一個(gè)對(duì)象給使用者，假定我們這個(gè)框架叫 Shaka ( 俺的名字;) )
var Shaka = function(){}; 這里我們創(chuàng)建了一個(gè)空函數(shù)，里面什么也沒(méi)有，這個(gè)函數(shù)實(shí)際上就是我們的構(gòu)造函數(shù)。為了讓我們生成的對(duì)象能夠調(diào)用在prototype里定義出來(lái)的方法, 我們需要用原型的方式(把Shaka當(dāng)作是一個(gè)類)給Shaka添加一些方法，于是定義：
Shaka.fn = Shaka.prototype = {};
這里的Shaka.fn相當(dāng)于Shaka.prototype的別名，方便以后使用，它們指向同一個(gè)引用。
OK，我們添加一個(gè)sayHello的方法, 給Shaka添加一個(gè)參數(shù)，這樣這個(gè)框架最基本的樣子已經(jīng)有了，如果它有生命的話那么它現(xiàn)在是1歲, 看代碼：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
好啦，先別激動(dòng), 我們注意到這個(gè)框架跟jQuery在使用上是有一些差別的, 比如在jq 中我們可以這樣寫：
jQuery('#myid').someMethod();
這是怎樣做到的呢, 也就是說(shuō) jQuery()這個(gè)構(gòu)造函數(shù)返回了一個(gè)jQuery的對(duì)象實(shí)例，因此我們可以在上面調(diào)用它的方法，所以Shaka的構(gòu)造函數(shù)應(yīng)該返回一個(gè)實(shí)例，它看起來(lái)應(yīng)該是這個(gè)樣子：
var Shaka = function(){ return //返回Shaka的實(shí)例; };
那么我們要如何取得一個(gè)Shaka的實(shí)例呢, 我們先來(lái)回顧一下使用prototype方式來(lái)模擬類的時(shí)候 var someObj = new MyClass(); 這個(gè)時(shí)候?qū)嶋H上是創(chuàng)建一個(gè)新對(duì)象someObje，把新對(duì)象作為this指針，調(diào)用 MyClass函數(shù),即類的構(gòu)造函數(shù), 然后 someObj 就獲得了在 MyClass.prototype里面定義的方法, 這些方法內(nèi)的this指針指當(dāng)前對(duì)象實(shí)例。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 從零開始寫jQuery框架 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 從零開始寫jQuery框架 [1]
第 2 頁(yè) 
