MooTools 基本介绍与入门
MooTools学习笔记
MooTools 基本介绍与入门
今天是我正式学习MooTools的第一天,前一段时间,我正在学习JavaScript DOM 的基础部分,也写了一些关于DOM的一些小例子和实用方法。
我在学习的过程中,一直为DOM的一些效果寻求最佳解决方案。同时也关注着这些比较流行的JavaScript库,先是jQuery,然后是Portotype,到最后的MooTools。
它们都是JavaScript库中的佼佼者,也都是比较轻量级的JavaScript库。
而我一直选择的目的和原则是:1.不要沦为工具的奴隶,2.“为我所用”是否可以修改和扩展。
3.可选择性,我只想要我用到的东西。4. 循序渐进的领悟JavaScript,我想成为高手。
以下是关于一些主流的JavaScript Library对比的文章列表:
4种流行的AJAX框架对比:jQuery,Mootools,Dojo,Ext JS
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核心的压缩版或未压缩版。我建议你使用未压缩版本来开发,这样便于我们分析代码。
MooTools 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:
- When you’ll use it:
- Fx.Tween is used to transition a single CSS property (height, width, color, etc.).
定义了一个 Fx.Tween effect.
对元素单个样式属性执行一个特效.它在元素上的快捷方法是Element.tween
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的所有类的分析,只作为参考。以免误导。
要想了解更多请看一下网站和资料:
- 官方网站:http://mootools.net
- 在线文档:http://mootools.net/docs/
- 官方博客:http://mootools.net/blog/
- 官方论坛:http://groups.google.com/group/mootools-users
- 中文版的 MooTools 1.2 参考文档:http://code.google.com/p/mootools-doc-cn/
- MooTools教程:http://www.mootorial.com/wiki/
文章评论 已经有 1 条评论!