脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → ejs快速入门教程

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

 更新时间：2017年05月08日 10:19:28   作者：sp42a  
本篇文章主要介绍了EJS 模板快速入门学习，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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');   
    }); 
  } 
}

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

您可能感兴趣的文章:

相关文章

  • node.js部署之启动后台运行forever的方法

    node.js部署之启动后台运行forever的方法

    今天小编就为大家分享一篇node.js部署之启动后台运行forever的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-05-05
  • yarn的使用与升级Node.js的方法详解

    yarn的使用与升级Node.js的方法详解

    这篇文章主要给大家介绍了关于yarn的使用与利用yarn升级Node.js的方法，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • nodejs通过钉钉群机器人推送消息的实现代码

    nodejs通过钉钉群机器人推送消息的实现代码

    最近在用 nodejs 写爬虫，之前的 nodejs 爬虫代码用 js 写的，感觉可维护性太差，也没有智能提示，于是把js改用ts(typescript)重写一下，提升代码质量。接下来通过本文给大家分享nodejs通过钉钉群机器人推送消息，需要的朋友参考下吧
    2019-05-05
  • 如何在Nestjs和Vue3中使用socket.io示例详解

    如何在Nestjs和Vue3中使用socket.io示例详解

    这篇文章主要为大家介绍了如何在Nestjs和Vue3中使用socket.io示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • node.js中的fs.mkdir方法使用说明

    node.js中的fs.mkdir方法使用说明

    这篇文章主要介绍了node.js中的fs.mkdir方法使用说明,本文介绍了fs.mkdir方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • Express中全局中间件与局部中间件的使用

    Express中全局中间件与局部中间件的使用

    本文介绍了Express框架中的全局中间件与局部中间件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-12-12
  • Node.js实现兼容IE789的文件上传进度条

    Node.js实现兼容IE789的文件上传进度条

    这篇文章给大家介绍了如何实现兼容IE789的文件上传进度条，如果你的工作用过上传图片或上传大文件啥的，一般在IE低版本浏览器里，会切换到用flash解决,可是有些人肯定不会为了老旧IE的进度条而去学flash，那么下面来一起看看吧。
    2016-09-09
  • 如何在Nodejs中使用模块fs文件系统

    如何在Nodejs中使用模块fs文件系统

    这篇文章主要介绍了如何在Nodejs中使用模块fs文件系统，对nodejs感兴趣的同学，可以参考下
    2021-05-05
  • 详解如何让Express支持async/await

    详解如何让Express支持async/await

    本篇文章主要介绍了详解如何让Express支持async/await，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Node.js实现连接mysql数据库功能示例

    Node.js实现连接mysql数据库功能示例

    这篇文章主要介绍了Node.js实现连接mysql数据库功能,简单分析了nodejs连接数据库的操作步骤与相关实现技巧,需要的朋友可以参考下
    2017-09-09

最新评论