程序博客网 > 离散傅里叶矩阵

EJS 模板快速入门

来源：互联网 发布：离散傅里叶矩阵 编辑：程序博客网 时间：2024/05/01 09:26

Node 开源模板的选择很多，但推荐像我这样的老人去用 EJS，有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然，也就是说，你能够在 <%...%> 块中安排 JavaScript 代码，利用最传统的方式 <%=输出变量%>（另外 <%-输出变量是不会对 & 等符号进行转义的）。安装 EJS 命令如下：

npm install ejs

JS 调用

JS 调用的方法主要有两个：

[javascript] view plaincopy
  1. <code>ejs.compile(str, options);  
  2. // => Function  
  3.   
  4. ejs.render(str, options);  
  5. // => str</code>  

实际上 EJS 可以游离于 Express 独立使用的，例如：

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. var ejs = require('')， str = require('fs').readFileSync(__dirname + '/list.ejs', 'utf8');  
  2.   
  3. var ret = ejs.render(str, {  
  4.   names: ['foo', 'bar', 'baz']  
  5. });  
  6.   
  7. console.log(ret);  
见 ejs.render()，第一个参数是 模板 的字符串，模板如下。
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <% if (names.length) { %>  
  2.   <ul>  
  3.     <% names.forEach(function(name){ %>  
  4.       <li foo='<%= name + "'" %>'><%= name %></li>  
  5.     <% }) %>  
  6.   </ul>  
  7. <% } %>  

names 成了本地变量。

选项参数

第二个参数是数据，一般是一个对象。而这个对象又可以视作为选项，也就是说数据和选择都在同一个对象身上。

如果不想每次都都磁盘，可需要缓存模板，设定 options.filename  即可。例如：

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. var ejs = require('../')  
  2.   , fs = require('fs')  
  3.   , path = __dirname + '/functions.ejs'  
  4.   , str = fs.readFileSync(path, 'utf8');  
  5.   
  6. var users = [];  
  7.   
  8. users.push({ name: 'Tobi', age: 2, species: 'ferret' })  
  9. users.push({ name: 'Loki', age: 2, species: 'ferret' })  
  10. users.push({ name: 'Jane', age: 6, species: 'ferret' })  
  11.   
  12. var ret = ejs.render(str, {  
  13.   users: users,  
  14.   filename: path  
  15. });  
  16.   
  17. console.log(ret);  

相关选项如下：

  • cache Compiled functions are cached, requires filename
  • filename 缓存的键名称
  • scope 函数执行的作用域
  • debug Output generated function body
  • compileDebug When false no debug instrumentation is compiled
  • client Returns standalone compiled function

inculde 指令

而且，如果要如

<ul>  <% users.forEach(function(user){ %>    <% include user/show %>  <% }) %></ul>
般插入公共模板，也就是引入文件，必须要设置 filename 选项才能启动 include 特性，不然 include 无从知晓所在目录。

模板：

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <h1>Users</h1>  
  2.   
  3. <% function user(user) { %>  
  4.   <li><strong><%= user.name %></strong> is a <%= user.age %> year old <%= user.species %>.</li>  
  5. <% } %>  
  6.   
  7. <ul>  
  8.   <% users.map(user) %>  
  9. </ul>  
EJS 支持编译模板。经过模板编译后就没有 IO 操作，会非常快，而且可以公用本地变量。下面例子 user/show 忽略 ejs 扩展名：
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <ul>  
  2.   <% users.forEach(function(user){ %>  
  3.     <% include user/show %>  
  4.   <% }) %>  
  5. </ul>  

自定义 CLOSE TOKEN

如果打算使用 <h1>{{= title }}</h1> 般非 <%%>标识，也可以自定义的。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. var ejs = require('ejs');  
  2. ejs.open = '{{';  
  3. ejs.close = '}}';  
格式化输出也可以哦。
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. ejs.filters.last = function(obj) {  
  2.   return obj[obj.length - 1];  
  3. };  
调用
[html] view plaincopy
  1. <p><%=: users | last %></p>  
EJS 也支持浏览器环境。
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <html>  
  2.   <head>  
  3.     <script src="../ejs.js"></script>  
  4.     <script id="users" type="text/template">  
  5.       <% if (names.length) { %>  
  6.         <ul>  
  7.           <% names.forEach(function(name){ %>  
  8.             <li><%= name %></li>  
  9.           <% }) %>  
  10.         </ul>  
  11.       <% } %>  
  12.     </script>  
  13.     <script>  
  14.       onload = function(){  
  15.         var users = document.getElementById('users').innerHTML;  
  16.         var names = ['loki', 'tobi', 'jane'];  
  17.         var html = ejs.render(users, { names: names });  
  18.         document.body.innerHTML = html;  
  19.       }  
  20.     </script>  
  21.   </head>  
  22.   <body>  
  23.   </body>  
  24. </html>  

