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 回答