prototype1.5 初体验第1/2页

一直没有没有时间看prototype,现在好了，已经更新到了1.5 pre1,呵呵,强大的功能不得不学习啊,这个是提升自己JS能力的又一个捷径.

1. Prototype是什么?
或许你还没有用过它， prototype.js 是一个由Sam Stephenson写的JavaScript包。这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端， 高交互性WEB应用程序的重担。轻松加入Web 2.0特性。

如果你最近体验了这个程序包，你很可能会发现文档并不是它的强项之一。像所有在我之前的开发者一样，我只能一头扎进prototype.js的源代码中并且试验其中的每一个部分。 我想当我学习他的时候记写笔记然后分享给其他人将会很不错。

我也一起提供了这个包的对象，类，方法和扩展的 非官方参考 。

2. 通用性方法
这个程序包里面包含了许多预定义的对象和通用性方法。编写这些方法的明显的目的就是为了减少你大量的重复编码和惯用法。

从Prototype1.5.x版本开始，你可以更方便的如下面代码一样操作DOM对象了: 


代码如下:

var ele = $("myelement");
ele.hide(); //隐藏DOM对象对比从前的版本var ele = $("myelement");
Element.hide(ele); //隐藏DOM对象

这样的改变有什么益处呢？ 我觉得一来是更面向对象了，二来就是便于将来IDE里的代码提示。

2.1. 使用 $()方法
$() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写，就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。

比起DOM中的方法，这个更胜一筹。你可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。下面的例子会向你描述这些。


代码如下:

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.3.1.js"></script>

<script>
    function test1()
    {
        var d = $('myDiv');
        alert(d.innerHTML);
    }

function test2()
    {
        var divs = $('myDiv','myOtherDiv');
        for(i=0; i<divs.length; i++)
        {
            alert(divs[i].innerHTML);
        }
    }
</script>
</HEAD>

<BODY>
    <div id="myDiv">
        <p>This is a paragraph</p>
    </div>
    <div id="myOtherDiv">
        <p>This is another paragraph</p>
    </div>

<input type="button" value=Test1 onclick="test1();"><br>
    <input type="button" value=Test2 onclick="test2();"><br>
</BODY>
</HTML>

这个方法的另一个好处就是你可以传入id字符串或者元素对象自己，这使得在创建可以传入任何形式参数的方法的时候， 它变得非常有用。

2.2. 使用$F()方法
$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值，如文本框或下拉框。 这个方法可以传入元素的id或者元素自己。


代码如下:

<script>
    function test3()
    {
        alert(  $F('userName')  );
    }
</script>
<input type="text" id="userName" value="Joe Doe"><br> 
<input type="button" value=Test3 onclick="test3();"><br>

2.3. 使用Try.these()方法
Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易， 他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。

在下面的例子中， xmlNode.text在一些浏览器中好用，但是xmlNode.textContent在另一些浏览器中正常工作。 使用Try.these()方法我们可以得到正常工作的那个方法的返回值。


代码如下:

<script>
function getXmlNodeValue(xmlNode){
    return Try.these(
        function() {return xmlNode.text;},
        function() {return xmlNode.textContent;)
        );
}
</script>

当前1/2页 12下一页阅读全文

赞 (0)

