前端开发--art-template模板引擎及实现原理

城东青

已于 2022-07-06 20:55:45 修改

阅读量5.5k

点赞数 3

文章标签： javascript 前端 html css

于 2022-07-06 20:53:04 首次发布

本文链接：https://blog.csdn.net/weixin_51059952/article/details/125646636

版权

#博学谷IT学习技术支持#

简介

art-template 是一个简约、超快的模板引擎。
它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。

安装

在浏览器中访问安装 - art-template (aui.github.io) 页面，找到下载链接后，鼠标右键，选择“ 链接另存为 ”，将 art-template 下载到本地，然后，通过 <script> 标签加载到网页上进行使用。

使用步骤

① 导入 art-template

② 定义数据

③ 定义模板

④ 调用 template 函数

⑤ 渲染HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入template-web.js -->
    <script src="./node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
    <div id="container"></div>
    <!-- 创建 script 标签创建模板,注意下面几点 -->
    <!-- 1. type="text/该斜杠后可以是 html,template... 不是script即可)" -->
    <!-- 2. 给 script 标签添加 id ，此 id 即为模板 id -->
    <!-- 3.模板 script 标签必须在 template() 方法调用的 script 标签之前 -->
    <script type="text/html" id="tpl">
        {{if user}}
        <h2>{{user.name}}</h2>
        {{/if}}
    </script>
    <script>
        // 定义需要渲染的数据
        var user = {
            name: 'Template username'
        }
        var html = template('tpl', {user: user})
        var container = document.querySelector('#container');
        // 渲染HTML结构
        container.innerHTML = html;
    </script>
</body>
</html>

art-template标准语法

值输出

<script type="text/html" id="tpl-user">
    <h1>姓名：{{name}}  年龄：{{age}}</h1>
  </script>

 var data = { name: '张三', age: 20}

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

例如：

{{value}}

{{obj.key}}

{{obj['key']}}

{{a ? b : c}}

{{a || b}}

{{a + b}}

原文输出

<script type="text/html" id="tpl-user">
   {{@ test}}
  </script>

 var data = {test:'<h3>测试原文输出</h3>'}

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

条件输出

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

<script type="text/html" id="tpl-user">
   <div>
      {{if flag === 0}} 
      flag的值是0
      {{else if flag === 1}}
      flag的值是1
      {{/if}}
    </div>
  </script>

 var data = {flag: 1}

循环输出

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

<script type="text/html" id="tpl-user">
    <ul>
      {{each hobby}}
      <li>索引是:{{$index}}，循环项是:{{$value}}</li>
      {{/each}}
    </ul>
  </script>

 var data = { hobby: ['吃饭', '睡觉', '写代码']}

过滤器

{{value | filterName}}

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

定义过滤器的基本语法如下：

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

定义一个格式化时间的过滤器 dateFormat 如下：

<script type="text/html" id="tpl-user">
<div>注册时间：{{regTime | dateFormat}}</div>
  </script>

 // 定义处理时间的过滤器
    template.defaults.imports.dateFormat = function (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()

      return y + '-' + m + '-' + d
    }

模板引擎的实现原理

1.基本语法

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>",

3.字符串的replace函数

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

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