(一) mootools介绍

目录：

介绍mootools

mootools v.s. jquery

mootools的Hello World

核心部分的模块划分，

Core 核心模块

Types 类型模块

Browser 浏览器模块

Class 类模块

Slick 选择器模块

Element 元素模块

Fx 动画模块

Request 请求模块

Utilities 辅助工具模块

总结

 

介绍mootools

mootools v.s. jquery

第一个学习的js框架jquery，不可否认jquery是轻量易用的javascript框架，对于它的作者John Resig我也很关注。jquery上手相当容易，各种插件也特别丰富，对于开发中小型项目来说足矣，但是我经常遇到一个问题，同个项目大家都用jquery开发，没有特别的标准规定要怎么使用，所以各用各的，久而久之，各种插件扩展使得代码很混乱，维护起来很不愉快，但是也没遇到很难修改的情况，总感觉就是你一脚我一脚，漏了一脚补一脚。

我第二个接触的js框架就是mootools，自从使用mootools，了解了它的核心源码，真的彻底喜欢上了，个人感觉它的OO做的很好，绝不是为了OO而OO，在使用过程中总会偶尔感叹，太好了，设计得太好了。它的模块分得非常清晰，公共的方法抽的很好，原型继承模拟面向对象继承也很漂亮。因为它的整个设计思想就是面向对象，所以某些api对于简单的应用就显得不那么方便。同时，它的最大的缺点就是扩展(污染)了原生的对象，可我觉得这不是他的缺点，在我使用过程中，我可以完全忽略它，甚至觉得mootools就是javascript。

对比两者，讨论几点常用的功能：

• 在dom操作方面，两者都非常易用，两者都支持各种选择器，mootools从1.3开始大大提高了dom查找的效率，一点也不输jquery，两者上手容易度差不多
• 在ajax方面，jquery的api比起mootools显得简单很多，不过mootools封装的Rquest对象也会让你使用的很舒服，所以在这方面jquery上手比较容易
• 在工具方法方面，jquery的工具方法我常用的包括判断类型的、遍历的、扩展merge的，而mootools在工具方法就让人赏心悦目，因为它扩展了原生对象（当然有人觉得这样很不安全），所以他的每个类型的数据本身就支持很多方法，特别是数组的工具方法有很多，而且熟悉了之后使用起来很方便。mootools其实把很多工具方法都放在对应模块上了，它的工具方法是“污染型”的，但我个人很喜欢。
• 在插件支持方面，jquery的插件满天飞，mootools官方提供了一些扩展包，功能当然没法跟jquery插件比，但是最近使用mootools的人多了很多，各种UI、插件都跟上，而且质量都很高。
• 在文档方面，jquey的文档做得越来越好，官方上的指南和api使用介绍，分析都很到位；mootools在这方面就很逊，但是他们官方提到说最近会把文档作为一个重要任务，我相信随着mootools被越来越多用户了解，他会做的非常好，后劲十足。

对比以上几点，两者都非常优秀，但我个人喜欢mootools，最新的mootools的核心部分的版本是1.4.5，最新的jquery发布版本1.7.2。

 

最近我花了两天细读了mootools的core部分的源码，学了收获了很多，近期打算写一些总结mootools的文章，下面演示一个hello world的简单例子。

 

mootools的Hello World

1. 下载mootools核心部分的源码源码 http://mootools.net/download/get/mootools-core-1.4.5-full-nocompat.js

2. 准备脚本 hello.js

 

var sayHelloWorld = function() {
     alert('Hello World!');
};

//在window上注册domready事件处理函数 (dom加载解析完触发该事件)
window.addEvent('domready', function() {
	//执行上面定义的sayHelloWorld函数
	sayHelloWorld();
});

 

 

3.准备html

<script type="text/javascript" src="../lib/mootools-core-1.4.5-full-nocompat.js" ></script>
<script type="text/javascript" src="hello.js"></script>

 

4.效果

 

 

5.总结

hello.js的代码等同于jquery中

 

$(function(){

sayHelloWorld();

});

 

实现一个简单的helloworld比起使用jquery多一点点代码

 

核心部分的模块划分，

mootool-core 提供了九大模块， 下面列举各个模块以及它的主要功能并列出某些api，有个简单的认识则可

 

Core 核心模块

core包含了一些最普遍，会被其他各个模块用到的方法，例如：

 

typeOf (obj)

返回表示obj的类型的字符串，如 'element', 'textnode', 'array', 'object' 等

instanceOf(item, object) 

判断某个变量或值是不是某个类型的

implement(name, method)

某个类型原型扩展method方法，然后该类型的所有变量就有了该方法

extend(name, method)

某个类型表面继承method方法，则该类型就具有该静态方法

 

Types 类型模块

mootools对应原生类型定义了一下几种类型， 还有其他几种类型

 

