|
|
使用prototype，我們最常用的莫過于$('div1')之類的代碼。從而獲得擴展后的element對象，然后，我們就可以用它的各種擴展出來的方法了，如：
$('div1').addClassName('loading').show();
所以，我們研究Element的擴展正應當以此為入口。
function $(element) {
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push($(arguments[i]));
return elements;
}
if (Object.isString(element))
element = document.getElementById(element);
return Element.extend(element);
}
這個函數一個巧妙的遞歸就可以處理多個參數的情況，實在令我贊嘆啊。代碼中的關鍵是：Element.extend(element)，在extend之前，element還僅僅是一個普通的DOM對象，extend之后就被擴展了，可見，秘密就在extend之中。
既然是Element.extend(element)，那么，我們當然不能單獨去研究extend，還是得先了解一下Element是何物。
(function() {
var element = this.Element;
this.Element = function(tagName, attributes) {
attributes = attributes || { };
tagName = tagName.toLowerCase();
var cache = Element.cache;
if (Prototype.Browser.IE && attributes.name) {
tagName = ' <' + tagName + ' name="' + attributes.name + '">';
delete attributes.name;
return Element.writeAttribute(document.createElement(tagName), attributes);
}
if (!cache[tagName]) cache[tagName] = Element.extend(document.createElement(tagName));
return Element.writeAttribute(cache[tagName].cloneNode(false), attributes);
};
Object.extend(this.Element, element || { });
}).call(window);
這種代碼比較有個性，基本結構是：(function(){……}).call(window);所以，看到這個結構，就要曉得，省略號部分出現的this都是指向window的。
var element=this.Element；這行不難理解，但是，關鍵是this.Element這時還沒有被定義。后面則是定義一個類：window.Element類，它有兩個參數：tagName、attributes。它的作用就是創(chuàng)建一個元素，并把一個純潔的指定標簽對應的DOM對象放入緩存。創(chuàng)建元素后，并且寫入指定的屬性值。這兒要提醒一下：
writeAttribute、readAttribute這兩個函數功能顯然，讀、寫屬性，但是，它的代碼并不簡單啊，它的復雜性主要源于不同的瀏覽器中，讀、寫屬性的方法的不同。
這是Element類的構造函數的定義，它之后的Element.cache = { };緩存，什么的緩存，不大好描述，各種標簽的純潔版DOM元素對象的緩存？這話說得太惡心了。后面緊跟著就是一個：Element.Methods={……}，在這里，幾乎定義了所有的擴展方法。這里的擴展方法都有一個特征，代碼中沒有一個用this的，都是老老實實傳進去一個element引用。這是一個伏筆，為什么要定義成這樣，是有原因的。且容后交待。
現在Element大概說了一下，就得講一講Element.extend了。
Element.extend = (function() {
if (Prototype.BrowserFeatures.SpecificElementExtensions)
return Prototype.K;
var Methods = { }, ByTag = Element.Methods.ByTag;
var extend = Object.extend(function(element) {
if (!element || element._extendedByPrototype ||
element.nodeType != 1 || element == window) return element;
var methods = Object.clone(Methods),
tagName = element.tagName, property, value;
// extend methods for specific tags
if (ByTag[tagName]) Object.extend(methods, ByTag[tagName]);
for (property in methods) {
value = methods[property];
if (Object.isFunction(value) && !(property in element))
element[property] = value.methodize();
}
element._extendedByPrototype = Prototype.emptyFunction;
return element;
}, {
refresh: function() {
// extend methods for all tags (Safari doesn't need this)
if (!Prototype.BrowserFeatures.ElementExtensions) {
Object.extend(Methods, Element.Methods);
Object.extend(Methods, Element.Methods.Simulated);
}
}
});
extend.refresh();
return extend;
})();
第一行的原理我不大肯定，不說，下面的代碼看似復雜，待我抽出它的大概結構來：
var extend=Object.extend(function(element){……},{refresh:function(){……}});
extend內，第一個函數作用是從XXXX.Methods中獲取方法，并復制到本element中。這兒主要基于這樣的考慮：
一、元素如果是一個Form，就得從Form.Methods取方法
二、元素如果是表單內的可輸入元素，就得從Form.Element中取方法
三、所有元素都應當從Element.Methods中取得通用方法(后面的refresh所考慮的)。
也就是說，這兒要考慮多種情況，本來應當是個if語句的事，但是，這兒巧妙地設計了一個Element.Methods.ByTag。從而解決了這個問題。
if (Object.isFunction(value) && !(property in element))
element[property] = value.methodize();
如果Methods中的成員不是函數或者函數在element中已存在，則不會覆蓋。這兒到了關鍵了，那個value.methodize()，這時，前面的伏筆生效了，methodize的作用就是把當前調用者傳遞進方法。且作為第一個參數傳入。它的使用方法一般是：
obj.methodname=functionname.methodize();
這樣，調用時，obj對象就會作為第一個參數傳入functionsname這個函數。
到此為止，這個extend函數中的大概思路應當清晰了，現在還有一個問題沒有清楚：根據元素的tagName來獲得應當從哪個Methods獲得擴展，那么，我們有必要了解一下ByTag的詳情，查找一下，找到了：
Object.extend(Element.Methods.ByTag, {
"FORM": Object.clone(Form.Methods),
"INPUT": Object.clone(Form.Element.Methods),
"SELECT": Object.clone(Form.Element.Methods),
"TEXTAREA": Object.clone(Form.Element.Methods)
});
ok，差不多就這樣了。
JavaScript技術：prototype Element學習筆記(篇一)，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
