扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >node.js中EJS 模板快速入门教程
  • 915

0
分享到

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

入门教程模板快速 2022-06-04 17:06:27 915人浏览 安东尼
摘要

node 开源模板的选择很多，但推荐像我这样的老人去用 Ejs，有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然，也就是说，你能够在 <%...%> 块中安排 j

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

相关选项如下：

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

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

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

--结束END--

本文标题: node.js中EJS 模板快速入门教程

本文链接: https://lsjlt.com/news/12639.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • node.js中EJS 模板快速入门教程
    Node 开源模板的选择很多，但推荐像我这样的老人去用 EJS，有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然，也就是说，你能够在 <%...%> 块中安排 J...
    99+
    2022-06-04
    入门教程 模板 快速
  • Node.js的Web模板引擎ejs的入门使用教程
    Node 开源模板的选择很多，但推荐像我这样的老人去用 EJS，有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然，也就是说，你能够在 <%...%> 块中安排 J...
    99+
    2022-06-04
    入门 模板 引擎
  • Unity3D快速入门教程
    Unity3D游戏引擎介绍 Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏...
    99+
    2024-04-02
  • Springboot快速入门教程
    入门Springboot 项目创建在IDEA中创建即可。 注意点： 1、所有文件都需要放在 ： Application文件的同级或下级目录中 2、application.proper...
    99+
    2024-04-02
  • SparkSQL快速入门教程
    目录（一）概述（二）SparkSQL实战（三）非JSON格式的Dataset创建（四）通过JDBC创建DataFrame（五）总结（一）概述 SparkSQL可以理解为在原生的RDD...
    99+
    2024-04-02
  • sklearn 快速入门教程
    1. 获取数据 1.1 导入sklearn数据集 　　sklearn中包含了大量的优质的数据集，在你学习机器学习的过程中，你可以通过使用这些数据集实现出不同的模型，从而提高你的动手实践能力，同时这个过程也可以加深你对理论知识的理解和把握...
    99+
    2023-01-31
    入门教程 快速 sklearn
  • Python OpenCV快速入门教程
    目录OpenCV先决条件我们会在本文中涵盖7个主题读，写和显示图像imread()：imshow():imwrite():读取视频并与网络摄像头集成句法调整大小和裁剪图像句法裁剪图像...
    99+
    2024-04-02
  • ASP.NET Core快速入门教程
    目录第一课 基本概念第二课 控制器的介绍第三课 视图与表单第四课 数据验证第五课 路由规则第六课 应用发布与部署源码地址第一课 基本概念 基本概念Asp.Net Core Mvc是....
    99+
    2024-04-02
  • flyway的快速入门教程
    目录 一、简单介绍 二、为什么要使用flyway 三、flyway是如何工作的 四、如何使用flyway 1、先要初始化一个SpringBoot项目，引入依赖 2、在application.yml中添加相关配置 3、根据配置文件中填写的脚本...
    99+
    2023-09-27
    spring boot flyway database mysql
  • BlenderPython编程快速入门教程
    目录Blender Python 编程数据访问访问集合访问属性数据创建/删除自定义属性上下文 Context运算符 Operators (Tools)Operator Poll()将...
    99+
    2024-04-02
  • MyBatis入门学习教程-MyBatis快速入门
    目录Mybatis一、快速开始1、创建 Maven 项目3、配置 Maven 插件4、新建数据库，导入表格5、编写 Mybatis 配置文件6、编写实体类7、编写 mapper 接口...
    99+
    2024-04-02
  • node.js入门教程
    Node是个啥？ 　　写个东西还是尽量面面俱到吧，所以有关基本概念的东西我也从网上选择性的拿了些下来，有些地方针对自己的理解有所改动，对这些概念性的东西有过了解的可选择跳过这段。 　　1.Node 是一个服...
    99+
    2022-06-04
    入门教程 node js
  • NodeJS中的MongoDB快速入门详细教程
    MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。 MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据...
    99+
    2022-06-04
    入门 快速 教程
  • 一小时快速入门Python教程
    目录为什么使用PythonPython应用场合Hello world国际化支持便易用的计算器字符串,ASCII和UNICODE使用List条件和循环语句如何定义函数文件I/O异常处理...
    99+
    2024-04-02
  • Fluent Mybatis快速入门详细教程
    使用fluent mybatis可以不用写具体的xml文件，通过java api可以构造出比较复杂的业务sql语句，做到代码逻辑和sql逻辑的合一。 不再需要在Dao中组装查询或更新...
    99+
    2024-04-02
  • Vue + OpenLayers 快速入门学习教程
    Openlayers 是一个模块化、高性能并且功能丰富的WebGIS客户端的JavaScript包，用于显示地图及空间数据，并与之进行交互，具有灵活的扩展机制。 简单来说，使用 O...
    99+
    2024-04-02
  • XXL-Job快速入门+详细教程
    XXL-Job快速入门+详细教程 1 概念 XXL-JOB是一个轻量级分布式任务调度平台 详细说明：XXL-JOB是一个任务调度框架，通过引入XXL-JOB相关的依赖，按照相关格式撰写代码后，可在...
    99+
    2023-09-27
    java 开发语言 xxl-job 定时任务 分布式
  • python中的flask框架Jinja 模板入门教程
    目录1、快速体验2、Flask 最小 DEMO3、模板继承4、Super Blocks5、Macros6、自定义过滤器7、结论Flask 和 Django 附带了强大的 Jinja ...
    99+
    2024-04-02
  • Go语言快速入门图文教程
    目录推荐阅读：一、什么是 Go 语言？二、Go 语言特性三、Go 语言有多火 ?四、下载 Go 安装包五、安装 Go 语言环境Windows 安装 GoLinux 安装...
    99+
    2022-06-07
    GO go语言 教程
  • Android SQLite三小时快速入门教程
    SQLite是Android平台软件开发中会经常用到的数据库产品，作为一款轻型数据库，SQLite的设计目标是是嵌入式的，而且目前已经在很多嵌入式产品中使用了它，它占用资源非...
    99+
    2022-06-06
    SQLite 教程 Android
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作