官网： https://aui.github.io/art-template/zh-cn/index.html

nodejs 服务器端使用

第一步： 引入 art-template 的包

  1. npm install --save art-template
  2. npm install --save express-art-template

第二步：项目中设置 express 的应用 art-template 模板引擎

  1. const art_express = require('express-art-template');
  3. const app = express(); // 创建app对象。
  5. // 设置art的模板引擎
  6. app.engine('art', art_express);
  8. app.get('/user/list', (req, res) => {
  9.   res.render('users/userlist2.art', {
  10.     title: '你好啊！',
  11.     users: userService.getUsers()
  12.   });
  13. });

核心方法

  1. // 基于模板名渲染模板
  2. template(filename, data);
  4. // 将模板源代码编译成函数
  5. template.compile(source, options);
  7. // 将模板源代码编译成函数并立刻执行
  8. template.render(source, data, options);

浏览器端使用

下载：lib/template-web.js（gzip: 6kb）

因为浏览器不支持文件系统，所以 template(filename, data) 不支持传入文件路径，它内部使用 document.getElementById(filename).innerHTML 来获取模板，例如：

  1. <script src="lib/template-web.js"></script>
  2. <script id="tpl-user" type="text/html">
  3. {{if user}}
  4.   <h2>{{user.name}}</h2>
  5. {{/if}}
  6. </script>

兼容到 IE8 的实例：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>IE</title>
  7. <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>-->
  10. <script src="es5-shim.min.js"></script>
  11. <script src="es5-sham.min.js"></script>
  12. <script src="json3.min.js"></script>
  14. <script src="../../lib/template-web.js"></script>
  15. </head>
  17. <body>
  18. <div id="content"></div>
  19. <script id="test" type="text/html">
  20. {{if isAdmin}}
  22. <h1>{{title}}</h1>
  23. <ul>
  24.     {{each list value i}}
  25.         <li>索引 {{i + 1}} ：{{value}}</li>
  26.     {{/each}}
  27. </ul>
  29. {{/if}}
  30. {{$data}}
  31. </script>
  33. <script>
  34. var data = {
  35.     title: '基本例子',
  36.     isAdmin: true,
  37.     list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
  38. };
  39. var html = template('test', data);
  40. document.getElementById('content').innerHTML = html;
  41. </script>
  42. </body>
  43. </html>

基本语法

输出

  • 输出标准语法
  1. {{value}}
  2. {{data.key}}
  3. {{data['key']}}
  4. {{a ? b : c}}
  5. {{a || b}}
  6. {{a + b}}
  • 原始语法
  1. <%= value %>
  2. <%= data.key %>
  3. <%= data['key'] %>
  4. <%= a ? b : c %>
  5. <%= a || b %>
  6. <%= a + b %>

模板一级特殊变量可以使用 $data 加下标的方式访问：

{{$data['user list']}}

原文输出

  • 原文输出标准语法

{{@ value }}

  • 原始语法

<%- value %>

原文输出语句不会对 HTML 内容进行转义处理，可能存在安全风险，请谨慎使用。

条件语法

  • 条件标准语法
  1. {{if value}} ... {{/if}}
  2. {{if v1}} ... {{else if v2}} ... {{/if}}
  • 原始语法
  1. <% if (value) { %> ... <% } %>
  2. <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

循环

  • 循环标准语法
  1. {{each target}}
  2. {{$index}} {{$value}}
  3. {{/each}}
  • 原始语法
  1. <% for(var i = 0; i < target.length; i++){ %>
  2. <%= i %> <%= target[i] %>
  3. <% } %>

target 支持 array 与 object 的迭代，其默认值为 $data。 $value 与 $index 可以自定义：{{each target val key}}。变量标准语法

{{set temp = data.sub.content}} 原始语法

<% var temp = data.sub.content; %>

模板继承

  • 模板继承标准语法
  1. {{extend './layout.art'}}
  2. {{block 'head'}} ... {{/block}}
  • 原始语法
  1. <% extend('./layout.art') %>
  2. <% block('head', function(){ %> ... <% }) %>

模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。范例：

  1. <!--layout.art-->
  2. <!doctype html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>{{block 'title'}}My Site{{/block}}</title>
  8.     {{block 'head'}}
  9.     <link rel="stylesheet" href="main.css">
  10.     {{/block}}
  12. </head>
  13. <body>
  14.     {{block 'content'}}{{/block}}
  15. </body>
  16. </html>
  17. <!--index.art-->
  18. {{extend './layout.art'}}
  20. {{block 'title'}}{{title}}{{/block}}
  22. {{block 'head'}}
  24. <link rel="stylesheet" href="custom.css">
  25. {{/block}}
  27. {{block 'content'}}
  29. <p>This is just an awesome page.</p>
  30. {{/block}}

