当前位置: 首页 > Web前端 > JavaScript

滴滴使用分析

时间:2023-03-27 12:31:33 JavaScript

使用bpmnjscore中的滴滴。要想看懂源码,就免不了要了解滴滴的使用。了解之后,我觉得这是一种全新的节目组织方式。优点:使用滴滴模块声明方式滴滴管理全局模块new一个带模块的滴滴实例即使程序入口可以实现程序的低耦合高内聚,通过$inject注入需要的依赖缺点:有太多注册的模块很多,很难找到。你不知道你需要的依赖已经注册到哪里了。didididi是js使用的依赖注入和控制翻转的容器。滴滴实例创建后,可以传递解决依赖,缓存实例以供复用。使用声明组件的示例import{Injector}from'didi';functionCar(engine){this.start=function(){engine.start();};}functioncreatePetrolEngine(power){return{start:function(){console.log('用'+power+'hp'启动引擎);}};}//Define(didi)modules//按名称声明可用组件并指定它们的提供方式constcarModule={//请求'car',注入器将调用createPetrolEngine(...)来生产汽车'car':['type',Car],//请求'engine',喷油器将调用createPetrolEngine(...)来生成它'engine':['factory',createPetrolEngine],//请求'power',注入器会给它编号1184'power':['value',1184]//可能是BugattiVeyron};//用一组(滴滴)模块实例化一个注入器constinjector=newInjector([carModule]);//使用注入器API获取组件injector.get('car').start();//...或调用函数,注入参数injector.invoke(function(car){console.log('启动',汽车);});通过注解、注释、函数参数名注入组件注入器容器,如果没有提供则查找依赖的参数名具体来说,容器会从函数参数名functionCar(engine,license){//注入名为'engine'和'license'的组件中解析依赖}functionannotationfunctionCar(/*engine*/e,/*x._weird*/x){//将注入名为'engine'和'x._weird'的组件}$injectannotationfunctionCar(e,license){//将注入名为'engine'和'license'的组件Component}Car.$inject=['engine','license'];arraysymbolconstCar=['engine','trunk',function(e,t){//将注入'engine'和'trunk'}];部分注入有时仅注入对象的某些属性非常有帮助functionEngine(/*config.engine.power*/power){//将注入1184(config.engine.power),//假设没有直接绑定'config.engine.power'令牌}constengineModule={'config':['value',{engine:{power:1184},other:{}}]};初始化组件模块(module)可以使用__init__钩子声明需要加载或紧急调用的函数和组件import{Injector}from'didi';functionHifiComponent(events){events.on('toggleHifi',this.toggle.bind(this));this.toggle=function(mode){console.log(`ToggledHifi${mode?'ON':'OFF'}`);};}constinjector=newInjector([{__init__:['hifiComponent'],hifiComponent:['type',HifiComponent]},...]);//将所有模块初始化为definedinjector.init();组件重写可以按名称重写组件。当你需要自定义和测试import{Injector}from'didi'时很有用;从'./core'导入coreModule;从'./test/mocks'导入HttpBackend;constinjector=newInjector([coreModule,{//覆盖已经声明的`httpBackend`httpBackend:['type',HttpBackend]}]);