art-template 模板引擎

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

art-template 使用步骤

1. 导入 art-template

// 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象)
<script src="./template-web.js"></script>

2. 定义数据

<script>
    // 定义需要渲染的数据
    var data = {
        name: '张三',
        sex: '男',
        age: 18
    }
</script>

3. 定义模板

// 模板的 HTML 结构，必须定义到 script 中
<script type="text/html" id="tpl-user">
    <h1>姓名：{{name}}</h1>
    <h1>性别：{{sex}}</h1>
    <h1>年龄：{{age}}</h1>
</script>

4. 调用 template 函数

    template('tpl-user', data)

5. 渲染 HTML 结构

    var htmlStr = template('tpl-user', data)
    var box = document.querySelector('.box')
    box.innerHTML = htmlStr

art-template 标准语法

art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行变量输出，或者循环数组等操作，这种{{ }}语法在 art-template中被称为标准语法

输出-标准语法

在 {{ }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出

{{ value }}
{{ obj.key }}
{{ obj.['key'] }}
{{ a ? b : c }}
{{ a || b }}
{{ a + b }}

原文输出-标准语法

如果要输出value值中，包含了HTML标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染

{{ @ value }}

条件输出-标准语法

如果要实现条件输出，则可以在 {{ }} 中使用if ... else if ... /if的方式，进行按需输出

{{ if value }} 按需输出的内容 {{ /if }}
{{ if v1 }} 按需输出的内容 {{ else if v2 }} 按需输出的内容 {{ /if }}

循环输出-标准语法

如果要实现循环输出，则可以在 {{ }} 内，提供 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使用 $value 进行访问

{{ each arr }}
    {{ $index }} {{ $value }}
{{/each}}

过滤器-标准语法

过滤器的本质，就是一个 function 处理函数

{{ value | filterName }}

templata.defaults.imports.filterName = function(value) {/* return处理的结果 */}

var data = {
    regTime: new Date()
}
<div>注册时间：{{ regTime | dateFormat }}</div>
template.defaults.imports.dateFormat = function(date) {
    var y = date.getFullYear()
    var m = date.getMonth() + 1
    var d = date.getDate()
    return y + '-' + m + '-' + d // 过滤器最后一定要return返回一个值
}

模板引擎实现原理

正则与字符串操作

基本语法

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

RegExpObject.exec(string)

var str = 'hello'
var pattern = /o/
console.log(pattern.exec(str))
// 输出结果["o", index: 4, input: "hello", groups: undefined]

分组

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

var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
console.log(patternResult)
// 得到 name 的分组信息
// ["{{name}}", "name", index: 7, input: "<div>我是{{name}}</div>", groups: undefined]

字符串的 replace 函数

replace() 函数用于在字符串中用一些字符替换另一些字符

var result = '123456'.replace('123', 'abc')
console.log(result) // abc456

var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattenr.exec(str)
console.log(str) // ["{{name}}", "name", index: 7, input: "<div>我是{{name}}</div>", groups: undefined]
str = str.replace(patternResult[0], patternResult[1]) // replace 函数返回值为替换后的新字符串
console.log(str) //<div>我是name</div>

多次replace()

\s* 表示匹配空格零个或多个

var str = '<div>我叫{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/

// 第一次匹配
var res1 = pattern.exec(str)
console.log(str) // <div>我叫{{name}}今年{{ age }}岁了</div>
str = str.replace(res1[0], res1[1])
console.log(str) // <div>我叫name今年{{ age }}岁了</div>

// 第二次匹配
res2 = pattern.exec(str)
console.log(str) // <div>我叫name今年{{ age }}岁了</div>
str = str.replace(res2[0], res2[1])
console.log(str) // <div>我叫name今年age岁了</div>

// 第三次匹配
res3 = pattern.exec(str)
console.log(res3) // null

使用 while 循环 replace()

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>

replace() 替换为真值

var data = { name: '张三', age: 18 }
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]])
}
console.log(str) // <div>我叫张三今年18岁了</div>

实现简易模板引擎

1. 定义模板结构

    <!-- 定义模板结构 -->
    <script type="text/html" id="tpl-user">
        <div>姓名：{{name}}</div>
        <div>年龄：{{ age }}</div>
        <div>性别：{{  sex}}</div>
        <div>住址：{{address  }}</div>
    </script>

2. 预调用模板引擎

// 定义数据
    var data = {
        name: '张三',
        age: 18,
        sex: '男',
        address: '翻斗花园'
    }
    
    // 调用模板函数
    var htmlStr = template('tpl-user', data)
    
    // 渲染HTML结构
    document.getElementById('user-box').innerHTML = htmlStr

3. 封装 template 函数

// 封装template函数

function template(id, data) {
    var str = document.getElementById(id).innerHTML
    var pattern = /{{\s*([a-zA-Z]+)\s*}}/

    var patternResult = null

    while (patternResult = pattern.exec(str)) {
        str = str.replace(patternResult[0], data[patternResult[1]])
    }

    return str
}

4. 导入并使用自定义的模板引擎