渲染 index.art 后，将自动应用布局骨架。

子模板

  • 子模板标准语法
  1. {{include './header.art'}}
  2. {{include './header.art' data}}
  • 原始语法
  1. <% include('./header.art') %>
  2. <% include('./header.art', data) %>

data 数默认值为 $data；标准语法不支持声明 object 与 array，只支持引用变量，而原始语法不受限制。 art-template 内建 HTML 压缩器，请避免书写 HTML 非正常闭合的子模板，否则开启压缩后标签可能会被意外“优化。过滤器注册过滤器

template.defaults.imports.dateFormat = function(date, format){/_[code..]_/}; template.defaults.imports.timestamp = function(value){return value \* 1000};

过滤器函数

过滤器函数第一个参数接受目标值。

  • 标准语法
  1. {{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}
  2. {{value | filter}} 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
  • 原始语法
  1. <%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>

配合 gulp 自动化预编译

前端使用art-template的时候非常不方便，不能把模板拆成单独的模板文件，TmodJS（原名 atc)可以把模板预编译成 js，直接解放了生产力。 当然如果你用 webpack，自然有对应的 loader。但是我们这次要讲的是 gulp。

对应 gulp 的插件：gulp-tmod

安装 gulp-tmod

  1. $ npm install gulp-tmod --save-dev

配置 gulpfile.js 文件

  1. const tmodjs = require('gulp-tmod');
  2. gulp.task('tpl', function() {
  3.   gulp
  4.     .src('src/template/**/*.html') // 找到所有的html模板
  5.     .pipe(
  6.       tmodjs({
  7.         templateBase: 'src/template/', // 模板根目录
  8.         runtime: 'tpl.js', // 输出的js文件
  9.         compress: false // 是否压缩
  10.       })
  11.     )
  12.     // 自动生成的模板文件，进行babel转换，会报错，此转换插件已经停更，所以间接改这个bug
  13.     // 参考bug：https://github.com/aui/tmodjs/issues/112 主要是this  →  window
  14.     .pipe(replace('var String = this.String;', 'var String = window.String;'))
  15.     .pipe(gulp.dest('src/js/tmpl/'));
  16. });

使用选项设置：

  • output Default: false

We use gulp steam other than tmodjs output, so set it to false prevent tmodjs create files.

  • runtime Type: String

Default: template.js

This will be use as a path pass to gulp-util File

  • templateBase Default: __dirname

Your template basepath.

  • minify Minify is deprecated, we should use gulp-uglify

如果想把不同的模板文件夹生成不同的 js 文件，那么下面的例子：

  1. const tmodjs = require('gulp-tmod');
  2. gulp.task('tpl', function() {
  3.   // 拿到所有的路径
  4.   let basePath = path.join(__dirname, 'src/template');
  5.   let files = fs.readdirSync(basePath);
  6.   files.forEach((val, index) => {
  7.     let dirPath = path.join(basePath, val);
  8.     let stat = fs.statSync(dirPath);
  9.     if (!stat.isDirectory()) {
  10.       // 判断是否是文件夹
  11.       return;
  12.     }
  13.     var fileter = 'src/template/' + val + '/**/*.html';
  14.     console.log(fileter);
  15.     gulp
  16.       .src('src/template/' + val + '/**/*.html')
  17.       .pipe(
  18.         tmodjs({
  19.           templateBase: 'src/template/' + val,
  20.           runtime: val + '.js',
  21.           compress: false
  22.         })
  23.       )
  24.       // 自动生成的模板文件，进行babel转换，会报错，此转换插件已经停更，所以间接改这个bug
  25.       // 参考bug：https://github.com/aui/tmodjs/issues/112 主要是this  →  window
  26.       .pipe(replace('var String = this.String;', 'var String = window.String;'))
  27.       .pipe(gulp.dest('src/js/tmpl/'));
  28.   });
  29. });

配合 require.js

  1. /*
  2.  * @Author: malun
  3.  * @Date: 2018-04-18 01:14:20
  4.  * @Last Modified by: malun
  5.  * @Last Modified time: 2018-06-11 19:57:24
  6.  */
  8. require(['template', 'jquery', 'js/tmpl/user', 'js/tmpl/header'], function(
  9.   template,
  10.   $,
  11.   userTpl,
  12.   headTpl
  13. ) {
  14.   document.getElementById('dt').innerHTML = headTpl('header', data);
  16.   $.ajax({
  17.     url: '/api/shoplist',
  18.     type: 'GET',
  19.     success: function(data) {
  20.       document.getElementById('dt2').innerHTML = userTpl('footer', data);
  21.     }
  22.   });
  23. });

