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

苏南大叔:art-template模板引擎,在node端的基本使用方法 - aui-node-hero
art-template模板引擎,在node端的基本使用方法(图2-1)

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

基本定义

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

npm install art-template --save

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

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

苏南大叔:art-template模板引擎,在node端的基本使用方法 - npm-intall
art-template模板引擎,在node端的基本使用方法(图2-2)

如果你获得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选项,见这里:

相关链接

总结

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

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   aui

本站的忠实读者小伙伴,正在阅读下面这些文章: