prototype Element学习笔记(篇一)

先说一下Element对DOM扩展的技术思路，我也是看了一天的代码，这才有了点心得。
使用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。它的作用就是创建一个元素，并把一个纯洁的指定标签对应的DOM对象放入缓存。创建元素后，并且写入指定的属性值。这儿要提醒一下：
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，差不多就这样了。

最新评论