Prototype DOM扩展___$()方法的改变
2010-08-03 13:56
309 查看
从最新版本的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里的代码提示
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里的代码提示
相关文章推荐
- 改变dom样式的方法
- JavaScript高级程序设计之DOM 扩展之HTML5之scrollIntoView()方法第11.3.7讲
- C#中的this扩展方法与javascript中的prototype方法
- 改变dom样式的方法
- DOM扩展的两个常用方法
- javascript prototype 方法扩展
- prototype1.6.03 库 对源码的一些理解(Dom扩展)
- prototype dom ready方法
- prototype如何扩展DOM
- 验证码制作之四: 位数可改变内容可扩展的验证码产生方法
- JS 扩展方法prototype
- js实现prototype扩展的方法(字符串,日期,数组扩展)
- CI框架扩展路由钩子hooks改变自定义控制器和方法
- seajs通过module.constructor.prototype扩展公共方法
- seajs通过module.constructor.prototype扩展公共方法
- JS里的prototype对JS类(方法,函数,function)进行一个扩展吧!
- [Silverlight] 写了两个方便 DOM 查找的扩展方法
- 当某个类的prototype对象 中有数组时,通过该类的对象 并使用push方法就可以改变原型对象中数组的值
- 字符串的原型扩展一个方法来解析url(String.prototype.pro)-自己写的一个方法
- JS扩展Array.prototype引发的问题及解决方法