用js书写UI组件之js基础知识

最新推荐文章于 2023-01-10 22:31:24 发布

yunhaifeiwu

最新推荐文章于 2023-01-10 22:31:24 发布

阅读量328

点赞数

分类专栏： UI封装之javascript 文章标签： UI prototype json JavaScript jQuery ViewUI

UI封装之javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

[color=red]
[size=medium]
本人在用js书写UI组件道路上正不断探索与学习，下面是自已的理解与学习笔记。欢迎各位
网友指正。本贴内容仅供参考。但有一点，所发的源代码，本人是测试过的。如果因此各各位
带来不便，请谅解！
[/size]
[/color]

[color=blue]

[color=blue] 特别说明：
[size=medium] 1 本人文中所用的词，也许与各位网页见到的词，概念上有不一致的地方。请各位见谅。本文有许多词
是属于理解之物，请各位注意。重点看例子！通过例子与文字描述试着理解，如果还理解不了，请各位不要浪费时间了！再次说明，本文是笔记与探索文，阅读时要严重注意！

2 本文的例子全部调试通过了的。默认的浏览器是 firefox 3,调试工具是firebug.在印象中会在ie 6下验证能否
是同样的效果，但不能保证每个都会在ie6 下验证。如果没有特别说明，意味着其他浏览器全部没测试。[/size]
[/color]

本博文与另一篇博文《javascript函数式编程---解决事件参数传递问题》
构成了用js实现书写UI组件的基础知识，及实现的技术手段。
笔记很多，仅选用了自认为对同样道路上有用的朋友。
关于封装的总的方法论，时机到了再发布。

3.1 javascript 模拟类
[/color]
说明：
1 在javascript中，函数就是一个特简单的类。定义了一个函数，就定义了一个类。可用var关键字与new关键字为该函数生成一个对象。
例：


function Aa(){var dd="ddd"};//类名是Aa
var aa1=new Aa();//aa1 是类Aa的对象。同时Aa()函数就是Aa类的构造函数。

2 函数中，前缀有“this.”的变量，就是刻函数类的公有变量与公有方法。

3 注意 this 关键字的使用，它指向当前对象。

例：


<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body> 

<script language=Javascript>
  function Pasta(aaa ){　　//构造方法,同时也是类名
　　     this.aaa= aaa;//定义属性, 
         this.ddd="ddd"; //定义属性,
         this.bb=cc;//定义方法
         this.eee=function(){alert("cc")};//另一种方法定义及实现
　}

  function cc(){//方法实现
	  document.write(this.aaa);
  }
  // 另一种方法定义与实现
  Pasta.prototype.dd= function(d){
	 alert(d);
  }
 var xx=new Pasta("hello word");//为类Pasta生成一个名叫xx的对象
 xx.bb("sssss");//使用对象
 xx.dd("sssxxxx");
 xx..eee();

</script>

</body>
</html>

[color=blue]
3.2 prototype使用----能简单模拟类
[/color]
说明： (经walkman指出，在这里作了更改)
(1) 所有函数都具有prototype属性。
(2) 函数可当成一个类，可用new为该函数生成一个函数对象。
(3) 可用prototype为函数动态新增函数属性与方法。
(4) 假定有一个函数名为 Afun,则用prototype可为Afun增加属性与方法。此时所有的Afun对象都具有这些属性与方法。
(5) 特别注意：假定有一个对象名为anObj,但无法用prototype为anObj增加属性与方法。
如：


function Dd(){};//定义一个空的类
var dd=new Dd();//生成一个Dd对象
;//动态为Dd类增加一个xx属性,从此时起所有的Dd对象都具有xx属性。
Dd.prototype.xx="22";
//动态为Dd类增加一个say函数,从此时起所有的Dd对象都具有say函数。
Dd.prototype.say=function(){alert(this.xx)}; 
dd.say(); //执行后，将显示一个信息框，内容为22
var bb=new Dd();//再生成一个Dd对象
bb.say();//执行后，将显示一个信息框，内容为22
//也就是说bb,dd都能调用用prototype定义的属性与函数

