Нужна помощь в понимании основ шаблона JS-модуля

Question

Я пытаюсь организовать свой код, используя шаблон модуля выявления. У меня есть очень простой вопрос о том, как настроить метод установки.

$(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 в выводе консоли, вместо этого я получаю undefined! У меня такое чувство, что я делаю что-то довольно глупое здесь.

Answer 1

Вы также можете решить эту проблему другим способом, понимая области действия переменных и функций.

Когда вы возвращаете конструктор объекта { 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 членом возвращаемого вами объекта, вероятно, проще, но другойСпособ также полезен, так как вы можете использовать его для эффективного создания закрытых членов и методов .

Answer 2

Похоже, вы хотите объект, а не модуль:

$(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);
});

Answer 3

Как указывал ruakh, вы никогда не будете повторно присваивать curRow возвращаемому объекту, поэтому это всегда значение по умолчанию.Измените его на:

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

И все должно работать *.

* По крайней мере, в основном - вы не сможете использовать call и apply наsetCurRow (или передать его в setTimeout или setInterval без привязки его сначала к вашему объекту (designs), поскольку this привязывается во время вызова в JavaScript.

Answer 4

Проблема в том, что setCurRow устанавливает значение переменной curRow после того, как designs.curRow уже было установлено. Рассмотрим что-то вроде этого:

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

Ваш код делает то же самое, но с объектными свойствами и методами установки, чтобы он выглядел сложным. : -)