uioc是用JavaScript写的一个轻量级IoC容器,为JavaScript应用提供了IoC功能。通过使用配置的方式管理模块依赖,最大程度的提高了模块的复用性。
在1.0版本中,增加了aop的支持,对应用从横向关注点上提供了复用支持。
npm install uioc —saveIoC最大的要求之一就是不要在模块中引入具体依赖的实现,对应在JavaScript中则是不要显示的引入依赖模块,仅在注入点面向依赖接口编程。
// List.jsexportdefaultclassList{// 构造函数注入实现了ListModel接口的依赖constructor(listModel){this.model=listModel;}// 属性/接口注入实现了ListView接口的依赖setView(listView){this.view=listView;}enter(){letdata=this.model.load();this.view.render(data);}}// MyListModel.jsexportdefaultclassMyListModel{load(){return{data: 'data'};}}// MyListView.jsexportdefaultclassMyListView{render(data){console.log(data);}}上述代码中在List类有两个依赖view和model,分别实现了ListModel和ListView(隐式)接口, 而MyListModel和MyListView类则是ListModel与ListView接口的具体实现。
// ioc.jsimport{IoC}from'uioc';importListfrom'./List';importMyListModelfrom'./MyListModel';importMyListViewfrom'./MyListView';letconfig={components: {list: {creator: List,args: [{$ref: 'listModel'}],properties: {view: {$ref: {'listView'}}},listModel: {creator: MyListModel},listView: {creator: MyListView}}}};letioc=newIoC(config);exportdefaultioc;上述代码中,声明了list, listModel, listView三个组件, 其中list通过$ref关键字声明了2个依赖:listModel是list的构造函数依赖, 会在实例化list的时候,将创建好的listModel依赖传入构造函数; listView是list的属性依赖,会在实例化list完成后,将创建好的listView赋值给list,赋值方式为有setter则调用setter,无setter则直接对象赋值。
// main.jsimportiocfrom'ioc';ioc.getComponent('list').then(list=>list.enter());上述代码中通过ioc容器实例获取了list组件,ioc容器将根据配置创建好list的相关依赖并注入给list,最终组装成完整的list实例传递给promise的resolve回调。