模板引擎------art-template的开始

说明

art-template is a simple and superfast templating：简单和超快的特点，有统一的模板，会让开发更加统一和维护。

更多请参考它的文档网站为：https://aui.github.io/art-template/zh-cn/docs/index.html

语法

有两种语法：

标准语法

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

原始语法：

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>
           

渲染模板。如何引用在js文件编辑

var template = require('art-template');
var html = template(__dirname + '/tpl-user.art', {
    user: {
        name: 'aui'
    }
});
           

列子

1. 新建mytpl.art文件：

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>
           

1. js文件：

/*模板引擎*/
let template = require('art-template');
let html = template(__dirname + '/mytpl.art', {
    user: {
        name: 'aui'
    }
});
console.log(html);
           

1. cmd运行js文件：> node .

F:\others\XAMPP\htdocs\es6\node\mydemo>node .

  <h2>aui</h2>//这是打印出来的
           

核心方法

主要的核心方法有：

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

模板2运用：js代码：

let template = require('art-template');
let tpl ='<ul>{{each list as value}}<li>{{value}}</li>{{/each}}</ul>';
let render = template.compile(tpl);
let ret = render({
	list: ['apple', 'orange', 'banana']
});
console.log(ret);
           

cmd运行效果：

F:\others\XAMPP\htdocs\es6\node\mydemo>node .
anonymous:1:5
Template upgrade: {{each object as value index}} -> {{each object value index}}
<ul><li>apple</li><li>orange</li><li>banana</li></ul>

           

模板3运用：

let template = require('art-template');
let tpl ='<ul>{{each list as value}}<li>{{value}}</li>{{/each}}</ul>';
let ret = template.render(tpl, {
	list: ['apple', 'orange', 'banana', 'fdd111']
});
console.log(ret);
           

cmd执行：

F:\others\XAMPP\htdocs\es6\node\mydemo>node .
anonymous:1:5
Template upgrade: {{each object as value index}} -> {{each object value index}}
<ul><li>apple</li><li>orange</li><li>banana</li><li>fdd111</li></ul>
           

以上运行都在node环境下