从Html到Jade

    【学习背景】
    经历了一周多的静态页面，对Html也是越来越熟悉。之前不常用的标签也是一个又一个地学着去用。上周接触到新的环境，前台页面从Html转换到了Jade。很好奇，Jade是什么？为什么要把html转换为它呢？带着一些疑问，在工作之余，自己简单地了解了一下jade。
    【学习积累】
    一.Jade是什么
        Jade 是一个高性能的模板引擎，它深受 Haml 影响，它是用 JavaScript 实现的，并且可以供 Node 使用。
    二.Html2Jade
        在认识jade的特性之前，不妨先开开眼界，看看jade代码长什么样。下面请看html和jade的对比图：

    三.Jade特性
         对于它的特性，看到网上列出的不止十条吧。通过这周对代码的接触，能与自己产生共鸣的应该也就是五点左右。下面就详细说说我在实践中感受到的，在上图中也有相应的文字说明。其余的列出一些来，先了解了解。

• HTML5 模式 

         因为项目中的jade就是从我们之前写的静态页面中的html转换来的，所以，它的模式是和html一样。熟悉了几天jade，自己也就能不经过转换的过程，直接改写jade了。这很大程度上因为有了一定的html的基础。

• 没有前缀的标签
  

         在写Html的时候，有各种标签，也就是尖括号里面的各种东西。如

、等等。而在html中这些尖括号、标签之类的东西都不用了。直接写出标签，如div。如果标签中有id或class值，就直接用#和.去表示。

• 灵活的缩进
  

          在写html的时候，如果要在div中加一个span，那么就是将span写在div里。而jade则是通过缩进来表示的。

• 代码高可读
  

         通过html和jade代码的比较，很容易看出html的代码比较复杂，各种标签，样式，规定。而jade代码就比较简单，可读性较高。

• 块展开

         一个页面的代码，通过jade实现，其实也就是一整块的内容。严格而灵活的缩进，结构也就非常清楚了。

 其它特性：     

Mixins

静态包含

属性改写

安全，默认代码是转义的

运行时和编译时上下文错误报告

命令行下编译jade模板

在内存中缓存(可选)

合并动态和静态标签类

可以通过 filters 修改树

模板继承

......

【项目实战】

    在项目中，组长给我们指导的时候，他是直接通过开发环境将html转换为了jade，我用的webstorm开发，一时半会也找不到转换的插件之类的。我就从网上搜，直接找的是在线工具，上面的那张图就是网站的首页截图。下面看看，我将自己写的html粘贴过去，转换后的jade对比图：

    【学习总结】
    其实，jade也存在一些缺点。比方说：可移植性差、调试困难和性能不是非常出色。就拿自己刚接触的那会来说，修改页面是比较困难的，对于比较复杂的页面，更是一个挑战。
    所以，在项目的开发中还是需要学会取舍的。在项目的初始阶段，考虑的是开发效率，快速迭代，jade的高复用性，代码的组织就非常满足需求。而在项目的稳定阶段，是趋于成熟的阶段，需要团队协作，性能方面也需要考虑，这时候去重构也都来得及。