art-template模板引擎，在node端的基本使用方法

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

在本文中，苏南大叔继续和大家谈一下art-template的基本使用方法。在前面的文章中，苏南大叔描述的是在纯前端浏览器里面使用方案。在这篇文章里面，使用环境发生了变化，变成了node环境下，而不是浏览器里面使用。当然了，这个时候，鉴于node的特殊使用技能树，苏南大叔在这里，也不好说是在服务器端的使用环境。

本文测试环境：mac,chrome@81.0.4044.113，node@10.11.0，art-template@4.13.2。模板定义到文件里面，然后进行渲染，共有好多种获得渲染结果的html`数据的方案，总有一款适合你。

基本定义

因为是要在node环境下进行使用，所以需要先安装art-template这个库文件。命令如下：

npm install art-template --save

在node环境下，和浏览器环境下的使用基本操作，是类似的。只不过node环境下的话，因为具有文件读写能力，所以，可以把模板定义到.art文件里面。

整个操作都是类似的，就这么几部：定义模板、准备数据、渲染获得html。

如果你获得html代码了，可以保存到html文件里面，或者转入其他的流程了。下面的代码是一个可能的处理情形，生成具体的文件。

var fs = require('fs'); // 引入fs模块
fs.writeFile('./result.html',html,function(err){
     
});

渲染方案一：

simple.art:

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

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

var template = require('art-template');
var html = template(__dirname + '/tpl/simple.art', {
    user: {
        name: '苏南大叔'
    }
});

渲染方案二：

simple.art:

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

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

var view = require(__dirname + '/tpl/simple.art');
var html = view({
    user: {
        name: '苏南大叔'
    }
});

渲染方案三：

var template = require('art-template');
var source = '<ul>' 
    +    '{{each list as value i}}' 
    +        '<li>索引 {{i + 1}} ：{{value}}</li>' 
    +    '{{/each}}' 
    + '</ul>'; 
 var data={ 
    list: ['摄影', '电影', '民谣', '旅行', '吉他'] 
};
var render = template.compile(source); 
var html = render(data);

渲染方案四：

var template = require('art-template');
var source = '<ul>' 
    +    '{{each list as value i}}' 
    +        '<li>索引 {{i + 1}} ：{{value}}</li>' 
    +    '{{/each}}' 
    + '</ul>'; 
 var data={ 
    list: ['摄影', '电影', '民谣', '旅行', '吉他'] 
};
var html = template.render(source, data);

选项options

// 将模板源代码编译成函数
template.compile(source, options);

// 将模板源代码编译成函数并立刻执行
template.render(source, data, options);

这里神秘的options选项，见这里：

• http://aui.github.io/art-template/docs/options.html

相关链接

• https://newsn.net/say/art-template-web.html
• https://newsn.net/say/vscode-association.html

总结

在node端使用art-template，最显著的区别就是可以读取文件，所以模版定义可以从代码段中移动到模版文件.art里面。而对于获得最终的渲染结果html，怎么处理，就视情况而定了。在本文中，苏南大叔写了本地文件。几个不同的渲染函数，基本上都是大同小异，最终的结果都是一样的。所以，使用任意一个渲染函数都是可以的。

更多art-template的文章，请支持苏南大叔的远程系列文章：

• https://newsn.net/tag/aui/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。