《JavaScript框架設計》 1 3 陣列化

瀏覽器下存在許多類陣列物件，如function內的arguments，通過document.forms、form. elements、doucment.links、select.options、document.getelementsbyname、document.getelementsby tagname、childnodes、children等方式獲取的節點集合（htmlcollection、nodelist），或依照某些特殊寫法的自定義物件。

var arraylike =

類陣列物件是乙個很好的儲存結構，不過功能太弱了，為了享受純陣列的那些便捷方法，我們在處理它們前都會做一下轉換。

通常來說，只要.slice.call就能轉換了，但舊版本ie下的htmlcollection、nodelist不是object的子類，採用如上方法將導致 ie 執行異常。我們看一下各大庫怎麼處理的。

//jquery的makearray
var makearray = function(array) 
return ret;
}

jquery物件是用來儲存與處理dom元素的，它主要依賴於setarray方法來設定和維護長度與索引，而setarray的引數要求是乙個陣列，因此makearray的地位非常重要。這方法保證就算沒有引數也要返回乙個空陣列。

prototype.js的$a方法：

function $a(iterable) ;

mootools的$a方法：

function $a(iterable) 
return array.prototype.slice.call(iterable);
};

ext的toarray方法：

var toarray = function() );
return res.slice(i || 0, j || res.length);
} :function(a, i, j) 
}()

ext的設計比較巧妙，功能也比較強大。它一開始就自動執行自身，以後就不用判定瀏覽器了。它還有兩個可選引數，對生成的純陣列進行操作。

dojo的_toarray和ext一樣，後面兩個引數是可選的，只不過第二個是偏移量，最後乙個是已有的陣列，用於把新生的新組元素合併過去。

(function() ;
var slow = function(obj, offset, startwith) 
returnarr;
};dojo._toarray =
dojo.isie ? function(obj) :
efficient;
})();

最後是mass的實現，與dojo一樣，一開始就進行區分，w3c方直接.slice.call，ie自己手動實現乙個slice方法。

$.slice = window.dispatchevent ? function(nodes, start, end)  : function(nodes, start, end) 
if (end > n) 
if (end < 0) 
for (var i = start; i < end; ++i) 
}return ret;
}

《JavaScript框架設計》 1 3 陣列化

MegEngine 框架設計

測試框架設計

WCC框架設計

《JavaScript框架設計》 1 3 陣列化

MegEngine 框架設計

測試框架設計

WCC框架設計

相關推薦