DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 淺析jQuery的鏈式調用之each函數
淺析jQuery的鏈式調用之each函數
編輯:JQuery特效代碼     
話說回來,雖然jQuery讓學習前端技術的越來越多了起來,(本人就是因為學校圖書館偶然間遇到了一本jQuery基礎教程(二)開始想深入的學習前端技術),關於jQuery的博文甚至多於javascript,它讓編程的門檻大大的降低了,但是它隱藏了太多細節了,形如$('#id').append('<p>xxx</p>').clone().appendTo(x).end().css(...)................這樣操作的模式已經很難找到常規javascript的影子。浏覽器的差異仿佛一去就不見了蹤影,我不認為大部分都能在這安逸的環境再重新回到考慮javascript如何在不同浏覽器能表現一致等問題,是福是禍真的很難說。
接下來言歸正傳.....說正經的
由於$()函數返回的是一個包裹了原生dom對象數組的對象,並且在此對象原型上擴展的函數都是為了操作原生的dom對象,所以少不了循環遍歷的操作,熟悉jquery庫的人都知道有個jQuery.each()函數 ,大部分的涉及jquery對象的函數都會用到這個函數: 簡單的實現應該是形如這樣:
(再次重申,只是簡單的實現原理,不要考慮具體的功能性問題)
代碼如下:
if (!window['$'])
window['$'] = window['jQuery'];
/*這裡以上區域為上一篇文章的閉包內的內容
* 定義jQuery.each 根據傳入對象來執行操作
* @param {Object} obj
* @param {Object} func
*簡單起見我只考慮了數組以及jQuery對象兩種情況,跟上一篇一樣,原理應該是一致的
*/
window['jQuery']['each']=function(obj,func){
if(obj.constructor==Array){
for(var i=0;i<obj.length;i++){
func.call(obj[i],i,obj[i]);//可以看到傳入的func 應該是形如function(i,item) i代表遍歷到的下標,item則代表在數組中遍歷到的對象
}
}else if(obj.elements&&obj.elements.constructor==Array){//這裡采用了傳說的鴨子法則,而不是判定它是不是jQuery的實例 只要你有Array類型的elements我就對你進行操作
for(var i=0;i<obj.elements.length;i++){
func.call(obj.elements[i],i,obj.elements[i]);//可以看到傳入的func 應該是形如function(i,item) i代表遍歷到的下標,item則代表在數組中遍歷到的對象
}
}else{
return null;
}
}

在這個函數的基礎之上可以開始擴充_jQuery的prototype了;首先就是先寫一個包裝器對象可以直接調用的方法each:(這個並不是重復),然後通過調用這個each函數可以完成對對象數組的遍歷,
比如:
代碼如下:
//寫在閉包內 注意將昨天命名沖突了的jQuery構造函數名稱改為_jQuery
_jQuery.prototype = {
each: function(func){
jQuery.each(this, func);
return this;
},
attr: function(key, value){
//示例定義這個set與get於一身的操作屬性的函數
if (arguments.length == 0) {
return null;
}
else
if (arguments.length == 1) {
return this.elements[0].getAttribute(key);
}
else if(arguments.length == 2){
this.each(function(i, item){
//這裡可以看到重新定義each方法的好處一:精簡代碼 ,二:在內部函數中this仍然是指向調用的包裝器對象而不是window
item.setAttribute(key, value);
})
}
}
/*
* 這裡可以開始引入其他方法
*/
}

接下來做幾個簡單的測試:(還是上一篇的測試html

  輸入:

       var k= $('#header');
consoles.write(k.attr('title','test title!').attr('title')); //鏈式調用

  輸出:

test title!

依此類推,依靠each方法可以有效的擴充包裝器的方法。

之前說的影響到jQuery的鏈式調用的要點有三點,事實事後一想完全不是那麼簡單,jQuery內部代碼的維護感覺並不比有些庫好,雖然至少在操作上來講使用起來非常順手(當然只是針對一些小的操作,大的項目一時也無法接觸到,也不好跟著一些大大人雲亦雲). 不過就算僅僅從遍歷操作來看, 也可以看到其實這個庫只能依托細化的插件,擴充下去只會顯得臃腫不堪。

注:如果有仔細剖析了jquery源碼的人肯定會對我如此拙劣的所謂的實現嗤之以鼻,我的確只是看了幾本比如javascript dom高級程序設計 以及javascript 高級程序設計 設計模式等好書之後有感而發而已,可能跟具體的jquery的實現有很大的落差,可以的話希望可以指正一下。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved