使用EJS（模板引擎）动态绑定页面中的数据

序

作为一名前端开发工程师，我们经常会使用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