MooTools教程(告诉你为什么学Mootools)(4)
===========================================
五.关于 Array Enumerable Hash
===========================================
prototype 和 moo 都提供了集合迭代方法 (each)
这个网上已经有一篇不错的对比文章,我就不在这里重复了
http://blog.fackweb.cn/?p=50.
moo的 forEach/each方法: function(fn, bind){..}
那个bind 结合代码 和 上面那篇文章, 大家应该可以很好的看出来prototype和moo的不同与优劣.
prototype里面有 Enumerable 的概念,moo没有.
但是我个人一直觉得 Enumerable 比较鸡肋.
在实际开发中,很少使用.
Enumerable的功能完全可以 用普通json对象 或者是 Hash来实现.
moo的作者也许同样这么认为.所以 不再 设置一个 鸡肋的 Enumerable类.
但是请大家放心, Enumerable 能做的事情, 在moo里也能完成.
可以理解为
moo的 Array + Hash +{} 完全可以接替 prototype的 Array + Enumerable + Hash +{}
当然对于一些工具方法两者提供的都不太一样,不好比较,但是那些方法都是附属品.
我们完全可以自己来实现,所以不在这次的比较范畴之内.
===========================================
六. 关于 Element
===========================================
两者的 Element 从作用上看类似.都是一种对页面元素的包装,为页面元素添加了一些诸如 addEvent remove style之类的方法.
但是大家通过看代码可以发现 moo的实现明显更简洁 更OO.
同时还有一个关键的不同,prototype又提取出了一个Form对象,里面包含了很多表单相关的方法.
同时还衍生出了 serializeElements Method 等等很多类和方法,代码瞬间变得异常复杂和难以琢磨.
而moo中没有Form对象,在moo中,Form本身就是一个Element 他没什么特别的,这样的思想类似components模式
普通Element具备的方法 Form 都应该具备, Form具备的方法 Element也都应该包含.form 和 其他页面元素没什么不同.
form元素只是一个包含了 input select textarea等子元素,同时拥有action target等属性而已.
一个p 一个span 一个td... 同样可以包含input select textarea子元素,同样可以拥有.action target属性.
浏览器处理他们的方式可能不同,但是在moo面前,大家完全平等.
其实prototype里 form和普通页面元素几乎也是平等的,但是问题就是,既然是平等的,又何必硬生生的造出Form以及那么多的衍生物呢?
===========================================
七.Ajax
===========================================
Prototype
prototype的ajax实现主要是靠一个 Ajax类 来实现.(但是这个类形同虚设,大家更多的是和 Ajax.Request 类打交道.
先来看一个prototype下一个简单的ajax提交实例:
Java代码
- var myAjax = new Ajax.Request( url,{parameters: myData , onComplete: callBackFunction } );
var myAjax = new Ajax.Request( url,{parameters: myData , onComplete: callBackFunction } );
其中 myData 可以是字符 : "name=Vickey&gender=female";
也可以是对象 { name : Vickey, gender : female }
Mootools
moo首先在将ajax机制分层.提取出了一个基类:XHR.
目前XHR有两个子类, 一个是 Ajax ,另一个是Json.Remote.
在moo下一个简单的ajax提交实例:
Java代码
- var myAjax =new Ajax(url, {data : myData , onComplete: callBackFunction }).request();
var myAjax =new Ajax(url, {data : myData , onComplete: callBackFunction }).request();
大家可以看到request成为了Ajax对象的一个方法,这样的设计显然是更合理更自然 也更OO的.
而且关键的一点是,你可以提前创建好你需要的ajax对象.在需要发出请求时再发出请求.
Java代码
- var myAjax =new Ajax(...);
- ....
- myAjax.request();
var myAjax =new Ajax(...); ..... myAjax.request();
同时还有一个重要特性, request是支持参数的,这个参数就是你要提交的数据.
也就是说,你可以在new Ajax时不指定数据或者指定一个默认数据.
在提交的时候可以提交另一个data.如.
myAjax.request(yourData);
其中data可以是字符串,可以是对象, 也可以是一个页面元素.
要用ajax提交一个form 或者一个 p下的所有表单元素,只是改变一下 myData.
var myData= $("formID"); // var myData= $("pID");
然后就和普通的ajax提交完全一样了.
myAjax.request(myData);
当然还有更oo的方式 :
myData.send({onComplete: callBackFunction });
用后一种方式的时候要保证提交的元素有action属性,没有你就赋一个 myData.action=url.
prototype里如何实现这一功能呢??
Prototype
Form.request($("formID") ,{ onComplete: callBackFunction });
当然prototype里也可以类似moo的做法 , 只要让myData=$("formID").serialize(true) 就可以了.
但是这一个小小的不同,反映出了设计上的差距.
Mootools
moo的Json.Remote类,简单,但是很实用:
Java代码
- var jSonRemoteRequest = new Json.Remote( url , {onComplete:callBackFunction }).send({name: 'Vickey',gender: 'female' });
var jSonRemoteRequest = new Json.Remote( url , {onComplete:callBackFunction }).send({name: 'Vickey',gender: 'female' });
这个类和Ajax类的本质区别是,
他提交的是一个序列化后的 json字符串("{name: 'Vickey',gender: 'female' } "),而不是把 json对象转化成QueryString ("name=Vickey&gender=female");
===========================================
结束语
===========================================
写这篇文章不是要批评prototype,以我现在的水平还没那个资格.
只是和mootools对比后, prototype在设计上的不足立刻就显现了出来.
虽然prototype新版本变化很多,很多我上面提到的一些不足都改正了,而且也加入了很多以前不具备的新的特性.
但是prototype现在的发展停留在:"修补不足,增加功能"的阶段,而没有从设计上进行深层次的重构,所以我不认为他在mootools面前有足够的底气.
至于jquery我没有深入研究过,但是它的设计觉得完全是prototype风格的, 注意,我说的是设计风格,而不是代码风格.
代码上他可能写的更精妙,更有趣,但是设计上依然是prototype风格:薄弱的类机制,靠简单的extend支撑起整个系统.
JQuery在很多方面很出色,但是归根结底他和prototype走在一条路上,只是在有些方面他走的更快.
mootools并非完美无缺,但是至少现在他美的地方比prototype更多,缺的地方比prototype更少.
所以,我选择mootools. 你呢??
不要听评论,不要看介绍, 只要看看他们的源代码, 同时动手用他们写些东西, 你的答案自然会浮现出来.