提速javascript开发(二)

zxmlgh

浏览: 38645 次
性别:
来自: 广州

最近访客更多访客>>

天外天之人上人

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (5)

社区版块

存档分类

JavaScript OO 框架 Spring Flex

我的邮箱是zxmloveforever@163.com，欢迎大家来信指点指点。

例子：

//得到当前对象的名称
Object.prototype.getClassName = function()
{
return this.toString().match(/function\s*(\w+)/)[1];
};
/**
* 实现单一多层结构的继承
* @param arguments[0] 指定的类名，非字符串型，不可以是null。
*/
Object.prototype.inherit = function()
{
try{
if(!(arguments[0] instanceof Object)) throw new Error("you can just inherit from a Object");
if(this["parent"]) throw new Error("there have inherited class,you can't inherit class "+arguments[0].getClassName());
}catch(e){
alert(e.message);
return;
}
var arg = new Array();
for(var i=0; i
arg[i] = arguments[i+1];
var temp = new arguments[0](arg);
for(var i in temp){
if(!this[i])
this[i] = temp[i];
}
this["parent"] = temp;
}
//用来访问父类的public资源
Object.prototype.father = function(){
if(this.parent==null) return;
if(this.parent[arguments[0]]){
var temp = this.parent[arguments[0]].toString();
if(temp.indexOf("function")<0)
return this.parent[arguments[0]];
else{
var arg = new Array();
for(var i=0; i
arg[i] = arguments[i+1];
return this.parent[arguments[0]](arg);
}
}else{
this.parent.father(arguments);
}
}
//与javascript的关键字typeof区别在：o大写
Object.prototype.typeOf = function(){
var target = arguments[0];
var result = this instanceof target;
if(!result){
var temp = this.parent;
while(temp!=null){
result = temp instanceof target;
if(!result)
temp = temp.parent;
else
break;
}
}
return result;
}
//将子类转换成父类，注意:如果子类覆盖了父类的方法，那么换转后的类，该方法的实现仍然是子类中的实现版
Object.prototype.toParent = function(){
var result = null;
var target = arguments[0];
var flag = this instanceof target;
if(!flag){
var temp = this.parent;
while(temp!=null){
flag = temp instanceof target;
if(!flag)
temp = temp.parent;
else{
result = {};
for(var p in temp){
if(this[p])
result[p] = this[p];
else
result[p] = temp[p];
}
break;
}
}
}else
result = this;
return result;
}
/**
* 下面的继承关系是A inheritB,B inherit C，D是一个测试多态的方法
*/
function A(){
this.inherit(B,"x");
this.inherit(C);
var locate1 = "1oh";
this.locate2 = "2oh";
//A类继承B中的methodB1()，并且在自己的method1中调用B的methodB1
this.method1 = function(){
alert("A:test继承——I am use B's variant: "+this.methodB1(true));
}
//A类覆盖B中的method2()，并且在自己的method2中调用B的method2
this.method2 = function(){
var str = "A:test覆盖method2，result is："+this.father("method2","ok");
alert(str);
}
//A类覆盖了类C中的method3
this.method3 = function(str){
return "excuting class A's method";
}
}
function B(){
this.inherit(C,"y");
var locateB2 = "";
var locateB1 = arguments[0];
this.methodB1 = function(flag){
if(flag)
return locateB1;
else
return "A converted B is success";
}
this.method2 = function(){
var str =arguments[0]+" B's "+locateB1+" "+this.method1();
return str;
}
//B类覆盖了类C中的method3
this.method3 = function(str){
return "excuting class B's method";
}
}
function C(){
var locate1 = arguments[0];
this.method1 = function(){
return "C's "+locate1;
}
this.method3 = function(){
return locate1;
}
}
/**
* 在这个方法中，只会对C类的method3方法，如果参数是C的子类也会处理这个参数的method3方法。
*/
function D(){
var target = arguments[0];
if(!target.typeOf(C)){
alert("upper my scope");
return;
}
alert("test多态："+target.method3());
}
var a = new A;
a.method1();//在其中调用了从B中继承过来的methodB1()
a.method2();//A类覆盖B中的method2()，并且在自己的method2中调用B的method2
var temp = a.toParent(B);
alert(temp.methodB1(false)+": "+temp.method3());//转换成父类后，对象执行的方法仍然是子类版的。
var b = new B("b^-^");
D(a);
D(b);
//现在业务需要，扩展出一个E
function E(){
this.inherit(C,"change is so much!");
}
D(new E());//扩展性与通用性的表现

【注意事项】：

1）需要用这种继承的写法，请将下面的方法当作javascript 的api，不要覆盖。

方法名称	方法作用	参数说明
getClassName	获得对象的名称。	无
inherit	实现对象之间的单一多层的继承	1：被继承的父类名，非字符串 2：父类初始化需要的参数
father	如果子类覆盖了父类的某个方法，用它来回调父类的这个方法	1：回调的方法名称，字符串格式 2：回调方法需要的参数
typeOf	判断子类的类型，与typeof是不一样的。	类的名称,非字符串形式。
toParent	将子类转换成父类	父类的名字，非字符串形式。

2）在子类的第一行执行继承。如果要覆盖父类的某个方法，并且要用父类的这个方法，那么请在子类的方法中回调父类的那个方法。

3.3、活用闭包

所谓闭包，通俗的讲，使用函数的范围，已经不在函数的定义范围。

优点：进一步提高代码的封装性。

缺点：ie6的垃圾收集机制存在着bug，当进行ui编码时会出现一些问题。

闭包的特点

1、作为一个函数变量的一个引用 - 当函数返回时，其处于激活状态。
2、一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

闭包的写法

function A(){
var answer1 = function(str){
alert("这里提供复杂功能1");
}
var answer2 = function(str){
alert("这里提供复杂功能2");
}
this.getAnswer = function(flag){
if(flag)
return answer1;
else
return answer2;
}
}
var control = new A();
var a1 = control.getAnswer(true);
var a2 = control.getAnswer(false);
a1();//弹出文字:这里提供复杂功能1
a2();//弹出文字:这里提供复杂功能2
/**
* 1）通过闭包，对象A将自己的资源提供给了外部。
* 2）并且外部的代码对a1之类的变量做出了改变，不会影响到A对象内部
* 下面对A类稍作修改，我们看看效果
*/
function A(){
var answer1 = function(str){
alert("这里提供复杂功能1");
}
var answer2 = function(str){
alert("这里提供复杂功能2");
}
this.getAnswer = function(flag){
if(flag)
return answer1;
else
return answer2;
}
this.answer = function(){
answer1();
}
}
var control = new A();
var a1 = control.getAnswer(true);
a1();
a1 = "1";
control.answer();//弹出文字:这里提供复杂功能1

3.4、函数式编程

它的基本特点是：将函数(或对象)赋值给一个变量。前面我们已经采用了这种写法。

优点：代码可读性好。适合web页ui方面的开发

错误的写法

function A(){

    alert(B());

    var B = function(){

        return "ok";

    }

}

A();

正确的写法

function A(){

    var B = function(){

        return "ok";

    }

    alert(B());

}

A();

附：javascript是非常灵活的：

1）基于对象的：有对象与类的概念，也有独立于对象的函数概念

2）解释型：请把握住运行时与时间轴这个概念：它能自动转化变量的类型与这个特点紧密相连;一段代码是当作函数，还是一个类，也与这个有关。

2）弱类型：会将变量自动转化为当前合适的类型或者基本数据类型，这个特点基于它是解释型的语言。

这些充分体现了javascript的灵活型。建议使用它，不要走极端：将其对象的一面在需要的时候充分运用，但没有必要任何情况下都这样做。所谓灵活：在不同的情况，可以有适合的方式可用。

（完）

分享到：

web开发平台路线选择分析-1 | 提速javascript开发(一)

2007-03-10 01:44
浏览 15253
评论(34)
论坛回复 / 浏览 (29 / 27267)
分类:Web前端
查看更多

14 楼 joshuayan 2007-03-13

学习了

13 楼 tsfy13 2007-03-13

至于它可能会带来些问题，那是肯定的
不过我在应用中还是没有碰到

而且Js还面对浏览器兼容的问题
总归要回避一些的

模仿OO语言的特性在使用上还是有一定便利的

12 楼 tsfy13 2007-03-13

我用过一个js框架， jsolait，那里面的思路和lz很相似
里面有Module 和 Class 两个概念
还是挺实用的，可以实现比较好的封装和继承

我在上个项目里用的就是这个，还是不错的

11 楼 zxmlgh 2007-03-12

javascript是非常灵活的：
1）基于对象的：有对象与类的概念，也有独立于对象的函数概念
2）解释型：请把握住运行时与时间轴这个概念。它能自动转化变量的类型与这个特点紧密相连。它是不是将一段代码当作函数，还是一个类，也与这个有关。
2）弱类型：会将变量自动转化为当前合适的类型或者基本数据类型。
这些充分体现了javascript的灵活型。建议使用它，不要走极端：将其对象的一面在需要的时候充分运用，但没有必要任何情况下都这样做。所谓灵活：在不同的情况用适合的方式。

10 楼 whisper 2007-03-12

把挺好的javascript模仿的跟java似的
就好像在java里面模拟malloc

9 楼 cozone_柯中 2007-03-12

jindw 写道： 
<div class='quote_div'> 
zxmlgh 写道： 
<div class='quote_div'>
 如果你要用spring或者别的框架，要写annotation的地方，要补充xml的地方，也要补充。你的代码如果要用这些框架，不可能因为自己的代码要补充annotation或者多写一些xml文件，或者要调整代码的一些细节。就说这些框架是垃圾！不太负责哦。请大家多指教
</div>
 
 
知道spring为什么会流行嘛？ 
重要的一点，他是无侵入的框架。 
 
而你这个很多是都是没必要的侵入，而且是非常严重的侵入。 
使用spring，我只需要增加点东西，不用把原来的代码东改西删。而使用你的东西，我的代码里遍地寻找一通，还得左右嘱咐身边的哥们，千万别。。。。 
我值得吗？ 
 
 
 
 
代价嘛，能少一点就少一点。 
Object是javascript的根本，我今天可算是第一个见敢于改动Object 原型的。 
其实你这对Object原型的改动，是完全没必要的，继承于Object何干？Function足以！</div>
 
 
 
 
比较赞同 jindw 的说法，其实javascript开发简单就好，封装方法是有必要的，但是没有必要这样。

8 楼 jianfeng008cn 2007-03-11

zxmlgh 写道： 

<div class='quote_div'>
这些内容确实容易误导人，如果能在javascript语言实现这个级别，完成这些功能，会更好些。super与extends都是javascript的保留字，我想javascript语言的设计者，对这方面也是有自己的思考：要用这些，又没用。我不清楚这些设计者的思考是怎么样的，也不太清楚他们顾虑的是什么。既然保留了，那将来肯定是会实现这些功能的。这些编码模式平时自己用的也蛮爽<img src='/javascripts/fckeditor/editor/images/smiley/msn/tounge_smile.gif' alt=''/>，就暂时做个出头鸟吧！
 恩楼上说在Function中做这些值得思考，多谢指点。不过这样做，不是不好而是会遇上一些问题，我暂时无法用语言组织。大家多提些意见，我们一起前进。

 恩楼上说在Function中做这些值得思考，多谢指点。不过这样做，不是不好而是会遇上一些问题，我暂时无法用语言组织。大家多提些意见，我们一起前进。
能否稍微列举一点呢？
</div>

7 楼 zxmlgh 2007-03-10

这些内容确实容易误导人，如果能在javascript语言实现这个级别，完成这些功能，会更好些。super与extends都是javascript的保留字，我想javascript语言的设计者，对这方面也是有自己的思考：要用这些，又没用。我不清楚这些设计者的思考是怎么样的，也不太清楚他们顾虑的是什么。既然保留了，那将来肯定是会实现这些功能的。这些编码模式平时自己用的也蛮爽<img src='/javascripts/fckeditor/editor/images/smiley/msn/tounge_smile.gif' alt=''/>，就暂时做个出头鸟吧！
 恩楼上说在Function中做这些值得思考，多谢指点。不过这样做，不是不好而是会遇上一些问题，我暂时无法用语言组织。大家多提些意见，我们一起前进。

6 楼 netfishx 2007-03-10

说两句，我也投了良好帖，因为lz总结了很好的参考资料。但我也很想投隐藏，lz的这些东西很容易误导别人。

5 楼 jindw 2007-03-10

zxmlgh 写道： 
<div class='quote_div'>
 如果你要用spring或者别的框架，要写annotation的地方，要补充xml的地方，也要补充。你的代码如果要用这些框架，不可能因为自己的代码要补充annotation或者多写一些xml文件，或者要调整代码的一些细节。就说这些框架是垃圾！不太负责哦。请大家多指教
</div>
 
 
知道spring为什么会流行嘛？ 
重要的一点，他是无侵入的框架。 
 
而你这个很多是都是没必要的侵入，而且是非常严重的侵入。 
使用spring，我只需要增加点东西，不用把原来的代码东改西删。而使用你的东西，我的代码里遍地寻找一通，还得左右嘱咐身边的哥们，千万别。。。。 
我值得吗？ 
 
 
 
 
代价嘛，能少一点就少一点。 
Object是javascript的根本，我今天可算是第一个见敢于改动Object 原型的。 
其实你这对Object原型的改动，是完全没必要的，继承于Object何干？Function足以！

4 楼 zxmlgh 2007-03-10

每样东西都有适合它的位置——没有哪样东西是万能的，每样东西要用，也有它的成本。我们只在需要的时候用它。如果你这里要用到上面的一些方法，比如继承，那么你自然要往你的map对象中加东西。继承的意思，第一是复用。你如果决定要继承，alert(map[k])里的情况你自然要考虑。这就是所谓的成本！我从不指望没有成本的使用某些东西。无论哪门语言都有它的成本。
<div class='dp-highlighter'>
<div class='bar'/>
<ol class='dp-c'>
 <li class='alt'>var map = {key1:1,key2:2}; </li>
 <li class=''>for(var k in map){ </li>
 <li class='alt'>alert(map[k]); </li>
 <li class=''>} </li>
</ol>
</div>
 
 如果你要用spring或者别的框架，要写annotation的地方，要补充xml的地方，也要补充。你的代码如果要用这些框架，不可能因为自己的代码要补充annotation或者多写一些xml文件，或者要调整代码的一些细节。就说这些框架是垃圾！不太负责哦。请大家多指教

3 楼 jindw 2007-03-10

居然不是精华了，那就评论一下：

先不论你这些API的优劣，首先，你严重的污染了JavaScript。
举例：
我原来有断代码：
var map = {key1:1,key2:2};
for(var k in map){
alert(map[k]);
}
加上你的程序之后，原来这段代码的行为就改变了！

有了这种风险，还有那位敢轻易使用这个？

2 楼 jindw 2007-03-10

呵呵，javaeye的精华帖都这样，下次大伙就没必要来这里逛了。

1 楼 netfishx 2007-03-10

这是精华贴？？？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论