|
|
jQuery的開(kāi)篇聲明里有一段非常重要的話：jQuery是為了改變Javascript的編碼方式而設(shè)計(jì)的。從這段話可以看出jQuery本身并不是UI組件庫(kù)或其他的一般AJAX類庫(kù)。jQuery改變Javascript編碼方式！
那么它是如何實(shí)現(xiàn)它的聲明的呢？這里，用以下的一段簡(jiǎn)短的使用流程：
1、查找(創(chuàng)建)jQuery對(duì)象：$("selector");
2、調(diào)用jQuery對(duì)象的方法完成我們需要完成的工作：$("selector").doOurWork();
好了，jQuery就是以這種可以說(shuō)是最簡(jiǎn)單的編碼邏輯來(lái)改變Javascript編碼方式的。這兩個(gè)步驟是jQuery的編碼邏輯核心！
要實(shí)現(xiàn)這種簡(jiǎn)潔編碼方式，創(chuàng)建jQuery對(duì)象這一環(huán)節(jié)至關(guān)重要。因此，jQuery的dom元素查找能力相當(dāng)強(qiáng)悍。此外，jQuery對(duì)象的方法肯定是有限的，有限的方法滿足不了日益增長(zhǎng)各有所需的要求，所以，必須提供jQuery對(duì)象方法的擴(kuò)展能力。
強(qiáng)悍的dom元素查找能力，以及隨心所欲的方法擴(kuò)展，這兩點(diǎn)正是jQuery的核心所在！
來(lái)一個(gè)簡(jiǎn)單的示例，來(lái)說(shuō)明jQuery是如何工作的：
| < !DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head> <title>無(wú)標(biāo)題頁(yè)</title> </head> <body id=”bd”> <a href=”http://www.baidu.com”>baidu</a> </body> </html> <script type=”text/Javascript” src=”../Script/jquery.js”></script> <script type=”text/Javascript” > $(function(){ $(“a“).click(function(e){//1)查找$(”a”);2)jQuery對(duì)象事件click;3)jQuery對(duì)象方法hide $(this).hide(“slow“); return false; }); }); </script> |
jQuery中有一個(gè)“配置”的思想，這一點(diǎn)使得對(duì)象的屬性/事件等設(shè)置變得容易理解且十分簡(jiǎn)便，如下一個(gè)拖拽組件的初始化：
| $(document).ready( function() { $(’#drag1′).Draggable({ handle: “ax“, //屬性設(shè)置 onStart: function(el,x,y){ //事件監(jiān)聽(tīng)器設(shè)置 } }); } ); |
可以看到，$("#drag1")是查找并創(chuàng)建一個(gè)jquery對(duì)象，然后調(diào)用Draggable方法進(jìn)行拖拽初始化，在此方法調(diào)用時(shí)，傳遞一個(gè)“配置”對(duì)象，進(jìn)行拖拽操作的初始化配置。這一“配置”的思想，極大簡(jiǎn)化了一些編碼步驟，并相當(dāng)直觀和易懂。
以下我進(jìn)行三個(gè)問(wèn)答：
1、問(wèn)：為什么$(selector)之后，返回的是jQuery對(duì)象？
答：從jQuery的源代碼中，我們可以知道：var $ = jQuery 。因此當(dāng)我們$(selector)操作時(shí)，其實(shí)就是jQuery(selector)，創(chuàng)建的是一個(gè)jQuery對(duì)象。當(dāng)然正確的寫(xiě)法應(yīng)該是這樣的：var jq = new $(selector); 而jQuery使用了一個(gè)小技巧在外部避免了new，在jquery方法內(nèi)部：if ( window == this ) return new jQuery(selector);
2、問(wèn)：為什么創(chuàng)建一個(gè)jQuery對(duì)象之后，我們可以這樣寫(xiě)$(selector).each(function(index){…});進(jìn)行遍歷操作呢？
答：其實(shí)jQuery(selector)方法調(diào)用時(shí)，在jQuery(selector)方法內(nèi)部，最后返回的是一個(gè)數(shù)組：return this.setArray(a); 而each方法體內(nèi)部是一個(gè)for循環(huán)，在循環(huán)體內(nèi)是這樣調(diào)用的：method.call(this[i]，i) 。
3、問(wèn)：為什么jQuery能做到j(luò)Query對(duì)象屬性/方法/事件的插件式擴(kuò)展？
答：如果您有一些Javasciprt的面向?qū)ο蠓矫娴闹R(shí)，就會(huì)知道，jQuery.prototype原型對(duì)象上的擴(kuò)展屬性/方法和事件，將會(huì)給jQuery的對(duì)象“擴(kuò)展”。基于這一點(diǎn)，jQuery是這樣寫(xiě)的：jQuery.fn = jQuery.prototype 。所以，當(dāng)我們擴(kuò)展一個(gè)插件功能時(shí)，如下：
| jQuery.fn.check = function() { return this.each(function() { this.checked = true; }); }; |
其實(shí)就是：
| jQuery.prototype.check = function() { return this.each(function() { this.checked = true; }); }; |
綜上所述,jQuery給我們帶來(lái)了一個(gè)簡(jiǎn)潔方便的編碼模型(1>創(chuàng)建jQuery對(duì)象;2>直接使用jQuery對(duì)象的屬性/方法/事件),一個(gè)強(qiáng)悍的dom元素查找器($),插件式編程接口(jQuery.fn),以及插件初始化的”配置”對(duì)象思想.
附:實(shí)現(xiàn)自己的jQuery
| < !DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>Untitled Page</title> </head> <body> <div id=”d”>divvv</div> <div id=”fsd”>fdsf</div> </body> </html> <script type=”text/Javascript”> //實(shí)現(xiàn)自己的MyQuery框架 var MyQuery = function(selector){ if ( window == this ) return new MyQuery(selector); //這里只實(shí)現(xiàn)dom類型的簡(jiǎn)單查找,嘿嘿 var doms = document.getElementsByTagName(selector); var arr = []; for(var i=0; i<doms .length; i++){ arr.push(doms.item(i)); } return this.setArray(arr); } MyQuery.prototype.setArray = function( arr ) { this.length = 0; [].push.apply( this, arr ); return this; } MyQuery.fn = MyQuery.prototype; var $ = MyQuery; //插件擴(kuò)展1)each MyQuery.fn.each = function(method){ for(var i=0,l=this.length; i<l; i++){ method.call(this[i],i); } } //插件擴(kuò)展2)show MyQuery.fn.show = function(){ this.each(function(i){ alert(i+“:“+this.id+“:“+this.innerHTML); }); } //debugger $(“div“).show(); </script></doms></script> |
it知識(shí)庫(kù)：jQuery工作原理解析以及源代碼示例，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
