JS  IOC 控制依赖反转

1、什么是IOC

2、IOC应用实践

什么是IOC

目标：如何有效的组织代码的依赖模块问题

什么是IOC

有效的组织代码？

var A = function(){
  //dosomething
}
var B = function(){
  //dosomething
}
//扩展A功能，实现方式
var AA = function(){
   A();
   B();
  ....
}

问题：耦合性太强

什么是IOC

有效的组织代码？

var A = function(){
}
var B = function(){

}
//通过传参方式
var AA = function(A,B，param){
   A();
   B();
  ....

} 
//使用方式
AA(A,B,"xx")

问题：如果大量地方被调用AA()...,且AA的方法需要增加依赖项，调用处需统一修改

什么是IOC

有效的组织代码

var A = function(){
}
var B = function(){

}

//避免依赖模块的定义
var AA = (function(A,B){
 
   return function(params){
           A();
           B();
         }
} )(A,B)
//使用方式
AA("params");

问题：加烈依赖前置模块定义,若模块名变更，如何处理

什么是IOC

injiect.register("A",function(){

//dosomthing

})
var fn=injiect.invoke（"A"，"B"，function(a,b){
    //使用A
    //使用B
    //其它逻辑
}）；
//调用
fn("params");

隔离：依赖模块定义

隔离：同步，异步

var ioc = {
    dependencies: {},
    register: function(key, value) {
        this.dependencies[key] = value;
    },
    resolve: function(deps, func, scope) {
    }
}

IOC应用实践

//require,AMD  注册+定义
define("main",['service', 'router'], function(service, router) {       
    // ...
});
// seajs,use
Module.use = function (ids, callback, uri) {
  var mod = Module.get(uri, isArray(ids) ? ids : [ids])
  ....

模块加载

IOC应用实践

  //main.js
  var model = new Model();
  var view = new View();
 // 由构造函数将 model 和 view 两个依赖注入给控制器
  var list = new List(model, view); 

  list.enter();
//main.js
 var IoC = require('uioc');
 var config = require('config');

 // 实例化ioc容器，传入配置注册各个组件
 var ioc = IoC(config);

 // 获取 list 组件后，调用对应的 enter 方法
  ioc.getComponent('list', function (list) {
          list.enter();
  });
修改后
修改前

MVC

IOC应用实践

IOC应用实践

  //注册路由
  $.PAjax.regRouter("index",function(){
         Send.showPage("index");
  });
           
  $.PAjax.regRouter("input",function(){
         Send.showPage("input");
  });
  //back request,save before data and excute,mobile refesh can excute onpopstate
  //no support propstate,apply onhashchage
  monitorhash:function(){
        	
        if(isSupportPopState()){
            //  window.onpopstate = function(ev){
                    //hander =  $.PAjax.routers[path];
                }
        }else{
           // window.onhashchange = function(){
                    //hander =  $.PAjax.routers[path];
              }

       }
 }

PAjax

IOC总结

核心思想：

参考：
http://www.ynpxrz.com/n987833c2025.aspx
http://sentsin.com/web/663.html

http://efe.baidu.com/blog/ioc-in-modulization/

                               依赖的管理交由外部控

制，封装变化的，固化不变的

JS  IOC 控制依赖反转

Thanks

Made with Slides.com