EJS入门

最新推荐文章于 2023-09-11 08:45:54 发布

Sky786905664

最新推荐文章于 2023-09-11 08:45:54 发布

阅读量958

点赞数

分类专栏： js 前端

前端同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

30 篇文章 0 订阅

订阅专栏

一、为什么用EJS

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

js拼接字符串的方式：

[javascript]view plain copy
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模板方式

[html]view plain copy
<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

[html]view plain copy
<!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">
    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; 
</script>  

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

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

[html]view plain copy
<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>  

2.第二种调用模板的方法，内部模板，通过element获取，如果这个模板只在此页使用

在index.html中添加以下模板，注意内部模板跟外部模板的区别

[html]view plain copy
<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>  

[javascript]view plain copy
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方法的使用如下

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

或

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

也可以直接通过url获取data

[javascript]view plain copy
var options={  
        element:"template"  
    }  
    new EJS(options).update("test","data.json");  

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

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

Sky786905664

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
EJS入门

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

扫一扫