prototype 1.5 RC2 $ 函数的解读

最近闲的无聊，跟人打赌，看看能不能在一天时间内里面把prototype 1.5的 $函数读懂，赚顿饭吃吃，下面把理解贴出来，让大家看看算不算读懂了。
首先把想关代码贴一下。

function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (typeof element == 'string')
    element = document.getElementById(element);
  return Element.extend(element);
}

if (!window.Element)
  var Element = new Object();

Element.extend = function(element) {
  if (!element) return;
  if (_nativeExtensions || element.nodeType == 3) return element;

  if (!element._extended && element.tagName && element != window) {

    var methods = Object.clone(Element.Methods), cache = Element.extend.cache;
    if (element.tagName == 'FORM')
      Object.extend(methods, Form.Methods);
    if (['INPUT', 'TEXTAREA', 'SELECT'].include(element.tagName))
      Object.extend(methods, Form.Element.Methods);

    Object.extend(methods, Element.Methods.Simulated);
    for (var property in methods) {
      var value = methods[property];
      if (typeof value == 'function' && !(property in element))
        element[property] = cache.findOrStore(value);
    }

  }

  element._extended = true;
  return element;
}

Element.extend.cache = {

  findOrStore: function(value) {

    return this[value] = this[value] || function() {
      return value.apply(null, [this].concat($A(arguments)));
    }
  }
}
Element.Methods = { ...}//代码太多，请参考prototype.js

下面为我的解读：
$函数可以接收多个参数，参数的类型可以为String或者用Element类扩展过的html element。当传入的为多个参数的时候，返回的为一个数组；单个参数为一个扩展过的element 或者null。

接下来解读Element.extend(element)成为理解$函数返回对象的关键。Element为一个singleton对象，对其extend方法的理解，我认为难点主要集中于

element[property] = cache.findOrStore(value);

的理解。这句话将cache.findOrStore返回的函数copy给elememt[property],使其成为element的一个方法。
然而这样做完全可以直接将

function() {
      return value.apply(null, [this].concat($A(arguments)));
    }

copy给element[property]。
为什么还需要通过函数cache.findOrStore这个函数的调用呢。那么这个cache体现在哪里呢，进一步问为什么函数名叫findOrStore呢？
那么让我们仔细看看cache.findOrStore这个函数体。
该函数返回的是一个function，在返回这个function的时候。他首先查看this[value]是否存在，存在则返回this[value],否则新生成一个函数，赋值给this[value]再返回。所以当你第二次调用这个函数的时候，他优先的查看是否this[value]具有值，我想这就是他取名于cache，并教findOrStore的意义吧。
接着让我再问一下，this[value]给那个对象动态添加了方法呢？根据JavaScript this关键字的含义，其应该存在于Element.extend.cache这个Object中。
BTW:value.apply(null, [this].concat($A(arguments)));中的this，为调用该方法的element。理解这一点是Extend.methods的方法理解的前提。
验证方法：你可以在findOrStore方法中增加一行alert(this[value]),当你第一遍使用$函数时他应该全部为undefined，当你第二遍使用的时候其将有值。更为简单的方法为直接alert(this['findOrStore']).
总结，Extend.cache充分体现了JS的特性。findOrStore方法设计的实在精妙。this指针真的比较难理解。

评论

4 楼 jianfeng008cn 2007-02-06  

zkj_beyond 写道

jquery 出招，prototype.js 立马接招。

却害苦我们这帮二次开发的人。

相对来说 “绿色的”YUI 能让我舒服点点。

能否说得直白点，我没理解呢

3 楼 blood 2007-02-06  

fins     2006-12-14 23:14
我真希望 它的$可以支持 getElementsByName

可以变通一下，用 "$$()"
如下：$$('input[name="age"]')

2 楼 zkj_beyond 2006-12-15  

jquery 出招，prototype.js 立马接招。

却害苦我们这帮二次开发的人。

相对来说 “绿色的”YUI 能让我舒服点点。

1 楼 fins 2006-12-14  

我真希望 它的$可以支持 getElementsByName