【prototype】笔记2

最新推荐文章于 2025-04-08 12:10:25 发布

原创最新推荐文章于 2025-04-08 12:10:25 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#prototype #Ajax #JavaScript #HTML #浏览器 #ViewUI

prototype 专栏收录该内容

2 篇文章

订阅专栏

本文介绍Prototype.js中的多种实用技巧，包括$R()方法的使用、Try.these()方法的应用、AJAX请求处理、顶层元素操作、数组处理以及Element对象操作等。通过具体示例展示如何在网页开发中有效运用这些技巧。

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

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

<html>
    <head>
        <title>$R</title>
        <script type="text/javascript" language="javascript"
         src="prototype.js" ></script>
        <script>
        // 依次输出1，2，3，4
        function test_R1(){
            var range = $R(1, 5, true);
            range.each(function(value, index){
                alert(value);
            });
        }

        // 依次输出1，2，3，4，5
        function test_R2(){
            var range = $R(1, 5, false);
            range.each(function(value, index){
                alert(value);
            });
        }
        </script>
    </head>
    <body>
        <form>
            <input type="button" value="click (exclusive = true)"
            onclick="test_R1()" />
            <input type="button" value="click (exclusive = false)"
            onclick="test_R2()" />
        </form>
    </body>
</html>

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

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

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

3.AJAX 应用

<html>
    <head>
        <title>Ajax</title>
        <script type="text/javascript" language="javascript"
         src="prototype.js" ></script>
        <script type="text/javascript" language="javascript">
        function test() {
            var myAjax = new Ajax.Request(
                'http://www.iteye.com', 
                {
                    method: 'get', 
                    onComplete: showResponse
                }
            );
        }
        
        function showResponse(response) {
            $('divResult').innerHTML = response.responseText;
        }        
        
        var handle = {
            onCreate: function() {
                Element.show('loading');
            },
            onComplete: function() {
                if (Ajax.activeRequestCount == 0) {
                    Element.hide('loading');
                }
            }
        };
        Ajax.Responders.register(handle);//把handle注册到全局的Ajax.Responders，Ajax.Responders用来维护一个正在运行的Ajax对象列表
        </script>
    </head>
    <body>
    <input type="button" value="click" onclick="test()" />
    <div id="divResult" ></div>
    <div id='loading' style="display:none">
        <img src="loading2.gif">Loading
    </div>
    </body>
</html>

4. 顶层元素

<html>
<head>
<title>顶层元素</title>
<script src="prototype.js"></script>
<script>
var Person=Class.create();
Person.prototype={
    initialize:function(){},
    name:'',
    birthday:'',
    age:'',
    Show:function(){alert("This is "+this.name);}
    };
    function TestPerson()
    {
        var p=new Person();
        p.name="Tom";
        p.age=4;
        p.birthday="1997-7-1";
        p.Show();
        };
        var User=Class.create();
        
        User.prototype={
            initialize:function(){},
            userid:'',
            Report:function()
            {
                alert("UserID:"+this.userid+"   Name:"+this.name+"   Age:"+this.age+"  Birthday:"+this.birthday);
                }
            };
            Object.extend(User.prototype,Person.prototype);
            function TestUser()
    {
        var user=new User();
        user.name="Chou Fat";
        user.age=4;
        user.userid=2396
        user.birthday="1997-7-1";
            user.Show();
        user.Report();
    
        }
        function ShowPrototypeInfo()
        {alert(Prototype.Version+"   "+Prototype.ScriptFragment);
            }
            function TestInspect()
        {var s="wanfangsoftcenter";
            alert(Object.inspect(s));
            }
            //-------------------------------------------------------
            function testFunctionBind()
            {
                var person=new Person();
                person.name="Jerry";
                person.age=4;
            person.birthday="1997-7-1";
                 var user=new User();
                user.name="Tom";
                user.age=5;
            user.userid=2396
            user.birthday="1999-12-20";
                var handler=user.Report.bind(person);
                handler();
                }
                var Listener=new Class.create();
                Listener.prototype={
                    initialize:function(btn,message)
                    {
            
                        $(btn).onclick=this.showMessage.bindAsEventListener(message);
                        },
                        showMessage:function(message){
                            alert(message);
                            }
                    };
                                var listener=new Listener("testEventListener","点击！");

                
                </script>
<body>
    <input type=button value="ShowPrototypeInfo" onclick='return ShowPrototypeInfo();' />显示Prototype的基本信息<br><hr>
<input type=button value="TestPerson" onclick='return TestPerson();' />利用我们创建的Person类生成一个p对象 检测一下是否成功<br>
<input type=button value="TestUser" onclick='return TestUser();' />User类继承Person类，生成一个User对象 检测一下是否成功<br>
<input type=button value="TestInspect" onclick='return TestInspect();' />测试一下Object的Inspect方法<br>
<input type=button value="testFunctionBind" onclick='return testFunctionBind();' />测试一下Object的FunctionBind方法<br>
<input type=button value="testEventListener" id="testEventListener" />testEventListener<br>
<script>
        var Listener=new Class.create();
                Listener.prototype={
                    initialize:function(btn,message)
                    {
                  this.message=message;
                        $(btn).onclick=this.showMessage.bindAsEventListener(this);
                        },
                        showMessage:function(){
                            alert(this.message);
                            }
                    };
                                var listener=new Listener("testEventListener","点击！");

                
                </script>
<hr>
<script>
function TimeExe()
{
    var timerExe=new  PeriodicalExecuter(showTime,1);
    
    }
    function showTime()
    {
        var time =new Date();
        var d = $('myDiv');
        d.innerHTML=time;
        }
        </script>
