序

作為一名前端開發工程師，我們經常會使用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