- 浏览: 163210 次
- 性别:
- 来自: 宁波
文章分类
最新评论
-
Yuanyuanasdf:
同样的,在AioAcceptHandler中调用了socket ...
java 之异步套接字编程实例(AIO) -
Yuanyuanasdf:
为什么在AioAcceptHandler compelted中 ...
java 之异步套接字编程实例(AIO) -
shijiandeheliu:
非常感谢,运行良好
nutz简单综合实例----通过html网页对数据库进行管理操作(MVC,Ioc,Dao) -
我是你们的爹:
文章中出现了大量错误,容易误导新手!!
nutz 过滤器使用例子 -
Garlic_90:
我打包水晶报表遇到些问题,我的安装项目Debug文件夹下已经有 ...
水晶报表在vs2010t中引用及打包
本人在用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
因为这样容易导致他把其他语言的经验直接错误地套用到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的对象 可以充当 关联数组
但是 如果 把 {} 理解为关联数组 我觉得是不对的
关联数组是一种特殊的对象 但是两者不能画全等号
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 来吧,毕竟这也是学习的一个过程:)
要开发自己的组件,还是如 fins 所说,一定要看优秀的开源代码,组件这块目前 Ext 是个非常理想的选择,不管是 js 基础知识,还是有关组件的封装、继承,你都会受益匪浅,对写出自己的组件一定会事半功倍的,只不过看源代码一定会很郁闷的,不过我相信楼主有这个决心
就目前而言,你还是乘胜追击,用你无与伦比的热情先写出你的 lgihtBox 来吧,毕竟这也是学习的一个过程:)
53 楼
yunhaifeiwu
2008-12-02
fins 写道
yunhaifeiwu 写道
我在javaeye等着看牛人们完美永远没有错误的教材!没有错误的探讨!
执着与偏执 倔强与固执 只有一线之隔 ......
我在这里说这么多 是因为我希望你少走弯路.
如果你非要把别人走过的弯路 错路都走一遍 才觉得过瘾, 那我也没办法
对于你的好心,表示感谢!对于你的判断,我不认同。
我会不定期的在blog上发布一些阶段性的学习笔记。如果fins不怕被误导了的话,欢迎指正。
我不会在javaeye的论坛中发贴了。
52 楼
fins
2008-12-02
yunhaifeiwu 写道
to fins:
“看不好的书籍 采用不好的学习方法 研究不好的代码”这只是你个人看法主观看法罢了!
我从网上找资料过程中,有许多人根本连“这种错误的学习方法”都没有。
如果你认为重构仅是建立在IDE没红叉,我只能无语。。。。。
好了,不说了。我继续用我的方式去学习。看吧,我会弄出来的,我的目标会实现的。
“看不好的书籍 采用不好的学习方法 研究不好的代码”这只是你个人看法主观看法罢了!
我从网上找资料过程中,有许多人根本连“这种错误的学习方法”都没有。
如果你认为重构仅是建立在IDE没红叉,我只能无语。。。。。
好了,不说了。我继续用我的方式去学习。看吧,我会弄出来的,我的目标会实现的。
我可没说 仅是
我没怀疑过你会弄出来.
我只是希望你能够 按部就班的 一步一步来 没学会走 就开始跑 也许最后也能到达终点
但是在这个过程中 你要摔倒多少次? 你要耽误多少时间? 最后做出来的东西质量如何保证?
你现在掉入自己的思想黑洞里了 任别人怎么苦口婆心的对你说道理 你都听不进去
我理解
等若干年后 你自己再回过头来看一切的时候 你会明白的.
你继续吧.
51 楼
yunhaifeiwu
2008-12-02
to fins:
“看不好的书籍 采用不好的学习方法 研究不好的代码”这只是你个人看法主观看法罢了!
我从网上找资料过程中,有许多人根本连“这种错误的学习方法”都没有。
如果你认为重构仅是建立在IDE没红叉,我只能无语。。。。。
好了,不说了。我继续用我的方式去学习。看吧,我会弄出来的,我的目标会实现的。
“看不好的书籍 采用不好的学习方法 研究不好的代码”这只是你个人看法主观看法罢了!
我从网上找资料过程中,有许多人根本连“这种错误的学习方法”都没有。
如果你认为重构仅是建立在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 之类的. (也很小).
自己不明白的东西 不要自己随便联想 胡乱分析, 要去寻求正确的答案.
例如你前面说
你有写这些文章的时间 不如去把这些你没明白的搞明白.
总之, 你现在这种做法 对学习帮助甚微.
(你目前引用的这些例子 和学习笔记 中错误太多了. 我就不一一指出了
有时间的话 你自己好好审视一下吧)
这个组件 ymPrompt 写的不好, 对学习不利.
不能因为短小 你就选择他吧 ? 比他短小的js程序多了去了.
而且我还是建议你 脚踏实地的学一学js的基础知识.
认真的看一看书 然后找一个好一点的 组件学习一下
例如 prototype jquery 之类的. (也很小).
自己不明白的东西 不要自己随便联想 胡乱分析, 要去寻求正确的答案.
例如你前面说
引用
... 这种代码作用,初步估计是为了减少内存泄露之类的吧。
说明:
1 代码中其事件处理方式中,没有搞得很明白,暂时会用自已的方式处理事件.
说明:
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 看看
已经不是这么写的了
另外 你为什么要 >选择 这个组件来作为学习的对象呢?
我觉得 这个并不是一个学习的好例子
你下载个 新版本的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 看看
已经不是这么写的了
另外 你为什么要选择 这个组件来作为学习的对象呢?
我觉得 这个并不是一个学习的好例子
你下载个 新版本的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组件里 有这样一段
我实在没看明白 为啥非要用eval
不是的, 目的如下:
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日记"主要探讨的是如何使用JavaScript来构建一个功能丰富的用户界面,尤其可能涉及到自定义布局和交互设计。在Web开发中,JavaScript是一种不可或缺的脚本语言,它使得网页具有动态性和...
JavaScript是React的基础,它是一种广泛使用的、动态的、基于原型的编程语言,尤其在Web开发中占据重要地位。React的JSX语法扩展了JavaScript,使得在JavaScript中书写HTML元素变得更为直观。在"ui-components"项目...
本压缩包“JavaScript_学习Reactjs的基础知识,使测试通过.zip”显然旨在帮助初学者掌握React的基础,并学习如何编写通过测试的React应用。 React.js的核心概念: 1. **虚拟DOM(Virtual DOM)**:React使用虚拟DOM...
1. React基础知识:JSX、组件、props和state、事件处理。 2. React Hooks:useState、useEffect、useContext、useReducer等,它们如何简化类组件的逻辑。 3. React Router:用于应用程序的路由管理,创建可导航的...
1. **JSX**:React引入了一种类似HTML的语法扩展,称为JSX,它允许在JavaScript中书写UI结构。JSX使得组件定义更加直观。 2. **Props**:组件可以通过props(属性)接收外部数据,props是组件之间通信的基础。 3. **...
以上就是React基础知识的概览,它结合了JavaScript的强大功能和组件化的思想,为构建动态、高效的Web应用提供了强大的工具。通过深入学习和实践,你可以更好地理解和运用React,创建出高质量的前端应用。
本书不仅仅提供了React.js的基础知识,还深入探讨了React.js的高级特性,使得读者能够在掌握基础知识的基础上进一步深入学习,应对更为复杂的开发场景。 React.js作为前端组件化的重要实践,自诞生之日起就迅速受到...
4. **移动应用开发**:掌握移动应用开发的基础知识,包括UI设计原则、响应式布局、手势识别等,理解原生与混合应用的区别。 5. **前后端交互**:理解RESTful API设计,用JSON格式交换数据,学习如何通过Ajax或者...
在这个"react-basico"项目中,我们将深入探讨在React中创建组件的基础知识。 一、React组件的概念 React组件是构建UI的基本单元,可以想象为独立的、自包含的代码块,它们负责渲染特定部分的视图。组件可以是简单的...
总的来说,这个压缩包提供了一条从JavaScript基础知识过渡到React实战的完整学习路径,对初学者来说是一份宝贵的资源。通过系统学习和实践,不仅能掌握JavaScript语言,还能深入理解React框架,为成为专业的前端...
电影应用2021是基于React JS开发的一个项目,它展示了React的基础知识和在实际开发中的应用。React作为JavaScript库,主要用于构建用户界面,尤其适用于单页应用(SPA)。在这个项目中,我们可以深入理解React的核心...
2. **HTML/CSS/JS书写与组织形式**:LayUI遵循原生的HTML、CSS和JavaScript编写方式,使得对前端基础有了解的开发者能够快速上手。同时,它提供了一套规范,使得代码结构清晰,有利于团队协作和代码一致性。 3. **...
- JSX语法:React使用JSX,一种JavaScript的扩展语法,允许在JavaScript中书写HTML样式的代码,方便地创建和组合UI组件。 - State与Props:State是组件内部的数据,可变;Props是组件接收的外部数据,不可变。组件...
在本节React练习中,我们将深入探讨React.js的基础知识,这是一种流行的JavaScript库,用于构建用户界面,特别是单页应用程序(SPA)。React以其组件化、声明式编程风格和高效的虚拟DOM著称,是现代前端开发的重要...
【JavaScript源代码】如何创建自己的第一个React页面 ...了解并掌握这些基础知识,你就踏上了React开发之旅。随着进一步的学习,你将能够利用React的组件系统、状态管理和生命周期方法来构建功能丰富的Web应用程序。
总之,React是通过函数组件和JSX语法来构建可复用的UI组件。通过合理的环境配置和基本的HTML容器设置,开发者可以轻松地开始React项目,并在JavaScript文件中创建和渲染React组件。了解这些基础知识对于掌握React...
例如,`pages`目录用于存放路由相关的组件,`components`目录存放可复用的UI组件等。 - **理解目录别名**:通过配置`alias`字段可以在项目中定义别名,方便引用各个文件夹下的文件,简化路径书写。 - **能够测试页面...
在这个“danpung2-movie_app_21”项目中,我们将深入探讨React的基础知识,这将帮助你理解和掌握这个强大的库。 1. **React组件**:React的核心概念是组件化,它允许我们将UI分解为独立、可重用的部件。在项目中,...
React.js 是一个由Facebook开发并维护的开源JavaScript库,用于构建用户界面,特别是单页应用程序。这个库专注于视图层,让开发者能够高效地管理组件的状态和渲染过程。本笔记将涵盖React的基础概念以及进阶特性,...
前端开发简历模板-web...本资源摘要信息总结了前端开发工程师的基础知识、JavaScript 程序设计、前端开发框架和工具、Node.js 和 GraphQL、项目经验等多个方面的知识点,为前端开发工程师提供了详细的知识 reference。