MooTools 基本介绍与入门

By Rainbow on // JavaScript // 4062 Views+ // (1) Comments

MooTools学习笔记

 

MooTools 基本介绍与入门

今天是我正式学习MooTools的第一天，前一段时间，我正在学习JavaScript DOM 的基础部分，也写了一些关于DOM的一些小例子和实用方法。
我在学习的过程中，一直为DOM的一些效果寻求最佳解决方案。同时也关注着这些比较流行的JavaScript库，先是jQuery,然后是Portotype,到最后的MooTools。
它们都是JavaScript库中的佼佼者，也都是比较轻量级的JavaScript库。

而我一直选择的目的和原则是：1.不要沦为工具的奴隶，2.“为我所用”是否可以修改和扩展。
3.可选择性，我只想要我用到的东西。4. 循序渐进的领悟JavaScript，我想成为高手。

以下是关于一些主流的JavaScript Library对比的文章列表：

百度百科：关于MooTools的介绍

4种流行的AJAX框架对比：jQuery，Mootools，Dojo，Ext JS

选择mootools的5个原因(转)

MooTools vs Prototype 核心代码分析-为什么选择MooTools

学习MooTools的条件：

    1.有一定的HTML,CSS和JavaScript基础知识。

    2. 要有JavaScript和JavaScript框架互换的意识，用原生的JavaScript去实现JavaScript框架一样的效果。

MooTools 基本介绍

Mootools是浏览器和你所写代码之间的一个轻量级抽象层（这也几乎是所有的js 框架的定义，比如Prototype, Dojo, JQuery, YUI等等）。相对于以前那种令人痛苦而且充满Bug的开发环境（指浏览器），Mootools为编写javascript代码提供了更多的功能函数和丰富的工具，展现你眼前的是一种更可靠的环境。当把Mootools添加到你的开发环境中（比如，把脚本包含到你的页面中）后，你就可以更高效地写出简洁，易读并可重用的代码了。

Mootools主要依靠它能重建伪类继承体系的类，并允许可扩展和可重复使用的特性。除此之外，它还提供了一些自己的类，能让你快速容易地写出能作各种效果的代码，如大小变化，渐变，移动，拖动以及其他很多功能（ajax, json等）。使一个状态变化到另一个状态（渐变，移动，大小变化等）的代码量是很少的，其余的工作Mootools都会帮你完成。

Mootools也提供了扩展的DOM方法，从document对象里面选择元素，创建新的元素并能改变它们。还有一些快捷有用的方法（像$, $type, $chk, $random等），能帮你完成一般的任务。

即使在你的开发环境中有了Mootools，当你碰到基本的javascript语法时，你仍需要写自己的代码，但在很大程度上来说，你不是在写Javascript了，你是在写Mootools。这样一来有一个好处是，不仅框架做了很多的工作（你几乎不用担心跨浏览器的问题了），如果Mootools框架本身有Bug或者由于新的浏览器的发布使得Mootools需要更改，只要更改框架就行了，而你不用全部重写你的代码。

以上这些层次的抽象，使得你可以写出非常丰富的客户端应用程序。

总之而言:

MooTools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的 JavaScript代码。最大的优点是可选择使用哪些模块，用的时候只导入使用的模块即可，代码写的优美，易阅读和修改。

The defining characteristics of MooTools are as follows:

  • Don’t duplicate code.
  • Add functionality that fits in principle with JavaScript’s own design philosophy.
  • If there’s a good standard in place that works well but is not yet implemented, implement the standard.
  • Extend native objects (String, Function, Array, Element, Event, and Number) as JavaScript was designed to do.
  • Write clean, clear, well-named code that is understandable when read by anyone with the skills to understand it.
  • Be careful not to demand too much of the browser (memory, CPU cycles, etc.).
  • Abstract as much away from the browser as possible.
  • Whenever possible, make it still feel like you’re writing JavaScript.
  • Make it easy. Make it fun. Make it inspiring.
  • Make it modular.

MooTools 入门

下载 MooTools核心库

下载最新版的MooTools核心库

Downloading-MooTools

在这里,您可以下载MooTools核心的压缩版或未压缩版。我建议你使用未压缩版本来开发，这样便于我们分析代码。

MooTools Builder

Core Builder

MooTools-Core-Builder

More Builder

MooTools-More-Builder

我说过MooTools是模块化的库，可选择使用哪些模块，用的时候只导入使用的模块。

添加 MooTools 到你的页面

引用我们刚下载的最新版MooTools库

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">  
    <head profile="http://gmpg.org/xfn/11">     
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     
        <title>Your title</title>     
         <script type="text/javascript"  src="mootools-1.2.3-core-nc.js"></script>    
         <script type="text/javascript"  src="yourSiteCode.js"></script>     
 
        </head>   
    <body>
