`
yunhaifeiwu
  • 浏览: 163210 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

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

阅读更多


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






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

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




本博文与另一篇博文《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>





3.2 prototype使用----能简单模拟类

说明: (经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能模拟类


3.3 apply与call 使用

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调用父类的构造函数。这样执行子类构造函数,也能执行父类的函数。


3.4 模拟类继承

使用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>



3.5 用js实现自已定义的类体系

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>


分享到:
评论
58 楼 hax 2008-12-18  
我又看完了整个帖子,发现得收回这个话(即js对象即assoc array)。因为话要看对谁说的。像yunhaifeiwu这样的初学者,确实不能跟他说,js对象即assoc array。

因为这样容易导致他把其他语言的经验直接错误地套用到js上来——即使你达到一定的层次(如已经了解过多种语言,对各种语言特性都有所理解),也需要先掌握新语言本身到底是什么。

yunhaifeiwu同学有点身在福中不知福。我们学习js过来,不知走过多少弯路。有人给指点,正是当时求之不得的。

yunhaifeiwu同学的学习方法也有问题。建议你先好好的读js文档,觉得msdn不够,就读mozilla的:https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide
57 楼 hax 2008-12-18  
fins 写道
yunhaifeiwu 写道

......
可用作map,用作树,用作一维数组,多维数组等。

json描述了一个树状结构的对象。各个节点,要么是一个普通对象,要么是函数,要么是一个由前两者组成的复合对象。
   当一个对象,由json定义时,该对象本质是一个关联数组(即索引为字符串的数组
可动态的增加、删除、修改元素。每个元素要么是一个普通对象、要么是一个函数、要么是由这两者组成的复合对象。

......   


建议去 www.json.org 网站看一下 究竟什么是json.

另外 在 关联数组的问题上我再和你纠结一下:
你可以说, "js中,一个object有时可以相当于一个关联数组,但是其本质仍然是一个object"
你那个 "本质是一个关联数组"的说法 大错特错.


哈,你有点咬文嚼字了。关联数组是一个抽象数据类型,JS的对象是此抽象数据类型在一个语言中的具体实现(附带条件,key必须是string),当然JS对象也带有非关联数组的特征,例如prototype机制。所以人家说js的对象本质上就是关联数组,是没啥大错的,除非你硬要跟他纠缠白马非马。。。当然,像js权威指南那样说JS对象可以作为关联数组来用,那当然是严谨到挑不出毛病啦。
56 楼 hax 2008-12-18  
fins 写道
我不认同这本书中的说法
js的对象 可以充当 关联数组
但是 如果 把 {} 理解为关联数组 我觉得是不对的

关联数组是一种特殊的对象 但是两者不能画全等号



http://en.wikipedia.org/wiki/Associative_array

js的对象确实就是关联数组(限制是key必须是string)。只是我们不大用这个词而已。

【Update:见楼下两篇】
55 楼 yunhaifeiwu 2008-12-02  
walkman 写道

呵呵,楼主学习 javascript 的热情让我很佩服

要开发自己的组件,还是如 fins 所说,一定要看优秀的开源代码,组件这块目前 Ext 是个非常理想的选择,不管是 js 基础知识,还是有关组件的封装、继承,你都会受益匪浅,对写出自己的组件一定会事半功倍的,只不过看源代码一定会很郁闷的,不过我相信楼主有这个决心

就目前而言,你还是乘胜追击,用你无与伦比的热情先写出你的 lgihtBox 来吧,毕竟这也是学习的一个过程:)

感谢walkman,这个lightBox,我无伦如何都会写出来的。但写出来,是不会再在js组件中纠缠了。因为我的计划中,仅仅是寻找一个方法。而不是写一套js组件与现有的如extjs之类的组件争。 因此,我只需要基本的js知识就行了。
   

   
   我会把我的开发过程与思路在博克中公布。不管成功与否,我相信都会给某些网友以参考,以启迪!

 
54 楼 walkman 2008-12-02  
呵呵,楼主学习 javascript 的热情让我很佩服

要开发自己的组件,还是如 fins 所说,一定要看优秀的开源代码,组件这块目前 Ext 是个非常理想的选择,不管是 js 基础知识,还是有关组件的封装、继承,你都会受益匪浅,对写出自己的组件一定会事半功倍的,只不过看源代码一定会很郁闷的,不过我相信楼主有这个决心

就目前而言,你还是乘胜追击,用你无与伦比的热情先写出你的 lgihtBox 来吧,毕竟这也是学习的一个过程:)
53 楼 yunhaifeiwu 2008-12-02  
fins 写道
yunhaifeiwu 写道

我在javaeye等着看牛人们完美永远没有错误的教材!没有错误的探讨!


执着与偏执  倔强与固执  只有一线之隔 ......

我在这里说这么多 是因为我希望你少走弯路.
如果你非要把别人走过的弯路 错路都走一遍 才觉得过瘾, 那我也没办法 


对于你的好心,表示感谢!对于你的判断,我不认同。

我会不定期的在blog上发布一些阶段性的学习笔记。如果fins不怕被误导了的话,欢迎指正。

我不会在javaeye的论坛中发贴了。


52 楼 fins 2008-12-02  
yunhaifeiwu 写道
to fins:

     “看不好的书籍 采用不好的学习方法 研究不好的代码”这只是你个人看法主观看法罢了!

     我从网上找资料过程中,有许多人根本连“这种错误的学习方法”都没有。

   
      如果你认为重构仅是建立在IDE没红叉,我只能无语。。。。。

      好了,不说了。我继续用我的方式去学习。看吧,我会弄出来的,我的目标会实现的。
    
  
 


我可没说 仅是

我没怀疑过你会弄出来.
我只是希望你能够 按部就班的 一步一步来 没学会走 就开始跑 也许最后也能到达终点
但是在这个过程中 你要摔倒多少次? 你要耽误多少时间? 最后做出来的东西质量如何保证?

你现在掉入自己的思想黑洞里了 任别人怎么苦口婆心的对你说道理 你都听不进去
我理解

等若干年后 你自己再回过头来看一切的时候 你会明白的.

你继续吧.
51 楼 yunhaifeiwu 2008-12-02  
to fins:

     “看不好的书籍 采用不好的学习方法 研究不好的代码”这只是你个人看法主观看法罢了!

     我从网上找资料过程中,有许多人根本连“这种错误的学习方法”都没有。

   
      如果你认为重构仅是建立在IDE没红叉,我只能无语。。。。。

      好了,不说了。我继续用我的方式去学习。看吧,我会弄出来的,我的目标会实现的。
    
  
 
50 楼 fins 2008-12-02  
yunhaifeiwu 写道

我在javaeye等着看牛人们完美永远没有错误的教材!没有错误的探讨!


执着与偏执  倔强与固执  只有一线之隔 ......

我在这里说这么多 是因为我希望你少走弯路.
如果你非要把别人走过的弯路 错路都走一遍 才觉得过瘾, 那我也没办法 
49 楼 fins 2008-12-02  
yunhaifeiwu 写道


说实在的,软件项目中允许不断重构的方式进行开发软件,可不明白,为什么人学习中不允许
从简到难,循序渐进的方式呢?

人生下来,就先学严密的大学教材,这基本上是可笑的!



重构是要建立在编译正确的基础上的.

你不能在IDE里都是小红叉叉的时候 说:没事 以后还可以重构.
于是就不去修改那些明显的错误 继续开发吧?

学习只是 从基础开始 是可以的.
但是 基础是有前提的 一定要有一个 "良好的基础".

看不好的书籍 采用不好的学习方法 研究不好的代码 , 有什么益处?
48 楼 yunhaifeiwu 2008-12-02  


我在javaeye等着看牛人们完美永远没有错误的教材!没有错误的探讨!


47 楼 fins 2008-12-02  
yunhaifeiwu :
这个组件 ymPrompt  写的不好, 对学习不利.
不能因为短小 你就选择他吧 ? 比他短小的js程序多了去了.

而且我还是建议你 脚踏实地的学一学js的基础知识.
认真的看一看书 然后找一个好一点的 组件学习一下
例如 prototype jquery 之类的. (也很小).


自己不明白的东西 不要自己随便联想 胡乱分析, 要去寻求正确的答案.

例如你前面说
引用
... 这种代码作用,初步估计是为了减少内存泄露之类的吧。

说明:
      1 代码中其事件处理方式中,没有搞得很明白,暂时会用自已的方式处理事件.


你有写这些文章的时间 不如去把这些你没明白的搞明白.


总之, 你现在这种做法 对学习帮助甚微.

(你目前引用的这些例子 和学习笔记 中错误太多了. 我就不一一指出了
有时间的话 你自己好好审视一下吧)






46 楼 yunhaifeiwu 2008-12-02  
achun 写道
fins 写道
你下载个 新版本的ymPrompt 看看
已经不是这么写的了

另外 你为什么要选择这个组件来作为学习的对象呢?
我觉得 这个并不是一个学习的好例子

照楼主这样学习法,说不定会把更多的新手带到沟里的.
没有办法,我已经投隐藏了.


隐就隐吧,如果大家都认为需要隐藏,那么的确存在着问题。至少我的方式,不适合别人采用。

以后,也仅量不发贴子了。

说实在的,软件项目中允许不断重构的方式进行开发软件,可不明白,为什么人学习中不允许
从简到难,循序渐进的方式呢?

人生下来,就先学严密的大学教材,这基本上是可笑的!
45 楼 yunhaifeiwu 2008-12-02  
fins 写道
yunhaifeiwu 写道

下面是可读代码:
  
     var d=document; var c=[];
    $=function(id){      
        var cc=c[id];
        var tm<script type="text/javascript" src="http://www.iteye.com/javascripts/tinymce/themes/advanced/langs/zh.js"></script><script type="text/javascript" src="http://www.iteye.com/javascripts/tinymce/plugins/javaeye/langs/zh.js"></script>p;
        if (cc&&cc.parentNode)    tmp=cc;
        else {
           c[id]=d.getElementById(id);
           tmp=c[id];
        }
        return tmp;
     };
 



应该是     var d=document; var c={};  (注意, 是花括号)
是对象 不是数组. 

晕死,3.0的源码的确是数组。当然弄在花括符形式的对象更爽些。
44 楼 yunhaifeiwu 2008-12-02  
fins 写道
关于 addEvent :

你下载个 新版本的ymPrompt 看看
已经不是这么写的了

另外 你为什么要 >选择 这个组件来作为学习的对象呢?
我觉得 这个并不是一个学习的好例子


汗!我觉得这个短小罢了!如果是extjs之类的,那个源代码估计看起来可吃力! 我先把 这个看完后,
自已就封装一个最简单的类似lgihtBox的东东,然后再考虑向lgihtBox的东东里再装lgihtBox的东东,再装其他简单
的封装了的组件。这个目标到达后,如果有必要,再认真找一多数人认为优秀的组件进行揣磨学习,化化改进自已原来的封装方法。
43 楼 fins 2008-12-02  
yunhaifeiwu 写道

下面是可读代码:
  
     var d=document; var c=[];
    $=function(id){      
        var cc=c[id];
        var tmp;
        if (cc&&cc.parentNode)    tmp=cc;
        else {
           c[id]=d.getElementById(id);
           tmp=c[id];
        }
        return tmp;
     };
 



应该是     var d=document; var c={};  (注意, 是花括号)
是对象 不是数组. 
42 楼 achun 2008-12-02  
fins 写道
你下载个 新版本的ymPrompt 看看
已经不是这么写的了

另外 你为什么要选择 这个组件来作为学习的对象呢?
我觉得 这个并不是一个学习的好例子

照楼主这样学习法,说不定会把更多的新手带到沟里的.
没有办法,我已经投隐藏了.
41 楼 fins 2008-12-02  
关于 addEvent :

你下载个 新版本的ymPrompt 看看
已经不是这么写的了

另外 你为什么要选择 这个组件来作为学习的对象呢?
我觉得 这个并不是一个学习的好例子
40 楼 yunhaifeiwu 2008-12-02  

从ymPrompt3 源代码中,发现的一个从DOM树中,选取类似于div之类的标签对象的函数。

在 数组c中寻找节点,如果数组不存在,在Dom树中寻找节点,同时还存放在数组c中。这中方式缩短了节点查询时间。

下面是可读代码:
  
     var d=document; var c=[];
    $=function(id){      
        var cc=c[id];
        var tmp;
        if (cc&&cc.parentNode)    tmp=cc;
        else {
           c[id]=d.getElementById(id);
           tmp=c[id];
        }
        return tmp;
     };
 

其中:c相当于一个缓冲容器。第一次选取的对象,存在这个缓冲容器中,下次寻找时直接从缓冲容器中取出就是了。
如果组件动态的新增删除时,这个函数估计要闯大祸。

  下面是实用代码:
  
 var c=[],$=function(id){var cc=c[id];return cc&&cc.parentNode?cc:c[id]=d.getElementById(id);};


39 楼 yunhaifeiwu 2008-12-02  
fins 写道
"这种代码作用,初步估计是为了减少内存泄露之类的吧。 "

不是的, 目的如下:
1 限定变量作用域
2 提高安全性(这里的安全性指的是 代码的稳定可靠性)
3 省内存

发现你一个问题: 喜欢肆无忌惮的使用 eval. 这样不好.
在你的那个 tab组件里 有这样一段
    this.ShowTabs=function(thisObj,e){   
       
        var ID=e.getAttribute("idno");   
        if(ID!=thisObj.tID){       
        eval ("document.getElementById(this.targName+'FSimpleTabTitle"+[thisObj.tID]+"').className='';");   
        eval ("document.getElementById(this.targName+'FSimpleTabTitle"+[ID]+"').className='selectedtab';");   
        eval("document.getElementById(this.targName+'FSimpleTabs"+[thisObj.tID]+"').style.display='none';");   
        eval("document.getElementById(this.targName+'FSimpleTabs"+[ID]+"').style.display='';");   
        thisObj.tID=ID;   
        }   
  
    }   


我实在没看明白 为啥非要用eval


在FSimpleTabTitle例子中,说实在的对用json形式定义的对象还没有较深的了解,当时仅知道json字符串,
而 eval可以把json字符串转换成对象。至于eval是否有什么危险,还没注意到。以后在要用到json形式的对象中
不会再用eval了,除非从服务器上以字符串的方式传来对象例外。用eval加服务器,比较容易写出由服务器端控制
web外观的组件出来。

而ymPrompt源代码中用了eval这种方式,我也不明白为什么用,这里我是强制剥离出来,作参考用。我到现在也完明。那个1让我头大了N多。代码如下:  
   
       var addEvent=(function(){  
            return eval(['1,function(env,fn,obj){obj=obj||document;',  
                isIE?"obj.attachEvent('on'+env,fn)":  
                    'obj.addEventListener(env,fn,false)',  
                '}'].join(''))  
        })(); 
 
说明:ymPrmpt代码中,这段代码只有一行。

从可阅读性上来说,用eval这种方式最差劲了。仅感觉其代码短小罢了。实质上,用javaeye某些牛人的压缩软件,
这种代码长短的问题基本上可暂不管。(当然是个人现阶段的认识观点)。对了,记得那个作者说,用eval的东东
比较难压缩^_^.

还有,对ymPrompt的事件注册,自已感觉也不大爽。理由:自我感觉,主流浏览器都支持类似"onclick=事件响应函数"的方式进行事件注册。

相关推荐

    js 书写较复杂的UI日记

    【标题】"JS 书写较复杂的UI日记"主要探讨的是如何使用JavaScript来构建一个功能丰富的用户界面,尤其可能涉及到自定义布局和交互设计。在Web开发中,JavaScript是一种不可或缺的脚本语言,它使得网页具有动态性和...

    ui-components:React UI组件

    JavaScript是React的基础,它是一种广泛使用的、动态的、基于原型的编程语言,尤其在Web开发中占据重要地位。React的JSX语法扩展了JavaScript,使得在JavaScript中书写HTML元素变得更为直观。在"ui-components"项目...

    JavaScript_学习Reactjs的基础知识,使测试通过.zip

    本压缩包“JavaScript_学习Reactjs的基础知识,使测试通过.zip”显然旨在帮助初学者掌握React的基础,并学习如何编写通过测试的React应用。 React.js的核心概念: 1. **虚拟DOM(Virtual DOM)**:React使用虚拟DOM...

    React组件合集,附视频教程_JavaScript_CSS_下载.zip

    1. React基础知识:JSX、组件、props和state、事件处理。 2. React Hooks:useState、useEffect、useContext、useReducer等,它们如何简化类组件的逻辑。 3. React Router:用于应用程序的路由管理,创建可导航的...

    Garden React组件.zip

    1. **JSX**:React引入了一种类似HTML的语法扩展,称为JSX,它允许在JavaScript中书写UI结构。JSX使得组件定义更加直观。 2. **Props**:组件可以通过props(属性)接收外部数据,props是组件之间通信的基础。 3. **...

    18.1 01_react_basics_javascript_

    以上就是React基础知识的概览,它结合了JavaScript的强大功能和组件化的思想,为构建动态、高效的Web应用提供了强大的工具。通过深入学习和实践,你可以更好地理解和运用React,创建出高质量的前端应用。

    React小书(完整版)1

    本书不仅仅提供了React.js的基础知识,还深入探讨了React.js的高级特性,使得读者能够在掌握基础知识的基础上进一步深入学习,应对更为复杂的开发场景。 React.js作为前端组件化的重要实践,自诞生之日起就迅速受到...

    此为本人学习node.js中书写的Demo,特此保存一下。采用AppCan MEAP移动应用开发平台开发,数据库采用.zip

    4. **移动应用开发**:掌握移动应用开发的基础知识,包括UI设计原则、响应式布局、手势识别等,理解原生与混合应用的区别。 5. **前后端交互**:理解RESTful API设计,用JSON格式交换数据,学习如何通过Ajax或者...

    react-basico:在 React.js 中编写组件的基础

    在这个"react-basico"项目中,我们将深入探讨在React中创建组件的基础知识。 一、React组件的概念 React组件是构建UI的基本单元,可以想象为独立的、自包含的代码块,它们负责渲染特定部分的视图。组件可以是简单的...

    JavaScript_初学者文件,最终项目和FAQ为我的终极React课程.zip

    总的来说,这个压缩包提供了一条从JavaScript基础知识过渡到React实战的完整学习路径,对初学者来说是一份宝贵的资源。通过系统学习和实践,不仅能掌握JavaScript语言,还能深入理解React框架,为成为专业的前端...

    movie_app:React JS基础知识!

    电影应用2021是基于React JS开发的一个项目,它展示了React的基础知识和在实际开发中的应用。React作为JavaScript库,主要用于构建用户界面,尤其适用于单页应用(SPA)。在这个项目中,我们可以深入理解React的核心...

    Lay-UI前端模板

    2. **HTML/CSS/JS书写与组织形式**:LayUI遵循原生的HTML、CSS和JavaScript编写方式,使得对前端基础有了解的开发者能够快速上手。同时,它提供了一套规范,使得代码结构清晰,有利于团队协作和代码一致性。 3. **...

    react+ant design admin

    - JSX语法:React使用JSX,一种JavaScript的扩展语法,允许在JavaScript中书写HTML样式的代码,方便地创建和组合UI组件。 - State与Props:State是组件内部的数据,可变;Props是组件接收的外部数据,不可变。组件...

    我的react练习,第一节

    在本节React练习中,我们将深入探讨React.js的基础知识,这是一种流行的JavaScript库,用于构建用户界面,特别是单页应用程序(SPA)。React以其组件化、声明式编程风格和高效的虚拟DOM著称,是现代前端开发的重要...

    【JavaScript源代码】如何创建自己的第一个React 页面.docx

    【JavaScript源代码】如何创建自己的第一个React页面 ...了解并掌握这些基础知识,你就踏上了React开发之旅。随着进一步的学习,你将能够利用React的组件系统、状态管理和生命周期方法来构建功能丰富的Web应用程序。

    react学习1

    总之,React是通过函数组件和JSX语法来构建可复用的UI组件。通过合理的环境配置和基本的HTML容器设置,开发者可以轻松地开始React项目,并在JavaScript文件中创建和渲染React组件。了解这些基础知识对于掌握React...

    资源前后端分离式分布式微服务架构项目搜索前端Nuxt.js讲义+源码+视频

    例如,`pages`目录用于存放路由相关的组件,`components`目录存放可复用的UI组件等。 - **理解目录别名**:通过配置`alias`字段可以在项目中定义别名,方便引用各个文件夹下的文件,简化路径书写。 - **能够测试页面...

    danpung2-movie_app_21:React JS基础知识

    在这个“danpung2-movie_app_21”项目中,我们将深入探讨React的基础知识,这将帮助你理解和掌握这个强大的库。 1. **React组件**:React的核心概念是组件化,它允许我们将UI分解为独立、可重用的部件。在项目中,...

    react基础与进阶部分笔记

    React.js 是一个由Facebook开发并维护的开源JavaScript库,用于构建用户界面,特别是单页应用程序。这个库专注于视图层,让开发者能够高效地管理组件的状态和渲染过程。本笔记将涵盖React的基础概念以及进阶特性,...

    前端开发简历模板-web前端开发工程师-3年.docx

    前端开发简历模板-web...本资源摘要信息总结了前端开发工程师的基础知识、JavaScript 程序设计、前端开发框架和工具、Node.js 和 GraphQL、项目经验等多个方面的知识点,为前端开发工程师提供了详细的知识 reference。

Global site tag (gtag.js) - Google Analytics