EJS 高效的 JavaScript 模板引擎

你的名字 2023-06-01 12:51 14阅读 0赞

## 什么是 EJS？ ##

"E" 代表 "effective"，即【高效】。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

### 语法简单 ###

EJS 支持直接在标签内书写简单、直白的 JavaScript 代码。只需让 JavaScript 输出你所需要的 HTML ，完成工作很轻松

### 执行迅速 ###

我们都知道 V8 以及类似 JavaScript 引擎的速度有多快。EJS 能够缓存 JS 函数的中间代码，从而提升执行速度。

### 易于调试 ###

调试 EJS 错误（error）很容易：所有错误都是普通的 JavaScript 异常，并且还能输出异常发生的位置。

## 特性 ##

*  快速编译与绘制输出
 *  简洁的模板标签：<% %>
 *  自定义分割符（例如：用 <? ?> 替换 <% %>）
 *  引入模板片段
 *  同时支持服务器端和浏览器 JS 环境
 *  JavaScript 中间结果静态缓存
 *  模板静态缓存
 *  兼容 [Express][] 视图系统

### 安装 ###

利用 NPM 安装 EJS 很简单。

$ npm install ejs

### Use ###

将模板字符串和一些数据作为参数传递给 EJS，Duang，HTML 出来了。

var ejs = require('ejs'), people = ['geddy', 'neil', 'alex'], html = ejs.render('<%= people.join(", "); %>', {people: people});

### 浏览器支持 ###

从这里下载 ，然后引入页面即可。

`文档`

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

`用法 var template = ejs.compile(str, options); template(data); // => 输出绘制后的 HTML 字符串 ejs.render(str, data, options); // => 输出绘制后的 HTML 字符串 ejs.renderFile(filename, data, options, function(err, str){ // str => 输出绘制后的 HTML 字符串 });`

`参数 cache 缓存编译后的函数，需要提供 filename filename 被 cache 参数用做键值，同时也用于 include 语句 context 函数执行时的上下文环境 compileDebug 当为 false 时不编译调试语句 client 返回独立的编译后的函数 delimiter 放在角括号中的字符，用于标记标签的开与闭 debug 将生成的函数体输出 _with 是否使用 with() {} 结构。如果为 false，所有局部数据将存储在 locals 对象上。 localsName 如果不使用 with ，localsName 将作为存储局部变量的对象的名称。默认名称是 locals rmWhitespace 删除所有可安全删除的空白字符，包括开始与结尾处的空格。对于所有标签来说，它提供了一个更安全版本的 -%> (在一行的中间并不会剔除标签后面的换行符)。 escape 为 <%= 结构设置对应的转义（escape）函数。它被用于输出结果以及在生成的客户端函数中通过 .toString() 输出。(默认转义 XML)。`

### 标签含义 ###

*  `<%` '脚本' 标签，用于流程控制，无输出。
 *  `<%_` 删除其前面的空格符
 *  `<%=` 输出数据到模板（输出是转义 HTML 标签）
 *  `<%-` 输出非转义的数据到模板
 *  `<%#` 注释标签，不执行、不输出内容
 *  `<%%` 输出字符串 '<%'
 *  `%>` 一般结束标签
 *  `-%>` 删除紧随其后的换行符
 *  `_%>` 将结束标签后面的空格符删除

`包含（include） 通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 'filename' 参数。) 例如，如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 两个模板文件，你可以通过 <%- include('user/show'); %> 代码包含后者。 你可能需要能够输出原始内容的标签 (<%-) 用于 include 指令，避免对输出的 HTML 代码做转义处理。 <ul> <% users.forEach(function(user){ %> <%- include('user/show', {user: user}); %> <% }); %> </ul> 自定义分隔符 可针对单个模板或全局使用自定义分隔符： var ejs = require('ejs'), users = ['geddy', 'neil', 'alex']; // 单个模板文件 ejs.render('<?= users.join(" | "); ?>', {users: users}, {delimiter: '?'}); // => 'geddy | neil | alex' // 全局 ejs.delimiter = '$'; ejs.render('<$= users.join(" | "); $>', {users: users}); // => 'geddy | neil | alex'`

转载于:https://www.cnblogs.com/angel648/p/11099024.html

[Express]: http://expressjs.com/