原文:http://javascriptmvc.com/docs.html#&who=jQuery.Controller
控制器是使用代理将事件处理组织起来。如果您的应用中有事件发生(用户点击或模型实例更新)应当由控制器处理并响应此事件。
控制器可使您的代码更明确,可复用性与架构性更强,这可自动与底层代码相隔离,要了解更多关于控制器理论及其相关特性,请关注Jupiter的博客。
基础示例
替换前:
替换后:
Tabs实例
使用Controller
控制器(Controller)可以帮您组织并构建jQuery插件。它可用于构建一些简单的微件,例如slider,也可将多个微件组成一些更大的。要理解如何使用控制器(Controller),您还需要了解一般的jQuery微件生命周期,以及如何映射到控制器的功能。
创建一个控制器类
这将创建一个叫做$.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函数会被调用,专用于存放处理卸载功能。当然,您也可以使用其他方法处理卸载方法:
Todos 例子
让我们看一个非常简单的例子,待办事列表与新建按钮,您的HTML应当如下:
给mousover添加一个样式,并新建待办事,您的Controller应当如下:
这样就创建一个Controller类,您还要在'#todos'层上通过新建一个Controller的实例,进而添加事件处理,有两种方法:
Controller 初始化
给您的widget的添加一个init函数是非常有用的,下面的例子,我们创建一个controller,然后将一个消息输出html元素:
删除Controllers
jQuery内部支持移除Controller. 所以要移除一个controller, 您只需要移除其元素:
请注意:如果您使用原始的DOM方法(innerHTML, removeChild),其控制器无法销毁。
如果您只想删除controller功能,调用此controller实例的destroy函数:
访问 Controllers
有时您需要获取一个controller的引用,有几种方法可以做到。请看下面的例子,我们假设有2个 className="special"的元素。
Controller函数的调用
一旦您有一个元素的引用,您就可以使用引用调用元素的所有函数,然而,Controller也有一些调用技巧: