大致說(shuō)明JQuery源碼研究說(shuō)明
時(shí)代在發(fā)展技術(shù)也在提高，JQuery源碼陣營(yíng)里面出現(xiàn)了越來(lái)越多的優(yōu)秀的框架，大大簡(jiǎn)化了我們的開發(fā)工作，在我們使用這些框架的時(shí)候是不是也應(yīng)該飲水思源想想它們都是怎樣構(gòu)建起來(lái)的呢？
最近兩天研究了一下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)有了解的朋友。#t#
我們從最開始的說(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的別名，方便以后使用，JQuery源碼指向同一個(gè)引用。OK，我們添加一個(gè)sayHello的方法, 給Shaka添加一個(gè)參數(shù)，這樣這個(gè)框架最基本的樣子已經(jīng)有了，如果它有生命的話那么它現(xiàn)在是1歲, 看代碼:
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- </head>
- <body>
- <script type="text/javascript">
- var Shaka = function(age){ this.age = age; };
- ShakaShaka.fn = Shaka.prototype = { sayHello: function() { alert('I am a little baby, my age is ' + this.age + ' years old.'); }};
- var babyShaka = new Shaka(1);
- babyShaka.sayHello();
- </script>
- </body>
- </html>
好啦，先別激動(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ì)象JQuery源碼，把新對(duì)象作為this指針，調(diào)用 MyClass函數(shù),即類的構(gòu)造函數(shù), 然后 someObj 就獲得了在 MyClass.prototype里面定義的方法, 這些方法內(nèi)的this指針指當(dāng)前對(duì)象實(shí)例。
