Nodejs中为什么会有人喜欢把ejs标签写在javascript里面

Nodejs中为什么会有人喜欢把ejs标签写在javascript里面

今天浏览别人写的博客，主要是抱着学习的目的，发现有些js代码里面夹杂了ejs标签，什么逻辑判断、取值、传值什么的，个人感觉js代码里面不需要写这些东西，虽然很方便，但是没法单独用，不知道我说的对不对

4 回复

Node.js 中为什么会有人喜欢把 EJS 标签写在 JavaScript 里面

在 Node.js 开发中，EJS（Embedded JavaScript）是一种非常流行的模板引擎。它允许你在 HTML 文件中嵌入 JavaScript 代码，以便动态生成网页内容。很多人喜欢在 JavaScript 代码中嵌入 EJS 标签，主要有以下几个原因：

  1. 简化逻辑处理：EJS 允许你在模板文件中直接进行逻辑判断和数据处理，这样可以避免在后端逻辑中生成大量的 HTML 字符串。
  2. 提高可维护性：将数据渲染逻辑放在模板中，可以使代码更加清晰，减少后端逻辑代码的复杂度。

示例代码

假设我们有一个简单的博客系统，需要根据用户的登录状态来显示不同的导航栏内容。我们可以使用 EJS 来实现这一功能。

后端代码（Node.js + Express）
const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const user = { name: 'John Doe', isLoggedIn: true };
    res.render('index', { user });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});
模板文件（views/index.ejs）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
</head>
<body>
    <nav>
        <ul>
            <% if (user.isLoggedIn) { %>
                <li>Welcome, <%= user.name %></li>
                <li><a href="/logout">Logout</a></li>
            <% } else { %>
                <li><a href="/login">Login</a></li>
                <li><a href="/register">Register</a></li>
            <% } %>
        </ul>
    </nav>
    <h1>Home Page</h1>
</body>
</html>

在这个例子中，我们使用了 EJS 的 <% %> 标签来进行逻辑判断，并且使用了 <%= %> 标签来插入变量值。通过这种方式，我们可以很轻松地在前端模板中处理用户登录状态，而不需要在后端进行复杂的字符串拼接操作。

总结

尽管有些人可能会认为在 JavaScript 中嵌入 EJS 标签会使代码变得不够纯粹，但实际上这样做可以大大简化前后端的交互逻辑，使代码更易读、更易维护。因此，在实际开发中，这种做法被广泛采用。


因为那是模板，你懂不懂。

其实有一个不好的地方是，没法讲js代码封装成插件

在Node.js项目中，将EJS标签嵌入到JavaScript代码中是一种常见的做法，尤其是在渲染视图时。这种做法可以使前端与后端的数据传递更加灵活和便捷。以下是一些原因说明为什么人们会选择这样做：

  1. 数据绑定：EJS标签允许你在模板中直接插入动态数据，这使得前端页面可以根据后端返回的数据动态变化。
  2. 简化开发流程：在模板文件中使用EJS标签可以避免频繁地在前后端之间传输数据，减少了网络请求，使开发过程更流畅。

示例代码

假设我们有一个简单的Node.js应用，使用Express框架和EJS模板引擎。在这个例子中，我们将从数据库获取一些用户信息，并通过EJS模板渲染到页面上。

首先，安装必要的依赖：

npm install express ejs

接下来，创建一个基本的服务器文件server.js:

const express = require('express');
const app = express();
app.set('view engine', 'ejs'); // 设置模板引擎为EJS

// 模拟数据库中的用户数据
const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
];

app.get('/', (req, res) => {
    res.render('index', { users }); // 渲染index.ejs并传递用户数据
});

app.listen(3000, () => console.log('Server running on port 3000'));

然后，创建一个EJS模板文件views/index.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User List</title>
</head>
<body>
    <h1>User List</h1>
    <ul>
        <% users.forEach(user => { %>
            <li><%= user.name %></li>
        <% }) %>
    </ul>
</body>
</html>

解释

在这个例子中，我们在index.ejs文件中使用了EJS标签来循环遍历users数组，并将每个用户的名称显示在一个无序列表中。这种方式不仅简洁而且高效，因为所有的数据处理逻辑都在后端完成，前端只需负责展示数据。

希望这能帮助你理解为什么在Node.js项目中会看到EJS标签出现在JavaScript代码中。

回到顶部