</body> 
</html>

以上就是引用MooTools库和和自己的JavaScript文件的引用方式。

把代码放在domready中

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

1
2
3
4
5
6

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

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

明显的 MooTools Scripts

以下我们列出MooTools库里的每一个模块化的文件，并认识它们和使用它们。

MooTools分成两个单独的库：即 “Core” 和 plug-ins

MooTools 核心库

当您访问MooTools和下载的主要库（核心），您将获得以下所有的文件。

Core/Core.js

What it does:
定义了一列常用的工具函数,来完成一些常见的任务，也加强了许多原有功能。也包含一些诸如Hash和Array的基本扩展方法。
When you’ll use it:
MooTools使用的所有方法，在该脚本中。你将使用其中的一些， 虽然可能不是 Native function,但是创建 MooTools 实例几乎都是使用的原生的本地对象 (明确的是,它修改了低层的一些类： Array, Element, Event, Function, Hash, Number, and Function).

Core/Browser.js

What it does:
定义了Browser Hash实例. 该对象储存了一系列用于浏览器和平台检测的属性。可以更容易地检测浏览器、浏览器的引擎及浏览器的能力。
Browser.js 还定义了 Window 和 Document native objects.
When you’ll use it:
当我们编写实例的时候，如果使用了MooTools本身定义的方法，它能帮助我们修复浏览器怪癖。
当你的脚步用到一些属性和方法时，不确定你的客户端浏览器是否支持它们，这时我需要一些检测（对象检测或浏览器检测），来判断同样的脚本在IE浏览器支持，而是否在Safari或Firefox也支持哪。

Class/Class.js

What it does:
MooTools框架中类机制的提供者,定义类和其方法和属性。
When you’ll use it:
一个JavaScript类（相对于CSS的类），类是一种强大的方法，建立可重复使用的功能.

Class/Class.Extras.js

What it does:
定义了 Events, Chain, and Options classes.
When you’ll use it:
这三个类是辅助MooTools中类的实现和继承（扩展）。通过实现和继承，我们可以在子类中使用父类的方法，而不需要再重新声明和实现相同的方法。MooTools中的Class类可以帮助我们轻松地做到这一点。

Element/Element.js

What it does:
MooTools库的Element类提供了一些非常有用的功能。通过这个类，你可以选择DOM元素、操控他们的属性和位置、改变他们的CSS风格。
扩展了 Element native object, 提供众多的捷径, selection, 和初始化方法.
When you’ll use it:
像所有的脚本在本地目录,Element.js扩展了本地的DOM元素。这是一个最重要的脚本库。

Element/Element.Dimensions.js

What it does:
扩展了Element的尺寸和位置相关的方法
When you’ll use it:
当你需要确定Element的 size, scrolling, 或positioning 元素和document时能用到它们.

Element/Event.js

