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

如果你想使這個真正模塊化，我建議通過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 

Answer 2

您指定的更新應該採取一個參數 - 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