不知道 EJS 能否输出多层 JSON 对象呢？

对了，有网友爆料说，jQ 大神 John 若干年前写过 20 行的模板，汗颜，与 EJS 相似但短小精悍！

这里顺便贴一个高手写的（http://www.jiangkunlun.com/2012/05/js_%E6%A8%A1%E6%9D%BF/）：

简单实用的js模板引擎

不足 50 行的 js 模板引擎，支持各种 js 语法：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <script id="test_list" type="text/html">  
  2. <%=  
  3.     for(var i = 0, l = p.list.length; i < l; i++){  
  4.         var stu = p.list[i];  
  5. =%>  
  6.     <tr>  
  7.         <td<%=if(i==0){=%> class="first"<%=}=%>><%==stu.name=%></td>  
  8.         <td><%==stu.age=%></td>  
  9.         <td><%==(stu.address || '')=%></td>  
  10.     <tr>  
  11.    
  12. <%=  
  13.     }  
  14. =%>  
  15. </script>  
“<%= xxx =%>”内是 js 逻辑代码，“<%== xxx =%>”内是直接输出的变量，类似 php 的 echo 的作用。“p”是调用下面 build 方法时的 k-v 对象参数，也可以在调用 “new JTemp” 时设置成别的参数名

调用：
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. $(function(){  
  2.     var temp = new JTemp('test_list'),  
  3.         html = temp.build(  
  4.             {list:[  
  5.                    {name:'张三', age:13, address:'北京'},  
  6.                 {name:'李四', age:17, address:'天津'},  
  7.                 {name:'王五', age:13}  
  8.             ]});  
  9.     $('table').html(html);  
  10. });  
上面的 temp 生成以后，可以多次调用 build 方法，生成 html。以下是模板引擎的代码：
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. var JTemp = function(){  
  2.     function Temp(htmlId, p){  
  3.         p = p || {};//配置信息，大部分情况可以缺省  
  4.         this.htmlId = htmlId;  
  5.         this.fun;  
  6.         this.oName = p.oName || 'p';  
  7.         this.TEMP_S = p.tempS || '<%=';  
  8.         this.TEMP_E = p.tempE || '=%>';  
  9.         this.getFun();  
  10.     }  
  11.     Temp.prototype = {  
  12.         getFun : function(){  
  13.             var _ = this,  
  14.                 str = $('#' + _.htmlId).html();  
  15.             if(!str) _.err('error: no temp!!');  
  16.             var str_ = 'var ' + _.oName + '=this,f=\'\';',  
  17.                 s = str.indexOf(_.TEMP_S),  
  18.                 e = -1,  
  19.                 p,  
  20.                 sl = _.TEMP_S.length,  
  21.                 el = _.TEMP_E.length;  
  22.             for(;s >= 0;){  
  23.                 e = str.indexOf(_.TEMP_E);  
  24.                 if(e < s) alert(':( ERROR!!');  
  25.                 str_ += 'f+=\'' + str.substring(0, s) + '\';';  
  26.                 p = _.trim(str.substring(s+sl, e));  
  27.                 if(p.indexOf('=') !== 0){//js语句  
  28.                     str_ += p;  
  29.                 }else{//普通语句  
  30.                     str_ += 'f+=' + p.substring(1) + ';';  
  31.                 }  
  32.                 str = str.substring(e + el);  
  33.                 s = str.indexOf(_.TEMP_S);  
  34.             }  
  35.             str_ += 'f+=\'' + str + '\';';  
  36.             str_ = str_.replace(/\n/g, '');//处理换行  
  37.             var fs = str_ + 'return f;';  
  38.             this.fun = Function(fs);  
  39.         },  
  40.         build : function(p){  
  41.             return this.fun.call(p);  
  42.         },  
  43.         err : function(s){  
  44.             alert(s);  
  45.         },  
  46.         trim : function(s){  
  47.             return s.trim?s.trim():s.replace(/(^\s*)|(\s*$)/g,"");  
  48.         }  
  49.     };  
  50.     return Temp;  
  51. }();  

核心是将模板代码转变成了一个拼接字符串的 function，每次拿数据 call 这个 function。

因为主要是给手机（webkit）用的，所以没有考虑字符串拼接的效率问题，如果需要给 IE 使用，最好将字符串拼接方法改为 Array.push() 的形式。

网友作品：cocoTemplate


附：connect + ejs 的一个例子。

