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で表されるすべての新しいコンテンツに対して1つの文字列を作成すると、パフォーマンスが最大に向上します。

私の意見では、フラグメントは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 に答える