Question

我想在这个简单的应用程序中使用模块模式，您可以在其中搜索国家/地区，并显示一些城市。我已经阅读过有关模块模式的内容，它似乎是一个有用的东西。

我需要一些语法方面的帮助。我写的是我认为是正确的，但它没有用，所以我评论了它，有人可以尝试向我解释如何在我自己的例子中使用它，我更容易理解。您可以在下面看到我尝试过的代码。

＆＃34; searchElements＆＃34;和＆＃34; getAllElements＆＃34;是我想要在模块文件中使用的函数，以及JSON对象。

https://codepen.io/anon/pen/gWVeZO?editors=1010

// var search_elements = (function(){

var searchElements = 
document.getElementById("btn").addEventListener("click", (e) => {
container.innerHTML = "";
e.preventDefault();
var innerDiv = document.getElementsByTagName("div");
var input = document.getElementById("input").value;

for(var i = 0; i < arrayList.length; i += 1) {
    target = arrayList[i].land.toLowerCase();

    if(input.toLowerCase() === target.toLowerCase()) {
        var newCard = document.createElement("div");
        var landElement = document.createElement("P");
        var landContent = document.createTextNode(arrayList[i].land);
        landElement.appendChild(landContent);
        var byElement = document.createElement("h3");
        var byContent = document.createTextNode(arrayList[i].by);
        byElement.appendChild(byContent);
        var img = document.createElement("img");
        img.setAttribute("src", arrayList[i].img);
        newCard.appendChild(img);
        newCard.appendChild(landElement);
        newCard.appendChild(byElement);
        container.appendChild(newCard);
    } else {
        continue;
    }
}

return {
  searchElements: searchElements
 }
});


// var get_all = (function(){

var getAllElements = 
document.getElementById("btnTwo").addEventListener("click", (e) => {
container.innerHTML = "";
e.preventDefault();
var innerDiv = document.getElementsByTagName("div");

for(var getAll = 0; getAll < arrayList.length; getAll += 1){
    var newCard = document.createElement("div");
    var landElement = document.createElement("P");
    var landContent = document.createTextNode(arrayList[getAll].land);
    landElement.appendChild(landContent);
    var byElement = document.createElement("h3");
    var byContent = document.createTextNode(arrayList[getAll].by);
    byElement.appendChild(byContent);
    var img = document.createElement("img");
    img.setAttribute("src", arrayList[getAll].img);
    newCard.appendChild(img);
    newCard.appendChild(landElement);
    newCard.appendChild(byElement);
    container.appendChild(newCard);
}

return {
  getAllElements: getAllElements
}
});

模块模式，我该怎么办？

0 个答案: