模板引擎

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

    
    
    



    
热歌榜
    

        
刚刚好 - 薛之谦
        
最佳歌手 - 许嵩
        
初学者 - 薛之谦
        
绅士 - 薛之谦
        
我门 - 陈伟霆
        
画风 - 后弦
        
We are one - 郁可唯
    

需求: 用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 = '
Hello, my name is <%name%. I\'m <%age%> years old.>
'
var data = {
    name: "Krasimir"
    age: 29
}
var string = TemplateEngine(template, data) 
console.log(string)

多用正则

模板替换

自制模板引擎

常见模板引擎介绍