Prototype DOM扩展___$()方法的改变

最新推荐文章于 2025-09-21 19:48:07 发布

转载最新推荐文章于 2025-09-21 19:48:07 发布 · 1.7k 阅读

文章标签：

#prototype #扩展 #function #methods #string #object

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文详细解析了 Prototype 框架中 $() 方法从旧版本到 1.5.x 版本的变化，重点介绍了 Element.extend 方法的引入及其如何使 DOM 操作更加面向对象、简洁且易于使用。此外，文章还讨论了这种改进对于 IDE 代码提示的提升。

从最新版本的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里的代码提示