ejs學習

EJS是一個JavaScript模板庫，用來從JSON數據中生成HTML字符串。

安裝

$ npm install ejs複製代碼

基本用法

//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);複製代碼

<!-- more -->

方法

• ejs.compile() ejs.render()

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

• options參數

  cache 緩存編譯後的函數(ejs.compile(..) ,須要 filename參數做爲緩存的keyfilename 用於緩存的key，和includecontext 函數的執行上下文compileDebug 輸出compile的信息來跟蹤調試client 返回編譯後的函數delimiter <% .. %> 指這裏的%debug 輸出ejs.compile()獲得函數的函數體strict ejs.compile()返回的函數是否執行在嚴格模式_with 是否使用 with(){..} 來訪問本地變量localsName 保存本地變量的對象名，默認爲localsrmWhitespace 移除多餘空格

• 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'});複製代碼