ES6模块的依赖注入

Question

I have a question about dependency injection and best practices when using ES6 modules which are meant to be created often.

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

I definitely don't like what I have written here in my opinion. Is there a better way to do that ?

Answer 1

So, dependency injection removes the tight coupling between the ProductModule and CartModule in your case. You should inject the cart module in the constructor of the product module. Doing this will decouple your code.

constructor (private cart: CartModule) {}

Lets suppose in future you have 2 types of cart - wishlist cart and shopping cart. Then because you have used dependency injection in product module, you can pass any of the above cart into that and depending on that the product module will add the products to that cart. This results in extensibility of the product module you have created.