在ejs模板中，通常會用下面四種方式在HTML中輸出服務端的變量或表達式的值：
1. 直接在<%%>中寫表達式或變量。這種情況通常只是用來進行表達式計算或給變量賦值，不會有任何輸出，被稱作無緩沖的代碼。
<% code %>2. 在<%%>中通過=號輸出變量或表達式的值。默認輸出到頁面中的內容會進行HTML轉義。如<div>Hello</div>輸出后會變成<div>Hello</div>
<%= code %>3. 在<%%>中通過-號輸出變量或表達式的值。內容不經任何轉義直接輸出到頁面上。
<%- code %>4. 在結束標記%>之前添加-號，這樣輸出的內容會自動帶有HTML標記的縮進。如：
<% code -%> 或 <% -%> 或 <%= code -%> 或 <%- code -%>使用EJS(模板引擎)動態綁定頁面中的數據
javaScript
序
作為一名前端開發工程師，我們經常會使用Ajax/JSONP等技術，從服務器端獲取到我們所需要的數據，然后把數據動態的展示在對應頁面中。這里列舉一下目前市場上常用的綁定方式：
1、不依托JS，而是使用php/Ruby/Python/jsp等技術實現數據的綁定
目前市場上還有很多項目是這樣處理的，數據獲取綁定的操作都不是由JS完成，而是由其它的語言來完成；這樣做的主要原因(個人分析哈)：使用JS獲取數據然后進行動態數據綁定，當瀏覽器把頁面加載完成后，你去查看頁面的源代碼，會發現在源代碼中并沒有綁定的內容，這樣搜索引擎的小蜘蛛過來收錄的時候，也同樣找不到對應的文章或者文字內容，不利于網站的推廣和SEO優化。目前傳統的門戶網站，例如騰訊新聞，他們的數據綁定是由其它語言來完成的。
小伙伴們如果你的公司數據綁定也是由其它的語言來完成，bing go，那么恭喜你中獎了，友情提示：你需要在閑暇的時間去自學一些PHP、Ruby、JSP等，只有這樣你才能看懂項目的源代碼哈；而且你要做好心理準備，很有可能后臺人員把數據綁定完成了，你的頁面布局結構也亂了，你還要苦苦的去改；總之，這種前后端沒有徹底分離的模式，不管是對于前端還是后臺開發人員都有不小的挑戰，加油吧騷年~~
2、JS代碼中進行字符串拼接
這種方式屬于完全的前后端分離，在JS中獲取到服務器端返回的數據后，把之前在HTML頁面中寫好的標簽，一句句的復制到JS中，用字符串拼接的方式，把標簽和數據拼接在一起，最后在把拼接完成的字符串插入到頁面中指定的位置。使用這種方式處理簡單的字符串拼接還可以，處理復雜的，非常的惡心，我們接下來看一下：
var str = ''; if (jsonData) { var data = jsonData["data"]; $.each(data, function (key, curAry) { str += '<div class="matchDate" time="' + key + '">'; str += '<h2 class="date">' + key.myFormatTime("{1}月{2}日") + '</h2>'; str += '<ul class="matchList">'; $.each(curAry, function (index, curData) { var linkURL; str += '<li>'; str += '<div class="left">'; str += '<span class="time">' + curData["startTime"].myFormatTime("{3}:{4}") + '</span>'; str += '<span class="type">' + curData["matchDesc"] + '</span>'; str += '</div>'; str += '<div class="middle">'; str += '</li>'; }); str += '</ul>'; str += '</div>'; }); } $match.children("div").eq(0).html(str); $myScroll.refresh();o my god! 這是啥！不僅拼接字符串的時候浪費時間，后期改動的話也不好改，而且JS代碼會非常的混亂...；此外我看了一些項目中，還有使用動態創建元素節點來實現的，這樣做和字符串拼接一樣，JS中的代碼混亂，不易于后期的維護，此外使用動態創建元素節點的方式，還會引發多次的DOM回流，影響頁面的性能。(數據綁定和DOM回流講解視頻，可以點擊查看哈~~)
3、使用模板引擎綁定和渲染數據
模板引擎的原理其實也是字符串拼接，但是和第二種不同的是，它不是把字符串在JS代碼中拼接，而是先在HTML頁面中，按照模板提供的規則把數據內容嵌入到HTML標簽中。最后由模板解析成需要的字符串，在JS中把解析出來的字符串放入到頁面中的指定位置進行渲染。
目前市面上流行的模板很多很多，例如：kTemplate、jade、dot、angular中也提供模板、以及我們今天需要講解的EJS等...，當初jQuery的作者寫了一個50行代碼左右的模板，有興趣的可以自己分析一下其它模板的源碼，然后寫出一個屬于自己的模板。
EJS
EJS(Embedded Javascript)也是眾多模板中的一種，它主要是NODE開源的模板，在NODE環境下實現綁定和渲染的。但是它也可以單獨的在客戶端調取使用，我們接下來就介紹獨立在客戶端的使用，在NODE中如何的使用請關注“珠峰培訓NODE培訓課程”。
在客戶端使用EJS主要是分四步:
1、導入EJS
EJS的源碼大家可以去它的官網進行下載：http://www.embeddedjs.com/
<script charset="UTF-8" type="text/javascript" src="js/ejs.min.js"></script>2、準備需要綁定的數據
在真實的項目中，這一步需要使用AJAX或者JSONP等技術從服務器獲取，然后把獲取回來的數據進行解析重構(一般情況下也不需要二次重構數據結構)。
//->使用jQuery的AJAX獲取數據 $.ajax({ url:'/getMenu', type:'get', dataType:'json', success:function(data){ //->data:就是我們從服務器獲取的數據,然后執行第四步的binDHTML方法 bindHTML(data); } }); //->假設我們獲取的數據格式如下 [ { "name": "NBA", "tag": "nba", "columnId": 100000 }, { "name": "歐洲杯", "tag": "ec", "columnId": 3 }, { "name": "中超", "tag": "csl", "columnId": 208 } ... ]3、在HTML頁面中設定模板和嵌入數據
模板有自己的渲染規則，我們把需要寫的JS循環判斷放在<%%>中，如果需要輸出用<%=%>；其實非常的簡單就是把之前字符串拼接方式中的JS寫在了HTML中，這樣EJS負責把模板中的內容獲取到，然后按照規則把數據和HTML標簽拼接在一起...
//->這個是最終顯示HTML和數據的區域 <div class="menu"></div> //->這個是制定的模板 <script charset="UTF-8" type="text/template" id="menuTemplate"> <%if(data && data.length>0){%> <ul> <%data.forEach(function(curData,index){%> <%var cName=index===0?'bg':null;%> <li class="<%=cName%>"> <a href="#<%=curData.tag%>" columnId="<%=curData.columnId%>"> <%=curData.name%> <i class="triangle"> <span class="triLeft"></span> <span class="triRight"></span> </i> </a> </li> <%});%> </ul> <%}%> </script>4、在JS中為EJS模板提需要綁定的供數據
function bindHTML(data){ //->首先把頁面中模板的innerHTML獲取到 var str=$("#menuTemplate").html(); //->然后把str和data交給EJS解析處理，得到我們最終想要的字符串 var result=ejs.render(str, {data: data}); //->最后把獲取的HTML放入到MENU中 $(".menu").html(result); }以上就是EJS獨立在客戶端的使用，其它的模板引擎和其類似，區別在于模板中的嵌入數據和編寫JS的語法不一樣，例如：EJS是<%%>操作，而dot是{{}}這樣操作，angular也有自己的操作規則...珠峰培訓的NODE課程中將會為大家繼續講解EJS深入以及更多的模板引擎，歡迎大家來學習。
在 EJS (Embedded JavaScript) 模板系統中, 字符串輸出時默認是經過escape轉義編碼的.
// 用=號輸出,就會被escapge轉義編碼 <%= VARIABLE_NAME %>這種默認轉義編碼可能會帶來麻煩, 比如我要輸出一個 json 對象供客戶端 javascirpt 使用, 或者想輸出一些動態生成的 HTML 標簽, 幸運的是EJS提供另一種輸出方式:
// 用“-”輸出原始內容, 不會被escape,<%- VARIABLE_NAME %>
新聞熱點
疑難解答
