Nodejs express为什么默认生成的项目用jade做渲染？

Nodejs express为什么默认生成的项目用jade做渲染？

有一个疑问，express为什么默认生成的项目用jade做渲染？jade的优点在哪？如果单纯为了少写代码、快速编码，那直接在编码的时候zenCode不就好了？发散一下，css写成less，html写成jade，绕一个弯子写代码真的有必要？这中间的性能损耗真的已经可以忽略不计了么？

18 回复

Nodejs express为什么默认生成的项目用jade做渲染？

在Express.js早期版本中，默认使用Jade（后来更名为Pug）作为模板引擎。这是因为Jade具有简洁、优雅的语法，能够显著减少HTML模板的编写工作量。下面我们来详细探讨一下Jade的优点以及为何选择它作为默认模板引擎。

Jade的优点

  1. 简洁的语法： Jade的语法非常简洁，几乎不需要闭合标签。例如，下面是一个简单的Jade模板：

    doctype html
html
  head
    title= pageTitle
  body
    h1 Welcome to #{title}
    p Welcome to #{title}, the best site for cool stuff.

    上述代码会生成如下的HTML：

    <!DOCTYPE html>
<html>
  <head>
    <title>Welcome Page</title>
  </head>
  <body>
    <h1>Welcome to Welcome Page</h1>
    <p>Welcome to Welcome Page, the best site for cool stuff.</p>
  </body>
</html>

  2. 提高开发效率： 使用Jade可以极大地提高开发效率，因为你可以专注于业务逻辑，而不是繁琐的HTML标签。例如，使用ZenCoding（Emmet）虽然也能简化HTML编写，但Jade提供了一种更结构化的方式。

  3. 可维护性： 由于Jade的语法更加简洁，使得HTML模板更易于阅读和维护。这对于大型项目来说尤为重要。

  4. 性能： 尽管Jade需要解析模板字符串，但它通常被优化得非常好，性能损耗可以忽略不计。现代的JavaScript引擎和模板引擎都有很高的优化水平。

为什么不直接使用HTML？

确实，你可以选择使用其他模板引擎或直接使用HTML。例如，使用EJS（Embedded JavaScript）模板引擎也可以实现类似的效果：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1>Welcome to <%= title %></h1>
    <p>Welcome to <%= title %>, the best site for cool stuff.</p>
  </body>
</html>

或者直接使用Pug（原名Jade）：

doctype html
html
  head
    title= title
  body
    h1 Welcome to #{title}
    p Welcome to #{title}, the best site for cool stuff.

总结

尽管Jade（Pug）最初被选为默认模板引擎是因为其简洁性和开发效率，但最终选择哪个模板引擎取决于具体需求和偏好。如果你更喜欢清晰的HTML语法，可以选择EJS或其它模板引擎。但是，Jade（Pug）仍然因其简洁和高效而受到许多开发者的青睐。

希望这些信息能帮助你理解为什么Express.js早期会选择Jade作为默认模板引擎，并且了解一些替代方案。


express 的作者 也是jade 的作者。他喜欢。

https://github.com/visionmedia

jade真的很不错，模板页面很整洁

jade太慢了

他也是 ejs作者

express xxxx -e采用ejsenter code here

应该差不多，编译以后缓存了。编译以后都是js code

缓存了就没什么关系了吧~性能什么的~

不是html写成jade或者ejs，而是必须这样，express不能直接与html交互，需要模板生成html，另外express的作者希望用stylus写css，因为这个也是他写的

噗……其实我觉得stylus还是不错的……【TJ真能写……

而且各个模板哪个快点哪个慢点没什么关系，第一次编译以后就缓存了，完全不影响以后的调用

暂时选定ejs在用

真不明白这问题为什么老是被反反复复拿出来讨论， 爱用什么就用什么呗，你不喜欢Jade不代表别人不喜欢啊

讨论而已，否则来社区的目的是什么？

“别人爱讨论什么就讨论什么呗，你不喜欢讨论不代表别人不喜欢啊”-------呵呵，开个玩笑~

用less写css是有很大的帮助和效率提升的。管理css代码实在是不可能，用less或sass的话，会好很多

http://naltatis.github.com/jade-syntax-docs/#mixin

和less一样，jade有mixin，emmet(zencoding)是没有的

Jade（现在称为Pug）作为Express项目的默认模板引擎，是因为它有一些显著的优势。这些优势不仅提高了开发效率，还使得代码更加清晰和易于维护。

Jade/Pug的优点

  1. 语法简洁：与传统的HTML相比，Jade/Pug使用更简洁的语法，这减少了编写视图时的样板代码。

    // HTML
<div class="container">
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
</div>

// Pug
.container
    h1 Welcome to My Website
    p This is a paragraph.

  2. 逻辑清晰：Pug的缩进方式使得HTML结构的层次关系一目了然，这有助于开发者快速理解页面的结构。

  3. 内置功能：Pug提供了许多内置的功能，如循环和条件语句，这使得在模板中处理动态数据变得更加简单。

    ul
    each item in ['apple', 'banana', 'cherry']
        li= item

  4. 可读性高：对于团队协作来说，Pug的语法更容易阅读和理解，从而减少沟通成本。

性能考虑

虽然Pug需要编译为HTML，但现代工具链通常优化了这一过程，使得性能损耗可以忽略不计。此外，Pug的模板缓存机制也确保了首次加载后的性能损失非常小。

示例代码

假设我们有一个简单的Express应用，使用Pug作为模板引擎：

const express = require('express');
const app = express();

app.set('view engine', 'pug');

app.get('/', (req, res) => {
    const items = ['apple', 'banana', 'cherry'];
    res.render('index', { items });
});

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

views/index.pug 文件内容如下：

doctype html
html
    head
        title Pug Example
    body
        h1 Welcome to My Website
        ul
            each item in items
                li= item

这样，当用户访问根路径时，他们将看到一个包含水果列表的页面。

通过这种方式，Pug简化了开发流程，提升了代码的可读性和可维护性，因此成为许多开发者和团队的选择。

回到顶部