【 art-template模板引擎】详解

• 概述
  • 模板引擎是第三方模块。
  • 让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。
  • 不适用模板引擎拼接字符串会非常繁琐，臃肿

    

  • 而使用了模板引擎拼接字符串，就会更加清晰

    
  • 模板引擎种类
    •  art-template模板引擎
      • art-template模板引擎是由腾讯公司出品
      • art-template模板引擎文档是中文文档
      • art-template模板引擎使用范围很广，速度很快
•  art-template模板引擎
  • 1.下载
    • 在命令行工具中使用 npm install art-template 命令进行下载
  • 2.引入模板引擎
    • 使用const template = require('art-template')引入模板引擎
    • 返回一个方法，用于对模板和数据进行拼接
  • 3.引入数据和模板
    • 对模板和数据进行拼接之前，需要先使用模块返回的方法引入待拼接的模板和数据
    • 告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据);
    • 参数
      • 1.模板字符串
        • 可以将模板字符串定义为单独的文件
        • 约定俗成，存放模板的文件为views
        • 模板引擎规定该文件后缀为 .art 类型（即使规定了后缀，内容也可以为html）
      • 2.在模板中展示的数据（对象类型）
        • 这样就可以在模板中直接使用此对象的属性进行引用拼接
    • 返回值
      • 返回拼接好的字符串
  • 4.使用语法
    • 使用模板语法告诉模板引擎，模板与数据应该如何进行拼接

      

      • 方法调用

        

      • 模板内容

        

    • 模板语法
      • 语法是写在模板字符串之中的，为了便与进行数据的拼接
      • art-template同时支持两种模板语法：标准语法和原始语法。
      • 标准语法
        • 标准语法可以让模板更容易读写
        • 输出
          • 将某项数据输出在模板中，除了直接输出，还可以在其中进行运算
          • { { 数据 } }

            

          • 原文输出
            • 如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后原样输出输出。
            • 可以使用原文输出对其中HTML代码进行解析
            • { { @ 数据 } }

              转存失败重新上传取消

        • 条件判断
          • 在模板中可以根据条件来决定显示哪块HTML代码
          • 条件判断语句总是成对出现
          • { { if 条件1} } ... { { else if 条件2}} ... { { / i f } }

            

        • 循环语法
          • 循环语句也是成对出现的
          • { { each 循环数据 } } { { / each } }

            

            • art-template中可以直接循环数组数据
            • 参数
              • { { $index} } 代表了本次循环的索引
              • { { $value} } 代表了本次循环的数据内容
        • 子模版
          • 使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。
          • 而可以使用子模版语法将抽离的头部文件重新添加进原有的页面
          • { { include '模板' } } （这里模板路径不需要写括号）

            

      • 原始语法

        

        扫描二维码关注公众号，回复： 11240325 查看本文章
        • 原始语法具有强大的逻辑处理能力。
        • 输出
          • 将某项数据输出在模板中，除了直接输出，还可以在其中进行运算
          • < % = 数据   % >

            

          • 原文输出
            • 如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后原样输出输出。
            • 可以使用原文输出对其中HTML代码进行解析
            • < % - 数据 % >

              转存失败重新上传取消

        • 条件判断
          • 在模板中可以根据条件来决定显示哪块HTML代码
          • <% if (条件1) { %> ... <% } else if (条件2) { %> ... <% } %>

            转存失败重新上传取消

        • 循环语法
          • <% for() { %> <% } %>

            转存失败重新上传取消

        • 子模版
          • 使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。
          • 而可以使用子模版语法将抽离的头部文件重新添加进原有的页面
          • < % include('模板') % >（这里模板路径需要加括号）

            转存失败重新上传取消

    • 模板继承

      

      • 可以使用子模版的方式将部分代码抽离出去，但HTML骨架部分（html标签，herd标签，body标签），也属于公共部分，但是不能通过子模版抽离出去
      • 使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。
        • 页面 = 继承骨架 + 包含子模版
      • 在骨架文件中可以预留一些位置，为页面独有的一些内容填写数据

        

        • 在模板文件中使用 关键字 block 预留位置

          转存失败重新上传取消

          • { { block '位置名' } } { { / block } }
        • 引用时使用 关键字 extend继承模板 再使用 关键字 block 填充位置

          

          • 引用模板
            • { { extend ' 模板路径 ' } }
          • 填充位置
            • {{block '模板中位置名'}} 填充内容 {{/block}}
    • 模板配置
      • 1.向模板中导入变量
        • template.defaults.imports.变量名 = 变量值;

          

          • 在模板当中，直接使用传入的变量值调用相应的变量
        • 可以将第三方模块作为变量导入模板，从而在模板中使用第三方模块
      • 2.设置模板根目录
        • template.defaults.root = 模板目录
        • 设置跟根目录后，就不需要再进行冗余的重复拼接路径行为了
      • 2.设置模板默认后缀
        • template.defaults.extname = '.art'
        • 但设置了默认后缀后，在没有书写路径文件后缀时，模板路径会自动拼接上默认后缀