您的位置：首页 > Web前端 > JavaScript

EJS入门

2016-07-18 20:19 543 查看

一、为什么用EJS

在web项目中渲染页面我们很多时候我们会用jstl或者直接采用拼接字符串的方式，前者不够灵活，在处理一些复杂问题的时候会显得难以下手，后者足够灵活，但是就像ejs官网说的，字符串拼接方式，会让整个代码很丑陋，还破坏原有的html结构，大量的html拼接会让代码难以阅读，解决问题的方式就是使用模板，ejs算是js模板中最简单的了，对于java程序员来说，学习ejs完全不需要时间，因为他实在是很简单，这也是个人比较喜欢的原因。下面对比拼接字符串方式和ejs模板方式

js拼接字符串的方式：

var html = "<h1>"+data.title+"</h1>"
html += "<ul>"
for(var i=0; i<data.supplies.length; i++) {
html += "<li><a href='supplies/"+data.supplies[i]+"'>"
html += data.supplies[i]+"</a></li>"
}
html += "</ul>"

ejs模板方式

<h1><%= title %></h1>
<ul>
<% for(var i=0; i<supplies.length; i++) { %>
<li>
<a href='supplies/<%= supplies[i] %>'>
<%= supplies[i] %>
</a>
</li>
<% } %>
</ul>

二、怎么用EJS

1.将一个模板定义为为.ejs 结尾的文件，模板内容就像上面那样，使用<%= %> 赋值，在<%%>中间是js代码，就像你平时写js一样

2.通过function EJS(options)创建一个EJS实例，其中options有如下属性

url:模板路径，通过ajax加载模板

text：模板String串，直接使用这个串作为模板

element{string or element}：当为String时表示dom元素的id，当为element时即document.getElementById('id')本身

name{string}：用来缓存模板，默认是DOM ID或者URL

cache:是否缓存，默认缓存

url、text、element分别为获取模板的三种途径，即ajax请求外部模板，js的String串，DOM的innerHTML

3.render(data)

new EJS({url: '/template.ejs'}).render(data)

4.update(element,url_or_data)

url_or_data是null时，返回一个function(obj)函数，其中obj是用来render模板的数据，

url_or_data是url时，通过ajax获取数据

url_or_data是data时，渲染数据

f = new EJS({url: '/mytemplate.ejs'}).update('my_element')

new EJS({url: '/mytemplate.ejs'}).update('my_element', '/data.json')

new EJS({url: '/mytemplate.ejs'}).update('my_element', {supplies:['mop']})

三、demo

新建一个index.html，内容如下：其中test.js是测试js

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
<div  id="test">

</div>

</body>
</html>
<script type="text/javascript" src="ejs.js"></script>
<script type="text/javascript" src="test.js"></script>

1.第一种调用模板的方法，通过url请求模板，适用于多个页面共用一个模板

在同级目录下新建一个template.ejs文件，内容如下

<table>
<thead>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<%for(var i=0;i<list.length;i++){var u=list[i];%>
<tr>
<td><%=u.name%></td>
<td><%=u.age%></td>
</tr>
<%}%>
</tbody>

</table>

var data={"list":[{"name":"张三","age":20},{"name":"李四","age":21}]};
var options={
url:'template.ejs'
}
var html=new EJS(options).render(data);
document.getElementById("test").innerHTML=html;

2.第二种调用模板的方法，内部模板，通过element获取，如果这个模板只在此页使用
在index.html中添加以下模板，注意内部模板跟外部模板的区别

<script type="text/html" id="template">
<table>
<thead>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
[%for(var i=0;i<list.length;i++){var u=list[i];%]
<tr>
<td>[%=u.name%]</td>
<td>[%=u.age%]</td>
</tr>
[%}%]
</tbody>
</table>
</script>

var data={"list":[{"name":"张三","age":20},{"name":"李四","age":21}]};
var options={
element:"template"
}
var html=new EJS(options).render(data);document.getElementById("test").innerHTML=html;

这里的element可以是值为模板id的string,也可以是element即为document.getElementById("template")

3.第三种String串方式在js中声明的模板，不再说了

4.上面只说了render方法，update方法的使用如下

var data={"list":[{"name":"张三","age":20},{"name":"李四","age":21}]};
var options={
element:"template"
}
new EJS(options).update("test",data);

或

var data={"list":[{"name":"张三","age":20},{"name":"李四","age":21}]};
var options={
element:"template"
}
var  template=new EJS(options).update("test");
template(data)

也可以直接通过url获取data

var options={
element:"template"
}
new EJS(options).update("test","data.json");

最终的结果都是一样的，如下

以上基本就是EJS的所有语法了，当然EJS还做了一些扩展

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航