大致說明JQuery源碼研究說明
時代在發(fā)展技術(shù)也在提高，JQuery源碼陣營里面出現(xiàn)了越來越多的優(yōu)秀的框架，大大簡化了我們的開發(fā)工作，在我們使用這些框架的時候是不是也應(yīng)該飲水思源想想它們都是怎樣構(gòu)建起來的呢？
最近兩天研究了一下JQuery源碼，在這里將本人一些粗淺認(rèn)識分享出來，不當(dāng)之處請各位指正。好了，下面我們就來看看jQuery大概是怎樣工作的，我假定你已經(jīng)具備了一些基本的javascript知識，如果基礎(chǔ)不夠俺推薦你閱讀《JavaScript高級程序設(shè)計》和《悟透JavaScript》這兩本書。本文不適合對js里面的類、對象、函數(shù)、prototype等概念沒有了解的朋友。#t#
我們從最開始的說起:
首先構(gòu)造一個對象給使用者，假定我們這個框架叫 Shaka ( 俺的名字;) var Shaka = function(){}; 這里我們創(chuàng)建了一個空函數(shù)，里面什么也沒有，這個函數(shù)實際上就是我們的構(gòu)造函數(shù)。為了讓我們生成的對象能夠調(diào)用在prototype里定義出來的方法。
我們需要用原型的方式(把Shaka當(dāng)作是一個類)給Shaka添加一些方法，于是定義：
Shaka.fn = Shaka.prototype = {}; 這里的Shaka.fn相當(dāng)于Shaka.prototype的別名，方便以后使用，JQuery源碼指向同一個引用。OK，我們添加一個sayHello的方法, 給Shaka添加一個參數(shù)，這樣這個框架最基本的樣子已經(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>
好啦，先別激動, 我們注意到這個框架跟jQuery在使用上是有一些差別的, 比如在jq 中我們可以這樣寫jQuery('#myid').someMethod(); 這是怎樣做到的呢, 也就是說 jQuery()這個構(gòu)造函數(shù)返回了一個jQuery的對象實例，因此我們可以在上面調(diào)用它的方法，所以Shaka的構(gòu)造函數(shù)應(yīng)該返回一個實例，它看起來應(yīng)該是這個樣子。
var Shaka = function(){ return //返回Shaka的實例; }; 那么我們要如何取得一個Shaka的實例呢, 我們先來回顧一下使用prototype方式來模擬類的時候 var someObj = new MyClass(); 這個時候?qū)嶋H上是創(chuàng)建一個新對象JQuery源碼，把新對象作為this指針，調(diào)用 MyClass函數(shù),即類的構(gòu)造函數(shù), 然后 someObj 就獲得了在 MyClass.prototype里面定義的方法, 這些方法內(nèi)的this指針指當(dāng)前對象實例。
