Javascript 需要一些帮助来理解JS模块模式的基础知识吗_Javascript_Jquery_Module_Closures

Javascript 需要一些帮助来理解JS模块模式的基础知识吗

javascript jquery module

Javascript 需要一些帮助来理解JS模块模式的基础知识吗,javascript,jquery,module,closures,Javascript,Jquery,Module,Closures,我试图使用显示模块模式组织代码。关于如何设置setter方法，我有一个非常基本的问题 $(document).ready(function() { var designs = (function() { var curRow, setCurRow = function(val) { curRow = val; }, initTable = func

我试图使用显示模块模式组织代码。关于如何设置setter方法，我有一个非常基本的问题

$(document).ready(function() {  
    var designs = (function() {  
        var curRow,  
            setCurRow = function(val) {  
                curRow = val;  
            },
            initTable = function() {  
                setCurRow(0);
            };
        return {
            curRow : curRow,
            setCurRow : setCurRow,
            initTable : initTable
        }
    }) ();  
    designs.initTable();  
    designs.setCurRow(someNewVal);
    console.log(designs.curRow);
});

问题是我没有在控制台输出中获得someNewVal，而是获得了

未定义的

！我觉得我在做一些很愚蠢的事情。

问题是

setCurRow

在

designs之后设置变量curRow
的值。curRow

已经设置好了。考虑这样的事情：

var a = 1;
b = a; // sets b = a = 1
b = 2; // sets b = 2; leaves a = 1

您的代码也在做同样的事情，但是使用了对象属性和setter方法使其看起来很复杂。：-）

问题在于

setCurRow

在

designs之后设置变量curRow
的值。curRow

已经设置。考虑这样的事情：

var a = 1;
b = a; // sets b = a = 1
b = 2; // sets b = 2; leaves a = 1

您的代码也在做同样的事情，但是使用了对象属性和setter方法使其看起来很复杂。：-）

看起来您想要的是对象，而不是模块：

$(document).ready(function() {  
    var designs = {
            setCurRow: function(val) {  
                this.curRow = val;  
            },
            initTable: function() {  
                this.setCurRow(0);
            },
            curRow: 0
    };  
    designs.initTable();  
    designs.setCurRow(someNewVal);
    console.log(designs.curRow);
});

看起来您想要的是对象，而不是模块：

$(document).ready(function() {  
    var designs = {
            setCurRow: function(val) {  
                this.curRow = val;  
            },
            initTable: function() {  
                this.setCurRow(0);
            },
            curRow: 0
    };  
    designs.initTable();  
    designs.setCurRow(someNewVal);
    console.log(designs.curRow);
});

正如ruakh指出的，您永远不会对返回的对象重新分配

curRow

，因此它始终是默认值。将其更改为：

setCurRow = function(val) {  
    this.curRow = curRow = val;  
},

一切都应该正常

至少大部分-如果不先将其绑定到对象（

设计

），您将无法在

setCurRow

上使用

调用

和

应用

（或将其传递到

setTimeout

或

setInterval

），因为此在JavaScript中是在调用时绑定的。

正如ruakh指出的，您永远不会对返回的对象重新分配

curRow

，因此它始终是默认值。将其更改为：

setCurRow = function(val) {  
    this.curRow = curRow = val;  
},

一切都应该正常

至少大部分-如果不先将其绑定到对象（

设计

），您将无法在

setCurRow

上使用

调用

和

应用

（或将其传递到

setTimeout

或

setInterval

），因为这个在JavaScript中是在调用时绑定的。

您也可以通过了解所涉及的变量和函数的范围，以另一种方式解决这个问题

当您返回对象构造函数

{curRow:curRow…}

时，它只是将名为

curRow

的对象成员初始化为匿名函数范围内变量

curRow

的值；它不会在它们之间创建任何持久连接

一旦匿名函数返回，调用

designs.setCurRow

将按照您的预期完全更新该范围内的

curRow

变量，但是外部世界现在完全无法访问该变量——它与设计的

curRow

成员之间没有任何连接

您可以通过使

setCurRow

方法对

this.curRow

进行操作来解决此问题，就像在其他解决方案中一样。在这种情况下，您不需要将

curRow

作为原始范围内的变量，因为它完全未使用。另一种解决方案是在当前方法中添加一个“getter”方法：

var designs = (function() {  
    var curRow,  
    setCurRow = function(val) {  
        curRow = val;  
    },
    getCurRow = function() {
        return curRow;
    },
    initTable = function() {  
        setCurRow(0);
    };
    return {
        getCurRow : getCurRow,
        setCurRow : setCurRow,
        initTable : initTable
    };
}) ();  
designs.initTable();  
designs.setCurRow(someNewVal);
console.log(designs.getCurRow());

由于

getCurRow

和

setCurRow

是在包含变量

varRow

的作用域中关闭的函数，因此它们可以返回到该作用域，并访问和更改仅在该作用域中可访问的变量

在这种情况下，使

curRow

成为您返回的对象的成员可能更简单，但另一种方法也很有用，因为您可以使用它有效地创建对象。

您还可以通过了解所涉及的变量和函数的范围，以另一种方法解决此问题