What it does:
对Element的进行事件处理的方法，以下提供的方法对window和document同样有效。
扩展了native Event object 与element-specific methods，定义functionality 来创建自定义事件，并包括mouseenter ， mouseleave ，和mousewheel自定义事件。
When you’ll use it:
当你触发元素的事件时候，就得需要事件监听器到一个DOM元素（(click, load, mouseover等） 。 Element.Events.js 扩展的元素，使附加事件和管理事件对象更加容易。

Element/Style.js

What it does:
对Element的层叠样式表操作的方法
When you’ll use it:
每当你想改变某一个DOM元素的样式时, 在Element.Style.js能找到相应的的方法。

Fx/Fx.js

What it does:
定义了所有的Fx.*.js scripts的基础功能。
When you’ll use it:
本类一般不独立使用,它用来提供作为Fx系的类的基础功能类.所有其他的Fx系列的类都继承本类.

Fx/Fx.CSS.js

What it does:
Defines the animation logic for transitioning style properties.
When you’ll use it:
用于动画特效中CSS样式解析的功能类.
Fx.Tween, Fx.Morph, Fx.Elements 这三个类依赖于本类.

Fx/Fx.Morph.js

What it does:
定义了 Fx.Morph effect.
When you’ll use it:
Fx.Morph is used to transition more than one CSS property at once (e.g., height and width).

Fx/Fx.Transitions.js

What it does:
定义了许多 transitions 可用于任何效果。
When you’ll use it:
Fx (and therefore the classes that extend it) comes with a basic linear transition, but Fx.Transitions.js defines a dozen more including bounce, circ, expo, elastic, and others. Additionally, Fx.Transitions.js defines methods that you can use to write your own.

Fx/Fx.Tween.js

What it does:

定义了一个 Fx.Tween effect.
对元素单个样式属性执行一个特效.它在元素上的快捷方法是Element.tween

When you’ll use it:
Fx.Tween is used to transition a single CSS property (height, width, color, etc.).

Native/Array.js

What it does:
扩展了原生的Array，并增加了额外的方法。使数组(Array)的功能增强
When you’ll use it:
当你工作中的数据数组（Array） 时, Array.js 中20个有用的方法，使你从中受益。

Native/Event.js

What it does:
扩展了本地事件对象给予跨浏览器的稳定性。它是MooTools框架的事件对象包装类
When you’ll use it:
Event.js 和 Element.Event.js. 前者侧重于扩展本地事件的属性和方法，以消除在不同的浏览器上实现事件对象的各种矛盾。
而后者提供了Element的进行事件处理的方法 更方便地连接事件监听和管理它们。

Native/Function.js

What it does:
扩展了原生的函数对象，提供了众多的方法，函数(Function)的功能增强。
When you’ll use it:
对Function的扩展，mootools主要提供了一个create方法来创建闭包，这个方法其实实现了mootools对Function的所有扩展功能,但是一般我们不会直接去用它，而是使用mootools基于这个create方法派生出的其他方法。

Native/Hash.js

What it does:
扩展了本地对象，当您初始化它(new Hash()).
When you’ll use it:
一个重新实现的Object({}), 被专门用于数据的存取.

和原来的Object({})的区别是: 它不会在进行存值,取值或迭代的时候处理对象的prototype中的内容.

重新实现这个类是有意义的, 因为原本我们无法直接使用Object.prototype, 因此本框架使用Hash.prototype来替代

Native/Number.js

What it does:
扩展了原生的Number对象 ，添加了许多有益的方法。
When you’ll use it:
每当你对Number操作或管理Number的时候，在Number.js中的方法将有助于你的工作。

Native/String.js

What it does:
扩展了本地String对象，添加了许多有益的方法。
When you’ll use it:
就像Number.js一样 ， String.js使检查和修改字符串变得更容易.

Request/Request.js

What it does:
定义了一个 Request 类, 它是对XMLHttpRequest的功能包装类.
When you’ll use it:
这就是 MooTools 的 Ajax 类. 它提供了丰富的接口，本地的XMLHttpRequest 或 XHR.

Request/Request.HTML.js

What it does:
专门用于响应内容为HTML的请求.
When you’ll use it:
只要您的Ajax请求检索的HTML ，用于更新内容的一个DOM元素（一种常见的做法） 。

Request/Request.JSON.js

What it does:
专门用于发送和接收JSON格式数据的请求
When you’ll use it:
每当您收到数据的简称JSON格式（转换一个本地JavaScript对象为一个字符串） 。

Selectors/Selectors.js

What it does:
增加了先进的CSS querying功能，来 selecting elements.
When you’ll use it:
Element.js includes the $$ function to collect objects out of the DOM as well as element methods such as Element.getElements. These methods by default only accept tag names for filters ($$(‘div’) gets all the divs on a page). When you include Selectors.js, you can use any CSS expression with these methods to select elements from the DOM.

Utilities/Cookie.js

What it does:
提供浏览器cookies操作的功能类，定义了一整套方法，来管理cookie名字空间里的Cookie.
When you’ll use it:
每当你想读，写，或删除的Cookie

。

Utilities/DomReady.js

What it does:
window对象的自定义事件: ‘domready’.
When you’ll use it:
该事件在页面的DOM树加载完成后触发.
在需要保证所要操作的DOM元素已经加载完成的情况,本事件将非常有用.
本事件只对window对象有效.

Utilities/JSON.js

What it does:
JSON的编码与解析，在JSON格式中包含处理的数据方法。
When you’ll use it:
当你需要对JSON格式进行编码或解码时用到。

Utilities/Swiff.js

What it does:
用于便捷的创建Flash对象的功能类. 支持（修正）外部接口通信。
When you’ll use it:
每当你想嵌入 SWF (Flash) objects时使用.

The MooTools Plug-Ins:“More”

当您下载MooTools插件时, 您可以选择以下任何文件，这些都是“官方”的 MooTools插件，但许多第三方插件也可以。

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

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

全局概览

花一点时间全面地看一下MooTools的文档。对MooTools中的所有类有了初步的映像，可能有些地方你看不太懂，不要管它，尽管通读它，然后吸收那些你懂的。我们将逐步深入这个库特定的部分，然后把MooTools分解成一些容易消化的小部分，但是首先，一定要好好看一下整个目录。

以上的MooTools的所有类的分析，只作为参考。以免误导。

要想了解更多请看一下网站和资料：

 

分享到： 更多

文章评论 已经有 1 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计