1、EJS是一个简单高效的模板语言，通过数据和模板，可以生成HTML标记文本。可以说EJS是一个JavaScript库，EJS可以同时运行在客户端和服务器端，客户端安装直接引入文件即可，服务器端用npm包安装
2、EJS的特点：
- 快速编译和渲染
- 简单的模板标签
- 自定义标记分隔符
- 支持文本包含
- 支持浏览器端和服务器端
- 模板静态缓存
- 支持express视图系统
3、EJS成员函数：
- Render(str,data,[option]):直接渲染字符串并生成html
str：需要解析的字符串模板
data：数据
option：配置选项 - Compile(str,[option]):编译字符串得到模板函数
str：需要解析的字符串模板
option：配置选项
两个函数包括的配置选项如下：
4、EJS常用标签
- <% %>流程控制标签
- <%= %>输出标签（原文输出HTML标签）
- <%- %>输出标签（HTML会被浏览器解析）
- <%# %>注释标签
- % 对标记进行转义
- -%>去掉没用的空格
说明：ejs中的逻辑代码全部用JavaScript
5、接下来看一个例子就可以明白EJS的简单语法了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>EJS Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="ejs.min.js"></script>
<script >
var data={flag:false,
data1:["====1","====2","====3"],
data2:["====4","====5","====6"]
};
window.onload=function(){
var tem=document.getElementById("tem").innerHTML;
var html=ejs.render(tem,data);
document.getElementsByTagName("body")[0].innerHTML=html;
}
</script>
</head>
<body>
<script type="text/javascript" id="tem">
<ul>
<%if(flag){%>
<%for (var i=0;i<data1.length;i++){%>
<li><%=data1[i]%></li>
<%}%>
<%}else{%>
<%for(var i=0;i<data2.length;i++){%>
<li><%=data2[i]%></li>
<%}%>
<%}%>
</ul>
</script>
</body>
</html>
运行后结果如下：
4、过滤器（把结果进一步加工的函数）：
语法如下：
<%=: data.age | plus:5%>
注意:和|两个符号:
此外，还有文件包含的语法：
<%- include(path) %>
接下来用这个写一个服务器端的，文件目录如下：
app.js文件内容如下：
var http=require("http"); var express=require("express"); var app=express(); var tem={ message:"我是中间部分" } //创建服务器 http.createServer(app).listen(3000,function(){ console.log("Server is listening port 3000"); }); //挂载静态资源处理中间件 app.use(express.static(__dirname+"/public")); //设置模板视图的目录 app.set("views","./public/views"); //设置是否启用视图编译缓存，启用将加快服务器执行效率 app.set("view cache",true); //设置模板引擎的格式即运用何种模板引擎 app.set("view engine","ejs"); //设置路由 app.get("/ejs",function(req,res){ res.render("ejs1",{title:tem.message}); });
ejs1.ejs文件内容如下这里引用了头部和尾部：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>EJS</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="../css/main.css" rel="stylesheet"> </head> <body> <%- include("./header.ejs") %> <h1><%=title%></h1> <%- include("./footer.ejs") %> </body> </html>
头部和尾部都是一行代码如下：
<h1>我是头部</h1>
<h1>我是尾部</h1>启动服务器后，我们输入http://localhost:3000/ejs，显示内容如下：
这说明我们利用ejs模板做到了正确输出，这既可以大大增加代码的复用性，而且当data为数据库中的数据时，我们就可以做到实时更新网站数据了，这样一个简单动态网站就完成了，听起来是不是很简单，不过还有很长一段路要走滴，先睡了，下次再更。