zxmlgh 我能 http://zxmlgh.javaeye.com UTF-8 Copyright 2003-2008, JavaEye.com http://blogs.law.harvard.edu/tech/rss JavaEye - 做最棒的软件开发交流社区 提速javascript开发(二) zxmlgh 作者: zxmlgh  链接：http://zxmlgh.javaeye.com/blog/58698  发表时间: 2007年03月10日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

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

（完）


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Sat, 10 Mar 2007 01:44:54 +0800 http://zxmlgh.javaeye.com/blog/58698 http://zxmlgh.javaeye.com/blog/58698 提速javascript开发(一) zxmlgh 作者: zxmlgh  链接：http://zxmlgh.javaeye.com/blog/58691  发表时间: 2007年03月09日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

我的邮箱是zxmloveforever@163.com，欢迎大家来信指点指点。
 
Web开发时，我们可能经常抱怨，javascript。它太耗时间精力，甚至让我们觉得它恶心。服务器端，我们有优秀的java语言和webwork、spring等框架来帮助我们提高效率。而客户端只有灵活、难以掌握的javascript，那么我们的希望在哪呢？但愿下面的内容能够对你有些帮助。
 
1、它是怎样的？
Javascript目前由二块构成：Core(核心部分)＋DOM实现部分。（DOM是w3c定义的针对HTML、XML文档编程的一系列接口。通过这些接口，我们可以改变文档结点的结构、样式、内容。实现这些接口的语言可以是java、Python，javascript等。）
 
Core
定义了语法规则，及内置的全局对象(Date、Function等)，全局方法(parseFloat)，全局属性（NaN，undefined等）
Dom
针对HTML文档与ＸＭＬ文档操作的API
 
2、  慢在哪？
2.1、java VS javascript
Java是面向对象的代表性语言之一，面向对象语言是时下比较流行、开发效率高的主流开发语言。面向对象语言包括几个主要特性：抽象，继承，封装和多态。Javascript本质上不是面向对象的，而是基于对象的。基于对象的语言对上面四个特性支持很差，或者只支持部分特性。
 
 
抽象
继承
多态
封装
java
具备：类，接口，抽象类四个概念
支持：
通过关键字
Extends，implements实现
支持：
1)表现在对象的方法可以重载
2)子类可以被当作父类处理
支持：
private,
friendly,
protected,
public
四个级别的封装
javascript
仅具备：
类，这一个概念
支持很差：
通过prototype实现;
Function的apply或call方法间接实现。
不支持
支持很差：仅支持private,
public二个级别
比较结果
1恶劣的继承导致：无法实现子类与父类之间关系的判断，并且子类无法转化成父类。所以无法根据类的类型处理业务：处理父类的代码，无法处理子类。——扩展性差
2 陈旧的代码书写方式导致：本不好的封装性变的更加差劲。这样对象间的隔离成本增加，内聚性弱。
大大降低了开发效率
 
 
2.2、浏览器的兼容性
Core与Dom部分都存在着浏览器平台的差异性，进一步降低了开发的效率。
 
3、 开始加速
3.1、加强封装性
提倡的写法
  1. function A(){          
  2.     var locate1 = "1oh";   
  3.     this.locate2 = "2oh";   
  4.     var method1 = function(){   
  5.         alert(locate1);   
  6.     }   
  7.     this.method2 = function(){   
  8.         alert(this.locate2);   
  9.         method1();   
  10.     }                                  
  11. }  
A对象的locate1与method1是private级别的; locate2与method2是public级别的。
优点：封装性好，实现代码变化的隔离。
缺点：代码可读性差。
弥补方式：利用javascript的优秀插件，如：jseclipse。
禁止的写法
  1. function A(){          
  2.     var locate1 = "1oh";   
  3.     var method1= function(){   
  4.         alert(locate1);   
  5.     };                                 
  6. }   
  7. A.prototype={   
  8.     locate2:"2oh",     
  9.     method2:function(){   
  10.         alert(this.locate2);   
  11.     },   
  12.     method3:function(){   
  13.         alert(locate1);   
  14.         method1();   
  15.     }   
  16. }   
  17. var a = new A();   
  18. a.method2();   
  19. a.method3();  
 
优点：代码可读性好。
缺点：
 
没有全局的私有变量
如果执行a.method3();根本无法访问变量locate1。
prototype中的方法是公共的。
a.method2()成功访问，在prototype中定义的方法是public级别;无法在prototype中定义全局的private变量。
总体效果
1） 封装性极其差
2） 代码调用不方便。
 
3.2 类继承
禁止写法
prototype继承
万恶之首：目前有很多继承写法，都是直接或者间接使用它。严重破坏封装性。
没法实现多态：只是简单的复用，这种继承意义不大。
apply,或者call
只是复用：简单的在当前对象中，执行对象之外的另一个方法。
 
这几种javascript的继承写法虽然目前被大量的使用，但是他们的缺点是明显的，因此我们不建议采用这些常见的javascript继承写法。
 推荐写法
例子很长，先给大家一些看完的动力吧，下面是它的优点。
 
代码复用
如果A继承B，那么A可复用B中public级别的资源
单一，多层的继承
B可以继承C，A可以继承B，不存在A继承B又继承C。
多态
A是父类，B与C是A的子类，如果存在一个方法X，是处理A类的，那么它也能处理B与C类。扩展性好，容纳了变化：可以处理，将来因业务需求新建的D类。
待 续……[提速javascript开发(二)]

本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Fri, 09 Mar 2007 23:06:17 +0800 http://zxmlgh.javaeye.com/blog/58691 http://zxmlgh.javaeye.com/blog/58691