ejs java_ejs教程丶Java教程网-IT开发者们的技术天堂

ejs教程

一、什么是EJS

EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。

二、为什么要使用EJS

与最初的JavaScript相比较，一些不太了解你的代码的人可以更容易地通过EJS模板代码看得懂你的代码。 让我们放松一下，一起来享受下令人激动的干净简洁的感觉。

总之可以让代码更加干净整洁，让人易懂。

可以看如下的例子：

这是用javascript实现的代码

var html = "

"+data.title+"

"

html += "

• "

for(var i=0; i

html += "

"

html += data.supplies[i]+""

}

html += "

"

最终要实现的效果如下

但是上面的代码看起来很乱，虽然实现了功能，但是不容易让人弄懂。不仅代码丑陋，而且你的HTML结构完全在JavaScript代码中丢失。

下面学习EJS同样实现上面的功效，它的工作原理如下：

使用EJS来找回你的明确、维护性良好的HTML代码结构。

注:data是json对象，不能使json字符串。

在HTML中引入EJS,以使javascript能够使用它，引入EJS的语句如下：

创建一个EJS模板,命名为cleaning.ejs文件，内容如下：

我的HTML文档如下，引入EJS,并更加我们的提供EJS模板创建EJS对象，然后调用EJS对象成员函数解析JSON对象到模板中。

< head>

function myfunction(){

var data='{"title":"cleaning","supplies":["mop","broom","duster"]}'

var html = new EJS({url: '/js/tmpl/cleaning.ejs'}).render(JSON.parse(data));

//JSON.parse(data) 把JSON字符串解析为原生的javascript值。

alert(html);

document.getElementById("div1").innerHTML=html;

}

head >

点击

< div id = "div1" >