JavaScriptMVC之Controller

Controller帮助创建合理的，可释放内存，快速执行jQuery配件。
它非常好的灵活性让它可以为一个传统和视图和控制器服务。 从这里我们可以得出，UI控件＝视图＋控制器。例如jquery UI:$("#test").dialog();

这也意味着我们使用它来很容易创建像Tab，Grid和右键菜单等控件，并且很好组合，符合行业规则。

控制器让你的代码有确定性，复用性，组织性，且可以很方便下载。
阅读关于the theory behind controller and a walkthrough of its features on Jupiter's blog. Get Started with jQueryMX也是一个不错的走查。

Controller继承$.Class，并且大量使用事件委托。
在使用Controller前要确定你已经理解这些概念。 简单例子：

//Instead of

$(function(){
  $('#tabs').click(someCallbackFunction1)
  $('#tabs .tab').click(someCallbackFunction2)
  $('#tabs .delete click').click(someCallbackFunction3)
});

//do this

$.Controller('Tabs',{
  click: function() {...},
  '.tab click' : function() {...},
  '.delete click' : function() {...}
})
$('#tabs').tabs();

 

 
 
 Tab例子：

steal("jquery/controller", function(){
// create a new Tabs class
$.Controller("Tabs",{
  
  // initialize widget
  init : function(el){
    
    // activate the first tab
    $(el).children("li:first").addClass('active')
    
    // hide the other tabs
    var tab = this.tab;
    this.element.children("li:gt(0)").each(function(){
      tab($(this)).hide()
    })
  },
  
  // helper function finds the tab for a given li
  tab : function(li){
    return $(li.find("a").attr("href"))
  },
  
  // hides old active tab, shows new one
  "li click" : function(el, ev){
    ev.preventDefault();
    this.tab(this.find('.active').removeClass('active')).hide()
    this.tab(el.addClass('active')).show();
  }
})
  
// adds the controller to the element
$("#tabs").tabs();
})

 

 
 
使用Controller

Controller帮助你创建和组合jQuery插件。它可以使用来创建简单配件，像slider,或者组合多个配件成更大的配件。 理解如何使用Controller，你需要理解一个jQuery配件的正常生命周期，且又是如何把配件的动作映射到Controller中的函数的。

一个控制器类的创建

$.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助手函数，使用它可以创建一个Controller实例在一个元素上。

注：关于Controller的命名规范如下：
 1、 underscored 下线线
 2、 "." replaced with "_" 下划线替换点
 3、 with Controllers removed. 删除Controllers
 
 《代码》
 
 在一个元素上创建一个Controller实例

$('.thing').my_widget(options) // calls new MyWidget(el, options)

 

 
这代码在每个'.thing'元素上都调用了new MyWidget(el,options)。 当一个新Controller类实例创建后，它会调用类的setup和init方法。Controller的setup方法： 1、设置元素且在这个元素的Class添加上Controller的名称。 2、合并处理default对象选项和设置它为this.options。
3、保存一个Controller引用到$.data
4、绑定所有事件手柄方法。
 
Controller响应事件

一般来说，Controller事件手柄是自动装订的。然而，一个Controller可以通过多种方式监听事件。 (你可以通过阅读这篇《JavaScriptMVC之控制器监听事件》去了解绑定事件方式)
一但一个事件发生，使用Controller实例的this引用的回调函数总是被调用。这就让Controller很容易使用助手函数和保存状态。

配件销毁

如果这个元素从页面上移除，这个Controller的destroy方法被调用。这是一个放置任意额外卸载功能的好地方。 也就是我们需要在这个Controller销毁前，需要做的一些额外的动作，可以添加在这里。 你也可以在程序中卸载一个Controller，如下：

$('.thing').my_widget('destroy');