`
wutao33543
  • 浏览: 65068 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

Prototype框架是怎样扩展DOM的

阅读更多
Prototype框架最大的部分就是对DOM的扩展。Prototype框架里的$()函数返回一个网页DOM元素,框架给这个元素添加了很多方便的方法。举个例子:你可以写这样的代码 $('comments').addClassName('active').show() ,用来取得ID是“comments”的元素,给它添加一个CSS的ClassName并且显示它(假设之前是隐藏的)。本来在JavaScript里,“comments”元素是没有这些方法可用的;这是怎么实现的呢?这篇文章揭示了几个在Prototype框架里用到的技巧。
用 Element.addMethods() 添加你自己的方法

如果你有自己的DOM方法想要添加到Prototype的那一大堆方法里去凑凑热闹,没问题!Prototype也为此提供了一种机制。假设你有一组函数封装在一个对象里,只要把这个对象交给 Element.addMethods() 就可以了:
var MyUtils = {
    truncate: function(element, length){
        element = $(element);
        return element.update(element.innerHTML.truncate(length));
    },
    updateAndMark: function(element, html){
        return $(element).update(html).addClassName('updated');
    }
}
Element.addMethods(MyUtils);
// 现在你可以:
$('explanation').truncate(100);
唯一需要注意的事情就是要确保这些方法的第一个参数是元素自身。在你的方法里,你还可以在最后返回这个元素以实现可链性(或者,就像例子里实践的那样,实现自身返回元素的方法)。

Element.extend() 方法
大多数扩展DOM方法都是封装在Element.Methods对象里的,并被复制到Element对象(提供方便之用)。这些方法都把要操作的元素作为第一个参数来接受。
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框架

    Prototype框架是JavaScript编程中的一种流行库,主要用于简化DOM操作、事件处理、Ajax交互以及对象创建。这个框架由Sam Stephenson于2005年创建,是早期JavaScript开发者的常用工具,尤其是在构建动态Web应用程序时...

    jquery + prototype框架

    **jQuery和Prototype框架详解** jQuery和Prototype是两个非常流行的JavaScript库,它们极大地简化了JavaScript的DOM操作、事件处理和动画效果。在这个资源包中,您将找到关于这两个框架的API帮助文档,这对于学习和...

    jquery bootstrap prototype框架

    在实际开发中,这三个框架往往结合使用,jQuery负责DOM操作和事件处理,Bootstrap提供UI设计和响应式布局,Prototype则可能作为历史遗留项目的组成部分。同时,随着前端技术的发展,Vue、React和Angular等更现代化的...

    DOM 模型和 Prototype

    Prototype框架也引入了原型链(Prototype Chain)的概念,这是JavaScript的一个核心特性。每个JavaScript对象都有一个内部链接到另一个对象的原型,这个原型对象提供了继承机制。在Prototype中,我们可以使用`Class....

    Prototype框架常用方法简介

    Prototype框架是JavaScript中一个强大的库,它为JavaScript开发提供了许多便利的功能,特别是在对象原型扩展、事件处理、Ajax交互等方面。本文将详细介绍Prototype框架中的几个常用方法,并通过实例进行解析。 1. *...

    JavaScript框架高级编程(第一章扩展和增强DOM元素 )

    通过使用Prototype框架扩展DOM元素,开发者可以更轻松地管理Web页面的内容和布局。无论是修改内容、调整大小还是设置样式,Prototype都提供了一套完整的解决方案,大大简化了复杂的DOM操作。此外,通过使用 `$()`、`...

    Ajax最全页面验证-基本prototype框架

    本文将深入探讨Ajax在表单验证中的应用,特别是基于Prototype框架的实现方式,以及动态验证的重要性。 一、Ajax基础 Ajax的核心是通过JavaScript与服务器进行异步通信,无需刷新整个页面就能获取或更新数据。它由...

    Prototype框架详解

    7. **Element对象**:Prototype框架中定义了一个Element对象,它包含了许多方便的DOM操作方法,如添加或移除CSS类(addClassName/removeClassName),检查元素是否包含特定CSS类(hasClassName),获取或设置元素...

    prototype js 框架

    在学习Prototype框架时,可以参考压缩包中的文件,例如查看示例代码,了解如何在实际项目中应用这些功能。同时,理解Prototype的源码也是提升JavaScript技能的好方法,因为它展示了如何优雅地扩展JavaScript语言。...

    prototype-1.5.0框架.rar

    1. **对象扩展**:Prototype 对 JavaScript 的核心对象进行了扩展,例如 Object、Array、String 和 Function。例如,它添加了 `each` 方法,允许遍历数组或对象,以及 `extend` 方法,用于对象的继承。 2. **DOM ...

    prototype 小程序

    Prototype框架是由Sam Stephenson在2005年创建的,它的设计目标是增强JavaScript语言的功能,提供一种更面向对象的编程方式,并简化与DOM(文档对象模型)的交互。在Ajax流行的年代,Prototype因其强大的功能和对...

    prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版

    这个“Prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版”正是面向希望深入学习和掌握Prototype框架的开发者们的重要资源。 Prototype 1.6中文手册: 手册详细介绍了Prototype框架的1.6版本,这是一个非常...

    js 框架 prototype 的帮助文档

    Prototype框架将这种语言特性进一步发展,提供了一套完整的解决方案来构建复杂的应用程序。 `js prototype框架`的核心特性包括: 1. **对象创建与继承**:Prototype 使用`Object.extend()`方法实现对象的创建和...

    Prototype-1.pdf

    Prototype框架的目标是简化JavaScript编程,通过提供一系列简洁易用的方法来处理DOM操作、Ajax请求和其他常见的Web开发任务。 #### 二、Prototype框架的关键特性 - **Ajax支持**:Prototype提供了多个用于Ajax请求...

    js框架prototype-1.6.0.3.js

    在本讨论中,我们将深入探讨Prototype框架的1.6.0.3版本及其API。 Prototype的核心理念是增强JavaScript的基本对象,如Array、String、Function等,以提供更强大的功能。例如,它通过添加新的方法如`each`、`map`和...

    PrototypeJavaScript框架

    以下是对Prototype框架核心特性和功能的详细解释: 1. **对象扩展与原型链增强**: Prototype通过扩展JavaScript的原型链来实现类和对象的继承。它提供了一个`Class.create()`方法,用于创建新的类,并且支持多重...

    jQuery、Mootools、Prototype三大JavaScript框架中文手册

    Prototype是最早的JavaScript框架之一,对DOM操作有着深入的优化。其关键特性包括: 1. **$()选择器**:Prototype使用`$()`作为基本选择器,类似于jQuery,但功能略有不同。 2. **Prototype对象**:扩展了...

    js框架prototype 1.6 中文参考手册 天涯浪子

    1. **类与对象**:Prototype框架通过扩展JavaScript的原生对象,引入了类的概念。`Class.create()`方法允许开发者创建新的类,而`extend()`方法则用于继承现有类,实现面向对象编程。 2. **Ajax**:Prototype的核心...

Global site tag (gtag.js) - Google Analytics