模板引擎
2018-01-23 本文已影响26人
FiredEarthMusic
目录：1.字符串拼接
2.string format
3.模板替换
4.自制模板引擎
5.常见模板引擎介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{
margin: 0;
padding: 0;
}
ol{
list-style: none;
}
body{
color: #333;
}
.song-list{
width: 200px;
margin: 0 auto;
}
h1{
font-size: 20px;
margin: 10px;
}
ol{
border-top: 1px solid #ebebeb;
}
li{
padding: 5px 10px;
background: white;
border-bottom: 1px solid #ebebeb;
border-left: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
}
</style>
</head>
<body>
<div class="song-list">
<h1>热歌榜</h1>
<ol>
<li>刚刚好 - 薛之谦</li>
<li>最佳歌手 - 许嵩</li>
<li>初学者 - 薛之谦</li>
<li>绅士 - 薛之谦</li>
<li>我门 - 陈伟霆</li>
<li>画风 - 后弦</li>
<li>We are one - 郁可唯</li>
</ol>
</div>
</body>
</html>
需求: 用JS渲染一个歌曲列表
1.数据来自一个数组songs
2.不能写死在页面里
最傻的办法
(你必须能想到一个最傻的办法)：1.拼HTML字符串 2.构造DOM对象(或JQuery)
字符串拼接
数据来自一个数组songs
不能写死在页面里
songs = [
{name: '绅士', url: 'http://music.163.com/xxx', singer: '薛之谦'},
{name: '刚刚好', url: 'http://music.163.com/yyy', singer: '薛之谦'},
...
]
##最傻的办法-遍历(你必须要能想到一个最傻的办法)
方案一：拼HTML字符串
方案二：构造DOM对象(也可以用jQuery)
string format
function stringFormat(string)
{
var params = [].slice.call(arguments,1)
var regex = /\{(\d+)\}/g
//将字符串中的 {n} 替换为 params[n]
string = string.replace(regex, function(){
var index = arguments[1]
return params[index]
})
return string
}
console.log(stringFormat('Hi, {0}','frank'))
console.log(stringFormat('Hi, {1}', 'frank', 'Tomy'))
console.log(stringFormat('Hi, {0} and {1}', 'frank','Tomy'))
1.string.replace替换字符串
2.regex.exec 正则 遍历 替换
var string = 'yyz, tom, jerry'
undefined
string.replace('yyz', 'xxx')
"xxx, tom, jerry"
string
"yyz, tom, jerry"
var string = 'yyz, tom, jerry, yyz'
undefined
string.replace('yyz', 'xxx')
"xxx, tom, jerry, yyz"
string.replace('yyz', 'xxx').replace('yyz', 'xxx')
"xxx, tom, jerry, xxx"
string.replace(/yyz/g, 'xxx')
"xxx, tom, jerry, xxx"
var result;
//以result的值为判断依据
while(result = regex.exec(string)){
string.replace(result, 'xxx')
}
console.log(string)
string = 'frank, tom, jerry, frank'
"frank, tom, jerry, frank"
var result
while(result = regex.exec(string)) {
console.log('result是'+result)
string = string.replace(result,'xxx')
console.log('string变成了' + string)
}
console.log(string)
//frank都遍历完成之后 result就变为空值 while循环结束
第一版的实现
var TemplateEngine = function(tpl, data) {
var regex = /<%([^%>]+)?%>/g
while(match = regex.exec(tpl)) {
//console.log(match)
tpl = tpl.replace(match[0], data[match[1]])
}
return tpl;
}
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)
多用正则
模板替换
自制模板引擎
常见模板引擎介绍
