Controller函数的调用.doc

Javascript MVC ——Controller 原文：/docs.html#who=jQuery.Controller 翻译: 刘贵学(liuguixue@) 控制器是使用代理将事件处理组织起来。如果您的应用中有事件发生（用户点击或模型实例更新）应当由控制器处理并响应此事件。 控制器可使您的代码更明确，可复用性与架构性更强，这可自动与底层代码相隔离，要了解更多关于控制器理论及其相关特性，请关注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=todoLaundry/li?? ???li?class=todoDishes/li?? ???li?class=todoWalk?Dog/li?? ?/ol?? ?a?class=createCreate/a?? /div?? 给mousover添加一个样式，并新建待办事，您的Controller应当如下： $.Controller.extend(Todos,{?? ??.todo?mouseover?:?function(?el,?ev?)?{?? ???el.css(backgroundColor,red)?? ??},?? ??.todo?mouseout?:?function(?el,?ev?)?{?? ???el.css(backgroundColor,)?? ??},?? ??.cre