使用javascript创建动态内容的最佳方法是什么？ [英] Best way to create dynamic content using javascript?

问题描述

重要的是，如果我创建元素并以编程方式设置元素属性，就像在代码片段1中写出innerHTML的代码片段一样？根据其中一个答案建议使用模板库怎么样？

  var link_element，
 image_element; 
 
 //创建图像元素
 
 image_element = $ A.createElement（'img'）; 
 image_element.className =bookmark_image; 
 image_element.name =bo_im; 
 image_element.src = bookmark_object.favicon; 
 
 //创建链接元素
 
 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; 
 
 //现在追加
  

snippet 2

 '< img name =bo_im class =bookmark_imagesrc ='+ val.favicon +'> '+ 
'< a target =_ blankname =bookmark_linkclass =bookmark_linkhref ='+ val.url +'id ='+ val.id +'>' + val.title +'< / a>'+ 
 
 //设置为innerHTML现在
  

<解决方案一个非常好的（IMO）解决方案是使用某种模板库。一个常用的选项是小胡子，其中有多种语言的图书馆包括JavaScript 。

模板方法包括用占位符编写HTML，例如< script>


 <！ - 非常简单的示例 - > 
< script id = 书签，TEMPL atetype =text / html> 
< img name =bo_imclass =bookmark_imagesrc ={{favicon}}> 
< a target =_ blankname =bookmark_linkclass =bookmark_linkhref ={{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。

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

Does it matter if I create the element and set the element attributes programmatically as in snippet 1 verses writing out the innerHTML as in snippet 2? What about using a templating library as suggested in one of the answers?

snippet 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

snippet 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

解决方案

A very good (IMO) solution to this problem is to use some sort of template library. One popular option would be Mustache, which has libraries for many languages including JavaScript.

The template approach consists of writing your HTML with placeholders in, e.g., a <script> tag:

<!-- 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>

Then when it comes time to render your dynamic content, you use the template and provide data to populate it accordingly:

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

To illustrate this more clearly, here is a jsFiddle demonstrating this approach (including the benefit of escaping).

There are at least a couple of benefits to doing things this way:

1. Using a template lets you actually write HTML—with indentation, formatting, etc., to make it as readable as possible—rather than just "almost just copy it over", as you say in your question. You don't need to write one big string, or concatenate a bunch of strings with +, or use + at all for that matter.
2. A good templating library will properly escape your HTML for you.

To me, those benefits along are enough. You may feel differently.

这篇关于使用javascript创建动态内容的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！