依赖注入 DI (Dependency Injection) 是编程领域中一个非常常见的设计模式,它指的是将应用程序所需的依赖关系(如服务或其他组件)通过构造函数参数或属性自动注入的过程。这样做的好处是可以减少组件之间的耦合,更容易测试和维护。
js中的使用场景及规则
我们先举个简单的例子,我们有两个简单的 A 类和 B 类,在 B 类中依赖了 A 类,我们在 B 类中对它进行实例化,并调用它的方法:
class A {
constructor(name) {
this.name = name;
}
log() {
console.log("name: ", this.name);
}
}
class B {
a = new A("ConardLi");
start() {
this.a.log();
}
}
const b = new B();
b.start();
但是这种写法是非常不灵活的, A 类作为一个依赖项,它的初始化的逻辑被硬编码到了 B 类中,如果我们想添加或修改其他的依赖项,必须要不断修改 B 类。
借助依赖注入的设计思想,我们可以将代码改写成下面这样:
class A {
constructor(name) {
this.name = name;
}
log() {
console.log("name: ", this.name);
}
}
class B {
constructor(a) {
this.a = a;
}
start() {
this.a.log();
}
}
const a = new A();
const b = new B(a);
b.start();
代码只做了很小的改动,最核心的变化就是我们将 A 类和 B 的实现完全分离开来了,他们无需再关心依赖的实例化,因为我们将依赖的注入提到的最外侧。
Vue中的使用场景及规则
在 Vue.js 中,provide 和 inject 其实也使用了依赖注入的设计模式。
provide 属性可以用来在父组件中提供一个值,这个值可以在父组件的所有子组件中注入。
export default {
name: 'Parent',
provide() {
return {
user: this.user
};
},
data() {
return {
user: {
name: 'John',
age: 30
}
};
}
};
inject 属性可以用来在子组件中注入父组件提供的值。
// 子组件
export default {
name: 'Child',
inject: ['user'],
computed: {
userName() {
return this.user.name;
}
}
};