MooTools教程(告诉你为什么学Mootools)

2016-02-20 00:56 49 1 收藏

清醒时做事，糊涂时读书，大怒时睡觉，无聊时关注图老师为大家准备的精彩内容。下面为大家推荐MooTools教程(告诉你为什么学Mootools)，无聊中的都看过来。

【 tulaoshi.com - Web开发】

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.
如果不使用任何框架和组件,那么想创建一个自己类也不是难事,方法如下:

Java代码

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）var PersonClass=function(name,gender){ this.name=name; this.gender=gender; alert("My name is "+this.name); } var myGirlFriend=new PersonClass('Vickey','female');

var PersonClass=function(name,gender){this.name=name;this.gender=gender;alert("My name is "+this.name);}var myGirlFriend=new PersonClass('Vickey','female');

执行后, 会创建一个PersonClass类的实例myGirlFriend, 并执行function内的语句.
那些语句可以理解为是类的构造函数.

Prototype
现在来看看在prototype的帮助下如何去定义这个类:

Java代码

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）var PersonClass = Class.create(); 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, {...} );

var PersonClass = Class.create();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是实现类机制的核心代码.

Java代码

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } }

var Class = {  create: function() {return function() {  this.initialize.apply(this, arguments);}  }}

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

Mootools

现在来看看在 moo的帮助下如何去定义一个类:

Java代码

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）var PersonClass = new Class( { initialize: function(name,gender){ this.name=name; this.gender=gender; alert("My name is "+this.name); } }); var myGirlFriend=new PersonClass('Vickey','female');

var PersonClass = new Class( {initialize: function(name,gender){this.name=name;this.gender=gender;alert("My name is "+this.name);}});var myGirlFriend=new PersonClass('Vickey','female');

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

Java代码

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）PersonClass.implement ({ age:0 , getName : function() {return this.name;} } , {...}, ..... );

PersonClass.implement ({ age:0 ,getName : function() {return this.name;}} , {...}, ..... );

implement支持多个{}.关于implement稍后在对比继承机制时再细说.

来源:http://www.tulaoshi.com/n/20160220/1632890.html

上一篇： WPS移动版5.2完美兼容安卓4.2新增多项功能
下一篇： jQuery教程:超酷的文字变色效果

看过《MooTools教程(告诉你为什么学Mootools)》的人还看了以下文章更多>>

MooTools教程(6):操纵HTML DOM元素

标签： Web开发

我们已经学习过如何来选取DOM元素，怎么创建数组，怎么创建函数，怎么把事件添加到元素，今天我们来深入地学习一下如果操纵HTML元素。通过MooTools 1.2，你可以添加新元素到一个HTML页面中，也可以删除元素，以及改变任何样式或者元素参数，这些都非常容易。基本方法 .get(); 这个工具可以让你获取元素的属性（property）。元素的属性是...

MooTools教程(10):Fx.Tween渐变

标签： Web开发

今天我们开始第三讲，我们今天主要看一下。和我们看到的其他的MooTools函数一样，这些方法使用起来都非常简单，但是功能都很强大。Tween可以让你添加那些极炫的效果可以很平滑地发生形变动画，从而改善你的用户体验。 Tween的快捷方法我们通常都从基本知识入手，不过MooTools 1.2只为渐变（tween）提供了这样极其出色的快捷方法，它们使用...

选择mootools的5个原因

标签： Web开发

Portotype虽然是强大的，和script.aculo.us结合可以做出很多完美的效果，可是它里面有太多我不想用的代码，或许这是我后面选择mootools的主要原因，我只是想选择性的打包。其实当时我也很想用一下jquery，仔细对比了一下，我还是觉得mootools更加的适合于我。有比较，才有机会去选择，我想从下面5个方面讨论一下。可读性VS简洁 &...

MooTools教程(13):正则表达式

标签： Web开发

今天我们将先简要地看一下正则表达式，然后再看一下MooTools提供的一些让正则表达式更容易使用的功能。如果你还不熟悉怎么使用正则表达式（regular expression（regex）），我强烈建议你花一定量的时间好好看一下这篇文章中的一些链接，尤其是文章结尾更多学习部分的链接。我们今天只是讲一讲正则表达式最基本的用法，正则表达式能做的远远...

MooTools教程(14):定时器和Hash对象

标签： Web开发

在今天的教程中，我们将关注两块内容：第一个就是.periodical();方法，然后我们再对hash做一个简介。定时器能比它表面看起来做更多的事情定时能定期地触发一个函数。另一方面，hash则是键值对（key/value）的集合。如果你对hash还不熟悉现在也不要着急我们今天就会做一个快速简要的介绍，并且会提供一些延伸阅读的相关链接。就像MooTools中...

查看更多精彩>>