mvc-4控制器和状态(1)

导语

将状态保存在客户端可以加快页面反映；但应当避免状态或数据保存在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");
});