结论：
使用prototype能模拟类

[color=blue]
3.3 apply与call 使用
[/color]
appply是所有函数都具有的方法。其作用时，调用该函数，参数通过参数表的形式传入；同时还传递一个对象到该函数的this对象中。
调用形式： functionName.apply(obj,[“zhang”,”34”]);
其义是：调用functionName函数，其参数是”zhang”,”34”,同时在functionName函数执行时，其内部的this对象还具有一个属性obj。注意：这个obj不是functionNam函数固有的，随着apply调用变化而变化。
这个apply动态传一个对象到被调用函数的this对象中，是为特殊应用而生。
另外：1 arguments是每个函数都固有的对象，存放着该函的参数
2 call与apply类似，仅参数方式不同。
例：


functionName.call(obj,“zhang”,”34”)

例：


<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body><script language=Javascript>

function parent(name,age){
   this.name=name;
   this.age=age;
   this.say=function(){ 
      alert(this.name);
   }
}

function Son(){
   var dd1="ha ha ha";
   this.tel="11";
   //调用parennt函数，且此时的该函数（即parennt）内的this对象具有dd1的属性。注意：
   //仅限于本次执行时才能确定具有dd1的属性。
   parent.apply(dd1,["zhang"]);
   this.calltel=function(){
      alert(this.tel);
   }

}
var s = new Son("ss","aa");
s.calltel();

</script>
</body>
</html>

用途：
可用在下面的情景中。
当模拟类继承时，子类构造函数，通过apply调用父类的构造函数。这样执行子类构造函数，也能执行父类的函数。

[color=blue]
3.4 模拟类继承
[/color]
使用prototype与apply实现类继承的模拟。用prototype把父类的公有方法与公有变量加入到子类中去。在子类构造方法中，用apply执行父类的构造方法。
例：


<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>


<script language=Javascript>
  function Parent(){　　//父类
	     this.pname="parentName";//父类公有变量
	     this.say=function(){alert(this.pname)};//父类公有方法
	     this.tell=function(){alert(this.pname+"tell")};//父类公有方法
　}
  function Son(){　

	    //以下两句要先执行，不然不能完成方法覆盖
    Son.prototype=new Parent();//得到父类的公有变量与公有方法　 
	    Parent.apply(this); //调用父类的构造函数           

	    this.sname="sonName";//子类公有变量
	    this.say=function(){alert(this.sname)};//子类公有方法，覆盖了父类的say方法
	    this.talk=function(){alert(this.sname+"talk")};//子类公有方法
　}

  var son1=new Son();
  son1.say();//显示 sonName,表时成功覆盖父类
  son1.talk();//显示 sonNametalk ，执行子类自已的方法
  son1.tell();//显示 parentNametell ,执父类没被覆盖的方法。
  son1.pname="父亲老张"; //使用父类的变量 
  son1.tell();//显示 父亲老张  表明成功使用了父类的公有方法与属性
  son1.sname="儿子小张"; //用子类自已的变量
  son1.say(); //显示 儿子小张 表明子类的属性与覆盖方法正常
  son1.talk();//显示 儿子小张 表明子类的属性与方法正常

var son2=new Son();//生成另一个子类，研究子类是否是对父类的方法与变量的拷贝
  son2.pname="母亲李夫人";
  son2.tell();//显示  母亲李夫人； 表明成功使用父类的方法
  son1.tell();//显示 父亲老张；  表明多个子类使用的同名的父类的变量，各有自已的值。 

</script>

</body>
</html>

[color=blue]
3.5 用js实现自已定义的类体系
[/color]
3.5.1 说明：
(1) 本节实例多半摘自悟透javascript一书。
(2) 本节中的类是用javascript语法，实现了自已设定的类体系结构。
(3) Javascript原本是没有类的，只有函数。其他一些章节中提到的类，仅仅是模拟类体系罢了。而这里是要用javascript自已实现一套类体系

