与 JavaScript 和 DOM 的重复代码作斗争

Question

对于一项任务，我需要创建一个网站，根据用户的偏好输出移动 phone 合同。我目前停留在作业的 DOM 部分。

我想将结果输出到一个列表中，我已经做到了，尽管我确信有更好的方法可以使用更少的代码来完成。这是我目前所拥有的：https://jsfiddle.net/fn2ewtck/

我试图改进的代码是这样的：

function search() {
var userBrandCtrl = document.getElementById("userBrand");
var userBrand = userBrandCtrl.value;

var userModelCtrl = document.getElementById("userModel");
var userModel = userModelCtrl.value;

var userNetworkCtrl = document.getElementById("userNetwork");
var userNetwork = userNetworkCtrl.value;


for (var i = 0; cont.length; i++) {
    if (userBrand === cont[i].brand && userModel === cont[i].model && userNetwork === cont[i].network) {
        var body = document.body;

        var ulCont = document.createElement("ul");

        var liBrand = document.createElement("li");
        var liModel = document.createElement("li");
        var liNetwork = document.createElement("li");
        var liMins = document.createElement("li");
        var liTexts = document.createElement("li");
        var liData = document.createElement("li");
        var liUpfront = document.createElement("li");
        var liMonthly = document.createElement("li");
        var liLength = document.createElement("li");

        var textBrand = document.createTextNode("Brand: " + cont[i].brand);
        var textModel = document.createTextNode("Model: " + cont[i].model);
        var textNetwork = document.createTextNode("Network " + cont[i].network);
        var textMins = document.createTextNode("Mins: " + cont[i].mins);
        var textTexts = document.createTextNode("Texts: " + cont[i].texts);
        var textData = document.createTextNode("Data: " + cont[i].data);
        var textUpfront = document.createTextNode("Upfront: " + cont[i].upfront);
        var textMonthly = document.createTextNode("Monthly: " + cont[i].monthly);
        var textLength = document.createTextNode("Length: " + cont[i].length);

        liBrand.appendChild(textBrand);
        liModel.appendChild(textModel);
        liNetwork.appendChild(textNetwork);
        liMins.appendChild(textMins);
        liTexts.appendChild(textTexts);
        liData.appendChild(textData);
        liUpfront.appendChild(textUpfront);
        liMonthly.appendChild(textMonthly);
        liLength.appendChild(textLength);

        ulCont.appendChild(liBrand);
        ulCont.appendChild(liModel);
        ulCont.appendChild(liNetwork);
        ulCont.appendChild(liMins);
        ulCont.appendChild(liTexts);
        ulCont.appendChild(liData);
        ulCont.appendChild(liUpfront);
        ulCont.appendChild(liMonthly);
        ulCont.appendChild(liLength);

        body.appendChild(ulCont);

    }
}

};

我怎样才能做得更好？谢谢

Answer 1

您可以创建一个包含要从对象显示的属性的数组，然后像这样遍历它们：

var arr = ['brand', 'model', 'network', 'mins']
for (i = 0; i < arr.length; i++) {
    //Upercase first letter
    var label = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
    //create html elements
    var li = document.createElement("li"),
        text = document.createTextNode(label + ": " + cont[i][arr[i]]);
    li.appendChild(text);
    ulCont.appendChild(li);
}
//append to body after loop
body.appendChild(ulCont);

Answer 2

你应该看看 Backbone and Dust。他们会帮助您将您要编写的 HTML 模板化。

与 JavaScript 和 DOM 的重复代码作斗争

Struggling with repeating code with JavaScript and DOM

javascript

dom

appendchild

createelement

createtextnode