导语

将状态保存在客户端可以加快页面反映；但应当避免状态或数据保存在DOM中；在MVC中，状态应该保存在控制器中

控制器是视图和模型的纽带，只有控制器知道视图和模型的存在并将它们连接在一起；当加载页面时，控制器将事件处理程序绑定在视图里，并适时地处理回调，以及和模型必要地对接

模块模式

用来封装逻辑并避免全局命名空间污染，一般使用匿名函数实现

(function() {

  /**/

})();

全局导入

利用参数地方式

(function($) {

  /**/

})(jQuery)

全局导出

(function($, exports) {

  exports.Foo = "wen";

  /**/

})(jQuery, window);

添加少量上下文

模版中地上下文是全局；想自定义作用域上下文需要将使用对象方法

(function ($) {

  var mod = {};

  mod.load = function(func) {

    $($.proxy(func, this));

  };

  mod.load(function() {

    this.view = $("#view");

  });

  mod.assetsClick = function(e) {

    /**/

  };

  mod.load(function() {

    this.view.find(".assets").click(

      $.proxy(this.assetsClick, this)

    );

  })

})(jQuery)

控制器内所有地状态都是局部封装在模块里

抽象出库

(function ($, exports) {

  var mod = function(includes) {

    if(includes) this.include(includes);

  }

  mod.fn = mod.prototype;

  //保证函数在局部上下文中执行

  mod.fn.proxy = function(func) {

    return $.proxy(func, this);

  };

  mod.fn.load = function(func) {

    $(this.proxy(func));

  };

  //给控制器添加属性

  mod.fn.include = function(ob) {

    $.extend(this, ob);

  };

  exports.Controller = mod;

})(jQuery, window);

(function($, Controller) {

  var mod = new Controller;

  mod.toggleClass = function(e) {

    this.view.toggleClass("over", e.data);

  };

  mod.load(function() {

    this.view = $("#view");

    this.view.mouseover(this.proxy(this.toggleClass));

    this.view.mouseout(this.proxy(this.toggleClass));

  });

})(jQuery, Controller);

扩充控制器

//给每个实例子添加属性／方法

Controller.fn.click = function(func) {

  $("#view").bind("click", this.proxy(func));

}

//使用

var mod = new Controller;

mod.click(function(){/**/});

//或者从其他控制器复制方法过来

(function ($, exports) {

  var StateMachine = function(){};

  StateMachine.fn  = StateMachine.prototype;

  StateMachine.fn.add = function(controller){

   /**/

  };

  exports.StateMachine = StateMachine;

})(jQuery, window);

var mod = new Controller;

mod.include(StateMachine);

文档加载完之后载入控制器

目前，控制器地一部分在生成DOM之前就载入里，另一部分则在页面文档载入完成后触发地回调里；解决地方法是统一在DOM生成后载入控制器

var exports = this;

(function($) {

  var mod = {};

  mod.create = function(includes) {

    var result = function() {

      this.init.apply(this, arguments);

    };

    result.fn = result.prototype;

    result.fn.init = function() {};

    result.proxy = function(func) {

      return $.proxy(func, this);

    }

    result.fn.proxy = result.proxy;

    result.include = function(ob) {

      $.extend(this.fn, ob);

    }

    result.extend = function(ob) {

      $.extend(this, ob);

    };

    if(includes) result.include(includes);

    return result;

  };

  exports.Controller = mod;

})(jQuery);

//使用jQuery.ready()

jQuery(function($) {

  var ToggleView = Controller.create({

    init: function(view) {

      this.view = $(view);

      this.view.mouseover(this.proxy(this.toggleClass));

      this.view.mouseout(this.proxy(this.toggleClass));

    },

    toggleClass: function(e) {

      this.view.toggleClass("over", e.data);

    }

  });

  //实例化

  new ToggleView("#view");

});