首页 > 其他分享> 文章详细

模板引擎

2022-05-01 10:31:26 阅读：225 来源： 互联网

标签：输出 art template 引擎 let str 模板

模板引擎基本概念

什么是模板引擎

模板引擎：顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的 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 函数
1. 模板的 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9