造轮子学习之旅day3-模版引擎

学无止境 每日反思

今日主题： 模版引擎

模版引擎

为了实现视图与业务逻辑的分离，无论MVP、MVVM、MVC的那个V都会使用模版引擎。

需求

{{}} 表达式

将{{}} 中的值替换为表达式的结果

功能实现

模版渲染分两步：

1. 编译模版为Generate函数
2. 执行渲染函数

• 案例

简单模版
<b>{{ name }}</b>

生成的渲染函数
generate(obj){
	let str = ''
    with(obj){
    	str += `<b>${name}</b>`
    }
    return str
}

执行generate结果
const ret = generate({name: 'tom')
// 结果 <b>tom</b>

编译过程

过程其实是正则表达式的匹配

• 第一步：将{{xxx}}表达式转化为ES6模版字符串${xxx}

// 全局正则表达式替换
template = template.replace(/\{\{([^}]+)\}\}/g, function(){
	let key = arguments[1].trim();
    return "${"+ key + "}"
})

• 第二步 将{% %}表达式转化为JS语句这样就可以在模版中使用if、foreach了。

let head = `let str = '';\r\n with(obj){\r\n`
head += "str+=`"
template = template.replace(/\{\%([^%]+)\%\}/g,function(){
	return "`\r\n" + arguments[1]+ "\r\nstr+=`\r\n"
})
let tail = "`}\r\n return str;"

构造Generate函数

使用new Function

new Function('arg', 'console.log(arg+1);')

// 相当于创建了一个匿名函数
function(arg){
	console.log(arg+1)
}

参考文章