Question

我认为我的方法难以理解，并且看起来很难看，因为它从JSON对象生成项目列表并将其添加到现有div中。

我的HTML：

<ul id='to-be-filled'> </ul>

我的javascript

myJson = [
    {
        "title": "First",
        "action": "1st"
    },
    {
        "title": "Second",
        "action": "2nd"
    },
    {
        "title": "Third",
        "action": "3rd"
    }
]


function genList(){
var outputList = '';

$.each(myJson, function() { 
  outputList += '<li>' + this.title + ': ' + this.action + '</li>'
});

$('#to-be-filled').html(outputList); //set the generated html string.
}

$(document).ready(function() {
  genList(); //init
});

结果在这里：http://jsfiddle.net/GxdA6/

如何改进这些附加html字符串的混乱，特别是我的实际代码有更复杂的DOM和JSON数据结构？

Answer 1

如果你需要做很多这样的客户端，我会考虑使用templates。该插件目前处于测试阶段，所以它可能会发生变化，但我认为它的基础设置非常好。或者你可以为jQuery使用另一个模板插件，有几个。我的主要信息不是“使用jQuery模板”，而是“使用模板”。： - ）

但是这个特定的插件正在出现并且背后有一些主要的力量。您可以通过两种不同的方式定义模板：将其作为script元素包含在文档中：

<script id="your-li-template" type="text/x-jquery-tmpl">
    <li>${title}: ${action}</li>
</script>

...然后你可以像这样检索和使用：

var t = $("#your-li-template");
var outputList = t.tmpl(myJson);

Live example

或者你可以在JavaScript代码中将其定义为一个字符串，然后稍微区别地使用它（我怀疑这个差异是它仍处于测试阶段的原因之一）：

// Compile it once
var t = $.template("<li>${title}: ${action}</li>");

// Use it as often as you need
var outputList = $.tmpl(t, myJson);

Live example

在这两种情况下，显然（从示例中）如果给它一个数组，它将反复评估数组中的每个项目对模板，所以你甚至不必循环。

Answer 2

Mustache似乎是一个很好的模板替代http://mustache.github.com/，您可以在javascript和服务器端脚本上使用它，因此您只需要为所有Web代码学习一个模板系统。

Answer 3

我已经阅读了许多建议你在做这类事情时不应该使用字符串连接的事情。相反，像这样的东西往往会带来显着的性能提升，特别是对于大量的元素：

var toAdd = [], i = -1;

$.each(myJson, function () {
  toAdd[++i] = '<li>';
  toAdd[++i] = this.title;
  toAdd[++i] = ': ';
  toAdd[++i] = this.action;
  toAdd[++i] = '</li>';
});

$('#to-be-filled').html(toAdd.join(''));

这是否有资格作为“更清洁”是一个艰难的决定。我个人已经习惯了语法并且发现它很容易处理，但它已经是6了。但性能肯定存在;我可以保证使用这种方法有效地添加数百个元素，而不会遇到超时或浏览器挂起。

Answer 4

这是使用数组而不是对象的不同版本。有时我发现对象比具有隐式字段位置的数组更混乱。您可以决定哪一个对您更有意义：

myJson = ["First", "1st", 
         "Second", "2nd", 
         "Third", "3rd"];

function genList(){
    var outputList = '';

    for (var i = 0; i < myJson.length; i++) { 
          outputList += '<li>' + myJson[i++] + ': ' + myJson[i] + '</li>'
}

$('#to-be-filled').html(outputList); //set the generated html string.
}

$(document).ready(function() {
  genList();
});

jsfiddle：http://jsfiddle.net/jfriend00/Fgx4V/

通过Jquery生成HTML的更好方法

4 个答案: