EJS 嵌入式轻量级 JavaScript 模版引擎
E 是 effective 的缩写，EJS 是一个嵌入式轻量级 JavaScript 模版引擎，让您通过简单易懂的 JavaScript 代码生成 HTML 标签，没有必须的操作流程，没有迭代和控制流程，这仅仅是一个 JavaScript 插件。
安装
$ npm install ejs
特点
- Complies with the Express view system
- Static caching of intermediate JavaScript
- Unbuffered code for conditionals etc
<% code %> - Escapes html by default with
<%= code %> - Unescaped buffering with
<%- code %> - Supports tag customization
- Filter support for designer-friendly templates
- Includes
- Client-side support
- Newline slurping with
<% code -%>or<% -%>or<%= code -%>or<%- code -%>
简单示例
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
使用方法
ejs.compile(str, options);
// => Function
ejs.render(str, options);
// => str
可选参数
cacheCompiled functions are cached, requiresfilenamefilenameUsed bycacheto key cachesscopeFunction execution contextdebugOutput generated function bodycompileDebugWhenfalseno debug instrumentation is compiledclientReturns standalone compiled functionopenOpen tag, defaulting to “<%”closeClosing tag, defaulting to “%>”- All others are template-local variables
引入模版
Includes are relative to the template with the include statement,for example if you have “./views/users.ejs” and “./views/user/show.ejs”you would use <% include user/show %>. The included file(s) are literallyincluded into the template, no IO is performed after compilation, thuslocal variables are available to these included templates.
<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>一般插入公共模板，也就是引入文件，必须要设置 filename 选项才能启动 include 特性，不然 include 无从知晓所在目录。
自定义分隔符
Custom delimiters can also be applied globally:
var ejs = require('ejs');
ejs.open = '{{';
ejs.close = '}}';
Which would make the following a valid template:
<h1>{{= title }}</h1>
滤镜
EJS conditionally supports the concept of “filters”. A “filter chain”
is a designer friendly api for manipulating data, without writing JavaScript.
Filters can be applied by supplying the : modifier, so for example if we wish to take the array [{ name: 'tj' }, { name: 'mape' }, { name: 'guillermo' }] and output a list of names we can do this simply with filters:
Template:
<p><%=: users | map:'name' | join %></p>
Output:
<p>Tj, Mape, Guillermo</p>
Render call:
ejs.render(str, {
users: [
{ name: 'tj' },
{ name: 'mape' },
{ name: 'guillermo' }
]
});
Or perhaps capitalize the first user’s name for display:
<p><%=: users | first | capitalize %></p>
滤镜列表
Currently these filters are available:
- first
- last
- capitalize
- downcase
- upcase
- sort
- sort_by:’prop’
- size
- length
- plus:n
- minus:n
- times:n
- divided_by:n
- join:’val’
- truncate:n
- truncate_words:n
- replace:pattern,substitution
- prepend:val
- append:val
- map:’prop’
- reverse
- get:’prop’
添加滤镜
To add a filter simply add a method to the .filters object:
ejs.filters.last = function(obj) {
return obj[obj.length - 1];
};
客户端支持
include ./ejs.js or ./ejs.min.js and require("ejs").compile(str).
<html>
<head>
<script src="../ejs.js"></script>
<script id="users" type="text/template">
<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li><%= name %></li>
<% }) %>
</ul>
<% } %>
</script>
<script>
onload = function(){
var users = document.getElementById('users').innerHTML;
var names = ['loki', 'tobi', 'jane'];
var html = ejs.render(users, { names: names });
document.body.innerHTML = html;
}
</script>
</head>
<body>
</body>
</html>模板
在CODE上查看代码片派生到我的代码片
<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 扩展名：
在CODE上查看代码片派生到我的代码片
<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>相关链接
- Github地址：https://github.com/mde/ejs
- 项目主页：http://ejs.co/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论