ejs模板引擎

ejs 的标签系统非常简单,它只有以下三种标签:
<% code %>:JavaScript 代码。
<%= code %>:显示替换过 HTML 特殊字符的内容。
<%- code %>:显示原始 HTML 内容。

注意: <%= code %> 和 <%- code %> 的区别,当变量 code 为普通字符串时,两者没有区别。当 code 比如为 <h1>hello</h1> 这种字符串时, <%= code %> 会原样输出 <h1>hello</h1> ,而 <%- code %> 则会显示 H1 大的 hello 字符串。

### EJS 模板引擎简介 EJS 是一种简单易用的 JavaScript 模板语言,允许开发者通过嵌入 JavaScript 的方式生成 HTML 页面。它支持模板预编译以及缓存功能,从而提高性能并减少重复工作[^1]。 以下是关于 EJS 的一些核心特性及其基本使用方法: #### 特性概述 - **动态内容注入**:可以轻松将变量插入到 HTML 中。 - **条件逻辑控制**:支持 `<% if %>`, `<% else %>` 等语句来实现分支逻辑。 - **循环结构**:可以通过 `<% for %>`, `<% forEach %>` 来迭代数组或对象集合。 - **模板重用**:提供 `include` 功能用于加载外部文件片段,便于模块化开发。 #### 安装与初始化 要安装 EJS 可以借助 npm 工具完成如下命令操作: ```bash npm install ejs --save ``` 接着,在 Node.js 应用程序中引入该库即可开始编写视图层代码: ```javascript const express = require('express'); const app = express(); app.set('view engine', 'ejs'); // 设置默认渲染引擎为 EJS ``` #### 基础语法实例 下面展示几个常见的场景应用例子说明如何利用这些特性的实际效果。 ##### 插值表达式 向页面传递数据并通过插值显示出来是最基础也是最常用的功能之一。 ```html <!-- index.ejs --> <h1><%= title %></h1> <p>Welcome to my website!</p> // server.js res.render('index', { title: 'Home Page' }); ``` 此处 `<%= ... %>` 表达式的含义是从服务器端传来的参数替换掉占位符位置的内容。 ##### 控制流标签 除了简单的文本替代外还可以加入更复杂的业务处理比如判断是否存在某些字段或者遍历列表项等等。 ```html <% if (user) { %> <h2>Hello <%= user.name %></h2> <% } else { %> <h2>Please log in</h2> <% } %> <ul> <% users.forEach(function(user){ %> <li><%= user.email %></li> <% }); %> </ul> ``` ##### 文件包含机制 当项目规模逐渐增大时为了避免冗余建议把公共部分提取成独立的小部件再组合起来形成完整的界面布局。 ```html <%- include('./partials/header') %> <main> <!-- Main content here --> </main> <%- include('./partials/footer') %> ``` 以上就是有关于 EJS 初步认识的一些介绍希望能够帮助理解其主要用途和优势所在!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值