NODEJS - EJS教程

EJS介绍
安装EJS
例子
补充说明
EJS介绍
EJS是一种简单的模板语言,可以使用原始的JavaScript生成HTML,类似JAVA中的FREEMARK。
特点:
Fast compilation and rendering : 快速编译渲染
Simple template tags:<% %> :标签简单
Includes: 可以进行引用
Both server JS and browser support:可以运行在服务端和客户端
Static caching of intermediate JavaScript: 静态缓存JAVASCRIPT
Static caching of templates:缓存模板
Complies with the Express view system: 可以使用Express view系统编译
安装EJS
Linux 下进入某个目录后执行以下命令
  1. $ npm install ejs  
在该目录下会出现node_modules/ejs目录
例子
1.简单例子,字符串为模板
view plain run code copy to clipboard print ?
  1.      
  2. var ejs = require("ejs");  
  3. var people = ['geddy''neil''alex'];  
  4. var html = ejs.render('<%= people.join(", "); %>', {people: people});  
  5. console.log(html);  
2.文件为模板
 模板文件ejs02.ejs:
view plain run code copy to clipboard print ?
  1.    
  2. >  
  3. <html>  
  4. <head>  
  5. <title><%=title%>title>  
  6. <meta charset="utf-8"/>  
  7. head>  
  8. <body>  
  9. name:<%= userInfo.name %><br/>  
  10. age:<%= userInfo.age %><br/>  
  11.   
  12. 解析html代码:<br/>  
  13. message:<%= userInfo.message %><br/>  
  14. <br/>  
  15. 不解析html代码:<br/>  
  16. message:<%- userInfo.message %><br/>  
  17. <%# i'm description %><br/>  
  18. <%  
  19.     if(userInfo.age > 5){  
  20.   
  21. %>  
  22.  5+  
  23. <%  
  24.     }else{  
  25. %>  
  26.     5-  
  27. <%  
  28.     }   
  29. %>  
  30.   
  31. body>  
  32. html>  
ejs02.js
view plain run code copy to clipboard print ?
  1.    
  2. var ejs = require("ejs");  
  3. var fs = require("fs");  
  4. //var people = ['geddy', 'neil', 'alex'];  
  5. //var html = ejs.render('<%= people.join(", "); %>', {people: people});  
  6.   
  7. var title="hello world";  
  8. var userInfo = {  
  9.     name : "devil13th",  
  10.     age : 5,  
  11.     school : "THD",  
  12.     message : "
    i'm message
    "
      
  13. }  
  14.   
  15. fs.readFile("ejs02.ejs","utf-8",function(err,data){  
  16.     console.log(data);  
  17.     console.log("========================");  
  18.     var text = ejs.render(data,{title:title,userInfo:userInfo});  
  19.     console.log(text);  
  20. })  
  21.   
  22.   
  23. console.log("finish");  
3.模仿Express
view plain run code copy to clipboard print ?
  1. var ejs = require("ejs");  
  2. var fs = require("fs");  
  3. var http = require("http");  
  4.   
  5. http.createServer(function(req,res){  
  6.       
  7.       
  8.     fs.readFile("ejs02.ejs","utf-8",function(err,data){  
  9.         res.writeHead(200,{'Content-Type':'text/html'});  
  10.   
  11.         var title="hello world";  
  12.         var userInfo = {  
  13.             name : "devil13th",  
  14.             age : 5,  
  15.             school : "THD",  
  16.             message : "i'm message
"  
  •         };  
  •         var html = ejs.render(data,{title:title,userInfo:userInfo});  
  •         res.end(html);  
  •     })  
  •   
  • }).listen(3000);  
  • console.log("server running ...");  
  • 补充说明
    <% :'Scriptlet' tag, for control-flow, no output --- js脚本
    <%= :Outputs the value into the template (HTML escaped) ---标签中的变量内容进行html代码的转义后输出
    <%- : Outputs the unescaped value into the template ---直接输出标签中的变量内容
    <%# :Comment tag, no execution, no output ----不执行,注释
    <%% : Outputs a literal '<%' ---用于输出<%
    %> :Plain ending tag -- 结束标签
    -%> : Trim-mode ('newline slurp') tag, trims following newline ---结束标签

    你可能感兴趣的:(JAVASCRIPT)