jQuery与MooTools库的一些比对(1)(2)

三、MooTools的优势在于?

根据上面两项的对比，MooTools框架在API方面没有jQuery优秀，一些DOM相关操作性能也没有jQuery好，那我们还有什么理由选择MooTools框架呢?MooTools框架的优势在什么地方呢?

在讲述MooTools优势之前我想讲点题外话，有位MooTools团队成员曾说如如下让人值得思考的话：

The MooTools team (of which I am a part) has never really focused on how popular the framework is. We are interested in writing it for our own use and for its own sake, but we don't really spend much energy trying to convince other people to use it. We don't consider ourselves adversaries to other frameworks - as I've heard it put on numerous recent occassions, we're at war with the browsers, not each other. In my own posts on the topic, my suggestion to people is to try a couple of options and choose the framework that suits your needs and your styles. You really can't make a bad choice (so please stop arguing about it!). jQuery, Prototype. YUI, Dojo, MooTools - we're all doing the same things just using different methods.

MooTools团队(我也是其中之一)从来没有真正关注过这个框架有 多受欢迎。我们只是对写这个框架感兴趣，为我们自己使用和它本身目的去写，但是我们真的没有花很多精力去让其他人去使用这个框架。我们从不认为其它框架是 我们的竞争对手——因为我曾经在很多场合都听说过这样的话，我们在和浏览器进行斗争，而不是相互斗争。在我的这篇文章中，我给你们的建议是：多尝试一些选择，然后选择适合你的需求和你的风格的框架。你真的不能做一个坏的选择(因此，请停止争吵!)。jQuery、Prototype、YUI、Dojo、 MooTools——我们都只是用不同的方法在做同样的事。

当初我第一次听史仲冬说MooTools库的时候，心里有嘀咕：这玩意，基本上都没听过，也没有什么人使用，应该是个稀奇古怪，糟糕的框架吧。但是，当我逐渐了解这个JS框架后，越来越喜欢之，其喜欢程度已经超过jQuery，因为它比jQuery更适合当前我所做的项目——项目大，大数据量处理以及很多复杂交互。

jQuery的因为其出色的API，使得即使不怎么懂JavaScript的人也能写出一些自以为靠谱的代码。再加上jQuery的重心放在了DOM上，这正好讨了热衷于页面效果交互的一些designer和csser的欢心。如果要构建中小型动态Web站点，用jQuery没错。快速、简单、优雅、漂亮。如果我是一个设计者，我也会使用它的。

但是，如果是有着成百上千页面的大项目，有些大数据量交互与处理的项目，多人合作，多模块化的项目，jQuery往往就显得底气不足，往往需要各类插件补充。要知道，jQuery插件成百上千，但大多都是狗屎。如果没有牛人把控，项目最后也就变成了狗屎!

MooTools虽然也能用在中小项目上，但是，其潜力的发挥要在大型、需要编写大量JavaScript的应用的网站项目上。这就是MooTools的优势。当然，我说话都是讲证据的，下面我就挑几点说说为何大型网站项目更适合MooTools而不是jQuery。

◆ 更多的对象方法扩展

虽然说，MooTools框架直接在Array, Function对象上做方法扩展有可能会造成语后来JavaScript规范出现重复或冲突的情况，但是，不可否认的是，这些对象方法的扩展对我们的开发节约了很多的功夫。

例如字符串方法的扩展。在jQuery中，字符串相关操作的方法貌似就只有一个trim。

但是，在MooTools中，框架自带字符串扩展方法就有14个之多，例如字符串内容检测的contains方法，清除整个字符串中多余的空白字符串的clean方法，转义正则表达式敏感字符的escapeRegExp方法，或是取整toInt()以及rgb颜色和16进制颜色相关转化的字符串方法等等。在大数据量交互的时候，字符串相关处理是很多的，MooTools框架自带的这些字符串扩展方法不可不谓带来N多便捷。

不仅仅是字符串，MooTools对数值，函数以及数组对象都进行了扩展。尤其数组，除了其原生的方法外，MooTools还对其扩展了近20个方法。这使得偶们在处理数组的时候基本上所向披靡了。总之，MooTools框架在各类JavaScript类型对象上做了新方法的扩展，以便我们可以更轻松更简单地应付各类复杂应用和众多数据处理。这显然与jQuery重在DOM的设计理念不同了。

◆ 数据处理利器之Hash概念

Hash，俗称哈希，是jQuery中没有而MooTools中有且很赞的一个玩意。Hash是一个重新实现的Object({}), 被专门用于数据的存取，和原来的Object({})的区别是： 它不会在进行存值，取值或迭代的时候处理对象的prototype中的内容。在MooTools中，Hash对象和Array对象(json基本构成啦)联合使用，不是我吹，再TM庞杂的数据，都能轻松应付。这让我想起了我们小秘书餐厅详细页的选菜交互，如果没有Hash这个玩意，我可真不知道该如何下手;或句话说，如果不是使用的MooTools作为框架，而是jQuery;这里的复杂的交互实现估计就是一场梦了。

