Question

我经常遇到一种情况，我想要修改，甚至使用JavaScript将整个HTML块插入到页面中。通常它还涉及根据某些参数动态更改HTML的几个部分。

然而，它可能会造成混乱/不可读的代码，而且我的JavaScript代码中包含这些HTML小片段似乎是不对的。该死的。

那么，有哪些技巧可以避免混用HTML和JavaScript？

Answer 1

Dojo工具包有一个非常有用的系统来处理HTML片段/模板。我们可以说HTML代码段mycode/mysnippet.tpl.html类似于以下内容

<div>
  <span dojoAttachPoint="foo"></span>
</div>

注意dojoAttachPoint属性。然后，您可以使用HTML代码段作为模板制作小部件mycode/mysnippet.js：

dojo.declare("mycode.mysnippet", [dijit._Widget, dijit._Templated], {
  templateString: dojo.cache("mycode", "mysnippet.tpl.html"),

  construct: function(bar){
    this.bar = bar;
  },
  buildRendering: function() {
    this.inherited(arguments);
    this.foo.innerHTML = this.bar;
  }
});

给定附加点属性的HTML元素将成为窗口小部件代码中的类成员。然后，您可以像这样使用模板化小部件：

new mycode.mysnippet("A cup of tea would restore my normality.").placeAt(someOtherDomElement);

一个很好的功能是，如果你使用dojo.cache和Dojo的构建系统，它会将HTML模板文本插入到javascript代码中，这样客户端就不必单独发出请求。

这当然对你的用例来说太过臃肿，但我发现它非常有用 - 而且因为你要求技术，那就是我的。 Sitepoint也有一个nice article。

Answer 2

有许多可能的技术。也许最明显的是在页面上拥有所有元素，但让它们hidden - 然后你的JS可以简单地取消隐藏它们/根据需要显示它们。在某些情况下，这可能是不可能的。如果您需要添加一个（未指定的）重复元素（或元素组），该怎么办？然后可能有问题hidden的元素，并使用类似jQuery's clone的函数将它们根据需要插入到DOM中。

或者，如果你真的必须动态构建HTML，那么一定要让自己的类来处理它，这样你就不会在你的代码中散布片段了。您可以使用jQuery literal creators来帮助完成此操作。

Answer 3

我不确定它是否有资格作为“技术”，但我通常倾向于通过简单地通过AJAX从后端加载相关块并使用JavaScript交换它们来避免在JavaScript中构建HTML块。根据需要输出/放置它们。（即：没有一个低级文本改组是在JavaScript中完成的 - 只是DOM操作。）

虽然您在后端架构的设计过程中当然需要考虑到这一点，但我不禁想到要设置得更清洁。

Answer 4

有时我利用自定义方法根据提供的JSON参数返回节点结构，并根据需要将该返回值添加到DOM。一旦JS无法使用，就像一些后端解决方案那样，它无法访问。

Answer 5

在阅读了一些回复之后，我设法使用Python / Django和jQuery提出了我自己的解决方案。

我将HTML代码段作为Django模板：

<div class="marker_info">
    <p> _info_ </p>
    <a href="{% url index %}"> more info... </a>
</div>

在视图中，我使用Django方法render_to_string将模板加载为存储在字典中的字符串：

snippets = { 'marker_info': render_to_string('templates/marker_info_snippet.html')}

关于这一点的好处是我仍然可以使用模板标签，例如url功能。我使用simplejson将其转储为JSON并将其传递给完整模板。我仍然想动态替换JavaScript代码中的字符串，所以我写了一个函数来用我自己的变量替换下划线包围的单词：

function render_snippet(snippet, dict) {

    for (var key in dict)
    {
        var regex = new RegExp('_' + key + '_', 'gi');
        snippet = snippet.replace(regex, dict[key]);
    }

    return snippet;
}

避免在JavaScript中构建HTML字符串的技巧？

5 个答案: