Javascript MVC ——Controller

 

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

翻译: 刘贵学(liuguixue@gmail.com)

 

 

控制器是使用代理将事件处理组织起来。如果您的应用中有事件发生（用户点击或模型实例更新）应当由控制器处理并响应此事件。

控制器可使您的代码更明确，可复用性与架构性更强，这可自动与底层代码相隔离，要了解更多关于控制器理论及其相关特性，请关注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")