Question

我正在编写一个带有客户端JS的应用程序，我用它来合理地更新DOM。

事情就是这样做：

$('#id').html('<div class="' + class + '">' + content + '</div>');

多次并且让HTML随意地围绕着JavaScript而不是很漂亮且难以维护。

对于Lithium在其视图帮助程序中处理此问题的方式，是否存在JavaScript等效（或替代解决方案）。

请参阅：

例如。

基本上在PHP版本中，您将创建一个常用字符串的关联数组，并使用一个简单的方法替换这些字符串中某些标记部分的同名变量。

另一个愚蠢的例子（伪代码:)

var strings = {
    'div': '<div {:attr}>{:content}</div>'
};
console.log(render('div', {id: 'newElem'}, 'Hello, World!'));
// Output: <div id="newElem">Hello, World!</div>

如果您对如何处理在JavaScript中存储HTML并使其无法在整个地方进行处理有任何更好的建议，那么我非常希望听到它。

Answer 1

是的，请使用jQuery templates或Underscore templates ~~（我最喜欢的）~~或其他任何JS templating engine。

另外，请查看此问题，以获得有关模板引擎性能的讨论：Improve jQuery template performance

Answer 2

如果您不想使用模板系统，并且必须多次创建许多html片段，那么您可以使用其他技术：

在主html文件中创建一个div，为其指定一个特定的css类或id
使用css，使此div不可见
里面是div，创建“模板”div，每个div将包含一个“片段”，每个片段都有正确的类或id
在需要时使用js（jquery，无论如何），克隆“template”div，将其附加到需要的位置，然后自定义它。

使用jquery非常简单，任何html设计师都可以使用你的模板“divs”。

我现在在移动设备上，发布代码片段有点困难，但如果想要一些例子，请告诉我。

Answer 3

jQuery鼓励您动态构建DOM节点，而不是进行字符串连接：

$("#id").html(
    $("<div />").addClass(class).text(content))

通常，您可以使用jQuery attribute methods来构造此类节点，其中许多方法都可以按照您的喜好进行映射。例如：

$("#id").append(
    $("<div />")
        .attr({id: "newElem"})
        .css({width: "100%", color: "red"}))

使用JavaScript的模板字符串

3 个答案: