重要的是,如果我创建元素并以编程方式设置元素属性,就像在代码片段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> $ c
<! - 非常简单的示例 - > < 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 ,演示了这种方法(包括转义的好处)。
至少有几个这样做的好处是:
对我来说,这些好处是足够的。你可能会有不同的感觉。
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 nowsnippet 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:
To me, those benefits along are enough. You may feel differently.
更多推荐
使用javascript创建动态内容的最佳方法是什么?
发布评论