Prototype, IE 的痛

今天用了一下 Prototype 1.5，发现在 IE 下很多元素没有被扩展，脚本执行报错。仔细看发现了原因。

Prototype 用 Element.addMethods() 方法对页面所有元素进行扩展：

Element.addMethods = function(methods) {
  Object.extend(Element.Methods, methods || {});

  function copy(methods, destination, onlyIfAbsent) {
    onlyIfAbsent = onlyIfAbsent || false;
    var cache = Element.extend.cache;
    for (var property in methods) {
      var value = methods[property];
      if (!onlyIfAbsent || !(property in destination))
        destination[property] = cache.findOrStore(value);
    }
  }

  if (typeof HTMLElement != 'undefined') {
    copy(Element.Methods, HTMLElement.prototype);
    copy(Element.Methods.Simulated, HTMLElement.prototype, true);
    copy(Form.Methods, HTMLFormElement.prototype);
    [HTMLInputElement, HTMLTextAreaElement, HTMLSelectElement].each(function(klass) {
      copy(Form.Element.Methods, klass.prototype);
    });
    _nativeExtensions = true;
  }
}

利用扩展 HTMLElement.prototype，就可以一次性对页面中的所有元素（不管是现有的还是将来新增的）进行扩展。这样做在 FireFox 中有效，然而在 IE 中没有 HTMLElement 的概念，所以无法做到一次性扩展。

但是对页面已有元素进行扩展还是可以的，就是这样

if (document.all) {
    $A(document.all).each(function(element) {
        Element.extend(element);
    });
}

这仅仅是对现有元素的扩展，以后每次向页面添加元素，都必须调用一次 Element.extend() 方法。更麻烦的是，如果元素是通过 innerHTML 属性加到页面上的话，将不得不把页面的所有元素重新扩展一次。

总之，HTMLElement.prototype 在 IE 中没有可替代方案，在 IE 下用 prototype 将会很不爽。