Javascript MVC ——Controller

 

原文：http://javascriptmvc.com/docs.html#&who=jQuery.Controller

翻譯: 劉貴學(liuguixue@gmail.com)

 

 

控制器是使用代理將事件處理組織起來。如果您的應用中有事件發生（使用者點擊或模型執行個體更新）應當由控制器處理並響應此事件。

控制器可使您的代碼更明確，可複用性與架構性更強，這可自動與底層代碼相隔離，要瞭解更多關於控制器理論及其相關特性，請關注Jupiter的部落格。

基礎樣本

替換前：

$(function(){<br /> $('#tabs').click(someCallbackFunction1)<br /> $('#tabs .tab').click(someCallbackFunction2)<br /> $('#tabs .delete click').click(someCallbackFunction3)<br />}); 

替換後：

$.Controller('Tabs',{<br /> click: function() {...},<br /> '.tab click' : function() {...},<br /> '.delete click' : function() {...}<br />})<br />$('#tabs').tabs(); 

Tabs執行個體使用Controller

控制器（Controller）可以幫您組織並構建jQuery外掛程式。它可用於構建一些簡單的微件，例如slider，也可將多個微件組成一些更大的。要理解如何使用控制器（Controller），您還需要瞭解一般的jQuery微件生命週期，以及如何映射到控制器的功能。

建立一個控制器類

$.Controller("MyWidget",<br />{<br /> defaults : {<br /> message : "Remove Me"<br /> }<br />},<br />{<br /> init : function(rawEl, rawOptions){<br /> this.element.append(<br /> "<div>"+this.options.message+"</div>"<br /> );<br /> },<br /> "div click" : function(div, ev){<br /> div.remove();<br /> }<br />}) 

這將建立一個叫做$.fn.my_widget的 jQuery協助工具功能，可用於在html元素上建立一個新的控制器（Controller）執行個體。

在html元素上建立一個控制器執行個體

$('.thing').my_widget(options) // 調用new MyWidget(el, options)

它在每個 '.thing' 元素上調用了MyWidget(el, options)。當建立一個（類的）新執行個體時，將調用類的原型方法 setup與init，其中Controller的setup函數：

•  設定this.element，並添加控制器的名稱與元素的類名；
•  將預設的對象參數設定給 this.options；
•  在控制器的$.data中保留一個引用；
•  綁定所有的事件處理函數

控制器響應事件

通常，Controller的事件處理是自動綁定的，Controller可有多種方法監聽事件。

當事件發生時，this（當前Controller執行個體的引用）的回呼函數會被調用，這樣可以更方便的使用輔助函數，並將狀態儲存在控制器裡。

微件的銷毀

如果元素從頁面上移除，jQuery.Controller.destroy函數會被調用，專用於存放處理卸載功能。當然，您也可以使用其他方法處理卸載方法：

$('.thing').my_widget('destroy'); 

Todos 例子

讓我們看一個非常簡單的例子，待辦事列表與建立按鈕，您的HTML應當如下：

<div id='todos'><br /> <ol><br /> <li class="todo">Laundry</li><br /> <li class="todo">Dishes</li><br /> <li class="todo">Walk Dog</li><br /> </ol><br /> <a class="create">Create</a><br /></div> 

給mousover添加一個樣式，並建立待辦事，您的Controller應當如下：

$.Controller.extend('Todos',{<br /> ".todo mouseover" : function( el, ev ) {<br /> el.css("backgroundColor","red")<br /> },<br /> ".todo mouseout" : function( el, ev ) {<br /> el.css("backgroundColor","")<br /> },<br /> ".create click" : function() {<br /> this.find("ol").append("<li class='todo'>New Todo</li>");<br /> }<br />}) 

這樣就建立一個Controller類，您還要在'#todos'層上通過建立一個Controller的執行個體，進而添加事件處理，有兩種方法：

//1. 直接建立Controller執行個體<br />new Todos($('#todos'));<br />//2. 使用jQuery函數<br />$('#todos').todos(); 

Controller 初始化

給您的widget的添加一個init函數是非常有用的，下面的例子，我們建立一個controller，然後將一個訊息輸出html元素：

$.Controller.extend("SpecialController",<br />{<br /> init: function( el, message ) {<br /> this.element.html(message)<br /> }<br />})<br />$(".special").special("Hello World") 

刪除Controllers

jQuery內部支援移除Controller. 所以要移除一個controller, 您只需要移除其元素：

$(".special_controller").remove()<br />$("#containsControllers").html("") 

請注意：如果您使用原始的DOM方法(innerHTML, removeChild)，其控制器無法銷毀。

如果您只想刪除controller功能，調用此controller執行個體的destroy函數：

$(".special_controller").controller().destroy() 

訪問 Controllers

有時您需要擷取一個controller的引用，有幾種方法可以做到。請看下面的例子，我們假設有2個 className="special"的元素。

//建立 2個 foo controllers<br />$(".special").foo()</p><p>//建立2 bar controllers<br />$(".special").bar()</p><p>//擷取所有的元素的controllers:<br />$(".special").controllers() //-> [foo, bar, foo, bar]</p><p>//只擷取 foo controllers<br />$(".special").controllers(FooController) //-> [foo, foo]</p><p>//擷取所有bar controllers<br />$(".special").controllers(BarController) //-> [bar, bar]</p><p>//擷取首個controller<br />$(".special").controller() //-> foo</p><p>//根據資料擷取foo controller<br />$(".special").data("controllers")["FooController"] //-> foo 

Controller函數的調用

一旦您有一個元素的引用，您就可以使用引用調用元素的所有函數，然而，Controller也有一些調用技巧：

//建立 foo controller<br />$(".special").foo({name: "value"})</p><p>//調用FooController.prototype.update<br />$(".special").foo({name: "value2"})</p><p>//調用FooController.prototype.bar<br />$(".special").foo("bar","something I want to pass")