建站
咨詢
售后
建站咨詢
新聞中心
jQuery非常容易學(xué)習(xí)，有很杰出的特性，但是當(dāng)你從插件庫里去找更多的功能時，發(fā)現(xiàn)官方的庫里面根本就沒有。插件特性非常好，但是也有很不好的地方……很快你就會被無數(shù)個可用的插件弄得暈頭轉(zhuǎn)向，你需要花很多時間去確定哪些插件才和核心庫的質(zhì)量相匹配。
創(chuàng)新互聯(lián)主營義馬網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app開發(fā),義馬h5小程序制作搭建,義馬網(wǎng)站營銷推廣歡迎義馬等地區(qū)企業(yè)咨詢
因此，我必須首先很輕而易舉地證明：jQuery是***以及有更好表現(xiàn)的框架。他們是***的。John Resig（jQuery的作者）在三天里曾七次說：“Microsoft演示了怎樣把jQuery包含進(jìn)了它的SDK，出席會議的人也非常肯定地談?wù)摿诉@個框架。這些都清楚地讓我看到：jQuery正在做一些正確的事情。”
我去參加這個會議的一部分任務(wù)就是盡可能多地參與jQuery的交流和學(xué)習(xí)（我曾經(jīng)也很深入地學(xué)習(xí)過，但是我希望從開發(fā)團(tuán)隊和John那里學(xué)習(xí)到更多東西），同時也可以看一下我是否能夠找到這個框架受歡迎的原因。
這里需要一些解釋。MooTools團(tuán)隊從來沒有真正關(guān)注過這個框架有多受歡迎。我們只是對寫這個框架感興趣，為我們自己使用和它本身目的去寫，但是我們真的沒有花很多精力去讓其他人去使用這個框架。我們從不認(rèn)為其它框架是我們的競爭對手——因為我曾經(jīng)在很多場合都聽說過這樣的話，我們在和瀏覽器進(jìn)行斗爭，而不是相互斗爭。在我的這篇文章中，我給你們的建議是：多嘗試一些選 擇，然后選擇適合你的需求和你的風(fēng)格的框架。你真的不能做一個壞的選擇（因此，請停止?fàn)幊常。?。jQuery、Prototype、YUI、Dojo、 MooTools——我們都只是用不同的方法在做同樣的事。關(guān)于這一點寫得有點多，因為我最近一直在思考這個。
Bill Scott在繼續(xù)教我一些事情
當(dāng)這個事情還在Boston的時候，我偶然遇見了Bill Scott。Bill是Yahoo的YUI團(tuán)隊的***，是一個很好的演講者（盡管他在Boston的時候只做了一個關(guān)于他當(dāng)前工作的五分鐘的“閃電演 講”）。一段時間以前，他幫助開始了Rico框架的開發(fā)，隨后轉(zhuǎn)到了YUI。接著在一年前，他離開了Yahoo，去了Netflix，帶領(lǐng)團(tuán)隊做了許多工 作——不只是JavaScript（更多地關(guān)注了他們的新API和用戶體驗）。Netflix也在使用jQuery，因此我有機會和他坐下來談?wù)撨@些事 情。
在這里我要小心一些，并提醒正在閱讀這篇文章的各位讀者，我沒有任何關(guān)于 jQuery的壞話要說，我也不想在這篇文章或者其他文章中挑起一場無謂的爭論。jQuery和MooTools（以及Prototype、Dojo、 YUI等等等等）都是不同的而且沒有相互競爭。它們用不同的方式解決問題，而我，就個人而言，碰巧喜歡Moot解決問題的方式以及它嘗試解決問題的方式。 由于我還在學(xué)習(xí)jQuery，因此很容易我可能就會寫一些不正確的jQuery語句，如果我有什么說得不正確的地方，還請大家諒解。
編程模式
在和Bill的談話中，我說了我的一些關(guān)于“編程模式”的思考。我所謂的“編程模式”是這樣的：當(dāng)我寫我的代碼的時候，我可以選擇做一個架構(gòu)師，或者一個代碼編寫者。我可以設(shè)計，我也可以實施。事實上，我必須都做，但是我必須選擇我更想做的一個，而且，在許 多情況下，不論是我還是其他人，都可能一個人去完成幾乎所有的工作——盡管不是100%。
我究竟在說些什么？讓我這樣跟你講：如果你寫了20行代碼，來描述一個頁面上的用戶交互，以便使頁面看起來很 漂亮或者很易用，那么它是不是值得再多寫5行或者10行代碼來使其可以被重復(fù)使用？如果你只是依據(jù)經(jīng)驗直接編程，那么你需要寫一遍又一遍。但是如果你按照 模式來寫，你要寫的代碼會越來越少。
假設(shè)有這樣一個用戶體 驗：當(dāng)喲哦難怪乎點擊“l(fā)og in”按鈕的時候，顯示一個登陸框。當(dāng)用戶點擊“l(fā)og in”的時候，這個登陸框就出現(xiàn)。用戶提交登陸表單，登陸框發(fā)出一個ajax請求并顯示一個提示信息。當(dāng)請求完成時，這個登陸框告訴用戶已經(jīng)登陸了并在過 一會兒后消失。
我可以用JavaScript來表現(xiàn)這些，就寫在當(dāng)前這個頁面上或 者在我的全站代碼里面（可能這個登陸框在每個頁面上都有，是吧？）。它可能是這樣一段代碼（我會在某種程度上省略一些代碼）——注意：我這里使用的是MooTools的語法，不過它看起來和現(xiàn)在的大多數(shù)框架都差不多，因為我們都相互借鑒好的點子：
- window.addEvent('domready', function(){
- $('loginLink').addEvent('click', function(e){
- e.stop(); //don't follow the link
- $('loginPopup').show();
- });
- //loginPopup contains loginForm
- $('loginForm').addEvent('submit', function(e){
- e.stop(); //don't submit the form
- $('loginForm').send({
- onComplete: function(result) {
- $('loginPopup').set('html', result); //show the result
- (function(){
- $('loginPopup').hide();
- }.delay(1000)); //wait a sec, then hide the popup
- }
- })
- });
- });
美麗的直接了當(dāng)，是吧？但是我們退后一步，然后問我們自己：這是什么模式呢？我們能再看到它的一部分嗎？當(dāng)然，一個彈出層包含一個form，然后提交、更新自己，然后做一些其它事情，而且可以再次出現(xiàn)。是吧？
這就是我所說的“編程模式”。在我以前的代碼中，我 可能像上面的那樣寫代碼。如果它是我的網(wǎng)站的一部分，我可能有一個名字空間（namespace）并且給它們一個叫做“showLogin”的方法，然后 在on domready事件中調(diào)用mySite.showLogin。或者，更可能是這樣子的，我的網(wǎng)站需要很多這樣的方法。showLogin、 logOut、makeToolTips、autoScroll、setupDraggers等等。然后我會寫一個叫做mySite.init的方法來調(diào) 用所有的這些方法。
但是在回頭看看我的老代碼，我可能有一個巨大的domready方法，里面包括了所有的這些布局和交互的指令，一個很大的啟動方法。
如果你從來沒有寫過這樣的代碼，你永遠(yuǎn)也不會知道維護(hù)這個代碼的樂 趣。它會花費大量的精力去理解在***件事情之后該是什么事情。再回頭看看上面的示例代碼，想像一下，如果我們遇到了類似的事情，但是有這個的3倍、5倍或 者10倍長，然后再想像一下一年以后我們再次碰到類似的事情。僅僅只是拆分這些行為就已經(jīng)非常令人可怕了。
現(xiàn)在，讓我們按照模式編程。一個彈出層，有一個form，并且自動更新。這就是我們要重復(fù)出現(xiàn)的模式。下面是一個MooTools類，實現(xiàn)了同樣的東西：
- var PopupForm = new Class({
- Implements: [Events, Options],
- options: {
- requestOptions: {/*the user can fill in additional ajax options*/},
- onComplete: $empty //do nothing on complete by default
- },
- initialize: function(link, form, popup, options) {
- this.form = $(form);
- this.link = $(link);
- this.popup = $(popup);
- this.setOptions(options);
- this.makeRequest();
- this.attach();
- },
- makeRequest: function(){
- thisthis.request = this.form.retrieve('send', this.options.requestOptions);
- this.request.addEvent('complete', function(response){
- popup.set('html', response);
- this.fireEvent('complete');
- }.bind(this));
- },
- attach: function(){
- this.link.addEvent('click', this.show.bind(this));
- this.form.addEvent('submit', function(e){
- e.stop();
- this.request.send();
- }.bind(this));
- },
- show: function(){
- this.popup.show();
- },
- hide: function() {
- this.popup.hide();
- }
- });
現(xiàn)在，不可否認(rèn)的是我的類已經(jīng)有兩倍長了，但是它還仍然沒有與我的登陸鏈接關(guān)聯(lián)起來。要使其生效，我還需要對它進(jìn)行初始化：
- window.addEvent('domready', function(){
- new PopupForm($('loginLink'), $('loginForm'), $('loginPopup'), {
- onComplete: function(){
- (function(){
- this.hide();
- }.delay(1000, this)); //wait a sec, then hide the popup
- }
- })
- });
#p#
有所取舍，但追求***利益
除了代碼變成了以前的兩倍長以外，我還需要其他的9行代碼去完成這個事情。15行代碼和42行代碼，看起來并不是個好的交易，但是我最近在我的所有代碼里面都是這樣寫的。通過變換到這種思考方式，我從寫很多很多代碼段中解放出來，也節(jié)約了很多我以前根本沒有考慮到的時間。
◆代碼現(xiàn)在更加清晰易讀了。我有一些很小的方法，它們只做一件事情，但是我知道它們在做什么以及為什么做。我的類的名字描述了它們要做的事情，而且它們也很小，也只做一件事情。如果我需要一個做兩件事情的類，我會寫兩個類和一個小的控制類來調(diào)用它們。
◆代碼可以重復(fù)使用——如果這個模式再度出現(xiàn)，我不需要再重復(fù)寫這些代碼。我曾經(jīng)被它們出現(xiàn)的頻率嚇倒。我從來沒有想過要重用一周以內(nèi)的代碼，但是我現(xiàn)在又開始重新使用他們了。
◆應(yīng)用程序在哪——我現(xiàn)在正在做的web頁面上，我的代碼一般都很少。我不給頁面單獨寫多少代碼——我所做的只是針對每個給定的頁面元素實例化一些類。這些小的“腳印”（頁面執(zhí)行時間？）意味這越少的代碼對頁面越好。
◆什么時候需要重構(gòu)——可能我現(xiàn)在使用的框架已經(jīng)有新的版本了，或者發(fā)現(xiàn)了一個新的瀏覽器bug，或者一個先的瀏覽器沖擊了市場（例如Chrome），或者 我在自己的代碼里面發(fā)現(xiàn)了一個bug（這是這幾個原因里面最常見的），我需要立即修正它們。如果我為每個頁面都寫了有代碼，那么我將需要一一修正。從另外 一個方面來說，如果我的頁面只是實例化了我的幾個類，我只需要修改我的類就行了。因為我控制著類的接口，所以我可以完全重寫我的類，而不需要接觸那些實例 化它們的代碼。
◆***，我徹底地改變了我的關(guān)于開發(fā)用戶體驗的思維方式。我更喜歡開發(fā)一個體驗，然后重用它，而不是從頭開始做一個新的。這可以創(chuàng)造一個連貫的體驗，對我而言，意味著更好的用戶體驗。
可擴(kuò)展性——因為我喜歡調(diào)整一些東西
這是這種編碼方式給我代理的***一個大好處，假設(shè)你現(xiàn)在寫代碼的方式能夠利用它的可擴(kuò)展性。 MooTools有一種基于類的層次結(jié)構(gòu)（靈感來源于Dean Edwards的杰出工作），不要被這個名字給欺騙了。盡管它叫做類，實際上就只是一個object工廠，只不過讓JavaScript里面的原型繼承模 型變得更容易跟簡單而已。
你當(dāng)然不需要MooTools來做這些。JavaScript可以讓你自己來實現(xiàn)。但是由于MooTools底層就是這樣做的，因此很難避免讓你去寫這樣的代碼。寫一個你自己的類真的很容易，擴(kuò)展一個類也很容易——即使你沒有寫過這個類。
繼續(xù)以我們上面提到的彈出表單為例。我們說我們需要一個彈出顯示效果。為了讓其變得有趣一點，我們假設(shè)已經(jīng)有這樣的代碼了，因此我們不想去改變它，但是在這個頁面中，我們想要這個彈出層有淡入淡出的效果，而不僅僅是出現(xiàn)。
MooTools允許你使用任何類（甚至你沒有寫過的類）并擴(kuò)展成為一個新類。你不需要復(fù)制整個類以便添加你的不同代碼——你只需要寫那些你需要添加或者改變的部分就行了。
- var PopupForm.Fx = new Class({
- Extends: PopupForm,
- show: function(){
- this.popup.setStyles({
- opacity: 0,
- display: 'none'
- }).tween('opacity', 1);
- },
- hide: function(){
- this.popup.tween('opacity', 0).chain(function(){
- this.popup.hide();
- }.bind(this));
- }
- });
現(xiàn)在，我 們有一個名字叫做“PopupForm.Fx”的新類了，這個類可以讓彈出層淡入淡出。我們完全沒有改變PopupForm類。另外，即使我們在后面發(fā)現(xiàn) 了PopupForm類的某個方法中有一個bug，我們可以在那個地方修正它，這將會修復(fù)這兩個類以及所有我們使用了它的地方。
當(dāng)我用這個方式寫代碼的時候，這意味著我在我工作的每一個頁面、網(wǎng)站和項目 中都添加了一些新的工具到我的工具箱，當(dāng)?shù)较乱粋€項目時我仍然可以使用。在過去的一兩年里，我已經(jīng)為MooTools發(fā)布了超過70個插件，而這還只是我 認(rèn)為其他人能夠用到的東西。表單驗證、數(shù)據(jù)提取以及其他。我還為我自己的項目寫了很多擴(kuò)展，盡管它們不是很通用，但是在我的動作中并沒有少重用它們。
揭開面紗看看
所有的這一切讓我回到了我真正要說的：我是怎樣看待MooTools以及它與其他框架有什么不一樣?？纯磈Query的表現(xiàn)（再次重復(fù)：jQuery僅僅只是不同——沒有優(yōu)劣之分），我認(rèn)為MooTools和jQuery***的不同在表現(xiàn)的解決方案上。
當(dāng)和Bill Scott談?wù)撍膱F(tuán)隊和他們對jQuery的使用，我詢問了他們對于按模式編程的所做的工作。Bill是相當(dāng)適合問這個問題的人選，因為他去年花了很長 時間做了一個關(guān)于用戶體驗?zāi)Ｊ胶蚘UI的演講（我強烈推薦這個）。他領(lǐng)導(dǎo)了整個YUI項目模式庫。他是一個一直致力于為重用而創(chuàng)建模式的人。我問了他關(guān)于 在jQuery中創(chuàng)建插件的機制，而不是擴(kuò)展那些插件，坦率地說，這個插件機制對于我來說有一點尷尬（例如，你為了調(diào)用一個插件的方法，你必須這樣 寫：jQuery(domId).pluginName(”methodName”, [arg1, arg2]);——我希望我說的是對的——這對于我來說實在是神秘莫測）
在 聽我談完關(guān)于MooTools里面的可重用性和可擴(kuò)展性模式之后，他做了一個很精妙的總結(jié)：他對JavaScript非常了解，可以利用 JavaScript本身內(nèi)置的一些機制來完成他自己的一些方法。換句話說，他用jQuery進(jìn)行Dom操作、實現(xiàn)特效以及用于一些其他插件，但是當(dāng)他寫 自己的代碼的時候，他有了自己的類系統(tǒng)（盡管我不確定他用了“類”這個詞——但是本質(zhì)上有一些工廠去創(chuàng)建這些可重用和可擴(kuò)展的object）。
JavaScript有它自己的重用方法
這個，坦率地講，是我沒有考慮到的。jQuery在模糊DOM方面做得非常非常的好，使得用戶不再那么頭疼。它使用起來非常簡單而且非常善于表現(xiàn)。作為一個寬泛的框架（即在這個框架中，用戶只是把JavaScript當(dāng)作一種面向?qū)ο笳Z言）的一部分來看，它是很明智的。
但是Bill隨后說的話讓我認(rèn)真 地思考了在Ajax體驗過程中的參與者。他是這樣說的：“我從來沒有認(rèn)真地認(rèn)為其他人不會這么做?！逼渌丝梢允褂胘Query（或者其他任何框架，甚至 只是“香草味”的JavaScript）而不利用JavaScript的任何本身特性（包括隱藏的特性）。
這里是三件真正觸動我的事情。這三件真正的大事，對我而言，只會讓我更加偏好MooTools。
#p#
每個人在某些事情上都是一只菜鳥
***件大 事就是：使用框架的許多人（可能不是全部、或者絕大多數(shù)甚至只有三分之一——誰知道呢）都不這樣認(rèn)為。MooTools的用戶，jQuery的用 戶，YUI的用戶，他們只是去寫代碼讓頁面去做他們想做的事情（要說清楚的是：直到今年年初，我用這種方式寫了許多代碼——但是現(xiàn)在我寫的每個東西救護(hù)都 是一個類）。這些人為他們能在瀏覽器里做的那些事情感到激動，為他們的網(wǎng)站有多么有趣、強大、流暢、可用等等任何事情而激動。當(dāng)他們需要重構(gòu)的時候，這將 會非常的痛苦，不過他們還是很高興——至少比沒有東西好。
我認(rèn)為現(xiàn)在可以安全地 說，在那些框架中，jQuery讓這中體驗變得非常容易切入。它是如此完整地模糊了瀏覽器，而在很多方面又是如此地像CSS，就像一劑入門毒藥。你做了一 點點，然后你就再也不能停止。如果jQuery沒有完成其他任何東西，只是把JavaScript介紹給那些人然后讓他們堅持使用，這就是個不小的成就。
但是我們最終還是要學(xué)習(xí)
第二件大事 對我來說變得很明顯，無論遲早，人們越來越熟練地用這種方式寫代碼，當(dāng)他們寫的時候，他們會想變得更有效率。他們可能不會選擇跟我現(xiàn)在一樣的道路——那些 框架的數(shù)目已經(jīng)說明那里有很多方式去給這只貓上色。但是他們將會度過這樣一個階段：“嗨，你看，我能做一個流暢的Ajax登陸框了！”然后他們會想著去開 始開發(fā)一些更加容易重用、容易維護(hù)和容易擴(kuò)展的代碼。在那個時候，他們將會重新閱讀“Crockford的書”，然后反問自己為什么他們不在那里做一些工作呢？
再說一遍，不管你在用什么框架，這都會發(fā)生。第1步：學(xué)習(xí)JavaScript基本語法。第2步：學(xué)習(xí)利用 框架做一些有趣的效果或者ajax應(yīng)用。第4步（譯者注：貌似是第3步，不過不必較真）到719步：犯一大堆很愚蠢的錯誤并學(xué)習(xí)一些東西。第720步：真正掌握J(rèn)avaScript然后很蔑視地回頭看看你以前的工作。
在框架中，要緊的是它里面的東西
這個，最終，把我?guī)蛄说谌笫?。這個事件讓我確定了我對MooTools的選擇。所有的框架都變得日益相似。即有一天他們最終會看起來像這些東西：
- fetch(element).verb(details).verb(details).verb(details)
唯一的真正區(qū)別只是他們的術(shù)語不一樣。一個框架可能使用$，另外一個可能做同樣的事情，例如Y.get或者jQuery(id)，未來的框架只是使用了同意 的不用詞匯而已。在邊緣，他們都做同樣的事情。這是因為我們都彼此看到了對方工作中好的模式然后加以吸收——再重申一遍，我們?nèi)吭诤屯粋€東西做斗爭 ——瀏覽器——為了同樣的目的。
但是在核心深處，他們是各不相同的。這些框架的開發(fā)者不會花大量的時間來寫一個讓登陸框變化的代碼。當(dāng)然，他們?yōu)楦髯缘捻椖客瓿蛇@樣的工作，這些框架本身的工作在內(nèi)部進(jìn)行。 遲早，任何人開始學(xué)習(xí)其中的一個框架，就會接觸到邊緣代碼，然后就會想去利用核心的代碼。他們會重新閱讀“Crockford的書”并想：“我在用很困難 的方式做這個——我不停地重復(fù)太多了，那個東西和我昨天寫的東西幾乎一樣，雖然不完全一樣。那里肯定有更好的方式?！毕馚ill Scott這樣的人已經(jīng)在做這些了，但是每個剛剛開始的人還深深地銘記著從屏幕上看到的那些絢麗的東西（當(dāng)然，他們應(yīng)該這樣）。
當(dāng)他們真的夠好并且已經(jīng)準(zhǔn)備好去實施下一步的時候，他們將會看看他們庫的內(nèi)核來進(jìn)行選擇。無論開始使用什么框架，在幾個月 之后，他們寫出了代碼，他們會期待那些框架專家的答案，專家們正在寫內(nèi)核。每個框架都有開發(fā)插件和對其進(jìn)行擴(kuò)展的機制，我承認(rèn)我只是在一定程度上熟悉其中 的一部分。我不能對他們給出任何評價除了MooTools，因此我將對那些東西約束我的言論。幾乎所有的MooTools的功能性的東西都是通過擴(kuò)展本地對象（數(shù)組、字符串等）或者類實現(xiàn)的。貫穿整個庫的主要（淺）繼承和重用都通過易讀和易用的方式得到了證明。正是因為如此，我自己的代碼也比以前要好得多了。
為什么MooTools有震撼力
現(xiàn)在，當(dāng)人們問我為什么我覺得MooTools是更好的選擇，我仍然會告訴他們：不是什么這個框架好于其它框架，所有的框架都是好的選擇，對于我個人而言， 選擇MooTools的原因僅僅只是因為我能最終用語言表現(xiàn)出來一些東西。所有的框架都用不同的方式達(dá)到了類似的目的，但是，至少對于我而言，MooTools再一次幫助我解決了我的設(shè)計和實現(xiàn)挑戰(zhàn)，這就是我足夠明確的理由。
原文作者：MooTools Team
原文地址： http://techmemo.org/2008/10/06/jquery-mootools-which-is-the-most-popular-and-well-represented-framework-and-what-really-makes-one-framework-different-from-another.html
【編輯推薦】
- Django創(chuàng)始人：從技術(shù)工藝上考量jQuery
- jQuery讓開發(fā)者戀戀不舍的秘密
- jQuery開發(fā)者：你真的需要一個插件嗎？
網(wǎng)站欄目：MooTools團(tuán)隊成員：我們?yōu)楹螐娪趈Query
分享URL：http://m.fisionsoft.com.cn/article/djjocho.html
