模板引擎

Template

iciba.com/template

目录

1. 字符串拼接
2. string format
3. 模板替换
4. 自制模板引擎
5. 常见模板引擎介绍

一个简单的需求

用 JS 『渲染』一个歌曲列表

1. 数据来自一个数组 songs
2. 不能写死在页面里

songs === [
   {name: '绅士', url: 'http://music.163.com/xxx', singer: '薛之谦'},
   {name: '刚刚好', url: 'http://music.163.com/yyy', singer: '薛之谦'},
   ...
]

最傻的办法 - 遍历

你必须要能想到一个最傻的办法

方案一：拼 HTML 字符串

方案二：构造 DOM 对象（也可以用 jQuery）

字符串格式化

before:

var li = '<li>' + songs[i].name + ' - ' + songs[i].singer + '</li>'

var li = stringFormat('<li>{0} - {1}</li>', songs[i].name, songs[i].singer)

after:

自己实现 stringFormat 函数！

模板引擎

var string = 
	'<div class=song-list>' +
	'  <h1>热歌榜</h1>' +
	'  <ol>'
	    <%for (var i=0; i<songs.length; i++) {%>
	    <li><%songs[i].name%> - <%songs[i].singer%></li>
	    <%}%>
	  </ol>' +
	'</div>'

var data = {
	songs: songs
}

var result = template(string, data)

document.body.innerHTML = result

字符串格式化的升级版

我们只需要传入 string 和 data

自己实现模板引擎

只有20行Javascript代码！手把手教你写一个页面模板引擎

第一版：替换变量

var TemplateEngine = function(tpl, data) {
    还没实现呢！
}

var template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>';

var data = {
    name: "Krasimir",
    age: 29
}

var string = TemplateEngine(template, data)

console.log(string)

预备知识

1. string.replace 替换字符串
2. regex.exec 正则、遍历、匹配

自己实现模板引擎

只有20行Javascript代码！手把手教你写一个页面模板引擎

第一版的实现

var TemplateEngine = function(tpl, data) {
    var regex = /<%([^%>]+)?%>/g;
    while(match = regex.exec(tpl)) {
        tpl = tpl.replace(match[0], data[match[1]])
    }
    return tpl;
} 

自己实现模板引擎

只有20行Javascript代码！手把手教你写一个页面模板引擎

第二版：更复杂的逻辑

var template = 
'My skills:' + 
'<%if(this.showSkills) {%>' +
    '<%for(var index in this.skills) {%>' + 
    '<a href="#"><%this.skills[index]%></a>' +
    '<%}%>' +
'<%} else {%>' +
    '<p>none</p>' +
'<%}%>';

var string = TemplateEngine(template, {
    skills: ["js", "html", "css"],
    showSkills: true
})

document.body.innerHTML = string

预备知识

var func = new Function(...

思路

var template = 
'My skills:' + 
'<%if(this.showSkills) {%>' +
    '<%for(var index in this.skills) {%>' + 
    '<a href="#"><%this.skills[index]%></a>' +
    '<%}%>' +
'<%} else {%>' +
    '<p>none</p>' +
'<%}%>';

观察这个字符串：

<% %> 外面，都是字符串

<% %> 里面，一是控制语句(if/for)，二是变量(this.skills[index])

有没有可能变成纯 JS？

思路

var template = 
'My skills:' + 
'<%if(this.showSkills) {%>' +
    '<%for(var index in this.skills) {%>' + 
    '<a href="#">' +
    '    <%this.skills[index]%>'+
    '</a>' +
    '<%}%>' +
'<%} else {%>' +
    '<p>none</p>' +
'<%}%>';

var lines = ''
lines += 'My skills:' 
if(this.showSkills) {
    for(var index in this.skills) {
    lines+= '<a href="#">'
    lines+= this.skills[index]
    lines+= '</a>' 
    }
else
    lines+= '<p>none</p>'
}

lines 是什么