JS 模块化设计 - 上下文问题

Question

我才刚刚开始学习模块化设计原则，我相信我不了解其中一种方法的上下文。在控制台中，我得到 Uncaught TypeError: Cannot read property 'val' of undefined - line 19。如果重要的话，我正在使用 Firebase。

这是我的代码：

(function(){
    var UpdateTable = {
        resources: Resources,
        init: function(){
            this.cacheDom();
            this.render();
            this.update(snapshot); // Changed this line ///
        },
        render: function(){
            this.resources.on('value', this.update);
        },
        cacheDom: function(){
            this.$table = $('#resourceTable');
        },
        update: function(snapshot){
            console.log(snapshot.val());
            for(var resource in this.resources){
                this.$table.append('<tr><td>' + this.resources[resource].name + '</td><td>' + this.resources[resource].language + '</td></tr>');
            }
        }
    };
    UpdateTable.init();
})();

Answer 1

您指定更新应采用参数 - shapshot - 但不在 init() 中传递它。当你给函数一个参数时，它是一个隐式变量声明。

var args = 1;
function f(args) {
    console.log(args);
}

f();
// => 'undefined'

相反你想要：

var args = 1;
function f() {
    console.log(args); // args now looks to the outer scope
}

f();
// => 1

或

var args = 1;
function f(args) {
    console.log(args); 
}

f(args);  // args is explicitly passed in
// => 1

Answer 2

如果你想让它真正模块化，我建议将 snapshot 作为你的模块的参数传递。这将解决您的问题。

(function(snapshot){ // <----- Here I receive snapshot from the invoker
    var UpdateTable = {
        resources: Resources,
        init: function(){
            this.cacheDom();
            this.render();
            this.update(snapshot); // Changed this line ///
        },
        render: function(){
            this.resources.on('value', this.update);
        },
        cacheDom: function(){
            this.$table = $('#resourceTable');
        },
        update: function(snapshot){
            console.log(snapshot.val());
            for(var resource in this.resources){
                this.$table.append('<tr><td>' + this.resources[resource].name + '</td><td>' + this.resources[resource].language + '</td></tr>');
            }
        }
    };
    UpdateTable.init();
})(snapshot); // <---- Here I am passing snapshot from global context to the module context

JS 模块化设计 - 上下文问题

JS Modular Design - context issue

javascript

modular-design