论坛首页 → Web前端技术论坛 →

提速javascript开发(二)

浏览 27276 次
锁定老帖子 主题：提速javascript开发(二)
该帖已经被评为良好帖
作者 正文
  • zxmlgh
  • 等级: 三星会员
  • 性别:
  • 文章: 55
  • 积分: 254
  • 来自: 广州
   发表时间：2007-03-10  
例子：
  1. //得到当前对象的名称   
  2. Object.prototype.getClassName = function()   
  3. {   
  4.     return this.toString().match(/function\s*(\w+)/)[1];   
  5. };         
  6. /**  
  7.  * 实现单一多层结构的继承  
  8.  * @param arguments[0] 指定的类名，非字符串型，不可以是null。  
  9.  */    
  10. Object.prototype.inherit = function()   
  11. {                  
  12.     try{   
  13.         if(!(arguments[0] instanceof Object)) throw new Error("you can just inherit from a Object");   
  14.         if(this["parent"]) throw new Error("there have inherited class,you can't inherit class "+arguments[0].getClassName());         
  15.     }catch(e){   
  16.         alert(e.message);   
  17.         return;   
  18.     }   
  19.     var arg = new Array();   
  20.     for(var i=0; i
  21.     arg[i] = arguments[i+1];                       
  22.     var temp = new arguments[0](arg);                 
  23.     for(var i in temp){   
  24.         if(!this[i])   
  25.             this[i] = temp[i];                     
  26.     }   
  27.     this["parent"] = temp;                 
  28. }   
  29. //用来访问父类的public资源   
  30. Object.prototype.father = function(){                  
  31.     if(this.parent==null) return;   
  32.     if(this.parent[arguments[0]]){   
  33.         var temp = this.parent[arguments[0]].toString();   
  34.         if(temp.indexOf("function")<0)   
  35.             return this.parent[arguments[0]];   
  36.         else{   
  37.                 var arg = new Array();   
  38.                 for(var i=0; i
  39.                 arg[i] = arguments[i+1];   
  40.                 return this.parent[arguments[0]](arg);   
  41.         }                          
  42.     }else{   
  43.         this.parent.father(arguments);   
  44.     }   
  45. }   
  46. //与javascript的关键字typeof区别在：o大写   
  47. Object.prototype.typeOf = function(){   
  48.     var target = arguments[0];   
  49.     var result = this instanceof target;   
  50.     if(!result){   
  51.         var temp = this.parent;   
  52.         while(temp!=null){   
  53.             result = temp instanceof target;   
  54.             if(!result)   
  55.                 temp = temp.parent;   
  56.             else  
  57.                 break;   
  58.         }   
  59.     }   
  60.     return result;                                                                 
  61. }   
  62. //将子类转换成父类，注意:如果子类覆盖了父类的方法，那么换转后的类，该方法的实现仍然是子类中的实现版   
  63. Object.prototype.toParent = function(){   
  64.     var result = null;   
  65.     var target = arguments[0];   
  66.     var flag = this instanceof target;   
  67.     if(!flag){   
  68.         var temp = this.parent;   
  69.         while(temp!=null){   
  70.             flag = temp instanceof target;   
  71.             if(!flag)   
  72.                 temp = temp.parent;   
  73.             else{   
  74.                 result = {};   
  75.                 for(var p in temp){   
  76.                     if(this[p])   
  77.                         result[p] = this[p];   
  78.                     else  
  79.                         result[p] = temp[p];   
  80.                 }   
  81.                 break;   
  82.             }                              
  83.         }   
  84.     }else  
  85.         result = this;   
  86.     return result;   
  87. }              
  88. /**  
  89.  * 下面的继承关系是A inheritB,B inherit C，D是一个测试多态的方法  
  90.  */  
  91. function A(){   
  92.     this.inherit(B,"x");   
  93.     this.inherit(C);               
  94.     var locate1 = "1oh";                   
  95.     this.locate2 = "2oh";   
  96.     //A类继承B中的methodB1()，并且在自己的method1中调用B的methodB1                 
  97.     this.method1 = function(){                     
  98.         alert("A:test继承——I am use B's variant: "+this.methodB1(true));                     
  99.     }   
  100.     //A类覆盖B中的method2()，并且在自己的method2中调用B的method2   
  101.     this.method2 = function(){   
  102.         var str = "A:test覆盖method2，result is："+this.father("method2","ok");   
  103.         alert(str);                                        
  104.     }   
  105.        
  106.     //A类覆盖了类C中的method3   
  107.     this.method3 = function(str){   
  108.         return "excuting class A's method";   
  109.     }                                  
  110. }   
  111. function B(){   
  112.     this.inherit(C,"y");   
  113.     var locateB2 = "";   
  114.     var locateB1 = arguments[0];                   
  115.     this.methodB1 = function(flag){                    
  116.         if(flag)   
  117.             return locateB1;   
  118.         else  
  119.             return "A converted B is success";   
  120.     }   
  121.        
  122.     this.method2 = function(){   
  123.         var str =arguments[0]+" B's "+locateB1+" "+this.method1();                                                     
  124.         return str;   
  125.     }   
  126.     //B类覆盖了类C中的method3   
  127.     this.method3 = function(str){   
  128.         return "excuting class B's method";   
  129.     }   
  130. }   
  131. function C(){   
  132.     var locate1 = arguments[0];   
  133.     this.method1 = function(){   
  134.         return "C's "+locate1;                     
  135.     }   
  136.     this.method3 = function(){   
  137.         return locate1;   
  138.     }   
  139. }   
  140. /**  
  141.  * 在这个方法中，只会对C类的method3方法，如果参数是C的子类也会处理这个参数的method3方法。  
  142.  */  
  143. function D(){   
  144.     var target = arguments[0];   
  145.     if(!target.typeOf(C)){   
  146.         alert("upper my scope");   
  147.         return;   
  148.     }   
  149.     alert("test多态："+target.method3());                                     
  150. }              
  151. var a = new A;   
  152. a.method1();//在其中调用了从B中继承过来的methodB1()   
  153. a.method2();//A类覆盖B中的method2()，并且在自己的method2中调用B的method2   
  154. var temp = a.toParent(B);   
  155. alert(temp.methodB1(false)+": "+temp.method3());//转换成父类后，对象执行的方法仍然是子类版的。   
  156. var b = new B("b^-^");   
  157. D(a);   
  158. D(b);   
  159. //现在业务需要，扩展出一个E   
  160. function E(){   
  161.     this.inherit(C,"change is so much!");      
  162. }   
  163. D(new E());//扩展性与通用性的表现  
【注意事项】：
1） 需要用这种继承的写法，请将下面的方法当作javascript 的api，不要覆盖。
方法名称
方法作用
参数说明
getClassName
获得对象的名称。
无
inherit
实现对象之间的单一多层的继承
1：被继承的父类名，非字符串
2：父类初始化需要的参数
father
如果子类覆盖了父类的某个方法，用它来回调父类的这个方法
1：回调的方法名称，字符串格式
2：回调方法需要的参数
typeOf
判断子类的类型，与typeof是不一样的。
类的名称,非字符串形式。
toParent
将子类转换成父类
父类的名字，非字符串形式。
2） 在子类的第一行执行继承。如果要覆盖父类的某个方法，并且要用父类的这个方法，那么请在子类的方法中回调父类的那个方法。
 
3.3、活用闭包
所谓闭包，通俗的讲，使用函数的范围，已经不在函数的定义范围。
优点：进一步提高代码的封装性。
缺点：ie6的垃圾收集机制存在着bug，当进行ui编码时会出现一些问题。
闭包的特点
1、作为一个函数变量的一个引用 - 当函数返回时，其处于激活状态。
2、一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
闭包的写法
  1. function A(){   
  2.     var answer1 = function(str){   
  3.         alert("这里提供复杂功能1");   
  4.     }   
  5.     var answer2 = function(str){   
  6.         alert("这里提供复杂功能2");   
  7.     }   
  8.     this.getAnswer = function(flag){   
  9.         if(flag)   
  10.             return answer1;   
  11.         else  
  12.             return answer2;   
  13.     }   
  14. }   
  15.   
  16. var control = new A();   
  17. var a1 = control.getAnswer(true);   
  18. var a2 = control.getAnswer(false);   
  19. a1();//弹出文字:这里提供复杂功能1   
  20. a2();//弹出文字:这里提供复杂功能2   
  21. /**  
  22.  * 1）通过闭包，对象A将自己的资源提供给了外部。  
  23.  * 2）并且外部的代码对a1之类的变量做出了改变，不会影响到A对象内部  
  24.  * 下面对A类稍作修改，我们看看效果  
  25.  */  
  26. function A(){   
  27.     var answer1 = function(str){   
  28.         alert("这里提供复杂功能1");   
  29.     }   
  30.     var answer2 = function(str){   
  31.         alert("这里提供复杂功能2");   
  32.     }   
  33.     this.getAnswer = function(flag){   
  34.         if(flag)   
  35.             return answer1;   
  36.         else  
  37.             return answer2;   
  38.     }   
  39.     this.answer = function(){   
  40.         answer1();   
  41.     }   
  42. }   
  43.   
  44. var control = new A();   
  45. var a1 = control.getAnswer(true);   
  46. a1();   
  47. a1 = "1";   
  48. control.answer();//弹出文字:这里提供复杂功能1   
3.4、函数式编程
它的基本特点是：将函数(或对象)赋值给一个变量。前面我们已经采用了这种写法。
优点：代码可读性好。适合web页ui方面的开发
错误的写法
  1. function A(){   
  2.     alert(B());   
  3.     var B = function(){   
  4.         return "ok";   
  5.     }   
  6. }   
  7. A();  
正确的写法
  1. function A(){   
  2.     var B = function(){   
  3.         return "ok";   
  4.     }   
  5.     alert(B());    
  6. }   
  7. A();  

附：javascript是非常灵活的：

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

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

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

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

（完）
返回顶楼
         
  • netfishx
  • 等级: 五星会员
  • 性别:
  • 文章: 1052
  • 积分: 599
  • 来自: 北京
   发表时间：2007-03-10  
这是精华贴？？？
返回顶楼
          回帖地址
0 请登录后投票
  • jindw
  • 等级: 三钻会员
  • 性别:
  • 文章: 731
  • 积分: 1481
  • 来自: 初到北京
   发表时间：2007-03-10  
呵呵，javaeye的精华帖都这样，下次大伙就没必要来这里逛了。
返回顶楼
          回帖地址
0 请登录后投票
  • jindw
  • 等级: 三钻会员
  • 性别:
  • 文章: 731
  • 积分: 1481
  • 来自: 初到北京
   发表时间：2007-03-10  
居然不是精华了，那就评论一下：

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

有了这种风险，还有那位敢轻易使用这个？
返回顶楼
          回帖地址
0 请登录后投票
  • zxmlgh
  • 等级: 三星会员
  • 性别:
  • 文章: 55
  • 积分: 254
  • 来自: 广州
   发表时间：2007-03-10  

  每样东西都有适合它的位置——没有哪样东西是万能的，每样东西要用，也有它的成本。我们只在需要的时候用它。如果你这里要用到上面的一些方法，比如继承，那么你自然要往你的map对象中加东西。继承的意思，第一是复用。你如果决定要继承，alert(map[k])里的情况你自然要考虑。这就是所谓的成本！我从不指望没有成本的使用某些东西。无论哪门语言都有它的成本。

  1. var map = {key1:1,key2:2};    
  2. for(var k in map){    
  3. alert(map[k]);    
  4. }   

 

    如果你要用spring或者别的框架，要写annotation的地方，要补充xml的地方，也要补充。你的代码如果要用这些框架，不可能因为自己的代码要补充annotation或者多写一些xml文件，或者要调整代码的一些细节。就说这些框架是垃圾！不太负责哦。请大家多指教
返回顶楼
          回帖地址
0 请登录后投票
  • jindw
  • 等级: 三钻会员
  • 性别:
  • 文章: 731
  • 积分: 1481
  • 来自: 初到北京
   发表时间：2007-03-10  

zxmlgh 写道：

    如果你要用spring或者别的框架，要写annotation的地方，要补充xml的地方，也要补充。你的代码如果要用这些框架，不可能因为自己的代码要补充annotation或者多写一些xml文件，或者要调整代码的一些细节。就说这些框架是垃圾！不太负责哦。请大家多指教



知道spring为什么会流行嘛？
重要的一点，他是无侵入的框架。

而你这个很多是都是没必要的侵入，而且是非常严重的侵入。
使用spring，我只需要增加点东西，不用把原来的代码东改西删。而使用你的东西，我的代码里遍地寻找一通，还得左右嘱咐身边的哥们，千万别。。。。
我值得吗？




代价嘛，能少一点就少一点。
Object是javascript的根本，我今天可算是第一个见敢于改动Object 原型的。
其实你这对Object原型的改动，是完全没必要的，继承于Object何干？Function足以！
返回顶楼
          回帖地址
0 请登录后投票
  • netfishx
  • 等级: 五星会员
  • 性别:
  • 文章: 1052
  • 积分: 599
  • 来自: 北京
   发表时间：2007-03-10  
说两句，我也投了良好帖，因为lz总结了很好的参考资料。但我也很想投隐藏，lz的这些东西很容易误导别人。
返回顶楼
          回帖地址
0 请登录后投票
  • zxmlgh
  • 等级: 三星会员
  • 性别:
  • 文章: 55
  • 积分: 254
  • 来自: 广州
   发表时间：2007-03-10  

这些内容确实容易误导人，如果能在javascript语言实现这个级别，完成这些功能，会更好些。super与extends都是javascript的保留字，我想javascript语言的设计者，对这方面也是有自己的思考：要用这些，又没用。我不清楚这些设计者的思考是怎么样的，也不太清楚他们顾虑的是什么。既然保留了，那将来肯定是会实现这些功能的。这些编码模式平时自己用的也蛮爽，就暂时做个出头鸟吧！

     恩楼上说在Function中做这些值得思考，多谢指点。不过这样做，不是不好而是会遇上一些问题，我暂时无法用语言组织。大家多提些意见，我们一起前进。
返回顶楼
          回帖地址
0 请登录后投票
  • jianfeng008cn
  • 等级: 五星会员
  • 性别:
  • 文章: 682
  • 积分: 713
  • 来自: 湖州
   发表时间：2007-03-11  

zxmlgh 写道：

这些内容确实容易误导人，如果能在javascript语言实现这个级别，完成这些功能，会更好些。super与extends都是javascript的保留字，我想javascript语言的设计者，对这方面也是有自己的思考：要用这些，又没用。我不清楚这些设计者的思考是怎么样的，也不太清楚他们顾虑的是什么。既然保留了，那将来肯定是会实现这些功能的。这些编码模式平时自己用的也蛮爽，就暂时做个出头鸟吧！

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

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

能否稍微列举一点呢？
返回顶楼
          回帖地址
0 请登录后投票
  • cozone_柯中
  • 等级: 五星会员
  • 性别:
  • 文章: 225
  • 积分: 464
  • 来自: 湖北武汉北京
   发表时间：2007-03-12  

jindw 写道：

zxmlgh 写道：

    如果你要用spring或者别的框架，要写annotation的地方，要补充xml的地方，也要补充。你的代码如果要用这些框架，不可能因为自己的代码要补充annotation或者多写一些xml文件，或者要调整代码的一些细节。就说这些框架是垃圾！不太负责哦。请大家多指教



知道spring为什么会流行嘛？
重要的一点，他是无侵入的框架。

而你这个很多是都是没必要的侵入，而且是非常严重的侵入。
使用spring，我只需要增加点东西，不用把原来的代码东改西删。而使用你的东西，我的代码里遍地寻找一通，还得左右嘱咐身边的哥们，千万别。。。。
我值得吗？




代价嘛，能少一点就少一点。
Object是javascript的根本，我今天可算是第一个见敢于改动Object 原型的。
其实你这对Object原型的改动，是完全没必要的，继承于Object何干？Function足以！




比较赞同 jindw 的说法，其实javascript开发简单就好，封装方法是有必要的，但是没有必要这样。
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics