mootools 教程

mootools【一】- 起步篇 
以前一直在用prototype.js，最近发现了mootools,据说也相当不错，它是个纯OO的javascript 框架，所以拿来学习学习，把学习经过记录下来。
 粗略看了下，mootools很貌似prototype,所以用过prototype框架的人应该很容易上手的。
 mootools提供的功能高度模块化，可以根据实际需要来裁剪。
它的核心库是Moo.js和Utility.js，Moo.js里包含了实现OO的基础类,Utility.js提供了最常用的工具函数的封装。
---------------------------Moo.js-------------------------------------
prototype.js里提供了如下形式来创建我们的对象:   
 
var Cat = Class.create();
Person.prototype = {
    initialize: function(name){
       this.name = name;
    }
};
var cat = new Cat ('kitty');
alert(cat.name);
 
对应,mootools使用如下形式:
var Cat  = new Class({
    initialize: function(name){
        this.name = name;
    }
});
    
var cat = new Cat ('kitty');
alert(cat.name);
恩，两者看起来很像，不过，好像mootools这种方式更加符合OO的习惯(不过也要看各人喜欢的啦)。
Class进行继承,mootools是这样做的:
 
  var Animal = new Class({
     initialize: function(name){
      this.name = name;
    }
 });
 
  var Cat = Animal.extend({
     initialize: function(name,age){
      this.parent(name); //调用Animal的initialize方法
      this.age = age;
    }
 });
是的，相当好用。
Class.implement方法从功能上来理解是对已经定义好的类进行扩展,用法如下:
  var Person = new Class({
      initialize: function(name){
         this.name = name;
     }
 });
 
  Person.implement({
    initialize: function(name,age){
         this.name = name;
         this.age = age;
     },
     
  myAction: function(){
         alert(this.name+'--'+this.age);
     }
 });
 
 var p = new Person('zarknight',24);
 p.myAction();
这和java中的实现接口好像不是一个概念...
 mootools对Object扩展了一个extend方法,它有两个参数，作用是复制第二个参数对象的所有属性到第一参数对象中去，同名属性将覆盖为第二个参数中的相应属性：
  var firstOb = {
     'name': 'John',
     'lastName': 'Doe'
 };
  var secondOb = {
     'age': '20',
     'sex': 'male',
     'lastName': 'Dorian'
 };
 Object.extend(firstOb, secondOb);
 
 //firstOb将变成:
  {
     'name': 'John',
     'lastName': 'Dorian',
     'age': '20',
     'sex': 'male'
 };
---------------------------Moo.js-------------------------------------
$type
作用：基本上是对typeof的扩展,返回输入参数的类型
例子：
 var x = $type("abcdefg");
返回值：
'element' - DOM
 'textnode' - DOM 文本节点
 'whitespace' - DOM 空白节点
 'array' - 数组
 'object' - 对象
 'string' - 字符串
 'number' - 数字
 'boolean' - 布尔型
 'function' - 函数
 false - 如果是未定义或则不是以上列出的类型
$chk
作用：如果输入参数是数值（包括0）或是对象(不为null或undefined),则返回true,否则返回false
 var x = $chk("abcde");  //true
 var y = $chk(0);             //true
 var z = $(null);                //false
 
$pick
作用：如果第一个参数对象存在，则返回这个对象；否则返回第二个参数对象
 var x = $pick("openfdc","zarknight");  //openfdc
 var y = $pick(null,"zarknight");             //zarknight
    var z = $pick(1, 2);                                 //1
 
$random
作用：产生一个介于(包括)指定的最大范围值和最小范围值之间的随机整数
 var x = $random(1,100);   //产生一个1~100之间的随机整数
 
$clear
作用：其实就是clearTimeout和clearInterval都调用一遍
 var timer1 = setInterval("abc()",1000);
 timer1 = $clear(timer1);
 
 var timer2 = aFunc.delay(1000);  //delay是mootools对Function的扩展,具体用法看mootools文档或我的后文...
 timer2 = $clear(timer2);
另外，mootools往window对象里摆了这么些属性,用来作为检测浏览器类型的工具：
window.ie
window.ie6
window.ie7
window.khtml
window.gecko


  mootools【二】 - Array篇 
