art-template实现简易的模板引擎

主要实现简易的art-template的模板引擎

art-template 是前端的一个高性能 JavaScript 模板引擎，它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能。

什么是模板引擎？？？

模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。图示

1.基本语法

exec() 函数用于检索字符串中的正则表达式的匹配。
如果字符串中有匹配的值，则返回该匹配值，否则返回 null。

RegExpObject.exec(string) 示例代码如下

var str = 'hello'
var pattern = /o/ //正则表达式，有o则匹配成功
console.log(pattern.exec(str))
// 输出的结果["o", index: 4, input: "hello", groups: undefined]

2. 分组

正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容，示例代码如下：
`

var str = '

我是{{name}}

'
var pattern = /{{([a-zA-Z]+)}}/ //匹配多个a-z或者A-Z
var patternResult = pattern.exec(str)
console.log(patternResult)
// 得到 name 相关的分组信息
// 输出 ["{{name}}", "name", index: 7, input: "

我是{{name}}

", groups: undefined]

3. 字符串的replace函数

eplace() 函数用于在字符串中用一些字符替换另一些字符，语法格式如下：

var result = '123456'.replace('123', 'abc') // 得到的 result 的值为字符串 'abc456'

示例代码如下：
`

var str = '

我是{{name}}

'
var pattern = /{{([a-zA-Z]+)}}/

var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1]) // replace 函数返回值为替换后的新字符串
// 输出的内容是：

我是name

console.log(str) //patternResult[0]的值为{{name}} patternResult[1]的值为name

4. 多次replace

如果str中有多个{{}}，则使用多次template
`

var str = '

{{name}}今年{{ age }}岁了

'
var pattern = /{{\s([a-zA-Z]+)\s}}/

var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str) // 输出

name今年{{ age }}岁了

patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str) // 输出

name今年age岁了

patternResult = pattern.exec(str)
console.log(patternResult) // 全部替换完毕，输出 null
`

5. 使用while循环replace

针对第4，可以使用更为简洁的while循环简化代码
`

var str = '

{{name}}今年{{ age }}岁了

'
var pattern = /{{\s([a-zA-Z]+)\s}}/

var patternResult = null
while(patternResult = pattern.exec(str)) {
str = str.replace(patternResult[0], patternResult[1])
}
console.log(str) // 输出

name今年age岁了

6. replace替换为真值

var data = { name: '张三', age: 20 }
var str = '

{{name}}今年{{ age }}岁了

'
var pattern = /{{\s([a-zA-Z]+)\s}}/

var patternResult = null
while ((patternResult = pattern.exec(str))) {
str = str.replace(patternResult[0], data[patternResult[1]])//将name的值张三替换{{name}}
} //data[patternResult[1]]data[name]'张三'
console.log(str)
`