模板引擎

模板引擎的原理

1. 正则与字符串操作

   • exec() 函数用于检索字符串中的正则表达式的匹配

     RegExpObject.exec(string)

   • 分组

     正则表达式提取自己想要的内容
     {{ name }}
     /{{ [a-zA-Z] }}/

   • 字符串的 replace 函数

     通过 replace 函数 将字符串中的一些字符替换成另一些字符
     str.replace()

   • 多次 replace

     var str = '<div>{{ name }} 今年 {{ age }} 岁</div>'
     var regExp = /{{ \s*([a-zA-Z])\s*}}/
     ​
     var patten = regExp(str)
     每一次操作，都需要提取操作

   • 使用 while 循环 replace

     不需要每次都进行提取的操作

   • replace 替换为真值

      

2. 实现简易的模板引擎

   • 定义模板

   • 预调用模板引擎

     • 定义数据

       var data = {}

     • 调用模板引擎

       var htmlStr = template('tpl-news', data)

     • 渲染HTML结构

 

<script type="text/html" id="tpl-news">
    <!-- 定义模板内容 -->
</script>
<script>
    $(function(){
        var htmlStr = template('tpl-news', res);//res 需要引入模板内的数据
​
        template.defaule.imports.dateFormat = function(){} //定义一个过滤器
​
    })
</script>