EJS入门

潇湘雨plgwyaef 2016-08-26

展开全文

一、为什么用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模板方式

二、怎么用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文件，内容如下

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中添加以下模板，注意内部模板跟外部模板的区别

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');

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