MooTools源码分析

MooTools vs Prototype 核心源码比较51

时间:2015-06-15 09:45来源:网络整理 作者:KKWL 点击:
本文章转载发布,转载请;MooTools是一个简洁,模块化,面向对象的J;123456this.name=name;thi;本文章转载;本文章转载发布,转载请;执行后,会创建一个PersonClass类的实例;123456789PersonClas

本文章转载发布,转载请;MooTools是一个简洁,模块化,面向对象的J;123456this.name=name;thi;本文章转载;本文章转载发布,转载请;执行后,会创建一个PersonClass类的实例;123456789PersonClass.pro;和方法时使

本文章转载 发布,转载请保留版权

MooTools 是一个简洁,模块化,面向对象的 JavaScript 框架。它能够帮助你更快,更简单地 编写可扩展和兼容性强的 JavaScript 代码。 Mootools 跟 prototypejs 相类似,语法几乎一样。 但它提供的功能要比 prototypejs 多,而且更强大。 比如增加了动画特效、拖放操作等等。 建议大家可以用它来代替 prototypejs。 核心代码分析) 我为什么选择 mootools,抛弃了 prototype. (mootools 与 prototype 核心代码分析 抛弃了 原文作者:小胖儿的大城 原文链接地址: 前言 最近喜欢上了 mootools(相见恨晚啊),在公开表示了对他的偏爱. 很多朋友都问我为什么要移情别恋,其实理由还是蛮多的. 今天在这里打算列举出一部分.让更多的朋友能够了解一下 mootools,也希望有更多的朋友喜欢 上他. 文章的标题注定了我会更多的讲述 mootools 比 prototype 好的地方, 希望大家不要被我的误导,以为 mootools 处处都比 prototype 好. mootools 还是有一些不足的. 本次对比针对 mootools 1.11 版 和 prototype 1.51 版, 只比较了一些核心代码,其他的工具方法,辅助函数不再本文讨论之内. 开始前,再次重申一遍:我曾经很爱 prototype,而且我将永远都会用"伟大"来形容它. 好 下面对比正式开始 ( mootools 以下简称 moo. 本文所引用的代码, 只是起到说明作用,不保证他们都可以被正确的执行. 同时为了使本文简洁一些,引入的 一些 moo 和 prototype 的代码也只是片段或是伪代码. ) 一. 类机制 js 里的类实际上就是 function. 如果不使用任何框架和组件,那么想创建一个自己类也不是难事,方法如下:

1 2 3 4 5 6 this.name=name; this.gender=gender; alert("My name is "+this.name); } var myGirlFriend=new PersonClass('Vickey','female');

本文章转载 发布,转载请保留版权

本文章转载 发布,转载请保留版权

执行 后, 会创建一个 PersonClass 类的实例 myGirlFriend, 并执行 function 内的语句. 那些语句可以理解为是类的构造函数. Prototype 现在来看看在 prototype 的帮助下如何去定义这个类:

1 2 3 4 5 6 7 8 9 PersonClass.prototype.initialize=function(name,gender){ this.name=name; this.gender=gender; alert("My name is "+this.name); }; var myGirlFriend=new PersonClass('Vickey','female');//如果想给类增加属性

和方法时使用

PersonClass.prototype.XXX=...;//或者是使用 prototype 提供的 Object.extend(PersonClass.prototype,{...});

(关于 Object.extend 稍后在对比继承机制时再细说.) 再来看看 prototype 是实现类机制的核心代码.

1 2 3 4 5 6 7 create:function(){ returnfunction(){ this.initialize.apply(this, arguments); } } }

通过看代码不难看出,prototype 的 Class 实际上只是帮助我们抽象出了"类的构造函数". 而当我们在 prototype 的这种机制下进行类的定义时,实际上带来的好处是非常有限的. prototype 的 Class 只是从结构对我们的类进行了重新规划. 而这样的规划意义并不是很大. 而且 prototype 带有强制性,即, initialize 是必须要定义的. 实际上这里存在一个缺陷, Class 应该提供一个默认的 initialize(一个空函数就好), 或者是在 create 返回的 function 里进行必要的判断. (prototype1.6 的类机制变化比较大,但是还没仔细研究过,所以不敢轻易评论). Mootools 现在来看看在 moo 的帮助下如何去定义一个类:

1 2 3 4 5 initialize:function(name,gender){ this.name=name; this.gender=gender; alert("My name is "+this.name); 本文章转载 发布,转载请保留版权

本文章转载 发布,转载请保留版权

6 7 8

} }); var myGirlFriend=new PersonClass('Vickey','female');

其中类的 initialize 不是必须的. 如果你想给 PersonClass 增加属性和方法,你可以在 new Class 的参数里直接以 json 方式定 义. 也可以使用 如下方式

1 2 3 4 5 6 7 PersonClass.implement({ age:0, getName :function(){ returnthis.name; } },{...}, ..... );

implement 支持多个{}.关于 implement 稍后在对比继承机制时再细说. 在来看一下 moo 类机制的一些核心代码.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 } returnnewClass(proto); }, implement:function(){ for(var i =0, l = arguments.length; i < l; i++) $extend(this.prototype, arguments[i]); 本文章转载 发布,转载请保留版权 }; Class.prototype={ extend:function(properties){ var proto =newthis(null); for(var property in properties){ var pp = proto[property]; proto[property]=Class.Merge(pp, properties[property]); var klass =function(){ return(arguments[0]!==null&&this.initialize&& $type(this.initialize)== 'function')?this.initialize.apply(this, arguments):this; }; $extend(klass,this); klass.prototype= properties; klass.constructor=Class;return klass;

本文章转载 发布,转载请保留版权

} };

------分隔线----------------------------