jQuery與MooTools庫(kù)的一些比對(duì)
我上大學(xué)那會(huì)兒從事的項(xiàng)目用的是jQuery，畢業(yè)后工作所從事的項(xiàng)目用的是MooTools。很幸運(yùn)短期內(nèi)有機(jī)會(huì)接觸兩款不同設(shè)計(jì)風(fēng)格的優(yōu)秀的JavaScript庫(kù)。今天就我自己的一些認(rèn)識(shí)比對(duì)下這兩個(gè)JS框架，更多的是希望大家能夠?qū)ooTools這個(gè)JS框架有更多的認(rèn)識(shí)。畢竟，大多數(shù)從事web前端的人對(duì)上手容易的jQuery更熟悉些。
51CTO推薦專題：jQuery從入門到精通
一、API設(shè)計(jì)
就API的設(shè)計(jì)上來(lái)講，無(wú)論是MooTools，或是其他類似YUI的JS框架都比jQuery略遜一籌。
API是什么?根據(jù)某些著作的回答，API是對(duì)所需知識(shí)的抽象，它將系統(tǒng)的復(fù)雜性隱藏起來(lái)。例如汽車的方向盤，電視機(jī)上的按鈕。一個(gè)API設(shè)計(jì)的好壞可以從下面幾個(gè)方面評(píng)估：可理解性、一致性、預(yù)見(jiàn)性、簡(jiǎn)單性、保護(hù)性。
◆ 可理解性
例如selector(選擇器)。隨便舉個(gè)選擇器的例子(jQuery)：
- $("#jQuery div")
選擇器的寫法是與CSS的選擇器是一脈相承的。因此對(duì)于很多寫頁(yè)面的人來(lái)講，可以很輕松地使用jQuery找到自己想要的那根蔥。jQuery后來(lái)的版本之所以把XPath干掉，或許就是因?yàn)槔斫庑陨系膯?wèn)題吧。當(dāng)然，MooTools也是支持CSS選擇器的，只不過(guò)，其不是使用一個(gè)美元符號(hào)$，而是兩個(gè)$$，貌似是學(xué)習(xí)prototype框架，返回的是數(shù)組。
- $$("#MooTools div")
如果MooTools只走到這一步，我覺(jué)得還好，貌似跟jQuery的可理解性打個(gè)小平手。只可惜，MooTools還有一個(gè)單個(gè)美元符號(hào)$的選擇器，其中參數(shù)只能是元素的id，例如：
- $("MooTools")
這玩意，選擇的貌似是有個(gè)MooTools元素?cái)U(kuò)展方法的對(duì)象。如果不存在，應(yīng)用元素方法的時(shí)候(eg: addClass)則會(huì)報(bào)錯(cuò)。
也就是說(shuō)MooTools選擇元素，根據(jù)用法的不同，有時(shí)候返回的可能就是數(shù)組，有時(shí)候又是元素對(duì)象。這難免讓對(duì)JS熟悉，對(duì)CSS較熟悉的人員有了理解和使用上的困難了。不過(guò)這不能怪MooTools，設(shè)計(jì)架構(gòu)上的不同導(dǎo)致MooTools有時(shí)候需要返回元素對(duì)象，而不是元素對(duì)象數(shù)組。
因此，從理解性上來(lái)說(shuō)，MooTools遜于jQuery了。
◆ 一致性
JS框架的一致性的主要體現(xiàn)之一就是鏈?zhǔn)秸{(diào)用，例如(jQuery)：
- $("#jQuery").css("color", "red").height(200);
MooTools也是支持鏈?zhǔn)秸{(diào)用的，例如(MooTools)：
- $$("#MooTools").setStyle("color", "red").setStyle("height", 200);
在鏈?zhǔn)秸{(diào)用上，jQuery和MooTools基本上都是很OK的。
但是，在其他方面的一致性上，MooTools似乎又落于下風(fēng)了。jQuery這個(gè)框架真的很神奇，一個(gè)$符號(hào)就可以從廣州走到北京，真可謂萬(wàn)能密匙啊。
首先選擇器，例如$("#jQuery")肯定是$符號(hào)，然后，其相關(guān)的其他些方法，例如插件機(jī)制之$.fn.extend(object)，或者是Ajax請(qǐng)求$.ajax([options])，又或是瀏覽器檢測(cè)，數(shù)組對(duì)象方法等等等等都是$符號(hào)橫行的。
但是，MooTools桑中$符號(hào)出現(xiàn)在選擇器，讓人難懂的$A, $E，以及一些公共方法命名上，其余時(shí)候都回家睡覺(jué)覺(jué)了。
繼承需要new Class()構(gòu)造，Ajax請(qǐng)求為new Request([options])，然后瀏覽器檢測(cè)又是以Browser開(kāi)頭。數(shù)組，字符串等方法又都是當(dāng)前對(duì)象本身打頭，如myString.trim()。毫無(wú)一致性可言，顯然，這個(gè)的學(xué)習(xí)成本和使用難度要比jQuery大多了。
◆ 預(yù)見(jiàn)性
好的API應(yīng)該考慮到用戶的無(wú)緒性選擇(selective cluelessness)以及預(yù)見(jiàn)未來(lái)可能發(fā)生的一些事情。
不知是John Resig(jQuery 之父)確實(shí)想的很遠(yuǎn)，還是因?yàn)樾疫\(yùn)，或是只因?yàn)镴ohn是個(gè)天才，jQuery的設(shè)計(jì)讓其似乎不會(huì)與未來(lái)發(fā)生沖突。
舉個(gè)老到啃不動(dòng)的例子，過(guò)濾字符串的前后空格。jQuery的做法是：
- $.trim(myString);
MooTools做法是：
- myString.trim();
乍一看，似乎MooTools框架的做法更符合我們的理解 → 字符串對(duì)象有個(gè)trim方法，返回過(guò)濾前后空格的字符串方法。However，隨著時(shí)間拖移，有些事情就開(kāi)始發(fā)生變數(shù)了。
在ECMAScript 5(ES5)中，字符串是內(nèi)置trim方法的。我們可以做個(gè)小小的測(cè)試，如下代碼：
- alert((" foo ").trim());
您可以狠狠地點(diǎn)擊這里：ES5 內(nèi)置trim方法測(cè)試
例如，在我的FireFox 6瀏覽器下，彈出的就是foo，如下截圖：
對(duì)于一些有歷史價(jià)值的瀏覽器，就不支持，例如IE7模式下：
同樣類似的就是基于Function擴(kuò)展的bind方法，MooTools中有，但是，ES5中也內(nèi)置了。只是，比較幸運(yùn)的是，無(wú)論是字符串trim方法，或是函數(shù)bind方法，雖然名稱沖突了，但是，所實(shí)現(xiàn)的功能確是一樣的，因此，也算不上沖突了。但是，萬(wàn)一哪天遇到個(gè)不幸，MooTools中的某個(gè)方法與ES5中的方法同名但不同功能，然后，只能老淚縱橫了!
再舉個(gè)預(yù)見(jiàn)性的例子，選擇器選擇對(duì)象以及DOM對(duì)象。jQuery對(duì)jQuery對(duì)象和原生dom對(duì)象進(jìn)行了分離，例如：
- $("input").bind("focus", function() {
- alert(this.value); // dom對(duì)象
- alert($(this).val()); // jQuery包裝器對(duì)象
- });
但是，在MooTools中，一些方法是在原生DOM上擴(kuò)展的，MooTools元素對(duì)象和原生dom是合體的，例如：
- $$("input").addEvent("focus", function() {
- alert(this.value); // dom對(duì)象
- alert(this.get("value")); // 擴(kuò)展后的dom對(duì)象
- });
“合體”的問(wèn)題在于隨著瀏覽器以及一些規(guī)范的發(fā)展，原生dom可能會(huì)支持其他的一些方法，這些方法有可能就和MooTools插件中DOM擴(kuò)展方法沖突。好在MooTools的方法命名屬于對(duì)稱命名，且語(yǔ)義明顯，這種設(shè)計(jì)可以有效避免與原生dom方法的沖突。但是，事情沒(méi)有這簡(jiǎn)單……下面你可以看到MooTools中DOM元素方法的設(shè)計(jì)的一些問(wèn)題(當(dāng)然，不可否認(rèn)，這種設(shè)計(jì)使用上相對(duì)靈活些)。
◆ 簡(jiǎn)單性
jQuery之所以讓開(kāi)發(fā)者戀戀不舍，原因之一就是其簡(jiǎn)單。jQuery的口號(hào)就是"write less, do more."
拿dom-style的API舉例，MooTools, YUI等框架采用的是傳統(tǒng)對(duì)稱命名的方式(prop為property屬性縮寫)：
- el.setStyle(prop, val);
- el.getStyle(prop);
- el.setStyles({ propA: valA, propB: valB });
- el.getStyles(propA, propB); // MooTools支持, 返回是個(gè)名-值對(duì)象
在jQuery里，一個(gè)CSS就把所有瓷器活都攬了：
- el.css(prop); // 表示 getStyle
- el.css(prop, val); // 表示 setStyle
- el.css({ propA: valA, propB: valB }); // 表示 setStyles
- el.css(prop, func); // func 是一個(gè)返回 val 值的函數(shù)
雖然參數(shù)類似，但是jQuery只要記一個(gè)名字，而MooTools卻要N個(gè)，且名字也比較長(zhǎng)(必須完整且長(zhǎng)，否則易出問(wèn)題)。這也是為什么jQuery更容易上手的原因。而且，jQuery更近一步，還支持func回調(diào)，且參數(shù)可以map, val可以是函數(shù)，暗藏多多surprise啊。
顯然，簡(jiǎn)單性這塊又是jQuery好一些。
這里，我還想說(shuō)點(diǎn)其他相關(guān)的東西。jQuery框架的短命名設(shè)計(jì)確實(shí)好，于是我就想對(duì)MooTools的元素方法進(jìn)行擴(kuò)展，使等同于jQuery的命名書寫方式，一是省些代碼，二是方便熟悉jQuery的新員工上手，拿還是上面dom-style的例子，MooTools如下擴(kuò)展處理：
- Element.implement({
- //將mootools默認(rèn)的setStyle以及setStyles方法轉(zhuǎn)化為與jQuery類似的css()形式
- css: function(key, value) {
- if ($type(key) == 'object') {
- for (var p in key) this.css(p, key[p]);
- return this;
- }
- if(!$chk(value)){
- return this.getStyle(key);
- }
- this.setStyle(key, value);
- return this;
- }
- });
于是，MooTools也支持CSS方法，例如可以直接$("mootools").css({ border: "1px solid #ddd" });。恩，看上去不錯(cuò)，確實(shí)，上面的擴(kuò)展在目前各個(gè)瀏覽器中是沒(méi)有任何問(wèn)題的。于是，初嘗到了甜頭，我們就想模擬其他jQuery包裝器方法的擴(kuò)展，例如width/height方法，如下(width舉例)：
- Element.implement({
- width: function (val) {
- if ($chk(val)) {
- return this.setStyle("width", val);
- } else {
- return this.getWidth();
- }
- }
- });
看上去不錯(cuò)，不是嗎?但是，人生不如意事八九，上面MooTools框架對(duì)dom進(jìn)行的width方法擴(kuò)展是有問(wèn)題的。我們都知道，<img>元素是有width屬性的。正如上面提到的，MooTools框架的元素方法是在DOM上面直接“合體”擴(kuò)展的。于是乎，對(duì)于圖片而言，使用上面擴(kuò)展的width方法是會(huì)嗝屁的——原生屬性與擴(kuò)展方法沖突。
- alert($("image").width()); //報(bào)錯(cuò)，顯示$("image").width不是function
由此又進(jìn)一步證實(shí)了jQuery在API設(shè)計(jì)上更能避免一些當(dāng)下或未來(lái)潛在的沖突，更具遠(yuǎn)見(jiàn)性。
◆ 保護(hù)性
jQuery有個(gè)多庫(kù)共存機(jī)制，可以有效地保護(hù)其他框架都在爭(zhēng)奪的$符號(hào)，有效避免了一些兼容性的問(wèn)題。
- jQuery.noConflict();
- (function($) {
- $(function() {
- // 使用 $ 作為 jQuery 別名的代碼
- });
- })(jQuery);
- // 其他用 $ 作為別名的庫(kù)的代碼
而MooTools中似乎并無(wú)這樣的機(jī)制。
總結(jié)：就API設(shè)計(jì)這點(diǎn)來(lái)講，jQuery幾乎從各個(gè)方面都強(qiáng)于MooTools，這也是jQuery大行其道的主要原因。
二、性能
◆ 選擇器性能
MooTools框架官方頁(yè)面提供了選擇器性能測(cè)試頁(yè)面：speed/validity selectors test for frameworks
點(diǎn)擊右上角的"start tests"按鈕，一段時(shí)間后就可以看到各個(gè)框架下各個(gè)選擇器測(cè)試結(jié)果了。下表為我聯(lián)系測(cè)試三次后的結(jié)果記錄，可以看到，jQuery選擇器的總體性能略比prototype低，比MooTools要強(qiáng)。但是，在我們實(shí)際些頁(yè)面做交互的時(shí)候，其中選擇器的差異基本上可以忽略不記(YUI在:nth-child選擇器上的糟糕表現(xiàn)肯定要提防的)。
◆ dom操作性能
本來(lái)想從網(wǎng)上找一下MooTools和jQuery框架在dom操作這塊的性能對(duì)比數(shù)據(jù)，結(jié)果發(fā)現(xiàn)，壓根就沒(méi)有，連個(gè)沾邊的都沒(méi)有。在這艱難困苦的時(shí)候，想起了偉大領(lǐng)袖毛主席的一句話：“自力更生，艱苦創(chuàng)業(yè)”。心中的小宇宙頓時(shí)爆發(fā)了，快刀亂麻，一番折騰后弄出了自己想要的測(cè)試頁(yè)面。
您可以狠狠地點(diǎn)擊這里：MooTools與jQuery一些dom操作性能對(duì)比
下面就是測(cè)試結(jié)果哈：
可以看到，除了setProperty/attr和setProperties/attrMulti方法MooTools框架性能是略微占優(yōu)外，其余一些dom相關(guān)操作都完敗jQuery。
小小總結(jié)：就性能這塊。MooTools框架無(wú)論是選擇器或是其他一些方法性能都遜于jQuery。
#p#
三、MooTools的優(yōu)勢(shì)在于?
根據(jù)上面兩項(xiàng)的對(duì)比，MooTools框架在API方面沒(méi)有jQuery優(yōu)秀，一些DOM相關(guān)操作性能也沒(méi)有jQuery好，那我們還有什么理由選擇MooTools框架呢?MooTools框架的優(yōu)勢(shì)在什么地方呢?
在講述MooTools優(yōu)勢(shì)之前我想講點(diǎn)題外話，有位MooTools團(tuán)隊(duì)成員曾說(shuō)如如下讓人值得思考的話：
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團(tuán)隊(duì)(我也是其中之一)從來(lái)沒(méi)有真正關(guān)注過(guò)這個(gè)框架有 多受歡迎。我們只是對(duì)寫這個(gè)框架感興趣，為我們自己使用和它本身目的去寫，但是我們真的沒(méi)有花很多精力去讓其他人去使用這個(gè)框架。我們從不認(rèn)為其它框架是 我們的競(jìng)爭(zhēng)對(duì)手——因?yàn)槲以?jīng)在很多場(chǎng)合都聽(tīng)說(shuō)過(guò)這樣的話，我們?cè)诤蜑g覽器進(jìn)行斗爭(zhēng)，而不是相互斗爭(zhēng)。在我的這篇文章中，我給你們的建議是：多嘗試一些選擇，然后選擇適合你的需求和你的風(fēng)格的框架。你真的不能做一個(gè)壞的選擇(因此，請(qǐng)停止?fàn)幊?)。jQuery、Prototype、YUI、Dojo、 MooTools——我們都只是用不同的方法在做同樣的事。
當(dāng)初我第一次聽(tīng)史仲冬說(shuō)MooTools庫(kù)的時(shí)候，心里有嘀咕：這玩意，基本上都沒(méi)聽(tīng)過(guò)，也沒(méi)有什么人使用，應(yīng)該是個(gè)稀奇古怪，糟糕的框架吧。但是，當(dāng)我逐漸了解這個(gè)JS框架后，越來(lái)越喜歡之，其喜歡程度已經(jīng)超過(guò)jQuery，因?yàn)樗萰Query更適合當(dāng)前我所做的項(xiàng)目——項(xiàng)目大，大數(shù)據(jù)量處理以及很多復(fù)雜交互。
jQuery的因?yàn)槠涑錾腁PI，使得即使不怎么懂JavaScript的人也能寫出一些自以為靠譜的代碼。再加上jQuery的重心放在了DOM上，這正好討了熱衷于頁(yè)面效果交互的一些designer和csser的歡心。如果要構(gòu)建中小型動(dòng)態(tài)Web站點(diǎn)，用jQuery沒(méi)錯(cuò)?？焖佟⒑?jiǎn)單、優(yōu)雅、漂亮。如果我是一個(gè)設(shè)計(jì)者，我也會(huì)使用它的。
但是，如果是有著成百上千頁(yè)面的大項(xiàng)目，有些大數(shù)據(jù)量交互與處理的項(xiàng)目，多人合作，多模塊化的項(xiàng)目，jQuery往往就顯得底氣不足，往往需要各類插件補(bǔ)充。要知道，jQuery插件成百上千，但大多都是狗屎。如果沒(méi)有牛人把控，項(xiàng)目最后也就變成了狗屎!
MooTools雖然也能用在中小項(xiàng)目上，但是，其潛力的發(fā)揮要在大型、需要編寫大量JavaScript的應(yīng)用的網(wǎng)站項(xiàng)目上。這就是MooTools的優(yōu)勢(shì)。當(dāng)然，我說(shuō)話都是講證據(jù)的，下面我就挑幾點(diǎn)說(shuō)說(shuō)為何大型網(wǎng)站項(xiàng)目更適合MooTools而不是jQuery。
◆ 更多的對(duì)象方法擴(kuò)展
雖然說(shuō)，MooTools框架直接在Array, Function對(duì)象上做方法擴(kuò)展有可能會(huì)造成語(yǔ)后來(lái)JavaScript規(guī)范出現(xiàn)重復(fù)或沖突的情況，但是，不可否認(rèn)的是，這些對(duì)象方法的擴(kuò)展對(duì)我們的開(kāi)發(fā)節(jié)約了很多的功夫。
例如字符串方法的擴(kuò)展。在jQuery中，字符串相關(guān)操作的方法貌似就只有一個(gè)trim。
但是，在MooTools中，框架自帶字符串?dāng)U展方法就有14個(gè)之多，例如字符串內(nèi)容檢測(cè)的contains方法，清除整個(gè)字符串中多余的空白字符串的clean方法，轉(zhuǎn)義正則表達(dá)式敏感字符的escapeRegExp方法，或是取整toInt()以及rgb顏色和16進(jìn)制顏色相關(guān)轉(zhuǎn)化的字符串方法等等。在大數(shù)據(jù)量交互的時(shí)候，字符串相關(guān)處理是很多的，MooTools框架自帶的這些字符串?dāng)U展方法不可不謂帶來(lái)N多便捷。
不僅僅是字符串，MooTools對(duì)數(shù)值，函數(shù)以及數(shù)組對(duì)象都進(jìn)行了擴(kuò)展。尤其數(shù)組，除了其原生的方法外，MooTools還對(duì)其擴(kuò)展了近20個(gè)方法。這使得偶們?cè)谔幚頂?shù)組的時(shí)候基本上所向披靡了?？傊?，MooTools框架在各類JavaScript類型對(duì)象上做了新方法的擴(kuò)展，以便我們可以更輕松更簡(jiǎn)單地應(yīng)付各類復(fù)雜應(yīng)用和眾多數(shù)據(jù)處理。這顯然與jQuery重在DOM的設(shè)計(jì)理念不同了。
◆ 數(shù)據(jù)處理利器之Hash概念
Hash，俗稱哈希，是jQuery中沒(méi)有而MooTools中有且很贊的一個(gè)玩意。Hash是一個(gè)重新實(shí)現(xiàn)的Object({}), 被專門用于數(shù)據(jù)的存取，和原來(lái)的Object({})的區(qū)別是： 它不會(huì)在進(jìn)行存值，取值或迭代的時(shí)候處理對(duì)象的prototype中的內(nèi)容。在MooTools中，Hash對(duì)象和Array對(duì)象(json基本構(gòu)成啦)聯(lián)合使用，不是我吹，再TM龐雜的數(shù)據(jù)，都能輕松應(yīng)付。這讓我想起了我們小秘書餐廳詳細(xì)頁(yè)的選菜交互，如果沒(méi)有Hash這個(gè)玩意，我可真不知道該如何下手;或句話說(shuō)，如果不是使用的MooTools作為框架，而是jQuery;這里的復(fù)雜的交互實(shí)現(xiàn)估計(jì)就是一場(chǎng)夢(mèng)了。
◆ 面向?qū)ο蟮脑O(shè)計(jì)思想
MooTools是一款面向?qū)ο蟮脑O(shè)計(jì)思想框架。講求繼承，模塊化與重用性。雖然說(shuō)其new Class({})的構(gòu)造有些讓人不好理解，使用也頗有些既定規(guī)則，但是，實(shí)際上，這玩意要是能“挺過(guò)去”，還真的很有用的。舉個(gè)關(guān)于半透明遮罩層的例子吧。我們構(gòu)建一個(gè)名叫Overlay的類，然后其相關(guān)的代碼就如下：
- 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() {
- //......
- }
- });
于是，當(dāng)我們需要半透明遮罩層的時(shí)候，直接：
- var myOverlay = new Overlay();
Overlay類中的position, hide, show等方法都是外部可見(jiàn)的。我們可是使用類似：
- myOverlay.hide()
讓遮罩層隱藏。當(dāng)然，我們可以再定義一個(gè)新的類，這個(gè)類繼承或使用Overlay類，例如我們很常用的彈框效果咯，等等。雖然，MooTools這種強(qiáng)制面向?qū)ο箫L(fēng)格的設(shè)計(jì)有些淡化了JavaScript語(yǔ)言本身的一些優(yōu)美特性。但是，當(dāng)項(xiàng)目龐大，JavaScript代碼量巨大的時(shí)候，這種面向?qū)ο蟮脑O(shè)計(jì)理念還是相當(dāng)受用的。項(xiàng)目越大，偶們所節(jié)省的代碼量就越多。
◆ Cookie的讀寫
MooTools框架自帶Cookie讀寫的方法，支持指定域和路徑。而jQuery框架中要想實(shí)現(xiàn)Cookie的讀寫，需要借助于專門的cookie插件，額外的插件，顯然jQuery就折騰了。HTML5 localStorage本地存儲(chǔ)實(shí)際應(yīng)用這篇文章的IE瀏覽器Cookie的讀寫就是使用MooTools框架自帶的Cookie方法。很簡(jiǎn)單，很好使用。
◆ swf文件的載人
MooTools框架自帶Swiff類，可以實(shí)現(xiàn)頁(yè)面上flash文件的載入，而不需要求助google的swfobject方法。
上面這個(gè)鐘表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'
- }
- });
◆ 更全面的動(dòng)畫效果
MooTools框架的動(dòng)畫效果實(shí)際上要比jQuery的強(qiáng)些，但是，不足在于其使用的API要比jQuery遜色。
說(shuō)MooTools框架動(dòng)畫要比jQuery強(qiáng)，其中之一就是MooTools動(dòng)畫內(nèi)置了貝塞爾運(yùn)動(dòng)曲線關(guān)鍵字。如：'linear', 'quad:in', 'back:in', 'bounce:out', 'elastic:out','sine:in:out'等等(下圖為Fx.Transitions方法之expo)，而jQuery實(shí)現(xiàn)類似緩動(dòng)效果，還需要借助ease插件。
◆ form表單序列化提交
MooTools自身攜帶HTML表單控件元素?cái)?shù)據(jù)序列化方法，例如：
- $('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); //顯示結(jié)果
- (function(){
- $('loginPopup').hide();
- }.delay(1000)); //一秒鐘后隱藏
- }
- });
- });
而jQuery框架要實(shí)現(xiàn)類似的功能，還需要專門的表單序列化插件。我靠，這東一個(gè)插件，西一個(gè)插件，而且插件質(zhì)量良莠不齊，搞多了會(huì)死人的。
四、最后的對(duì)比總結(jié)
首先，毋庸置疑的是jQuery和MooTools都是非常優(yōu)秀的輕量級(jí)的JavaScript框架。
jQuery以其出色的API，出色的插件機(jī)制，以及在DOM方面的關(guān)注使其大受歡迎。然而，在面對(duì)大型項(xiàng)目的時(shí)候，其在一些功能特性上的缺失往往需要借助插件。如果團(tuán)隊(duì)沒(méi)有有牛人把關(guān)的話，插件的濫用，人人都插一手的代碼會(huì)把項(xiàng)目代碼質(zhì)量逐漸變成狗屎的。一般而言，jQuery更適合與動(dòng)態(tài)的中小站點(diǎn)。
MooTools插件雖然在API & DOM和上手容易程度上都上不及jQuery，但是，其API以及面向?qū)ο蟮脑O(shè)計(jì)思想似乎在實(shí)際的大項(xiàng)目中更有價(jià)值。
因此，如果我要折騰我的個(gè)人網(wǎng)站，應(yīng)該會(huì)使用jQuery。但是，如果是公司的大的網(wǎng)站項(xiàng)目，我會(huì)堅(jiān)定不移選擇MooTools，因?yàn)楦m合。
我JS水平尚淺，基本上都是些表象的對(duì)比，歡迎吐槽。
來(lái)自張?chǎng)涡?鑫空間-鑫生活[http://www.zhangxinxu.com]
【編輯推薦】
