Question

我要在ES6中重写一个应用程序（最初是在原始JS中使用的），

在很短的时间内，我一开始就意识到要努力完成“关注点分离”，因为如果我们要在ES6中应用数据隐私，那么我们只会使用“ {}”，而不会使用IIFE，就像香草一样JS（实际上是函数表达式）。

Vanilla JS解决方案：

var budgetController = (function() {

    const x = 20;

    function add(a) {
        return x + a;
    }   

    return {
        getSum: function(b){
            console.log(add(b));
        } 
    }
})();



UIController = (function() {

    // some code

})();



Controller = (function(BudgetCrtl, UICtrl) {

    var n = BudgetCrtl.getSum(3);
    console.log(n);

})(budgetController, UIController);

在ES6中，我试图使用简单的func表达式而不是IIFE来传递控制器模块中的其他模块，并能够使用/传递公共方法，但这并不起作用。

ES6尝试：

let budgetController = function() {
    const x = 20;
    function add(a) {
        return x + a;
    }   
    return {
        getSum: (b) => console.log(add(b))
    }
}



UIController = function() {
    // some code
}



Controller = function(BudgetCrtl, UICtrl) {
    const n = BudgetCrtl.getSum();
    console.log(n);
}
Controller(budgetController, UIController);

有人可以为我提供一些解决方案，以某种方式将ES6所谓的封装和上述内容包括在内吗？任何想法将不胜感激！干杯，谢谢！

Answer 1

您需要执行BudgetCrtl来访问getSum这样的BudgetCrtl().getSum(3)函数，因为BudgetCrtl是一个函数，而不是
从执行返回的值。

如果您希望将值存储到n，则不应立即console.log在arrow函数中，因为现在它隐含地返回undefined

let budgetController = function() {
    const x = 20;
    function add(a) {
        return x + a;
    }   
    return {
        getSum: (b) => {
          let newVal = add(b)

          console.log(newVal)

          return newVal // so that you can store the value in `n`
        }
    }
}



UIController = function() {
    // some code
}



Controller = function(BudgetCrtl, UICtrl) {
    const n = BudgetCrtl().getSum(3);
    console.log(n);
}
Controller(budgetController, UIController);

模块模式-关注点分离-ES6中的封装

1 个答案: