30天学会 MooTools 教学(1): 认识MooTools

　　其实很多人都知道jquery,mootools与之类似,我以前是写jquery的,学了5个小时,写了5个月,最后后悔了5个月,不得已转至Mootools上,Mootools的官网是:Mootools.net

说实话,Mootools在华人地区并不流行,原因很简单,缺少中文教学文档.

　　有人最近要求我们写一个关于MooTools 1.2的30天的教程，这似乎也是个很不错的主意，于是我们决定现在就开始。在这些教程中，我们假设用户没有任何MooTools或者是JavaScript经验，但是至少有基本的HTML和CSS知识。
MooTools 1.2 JavaScript库介绍

　　MooTools 1.2是 个强大的轻量级的JavaScript库，专门为减轻Web中交互性JavaScript开发。在某种程度上，你可以认为MooTools是CSS的扩 展。例如，CSS可以让你在鼠标移上去时发生改变。JavaScript允许你接触更多的时间（点击事件、鼠标悬停事件、键盘事 件……），MooTools让这一切变得非常容易。这里不得不顺便提一下,Mootools可以自定义事件,而jquery只能用那几个定死的事件.例如:

//jquery事件写法:
$('#??').click(function(){...})

//充其量牛逼一点的写法不过就是:
$('#??').bind('click,mouseover',function(){...})

//mootools的写法:
$('??').addEvent('click',function(){...})

//这个写法jq用户看了一定眼晕
$('??').addEvent('click:click:relay(a.myStyle)',function(){...})

//这是自定义事件,事件是你自己随便定义的
$('??').addEvent('ctrlPress',function(){...})

　　还有就是和jquery语法结构的差异,在jquery里不管你要干啥,你都得把代码封装进$(document).ready(function(){});这玩意里边然而Mootools随便你,他不要求你这么做,这其中是有很大差异的,想象一下,如果你的网站有很多特殊效果,那么你就会对应的需要很多效果的插件,在jquery里你就必须要把这些插件放入$(document).ready(function(){});里才能正常使用,然后放入这里面就要意味着当打开你的网站的时候哪怕你什么事情都不做,客户的电脑都得需要执行一遍这些扩展,执行的后患就是内存开销了,尤其是jquery这个不懂得释放内存的框架,更是让人抓狂.在过去的5个月内我曾遇到过浏览器消耗了我超过3G的内存的状况,这实在太恐怖了.然而Mootools不是如此,他所有的插件都是开发成class,当然了简单的插件你也可以用function,只要你不实例化或调用他根本就不会消耗内存,就算内存有了消耗只要一句简单的destroy就能搞定了,天空一片晴朗,用过jquery的朋友请回想一下当你频繁ajax的时候你的内存的状况吧..

　　另外，MooTools还有各种各样的非常好的扩展，可以让你不只是改变一个元素的属性，还可以让你有」morph「（变形）或者」tween「（补间动画）属性，让你有能力去创建动画效果，就像你在我的导航菜单上看到的一样（Fdream注：原作者的，我的首页也有）。

　　这只是一个例子，MooTools可以让你做更多的事情。在接下来的30天裡，我们将深入MooTools库，探索从数组（Array）和函数（Function）到Fx.Slide，以及其他捆绑插件的每一个东西。
引用MooTools 1.2

首先，下载并引用MooTools 1.2核心库。

    下载MooTools 1.2核心库
    把MooTools 1.2核心库上传到你的服务器或者工作区
    在你的HTML文档头部head标记之内链接MooTools 1.2核心库

<script src="mootools-1.2-core.js」 type="text/javascript"></script>

（Fdream注：现在MooTools 1.2下载下来后，默认的后缀名是」.txt「，请更改后缀为」.js「。）
在Head标籤之内添加Script标籤

现在，你已经在你的页面中应用了了MooTools了，你还需要一个地方来写你的代码。这裡有两种选择：

1. 把下面的代码写在你的head标籤之内，你的代码写在script标记之内：

<script type="text/javascript">
//Mootools code goes here
</script>

2. 在外部建立一个JavaScript文件，然后在页面头部链接此文件：

<script src="myJavaScriptFile.js" type="text/javascript"></script>

 

在这裡，你可以使用任何一种方式。我通常把domready事件中调用的方法放在script标记之间，而我的函数放在外部文件中。
把代码放在domready中

MooTools的方法必须在domready事件中调用。

window.addEvent('domready', function() {
    exampleFunction();
});

 

（Fdream注：不完全是这样，但是可以保证你的JavaScript代码儘可能少地出错。顺便说一下domready事件：当页面的HTML代 码（不包括图片、flash等等，只是代码）下载完成时，此时会触发domready事件。这样可以在页面完全下载完成（包括图片、flash等都下载完 成）之前执行你的脚本，从而避免因为一张大图要下很长时间而导致脚本不能执行，从而出现异常。）
把代码放在一个函数中