◆ 面向对象的设计思想

MooTools是一款面向对象的设计思想框架。讲求继承，模块化与重用性。虽然说其new Class({})的构造有些让人不好理解，使用也颇有些既定规则，但是，实际上，这玩意要是能“挺过去”，还真的很有用的。举个关于半透明遮罩层的例子吧。我们构建一个名叫Overlay的类，然后其相关的代码就如下：

var Overlay = new Class({  
    Implements: [Options, Events],  
    getOptions: function() {  
        return {  
            name:'',  
            duration: 200,  
            colour: '#000',  
            opacity: 0.35,  
            zIndex: 99,  
            container: document.body,  
            onClick: $empty  
        };  
    },  
    initialize: function(options) {  
        //......  
        return this.position();  
    },  
    position: function() {  
        //......  
    },  
    show: function() {  
        //......  
    },  
    hide: function(dispose) {  
        //......  
    },  
    dispose: function() {  
        //......  
    }  
}); 

于是，当我们需要半透明遮罩层的时候，直接：

var myOverlay = new Overlay(); 

Overlay类中的position, hide, show等方法都是外部可见的。我们可是使用类似：

myOverlay.hide() 

让遮罩层隐藏。当然，我们可以再定义一个新的类，这个类继承或使用Overlay类，例如我们很常用的弹框效果咯，等等。虽然，MooTools这种强制面向对象风格的设计有些淡化了JavaScript语言本身的一些优美特性。但是，当项目庞大，JavaScript代码量巨大的时候，这种面向对象的设计理念还是相当受用的。项目越大，偶们所节省的代码量就越多。

◆ Cookie的读写

MooTools框架自带Cookie读写的方法，支持指定域和路径。而jQuery框架中要想实现Cookie的读写，需要借助于专门的cookie插件，额外的插件，显然jQuery就折腾了。HTML5 localStorage本地存储实际应用这篇文章的IE浏览器Cookie的读写就是使用MooTools框架自带的Cookie方法。很简单，很好使用。

◆ swf文件的载人

MooTools框架自带Swiff类，可以实现页面上flash文件的载入，而不需要求助google的swfobject方法。

上面这个钟表flash的效果代码如下：

var obj = new Swiff('http://www.zhangxinxu.com/study/flash/as3_clock_2.swf', {  
    width: 300,  
    height: 300,  
    container: $("swfBox"),  
    params: {  
        wmode: 'opaque',  
        bgcolor: '#eeeeee' 
    }  
}); 

◆ 更全面的动画效果

MooTools框架的动画效果实际上要比jQuery的强些，但是，不足在于其使用的API要比jQuery逊色。

说MooTools框架动画要比jQuery强，其中之一就是MooTools动画内置了贝塞尔运动曲线关键字。如：'linear', 'quad:in', 'back:in', 'bounce:out', 'elastic:out','sine:in:out'等等(下图为Fx.Transitions方法之expo)，而jQuery实现类似缓动效果，还需要借助ease插件。

◆ form表单序列化提交

MooTools自身携带HTML表单控件元素数据序列化方法，例如：

$('myForm').toQueryString(); //返回 "email=bob@bob.com&zipCode=90210" 

表单元素自身携带了ajax提交方法，如下示例：

$('loginForm').addEvent('submit', function(e){  
    e.stop();  //不提交form  
    $('loginForm').send({  
     onComplete: function(result) {  
         $('loginPopup').set('html', result); //显示结果  
         (function(){  
             $('loginPopup').hide();  
         }.delay(1000)); //一秒钟后隐藏  
     }  
    });  
}); 

而jQuery框架要实现类似的功能，还需要专门的表单序列化插件。我靠，这东一个插件，西一个插件，而且插件质量良莠不齐，搞多了会死人的。

四、最后的对比总结

首先，毋庸置疑的是jQuery和MooTools都是非常优秀的轻量级的JavaScript框架。

jQuery以其出色的API，出色的插件机制，以及在DOM方面的关注使其大受欢迎。然而，在面对大型项目的时候，其在一些功能特性上的缺失往往需要借助插件。如果团队没有有牛人把关的话，插件的滥用，人人都插一手的代码会把项目代码质量逐渐变成狗屎的。一般而言，jQuery更适合与动态的中小站点。

MooTools插件虽然在API & DOM和上手容易程度上都上不及jQuery，但是，其API以及面向对象的设计思想似乎在实际的大项目中更有价值。

因此，如果我要折腾我的个人网站，应该会使用jQuery。但是，如果是公司的大的网站项目，我会坚定不移选择MooTools，因为更适合。

我JS水平尚浅，基本上都是些表象的对比，欢迎吐槽。

来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]