3.5.2 语法规定
Create函数-----类的构造函数；
Class 函数------类定义函数
New 函数-----产生类的实例。
object---所有自定义类的基类。
说明：javascript区分大小写，自身的关键字为：new Object
自定义的类，如下形式表式：


var Person ={ //定义名为Person的类
	  Create: function(name, age) {//Create指明构造函数
		  this.name = name;//定义类公有变量
		  this.age = age; //定义类公有变量
	  },
	  SayHello: function(){//定义公有方法
		  alert("Hello, I'm " + this.name);
	  },
	  HowOld: function(){//定义公有方法
	      alert(this.name + " is " + this.age + " years old.");
	  }
};

说明：
（1）上例是自已定义的类体系使用例子。例子中定义了一个名为Person的类，其构造方法，由Create指明。
（2）本例中可直接用Person.SayHello()的形式，调用方法。但是无法得到公有变量值，即name与age.解决方法。
（3）在调用了Create函数后，Person类就有了name变量与age变量。为了说明方便见下例：


<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>

<script language=Javascript>

var Person ={ //定义名为Person的类
	  Create: function(name, age) {//Create指明构造函数
		  this.name = name;//定义类公有变量
		  this.age = age; //定义类公有变量
	  },
	  SayHello: function(){//定义公有方法
		  alert("Hello, I'm " + this.name);
	  },
	  HowOld: function(){//定义公有方法
	      alert(this.name + " is " + this.age + " years old.");
	  }
};

//  //该语句执行后，Penson类就有了name与age变量。
//  Person.Create("dd1","ss1");

function Fun(){Person.Create("dd","ss");};//定义了一个名为Fun的函数，
Fun.prototype=Person;//让Fun拥有Person类的成员

//一旦执行了Fun函数，就执行了Person.Create方法，
//Person.Create方法一执行，Person就有了公有变量name与age
//当Person有了公有变量时，由于Fun中有Person类成员，因此Fun也就有了name变量
//与age变量。
var p =new Fun();
p.SayHello();// 显示“Hello, I'm dd ”， 这表明了p具有了变量name与age.

</script>

3.5.3 New实现
为了生成自定义类的对象，定义了New方法，该方法原型为：
New(aClass, aParams)
其中：aClass 类,该类定义中要有Create方法。aParams类构造函数的参数表.
实现时：
（1）生成一个临时函数，该函数要执行类定义中的Create方法。
（2）这个临时函数具有aClass对象；
（3）生成临时函数的对象，并返回给调用者。


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>18-1.html</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<script language="javascript">
    //aClass 类，该类定义中有名为Create的函数；aParams 类构造函数的参数表。
    function New(aClass, aParams) { 
        function new_() { //定义临时函数
            aClass.Create.apply(this, aParams); //调用类的构造函数，并执行
        }; 

		//让临时函数具有aClass类
        new_.prototype = aClass;  
		//生成临时函数的对象。生成时要执行该临时函数，该临时函数会执行类的
		//构造函数。类构造函数一旦执行，类就有了公有变量，从而拥有该类的临时
		//函数也就具有了类的公有变量。
        var a=new new_();
        return a;          //返回aClass的实例
    }; 

    //*******************下面是具自定义类的使用*******************]
	//定义Person类
    var Person = { 
        Create: function(name, age){ //定义构造函数
            this.name = name; //定义公有变量
            this.age = age; //定义公有变量
        }, 
        SayHello: function() { //定义公有方法
            alert("Hello, I'm " + this.name); 
        }, 
        HowOld: function() { //定义公有方法
            alert(this.name + " is " + this.age + " years old."); 
        } 
    }; 

    var BillGates = New(Person, ["Bill Gates", 53]);  //生成Person类的实例
	 //使用Person的实例
    BillGates.SayHello();
    BillGates.HowOld(); 

</script>
</body>
</html>

