WEB开发网
开发学院网页设计JavaScript Prototype框架是怎样扩展DOM的 阅读

Prototype框架是怎样扩展DOM的

 2010-09-14 13:11:38 来源:WEB开发网   
核心提示: Element.hide('comments');var div_height = Element.getHeight(my_div);Element.addClassName('contactform', 'pending');这些例子可谓

Element.hide('comments');
var div_height = Element.getHeight(my_div);
Element.addClassName('contactform', 'pending');

这些例子可谓简明易懂了,但是我们还有更好的方式。如果你想要操纵一个元素,你可以把这个元素交给Element.extend(),它会把所有的那些方法都直接复制给这个元素。例如,创建一个新的元素并且控制它:

var my_div = document.createElement('div');
Element.extend(my_div);
my_div.addClassName('pending').hide();
// 把元素插入到文档
document.body.appendChild(my_div);

我们的方法调用变得更短更直观了!正如上面提到的,Element.extend() 从Element.Methods把所有的方法复制到我们的元素,元素自动成为所有那些方法函数的第一个参数。extend()方法足够机灵,不会在同一个元素上尝试操作两次。更牛的是,美钞函数 $() 通过这种机制扩展了交给它的每个元素。

此外,Element.extend() 机制也适用于在FORM元素上使用Form.Methods的方法,以及在INPUT、TEXTAREA 和 SELECT 元素上使用Form.Element.Methods的方法:

var contact_data = $('contactform').serialize();
var search_terms = $('search_input').getValue();

注意并非只有美钞函数能自动扩展元素!document.getElementsByClassName、Form.getElements、双美钞 $$()函数(CSS选择器)返回元素的时候,还有其他一些场合都要调用Element.extend() ……总之,你根本很少有机会需要显式地调用Element.extend()。

本地原生扩展

在这一切背后有一个秘密。

在支持向本地原生对象(诸如HTML元素)的原型添加方法的浏览器中,无需调用过Element.extend()、美钞函数或别的什么东西,所有元素的DOM扩展就是默认可用的!于是在这些浏览器中,这样的代码是有效的:

var my_div = document.createElement('div');
my_div.addClassName('pending').hide();
document.body.appendChild(my_div);

因为浏览器本地原生对象的原型被扩展了,所有的DOM元素就内建具有了原型扩展方法。但是,这在IE里是行不通的,IE不让人改动HTMLElement.prototype。为了让前面的例子在IE上也能行得通,你需要用 Element.extend() 扩展元素。毋需担心,这个方法足够机灵,不会重复扩展元素。

由于有不支持这个的浏览器的缘故,你必须注意只在元素已经被扩展了的情况下使用DOM扩展。举例来说,上面的例子在 Firefox 和 Opera 里行得通,但是在创建元素之后加上Element.extend(my_div)可以使得脚本稳定可靠。你可以用美钞函数作为快捷的写法,如下例:

// 这在 IE 里会出错:
$('someElement').parentNode.hide()
// 跨浏览器的方式:
$($('someElement').parentNode).hide()

记住了!永远要在所有(你打算支持的)浏览器里进行测试。

Prototype API文档

英文http://www.prototypejs.org/api

中文http://www.ajaxgo.org/prototype/

Prototype Copyright © 2006 Sam Stephenson

(Bound0 译自 http://prototypejs.org/learn/extensions 可自由转载,请注明出处。)

上一页  1 2 

Tags:Prototype 框架 怎样

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接