Javascript MVC ——Controller

 

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

翻譯: 劉貴學([email protected])

 

 

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

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

基礎示例

替換前：

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

替換後：

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

Tabs實例

使用Controller

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

創建一個控制器類

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

這將創建一個叫做$.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'> <ol> <li class="todo">Laundry</li> <li class="todo">Dishes</li> <li class="todo">Walk Dog</li> </ol> <a class="create">Create</a> </div> 

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

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

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

//1. 直接創建Controller實例 new Todos($('#todos')); //2. 使用jQuery函數 $('#todos').todos(); 

Controller 初始化

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

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

刪除Controllers

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

$(".special_controller").remove() $("#containsControllers").html("") 

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

如果您只想刪除controller功能，調用此controller實例的destroy函數：

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

訪問 Controllers

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

//創建 2個 foo controllers $(".special").foo() //創建2 bar controllers $(".special").bar() //獲取所有的元素的controllers: $(".special").controllers() //-> [foo, bar, foo, bar] //只獲取 foo controllers $(".special").controllers(FooController) //-> [foo, foo] //獲取所有bar controllers $(".special").controllers(BarController) //-> [bar, bar] //獲取首個controller $(".special").controller() //-> foo //根據數據獲取foo controller $(".special").data("controllers")["FooController"] //-> foo 

Controller函數的調用

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

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