模板引擎
作者:互联网
模板引擎基本概念
什么是模板引擎
模板引擎:顾名思义,它可以根据程序员指定的模板结构和数据,自动生成一个完整的 HTML 页面。
模板引擎的好处
- 减少了字符串的拼接操作
- 使代码结构更清晰
- 使代码更易于阅读和维护
art-template 模板引擎
简介
art-template 是一个简约、超快的模板引擎。中文官网首页为 http://aui.github.io/art-template/zh-cn/index.html。
安装
在浏览器访问官网,点击上边的 Docs,找到下载链接后,点击右键,选择链接另存为,将 art-template 下载到本地。然后通过<script>标签加载到网页上进行使用。
art-template 使用步骤
- 导入 art-template
- 定义数据
- 定义模板调用 template 函数调用 template 函数
- 模板的 HTML 结构需要定义在 script 标签里,type 属性值是 text/html
- 渲染 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