`
tudou721
  • 浏览: 61569 次
  • 性别: Icon_minigender_2
  • 来自: 河南
社区版块
存档分类
最新评论

理解prototype掌握基本函数

阅读更多

    Prototype 主要包括三个内容:一是提供了一些全局性的函数,替代原先烦琐重复的代码;二是对现有 Javascript 、 DOM 对象的扩展,提供访问公共函数的捷径;三是对 Ajax 应用的封装,使得开发 Ajax 应用更加容易和快速。
全局性函数:$系列函数Try.these()函数


     $()函数是用于替代Dom中频繁使用的document.getElementById()的,返回其传入参数所指定id指向的元素。它允许传入多个id作为参数然后返回一个其id指向元素的Array对象。其实$()也可以通过元素的name去获得其指向元素。

    可以传元素Id也可以传元素本身(即通过Id获得后的该元素对象)。

function foo(element){
 element=$(element);}
$('itemId').hide(); =====Element.hide('itemId');
$('item1','item2','item3'].invoke('hide');
======['item1','item2','item3'].each(Element.hide);

 

    $F()函数用于返回任何表单(form)输入控件的值,如文本框、文本域、下拉列表,它以元素本身作为参数,但该id必须支持value属性,否则就得不到值了,像按钮。这是Form.Element.getValue的一个方便的别名 。它可以通过id属性获得值,也可以通过name属性去获取。但如果有两个相同的name或id属性只能取到第一个结果值,否则返回null。还有情况页面中如果有一个name和id的属性名相同,则$F将取到在前面的那个元素的值,而不区分是id还是name

$F('itemId')===document.getElementById('itemId').value;

 

    $A()函数将其接受到的与数组类似的集合(如:NodeList,HTMLCollection)转化为一个真正的Array对象,如将

string字符串转化为Array数组=====Array.form
   例:document.getElementsByTagName不返回数组,而NodeList对象实现了基本的数组“接口”,我们把返回的NodeList转换成数组:

var params=$A(document.getElementsByTagName('p'));
    params.each(Element.hide);//确保目标元素已经被扩展,必须用
    $(params.last()).show();
=====$A(document.getElementsByTagName('p')).map
(Element.extend).invoke('hide');

   这里将隐藏所有<p>标签里的内容,而放过最后一个<p>,显示其中内容。 

 所有Array都有一个join方法,但所有函数里的所有参数值并没有继承于Array,可以比较以下两种输出方式$A()较简单易用---输出参数:

alert(Array.prototype.join.call(params,', '));======alert($A(params).join(', '));

  $H()函数是唯一一个得到哈希表的办法,类似一个可枚举的和联合数组类似的Hash对象,带上了Hash和Enumerable模块的所有特征。Hash是一个模块,而不是一个类。在Prototype的类机制里,执行new Hash()是没有用的;它将会引起一个”Hash不是一个构造器“的错误。

   $R()函数是new ObjectRange(start,end,exclusive=false)的缩写和替代,参数表示:最小和最大范围(同一类型),以及最大范围是否包括(默认false包括)。
如:

    $R(0,10).include(10)----->true
    $A($R(0,5)).join(', ')------>'0,1,2,3,4,5'
    $R(0,10,true).include(10)------>false

 
   Try.these(Function...) -> firstOKResult
接收任意数量的函数,返回最前面一个没有异常的函数的返回值。替代了if/else去判断的方式。
如果没有一个模块是成功执行的,Try.these在这时会导致getTransport方法返回false,这个值当成是失败的返回值

(undefined)。如:实例化浏览器对象XMLHttpRequest对象

getTransport: function() {
    return Try.these(
         function() { return new XMLHttpRequest() },
         function() { return new ActiveXObject('Msxml2.XMLHTTP')  },
         function() { return new ActiveXObject('Microsoft.XMLHTTP') }
  ) || false ;
} 

 这段代码就比较实用,比我们写if/else语句要方便的多了。

2
0
分享到:
评论

相关推荐

    Prototype&Prototype中文手册

    9. **示例和最佳实践**:提供实际代码示例,帮助理解Prototype的用法,并给出一些优化和性能提升的建议。 其次,`prototype.js`是Prototype库的实际JavaScript文件。这个文件包含了所有Prototype的源代码,开发者...

    PROTOTYPE 官方+个人整理的帮助文档

    API(Application Programming Interface)是软件之间交互的规则和协议,对于开发者来说,理解Prototype API是实现功能、解决问题的关键。文档可能会详细介绍如何调用和使用Prototype的各种方法,例如 `$()`, `...

    Prototype中英文手册

    9. **案例研究**:提供实际应用场景,帮助开发者理解Prototype在真实项目中的用法。 通过这些手册,开发者可以系统地学习Prototype库,提升其JavaScript编程能力,从而更有效地构建Web应用程序。

    JavaScript的prototype

    理解并熟练掌握`prototype`,对于编写高效、可维护的JavaScript代码至关重要。通过`prototype`,开发者可以构建复杂的应用程序架构,利用原型链实现方法的复用和对象的层次结构。在实际开发中,结合`Object.create()...

    Prototype学习笔记(一)(二)

    通过这些代码,读者可以更直观地理解Prototype的概念和用法,并动手实践以加深理解。 总的来说,Prototype是JavaScript中实现对象继承和复用的关键机制。理解并掌握Prototype,不仅可以提升编写高效、可维护的...

    unix函数原型

    对于Unix环境下的C编程,理解并掌握这些函数原型是至关重要的,因为它们提供了函数调用的基本框架,帮助开发者正确地使用这些函数而不引发错误。 #### 函数参数与返回值 - **参数类型**:函数原型中的参数类型指明...

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

    Prototype JavaScript 框架是Web开发中的一个关键工具,...通过深入学习Prototype 1.6中文手册,并结合源码阅读,开发者不仅可以熟练掌握Prototype的用法,还能对JavaScript有更深入的理解,从而在实际项目中游刃有余。

    prototype的使用

    首先,我们来理解`prototype`的基本用法。当我们创建一个函数(构造函数)时,该函数的`prototype`属性会自动被初始化为一个对象,这个对象有一个特殊的属性`__proto__`指向`Function.prototype`。我们可以直接在...

    prototype.js源码及PDF文档

    通过阅读文档,开发者可以快速掌握Prototype的基本用法,避免在实践中走弯路。 总结来说,《prototype.js源码及PDF文档》是JavaScript开发者的一份宝贵参考资料,它不仅提供了实际的代码示例,还有详细的理论指导,...

    prototype学习笔记

    首先,理解`prototype`的基本含义是关键。在JavaScript中,每个函数都有一个`prototype`属性,这个属性是一个对象,当创建一个新的对象实例时,该实例会继承`prototype`对象的属性和方法。因此,`prototype`是实现...

    prototype帮助中文文档

    它不仅解释了各种方法和函数的工作原理,还提供了大量示例代码,帮助理解如何在实际项目中应用Prototype。 7. **最佳实践** 使用Prototype时,应遵循一些最佳实践,如合理组织代码(使用模块化),避免全局变量...

    理解JavaScript中函数的使用

    ### 理解JavaScript中函数的使用 在现代软件开发中,JavaScript已成为不可或缺...无论是在简单的脚本还是复杂的Ajax应用程序中,熟练掌握函数的使用都是非常重要的。希望本文能帮助你在JavaScript编程之旅上更进一步。

    prototype小例子

    首先,我们理解`prototype`的基本作用。当我们在JavaScript中创建一个函数时,这个函数就自动获得了一个`prototype`属性。`prototype`对象包含了所有该函数实例会继承的方法。例如: ```javascript function Person...

    prototype1.4

    - `prototype1.4.pdf`文档中可能包含了大量的示例代码和实践案例,帮助开发者理解和掌握Prototype 1.4的各种功能和用法。 学习Prototype 1.4不仅能够提升JavaScript开发效率,还能帮助开发者更好地理解和利用...

    javascript指南和函数式编程

    2. **对象和原型**:深入理解原型链,掌握构造函数、原型对象以及对象字面量的用法,了解如何创建和继承对象。 3. **数组和集合**:学习JavaScript中的数组操作,如map、filter、reduce等高阶函数的运用,以及Set和...

    prototype开发者手册(中文版)+prototype.js

    Prototype是一个广泛使用的开源JavaScript库,它的目标是简化JavaScript的开发,提供了一系列实用的函数来扩展JavaScript的基本类型,使得开发者能够更高效地构建动态网页应用。 Prototype的核心功能包括DOM操作、...

    有缘函数详细讲解实例

    首先,我们来理解有缘函数的基本概念。有缘函数的“有缘”源自于它能够与不同的函数“结缘”,即它可以灵活地与各种函数进行交互。这种特性使得有缘函数成为代码复用和抽象的强大工具。它们可以用于处理通用的操作,...

    Prototype_1.4.doc,Prototype_1.5.1.chm 中文版

    **标题与描述解析** 标题提及了两个版本的Prototype文档,分别是...通过这些文档,开发者不仅可以掌握Prototype库的基本用法,还能深入了解其背后的原理,从而在实际项目中更加熟练地运用Prototype进行Web开发。

    prototype1.7.2

    《Prototype JavaScript 框架详解:以 ...学习和掌握 Prototype,不仅能提升开发效率,还能加深对 JavaScript 语言特性的理解。无论你是初学者还是经验丰富的开发者,Prototype 都值得你投入时间去研究和使用。

    prototype demo

    通过这个Prototype demo,开发者可以学习到如何利用Prototype库来增强JavaScript的原生对象,提升代码的可读性和可维护性,并掌握基于Prototype的Ajax操作,提高Web应用的用户体验。同时,结合CSS文件,可以了解前端...

Global site tag (gtag.js) - Google Analytics