jade这种js模板真的好吗？

0 0

jade这种js模板真的好吗？

jade完全改变了html的语法，像官方这个示例

doctype 5
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript')
      if (foo) {
         bar()
      }
  body
    h1 Jade - node template engine
    #container
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!

确实，它变得快捷了很多，但是这样是否降低了可移植性？比如页面设计师制作的html就必须被重写成jade的语法，而当我们要更换模板时，成本更高。
而且论效率，我们有zencoding，为什么要在模板上动手脚？

我的问题是，是否有什么特别的优势让jade也能在众多模板中占有一席之地？比如一种转换为普通html的工具或者是兼容html语法之类的。

node.js jade JavaScript 模板模板引擎

11 years, 8 months ago

GlkGlk

GlkGlk 11 years, 8 months ago

遇到不少人问我这个问题，看到此问题，特地写了一篇博客。 http://willerce.com/post/the-views-of...

作为 Express 的默认模版，Jade 进入了我的视野，如同习惯了 Javascript 的语法，再见到 Coffescript 时的惊艳。优雅、简单是对 Jade 的第一印象，在 Github 上拥有4K的Star足见其受欢迎的程度。

我在刚开发 Noderce 时就用上了 Jade，经过一番学习使用起来倒没有什么问题，但使用 Jade 这个过程并不像想象中的愉快，我遇到了一些的问题，并且耗费在写HTML上的时间有所增加。在之后的 Node.js 项目中我改用 EJS，非常的舒适习惯、效率很高。

我整理了自己使用 Jade 后的一些看法，希望对大家在选择模版引擎时有所帮助。

不能减少你的输入

这是 Jade 官网给的示例

doctype 5
  html(lang="en")
    head
    title= pageTitle
    script(type='text/javascript')
    if (foo) {
        bar()
    }
  body
    h1 Jade - node template engine
    #container
    if youAreUsingJade
      p You are amazing
    else
      p Get on it!

太棒了，相对手写HTML减少了大量的输入，并且漂亮、缩进清晰、层级明了。但是，似乎用 zencoding 的话，输入量应该是在一个层级，仅看 HTML 部分的话，使用 zencoding 输入量更少。我只需要输入以下内容，以及少许的光标移动

html:5
script
h1
#container
p

在逻辑方面， Jade 做得不错，不需要 <%%> 这样的额外的输入。但总体来说，Jade 并不能降低输入量。

可移植性低

当你的项目使用了一些别的地方拷贝过来的HTML代码时，你需要使用 html2jade 这样的工具来进行转换后才能使用。

调试困难

如果页面中某部分出了问题，首先前端会通过 firebug 定位问题出在哪里，如果是普通模板，直接就找到源码中的目标位置了，如果使用了此类模板，好吧，先用脑子翻译成这种模板，然后再去找目标位置，如果页面复杂，这种转换需要的时间也就更长。[via]( http://segmentfault.com/q/10100000001... )

性能低

[WEB模板jade、ejs、handlebars 万行代码解释效率比较，jade完败]( http://cnodejs.org/topic/50e70edfa7e6... )

这篇文章提供的效率比较结果（平均消耗时间，约数）
jade 287ms > ejs 43ms > handlebars 28ms

性能不应该成为不使用 Jade 的原因，但快一点总是好的，对吧？

answered 11 years, 8 months ago

Moe小零

Moe小零 answered 11 years, 8 months ago