var JTemp = function(){ function Temp(htmlId, p){ p = p || {};//配置信息，大部分情况可以缺省 this.htmlId = htmlId; this.fun; this.oName = p.oName || 'p'; this.TEMP_S = p.tempS || '<%='; this.TEMP_E = p.tempE || '=%>'; this.getFun(); } Temp.prototype = { getFun : function(){ var _ = this, str = $('#' + _.htmlId).html(); if(!str) _.err('error: no temp!!'); var str_ = 'var ' + _.oName + '=this,f=\'\';', s = str.indexOf(_.TEMP_S), e = -1, p, sl = _.TEMP_S.length, el = _.TEMP_E.length; for(;s >= 0;){ e = str.indexOf(_.TEMP_E); if(e < s) alert(':( ERROR!!'); str_ += 'f+=\'' + str.substring(0, s) + '\';'; p = _.trim(str.substring(s+sl, e)); if(p.indexOf('=') !== 0){//js语句 str_ += p; }else{//普通语句 str_ += 'f+=' + p.substring(1) + ';'; } str = str.substring(e + el); s = str.indexOf(_.TEMP_S); } str_ += 'f+=\'' + str + '\';'; str_ = str_.replace(/\n/g, '');//处理换行 var fs = str_ + 'return f;'; this.fun = Function(fs); }, build : function(p){ return this.fun.call(p); }, err : function(s){ alert(s); }, trim : function(s){ return s.trim?s.trim():s.replace(/(^\s*)|(\s*$)/g,""); } }; return Temp; }();
核心是将模板代码转变成了一个拼接字符串的 function，每次拿数据 call 这个 function。
因为主要是给手机（webkit）用的，所以没有考虑字符串拼接的效率问题，如果需要给 IE 使用，最好将字符串拼接方法改为 Array.push() 的形式。
ejs模板布局 layout
1. 如果不愿意使用默认的layout.ejs，可自行指定。例如：
res.render("index",{"title":"test","layout":"main"}); // 或 res.render("index",{"title":"test","layout":"main.ejs"});
2. 如果不愿意使用layout，则可以设置layout为false，例如:
res.render("index",{"layout":false});
3. 如果不想每个请求都单独设置一次。可以使用全局设置：
app.set("view options",{ "layout":false });
4. ejs 里，默认的闭合标记是 <% .. %>，我们也可以定义自己的标签。例如：
app.set("view options",{ "open":"{{", "close":"}}" });
5. 局部布局
在web应用中，经常会需要重复显示某个内容，例如：用户评论功能，需要重复显示出每一条用户的评论，这个时候，我们可以通过循环来实现。但是也可以使用【局部模版】( partial)来实现。例如：
首先我们建一个局部的模版 ./views/comment.ejs：
<div> <div><%=comment.user%></div> <div><%=comment.content%></div> </div>
注意：这里是 comment.xxxx
然后在./views/index.ejs中，通过partial调用comment
this is <%=title%>! <br/> <%- partial("comment", comments)%>
注意：这里是 partial("comment.ejs", comments); <-- 单词要用复数。
最后是在router中，调用index.ejs。
app.get("https://www.jb51.net/",function(req,res){ res.render("index",{"title":"test","layout":false,"comments":[ {"user":"gainover","content":"test1"}, {"user":"zongzi","content":"test2"}, {"user":"maomao","content":"test3"} ]}); });
注意：代码里的 comments 和 index.ejs的 comments变量名称一致，而partial所调用的comment.ejs中，则采用 comment 的单数形式。
在列表显示时，我们通常会遇到的场景是，对第一个元素或者最后一个元素加以特殊显示。在partial中，我们可以通过express内置的变量来判断当前对象是否是第一个元素或者最后一个元素，例如:
<div> <div><%=comment.user%></div> : <div><%=comment.content%></div> </div>
这样第一条评论的 class 里就会多一个firstitem。
类似的内置变量还有：
（1）firstInCollection 如果是数组的第一个元素，则为true
（2）indexInCollection 当前元素在数组里的索引
（3）lastInCollection 如果是数组的最后一个元素，则为true
（4）collectionLength 数组的长度
最后是partial调用模版时的路径查找问题：
（1）partial("edit") 会查找同目录下的edit.ejs文件。
（2）partial("../message") 会查找上一级目录的message.ejs文件。
（3）partial("users") 会查找 users.ejs文件，如果不存在users.ejs, 则会查找 /users/index.ejs文件。
（4）<%= users %> 会对内容进行转义，想不转义，可以用 <%- users %>
您可能感兴趣的文章: