WEB开发网
开发学院网页设计JavaScript Prototype实战教程----8.顶层对象 阅读

Prototype实战教程----8.顶层对象

 2010-09-14 13:10:22 来源:WEB开发网   
核心提示:<html><head><title>顶层元素</title><script src="prototype.js"></script><script>var Person=Class.create();Person.

<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","点击!");

1 2  下一页

Tags:Prototype 实战 教程

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接