prototype Element学习笔记(篇一)
2024-05-06 14:16:59
供稿：网友
先说一下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引用。这是一个伏笔，为什么要定义成这样，是有原因的。且容后交待。
