在ejs模板中，通常會(huì)用下面四種方式在HTML中輸出服務(wù)端的變量或表達(dá)式的值：

1. 直接在<%%>中寫表達(dá)式或變量。這種情況通常只是用來進(jìn)行表達(dá)式計(jì)算或給變量賦值，不會(huì)有任何輸出，被稱作無緩沖的代碼。

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