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

更新時間：2017年05月08日 10:19:28 作者：sp42a

本篇文章主要介紹了EJS 模板快速入門學習，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Node 開源模板的選擇很多，但推薦像我這樣的老人去用 EJS，有 Classic ASP/PHP/JSP 的經(jīng)驗用起 EJS 來的確可以很自然，也就是說，你能夠在 <%...%> 塊中安排 JavaScript 代碼，利用最傳統(tǒng)的方式 <%=輸出變量%>（另外 <%-輸出變量是不會對 & 等符號進行轉義的）。安裝 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()，第一個參數(shù)是模板的字符串，模板如下。

<% if (names.length) { %> 
 <ul> 
  <% names.forEach(function(name){ %> 
   <li foo='<%= name + "'" %>'><%= name %></li> 
  <% }) %> 
 </ul> 
<% } %>

names 成了本地變量。

選項參數(shù)

第二個參數(shù)是數(shù)據(jù)，一般是一個對象。而這個對象又可以視作為選項，也就是說數(shù)據(jù)和選擇都在同一個對象身上。

如果不想每次都都磁盤，可需要緩存模板，設定 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);

相關選項如下：

cache Compiled functions are cached, requires filename
filename 緩存的鍵名稱
scope 函數(shù)執(zhí)行的作用域
debug Output generated function body
compileDebug When false no debug instrumentation is compiled
client Returns standalone compiled function

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 支持編譯模板。經(jīng)過模板編譯后就沒有 IO 操作，會非?？?，而且可以公用本地變量。下面例子 user/show 忽略 ejs 擴展名：

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

自定義 CLOSE TOKEN

如果打算使用 <h1>{{= title }}</h1> 般非 <%%>標識，也可以自定義的。

 var ejs = require('ejs'); 
ejs.open = '{{'; 
ejs.close = '}}';

格式化輸出也可以哦。

 ejs.filters.last = function(obj) { 
 return obj[obj.length - 1]; 
};

調用

<p><%=: users | last %></p>

EJS 也支持瀏覽器環(huán)境。

<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>

不知道 EJS 能否輸出多層 JSON 對象呢？

對了，有網(wǎng)友爆料說，jQ 大神 John 若干年前寫過 20 行的模板，汗顏，與 EJS 相似但短小精悍！

簡單實用的js模板引擎

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

<script id="test_list" type="text/html"> 
<%= 
  for(var i = 0, l = p.list.length; i < l; i++){ 
    var stu = p.list[i]; 
=%> 
  <tr> 
    <td<%=if(i==0){=%> class="first"<%=}=%>><%==stu.name=%></td> 
    <td><%==stu.age=%></td> 
    <td><%==(stu.address || '')=%></td> 
  <tr> 
  
<%= 
  } 
=%> 
</script>

“<%= xxx =%>”內是 js 邏輯代碼，“<%== xxx =%>”內是直接輸出的變量，類似 php 的 echo 的作用。“p”是調用下面 build 方法時的 k-v 對象參數(shù)，也可以在調用 “new JTemp” 時設置成別的參數(shù)名

調用：

$(function(){ 
  var temp = new JTemp('test_list'), 
    html = temp.build( 
      {list:[ 
          {name:'張三', age:13, address:'北京'}, 
        {name:'李四', age:17, address:'天津'}, 
        {name:'王五', age:13} 
      ]}); 
  $('table').html(html); 
});

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

var JTemp = function(){ 
  function Temp(htmlId, p){ 
    p = p || {};//配置信息，大部分情況可以缺省 
    this.htmlId = htmlId; 
    this.fun; 
    this.oName = p.oName || 'p'; 
    this.TEMP_S = p.tempS || '<%='; 
    this.TEMP_E = p.tempE || '=%>'; 
    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，每次拿數(shù)據(jù) call 這個 function。

因為主要是給手機（webkit）用的，所以沒有考慮字符串拼接的效率問題，如果需要給 IE 使用，最好將字符串拼接方法改為 Array.push() 的形式。

附：connect + ejs 的一個例子。

var Step = require('../../libs/step'), 
  _c = require('./utils/utils'), 
  fs = require('fs'), 
  ejs = require('ejs'), 
  connect = require('connect'); 
 
exports.loadSite = function(request, response){ 
  var siteRoot = 'C:/代碼存檔/sites/a.com.cn'; 
  // _c.log(request.headers.host); 
   
  var url = request.url; 
  // 如果有 html 的則是動態(tài)網(wǎng)頁，否則為靜態(tài)內容 
  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,''); // 只需要文件名 
    } 
 
    // 從文件加載模板 
    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.end404(request.url); 
      else response.end500('文件系統(tǒng)異常', ''); 
    },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');   
    }); 
  } 
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

node.js部署之啟動后臺運行forever的方法
今天小編就為大家分享一篇node.js部署之啟動后臺運行forever的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-05-05
yarn的使用與升級Node.js的方法詳解
這篇文章主要給大家介紹了關于yarn的使用與利用yarn升級Node.js的方法，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-06-06
nodejs通過釘釘群機器人推送消息的實現(xiàn)代碼
最近在用 nodejs 寫爬蟲，之前的 nodejs 爬蟲代碼用 js 寫的，感覺可維護性太差，也沒有智能提示，于是把js改用ts(typescript)重寫一下，提升代碼質量。接下來通過本文給大家分享nodejs通過釘釘群機器人推送消息，需要的朋友參考下吧
2019-05-05
如何在Nestjs和Vue3中使用socket.io示例詳解
這篇文章主要為大家介紹了如何在Nestjs和Vue3中使用socket.io示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
node.js中的fs.mkdir方法使用說明
這篇文章主要介紹了node.js中的fs.mkdir方法使用說明,本文介紹了fs.mkdir方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下
2014-12-12
Express中全局中間件與局部中間件的使用
本文介紹了Express框架中的全局中間件與局部中間件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-12-12
Node.js實現(xiàn)兼容IE789的文件上傳進度條
這篇文章給大家介紹了如何實現(xiàn)兼容IE789的文件上傳進度條，如果你的工作用過上傳圖片或上傳大文件啥的，一般在IE低版本瀏覽器里，會切換到用flash解決,可是有些人肯定不會為了老舊IE的進度條而去學flash，那么下面來一起看看吧。
2016-09-09
如何在Nodejs中使用模塊fs文件系統(tǒng)
這篇文章主要介紹了如何在Nodejs中使用模塊fs文件系統(tǒng)，對nodejs感興趣的同學，可以參考下
2021-05-05
詳解如何讓Express支持async/await
本篇文章主要介紹了詳解如何讓Express支持async/await，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
Node.js實現(xiàn)連接mysql數(shù)據(jù)庫功能示例
這篇文章主要介紹了Node.js實現(xiàn)連接mysql數(shù)據(jù)庫功能,簡單分析了nodejs連接數(shù)據(jù)庫的操作步驟與相關實現(xiàn)技巧,需要的朋友可以參考下
2017-09-09