在AJAX请求回数据之后，我们要将这些数据渲染到页面DOM树上。此时，我们有三种方式：
1. 创建元素
最最基本的方法
// 1 创建h2 var h2 = document.createElement("h2"); // 2 创建div var div = document.createElement("div"); // 3 设置innerHTML h2.innerHTML = arr[i].title; // 4 设置innerHTML div.innerHTML = arr[i].log; // 5 添加到li中 li.appendChild(h2); // 6 添加到li中 li.appendChild(div); // 以上代码可行，但是略繁琐，而且上树次数太多会引起多次重绘和回流。会影响效率。2. 单行字符串拼接
将所有的html元素，看成一个元素的内部文案，这样就将“创建元素”这个行为转变成“拼接字符串”。
str += "" + arr[i].title + "
" + arr[i].log + "
";此种方式，在dom结构简单的时候可行， 但是当要上树的dom结构复杂的时候，单行字符串拼接很可能会看不清楚标签的嵌套关系，修改不方便
3. template模板字符串
underscore使用template模板字符串
template_.template(templateString, [settings])
将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。 模板函数可以使用 <%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码。 如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>。 当你要给模板函数赋值的时候，可以传递一个含有与模板对应属性的data对象 。 如果您要写一个一次性的, 您可以传对象 data 作为第二个参数给模板 template 来直接呈现, 这样页面会立即呈现而不是返回一个模板函数. 参数 settings 是一个哈希表包含任何可以覆盖的设置 _.templateSettings.
var compiled = _.template("hello: <%= name %>"); compiled({name: 'moe'}); => "hello: moe" var template = _.template("<%- value %>"); template({value: '"
自定义方法使用模板字符串，需要三个步骤：
步骤一： 根据最终渲染出的dom结构定义模板字符串
定义模板的方式：
1. 先在真实的dom结构中使用假数据将结构与样式调整完毕。
2. 将调整完毕的html代码放在一个被改变了type类型无法执行的script标签内(最好是 type=”text/template”)。
3. 挖空假数据，使用特殊标签将假数据部分代替，并写入字典中目标数据的层级关系。
例如，underscore中的template模板字符串
先在真实的dom结构中使用假数据将结构与样式调整完毕
将调整完毕的html代码放在无法执行的script标签内(type=”text/template”)
挖空假数据，使用特殊标签<%=%>将假数据部分代替，而且underscore模板字符串中可以使用模板语法
步骤二：
定义格式化函数
自定义格式化函数
/* * @tpl 字符串模板 * @dic 数据字典 * @return 返回的是格式化好的字符串 */ function format(tpl, dic) { // 将tpl中所有的<%=xxx%>、 <%=xxx.xxx%>、<%=xxx.xxx.xxx%>找出来 // 定义正则表达式 var reg = /<%=((\w+)(\.\w+)*)%>/g; // 替换tpl中符合正则表达式描述的那些内容 return tpl.replace(reg, function(match, $1, $2, $3, $4) { // console.log($1); // $1是字典与模板的层级路径关系 我们需要按照该路径将数据提取出来并返回 // 第一步 按照.分割路径 var arr = $1.split("."); // 备份dic var result = dic; // console.log(arr); // 循环arr 并一层一层往下获取数据 for(var i = 0; i < arr.length - 1; i++) { // 将result指向下一层及 result = result[arr[i]]; } return result[arr[i]]; }); }步骤三：
使用格式化函数格式化template，并且添加到DOM结构
var aaa = format(str, data) document.body.innerHTML += aaa;发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/217792.html原文链接：https://javaforall.net
