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

JS 调用

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

Function

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

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

var ret = ejs.render(str,{
names: ['foo','bar','baz']
});

console.log(ret);

见 ejs.render()，第一个参数是模板的字符串，模板如下。

'><%= name %>

<% } %>

names 成了本地变量。

选项参数

第二个参数是数据，一般是一个对象。而这个对象又可以视作为选项，也就是说数据和选择都在同一个对象身上。

如果不想每次都都磁盘，可需要缓存模板，设定 options.filename 即可。例如：

var users = [];

users.push({ name: 'Tobi',age: 2,species: 'ferret' })
users.push({ name: 'Loki',species: 'ferret' })
users.push({ name: 'Jane',age: 6,species: 'ferret' })

var ret = ejs.render(str,{
users: users,filename: path
});

console.log(ret);

inculde 指令

而且，如果要如

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

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

模板：

Users <% function user(user) { %>

<%= user.name %>

is a <%= user.age %> year old <%= user.species %>.

<% } %>

<% users.map(user) %>

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

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

自定义 CLOSE TOKEN

如果打算使用

般非 <%%>标识，也可以自定义的。

格式化输出也可以哦。

调用

<%=: users | last %>

EJS 也支持浏览器环境。

不知道 EJS 能否输出多层 JSON 对象呢？

对了，有网友爆料说，jQ 大神 John 若干年前写过 20 行的模板，汗颜，与 EJS 相似但短小精悍！

简单实用的js模板引擎

不足 50 行的 js 模板引擎，支持各种 js 语法：

class="first"<%=}=%>><%==stu.name=%><%=
}
=%>

“<%= xxx =%>”内是 js 逻辑代码，“<%== xxx =%>”内是直接输出的变量，类似 PHP 的 echo 的作用。“p”是调用下面 build 方法时的 k-v 对象参数，也可以在调用 “new JTemp” 时设置成别的参数名

调用：

上面的 temp 生成以后，可以多次调用 build 方法，生成 html。以下是模板引擎的代码：

'; this.getFun(); } Temp.prototype = { getFun : function(){ var _ = this,str = $('#' + _.htmlId).html(); if(!str) _.err('error: no temp!!'); var str_ = 'var ' + _.oName + '=this,f=\'\';',s = str.indexOf(_.TEMP_S),e = -1,p,sl = _.TEMP_S.length,el = _.TEMP_E.length; for(;s >= 0;){ e = str.indexOf(_.TEMP_E); if(e < s) alert(':( ERROR!!'); str_ += 'f+=\'' + str.substring(0,s) + '\';'; p = _.trim(str.substring(s+sl,e)); if(p.indexOf('=') !== 0){//js语句 str_ += p; }else{//普通语句 str_ += 'f+=' + p.substring(1) + ';'; } str = str.substring(e + el); s = str.indexOf(_.TEMP_S); } str_ += 'f+=\'' + str + '\';'; str_ = str_.replace(/\n/g,'');//处理换行 var fs = str_ + 'return f;'; this.fun = Function(fs); },build : function(p){ return this.fun.call(p); },err : function(s){ alert(s); },trim : function(s){ return s.trim?s.trim():s.replace(/(^\s*)|(\s*$)/g,""); } }; return Temp; }();

核心是将模板代码转变成了一个拼接字符串的 function，每次拿数据 call 这个 function。

因为主要是给手机（webkit）用的，所以没有考虑字符串拼接的效率问题，如果需要给 IE 使用，最好将字符串拼接方法改为 Array.push() 的形式。

附：connect + ejs 的一个例子。

exports.loadSite = function(request,response){
var siteRoot = 'C:/代码存档/sites/a.com.cn';
// _c.log(request.headers.host);

var url = request.url;
// 如果有 html 的则是动态网页，否则为静态内容
if(url == '/' || ~url.indexOf('/?') || url.indexOf('.asp') != -1 || url[url.length - 1] == '/'){
var tplPath;

if(url == '/' || ~url.indexOf('/?') || url[url.length - 1] == '/'){ 
  // 默认 index.html 
  tplPath = siteRoot + request.url + 'default.asp'; 
}else{ 
  tplPath = siteRoot + request.url.replace(/\?.*$/i,''); // 只需要<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>名 
} 

// 从<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>加载模板 
Step(function(){ 
  _c.log('加载模板：' + tplPath); 
  fs.exists(tplPath,this); 
},function(path_exists){ 
  if(path_exists === true)fs.readFile(tplPath,"utf8",this); 
  else if(path_exists === false) response.end<a href="https://www.jb51.cc/tag/404/" target="_blank" class="keywords">404</a>(request.url); 
  else response.end500('<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>系统异常',''); 
},function(err,tpl){ 

  var bigfootUrl,cssUrl,projectState = 0; // 0 = localhot/ 1 = Test Server / 2 = Deployed 
  switch(projectState){ 
    case 0: 
       bigfootUrl = "http://127.0.0.1/bigfoot/"; 
       cssUrl   = "http://127.0.0.1/lessService/?isdebug=true"; 
    break;  
    case 1: 
       bigfootUrl = "http://112.124.13.85:8080/static/"; 
       cssUrl   = "/asset/style/"; 
    break;  
    case 2: 
       bigfootUrl = "http://localhost:8080/bigfoot/"; 
    break; 
  } 

  var sitePath = request.getLevelByUrl(require(siteRoot + '/public/struct')),first = sitePath[0]; 
  var htmlResult = ejs.render(tpl,{ 
    filename : tplPath,bigfootUrl: bigfootUrl,cssUrl : cssUrl,projectState: projectState,query_request: request.toJSON(),request: request,config: require(siteRoot + '/public/config'),struct: require(siteRoot + '/public/struct'),sitePath : sitePath,firstLevel : first 
  }); 
  // _c.log(first.children.length) 
  response.end200(htmlResult); 
});

}else{
connect.static(siteRoot)(request,response,function(){
// if not found...
response.writeHead(404,{'Content-Type': 'text/html'});
response.end('404');
});
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/nodejs/39449.html

node.js中EJS 模板快速入门教程

选项参数

inculde 指令

<%= user.name %>

自定义 CLOSE TOKEN

{{= title }}

简单实用的js模板引擎

猜你在找的Node.js相关文章