art-template 模板引擎

18次阅读
没有评论

共计 3834 个字符,预计需要花费 10 分钟才能阅读完成。

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

art-template 使用步骤

  1. 导入 art-template
// 在 window 全局,多一个函数,叫做 template('模板的Id', 需要渲染的数据对象)
<script src="./template-web.js"></script>
  1. 定义数据
<script>
    // 定义需要渲染的数据
    var data = {
        name: '张三',
        sex: '男',
        age: 18
    }
</script>
  1. 定义模板
// 模板的 HTML 结构,必须定义到 script 中
<script type="text/html" id="tpl-user">
    <h1>姓名:{{name}}</h1>
    <h1>性别:{{sex}}</h1>
    <h1>年龄:{{age}}</h1>
</script>
  1. 调用 template 函数
    template('tpl-user', data)
  1. 渲染 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>
  1. 预调用模板引擎
// 定义数据
    var data = {
        name: '张三',
        age: 18,
        sex: '男',
        address: '翻斗花园'
    }

    // 调用模板函数
    var htmlStr = template('tpl-user', data)

    // 渲染HTML结构
    document.getElementById('user-box').innerHTML = htmlStr
  1. 封装 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
    }
  1. 导入并使用自定义的模板引擎
    <script src="./template.js"></script>

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-21发表,共计3834字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码