[javascript] view plaincopy
  1. var Step = require('../../libs/step'),  
  2.     _c  = require('./utils/utils'),  
  3.     fs  = require('fs'),  
  4.     ejs = require('ejs'),  
  5.     connect = require('connect');  
  6.   
  7. exports.loadSite = function(request, response){  
  8.     var siteRoot = 'C:/代码存档/sites/a.com.cn';  
  9.     // _c.log(request.headers.host);  
  10.       
  11.     var url = request.url;  
  12.     // 如果有 html 的则是动态网页，否则为静态内容  
  13.     if(url == '/' || ~url.indexOf('/?') || url.indexOf('.asp') != -1 || url[url.length - 1] == '/'){  
  14.         var tplPath;  
  15.           
  16.         if(url == '/' || ~url.indexOf('/?') || url[url.length - 1] == '/'){  
  17.             // 默认 index.html  
  18.             tplPath = siteRoot + request.url + 'default.asp';  
  19.         }else{  
  20.             tplPath = siteRoot + request.url.replace(/\?.*$/i,''); // 只需要文件名  
  21.         }  
  22.   
  23.         // 从文件加载模板  
  24.         Step(function(){  
  25.             _c.log('加载模板：' + tplPath);  
  26.             fs.exists(tplPath, this);  
  27.         }, function(path_exists){  
  28.             if(path_exists === true)fs.readFile(tplPath, "utf8", this);  
  29.             else if(path_exists === false) response.end404(request.url);  
  30.             else response.end500('文件系统异常', '');  
  31.         },function(err, tpl){  
  32.   
  33.             var bigfootUrl, cssUrl, projectState = 0; // 0 = localhot/ 1 = Test Server / 2 = Deployed  
  34.             switch(projectState){  
  35.                 case 0:  
  36.                      bigfootUrl  = "http://127.0.0.1/bigfoot/";  
  37.                      cssUrl      = "http://127.0.0.1/lessService/?isdebug=true";  
  38.                 break;    
  39.                 case 1:  
  40.                      bigfootUrl  = "http://112.124.13.85:8080/static/";  
  41.                      cssUrl      = "/asset/style/";  
  42.                 break;    
  43.                 case 2:  
  44.                      bigfootUrl  = "http://localhost:8080/bigfoot/";  
  45.                 break;  
  46.             }  
  47.   
  48.             var sitePath = request.getLevelByUrl(require(siteRoot + '/public/struct')),  
  49.                 first = sitePath[0];  
  50.             var htmlResult = ejs.render(tpl, {  
  51.                 filename : tplPath,  
  52.                 bigfootUrl: bigfootUrl,  
  53.                 cssUrl : cssUrl,  
  54.                 projectState: projectState,  
  55.                 query_request: request.toJSON(),  
  56.                 request: request,  
  57.                 config: require(siteRoot + '/public/config'),  
  58.                 struct: require(siteRoot + '/public/struct'),  
  59.                 sitePath : sitePath,  
  60.                 firstLevel : first  
  61.             });  
  62.             // _c.log(first.children.length)  
  63.             response.end200(htmlResult);  
  64.         });  
  65.           
  66.     }else{  
  67.         connect.static(siteRoot)(request, response, function(){  
  68.             // if not found...  
  69.             response.writeHead(404, {'Content-Type': 'text/html'});  
  70.             response.end('404');      
  71.         });  
  72.     }  
  73. }  
0 0
离散傅里叶矩阵 离散傅里叶矩阵
原创粉丝点击
热门IT博客
软件领cf点软件领cf点
汽车产销数据平台汽车产销数据平台
做文案的软件
交易开拓者编程难学吗?
年轻人工作压力大数据
mysql添加外键
淘宝买家信誉在哪里看
听书软件排行
致远软件招聘
算法复杂度
火淘宝的软件怎么样
阿里云备案多长时间
如何看spring源码
考勤机数据导不出来
网络 技术支持 面试题
安藤忠雄中山邸数据
软件测试工程师职责
淘宝15天退换货图片
mac totalfinder
氧气听书软件下载
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 海滩比基尼 海滩 19海滩 海滩救护队 西冲海滩 深圳海滩 黄金海滩 黑沙海滩 珠海海滩 阳光海滩 海滩简笔画 海滩图片 芽庄海滩 珠海金海滩 红海滩在哪 金海滩 海滩厕所 西秀海滩 血溅海滩 金山海滩 红海滩旅游 石螺口海滩 金巴兰海滩 海滩怎么画 比基尼海滩 海滩英文 海滩英语 什么的海滩 海滩的拼音 海滩照片 拉扬海滩 维桑海滩 开放海滩 海滩游玩 海滩混战 红海滩风景区 盘锦红海滩景区 国际章海滩裸交 黄金海滩旅游 盘锦红海滩景区旅游 玛雅海滩水公园

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里