Rumah > Artikel > hujung hadapan web > node.js中EJS 模板的使用教程
本篇文章主要介绍了EJS 模板快速入门学习,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Node 开源模板的选择很多,但推荐像我这样的老人去用 EJS,有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然,也就是说,你能够在 9613d184b92a8db8e14f8dcd66cf91f2 块中安排 JavaScript 代码,利用最传统的方式 d58676053e95ffc0017e4f93f2d422c7(另外 3213be0af68d73f4f8169ed0d72a7690{{= title }}473f0a7621bec819994bb5020d29372a 般非 a4558806285d5b7820bdaa0b90aa4d26标识,也可以自定义的。
var ejs = require('ejs'); ejs.open = '{{'; ejs.close = '}}';
格式化输出也可以哦。
ejs.filters.last = function(obj) { return obj[obj.length - 1]; };
调用
<p><%=: users | last %></p>
EJS 也支持浏览器环境。
<html> <head> <script src="../ejs.js"></script> <script id="users" type="text/template"> <% if (names.length) { %> <ul> <% names.forEach(function(name){ %> <li><%= name %></li> <% }) %> </ul> <% } %> </script> <script> onload = function(){ var users = document.getElementById('users').innerHTML; var names = ['loki', 'tobi', 'jane']; var html = ejs.render(users, { names: names }); document.body.innerHTML = html; } </script> </head> <body> </body> </html>
不知道 EJS 能否输出多层 JSON 对象呢?
对了,有网友爆料说,jQ 大神 John 若干年前写过 20 行的模板,汗颜,与 EJS 相似但短小精悍!
简单实用的js模板引擎
不足 50 行的 js 模板引擎,支持各种 js 语法:
<script id="test_list" type="text/html"> <%= for(var i = 0, l = p.list.length; i < l; i++){ var stu = p.list[i]; =%> <tr> <td<%=if(i==0){=%> class="first"<%=}=%>><%==stu.name=%></td> <td><%==stu.age=%></td> <td><%==(stu.address || '')=%></td> <tr> <%= } =%> </script>
“35958f859c8521065da73f73d0e69aae”内是 js 逻辑代码,“8b95f35e5e88078811040fade31b8cf7”内是直接输出的变量,类似 php 的 echo 的作用。“p”是调用下面 build 方法时的 k-v 对象参数,也可以在调用 “new JTemp” 时设置成别的参数名
调用:
$(function(){ var temp = new JTemp('test_list'), html = temp.build( {list:[ {name:'张三', age:13, address:'北京'}, {name:'李四', age:17, address:'天津'}, {name:'王五', age:13} ]}); $('table').html(html); });
上面的 temp 生成以后,可以多次调用 build 方法,生成 html。以下是模板引擎的代码:
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() 的形式。
附:connect + ejs 的一个例子。
var Step = require('../../libs/step'), _c = require('./utils/utils'), fs = require('fs'), ejs = require('ejs'), connect = require('connect'); exports.loadSite = function(request, response){ var siteRoot = 'C:/代码存档/sites/a.com.cn'; // _c.log(request.headers.host); var url = request.url; // 如果有 html 的则是动态网页,否则为静态内容 if(url == '/' || ~url.indexOf('/?') || url.indexOf('.asp') != -1 || url[url.length - 1] == '/'){ var tplPath; if(url == '/' || ~url.indexOf('/?') || url[url.length - 1] == '/'){ // 默认 index.html tplPath = siteRoot + request.url + 'default.asp'; }else{ tplPath = siteRoot + request.url.replace(/\?.*$/i,''); // 只需要文件名 } // 从文件加载模板 Step(function(){ _c.log('加载模板:' + tplPath); fs.exists(tplPath, this); }, function(path_exists){ if(path_exists === true)fs.readFile(tplPath, "utf8", this); else if(path_exists === false) response.end404(request.url); else response.end500('文件系统异常', ''); },function(err, tpl){ var bigfootUrl, cssUrl, projectState = 0; // 0 = localhot/ 1 = Test Server / 2 = Deployed switch(projectState){ case 0: bigfootUrl = "http://127.0.0.1/bigfoot/"; cssUrl = "http://127.0.0.1/lessService/?isdebug=true"; break; case 1: bigfootUrl = "http://112.124.13.85:8080/static/"; cssUrl = "/asset/style/"; break; case 2: bigfootUrl = "http://localhost:8080/bigfoot/"; break; } var sitePath = request.getLevelByUrl(require(siteRoot + '/public/struct')), first = sitePath[0]; var htmlResult = ejs.render(tpl, { filename : tplPath, bigfootUrl: bigfootUrl, cssUrl : cssUrl, projectState: projectState, query_request: request.toJSON(), request: request, config: require(siteRoot + '/public/config'), struct: require(siteRoot + '/public/struct'), sitePath : sitePath, firstLevel : first }); // _c.log(first.children.length) response.end200(htmlResult); }); }else{ connect.static(siteRoot)(request, response, function(){ // if not found... response.writeHead(404, {'Content-Type': 'text/html'}); response.end('404'); }); } }
【相关推荐】
1. 免费js在线视频教程
3. php.cn独孤九贱(3)-JavaScript视频教程
Atas ialah kandungan terperinci node.js中EJS 模板的使用教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!