模板引擎

模板引擎基本概念

什么是模板引擎

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

模板引擎的好处

1. 减少了字符串的拼接操作
2. 使代码结构更清晰
3. 使代码更易于阅读和维护

art-template 模板引擎

简介

art-template 是一个简约、超快的模板引擎。中文官网首页为 http://aui.github.io/art-template/zh-cn/index.html。

安装

在浏览器访问官网，点击上边的 Docs，找到下载链接后，点击右键，选择链接另存为，将 art-template 下载到本地。然后通过<script>标签加载到网页上进行使用。

art-template 使用步骤

1. 导入 art-template
2. 定义数据
3. 定义模板调用 template 函数调用 template 函数
   1. 模板的 HTML 结构需要定义在 script 标签里，type 属性值是 text/html
5. 渲染 HTML 结构

标准语法

什么是标准语法

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

输出

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

原文输出

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

条件输出

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

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

{{if value1}}按需输出的内容{{else if value2}}按需输出的内容{{/if}}

循环输出

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

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

过滤器

过滤器的本质是一个函数

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

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

实现原理

正则与字符串操作

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

正则表达式.exec(字符串)

  let str = 'hello'
  let zz1 = /o/
  let zz2 = /x/
  console.log(zz1.exec(str));
  console.log(zz2.exec(str));

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

  let str = '<div>我是{{name}}</div>'
  let zz1 = /{{([a-zA-Z]+)}}/
  console.log(zz1.exec(str));

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

  let str = '<div>我是{{name}}</div>'
  let zz = /{{([a-zA-Z]+)}}/
  let res = zz.exec(str)
  str = str.replace(res[0], res[1])
  console.log(str);