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

总结了Ext, base2, mootools，自己写了一个Class机制

浏览 2320 次
锁定老帖子 主题：总结了Ext, base2, mootools，自己写了一个Class机制
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • i_love_sc
  • 等级: 一星会员
  • 性别:
  • 文章: 223
  • 积分: 168
  • 来自: 上海
   发表时间：2007-10-22  
特性：

用了原型链继承作为基础（Ext）, 如果有覆写的方法，就把原方法存入新方法的base属性（mootools）。

使用了closure的设计模式，隐藏了内部使用的extend。

相对base2来说简单了许多。

js 代码
 
  1. /** 
  2.  *  A clean and prototype class 
  3.  *  
  4.  *  msn: HiYoungJay@hotmail.com 
  5.  *  last modified: 2007-10-23 
  6.  */  
  7. var Class = (function() {  
  8.     var get_proto = function(base) {  
  9.         var F = function(){};  
  10.         switch (typeof base) {  
  11.             case "undefined":  
  12.                 return {};  
  13.             case "object":  
  14.                 F.prototype = base;  
  15.                 F.prototype.constructor = F;  
  16.                 return new F();  
  17.             case "function":  
  18.                 F.prototype = base.prototype;  
  19.                 F.prototype.constructor = F;  
  20.                 var f = new F();  
  21.                 f.constructor = base;  
  22.                 return f;  
  23.         }  
  24.     };  
  25.       
  26.     var extend = function(cur, pre) {  
  27.         for (var p in cur) {  
  28.             var prep = pre[p];  
  29.             var curp = cur[p];  
  30.             if (typeof curp == "function" && typeof prep == "function") {  
  31.                 curp.base = prep;  
  32.             }  
  33.             pre[p] = curp;  
  34.         }  
  35.         return pre;  
  36.     };  
  37.       
  38.     var mix = function() {  
  39.         for (var i = 0, a = arguments, len = a.length; i < len; i++) {  
  40.             var ai = a[i];  
  41.             if (typeof ai == "function") {  
  42.                 ai = get_proto(ai);  
  43.             }  
  44.               
  45.             for (var p in ai) {  
  46.                 if (p != "constructor") {  
  47.                     this.prototype[p] = ai[p];  
  48.                 }  
  49.             }  
  50.         }  
  51.     };  
  52.       
  53.     var get_constructor = function() {  
  54.         var native_constructor = Object.prototype.constructor;  
  55.         for (var i = 0, a = arguments, len = a.length; i < len; i++) {  
  56.             var ctor = a[i].constructor;  
  57.             if (ctor != native_constructor) {  
  58.                 return ctor;  
  59.             }  
  60.         }  
  61.         return function(){};  
  62.     };  
  63.       
  64.     return {  
  65.         create: function(props, base) {  
  66.             var base_props = get_proto(base);  
  67.             var F = get_constructor(props, base_props);  
  68.             F.prototype = extend(props, base_props);  
  69.             F.prototype.constructor = F;  
  70.             F.mix = mix;  
  71.             return F;  
  72.         }  
  73.     }  
  74. })();  

test
js 代码
 
  1. // test  
  2. // define base class  
  3. var A = Class.create({  
  4.     constructor: function(name) {  
  5.         this.name = name;  
  6.     },  
  7.       
  8.     getName: function() {  
  9.         return this.name  
  10.     }  
  11. });  
  12. // define sub class  
  13. var B = Class.create({  
  14.     constructor: function(name) {  
  15.         arguments.callee.base.call(this, "B:" + name);  
  16.     }  
  17. }, A);  
  18.   
  19. // instantiate  
  20. var a = new A("I am a");  
  21. var b = new B("I am b");  
  22.   
  23. // very lazy adding property to base class also affects sub class  
  24. A.prototype.num1 = 1;  
  25. B.prototype.num2 = 2;  
  26.   
  27. var C = Class.create({  
  28.     m1: "m1"  
  29. });  
  30. // mix A also affects B  
  31. A.mix(  
  32.     {  
  33.         m2: "m2"  
  34.     },  
  35.     C  
  36. );  
  37.   
  38. a.change_prop = function() {  
  39.     // instace method also changes prototype  
  40.     this.constructor.prototype.tem = "tem";  
  41. };  
  42.   
  43. a.change_prop();  
  44.   
  45.   
  46. // The changes above were all applied to a and b.  
  47. // firefox with firebug  
  48. //console.log(a);  
  49. //console.log(b);  
  50.   
  51.   
  52. // and the information is clean :-)  
  53. //alert(A);  
  54. //alert(B);  
返回顶楼
         
论坛首页 → Web前端技术版

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