高性能前端 art-template 模板的更多相关文章

  1. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  2. Python之路-(js正则表达式、前端页面的模板套用、Django基础）

    js正则表达式 前端页面的模板套用 Django基础 js正则表达式: 1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...

  3. 高性能双端js模板

    高性能双端js模板(新增filter)---simplite simplite是一款js实现的模板引擎,它能够完成浏览器端js模版和node服务器端js模板的数据渲染. 渲染性能十分突出. 支持浏览器 ...

  4. 微信小程序新闻列表功能（读取文件、template模板使用）

    微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...

  5. Vue组件template模板字符串几种写法

    在定义Vue组件时,组件的模板template选项需要的是一个字符串,当其内容较复杂需要换行时,需要简单处理一下,具体有五种方式: 方式一:使用 \ 转义换行符 <!DOCTYPE html&g ...

  6. angularjs指令系统系列课程（2）：优先级priority,模板template,模板页templateUrl

    今天我们先对 priority,template,templateUrl进行学习 1.priority 可取值:int 作用:优先级 一般priority默认为0,数值越大,优先级越高.当一个dom元 ...

  7. ArcGIS API for Silverlight代码中使用Template模板

    原文:ArcGIS API for Silverlight代码中使用Template模板 在项目开发中,会遇到点选中聚焦闪烁效果,但是因为在使用Symbol的时候,会设置一定的OffSetX和OffS ...

  8. Git commit template 模板设定

    多人协作开发一个项目时,版本控制工具是少不了的,git是linux 内核开发时引入的一个优秀代码管理工具,利用它能很好使团队协作完成一个项目.为了规范团队的代码提交,也方便出版本时的release n ...

  9. 一个简单地template模板

    之前的项目中用到了artTemplate模板,感觉挺有意思,于是查看相关资料,自己动手写了个简单地template模板插件.虽然会有一些不足,但也是自己的一番心血.主体代码如下 /* * 一个简单地t ...

随机推荐

  1. 一道颇有难度的JavaScript题

    上次分享了一道题,大家反响不错,很开心自己写的东西有人愿意花时间去看,也给了自己莫大的鼓舞,其实做题虽然不比真正的编程,但是也能够让你发现一些你之前没有注意到的语言层面的问题.所以,这次再分享一道稍微 ...

  2. BZOJ.4821.[SDOI2017]相关分析(线段树)

    BZOJ LOJ 洛谷 恶心的拆式子..然后就是要维护\(\sum x_i,\ \sum y_i,\ \sum x_iy_i,\ \sum x_i^2\). 操作三可以看成初始化一遍,然后同操作二. ...

  3. SwipeableFlatList 实现类似于QQ列表滑动

    import React, { Component } from "react"; import { FlatList, RefreshControl, StyleSheet, T ...

  4. Debian stretch更换国内源

    在debian图形化安装过程中就可以选择网络镜像的位置 据说电信用清华的源快,移动的用网易源快 备份源配置文件: cp /etc/apt/sources.list /etc/apt/sources.l ...

  5. 2017.07.14【NOIP提高组】模拟赛B组

    Summary 这次比赛因为迟到了,少了很多时间,也受到了相应的惩罚,这是好的,是个标记牌,警醒着我.这次比赛的题目很难,也就是说,大家的得分都很低,总的来说,收获还是很大的,因为有非常多的技巧被掌握 ...

  6. 单调队列以及单调队列优化DP

    单调队列定义: 其实单调队列就是一种队列内的元素有单调性的队列,因为其单调性所以经常会被用来维护区间最值或者降低DP的维数已达到降维来减少空间及时间的目的. 单调队列的一般应用: 1.维护区间最值 2 ...

  7. opencv+python 自动绿帽机

    具体内容,直接看注释吧,该注释的我都注释掉了. # coding:utf-8 import cv2 # 待检测的图片路径 imagepath = r'D://greenhat//2.jpg' # 获取 ...

  8. 用python实现ARP欺骗

    首先介绍一个python第三方库--Scapy,这个库不是标准库,默认是没有的,需要安装,不过在kali-linux里边是默认安装的, 这里我用kali做攻击者,xp做受害者 关于Scapy Scap ...

  9. 关于django的部分

    新建Django工程 django-admin.exe startproject mysite 新建Django工程 新建static(静态模板文件存储路径) setting中配置static路径 S ...

  10. ios开发中字符串的常用功能总结

    1.分割字符串 NSString * str1 = @"123/456"; NSArray * arr1 = [str1 componentsSeparatedByString:@ ...