node.js中EJS 模板快速入门教程


Posted in Javascript onMay 08, 2017

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

npm install ejs

JS 调用

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

ejs.compile(str, options); 
// => Function 
 
ejs.render(str, options); 
// => str

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

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

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

<% if (names.length) { %> 
 <ul> 
  <% names.forEach(function(name){ %> 
   <li foo='<%= name + "'" %>'><%= name %></li> 
  <% }) %> 
 </ul> 
<% } %>

names 成了本地变量。

选项参数

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

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

var ejs = require('../') 
 , fs = require('fs') 
 , path = __dirname + '/functions.ejs' 
 , str = fs.readFileSync(path, 'utf8'); 
 
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(ret);

相关选项如下:

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

inculde 指令

而且,如果要如

<ul>
 <% users.forEach(function(user){ %>
  <% include user/show %>
 <% }) %>
</ul>

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

模板:

<h1>Users</h1> 
 <% function user(user) { %> 
 <li><strong><%= user.name %></strong> is a <%= user.age %> year old <%= user.species %>.</li> 
<% } %> 
 
<ul> 
 <% users.map(user) %> 
</ul>

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

<ul> 
 <% users.forEach(function(user){ %> 
  <% include user/show %> 
 <% }) %> 
</ul>

自定义 CLOSE TOKEN

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

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>

“<%= xxx =%>”内是 js 逻辑代码,“<%== xxx =%>”内是直接输出的变量,类似 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');   
    }); 
  } 
}

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

Javascript 相关文章推荐
javascript 验证日期的函数
Mar 18 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
详解用node-images 打造简易图片服务器
May 08 #Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 #Javascript
angular实现IM聊天图片发送实例
May 08 #Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 #Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 #Javascript
详解JavaScript中return的用法
May 08 #Javascript
如何使用angularJs
May 08 #Javascript
You might like
使用PHP的日期与时间函数技巧
2008/04/24 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
php异常处理捕获错误整理
2019/09/23 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
php post换行的方法
2020/02/03 PHP
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
PHP实现发送和接收JSON请求
2018/06/07 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
计算机软件个人的自荐信范文
2013/12/01 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
岗位说明书标准范本
2014/07/30 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android