模板引擎基本概念及实现原理、art-template模板引擎的使用方法

离奇6厘米

已于 2022-10-18 22:02:43 修改

阅读量941

点赞数

分类专栏： ajax 文章标签：前端 javascript html

于 2022-10-18 21:35:19 首次发布

本文链接：https://blog.csdn.net/Vest_er/article/details/127394275

版权

ajax 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

一、模板引擎的基本概念

1、模板引擎定义

模板引擎：能根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面

2、优点

① 减少字符串的拼接操作

② 使代码结构更加清晰

③ 使代码更易阅读与维护

二、art-template模板引擎

1、地址

前端模板引擎不仅仅只有art-template这一个，只不过art-template对于初学者比较友好，使用起来比较简单，并且性能比较好。

art-template的中文官网地址：http://aui.github.io/art-template/zh-cn/

2、安装

打开http://aui.github.io/art-template/zh-cn/docs/installation.html找到下载链接后，鼠标右键，选择链接另存为，将art-template下载到本地，通过< scrip >标签加载到网页上使用。
在这里插入图片描述

3、基本使用

使用步骤：导入art-template → 定义数据 → 定义模板 → 调用template函数 → 渲染HTML结构
说明：
① 导入art-template模板之后，在windows全局，多一个函数，叫做 template（‘模板ID’，需要渲染的数据对象）
② 定义模板：模板的HTML必须定在< script >标签中，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1. 导入模板引擎-->
    <script src="../template-web.js"></script>
    <script src="../jquery.js"></script>
</head>
<body>

<div id="container"></div>

<!--3. 定义模板-->
<script type="text/html" id="tpl">
    <h1>{{name}}</h1>
</script>

<script>
    // 2. 定义需要渲染的数据
    var data = { name:'zs'}

    // 4. 调用 template 函数
    var htmlStr = template('tpl',data)
    console.log(htmlStr)
    // 5. 渲染 HTML 结构
    $('#container').html(htmlStr)
</script>
</body>
</html>

4、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 value1}} 按需输出的内容 {{else if value2}} 按需输出的内容 {{/if}}

④ 循环输出

在{{}}中通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使用 $value 进行访问

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

⑤ 过滤器

过滤器的本质是一个function函数

{{value|filterName}}

过滤器语法类似管道操作符，它的上一个输出作为下一个输入。定义过滤器的基本语法如下：

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

三、模板引擎的实现原理

模板引擎在内部最主要的就是使用正则表达式与字符串的操作

1、正则表达式的exec()函数

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

RegExpObject.exec(string)

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

2、正则表达式的分组

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

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]

3、字符串的replace函数

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

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

4、多次replace

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

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:'zhangsan',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]])
}
console.log(str)

五、实现简易的模板引擎

实现步骤：定义模板结构 → 预调用模板引擎 → 封装template 函数 → 导入并使用自定义的模板引擎

1、定义模板结构

在body标签中定义模板结构

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

2、预调用模板引擎

<div id="catMsg"></div>

<script>
    // 定义数据
    var data = {name:'憨瓜',age:'3岁半',sex:'公猫已绝育',adress:"郑州"};

    // 调佣模板函数
    var htmlStr = template('tpl',data);

    // 渲染html结构
    document.getElementById('catMsg').innerHTML = htmlStr;
</script>

3、封装template 函数

新建template.js

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

    var pattResult = null;

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

    return str
}