🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] ## 前言 tmod作为前端页面模板引擎,除了本身支持模板引擎的基本语法之外,还支持模板文件目录,再我们开发项目实现模板复用,在减少开发量上有着无可替代的作用。 ## 与其他模板引擎的效率对比 tmod本身执行效率与art-Template基本等同,我们用市场上已有的模板引擎做下渲染对比。 * 通过github项目的在线速度测试,[测试地址](https://aui.github.io/art-template/example/web-test-speed/) * 已得到的性能对比视图 ![模板引擎性能对比图](https://box.kancloud.cn/18615baeaead79a5ca23b6a846a147f0_910x290.png) ## 原理实现 * 为什么这个引擎比其他模板引擎快也是我们需要获知的。可能的原因如下: 1、预编译 在上述模板引擎实现原理中,因为要对模板变量进行赋值,所以每次渲染都需要动态编译 javascript 字符串完成变量赋值。而 artTemplate 的编译赋值过程却是在渲染之前完成的,这种方式称之为“预编译”。artTemplate 模板编译器会根据一些简单的规则提取好所有模板变量,声明在渲染函数头部。 ## 与art-Template的对比优点 * 编译模板为不依赖引擎的 js 文件 * 前端模板按文件与目录组织(推荐使用主要原因) * 模板之间支持引入外部模板 * 使用同步模板加载接口 * 可选多种规范的模块输出:AMD、CMD、CommonJS * 支持作为 GruntJS 的插件构建项目 * 模板目录可被前后端共享 * 支持检测修改即时编译 * 支持模板运行时调试 * 配置文件支持多人共享 ## 模块的建立使用 * 模块安装 * 模块使用与配置 ## 基本语法 * 子模板 * 继承模板 * 框架模板 ### 基本语法参考 * 循环 * 判断 * 属性值获取 * 是的 * [更多语法参考:tmod官方语法文档](https://github.com/aui/tmodjs/wiki/%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95) ## 模板的最终使用 ## 原artTemplate模板的迁移 * [页面模板迁移指南](https://github.com/aui/tmodjs/wiki/%E9%A1%B5%E9%9D%A2%E4%B8%AD%E7%9A%84%E6%A8%A1%E6%9D%BF%E8%BF%81%E7%A7%BB%E6%8C%87%E5%8D%97) * 注意事项 ## 参考文档 * 参考文档 //template页面模板使用教程,以下原则or建议不分先后,请仔细阅读,遵守编码规范 1 针对当前页面使用页面模板的,建议使用原始方法,直接script标签加id,然后使用 2 针对多个页面会使用到的页面代码,建议加载到tpl目录,独立文件放在与package.json同级目录,template("")语法时直接文件名称就可。 3 需要的文件目录结构符合要求,tpl目录下游package.json,同目录的html外层文件,.build 的产出js目录,以及其他自定义的页面文件夹以及页面, 比如public>copyright.html等,建议所有的文件以html为后缀名。 4 模板文件中需要的样式或者脚本,建议整合文件中引入或者通过reqiure中引入。 5 模板语法 参考:https://github.com/aui/artTemplate 6 计算机打开cmd命令行,npm install -g tmodjs 全局新建这个模块 7 cd 切换目录到tpl的上一届目录结构(使用教程) 8 tmod tpl 实时编译运行模板文件,保证cmd窗口打开的情况下,所有的tpl模板文件是实时更新的(使用教程) 9 页面引入 ,引入产出目录build结构的template.js,然后template("")对应的文件,得到html字符串,吧对应的div的html替换即可。(使用教程) 10 命名 ,嵌入模板的外层建议命名为m-开头的,而嵌入部分的外层div建议使用i-开头的,后面的2 3位单词保持一致对应。(使用教程) 11 如果改变了模板引入的目录结构或者相关语法,是需要重新编译执行命令行的。(使用教程)