javascript - ES6 模块的依赖注入(inject)

Question

我对使用经常创建的 ES6 模块时的依赖注入(inject)和最佳实践有疑问。

// ProductModule.js

import {CartModule} from './CartModule.js';

export class ProductModule {
    constructor() {
        this.cartModule = new CartModule();
    }

    addToCartListener() {
        $('.product-add-cart')
            .on('click', (event) => {
                this.cartModule.addToCart(46773, 1);
            })
        ;
    }      
}

// CartModule.js

import {UserModule} from './UserModule.js';
import {OtherModule} from './OtherModule.js';

export class CartModule {
    constructor() {
        this.userModule = new UserModule();
        this.otherModule = new OtherModule();
    }

    addToCart(idProduct, quantity) {
        this.userModule.function();
        this.otherModule.function();

        console.log(idProduct, quantity);

        return true;
    }      
}

在我看来，我绝对不喜欢我在这里写的东西。有更好的方法吗？

Answer 1

因此，在您的案例中，依赖注入(inject)消除了 ProductModule 和 CartModule 之间的紧密耦合。您应该在产品模块的构造函数中注入(inject)购物车模块。这样做会解耦您的代码。

constructor (private cart: CartModule) {}

假设将来您有两种类型的购物车 - 心愿单购物车和购物车。然后因为您在产品模块中使用了依赖注入(inject)，您可以将上述任何购物车传递给它，并且产品模块将根据该产品将产品添加到该购物车。这导致您创建的产品模块具有可扩展性。