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

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

UIprototypejsonJavaScriptjQuery 
阅读更多


本人在用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>


分享到：
| javascript函数式编程---解决事件参数传递 ...
评论
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，创建出高质量的前端应用。

    此为本人学习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。

    reactjs-semantic-ui

    1. **ReactJS基础知识** - **组件化**：React的核心是组件，每个组件都是独立的代码单元，可以有自己的状态和生命周期方法。 - **JSX语法**：React引入了JSX，一种在JavaScript中书写HTML样式的语法扩展，使得HTML...

Magicbox
Global site tag (gtag.js) - Google Analytics