Nodejs中大家觉得Jade好用吗？为什么我觉得很反人类？

Nodejs中大家觉得Jade好用吗？为什么我觉得很反人类？

话说我学NodeJS不是从express学起，之前用的模板引擎是handlebars.js，跟wordpress、dedecms之类的模板非常相似，几乎没有学习成本（不过里面的helper还是有点难用），如今做一个个人项目，用的Jade，感觉这货就是个生成器，从一种它自定义的语言生成html，学习曲线比较陡峭，刚开始写Jade都是先写HTML，然后用html2jade转一下，即使后面熟悉了，脑袋里也还是有个人肉转换的过程，先要脑袋将html转换成jade，再让jade 去生成html，感觉很蛋疼。。

而且Jade前端没有数据绑定，如果传给Jade不同的值，它会重新生成页面，也就是说页面会刷新，这样我想做个无刷新或者伪无刷新的网页还得写ajax？这也太落伍了吧。。

不知道大家怎么看。。


38 回复

Nodejs中大家觉得Jade好用吗？为什么我觉得很反人类？

问题描述

我在学习NodeJS时，最初接触的是Handlebars.js模板引擎，它的语法与WordPress、DedeCMS等模板非常相似，几乎没有任何学习成本。但是，在最近的一个个人项目中，我选择了Jade作为模板引擎。虽然Jade有着良好的可读性和简洁性，但我发现它存在一些让我感到困扰的地方。

首先，Jade是一种自定义语言，需要将HTML转换为Jade语法。例如，一个简单的HTML结构：

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is an example paragraph.</p>
</body>
</html>

转换为Jade语法后，变成了：

doctype html
html
  head
    title Example Page
  body
    h1 Hello, World!
    p This is an example paragraph.

这种转换过程不仅增加了学习成本，还导致我在编写Jade模板时需要在脑子里进行复杂的转换。

Jade的学习曲线

另一个问题是Jade的学习曲线较陡峭。对于初学者来说，直接使用Jade编写模板可能会感到困难。为了降低这种难度，可以使用在线工具如html2jade来辅助转换，但这并不能完全解决学习成本高的问题。

数据绑定和页面刷新

此外，Jade没有前端的数据绑定功能。这意味着每次传递给Jade的数据发生变化时，页面都需要重新生成并刷新。例如，如果你想要实现一个无刷新或伪无刷新的网页效果，你可能需要额外编写Ajax代码来处理动态数据更新。

// 示例：使用Jade渲染静态页面
app.get('/example', (req, res) => {
  const data = { title: 'Example Page', message: 'Hello, World!' };
  res.render('example', data);
});

在这种情况下，如果你希望用户在不刷新页面的情况下看到数据变化，你需要自己实现前端的Ajax请求来更新页面内容。

结论

尽管Jade在某些方面具有独特的优势，例如简洁的语法和良好的可读性，但其陡峭的学习曲线和缺乏前端数据绑定功能确实让人感到不便。如果你正在寻找一个更易上手且具备现代Web开发特性的模板引擎，你可以考虑使用EJS、Pug（Jade的后续版本）或其他现代模板引擎。


express不是必须用jade, 模板引擎可以随便换.

你指的数据绑定是什么? 局部刷新如ajax或者其他前后端通讯技术(websocket/SSE/flash socket/…), 伪刷新如turbolinks或者pjax, 这些和模板都没任何关系, 如果你指的是angularjs那种绑定， jade和angularjs并不冲突, 但是用angularjs同样离不开前后端通讯.

HTML 才反人类, 适合人类阅读的语言, 不管怎么比, 总要定几个规则, 我理解适合人类的规则, 主要包括:

  • 结果清晰, 容易看懂
  • 编辑方便, 即便没有强大的 IDE 也方便维护
  • 代码本身不要随便重复
  • 没有太多隐藏的状态, 特别不要有容易让人误解的

HTML 相对于 Jade 反而是一种低级语言, 虽然上手快, 但是隐藏状态多, 控制起来也不方便. Jade 需要说明, 其功能远远超出了模板引擎, 用 Handlebars 之类对比是不靠谱的.

另外在前端单页面的使用问题上, Jade 确实不适合前端使用, 前端模版常用的方案是编译到 JavaScript, 而 Jade 编译的 js 文件性能很差, 所以很少在前端用 如果真要用, Blade 稍微好一点, 而且 Blade 有 Meteor 的绑定, 绝对双向绑定的开发效率 你也可以试试我模仿 doT 写的 Cirru HTML js, 当然要说明这是我写的所以我推荐, 不代表功能全面

另外双向绑定明明是前端 MV* 内容, 不要跟服务端渲染混在一起讲

不习惯

个人很不习惯，不过好用不好用也看不同人习惯了。其实html+emmet就挺好了，写程序不可能不熟悉html，为了一个模板单独搞另外一套类似于coffeescript>javascript的东西，觉得真没必要

我觉得挺好的呀，以前都用 emmet 来写HTML，当时感觉总算是不用敲尖括号了，现在用 jade 就连 Tab 都不用按了，还少些好多引号。

个人觉得HTML挺好的，掌握好HTML，对于调试也很好啊！

jade写起来挺舒服的

月经贴啊

web全都反人类，鉴定完毕

