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")