Prototype : $() 的变化

从最新版本的Prototype里,我发现我用得最多的 $() 方法代码有了变化: function $() {

var results = [], element;

for (var i = 0; i < arguments.length; i++) {

  element = arguments;

  if (typeof element == ’string’)

    element = document.getElementById(element);

  results.push(Element.extend(element));

}

return results.length < 2 ? results[0] : results;

}对比一下从前的版本 function $() {

var elements = new Array(); for (var i = 0; i < arguments.length; i++) {

  var element = arguments;

  if (typeof element == ’string’)

    element = document.getElementById(element);   if (arguments.length == 1)

    return element;   elements.push(element);

} return elements;

}

区别主要是



只有一个 return 语句,程序看起来更清晰,避免了函数多出口可能带来的混乱。

最重要的,Element.extend(element) 方法的引入。

这个Element.extend 也是1.5.x 版本的改进,看看它的源码: if (!window.Element)

var Element = new Object();Element.extend = function(element) {

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

  var methods = Element.Methods;

  for (property in methods) {

    var value = methods[property];

    if (typeof value == ’function’)

    element[property] = value.bind(null, element);

  }

} element._extended = true;

return element;

}Element.Methods = { [来源 www.iocblog.net]

visible: function(element) {

  return $(element).style.display != ’none’;

},

//other method toggle/show/hide/remove/getHeight...... etc.

}

Element.Methods 就是原来从前版本定义的 Element 对象的静态方法,这些方法都需要传递一个DOM对象id或者DOM对象作为参数,比如如上代码中的 visible 方法需要传递一个element参数。而Element.extend(element)语句将这些方法都设置给了参数对象,同时又利用 bind 方法让参数对象调用这些方法的时候,巧妙的传递自身作为参数。



也许没说明白,还是用代码说明吧!从Prototype1.5.x版本开始,你可以更方便的如下面代码一样操作DOM对象了:



var ele = $(myelement);

ele.hide(); //隐藏DOM对象对比从前的版本var ele = $(myelement);

Element.hide(ele); //隐藏DOM对象

这样的改变有什么益处呢? 我觉得一来是更面向对象了,二来就是便于将来IDE里的代码提示。



文章整理:iocblog
版权申明:本站文章均来自网络,如有侵权,请联系我们,我们收到后立即删除,谢谢!
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。