首页 > 开发 > NodeJS > 正文

jade这种js模板真的好吗?

2017-09-08 17:34:49  来源:网友分享

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语法之类的。

解决方案

遇到不少人问我这个问题,看到此问题,特地写了一篇博客。 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 的原因,但快一点总是好的,对吧?