每次都都会在生成express后加上一句 express --ejs

jade写结构实在是，方便快接，我以前都是用emmet写HTML，自从发现jade之后，就很少了

由于我是.Net程序,所以比较倾向ejs模板

只用过handlebar和ejs的路过

Jade挺好的啊。你想用其他功能就用其他js配合，不过作为模板，我真的挺喜欢Jade的，至少之前用ejs，我就觉得ejs模板不如直接写html算了。

绝对的反人类， 你学了这个， 还是要学html，而且里面转换不对的地方， 你还改不了。 貌似少些了代码， 可是降低了你对代码的控制， 遇到问题， 死也过不去， 而且 你花时间学了，这个没什么用， 就是为了浪费你的时间 本来大家用nodejs是很大程度因为熟悉javascript 结果这个东西一出来，这个‘熟悉’没有效果了 你还是需要在学习这个没大用的东西 基本上是浪费时间浪费钱 学了半天还是得扔 谁用谁sb 浪费时间 废物 唉

用jade 挺不习惯的，可能是没有强迫自己吧，什么东西适应都要有一个过程。

jade最大的问题不是语法问题，语法上对html做了简化，增加了一定学习难度，熟悉了自然就没有问题了。 它的最大问题是效率，如果在服务端渲染的话，消耗的就是实打实的CPU周期，这个跟其他模板比起来差太多了。 我前段时间本来准备写一个类似的模板实现的，不过半途而废了，语法上和jade类似，效率上提升了不少，跟dot等基本一个级别的，比ejs快。

express -e helloworld

觉得jade不习惯的应该是对html大纲就不习惯把

我觉得挺慢的，开始打算用测试后感觉太慢，就直接用angujar在静态页面基础上做了，正好也可以分离前后端 自豪地采用 CNodeJS ionic

开始也是用jade，不习惯那东西改用ejs

个人感觉 Jade 很优雅，服务端模版肯定选它

觉得只要是前后不分离的都是反人类的， jsp、asp、早期php神马的都是反人类的。

自己感觉只要一旦接受了jade这种缩进的设定，用起来还是挺简单方便的…

我目前也非常不习惯jade

ejs还是挺好用的~

还好我都不用，前后分离大法好

我们是程序猿，不是人类的！！更无反人类之说。。。

刚开始碰 觉得也就一个语法规则而已 ~~ 不要太在意嘛

如果html一开始就设计成jade这个样子,会有人反对吗?

楼主肯定没写一段时间jade,我是写了一段时间jade,感觉一般，改到ejs,看到满眼的<>，又改回jade了```

ejs感觉更好理解一点 自豪地采用 CNodeJS ionic

ejs不错，简单简洁。 或者swig

其实全使用YAML风格的语言多好，COFFEE + JADE + STYLUS 结构清晰代码量又小，非常爽 https://github.com/findyourmagic/nobrace

写习惯了jade觉得挺好的

如今做一个个人项目，用的Jade，感觉这货就是个生成器，从一种它自定义的语言生成html，学习曲线比较陡峭，刚开始写Jade都是先写HTML，然后用html2jade转一下，即使后面熟悉了，脑袋里也还是有个人肉转换的过程，先要脑袋将html转换成jade，再让jade 去生成html，感觉很蛋疼。。 不要刻意去用html去套界面。层就是层 abc可以是层，123可以是层，并不是<div/>才是层，跳出html。。。

Jade模板引擎（现在称为Pug）确实与传统的HTML编写方式不同，需要一些时间来适应。虽然有些人可能会觉得它的语法简洁且高效，但确实存在一定的学习曲线。以下是一些可能帮助你更好地理解和使用Jade/Pug的建议。

学习曲线

  1. 熟悉语法：Jade/Pug的语法更加简洁，比如通过缩进代替闭合标签。例如：

    doctype html
html
  head
    title= pageTitle
  body
    h1 Welcome to #{title}
    p You have #{unreadMessages} unread messages.

    相比于HTML:

    <!DOCTYPE html>
<html>
  <head>
    <title>${pageTitle}</title>
  </head>
  <body>
    <h1>Welcome to ${title}</h1>
    <p>You have ${unreadMessages} unread messages.</p>
  </body>
</html>

  2. 辅助函数：利用Pug的辅助函数可以简化重复性任务，如block、include、extends等。

缺点

  1. 缺少数据绑定：确实，Jade/Pug本身并不支持数据绑定，你需要自己处理动态数据。但这并不是一个大问题，因为前端框架（如Vue.js、React等）可以很好地处理这部分。

  2. 无刷新更新：如果你希望实现无刷新页面更新，可以结合前端框架和AJAX。例如，使用Express作为后端，Pug作为模板引擎，配合前端JavaScript库来处理动态数据。

示例

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

// app.js
const express = require('express');
const app = express();

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

app.get('/', (req, res) => {
  const data = {
    title: 'Welcome',
    unreadMessages: 5
  };
  res.render('index', data);
});

app.listen(3000, () => console.log('App listening on port 3000'));

对应的Pug文件 views/index.pug：

doctype html
html
  head
    title= title
  body
    h1 Welcome to #{title}
    p You have #{unreadMessages} unread messages.

希望这些示例能帮助你更好地理解并使用Jade/Pug。

回到顶部