首页手记网页的内容与结构实现分离：ejs在客户端的使用方式

网页的内容与结构实现分离：ejs在客户端的使用方式

标签：

JQuery JavaScript 前端工具

学过前端的同学都听说过“HTML内容、CSS样式、JS行为”三者需实行分离。那么，你是否清楚HTML也需要分为内容与显示框架两部分呢？其实大家都明白，一个在运行的网站，其网页的内容是在变化的，而这些变化的职责，则由网页模板来承载着。

声明：本文只是对网页模板作一个简单的介绍，而不会做深入的剖析，希望了解ejs原理的同学，请自行谷歌。

下面，我会用 HTML + jQuery + JSON 实现一个简单的网页渲染。
其中HTML代码如下：

<head>
    <meta charset="UTF-8">
    <title></title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="ejs.min.js" type="text/javascript" charset="utf-8"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="module.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="show"></div>
    <!--以下这段script代码就是模板，Js通过id=module找到该模板并替换其中 <%=?%> 的内容，然后找到id=show的容器，把替换好的内容放入容器中-->
    <script type="text/html" id="module">
        <% data.map(function(item){ %>
             <h2><%=item.header%></h2>
             <p><%=item.paragraph%></p>
        <% }) %>
    </script>
</body>

由于该例子是用jQuery和ejs所实现的网页模板，同学们在模仿时请记得引入这两个文件：http://pan.baidu.com/s/1o8yDIf4 。

JS： “module.js” 的代码如下：

$(function(){
    $.getJSON("test.json",function(allData){ //jQuery的获取json文件的方法，并返回一个json对象 allData
        var html = ejs.render( $("#module").html(), { data : allData } );
        $("#show").append(html);
    });
});

这里的ejs是引入ejs文件后便可立即使用的ejs对象，就像你一旦引入了jQuery文件，你就能使用 $ 或 jQuery 对象来调用其内部方法一样。ejs.render( a, b); 的意思就是找到模板a，然后用 b 的内容去替换 a 里面的变量（以<%= %>为标志）。

<% data.map(function(item){ %> <% }) %>是一对方法组合，与变量不同，方法组合的符号<% %>之间没有等号。

data是由ejs.render()方法调用时所传来的data（名称必须一样）。

data.map()是一个遍历函数，在这里共执行了两遍。产生的结果就是：<h2>Hello</h2><p>This is hello</p><h2>World</h2><p>This is world</p>
最后再把这个结果放入到id=show的div中，以呈现出来。

JSON文件 test.json 的内容如下：

[
    {
        "header":"Hello",
        "paragraph":"This is hello"
    },
    {
        "header":"World",
        "paragraph":"This is world"
    }
]

json文件的格式多变，在这里是一个数组，包含了两个对象。在对象的键值对中，键和值都必须用双引号包含起来，否则会报错。如果你观察仔细，一定会发现里面的键名和HTML模板的变量名末端是一样一样的哦。

最后，来看看我们的网页的结果吧：