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

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

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

下面，我会用 HTML + jQuery + JSON 实现一个简单的网页渲染。

其中HTML代码如下：

由于该例子是用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是由ejs.render()方法调用时所传来的data(名称必须一样)。

data.map()是一个遍历函数，在这里共执行了两遍。产生的结果就是：

Hello

This is hello

World

This is world

最后再把这个结果放入到id=show的div中，以呈现出来。

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

[

{

"header":"Hello",

"paragraph":"This is hello"

},

{

"header":"World",

"paragraph":"This is world"

}

]

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

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

这样，每当你需要更新网页的内容时，你只需要改动一下JSON文件里面的值就好了，这就能保证网页结构的安全。这个东西，实用性不大，但对你们去了解运营怎么更新页面肯定是有帮助的。

第一次写手记，不会被打吧？哈哈哈。。。