EJS資料彙總

小山芋發表於2018-09-27
JS

跳槽後，自己不僅僅要寫react、vue專案，還要維護公司現存的用ejs+JQuery開發的老專案，尤其是ejs，在搜尋引擎中收錄的學習文件和大佬們的解決方案都差不多是一到兩年前的了，總結出此文給還在維護這些語言開發的專案的新手們。

一、什麼是ejs？

EJS 是一套簡單的模板語言，用來從JSON資料中生成HTML字串。

二、之前為什麼要使用EJS？

vue和react沒有出現之前，前端繫結資料除了字串拼接、模版繫結（handlebar、ejs）還有後端生成vm、jsp（使用JSTL和Velocity語法）

（1）字串拼接

var html = "<h1>"+data.title+"</h1>"
html += "<ul>"
for(var i=0; i<data.supplies.length; i++) {
    html += "<li><a href='supplies/"+data.supplies[i]+"'>"
    html += data.supplies[i]+"</a></li>"
}
html += "</ul>"
複製程式碼

如果頁面結構複雜，你需要拼接好多，維護也不簡單
其實ES6的模版字串也能簡化拼接，但是老專案大多不能編譯ES6

（2）EJS

為了解決這些問題，大佬開發了各種模版語言，ejs就是其中一種。
建立一個EJS模板,命名為cleaning.ejs檔案，內容如下：

<h1><%=title %></h1>
 <ul>  
  <% for (var i=0; i<supplies.length; i++) { %>       
    <li> 
      <a href= 'supplies/<%=supplies[i] %>'><%= supplies[i] %></a>        
    </li>   
  <% } %>
 </ul>
複製程式碼

完整內容如下：

<html>
 <head>
 <script type="text/javascript" src = "/js/ejs.js"></script>
 <script type ="text/javascript" >
   function myfunction(){
    var data='{"title":"cleaning","supplies":["mop","broom","duster"]}'
    var html = new EJS({url: '/js/tmpl/cleaning.ejs'}).render(JSON.parse(data));
    //JSON.parse(data) 把JSON字串解析為原生的javascript值。
     alert(html);     
    document.getElementById("div1").innerHTML=html;
  }
 </script>
 </head>
 <body>
     <button onclick = "myfunction()" >點選</button>
     < div id = "div1" ></div >
 </body>
 <html>
複製程式碼

或者：

<script src="ejs.js"></script>
<script>
  var people = ['geddy', 'neil', 'alex'],
      html = ejs.render('<%= people.join(", "); %>', {people: people});
</script>
複製程式碼

（2）專案中

<script type="text/template" id="searchContTemplate">
    <div class="searchCont">	
	<%if(code==1 && data ){%>
	    <div class="second-title"><label>XXXX：<%=data.custName%></label><label class="ml">客源編號：<span class="keCode"><%=data.id%></span></label></div>
	    <div class="cont">
           <% var list=data.showing%>
		    <%for(var i=0;i<list.length;i++){%>
		         <div class="item">
		            <img src="<%=list[i].picUrl%>" alt="">
		            <div class="info">
		               <label>	
	                       <h2><%=list[i].resblockName%></h2>
	                       <p class="foot">XXX <%=list[i].houseCode%></p>
                       </label>
                       <input type="radio" class="" name="houseCode" value="<%=list[i].houseCode%>">
		            </div>
		        </div>
		    <%}%>
	    </div>
	    <div class="control"><button class="btn-cancel actClose">取消</button><button class="btn-green btn-green actSelectFang">確認</button></div>
	    <%}else{%>
	     <div>暫無資料</div>
	    <%}%>
  </div>		    
</script>
複製程式碼

資料填充：

var template = $.template($("#searchContTemplate").html());
var result = template.render(data);
$(".fangKeSearch").append(result);
複製程式碼

（3）npm

npm install ejs
複製程式碼
var ejs = require('ejs'),
    people = ['geddy', 'neil', 'alex'],
    html = ejs.render('<%= people.join(", "); %>', {people: people});
複製程式碼

剩下的是官方文件中的內容（備份一下，我也粘上來了，可以不看）

四、引數

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'
複製程式碼

未完：邊開發邊完善

PS：釋出的時候，對應的標籤都沒有，EJS要涼了嗎？

中文文件：EJS文件

相關文章