- 概述
- 模板引擎是第三方模块。
- 让开发者以更加友好的方式拼接字符串,使项目代码更加清晰、更加易于维护。
- 不适用模板引擎拼接字符串会非常繁琐,臃肿
- 而使用了模板引擎拼接字符串,就会更加清晰
- 模板引擎种类
- 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.在模板中展示的数据(对象类型)
- 这样就可以在模板中直接使用此对象的属性进行引用拼接
- 1.模板字符串
- 返回值
- 返回拼接好的字符串
- 4.使用语法
- 使用模板语法告诉模板引擎,模板与数据应该如何进行拼接
- 方法调用
- 模板内容
- 模板语法
- 语法是写在模板字符串之中的,为了便与进行数据的拼接
- art-template同时支持两种模板语法:标准语法和原始语法。
- 标准语法
- 标准语法可以让模板更容易读写
- 输出
- 条件判断
- 在模板中可以根据条件来决定显示哪块HTML代码
- 条件判断语句总是成对出现
- { { if 条件1} } ... { { else if 条件2}} ... { { / i f } }
- 循环语法
- 循环语句也是成对出现的
- { { each 循环数据 } } { { / each } }
- art-template中可以直接循环数组数据
- 参数
- { { $index} } 代表了本次循环的索引
- { { $value} } 代表了本次循环的数据内容
- 子模版
- 使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。
- 而可以使用子模版语法将抽离的头部文件重新添加进原有的页面
- { { include '模板' } } (这里模板路径不需要写括号)
- 原始语法
- 原始语法具有强大的逻辑处理能力。
- 输出
- 条件判断
- 循环语法
- 子模版
- 模板继承
- 可以使用子模版的方式将部分代码抽离出去,但HTML骨架部分(html标签,herd标签,body标签),也属于公共部分,但是不能通过子模版抽离出去
- 使用模板继承可以将网站HTML骨架抽离到单独的文件中,其他页面模板可以继承骨架文件。
- 页面 = 继承骨架 + 包含子模版
- 在骨架文件中可以预留一些位置,为页面独有的一些内容填写数据
- 模板配置
- 1.向模板中导入变量
- template.defaults.imports.变量名 = 变量值;
- 在模板当中,直接使用传入的变量值调用相应的变量
- 可以将第三方模块作为变量导入模板,从而在模板中使用第三方模块
- template.defaults.imports.变量名 = 变量值;
- 2.设置模板根目录
- template.defaults.root = 模板目录
- 设置跟根目录后,就不需要再进行冗余的重复拼接路径行为了
- 2.设置模板默认后缀
- template.defaults.extname = '.art'
- 但设置了默认后缀后,在没有书写路径文件后缀时,模板路径会自动拼接上默认后缀
- 1.向模板中导入变量
- 使用模板语法告诉模板引擎,模板与数据应该如何进行拼接
- 1.下载
【 art-template模板引擎】详解
最新推荐文章于 2024-05-10 01:26:20 发布