其中六种为：

Array, String, Number, Function, Object, Event

对该类型的某个具值分别为：

[1,2],  'hello',  12,  function(){},  {name:'peter'}, Event类型的值

 

每个类型都像java一样，自身具有一些方法，只要是该类型的变量就能调用

 

Array

用于遍历 forEach(arr, function(value, index){})

添加元素 append(el)

判断包含 contains(el)

...

String

测试正则 test(regex)

去两边空 trim()

转化整数 toInt()

转为驼峰字符串 camelCase()

...

Number

限制在该范围 limit(mix, max)

四舍五入 round()

以自己为次数执行某个方法 times(function)

...

Function

尝试遍历执行知道有一个成功返回 attemp(functionArray)

原型拷贝 implement(key, val)

周期执行 periodical(period, bind, args)

...

Object

遍历字面对象 each(hash)

融合字面对象 merge(hash, hash)

获得键集合 keys()

获得值集合 values()

...

 

Event

停止传递时间 stopPropagation()

禁止默认表现 preventDefault()

...

Boolean 、 RegExp 、 Date、 Element、 Elements ...

 

Browser 浏览器模块

定义了很多静态变量直接获取浏览器信息

Browser.name

Browser.version

...

 

Class 类模块

这部分定义了mootools的类框架，非常重要的部分，来段模糊感性的代码

 

function println(msg){
	console ? console.info(msg) : alert(msg);
}

var Animal = new Class({
	categy : '动物', 
	name : '无名',
	initialize : function(categy){
		this.categy = categy;
		println(this.name + ' 进行 Animal初始化完成');
		this.born();
	},
	born : function(){
		println(this.name + ' born');
	},
	eat : function(){
		println('Animal Eat');
	}
});

var Runner = new Class({
	run : function(){
		println(this.categy + '  ' + this.name + ' is running');
	}
});

var Eatter = new Class({
	eat : function(){
		println(this.categy + '  ' + this.name + ' is eatting ' + this.food);
	}
});

var Dog = new Class({
	name : null,
	food : null,
	Extends : Animal, 
	Implements : [Runner, Eatter],
	initialize : function(categy, name, food){
		this.name = name;
		this.food = food;
		this.parent(categy);//很神奇的一句代码 super(categy)有没有
		println(this.name + ' 进行 Dog初始化完成');
	}
});

var myDog = new Dog('哺乳类动物', '旺财', '骨头');

myDog.eat();

myDog.run();

 打印结果：

 

旺财 进行 Animal初始化完成 tmp.js:2

旺财 born tmp.js:2

旺财 进行 Dog初始化完成 tmp.js:2

哺乳类动物 旺财 is eatting 骨头 tmp.js:2

哺乳类动物 旺财 is running tmp.js:2

Slick 选择器模块

主要提供了解析器Parser 和 查找器Finder

Paser 用于解析选择器，解析结果为一个对象

Finder 则能根据这个对象找到上下文中某些元素

 

Element 元素模块

页面中的每一节点都是Element类型的

 

Element部分 ：提供了操作一个节点的一组方法

Element.Style部分 ： 提供针对元素样式操作

Element.Event : 提供事件的包装，元素绑定事件机制

Element.Delegation : 提供事件委托机制, 即把一个(动态)子元素上的事件处理绑定委托到父容器上

Element.Dimensions : 提供元素的一些top, left, width, height, offset 等信息

 

Fx 动画模块

Fx 是 effect 这个英文单词的读音简写

 

Fx ：提供了一套动画框架，定义动画执行机制, 组织启动，暂停，恢复，帧执行等

Fx.CSS : 针对动画中样式相关处理，包括如何解析样式，如果计算样式

Fx.Tween： (tweening表示，通过某个样式的初始值到目标值实现某个一个画面通过另一个画面)

   提供具体实现某个样式动画

Fx.Morph:   (morphing表示通过多个样式实现从一画面变到另一个画面)

   提供了同时多个样式的动画

 

Request 请求模块

提供了基础的请求类型

还提供了特定于响应内容为html代码的请求类型

也提供了特定于响应内容为json字符串的请求类型

 

Utilities 公共程序模块

提供了 cookie读写， json转换， domready机制， 添加flash 四个方面的工具

 

总结

分别简述了对jquery和mootools的使用感受，强调了mootools中受人喜欢的几点；接着提供了一个简单的hello例子，提到如何了注册事件处理函数；最后列举了mootools-core-1.4.5.js 中划分的各大模块以及各大模块中的各个部分，并列举每部分的一些功能，在讲述Class模块的时候提供了一个具体例子，该例子体现了mootools强大的OO思想。

 

通过该文希望你能对mootools有个很好的感性认识。接下来一个月我会对各个模块举一些应用例子，以及分析某些源码片段，然后介绍一些实用插件。