Prototype : $() 的变化


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

function $() { 
 var results = [], element; 
 for (var i = 0; i < arguments.length; i++) { 
  element = arguments[i]; 
  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[i]; 
  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 = { 
 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里的代码提示


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3