好程序员解析Web前端中的IoC是什么

  • 时间:
  • 浏览:0
  • 来源:uu快3开奖_uu快3娱乐_输钱

}

}

Array.isArray(module) ? module.map(item => App.use(item)) : App.modules.push(module);

init(app) {

app.share = new Share();

class App {

this.init();

this.router = options.router;

// some other data here...

// do something here...

import Track from './modules/Track';

class App {

},

window.addEventListener('DOMContentLoaded', () => {

init(app) {

constructor(options) {

Array.isArray(module) ? module.map(item => App.use(item)) : App.modules.push(module);

};

// index.js

this.options.onReady(this);

router: new Router(),

}

onReady(app) {

};

最后总结:

App 模块此时应该称之为「容器」比较至少了,跟业务机会里能 不能 任何关系了,它仅仅也不提供了因此 土办法来辅助管理注入的依赖和控制模块如可执行。

控制反转(Inversion of Control)是一种「思想」,依赖注入(Dependency Injection)则是你什儿 思想的一种具体「实现土办法」,而这里的 App 则是辅助依赖管理的俩个 多 「容器」。

}

}

init() {

}

}

import App from 'path/to/App';

}

}

里能 不能 很清楚的发现,App.use 做了一件非常简单的事情,也不把依赖保位于了 App.modules 属性中,等候后续初始化模块的时候被调用。

接下来让让我们儿看一下模块初始化土办法 this.initModules() 具体做了那些事情:

class App {

constructor(options) {

App.use([Router, Track]);

this.options.onReady();

app.router = new Router(app.options.router);

});

此时回去看 Router 的模块的实现就里能 不能 很容易理解为那些要为何写了:

// modules/Router.js

// modules/Track.js

initModules() {

static use(module) {

import Track from 'path/to/Track';

init() {

},

}

}

track: {

router: {

ew App({

this.init();

// ...

}

import Track from './modules/Track';

},

static modules = []

  好守护进程员解析Web前端中的IoC是那些,今天要为让让我们儿分享的文章也不关于对web前端中的 IoC的解释。Web前端技术里能 不能 火,前端应用在不断壮大的过程中,内控 模块间的依赖机会也会随之里能 不能 简化,模块间的 低复用性 原因分析分析应用 难以维护,不过让让我们儿里能 不能 借助计算机领域的因此 优秀的编程理念来一定程度上处里那些疑问,下面让让我们儿就来并肩看一看IoC。

web前端中的 IoC是那些?

一、那些是IoC

IoC 的全称叫做 Inversion of Control,可翻译为为「控制反转」或「依赖倒置」,它主要饱含 了俩个 多 准则:

1、高层次的模块不应该依赖于低层次的模块,它们都应该依赖于抽象

2、抽象不应该依赖于具体实现,具体实现应该依赖于抽象

3、面向接口编程 而不不说面向实现编程

概念总是 抽象的,因此 因此 下面将以俩个 多 例子来解释上述的概念:

假设时要构建一款应用叫 App,它饱含 俩个 多 路由模块 Router 和俩个 多 页面监控模块 Track,一现在现在开始 机会会里能 不能 实现:

// app.js

title: 'Hello IoC.',

import Router from './modules/Router';

// ...

});

import Share from 'path/to/Share';

});

里能 不能 发现 App 模块在使用上也非常的方便,通过 App.use() 土办法来「注入」依赖,在 ./modules/some-module.js 中按照一定的「约定」去初始化相关配置,比里能 不能 时时要新增俩个 多 Share 模块句子,不不到 App 内控 去修改内容:

// modules/Share.js

init(app) {

};

});

直接在 App 内控 去 use 你什儿 Share 模块即可,对模块的注入和配置极为方便。

里能 不能 在 App 内控 到底做了那些工作呢,首先从 App.use 土办法说起:

class App {

this.options = options;

});

import Track from './modules/Track';

import App from 'path/to/App';

}

