`
morfil
  • 浏览: 49727 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

提速javascript开发(二)

JavaScriptprototypeCC++C# 
阅读更多
例子：
  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的灵活型。建议使用它，不要走极端：将其对象的一面在需要的时候充分运用，但没有必要任何情况下都这样做。所谓灵活：在不同的情况，可以有适合的方式可用。

（完毕）

分享到：
| 提速javascript开发(一)
评论
发表评论

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

相关推荐

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