简单封装template.js

1.先来一个例子:

<scripttype="text/html"id="template">

<ul>

<li>{{name}}</li>

<li>{{skill}}</li>

</ul>

</script>

<script>

var data = {

name: 'jack',

skill: 'jump'

}

var templateDom =document.getElementById('template');

var string =templateDom.innerHTML;

var reg = /{{(\w+)}}/;

var result =reg.exec(string);

while (result) {

string = string.replace(result[0],data[result[1]]);

result = reg.exec(string);

}

document.body.innerHTML =string;

</script>

结果:

• jack
• jump

2.进行函数封装:

function template(id,data) {

var templateDom =document.getElementById(id);

var string =templateDom.innerHTML;

var reg = /{{(\w+)}}/;

var result =reg.exec(string);

while (result) {

string = string.replace(result[0],data[result[1]]);

result = reg.exec(string);

}

return string;

}

进行调用一下:

document.body.innerHTML =template('template', {

name: 'rose',

skill: 'beautiful'

});

结果:

• rose
• beautiful

3.注意事项:

<scripttype="text/html"id="template">

<ul>

<li>{{name}}</li>

<li>{{skill}}</li>

</ul>

</script>

a.上面{{}}里面的内容要根据data的key来设置;

b.type只要不为text/javascript,html可以换成其他的名字,如test,但设置为html,编辑器可实现代码自动提示以及高亮的效果;

c.必须给定一个id(id具有唯一性),调用函数时通过id获取对应作用元素.

var reg = /{{(\w+)}}/;

var result = reg.exec(string);

console.log(result);

d.打印出来的result注意理解(正则表达式exec方法);

4.大神做的template可见:https://aui.github.io/art-template/docs/