前端领域的 IoC 理念 点击关注公众号，“技术干货”及时达！ 是什么？Inversion of Control（IoC）是一种软件设计原则，它指的是控制权的转移。在传统的程序设计中，开发者通常会控制程序的执行流程和对象的创建与管理。而在IoC容器中，控制权被反转，由容器来管理和控制对象的生命周期、依赖注入等行为。IoC通过控制反转的方式改变了传统程序的控制流程，将对象的创建和管理交由容器来完成，从而使系统更易于扩展、维护和测试。 为什么？前端应用不断壮大， 内部模块间的依赖越来越复杂， 模块间的低复用性导致应用难以维护。 准则： 高层次的模块不应该依赖于低层次的模块，应该依赖于抽象 抽象不应该依赖于具体的实现，具体应该依赖于抽象 面向接口编程、而不要面向实现编程 怎么做？举一个??在项目的入口文件，需要实例化一个 App 对象，这个对象是一个入口组件，并给 App 传入了生命周期的钩子函数。在 App 的构造方法中实例化了 Router、 Track模块。并在页面加载后执行Router、 Track的方法和生命周期钩子。 //app.js importRouterfrom'./modules/Router'; importTrackfrom'./modules/Track'; classApp{ constructor(options){ this.options=options; this.router=newRouter(); this.track=newTrack(); this.init(); } init(){ window.addEventListener('DOMContentLoaded',()={ this.router.to('home'); this.track.tracking(); this.options.onReady(); } } //index.js importAppfrom'./app'; newApp({ onReady(){ //dosomethinghere... }, }); 这样写的问题是： App 作为高层次的模块，需要依赖具体的模块，即传入的参数 onReady 方法 和 Router、 Track 模块。面向实现， 在监听里面需要依赖 router track 的实现。如果要给 Router 增加模式，需要在 App 中和 ./modules/Router 分别添加代码。我们可以先收缩依赖的入口，把 App 依赖的模块都通过参数注入。 //app.js classApp{ constructor(options){ this.options=options; this.router=options.router; this.track=options.track; this.init(); } init(){ window.addEventListener('DOMContentLoaded',()={ this.router.to('home'); this.track.tracking(); this.options.onReady(); } } //index.js importAppfrom'path/to/App'; importRouterfrom'./modules/Router'; importTrackfrom'./modules/Track'; newApp({ router:newRouter(), track:newTrack(), onReady(){ //dosomethinghere... }, }); 下一步是要解决 App 对象对 Router、 Track模块实现的依赖。这里可以把 App 对象当做一个容器，它只收集依赖的模块和执行模块指定的方法。 classApp{ //收集的模块放在对象中 staticmodules=[] constructor(options){ this.options=options; this.init(); } init(){ window.addEventListener('DOMContentLoaded',()={ this.initModules(); this.options.onReady(this); } //对外暴露注册模块的方法 staticuse(module){ Array.isArray(module)?module.map(item=App.use(item)):App.modules.push(module); } //只处理收集到的模块中特性的方法 initModules(){ App.modules.map(module=module.inittypeofmodule.init=='function'module.init(this)); } } 依赖的模块，需要实现特定的方法，这里是 init 方法。 //modules/Router.js importRouterfrom'path/to/Router'; exportdefault{ init(app){ app.router=newRouter(app.options.router); app.router.to('home'); } }; //modules/Track.js importTrackfrom'path/to/Track'; exportdefault{ init(app){ app.track=newTrack(app.options.track); app.track.tracking(); } }; 入口文件负责依赖注入，和定义依赖模块所需的参数。 //index.js importAppfrom'path/to/App'; importRouterfrom'./modules/Router'; importTrackfrom'./modules/Track'; App.use([Router,Track]); newApp({ //依赖所需的参数 router:{ mode:'history', }, track:{ //... }, onReady(app){ //app.options... }, }); 如果需要在App 中新增依赖，只需要定义模块，并在入口文件中注入。 //modules/Share.js importSharefrom'path/to/Share'; exportdefault{ init(app){ app.share=newShare(); app.setShare=data=app.share.setShare(data); } }; //index.js App.use(Share); newApp({ //... onReady(app){ app.setShare({ title:'HelloIoC.', description:'descriptionhere...', //someotherdatahere... } }); 这样下来，App 对象就变成了***面向对象而非面向实现***的容器了。 App.use 用来注册依赖。依赖必须实现 init 方法。init 方法必须是函数，并可以获取容器传来的参数。总结高层模块作为容器，提供收集依赖的接口，并在内部实现对依赖管理的方法。 点击关注公众号，“技术干货”及时达！ 阅读原文