其他分享
首页 > 其他分享> > 模板引擎

模板引擎

作者:互联网

模板引擎基本概念

什么是模板引擎

模板引擎:顾名思义,它可以根据程序员指定的模板结构数据,自动生成一个完整的 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
  4. 渲染 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);

 

标签:输出,art,template,引擎,let,str,模板
来源: https://www.cnblogs.com/0529qhy/p/16205561.html