EJS資料彙總

時間 2019-11-07

標籤 ejs 資料彙總简体版

原文原文鏈接

跳槽後，本身不單單要寫react、vue項目，還要維護公司現存的用ejs+JQuery開發的老項目，尤爲是ejs，在搜索引擎中收錄的學習文檔和大佬們的解決方案都差很少是一到兩年前的了，總結出此文給還在維護這些語言開發的項目的新手們。javascript

1、什麼是ejs？

EJS 是一套簡單的模板語言，用來從JSON數據中生成HTML字符串。css

2、以前爲何要使用EJS？

vue和react沒有出現以前，前端綁定數據除了字符串拼接、模版綁定（handlebar、ejs）還有後端生成vm、jsp（使用JSTL和Velocity語法）html

（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的模版字符串也能簡化拼接，可是老項目大多不能編譯ES6vue

（2）EJSjava

爲了解決這些問題，大佬開發了各類模版語言，ejs就是其中一種。
建立一個EJS模板,命名爲cleaning.ejs文件，內容以下：react

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

完整內容以下：npm

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

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

4、參數

cache 緩存編譯後的函數，須要提供 filename
filename 被 cache 參數用作鍵值，同時也用於 include 語句
context 函數執行時的上下文環境
compileDebug 當爲 false 時不編譯調試語句
client 返回獨立的編譯後的函數
delimiter 放在角括號中的字符，用於標記標籤的開與閉
debug 將生成的函數體輸出
_with 是否使用 with() {} 結構。若是爲 false，全部局部數據將存儲在 locals 對象上。
localsName 若是不使用 with ，localsName 將做爲存儲局部變量的對象的名稱。默認名稱是 locals
rmWhitespace 刪除全部可安全刪除的空白字符，包括開始與結尾處的空格。對於全部標籤來講，它提供了一個更安全版本的 -%> (在一行的中間並不會剔除標籤後面的換行符)。
escape 爲 <%= 結構設置對應的轉義（escape）函數。它被用於輸出結果以及在生成的客戶端函數中經過 .toString() 輸出。(默認轉義 XML)。
複製代碼

5、標籤含義

<% '腳本' 標籤，用於流程控制，無輸出。 <%_ 刪除其前面的空格符 <%= 輸出數據到模板（輸出是轉義 HTML 標籤） <%- 輸出非轉義的數據到模板 <%# 註釋標籤，不執行、不輸出內容 <%% 輸出字符串 '<%' %> 通常結束標籤 -%> 刪除緊隨其後的換行符 _%> 將結束標籤後面的空格符刪除

6、包含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>
複製代碼

6、自定義分隔符

可針對單個模板或全局使用自定義分隔符：

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