Question

在使用本应经常创建的ES6模块时，我对依赖注入和最佳实践存在疑问。

// 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

因此，依赖注入在您的情况下消除了ProductModule和CartModule之间的紧密耦合。您应该将cart模块注入到product模块的构造函数中。这样做将使您的代码解耦。

constructor (private cart: CartModule) {}

让我们假设您将来有两种类型的购物车-愿望清单购物车和购物车。然后，由于您在产品模块中使用了依赖项注入，因此您可以将上述购物车中的任何一个传递到该购物车中，并取决于产品模块会将产品添加到该购物车中。这样可以使您创建的产品模块具有可扩展性。

ES6模块的依赖注入

1 个答案: