$.Controller用于创建易管理的、节约内存的和执行效率高效的jquery插件。极强的灵活性允许他可以做为传统的view或者controller。你可以使用它创建tabs，grids和文本菜单，或者给他们灌输更为复杂的业务逻辑。Controller让你的代码功能更明确，可重复使用，更有组织性，他继承制$.Class，并且使用到了event delegation。
基本的例子：
传统做法：
$(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();
使用Controller
Controller帮助你创建和管理jquery插件，他可以用来创建简单的插件如slider，或者可以把多个插件组合成一个。理解Controller如何使用，你必须对传统的jquery插件的生命周期有清醒的认识，并且明白他们如何结合到Controller上的功能的。我们使用下面的方式定义一个Contrioller。
$.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的函数（关于Controller的创建和命名我会在下节课中讲解），可以用他在一个html元素上创建一个Controller的实例。使用方法如下：
$('.thing').my_widget(options)
上面的代码实现了在所有'.thing' html元素上调用了new MyWidget(el, options)。当一个新Class实例创建的时候，Class原型方法setup和init方法将会被调用（上一章已经介绍了）。Controller的setup实现以下功能：
1.设置this.element，添加controller的名字到element的class属性上。
2.将传入的options选择项和默认的选择项合并，传给this.options。
3.将controller的引用保存到$.data。
4.绑定所有的事件处理函数。
一般而言，Controller的事件处理会自动绑定的，不过有很多方式可以完成这一工作，我下文会介绍。当一个事件发生的时候，回调函数将会被执行，回调函数中的this会执行当前Controller的实例。这样会让使用帮助类变得简单，也更容易保存Controller的状态。
当element从页面上移除的时候，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>
Controller代码：
$.Controller('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已经创建好了，接下来就是如何使用的问题了，有两个步骤需要做：首先创建Controller的实例，接下来在html元素上使用Controller实例。
//实现方式1 new Todos($('#todos'));
//实现方式2 $('#todos').todos();
初始化Controller
为你的插件添加一个init方法会相当有用。在下面的例子中，当controller被创建的时候，允许传一个message的参数作为html元素的内容。
$.Controller("SpecialController",
{
init: function( el, message ) {
this.element.html(message)
}
})
$(".special").special("Hello World")
移除Controller
Controller使用的是jquery的remove方法，所以你可以通过移除html元素的方式实现controller的移除。
$(".special_controller").remove()
如果你使用DOM的方法是没有办法销毁Controller的：
$("#containsControllers").html("")
如果你只是想移除Controller上的功能，可以使用destroy函数：
$(".special_controller").controller().destroy()
访问Controller
经常你需要获得Controller的引用，有很多方式可以帮你实现。在下面的例子中，两个html元素的className都是'special'：
//创建两个 foo controllers $(".special").foo() //创建两个 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 //通过data 获得 foo controller $(".special").data("controllers")["FooController"] //-> foo
调用Controller上的方法
一旦你拥有了html元素的引用，你就可以调用它上面的方法。
//创建 foo controller $(".special").foo({name: "value"}) //调用 FooController.prototype.update $(".special").foo({name: "value2"}) //调用 FooController.prototype.bar $(".special").foo("bar","something I want to pass")