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

Posted 2023-05-07

【中文标题】与 JavaScript 和 DOM 的重复代码作斗争

【英文标题】：Struggling with repeating code with JavaScript and DOM

【发布时间】：2015-07-07 10:37:35

【问题描述】：

对于一项任务，我需要创建一个根据用户偏好输出手机合同的网站。我目前被困在作业的 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);

    

;

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

【问题讨论】：

构建一个封装了on item逻辑的函数，调用带有参数的函数（可能在循环中）。

【参考方案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);

【讨论】：

感谢您的帮助，我已经尝试使用您的代码并让它在 document.write() 中工作，但是我仍在努力创建元素并让它们附加。我不太确定自己做错了什么，到目前为止，这是我的代码：jsfiddle.net/zspeqb9v

嘿 Sam，看看这个更新的 jsfiddle：jsfiddle.net/zspeqb9v/2。我的示例中有一些语法错误，因此我更正了这些错误。你循环合同的方式有一个错误，所以我也修复了这个问题。您应该能够比较 2 个 jsfiddles 以找出差异

再次感谢您的帮助，我现在已经解决了这个问题。我还有一个问题是它总是输出对象中的第一个合同，但我自己设法解决了这个问题，原因是我在两个循环中都使用了变量“i”，所以我只是改变了循环之一的变量。

【参考方案2】：

您应该查看Backbone 和Dust。它们将帮助您模板化您尝试编写的 HTML。