官网： 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. Adams输出宏代码

    for variable_name=loopobj object_names=.amachinery.* type=macro var set var=filename1 str=(eval(STR_ ...

  2. JS运算符问题

    以下代码是否报错,如果不报错输出什么,为什么 var x = !!"Hello" + (!"world", !!"from here!!") ...

  3. web前端知识大纲：系列二 css篇

    web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选 ...

  4. SQL总结——存储过程

    SQL总结(五)存储过程 概念 存储过程(Stored Procedure):已预编译为一个可执行过程的一个或多个SQL语句. 创建存储过程语法 CREATE proc | procedure pro ...

  5. SS+FinalSpeed终极教程[转]

    亲测,晚高峰看YOUTUBE的720P完全不卡. 推荐使用virwire buget VPS,性价比较高,128M内存,每月500G超大流量:http://www.cnblogs.com/tuzhuk ...

  6. [PA2014]Bazarek

    [PA2014]Bazarek 题目大意: 有\(n(n\le10^6)\)件商品,\(m(m\le10^6)\)次询问.每次询问若选出其中的\(k\)个,要求它们的总价为奇数,求最大可能的总价. 思 ...

  7. Python print函数用法，print 格式化输出

    原文地址:http://blog.csdn.net/zanfeng/article/details/52164124 使用print输出各型的 字符串 整数 浮点数 出度及精度控制 strHello ...

  8. 学习Struts--Chap03：struts.xml常用配置（基础）

    1.package属性 name:包名 用来唯一的指定一个package.package可以扩展,当一个package扩展自 另一个package时该package会在本身配置的基础上加入扩展的pac ...

  9. 通过pip安装python web

    提示 No module named 'utils' 我就pip install utils 提示 No module named 'db' 然后我就 pip install db 报错 No mod ...

  10. oracle 占比函数

    这个函数在oracle帮助文档的位置:SQL Reference里面,很好找的. 除报告详细数据外,许多报告中还包括每行总数的百分比.例如,每名客户的订单相对于总订单的百分比,或每位销售代表的销售额相 ...