ejs簡單教程

ejs learning

nodejs的模板引擎有很多， ejs是比較簡單和容易上手的。常用的一些語法:

• 用<%...%>包含js代碼
• 用<%=...%>輸出變量 變量若包含 '<' '>' '&'等字符 會被轉義
• 用<%-...%>輸出變量 不轉義
• 用<%- include('user/show') %>引入其他模板 包含 ./user/show.ejs
• 用<%# some comments %>來注釋，不執行不輸出
• <%% 轉義為 '<%'
• <% ... -%> 刪除新的空白行模式?
• <%_ ... _%> 刪除空白符模式

安裝

npm install ejs
bower install ejs
//ejs可以配合express框架使用，或直接在node中/瀏覽器中使用

基本用法

//template.ejs:
<% if(comic) { %>
    <h2><%=comic.name%></h2>
<% } %>

//test.js:
var comic = {name: 'one  piece'};

// 渲染文件模板,
// comic.ejs 包含 header.ejs footer.ejs, 
// 若include了文件 必須指定 filename參數 , 參數為文件路徑，
// 文件所在目錄為查找include資源的目錄  path.diranme(specialFilepath) 
var html = ejs.render( fs.readFileSync('comic.ejs', 'utf8'), {'comic': comic}, {filename: __dirname+'\\abc.js'});
console.log(html);

方法

• ejs.compile() ejs.render()

    var template = ejs.compile(str, options); //=> function
    template(data); //=> html
    
    ejs.render(str, data, options); //=>html
    
    //or 把str data options都放在一個object中傳入
    ejs.render(allOptions);
  

• options參數

  • cache 緩存編譯后的函數(ejs.compile(..) ,需要 filename參數作為緩存的key
  • filename 用於緩存的key，和include
  • context 函數的執行上下文
  • compileDebug 輸出compile的信息來跟蹤調試
  • client 返回編譯后的函數
  • delimiter <% .. %> 指這里的%
  • debug 輸出ejs.compile()得到函數的函數體
  • strict ejs.compile()返回的函數是否執行在嚴格模式
  • _with 是否使用 with(){..} 來訪問本地變量
  • localsName 保存本地變量的對象名，默認為locals
  • rmWhitespace 移除多余空格

• include(文件包含)
  被包含文件的路徑可以是：絕對路徑或相對路徑,還可以傳入data

    <ul>
        <% users.forEach(function(user){ %>
            <%- include('user/show', {user: user}) %>
        <%});%>
    </ul>
  

  include是在運行時被執行的，所以可以支持路徑為變量, 如：

    <% somePath='some/path' %>
    ...
    <%- include(somePath) %>
  

• 自定義模板定界符

    var ejs = require('ejs');
    var users = ['lufy', 'zoro', 'nami'];
    
    //渲染字符串模板時，指定分隔符
    //<%= ... %> 輸出變量 輸出表達式的結果
    var ret1 = ejs.render('<?=users.join(" | "); ?> ', {users: users}, {delimiter: '?'});
    console.log(ret1);  //=>lufy | zoro | nami
    
    // 全局指定分隔符
    ejs.delimiter = '$';
    var ret2 = ejs.render('<$= users.join(" | "); $>', {users: users});
    console.log(ret2);
  

• 頁面布局
  ejs沒有顯式的支持布局功能，但是可以通過 include 頁頭頁腳的方式，實現基本的布局。

    //comic.ejs:
    <%- include('header'); %>
    <h1>hot comic now: </h1>
    <% if(comic) { %>
    	<h2><%= comic.name %></h2>
    <% } %>
    <%- include('footer')  %>
    
    //test.js:
    var html = ejs.render( fs.readFileSync('comic.ejs', 'utf8'), {'comic': comic}, {filename: __dirname+'\\abc.js'});