《案例精解企业级网络构建》赠书活动开始啦！　最新活动：“Web安全大家谈”有奖征文

Ajax开源JS包Prototype使用指南

2007-11-18 12:11:01

dplicn=Ajax开源JS包Prototype使用指南

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

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

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

1.2. 关联文章
高级JavaScript指南

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

1.3.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字符串或者元素对象自己，这使得在创建可以传入任何形式参数的方法的时候，它变得非常有用。

1.3.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>1.3.3. 使用$A()方法
$A()方法把接收到的参数转换成一个Array对象。

这个方法加上对Array类的扩展，可以很容易的转换或者复制任意的列举列表到Array对象，一个被推荐使用的用法就是转换DOM的NodeLists到一个普通的数组里，可以被更广泛高效的使用，看下面的例子。

<script>

    function showOptions(){
        var someNodeList = $(`lstEmployees`).getElementsByTagName(`option`);
        var nodes = $A(someNodeList);

        nodes.each(function(node){
                alert(node.nodeName + `: ` + node.innerHTML);
            });
    }
</script>

<select id="lstEmployees" size="10" >
    <option value="5">Buchanan, Steven</option>
    <option value="8">Callahan, Laura</option>
    <option value="1">Davolio, Nancy</option>
</select>

<input type="button" value="Show the options" > 1.3.4. 使用$H()方法
$H()方法把对象转化成可枚举的貌似联合数组Hash对象。

<script>
    function testHash()
    {
        //let`s create the object
        var a = {
            first: 10,
            second: 20,
            third: 30
            };

        //now transform it into a hash
        var h = $H(a);
        alert(h.toQueryString()); //displays: first=10&second=20&third=30
    }

</script>
1.3.5. 使用$R()方法
$R()方法是new ObjectRange(lowerBound, upperBound, excludeBounds)的一个简单快捷的使用方式。

ObjectRange类文档里面有完整的解释。同时，我们来看看一个简单的例子，来演示通过each方法遍历的用法。那个方法的更多解释在Enumerable对象文档里面。

<script>
    function demoDollar_R(){
        var range = $R(10, 20, false);
        range.each(function(value, index){
            alert(value);
        });
    }

</script>

<input type="button" value="Sample Count" > 1.3.6. 使用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>

上一篇 ajax开发工具bindows教程--创建一个主题　　下一篇 AJAX入门教程-HTTP协议基础

类别：未分类 ┆ 技术圈() ┆ 阅读() ┆ 评论() ┆推送到技术圈 ┆返回首页

相关文章

文章评论

昵称：
验证码：		点击图片可刷新验证码　　博客过2级，无需填写验证码
内容：

刚刚

Ajax开源JS包Prototype使用指南