未分类

www6766comnode.js中EJS 模板快速入门教程_node.js_脚本之家

19 3月 , 2020  

  • ‘>

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

自定义 CLOSE TOKEN

inculde 指令

var ejs = require , fs = require , path = __dirname + '/functions.ejs' , str = fs.readFileSync; var users = []; users.push({ name: 'Tobi', age: 2, species: 'ferret' }) users.push({ name: 'Loki', age: 2, species: 'ferret' }) users.push({ name: 'Jane', age: 6, species: 'ferret' }) var ret = ejs.render(str, { users: users, filename: path }); console.log; 
Users  

www6766com ,实际上 EJS 可以游离于 Express 独立使用的,例如:

npm install ejs

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

选项参数

如果打算使用

Node 开源模板的选择很多,但推荐像我这样的老人去用 EJS,有 Classic
ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然,也就是说,你能够在 块中安排
JavaScript 代码,利用最传统的方式 (另外

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

{{= title }}

般非 标识,也可以自定义的。

 var ejs = require; ejs.open = '{{'; ejs.close = '}}'; 

 ejs.filters.last = function { return obj[obj.length - 1]; }; 

EJS 也支持浏览器环境。

    <% if  { %> <ul> <% names.forEach{ %> <li><%= name %></li> <% }) %> </ul> <% } %>   onload = function(){ var users = document.getElementById.innerHTML; var names = ['loki', 'tobi', 'jane']; var html = ejs.render(users, { names: names }); document.body.innerHTML = html; }      

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

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

简单实用的js模板引擎

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

 <%= for(var i = 0, l = p.list.length; i < l; i++){ var stu = p.list[i]; =%> <tr> <td<%=if{=%> <%=}=%>><%==stu.name=%></td> <td><%==stu.age=%></td> <td><%===%></td> <tr> <%= } =%>  

“”内是 js 逻辑代码,“”内是直接输出的变量,类似 php 的 echo
的作用。“p”是调用下面 build 方法时的 k-v 对象参数,也可以在调用 “new
JTemp” 时设置成别的参数名

${ var temp = new JTemp, html = temp.build( {list:[ {name:'张三', age:13, address:'北京'}, {name:'李四', age:17, address:'天津'}, {name:'王五', age:13} ]}); $; }); 

上面的 temp 生成以后,可以多次调用 build 方法,生成
html。以下是模板引擎的代码:

var JTemp = function(){ function Temp{ p = p || {};//配置信息,大部分情况可以缺省 this.htmlId = htmlId; this.fun; this.oName = p.oName || 'p'; this.TEMP_S = p.tempS || ''; this.getFun(); } Temp.prototype = { getFun : function(){ var _ = this, str = $.html _.err; var str_ = 'var ' + _.oName + '=this,f='';', s = str.indexOf, e = -1, p, sl = _.TEMP_S.length, el = _.TEMP_E.length; for{ e = str.indexOf alert; str_ += 'f+='' + str.substring + '';'; p = _.trim(str.substring; if{//js语句 str_ += p; }else{//普通语句 str_ += 'f+=' + p.substring + ';'; } str = str.substring; s = str.indexOf; } str_ += 'f+='' + str + '';'; str_ = str_.replace;//处理换行 var fs = str_ + 'return f;'; this.fun = Function; }, build : function{ return this.fun.call; }, err : function; }, trim : function{ return s.trim?s.trim|; } }; return Temp; }(); 

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

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

附:connect + ejs 的一个例子。

var Step = require, _c = require, fs = require, ejs = require, connect = require; exports.loadSite = function{ var siteRoot = 'C:/代码存档/sites/a.com.cn'; // _c.log; var url = request.url; // 如果有 html 的则是动态网页,否则为静态内容 if(url == '/' || ~url.indexOf || url.indexOf != -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; // 只需要文件名 } // 从文件加载模板 Step{ _c.log; fs.exists; }, function{ iffs.readFile(tplPath, "utf8", this); else if(path_exists === false) response.end404; else response.end500; },function{ var bigfootUrl, cssUrl, projectState = 0; // 0 = localhot/ 1 = Test Server / 2 = Deployed switch{ 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; }else{ connect.static(request, response, function(){ // if not found... response.writeHead(404, {'Content-Type': 'text/html'}); response.end; } } 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

var ejs = require, str = require.readFileSync(__dirname + '/list.ejs', 'utf8'); var ret = ejs.render(str, { names: ['foo', 'bar', 'baz'] }); console.log; 

EJS 支持编译模板。经过模板编译后就没有 IO
操作,会非常快,而且可以公用本地变量。下面例子 user/show 忽略 ejs
扩展名:

ejs.compile; // => Function ejs.render; // => str 

见 ejs.render(),第一个参数是 模板 的字符串,模板如下。

is a year old .

一般插入公共模板,也就是引入文件,必须要设置 filename 选项才能启动
include 特性,不然 include 无从知晓所在目录。

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

names 成了本地变量。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图