.為什么要搞JavaScript MVC了 ？ 有些人可能不理解， 我剛開始也不理解，但是有一些現(xiàn)實(shí)里的需求，讓我主動(dòng)去尋找一個(gè)這樣的MVC框架， 我的需求很簡(jiǎn)單，因?yàn)槲蚁胗幸粋€(gè)好的js代碼組織結(jié)構(gòu)， 我想讓自己的思路變的更加清晰。 我終于找到了－－Jamal , 一個(gè)輕量級(jí)的基于jQuery的JavaScript MVC框架。
Jamal的作者Timo在Jamal剛開始的版本發(fā)布的時(shí)候，做了一個(gè)圖，搞了一個(gè)什么dispatcher， 可笑的是，國(guó)內(nèi)的某些人竟然把這個(gè)圖轉(zhuǎn)來轉(zhuǎn)去的當(dāng)成是寶， 呵呵，我問了Timo本人，他是這么說的：Hey Alex,
?? ?this is a slide from a presentation at the very beginning of jamal.?? ?This is not wrong in general, but there is no dispatcher anymore. The?? ?configuration, what controller is called, is now handled within the?? ?body class.
?? ?A short explanation of this structure is:?? ?- Interactions of the user are reflected in . events. So?? ?bind events to the dom within the controller.?? ?- Data is handled in the models so all XHR should go there?? ?- The view modifies the dom
?? ?This is all convention, Jamal doesn't force you to do it like this...
Greetings,?Timo

Timo這段話已經(jīng)說的很清楚了，網(wǎng)上流傳的那張圖早就作廢了。 現(xiàn)在的Jamal 0.4.1支持jQuery1.3。就像Timo說的， 代碼是通過config方法和load方法來尋找controller和action。MVC簡(jiǎn)單來說是這么約定的：
?1. C(ontroller) - 因?yàn)楹陀脩艚换サ亩际?事件，所以應(yīng)該在controller里和dom綁定事件。?2. M(odel) - 在models里面是進(jìn)行data處理，所以會(huì)放一些ajax邏輯，以及對(duì)本地?cái)?shù)據(jù)庫的操作（Jamal沒有實(shí)現(xiàn)，但是因?yàn)轫?xiàng)目需求我會(huì)集成到里面）。?3. V(iew) - 而在view里當(dāng)然是對(duì)用戶dom的修改。

當(dāng)你下載了Jamal 0.4.1，里面會(huì)帶例子的。今天研究了Jamal的源碼，有一些心得：
代碼1505行：?? ?$(function(){?? ?$j = jamal = jamal();?? ?$j.start();?? ?});

這段代碼在頁面加載以后啟動(dòng)Jamal。 start方法里面會(huì)調(diào)用關(guān)鍵的load方法去根據(jù)頁面body的class屬性去識(shí)別哪個(gè)controller，哪個(gè)action，所以你的頁面body標(biāo)簽的class屬性必須這么寫：
class="jamal {controller:'Foos',action:'index',debug:true}"
一個(gè)頁面對(duì)應(yīng)一個(gè)controller，一個(gè)controller對(duì)應(yīng)一個(gè)action。 如果想像rails一樣，想寫多個(gè)action，那么可以這樣去模擬：
?? ?$j.c({Clients: {?? ? ? ? ?index: function () {?? ? ? ? ? ? ? ? ?this.new();?? ? ? ? ? ? ? ? ?// or?? ? ? ? ? ? ? ? $('.new').click(function(){?? ? ? ? ? ? ? ? $j.current.new();?? ? ? ? });?? ?},
?? ? ? ? ?new: function() {}?? ?}});


$j.c代表controller。 這樣，可以更細(xì)致的組織你的controller代碼了。如果想在Jamal里擴(kuò)展自己的方法，可以這樣：

?? ?jamal.fn.extend(jamal.fn.m.prototype, ?{?? ? ? ?createTable: function(option){?? ? ? ? ? ?return true；?? ? ? ? ? // 你可以在你的model里通過重載此方法實(shí)現(xiàn)你具體的方法。?? ? ? ?},?? ?});
最后看看我的代碼組織目錄：

轉(zhuǎn)載于:https://blog.51cto.com/blackanger/139829

總結(jié)

以上是生活随笔為你收集整理的JavaScript MVC之Jamal的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。