template模板字符串

在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 += "<h2>" + arr[i].title + "</h2><div>" + arr[i].log + "</div>";

此种方式，在dom结构简单的时候可行，但是当要上树的dom结构复杂的时候，单行字符串拼接很可能会看不清楚标签的嵌套关系，修改不方便

3. template模板字符串

underscore使用template模板字符串

template_.template(templateString, [settings])

扫描二维码关注公众号，回复： 1947477 查看本文章

将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。模板函数可以使用 <%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码。如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>。当你要给模板函数赋值的时候，可以传递一个含有与模板对应属性的data对象。如果您要写一个一次性的, 您可以传对象 data 作为第二个参数给模板 template 来直接呈现, 这样页面会立即呈现而不是返回一个模板函数. 参数 settings 是一个哈希表包含任何可以覆盖的设置 _.templateSettings.

var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"

var template = _.template("<b><%- value %></b>");
template({value: '<script>'});
=> "<b>&lt;script&gt;</b>"

自定义方法使用模板字符串，需要三个步骤：

步骤一：根据最终渲染出的dom结构定义模板字符串

定义模板的方式：

1. 先在真实的dom结构中使用假数据将结构与样式调整完毕。

2. 将调整完毕的html代码放在一个被改变了type类型无法执行的script标签内(最好是 type="text/template")。

3. 挖空假数据，使用特殊标签将假数据部分代替，并写入字典中目标数据的层级关系。

例如，underscore中的template模板字符串

先在真实的dom结构中使用假数据将结构与样式调整完毕

将调整完毕的html代码放在无法执行的script标签内(type="text/template")

挖空假数据，使用特殊标签<%=%>将假数据部分代替，而且underscore模板字符串中可以使用模板语法

<script type="text/template" id="template">
	<div>
		<span><%=name%></span>
		<span><%=age%></span>
		<span><%=sex%></span>
		<div>
			<span><%=wife.name%></span>
			<span><%=wife.age%></span>
			<span><%=wife.sex%></span>
			<div>
				<span><%=wife.son.name%></span>
				<span><%=wife.son.age%></span>
				<span><%=wife.son.sex%></span>
			</div>
		</div>
	</div>
</script>

步骤二： 定义格式化函数

自定义格式化函数

/*
 * @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;

template模板字符串

2. 单行字符串拼接

猜你喜欢