5

如果我创建元素并像片段 1 那样以编程方式设置元素属性，还是像片段 2 那样写出 innerHTML，这是否重要？使用答案之一中建议的模板库怎么样？

片段 1

var link_element,
    image_element;

// create image element

image_element = $A.createElement('img');
image_element.className = "bookmark_image";
image_element.name = "bo_im";
image_element.src = bookmark_object.favicon;

// create link element

link_element = $A.createElement('a');
link_element.innerHTML = bookmark_object.title;
link_element.href = bookmark_object.url;
link_element.name = "bookmark_link";
link_element.className = "bookmark_link";
link_element.target = "_blank";

// append now

片段 2

'<img name="bo_im class="bookmark_image" src="' + val.favicon + '">' +
'<a target="_blank" name="bookmark_link" class="bookmark_link" href = "' + val.url + '" id="' + val.id + '">' + val.title + '</a>' +

// set to innerHTML now
4

2 回答 2

3

这个问题的一个非常好的（IMO）解决方案是使用某种模板库。一种流行的选择是Mustache，它有许多语言的库，包括 JavaScript。

模板方法包括编写带有占位符的 HTML，例如<script>标签：

<!-- very simple example -->
<script id="bookmark-template" type="text/html">
    <img name="bo_im" class="bookmark_image" src="{{favicon}}">
    <a target="_blank" name="bookmark_link" class="bookmark_link" href="{{url}}" id="{{id}}">
        {{title}}
    </a>
</script>

然后，当需要渲染动态内容时，您可以使用模板并提供数​​据以相应地填充它：

var template = document.getElementById("bookmark-template").textContent;
var html = Mustache.render(template, bookmark_object);

为了更清楚地说明这一点，这里有一个 jsFiddle演示了这种方法（包括转义的好处）。

以这种方式做事至少有几个好处：

  1. 使用模板可以让您实际编写 HTML（带有缩进、格式等，以使其尽可能具有可读性），而不是像您在问题中所说的那样“几乎只是复制它”。你不需要写一个大字符串，或者用 连接一堆字符串，或者根本不需要+使用+。
  2. 一个好的模板库会为您正确地转义您的 HTML。

对我来说，这些好处就足够了。你可能会有不同的感觉。

于 2013-06-14T16:55:49.977 回答
1

片段 2删除任何动态添加的事件，请参阅代码jsFiddle：

<div id="source">
  <div>item with click event</div>
</div>

<div id="target">
</div>

<script>
  var source = document.getElementById("source");
  var target = document.getElementById("target");
  source.children[0].onclick = alert.bind(null,"test");
  target.innerHTML = source.innerHTML; // onclick event is not copied
</script>

如果您不对创建的元素使用动态事件，请继续使用代码段 1：由于上面提到的“功能”，它似乎更快。

于 2013-05-28T19:27:15.337 回答