你仍然可以在domready之外创建你的函数，然后在domready中调用它：

var exampleFunction = function() {
     alert('hello')
};
 
window.addEvent('domready', function() {
    exampleFunction();
});

 

关于库的详细介绍

在这第一讲中，我们会仔细地看了一下这个库架构的一些关键组件，然后粗略地看一下其他基本功能。
Core（核心）

核心（core）部分包含MooTools库的一些公共函数（Function）来完成一些常见的任务，也加强了许多原有功能（后面会有详细介绍）。下面的内容只是作为MooTools功能的一些例子，并不能替代您阅读MooTools的文档。

    检查一个值（如果没有值或者为0则返回false） - $chk(value);
    返回两个值之间的一个随机整数 - $random(min, max);
    可以更容易地检测浏览器、浏览器的引擎及浏览器的能力

（Fdream注：第一个描述有误，$chk(value)只是检查一个值是不是已经定义或者已经赋值，为0时会返回true，只有undefined或者null时返回false。）
Native（本地对象）

在库的这一部分也包含了一些公共工具，可以让你很容易地操作数组（Array，值或者对象的简单列表）、函数（Function）、数值（Number）、字符串（String）、哈希对象（Hash）和事件（Event）。这裡是本地对象中的一些工具特性：

    对数组中的每个元素执行一段脚本 - .each();
    得到数组中的最后一个元素 - .getLast();
    每个x毫秒触发一个事件 - .periodical();
    对小数取整 - .round();
    把rgb转换为十六进制（HEX） - .rgbToHex();

Class（类）

一个JavaScript类（相对于CSS的类），是一个功能可以重複使用的对象。若要更多地瞭解MooTools类，你可以看看Valerio的这篇简单介绍的文章（MooTools类——怎样使用它们）。我也同时推荐David Walsh的MooTools类模板。
Element（元素）

MooTools库的Element类提供了一些非常有用的功能。通过这个类，你可以选择DOM元素、操控他们的属性和位置、改变他们的CSS风格。这裡是MooTools提供的一些非常强大的处理DOM元素的工具：

    选择所有有相同ID或者CSS类名的DOM元素 - .getElements();
    给一个元素添加一个CSS类 - .addClass();
    取得一个元素的属性值 - .getProperty();
    改变一个元素的属性值 - .setProperty();
    取得一个元素的样式属性值 - .getStyle();
    改变一个元素的样式属性值 - .setStyle();
    取得一个元素的坐标位置 - .getCoordinates();

（Fdream注：不推荐在一个页面中有多个相同ID，最好不要出现，在一些浏览器下很容易出现不可预见的错误。）
Utilities（实用工具）

实用工具（Utilities）提供了更多精良的选择逻辑，包括domready事件、可以管理AJAX调用的工具、可以轻鬆管理cookie的工具，甚至还有」swiff「功能，可以提供JavaScript接口给ActionScript。
FX（效果）

这可能是MooTools最有趣的部分了。通过Fx（效果），你可以创建」Tween「（补间动画）和」morph「（形变动画）效果，从而让你的DOM对象动起来。

    在两个样式属性值之间创建一个动画变形（比如让一个div平缓地变大） - var myFx = new Fx.Tween(element);
    在多个不同的属性值之间创建一个动画变形（比如在让一个div平缓变大的过程中，让它的边框越来越初，同时变换它的背景颜色） - var myFx = new Fx.Morph(element);

Request（请求）

包含一些可以轻鬆处理JavaScript XMLHttpRequest（AJAX）功能的工具。为了减轻整个请求/响应（request/response）带来的痛苦，Request对象还有一些专门用来处理HTML和JSON对象（JavaScript对象表示法）的扩展。
Plugins（插件）

MooTools插件扩展了核心功能，可以轻鬆地为你的web项目添加高级UI功能。插件列表如下：

    Fx.Slide
    Fx.Scroll
    Fx.Elements
    Drag
    Drag.Move
    Color
    Group
    Hash.Cookie
    Sortables
    Tips
    SmoothScroll
    Slider
    Scroller
    Assets
    Accordion

全局概览

在开始下一讲之前，花一点时间全面地看一下MooTools的文档。可能有些地方你看不太懂，不要管它，儘管通读它，然后吸收那些你懂的。在接下来 的29天中，我们将逐步深入这个库特定的部分，然后把MooTools分解成一些容易消化的小部分，但是首先，一定要好好看一下整个目录。

其他的MooTools教程

同時，這裡列出了一些其他幫助你開始的的MooTools教程。