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

nodejs 服务器端使用

第一步： 引入 art-template 的包

npm install --save art-template

npm install --save express-art-template

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

const art_express = require('express-art-template');

const app = express(); // 创建app对象。

// 设置art的模板引擎

app.engine('art', art_express);

app.get('/user/list', (req, res) => {

  res.render('users/userlist2.art', {

    title: '你好啊！',

    users: userService.getUsers()

  });

});

核心方法

// 基于模板名渲染模板

template(filename, data);

// 将模板源代码编译成函数

template.compile(source, options);

// 将模板源代码编译成函数并立刻执行

template.render(source, data, options);

浏览器端使用

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

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

<script src="lib/template-web.js"></script>

<script id="tpl-user" type="text/html">

{{if user}}

  <h2>{{user.name}}</h2>

{{/if}}

</script>

兼容到 IE8 的实例：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>IE</title>

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>-->

<script src="es5-shim.min.js"></script>

<script src="es5-sham.min.js"></script>

<script src="json3.min.js"></script>

<script src="../../lib/template-web.js"></script>

</head>

<body>

<div id="content"></div>

<script id="test" type="text/html">

{{if isAdmin}}

<h1>{{title}}</h1>

<ul>

    {{each list value i}}

        <li>索引 {{i + 1}} ：{{value}}</li>

    {{/each}}

</ul>

{{/if}}

{{$data}}

</script>

<script>

var data = {

    title: '基本例子',

    isAdmin: true,

    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

};

var html = template('test', data);

document.getElementById('content').innerHTML = html;

</script>

</body>

</html>

基本语法

输出

  • 输出标准语法
{{value}}

{{data.key}}

{{data['key']}}

{{a ? b : c}}

{{a || b}}

{{a + b}}
  • 原始语法
<%= value %>

<%= data.key %>

<%= data['key'] %>

<%= a ? b : c %>

<%= a || b %>

<%= a + b %>

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

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

原文输出

  • 原文输出标准语法

{{@ value }}

  • 原始语法

<%- value %>

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

条件语法

  • 条件标准语法
{{if value}} ... {{/if}}

{{if v1}} ... {{else if v2}} ... {{/if}}
  • 原始语法
<% if (value) { %> ... <% } %>

<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

循环

  • 循环标准语法
{{each target}}

{{$index}} {{$value}}

{{/each}}
  • 原始语法
<% for(var i = 0; i < target.length; i++){ %>

<%= i %> <%= target[i] %>

<% } %>

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

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

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

模板继承

  • 模板继承标准语法
{{extend './layout.art'}}

{{block 'head'}} ... {{/block}}
  • 原始语法
<% extend('./layout.art') %>

<% block('head', function(){ %> ... <% }) %>

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

<!--layout.art-->

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>{{block 'title'}}My Site{{/block}}</title>

    {{block 'head'}}

    <link rel="stylesheet" href="main.css">

    {{/block}}

</head>

<body>

    {{block 'content'}}{{/block}}

</body>

</html>

<!--index.art-->

{{extend './layout.art'}}

{{block 'title'}}{{title}}{{/block}}

{{block 'head'}}

<link rel="stylesheet" href="custom.css">

{{/block}}

{{block 'content'}}

<p>This is just an awesome page.</p>

{{/block}}

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

子模板

  • 子模板标准语法
{{include './header.art'}}

{{include './header.art' data}}
  • 原始语法
<% include('./header.art') %>

<% 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};

