移动web开发—— 模板引擎详解
2017-02-16 本文已影响0人
believedream
很多人对于 underscore 模板引擎 不是很了解，但是他却十分重要，在许多框架中 ，渲染html 都是以 模板 引擎为基础的。因此在这里分析下模板引擎的原理。
使用例子说明:
1.假如我们在body里面写成这个样子：
<ul id='fruit'>
<li><%=fruitname%></li>
</ul>
估计很多人会很疑惑这是啥？？，恩恩，其实这个就是相当于一个模板擎，<%=fruitname%>这个东西 就是模板引擎需要解析的 解析成浏览器可以认识的东西。
2.接下来我们写js
<script>
//定义一个水果数组
var fruit=['西瓜','草莓','蓝莓'];
//1.获取页面中的节点
var my=document.querySelector('#fruit')
//2.得到节点里面的内容
var f=document.querySelector('#fruit').innerHTML;
// 定义一个解析<%=fruitname%> 模板的函数
function jeixi(fruit,str){
//使用正则表达式来解析 模板
var exp=new RegExp('<%=fruitname%>');
var li='';
for(k in fruit){
// console.log(k);
li+=str;
li=li.replace(exp,fruit[k]);
}
my.innerHTML=li;
}
jeixi(fruit,f); //调用函数 解释模板
</script>
代码演示：
20170216185853.png
我们发现原本 <li><%=fruitname%></li> 竟然全部渲染成为了 数组的内容。这个就是我们定义函数 jiexi 的功能。 当然 underscroe 模板引擎 不会写的这么简单，我这里只是分析了一下他的原理。 主要运用的就是正则表达式。
下面贴出完整的代码， 大家可以复制研究(复制可以直接运行)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<ul id='fruit'>
<li><%=fruitname%></li>
</ul>
</body>
<script >
var fruit=['西瓜','草莓','蓝莓'];
var my=document.querySelector('#fruit')
var f=document.querySelector('#fruit').innerHTML;
// console.log(f);
function jeixi(fruit,str){
var exp=new RegExp('<%=fruitname%>');
var li='';
for(k in fruit){
// console.log(k);
li+=str;
li=li.replace(exp,fruit[k]);
}
my.innerHTML=li;
}
jeixi(fruit,f);
</script>
</html>
