1

我有一个创建组件数组的函数。每个组件都是一个带有几个内部 div 的外部 div。

function createDivs(quizQuestions) {
    var returnElements = new Array();
    $.each(quizQuestions.questions, function(i, val){

    // create the div.
    quizDiv = $('<div class="questionContainer radius">')
    questionDiv = $('<div class="question"><b><span>QuestionText</span></b></div>');
    quizDiv.append(questionDiv);

    // Now change the question div text.
    questionDiv.text = val.question;
    answerDiv = $('<div class="answers">');
    // ...
    // ...
    // Now the answers.
    questionDiv.append(answerDiv);
    returnElements[i] = quizDiv;
});
return returnElements;

我通过 JSON，例如：

   {questions:[{"question":"Name the best Rugby team?",
   "answers":["Leinster", "Munster", "Ulster", "Connaught"],
   "correct_answer":"Leinster"},
   {"question":"Name the best DJ?",
   "answers":["Warren K", "Pressure", "Digweed", "Sasha"],
   "correct_answer":"Leinster"}]};

我想写一个简单的单元测试，这样我就可以测试返回的 div 数组是否有意义

有小费吗？

另外，我最好返回一个 DOM 组件还是只返回文本？后者更容易测试。

谢谢。

4

1 回答 1

1

不确定您要测试的确切内容，但在字符串中创建尽可能多的 html 以减少函数调用的性能要高得多。append 也很昂贵，因此最终为 JSON 表示的所有新内容创建一个字符串将是最大的性能提升。

在我看来，它还使代码更具可读性，因为片段的顺序与 html 编辑器中的顺序相同

示例（我的首选是创建所有字符串片段的数组，连接也常用）：

var newcontent = [];
$.each(quizQuestions.questions, function(i, val) {
    newcontent.push('<div class="questionContainer radius">');
    newcontent.push('<div class="question"><b><span>' + val.question + '< /span></b > < /div>');

    $.each(val.answers, function(idx, answer) {
        newcontent.push('<div class="answers">' + answer + '</div > ')
    })

    newcontent.push(' </div></div > ');
});

然后向 DOM 添加内容：

$('#someDiv').append( newcontent.join(''));

免责声明：未完全检查标签的正确关闭/嵌套。

于 2012-12-24T00:33:56.063 回答