<div id="myDiv">
<p>This is a paragraph</p>
<input type="button" value=定时器测试 onclick="TimeExe();"><br></div>
<hr>
<script>
    function TestNumber()
    {
        var n=50;
        var b=3;
        alert(n.toColorPart());
        alert(n.succ());
alert(b.toPaddedString());
      //b.times(alert());
        }
    </script>
    <input type="button" value='Number测试' onclick="return TestNumber();"/><br>
</body>
</html>

5. 数组

<script src="prototype.js"></script>
<script>
/**//*var arr = [1,2,3,4,8,5,4,3];
// 依次输出1,2,3,4,5,4,3
arr.each(
    function (item, index) {
        if (item < 6) {
            alert(item);
        } else {
            throw $continue;
        }
    }
);
// 依次输出1,2,3,4
arr.each(
    function (item, index) {
        if (item < 6) {
            alert(item);
        } else {
            throw $break;
        }
    }
);*/


/**//*
var arr = [1,2,3,4,5];
// arr = [1,2,3,4,5]
arr.reverse(false);
alert(arr.inspect());
// arr = [5,4,3,2,1]
arr.reverse();
alert(arr.inspect());


var arr = [1,2,3,4,5];
arr.reverse();
// 返回2在arr中的序号：1
var index = arr.indexOf(2);
alert(index)


var arr = [1,2,3,4,5];
// 不包含2和4，返回[1,3,5]
var newArr = arr.without(2,4);
alert(newArr.inspect());


var arr = [1,2,3,4,5];
arr.clear();
alert(arr[2]);


var arr = [1,2,3,4,5];
var arr2 = [2,4,6,8,10];
//[ [1,2],[2,4],[3,6],[4,8],[5,10]]
var newArr = arr.zip(arr2);
// [[1,4],[4,16],[9,36],[16,64],[25,100]]
var newArr2 = arr.zip(
    arr2,
    function (item) {
        var newItem = item.collect(
            function (item, index) {
                return item * item;
            }
        );
        return newItem;
    }
);
alert(newArr.inspect());
alert(newArr2.inspect());


var arr = [5,2,3,1,4];
// 将arr排序
var arr = arr.sortBy(
    function (item, index) {
        return item;
    }
);

arr.each(
    function (item, index) {
        alert(item);
    }
);


var arr = [
    {root: 1, square: 1},
    {root: 2, square: 4},
    {root: 3, square: 9},
    {root: 4, square: 16},
    {root: 5, square: 25}
];
var newArr = arr.pluck("square");
alert(newArr[4]);



var arr = [1,2,3,4,5];
var ptArr = arr.partition(
    function (item, index) {
        return item%2 == 1;
    }
);
var oddArr = ptArr[0];
var evenArr = ptArr[1];
oddArr.each(
    function (item) {
        alert(item);
    }
);
evenArr.each(
    function (item) {
        alert(item);
    }
);


var arr = [1,2,3,4,5];
// 最大值
var max = -arr.min(
    function (item, index) {
        return -item;
    }
);

// 最小值
var min = arr.min();
alert(max);
alert(min);


var arr = [1,2,3,4,5];
// 最大值
var max = arr.max();

// 最小值
var min = -arr.max(
    function (item, index) {
        return -item;
    }
);
alert(max);
alert(min);


// 求集合中每一个元素的平方
Number.prototype.square = function () {
    return this * this;
}
var arr = [1,2,3,4,5];
var newArr = arr.invoke("square");
alert(newArr[4]);


// 计算arr中所有数的乘积
var factorial = arr.inject(
    1,
    function (accumulator, item, index) {
        return accumulator * item;
    }
);
alert(factorial)

// 判断集合中是否包含”2“
var inc = arr.include(2);
alert(inc);

var arr = ["12345", "abc2", "cde", "fgh", "132ba"];
var newArray = arr.grep(
    /2/,
    function (item, index) {
        return item + " contains 2";
    }
)
newArray.each(
    function (item) {
        alert(item);
    }
);


var arr = [1,2,3,4,5];
// 返回集合中所有的奇数
var oddArr = arr.findAll(
    function (item, index) {
        return item%2 == 1;
    }
);
alert(oddArr[2]);

// 返回第一个大于3的元素
var ele = arr.find(
    function (item, index) {
        return (item > 3);
    }
);
alert(ele);

var newArr = arr.collect(
    function (item, index) {
        return item * (index + 1);
    }
);
var hasNegative = arr.any(
    function (item, index) {
        return (item < 0);
    }
);


// 测试集合中的所有元素是否大于0
var allPositive = arr.all(
    function(item, index) {
        return (item > 0);
    }
)
alert(allPositive);

arr.each(
    function (item, index) {
        alert("arr[" + index + "] = " + item);
    }
);*/
</script>

6. Element

<html><head><script src="prototype.js"></script> 
    <script>   
           function testRemove()
          {
              Element.remove("mydiv3");
              }
              function testReplace()
              {
                  Element.replace("myDiv2",'<img src="200607061129268fc45.jpg">');
                  }
                 </script>
    </head>
    <body>
         <div id="myDiv">        2002    </div> 
         <div id="myDiv1">        2003    </div> 
         <div id="myDiv2">        2004    </div> 
         <div id="myDiv3">        将被删除的部分    </div> 
         <div id="myDiv4">        2006    </div> 
         <div id="myDiv5">        2007    </div> 
         <div id="myDiv6">        2008    </div> 
         <hr>
             <input type="button" value='removeTest' onclick="return testRemove();"/><br>
                 <input type="button" value='testReplace' onclick="return testReplace();"/><br>
         </body>
         
         
         </html>

<转自：http://www.cnblogs.com/me-sa/archive/2007/04/24/724660.html >