简单封装template.js

1.先来一个例子:

< script type= "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.注意事项:

< script type= "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/