相关推荐

  • prototype1.5 初体验第1/2页

    一直没有没有时间看prototype,现在好了,已经更新到了1.5 pre1,呵呵,强大的功能不得不学习啊,这个是提升自己JS能力的又一个捷径. 1. Prototype是什么? 或许你还没有用过它, prototype.js 是一个由Sam Stephenson写的JavaScript包.这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端, 高交互性WEB应用程序的重担.轻松加入Web 2.0特性. 如果你最近体验了这个程序包,你很可能会发现文档并不是它的强项之一.像所有在我之前的

  • vue.js 初体验之Chrome 插件开发实录

    vue.js 初体验之Chrome 插件开发实录

    背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码,这样在实际开发中

  • NetCore1.1+Linux部署初体验

    NetCore1.1+Linux部署初体验

    NetCore1.1+Linux部署初体验 1.环境准备 Centaos7+Win10 虚拟机 Win10安装VS2017 注意勾选下.Net Core 3.Centaos安装netcore 1.1参见https://www.microsoft.com/net/core sudo yum install libunwind libicu curl -sSL -o dotnet.tar.gz https://go.microsoft.com/fwlink/?linkid=848821 sudo m

  • Visual Studio for Mac版 初体验

    Visual Studio for Mac版 初体验

    你喜爱的 IDE,现在可用于 Mac.因为在 Visual Studio for Mac 之前,已经有了 Visual Studio Code for Mac,那时候我们还以为 Visual Studio Code 就是 Visual Studio 的跨平台版本,但事实微软并不是这样想的,Visual Studio Code 相对于 Visual Studio 还是太简化了,企业级的应用开发 Visual Studio Code 还是有些力不从心,所以 Visual Studio for Mac

  • js原型链与继承解析（初体验）

    js原型链与继承解析（初体验）

    首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享其属性(下面的两个例子会详细介绍). function foo(){} fo

  • AJAX初体验之实战篇——打造博客无刷新搜索

    AJAX初体验之实战篇——打造博客无刷新搜索

    如果你对AJAX不是很了解,可以先看看这篇教程的前篇<AJAX初体验之上手篇>. 现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客.对于一些有一定能力的朋友,可能更喜欢自己去下载一个博客程序来架设一个自己的博客,而不是使用一些博客网站提供的服务.而大部分博客程序所带的搜索功能是提交查询关键字到搜索页面,然后在后台生成搜索结果,再呈现给用户,这过程之中浪费了一些带宽,如博客的侧边栏.要节约这一些带宽,我们可以用AJAX来打造自己的无刷新日志搜索. 在本篇教程中,数

  • MyBatis入门初体验之使用大全(2)

    MyBatis入门初体验之使用大全(2)

    MyBatis简介 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis .2013年11月迁移到Github. iBATIS一词来源于"internet"和"abatis"的组合,是一个基于Java的持久层框架.iBATIS提供的持久层框架包括SQL Maps和Data Access Objects(DAO) 1.所需jar包

  • Android Bluetooth蓝牙技术初体验

    一:Bluetooth包简介 Android平台提供了一个android.bluetooth的包,里面实现蓝牙设备之间通信的蓝牙API.总共有8个类,常用的四个类如下: BluetoothAdapter类 代表了一个本地的蓝牙适配器.它是所有蓝牙交互的入口点.利用它你可以发现其他蓝牙设备,查询绑定了的设备,使用已知的MAC地址实例化一个蓝牙设备和建立一个BluetoothServerSocket(作为服务器端)来监听来自其他设备的连接. BluetoothDevice类 代表了一个远端的蓝牙设备

  • mac系统安装Python3初体验

    前沿 对于iOS开发不要随便拆卸系统自带的Python,因为有很多 library 还是使用 Python2.7. 1 安装Xcode 1.1 App Store 搜索Xcode 并安装 1.2 安装 Xcode command line tool 1.2.1 打开命令行terminal工具 control + space 输入terminal 回车 1.2.2 安装Xcode command line tool xcode-select --install 2 安装套件管理工具 Homebre

  • Hibernate初体验及简单错误排除代码详解

    Hibernate初体验及简单错误排除代码详解

    Hibernate是什么,有多少好处,想必查找这类博文的都知道,所以就不多说了.下面是我对Hibernate简单使用的一个小小的总结.与君(主要是刚入门的)共勉吧! 创建的顺序 创建Hibernate的配置文件 创建持久化的类 创建对象-关系的映射文件 通过HibernateAPI编写访问数据库的代码 关于详细的步骤 导入Hibernate必须的jar包(hibernate-release-版本号.Final\lib\required) 然后是导入MySQL的jdbc的驱动(mysql-conn

随机推荐