`
i_love_sc
  • 浏览: 35863 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

阅读更多
特性:

用了原型链继承作为基础(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);  

分享到:
评论

相关推荐

    jquery,mootools,ext3,prototype对class选择符速度比较

    标题中的"jquery,mootools,ext3,prototype对class选择符速度比较"指的是对四个流行的JavaScript库——jQuery、MooTools、EXT3和Prototype——在处理CSS类选择器时的性能进行的比较测试。这些库在Web开发中广泛用于...

    Mootools 1.2教程 类(一)

    例如,创建一个名为`Class_one`的类,包含两个内部变量`variable_one`和`variable_two`,可以这样写: ```javascript var Class_one = new Class({ variable_one: "I'm First", variable_two: "I'm Second" }); `...

    JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools

    JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools

    mootools

    MooTools是一个JavaScript库,它的全称是"More Object-Oriented Tools",寓意提供更多的面向对象的工具。这个库的设计理念是为开发者提供一种优雅、高效的方式来编写可维护的前端代码,它强调代码的组织结构和模块化...

    (一) mootools介绍

    Mootools 是一个轻量级且功能强大的JavaScript库,它提供了一套优雅的工具集,用于构建高效的Web应用程序。Mootools 的设计目标是提高开发效率,同时保持代码的可维护性和可扩展性。在本文中,我们将深入探讨 ...

    mootools源码分析.rar

    3. **事件系统**:MooTools提供了一个强大的事件处理机制,可以绑定和触发DOM元素以及自定义对象上的事件。源码中会展示`Event`对象的实现,包括事件监听、分发和阻止默认行为等。 4. **Element封装**:MooTools对...

    Mootools 1.2教程(21)——类(二)

    在这个例子中,`BaseClass`有一个名为`testFunction`的方法,它会弹出一个对话框显示指定的消息。 接着,我们可以创建一个新的类`ImplementingClass`,并使用`Implements`关键字来实现`BaseClass`。这样,`...

    MooTools1.4中文PDF手册+MooTools-Core-1.5.1.js

    MooTools是一款强大的JavaScript库,它提供了一套优雅的面向对象的编程接口和实用的工具集,便于开发者创建高效、可维护的Web应用程序。MooTools 1.4中文PDF手册与MooTools-Core-1.5.1.js是学习和使用MooTools的核心...

    Mootools v1.11 文档 pdf html Mootools v1.2.1 js

    MooTools 是一个轻量级、模块化的JavaScript库,它为Web开发提供了强大的工具和功能。这个压缩包包含了MooTools的两个主要版本——v1.11和v1.2.1的相关文档,以及可能的HTML和JavaScript文件,帮助开发者理解和使用...

    mootools常用js

    MooTools是一个强大的JavaScript库,它提供了一系列工具和方法,帮助开发者更高效地构建复杂的Web应用程序。这个压缩包包含了MooTools的核心文件以及与YUI(Yahoo User Interface Library)相关的压缩文件,使得...

    Mootools 1.2.1 API 文档

    Mootools 1.2.1是该库的一个版本,其API文档对于理解和使用这个库至关重要。对于Joomla爱好者而言,Mootools不仅是Joomla自带的JS库,而且是开发Joomla扩展和模板时不可或缺的一部分。 Mootools的核心理念是模块化...

    mootools详细教程chm

    MooTools 是一个轻量级且功能强大的JavaScript库,它提供了一种优雅的方式来处理DOM操作、事件、动画效果以及Ajax交互。这个“mootools详细教程chm”包含了丰富的资源,旨在帮助开发者深入理解和熟练运用MooTools。 ...

    mootools_1.2的中文文档

    MooTools 是一个轻量级且功能强大的JavaScript框架,设计用于简化Web开发中的DOM操作、事件处理、动画效果以及Ajax交互。MooTools 1.2 版本是其重要的里程碑,提供了许多优化和改进,以提升性能并增强开发者体验。这...

    MooTools 帮助文档 中文

    MooTools是一个简洁,模块化,面向对象的JavaScript框架。它能够帮助你更快,更简单地编写可扩展和兼容性强的JavaScript代码。Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的...

    mootools 1.2 中文文档

    MooTools是一个轻量级的JavaScript库,设计思想源自于Prototype,但两者在实现和功能上有许多不同之处。MooTools 1.2是该库的一个稳定版本,它提供了丰富的功能集,包括DOM操作、事件处理、动画效果、Ajax交互等。这...

    一套基于Mootools技术 实现的动画效果导航菜单源码例子

    Mootools是一个强大的JavaScript库,它为Web开发者提供了丰富的功能,包括DOM操作、事件处理、动画效果、Ajax交互以及类系统等。这个源码例子展示了如何利用Mootools技术实现一个具有动画效果的导航菜单,这在现代...

    MooTools JS框架 v1.3.2

    MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候。它提供了一个比普通js更面向对象的document API。优点::1.灵活,模块化...

    mootools 弹出框

    MooTools 是一个轻量级的JavaScript库,它提供了一系列强大的工具和方法来帮助开发者构建交互式的Web应用程序。在MooTools中,弹出框(通常称为“对话框”或“提示框”)是一种常见的用户界面元素,用于展示信息、...

Global site tag (gtag.js) - Google Analytics