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

3. 字符串的replace函数

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

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

示例代码如下：
`

var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/

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

4. 多次replace

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

  var str = '<div>{{name}}今年{{ age }}岁了</div>'
  var pattern = /{{\s*([a-zA-Z]+)\s*}}/
 
var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str) // 输出 <div>name今年{{ age }}岁了</div>

patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str) // 输出 <div>name今年age岁了</div>

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

5. 使用while循环replace

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

var str = '<div>{{name}}今年{{ age }}岁了</div>'
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) // 输出 <div>name今年age岁了</div>

6. replace替换为真值

var data = { name: '张三', age: 20 }
var str = '<div>{{name}}今年{{ age }}岁了</div>'
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)