首页 > 语言 > JavaScript > 正文

Node.js的Web模板引擎ejs的入门使用教程

2024-05-06 14:56:45
字体:
来源:转载
供稿:网友

Node 开源模板的选择很多,但推荐像我这样的老人去用 EJS,有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然,也就是说,你能够在 <%...%> 块中安排 JavaScript 代码,利用最传统的方式 <%=输出变量%>(另外 <%-输出变量是不会对 & 等符号进行转义的)。安装 EJS 命令如下:

npm install ejs

JS 调用
JS 调用的方法主要有两个:

ejs.compile(str, options); // => Function  ejs.render(str, options); // => str 

实际上 EJS 可以游离于 Express 独立使用的,例如:

var ejs = require(''), str = require('fs').readFileSync(__dirname + '/list.ejs', 'utf8');  var ret = ejs.render(str, {  names: ['foo', 'bar', 'baz'] });  console.log(ret); 见 ejs.render(),第一个参数是 模板 的字符串,模板如下。<% if (names.length) { %>  <ul>  <% names.forEach(function(name){ %>   <li foo='<%= name + "'" %>'><%= name %></li>  <% }) %>  </ul> <% } %> 

names 成了本地变量。

选项参数
第二个参数是数据,一般是一个对象。而这个对象又可以视作为选项,也就是说数据和选择都在同一个对象身上。
如果不想每次都都磁盘,可需要缓存模板,设定 options.filename  即可。例如:

var ejs = require('../')  , fs = require('fs')  , path = __dirname + '/functions.ejs'  , str = fs.readFileSync(path, 'utf8');  var users = [];  users.push({ name: 'Tobi', age: 2, species: 'ferret' }) users.push({ name: 'Loki', age: 2, species: 'ferret' }) users.push({ name: 'Jane', age: 6, species: 'ferret' })  var ret = ejs.render(str, {  users: users,  filename: path });  console.log(ret); 

inculde 指令
而且,如果要如

<ul> <% users.forEach(function(user){ %> <% include user/show %> <% }) %></ul>

般插入公共模板,也就是引入文件,必须要设置 filename 选项才能启动 include 特性,不然 include 无从知晓所在目录。
模板:

<h1>Users</h1>  <% function user(user) { %>  <li><strong><%= user.name %></strong> is a <%= user.age %> year old <%= user.species %>.</li> <% } %>  <ul>  <% users.map(user) %> </ul> 

EJS 支持编译模板。经过模板编译后就没有 IO 操作,会非常快,而且可以公用本地变量。下面例子 user/show 忽略 ejs 扩展名:

<ul>  <% users.forEach(function(user){ %>  <% include user/show %>  <% }) %> </ul> 

自定义 CLOSE TOKEN
如果打算使用 <h1>{{= title }}</h1> 般非 <%%>标识,也可以自定义的。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选