新手刚入Nodejs，关于jade、ejs模版区分求指点

新手刚入Nodejs，关于jade、ejs模版区分求指点

刚接触Nodejs，开发指南看了一遍，因为对javascript有一定的基础，所以还是看明白了什么是Nodejs的基本概念，但因为我一直是后台开发，前端为辅的。对于jade模版可谓是火星文，有点逆天级别。ejs还好偏向于MVC能明白，但是jade看了语法后以为自己看明白了，动手已操作各种莫名其妙的问题，所以在这里想请问下jade模版编写要点，以及如何去理解。

2 回复

新手刚入Nodejs，关于jade、ejs模版区分求指点

前言

如果你之前主要做的是后台开发，对前端技术可能不是特别熟悉。在接触Node.js时，模板引擎是一个重要的工具，用于生成动态HTML页面。Jade（现更名为Pug）和EJS是两种常用的模板引擎。本文将帮助你区分这两种模板引擎，并提供一些使用示例。

Jade（Pug）

Jade（现更名为Pug）是一种简洁且语义化的模板引擎，它允许你以更简洁的方式编写HTML。Jade的主要特点是其缩进敏感性，类似于Python的语法结构。

优点：

  • 语法简洁，易于阅读。
  • 避免了重复的标签闭合。

缺点：

  • 学习曲线较陡峭，尤其是对于不熟悉缩进敏感语言的人来说。
  • 对于一些复杂的布局，可能不如其他模板引擎直观。

示例代码：

doctype html
html
  head
    title My Page
  body
    h1 Welcome to my page
    p This is a paragraph.
    ul
      li Item 1
      li Item 2

上述代码会被编译成：

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Welcome to my page</h1>
  <p>This is a paragraph.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</body>
</html>

EJS

EJS（Embedded JavaScript）则更接近传统的HTML模板，它允许你在HTML中嵌入JavaScript代码。这使得EJS更容易上手，特别是对于已经有HTML和JavaScript经验的开发者。

优点：

  • 更直观，更接近传统HTML。
  • 可以直接在HTML中嵌入JavaScript代码。

缺点：

  • 与Jade相比，代码量可能会稍多一些。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1>Welcome to <%= title %></h1>
  <p>This is a paragraph.</p>
  <% for (var i = 0; i < items.length; i++) { %>
    <ul>
      <li><%= items[i] %></li>
    </ul>
  <% } %>
</body>
</html>

在这个例子中，<%= title %> 和 <% ... %> 分别用于输出变量和执行JavaScript代码。

总结

选择哪种模板引擎取决于你的项目需求和个人偏好。如果你喜欢简洁的语法并且愿意投入时间学习新的概念，那么Jade（Pug）可能是更好的选择。如果你希望快速上手并保持HTML的直观性，那么EJS可能更适合你。希望这些示例代码能够帮助你更好地理解和使用这两种模板引擎。


Jade（现在称为Pug）和EJS都是Node.js中常用的模板引擎，它们各有特点。理解这两种模板引擎的关键在于掌握其语法和使用场景。

Jade/Pug

Jade是Pug的前身，它使用了一种简洁的语法来编写HTML模板。以下是Jade的一些基本要点：

  1. 缩进：Jade中，元素的嵌套是通过缩进来表示的。
  2. 属性：属性可以写在标签后面，并用括号包裹。
  3. 变量：可以通过#{variable}插入变量。
  4. 代码块：可以通过-或!=插入JavaScript代码或不转义HTML。

示例代码

doctype html
html
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
        bar()
      }
  body
    h1.title Jade - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get onto it!
      p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.

EJS

EJS是一种更简单的模板引擎，它允许你在HTML中直接嵌入JavaScript代码。以下是EJS的一些基本要点：

  1. 嵌入JavaScript：使用<% %>标签来嵌入JavaScript代码。
  2. 输出内容：使用<%= %>标签来输出内容。
  3. 注释：使用<%- %>标签来输出不转义的内容。

示例代码

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <% if (youAreUsingPug) { %>
    <p>You are amazing</p>
  <% } else { %>
    <p>Get onto it!</p>
  <% } %>
  <p><%- "Jade is a terse and simple\n" +
        "templating language with a\n" +
        "strong focus on performance\n" +
        "and powerful features." %></p>
</body>
</html>

总结

  • Jade/Pug 更适合喜欢简洁语法的人，适合需要高度结构化的HTML模板。
  • EJS 则更适合那些习惯在HTML中直接写JavaScript代码的人，更直观且灵活。

希望这些示例代码能帮助你更好地理解和使用这两种模板引擎。

回到顶部