3.6 自定义类体系实现及使用


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>20-1.html</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<script language="javascript">
    // 根类 实现,注意object不是的关键字。Object才是固有的。
    var object = {  
	     // 判断本实例是否属于指定的类。 
        isA: function(aType)  { 
            var self = this; 
            while(self) 

            { 
                if (self == aType) 
                  return true; 
                self = self.Type; //由于类的继承原故，因此要循环。
            }; 
            return false; 
        } 
    }; 

	// 类定义函数 实现。该函数实现了一个类的定义
	//aBaseClass----父类；aClassDefine子类
    function Class(aBaseClass, aClassDefine) { 
	    //临时函数
        function class_()  { 
            this.Type = aBaseClass;  //保存类的父类类型，注：不是祖先类
		    //复制类定义
            for(var member in aClassDefine) 
                this[member] = aClassDefine[member];    
        }; 
		//让临时函数拥有父类
        class_.prototype = aBaseClass; 
		//生成临时函数的对象，并返回。该临时函数不仅有父类成员，也有子类成员，
		//另外还通过type保存了类的父类的类型。
        return new class_(); 
    }; 

	//实例生成函数实现
	//aClass---类；aParams---类构造函数的参数表
    function New(aClass, aParams)  { 
	    //临时函数
        function new_()  { 
            this.Type = aClass;//保存该实例的类型   
			//如果类定义中有名为Create的函数，则执行。
			//这个Create是我们约定的构造函数
            if (aClass.Create) 
              aClass.Create.apply(this, aParams); //执行构造函数   
        }; 
		//让临时函数拥有aClass类
        new_.prototype = aClass; 
		//生成临时函数的实例，并返回给调用者。该实例有类中的所有公有
		//变量与方法，还有一个公有变量Type保存着该实例的类型。
        return new new_(); 
    }; 

     //*********************自定义类体系使用*************************
	 //定义一个Person类，父类是object
     var Person = Class(object,
	    //下面是Person类定义的描述
	    { 
          Create: function(name, age) { //定义构造函数
             this.name = name; //定义公有变量
             this.age = age; //定义公有量
         }, 
         SayHello: function() { //定义公有方法
             alert("Hello, I'm " + this.name + ", " + this.age + " years old."); 
         } 
     }); 

	 //定义一个Employee类，继承于Person类
     var Employee = Class(Person,    
	    //个Employee类的定义描述
       { 
         Create: function(name, age, salary) { 
             Person.Create.call(this, name, age);  //调用基类的构造函数 
             this.salary = salary; 
         }, 
         ShowMeTheMoney: function() { 
             alert(this.name + " $" + this.salary); 
         } 
     }); 

	 //生成Person类的实例
     var BillGates = New(Person, ["Bill Gates", 53]); 
	 //生成Employee类的实例
     var SteveJobs = New(Employee, ["Steve Jobs", 53, 1234]); 
     BillGates.SayHello(); 
     SteveJobs.SayHello(); 
     SteveJobs.ShowMeTheMoney(); 

	 //根据 BillGate的类型创建 LittleBill 
     var LittleBill = New(BillGates.Type, ["Little Bill", 6]);   
     LittleBill.SayHello(); 

     alert(BillGates.isA(Person));       //true 
     alert(BillGates.isA(Employee));     //false 
     alert(SteveJobs.isA(Person));       //true 
     alert(Person.isA(Employee));        //false 
     alert(Employee.isA(Person));        //true 
</script>
</body>
</html>

yunhaifeiwu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用js书写UI组件之js基础知识

[color=red][size=medium]本人在用js书写UI组件道路上正不断探索与学习，下面是自已的理解与学习笔记。欢迎各位网友指正。本贴内容仅供参考。但有一点，所发的源代码，本人是测试过的。如果因此各各位带来不便，请谅解！[/size][/color][color=blue][color=blue] 特别说明：[size=medium] ...
复制链接

扫一扫

专栏目录