过滤器函数

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

  • 标准语法
{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

{{value | filter}} 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
  • 原始语法
<%= $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

$ npm install gulp-tmod --save-dev

配置 gulpfile.js 文件

const tmodjs = require('gulp-tmod');

gulp.task('tpl', function() {

  gulp

    .src('src/template/**/*.html') // 找到所有的html模板

    .pipe(

      tmodjs({

        templateBase: 'src/template/', // 模板根目录

        runtime: 'tpl.js', // 输出的js文件

        compress: false // 是否压缩

      })

    )

    // 自动生成的模板文件，进行babel转换，会报错，此转换插件已经停更，所以间接改这个bug

    // 参考bug：https://github.com/aui/tmodjs/issues/112 主要是this  →  window

    .pipe(replace('var String = this.String;', 'var String = window.String;'))

    .pipe(gulp.dest('src/js/tmpl/'));

});

使用选项设置：

  • 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 文件，那么下面的例子：

const tmodjs = require('gulp-tmod');

gulp.task('tpl', function() {

  // 拿到所有的路径

  let basePath = path.join(__dirname, 'src/template');

  let files = fs.readdirSync(basePath);

  files.forEach((val, index) => {

    let dirPath = path.join(basePath, val);

    let stat = fs.statSync(dirPath);

    if (!stat.isDirectory()) {

      // 判断是否是文件夹

      return;

    }

    var fileter = 'src/template/' + val + '/**/*.html';

    console.log(fileter);

    gulp

      .src('src/template/' + val + '/**/*.html')

      .pipe(

        tmodjs({

          templateBase: 'src/template/' + val,

          runtime: val + '.js',

          compress: false

        })

      )

      // 自动生成的模板文件，进行babel转换，会报错，此转换插件已经停更，所以间接改这个bug

      // 参考bug：https://github.com/aui/tmodjs/issues/112 主要是this  →  window

      .pipe(replace('var String = this.String;', 'var String = window.String;'))

      .pipe(gulp.dest('src/js/tmpl/'));

  });

});

配合 require.js

/*

 * @Author: malun

 * @Date: 2018-04-18 01:14:20

 * @Last Modified by: malun

 * @Last Modified time: 2018-06-11 19:57:24

 */

require(['template', 'jquery', 'js/tmpl/user', 'js/tmpl/header'], function(

  template,

  $,

  userTpl,

  headTpl

) {

  document.getElementById('dt').innerHTML = headTpl('header', data);

  $.ajax({

    url: '/api/shoplist',

    type: 'GET',

    success: function(data) {

      document.getElementById('dt2').innerHTML = userTpl('footer', data);

    }

  });

});

高性能前端 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. PAT (Advanced Level) Practise 1004 解题报告

    GitHub markdownPDF 问题描述 解题思路 代码 提交记录 问题描述 Counting Leaves (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 1600 ...

  2. php文件及文件夹操作（创建、删除、移动、复制）

    <?php /** * 操纵文件类 * * 例子: * FileUtil::createDir('a/1/2/3'); 测试建立文件夹 建一个a/1/2/3文件夹 * FileUtil::cre ...

  3. BZOJ.5093.[Lydsy1711月赛]图的价值(NTT 斯特林数)

    题目链接 对于单独一个点,我们枚举它的度数(有多少条边)来计算它的贡献:\[\sum_{i=0}^{n-1}i^kC_{n-1}^i2^{\frac{(n-2)(n-1)}{2}}\] 每个点是一样的 ...

  4. 2028 ACM Lowest Common Multiple Plus

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2028 思路:最一想到的就是暴力求解,从1开始一直到最后的答案,一直来除以给出的数列的数,直到余数为0:当然 ...

  5. (转）为什么wait()，notify()和notifyAll()必须在同步块或同步方法中调用

    我们常用wait(),notify()和notifyAll()方法来进行线程间通信.线程检查一个条件后就行进入等待状态,例如,在“生产者-消费者”模型中,生产者线程发现缓冲区满了就等待,消费者线程通过 ...

  6. shell脚本使用技巧4--读取字符,重复执行

    ls | cat -n > out.txt 给输出的信息加行号并导出到out.txt 利用shell生成一个独立的进程 pwd; (cd /bin; ls); pwd; 开启一个子shell,不 ...

  7. .net异常机制

    异常机制简介 当CPU运行到一些非法的指令,例如除零错误,访问内存页失败等指令,CPU会生成一个硬件异常,不同的异常有固定的异常代码作为标识符,异常产生以后CPU暂时不能继续执行后续的指令—因为后续的 ...

  8. jquery 获取奇数索引的元素，获取复选框，判断是否选中

    $(".btn-xs:odd").click(function(){ var $buy_num=$(this).prev("#buy_num").val(); ...

  9. MyBatis初探

    首先下载MyBatis jar包, 可以去MyBatis中文官网下载 项目中导入MyBatis jar包和JDBC jar包(此处用的MySQL) 新建conf.xml 内容如下: <?xml ...

  10. sench touch 页面跳转

    下面是我做的一个简单的登录页面登录成功后跳转页面 首页要在app.js 里面添加 1.视图层   登录页面 Ext.define('MyApp.view.Login', { extend: 'Ext. ...