window.addEventListener('DOMContentLoaded', () => {

export default {

export default {

import Router from './modules/Router';

this.track.tracking();

init() {

});

app.setShare({

import Router from 'path/to/Router';

track: new Track(),

}

里能 不能 发现该土办法同样做了一件非常简单的事情,也不遍历 App.modules 中所有的模块,判断模块不是饱含 init 属性且该属性时也不俩个 多 函数,机会判断通过句子,该土办法就会去执行模块的 init 土办法并把 App 的实例 this 传入其中,以便在模块中引用它。

从你什儿 土办法中里能 不能 看出,要实现俩个 多 里能 不能 被 App.use() 的模块,就时要满足俩个 多 「约定」:

// index.js

}

app.track.tracking();

import Router from 'path/to/Router';

this.init();

}

export default {

},

};

  以上也不今天为让让我们儿做的分享,希望本篇文章不能对正在从事web相关工作的小伙伴们有所帮助。我想要了解更多web相关知识记得关注好守护进程员web前端培训官网。

this.router.to('home');

this.initModules();

this.options.onReady();

app.track = new Track(app.options.track);

import App from 'path/to/App';

static modules = []

App.modules.map(module => module.init && typeof module.init == 'function' && module.init(this));

onReady() {

initModules() {

description: 'description here...',

app.router = new Router(app.options.router);

// index.js

class App {

// do something here...

this.track = new Track();

App.modules.map(module => module.init && typeof module.init == 'function' && module.init(this));

App.use(Share);

app.router.to('home');

ew App({

},

init(app) {

}

经过改造后 App 内机会里能 不能 「具体实现」了,看里能 任何业务代码了,里能 不能 如可使用 App 来管理让让我们儿的依赖呢:

// modules/Router.js

}

this.router.to('home');

this.track = options.track;

this.router = new Router();

// app.options ...

onReady(app) {

this.options = options;

});

嗯,看起来没那些疑问,因此实际应用中需求是非常多变的,机会时要给路由新增功能(比如实现 history 模式)机会更新配置(启用 history, ew Router({ mode: 'history' }))。这就不得找不到 App 内控 去修改你什儿 个多 模块,这是俩个 多 INNER BREAKING 的操作,而对于时候测试通过了的 App 来说,也时要重新测试。

很明显,这时要俩个 多 好的应用形态,高层次的模块 App 依赖了俩个 多 低层次的模块 Router 和 Track,对低层次模块的修改时要影响高层次的模块 App。里能 不能 如可处里你什儿 疑问呢,处里方案也不接下来要讲述的 依赖注入(Dependency Injection)。

二、依赖注入

所谓的依赖注入,简单来说也不把高层模块所依赖的模块通过传参的土办法把依赖「注入」到模块内控 ,后面 的代码里能 不能 通过依赖注入的土办法改造成如下土办法:

// app.js

app.router.to('home');

window.addEventListener('DOMContentLoaded', () => {

constructor(options) {

export default {

onReady() {

mode: 'history',

import Router from './modules/Router';

});

里能 不能 就看,通过依赖注入处里了后面 所说的 INNER BREAKING 的疑问,里能 不能 直接在 App 内控 对各个模块进行修改而不影响内控 。

是时要就万事大吉了?理想很丰满,但现实却是很骨感的,没过多日产品也不他提了俩个 多 新需求,给 App 加进俩个 多 分享模块 Share。也不句子又回到了后面 所提到的 INNER BREAKING 的疑问上:你不得不对 App 模块进行修改加进一行 this.share = options.share,这明显时要让让我们儿所期望的。

觉得 App 通过依赖注入的土办法在一定程度上解耦了与因此 几次模块的依赖关系,因此还欠缺彻底,其中的 this.router 和 this.track 等属性觉得都还是对「具体实现」的依赖,明显违背了 IoC 思想的准则,那如可进一步抽象 App 模块呢。

Talk is cheap, show you the code

ew App({

this.options = options;

app.setShare = data => app.share.setShare(data);

static use(module) {

this.track.tracking();

// index.js

}

}

ew App({