由于JavaScript1.5对Array增加了一些比较好用的方法，如forEach,filter,map,every,som,indexOf，但是在还不支持JavaScript1.5的浏览器里是不能用得，所以，mootools它通过扩展Array来使其实现对这些方法的支持:
---------------------------------Array.js---------------------------------
Array对象的forEach方法
原型：Array.prototype.forEach(callBack: Function, thisObject: Object) 
作用：对数组进行迭代操作，它有两个参数，第一个参数callBack是每次迭代所执行的函数，第二个参数thisObject可选，是要绑定到迭代执行的函数上的对象(也就是函数callBack中的this所指向的对象)
 //用法一
 var arr = [1,2,3,4,5,6];
  arr.forEach(function(e){
      alert(e);
 });
 
 //用法二
 var arr = [1,2,3,4,5,6];
 var obj = "hello!";
  arr.forEach(function(e){
     alert(e+'--'+this);
 },obj);
 
 //用法三
  function putElt(element, index, array) {
     document.write("pos [" + index + "] in array (" + array + ") is " + element + '
');
 }
 [2, 5, 9].forEach(putElt);
 
Array对象的filter方法
原型：Array.prototype.filter(callBack: Function, thisObject: Object) 
作用：迭代数组，每个元素作为参数执行callBack方法，由callBack方法作为数据过滤网，最后返回过滤后的一个数组
  var result = [1,2,3,4,5].filter(function(e){
       return e > 3;
 });
 alert(result);   //结果为4,5
 
Array对象的map方法：
原型：Array.prototype.map(callBack: Function, thisObject: Object) 
作用：迭代数组，每个元素作为参数执行callBack方法，由callBack方法对每个元素进行处理，最后返回处理后的一个数组
  var result = [1,2,3,4,5].map(function(e){
       return e + 'px';
 });
 alert(result);  //结果为1px,2px,3px,4px,5px
 
Array对象的every方法：
原型：Array.prototype.every(callBack: Function, thisObject: Object) 
作用：它的意思就是：是否数组中的每个元素都通过了callBack的处理？如果是，则返回true,如果有一个不是，则立马返回false
  var result = [1,2,3,4,5].every(function(e){
       return e > 3;
 });
 alert(result);    //返回false
 
Array对象的some方法：
原型：Array.prototype.some(callBack: Function, thisObject: Object) 
作用：它的意思就是：是否数组中的有元素通过了callBack的处理？如果有，则立马返回true,如果一个都没有，则返回false
  var result = [1,2,3,4,5].every(function(e){
       return e > 3;
 });
 alert(result);    //返回true
 
Array对象的indexOf方法：
原型：indexOf(searchElement: Object, fromIndex: Number) 
作用：在数组中查找是否含有指定对象,如果有，返回对象所在的索引,否则返回-1；第二个参数是可选参数，如果指定的话，比如指定3，则表示从数组的第4个元素开始查找；默认从第0个元素开始查找。
var x1 = [1,2,3,4,5].indexOf(2);     //结果为1
var x2 = [1,2,3,4,5].indexOf(2,3);  //结果为-1
 
----------------------以下的方法是mootools提供的Array的专有扩展，和JavaScript标准无关--------------------------
each
作用：它的用法和作用与forEach一模一样，参看上文的forEach
 
copy
作用：复制数组元素到新的数组中；默认是全部复制，如果指定了开始索引和长度的话，则可以按指定形式复制
var a = [1,2,3,4,5,6];
var b1 = a.copy();         //[1,2,3,4,5,6]
var b2 = a.copy(2,2);   //[3,4]
 
remove
作用：删除数组中指定值的元素
var a = [1,2,2,3,4,5,6];
var b = a.remove(4);  //[1,2,2,3,5,6]
var c = a.remove(2);  //[1,3,4,5,6]
 
test
作用：查找数组中是否有指定的值
var a = [1,2,3,4,5,6];
var b = a.test(11);      //fasle
var c = a.test(2);        //true
 
extend
作用：把另一个数组追加到本数组后(不排除相同值的)
var a = [1,2,3,4];
var b = [1,11,12];
a.extend(b);
alert(a);             //1,2,3,4,1,11,12
 
associate
作用：把另一个数组中的值作为key,本数组中的值做为值，组成一个键值对象(长度为两者中较小的那个)
var v = [1,2,3,4,5];
var k = ['one','two','three'];
var kv = v.associate(k);
alert(kv['one']);               //1
var v = [1,2];
var k = ['one','two','three'];
var kv = v.associate(k);
alert(kv['one']);               //1
alert(kv['three']);             //undefined
 
$A
作用：和Array的copy方法是一样的作用
var a = [1,2,3,4];
var b = $A(a);           //[1,2,3,4]
var c = $A(a,1,2);     //[2,3]
 
$each
作用：功能基本和Array的forEach方法相同，官方文档上说可用于非常规数组的迭代，如由getElemntsByTagName调用产生的结果，以及参数数组arguments等。不过管它常规不常规，用起来的形式还是一样的
var a = [1,2,3,4];
$each(a,function(e){
     alert(e);
});
 
恩，Array部分终于看好了，自己写的语言表达上感觉有些地方有欠缺，呵呵。。。


  mootools【三】- String篇 
String大概是我们使用频率最高的数据类型了，在各个javascript框架中，都或多或少的对String进行了扩展，来提供一些十分方便的方法来处理日常应用。mootools也不例外，String.js中主要实现了这些对String的扩展，还稍微带了点对Array和Number的扩展。
--------------------------------String.js---------------------------------------
//========================以下是对String的扩展========================
test
作用：对字符串执行正则表达式匹配
 var x = "Hello,world!".test('hello');        //false
 var y = "Hello,world!".test('hello','i');    //true,'i'是正则表达式参数，表示忽略大小写.注意'g'在这里无效
 var z = "Hello,world!".test(/H.*?o/);     //true
 
toInt
作用：把字符串转换成整数，如果非数字，则返回NaN
var x0 = "1.12".toInt();         //1
var x1 = "1".toInt();              //1
var x2 = "1px".toInt();          //1
var x3 = "10xxx".toInt();      //10
var x3 = "x10xxx".toInt();     //NaN
var x4 = "020".toInt();         //16
var x5 = "0xFF".toInt();       //255
 
toFloat
作用：把字符串转换成浮点数
var x0 = "1.12".toFloat();         //1.12
 
camelCase
作用：把以"-"分隔的字符串，如"my-work"，转换成"myWork"这样的形式
var x = "my-work".camelCase();       //myWork
var y = "My-Work".camelCase();       //MyWork
 
hyphenate
作用：把形如"myNotePad"形式的字符串，转换成"my-note-pad"这样的形式
var x = "myNotePad".hyphenate();         //my-note-pad
 
capitalize
作用：字符串中每个单词的首字母大写
var x = "hello world".capitalize();         //Hello World
 
trim
作用：去除字符串首尾的所有空格
var x = "           hello world              ".trim();         //“hello word”
 
clean
作用：去除字符串中所有多余空格(收尾全部去除，单词之间留一个空格)
var x = "           hello                 world             \n\n ".clean();         //“hello word”
 
rgbToHex 和 hexToRgb
作用：rgb代表的颜色代码与十六进制表示的颜色代码之间互转
"rgb(17,34,51)".rgbToHex();           //"#112233"
"rgba(17,34,51,0)".rgbToHex();     //"transparent"
"rgb(17,34,51)".rgbToHex(true);   //['11','22','33']
"#112233".hexToRgb();                 //"rgb(17,34,51)"
"#112233".hexToRgb(true);          //[17,34,51]
 
//=====================以下是对Array的扩展========================
rgbToHex  和 hexToRgb
作用：取数组中的前3个元素，转化成RGB颜色代码或十六进制颜色代码
['FF',0,0].hexToRgb();               //rgb(255,0,0)
[255,255,0].rgbToHex();          //#ffff00
 
//=====================以下是对Number的扩展========================
toInt
作用：数字类型的对象转换成整型
var n1 = 12.11;
var nx = n1.toInt();                 //12
 
toFloat
作用：数字类型的对象转换承浮点型
var n1 = 12.010;
var nx = n1.toFloat();          //12.01


  mootools【四】- Function篇 
闭包是javascript中非常强大的工具， 在实际应用开发中，我们基本上都会用到。从各个javascript框架中，我们也可以到处看到闭包的影子。mootools在javascript的Function上扩展出了一些十分方便的创建函数闭包的方法，其中一些我们在prototype.js中也使用过，类如bind,bindAsEventListener等。
对Function的扩展，mootools主要提供了一个create方法来创建闭包，这个方法其实实现了mootools对Function的所有扩展功能,但是一般我们不会直接去用它，而是使用mootools基于这个create方法派生出的其他方法。
方法： create
参数选项列表：
bind - 创建的闭包函数中this所指向的对象。默认指向当前函数。
event -  默认为false；
             如果为true,则创建的闭包函数将会作为一个事件监听器，传入的第一个参数是一个event对象；
             如果为一个类名，则会创建这个类的一个实例,并把event对象传入该类
arguments - 一个以数组形式传入创建的闭包函数的参数列表。如果同时指定了上面的event选项和本arguments选项,则事件对象event对象将作为参数列表中的第一个，而其他参数排在其后。
delay - 延迟执行的毫秒数(setTimeout的功能)。默认不延迟执行。如果指定了，则调用该创建的闭包函数时将按指定的毫秒数延迟执行（调用返回一个时间处理句柄）。
periodical - 间隔执行的毫秒数(setInterval的共能)。默认不进行间隔执行。如果指定了，则调用该创建的闭包函数后，会每间隔指定的毫秒数后触发执行（调用返回一个时间处理句柄）。
attempt - 如果指定为true,则再创建闭包的过程中，将会使用捕捉异常，如果无异常抛出，则返回正常的闭包函数；如果发生异常，则返回捕捉到的异常对象。默认为false。

function myClass(){
 alert('X:' + event.clientX);
}
function a(){
 alert('Base...');
}
var b = a.create({'event':myClass});
//按下按钮后，将先alert出如"X:33"，接着alert
 
function a(p1,p2){
 alert(this.getTime());
 alert(p1+'||'+p2);
}
var b = a.create({'bind':new Date(),'arguments':[100,200]});
b();
//alert出如"1233445"
//alert出"100||200"
 
方法：pass
参数列表：
args - 数组形式传入的参数
bind - 可选。this指向的对象
功能：create的功能简化版。实现的即是create中选项'arguments'的功能。
function a(p1,p2){
 alert(p1+'||'+p2);
}
var b = a.pass([100,200]);
b();
 
方法：attempt
参数列表：
args - 数组形式传入的参数
bind - 可选。this指向的对象
功能：create的功能简化版,并且创建闭包函数后执行。实现的即是create中选项'attempt'为true时的功能。
myFunc.attempt([100,200]);
 
方法：bind
参数列表：
bind - 可选。this指向的对象
args - 可选。数组形式传入的参数
功能：create的功能简化版。实现的即是create中选项'bind'的功能。
function myFunc() {
  this.setStyle('color', 'red');
}
var myBoundFunction = myFunction.bind(myElement);
myBoundFunction(); 
 
方法：bindAsEventListener
参数列表：
bind - 可选。this指向的对象
args - 可选。数组形式传入的参数
功能：create的功能简化版。实现的即是create中选项'bind'以及'event'为true时的功能。

function a(){
 this.innerHTML = 'Fired at ('+event.clientX + ',' + event.clientY +')';
}
$('mybtn').onclick = a.bindAsEventListener($('myDiv'));
 
方法：delay
参数列表：
ms - 延迟执行的毫秒数
bind - 可选。this指向的对象
args - 可选。数组形式传入的参数
功能：create的功能简化版,并且创建闭包函数后执行。实现的即是create中选'delay'的功能。
function a(){
 alert('Hello...');
}
a.delay(1000);
 
方法：periodical
参数列表：
ms - 间隔执行的毫秒数
bind - 可选。this指向的对象
args - 可选。数组形式传入的参数
功能：create的功能简化版,并且创建闭包函数后执行。实现的即是create中选'periodical'的功能。
function a(){
 alert('Hello...');
}
a.periodical(2000);
Function部分就这些啦，不过也足够强大了！
  mootools【五】 - Element篇 
Ajax开发中，做的最多的就是对DOM的操作， 增删节点，设置样式等等等等，如果按照常规的javascript开发的话，工作量大的足以搞的人头晕目眩。所以基本上每个javascript框架都会在DOM操作上花比较大的功夫，对我们使用频率最频繁的功能操作进行封装(其中包括修正各个浏览器之间的方法差异问题)，让我们的开发事半功倍。
mootools也提供了一套非常出色的解决方案，并且更OO。
首先，之前，通常我们创建DOM节点，都使用document.createElement()方法，而我们看mootools式的创建方法：
 var myInput = new Element('input');
非常的优雅啊。
 
方法：  $
美元，又见美元！
$基本上成了javascript框架中的标志性建筑了，短小精悍的语法使我们的代码看起来舒服不少，也使我们的js文件瘦了下身。
时下，各大javascript框架中都会提供$这个方法，基本上它都有按照id来获取DOM元素的功能，但各个框架在具体诠释它的时候各有不同的手法，功能的强弱上也不一样。比如prototype.js中的$可以根据给出的一个或多个id来获取这些DOM元素，而jQuery里的$更是非常强，可以按照CSS选择器的语法来获取DOM元素(其实mootools和prototype也是可以的，只不过是$$这个方法)。
这是mootools中的$()的最常用用法，它返回id为my_div的元素，并且这个元素被加上了所有mootools所进行的扩展。
 var mydiv = $('my_div');
如果你使用document.getElmentById来获取的元素，则此时这个元素将没有包含mootools的任何扩展，你可以把这个元素对象作为参数调用$方法，之后返回的元素将被加上mootools的扩展。
var mydiv_noextend = document.getElementById('my_div');
 
var mydiv_extended = $(mydiv_noextend);
 
方法： $$
功能：通过CSS选择器语法来获取DOM元素(需要mootools的Dom.js模块的支持)
$$('a');                       //获取页面上所有超链接标签对象
$$('a','b');                  //获取页面上所有超链接标签和粗体标签
$$('#my_div');          //获取id为my_div的元素
$$('#my_div a.myClass');      //获取id为my_div的元素子元素，并且这些自元素是的所有class="myClass"的标签
 
=================================Element扩展方法=====================================
方法： inject
作用：可以用来把当前元素插入到指定元素之前(before)，之中(inside)，之后(after)。
  
aaa

bbb

ccc

$('myDiv3').inject($('myDiv1'),'before');      //把myDiv3插入到myDiv1之前
 
方法： injectBefore
作用：可以用来把当前元素插入到指定元素之前 (即相当于参数为'before'的inject方法)
aaa

bbb