JavaScript - 模塊對象語法

Question

我似乎搞亂了一些括號，逗號，分號。它們在Emacs中突出顯示爲不正確。我想這就是爲什麼它不起作用。我似乎迷失在花括號，逗號和分號中。我評論哪些部分高亮顯示紅色表示語法錯誤。

var myGallery = (function() { 
    var s; 

    return { 

     settings: { 
      data: JSON.parse(data), 
     filter: document.getElementById("filter"), 
     gallery: document.getElementById("gallery") 
     }, 

     init: function() { 
      // kick things off 
      s = this.settings; 
     // By default, call the fillImages function with 'all' tag 
     this.createFilters("all"); 
     }, 
     createFilters: function(tag) { 
     // Load the image data 
     // I made imgs global as I couldn't access it from displayImg 
     imgs = this.settings.data.images; 

     // Get image tags and generate a tag array 
     var tags = ["all"]; 

     for(var i = 0; i < Object.keys(imgs).length; i++) { 
     // Check if a tag is already in tags 
     if (tags.indexOf(imgs[i].tag) > -1) { 
      // Yes, it is, so don't add it 
     } else { 
      // No, it isn't, so add it to 'tags' 
      tags.push(imgs[i].tag); 
     } 
     } 
     // Create an unordered list, assign a class to it and append to filter 
     var ul = document.createElement('ul'); 
     ul.classList.add("ul-bare"); 
     this.settings.filter.appendChild(ul); 


     // Iterate over the array and append each element as li 
     for(var i = 0; i < tags.length; i++) { 
     var li=document.createElement('li'); 
     ul.appendChild(li); 
     li.innerHTML=tags[i]; 
     li.onclick = (function(x){ 
      return function() { 
      this.displayImg(tags[x]); 
      })(i); // the first) is highlighted in red 
     } 
    }, // both the curly brace and the comma are highlighed in red 

    displayImg: function(filter) { 
     // Add images to #gallery 
     for(var i = 0; i < Object.keys(imgs).length; i++) { 
     var div = document.createElement("img"); 
     // If the tage is 'all', display all images 
     if (filter === "all") { 
      div.src = imgs[i].src; 
      this.settings.gallery.appendChild(div); 
     } else { 
      // Display only images of certain category (tag argument) 
      if (imgs[i].tag === filter) { 
      div.src = imgs[i].src; 
      this.settings.gallery.appendChild(div); 
      } 

     } 
     } 

     } 
    }; // the semi colon is highlighted in red 
}()); 

myGallery.init(); 

編輯： 看來，一切都歸結於我的關閉。一旦我註釋掉這一部分，一切都很好：

//li.onclick = (function(x){ 
// return function() { 
// this.displayImg(tags[x]); 
// })(i); 

編輯2：

所以，我有以下幾點：

li.onclick = (function(x) { 
     return function() { 
     console.log(tags[x]); 
     this.displayImg(tags[x]); 
     }; 
    })(i); 

該工程完全按照預期如果我只想要打印標籤[x]，但是如果我添加第二個語句this.displayImg ....，那麼我得到this.displayImg不是函數的錯誤。

請指教。

謝謝。

Answer 1

// ... 

li.onclick = (function(x){ 
    return (function() { 
     this.displayImg(tags[x]); 
    }) 
})(i); 

// ...