前端模板引擎JADE

首先是什么是jade呢，jade是node超高性能的前端模板，有着很强大的API和大量杰出的特性。特性：客户端的支持、代码高可读、灵活的缩进、块的展开、混合、属性改写、模板继承、模板嵌套等等
在jade中，要分清什么是标签，文本和代码。 jade的任何一段文本，都要区分是标签，文本，还是代码。jade以-开头的，都是js代码。jade的格式总体是标签 + 文本，有三种，标签（缩进）：随后的缩进是文本，标签=（缩进）：随后的缩进都是文本，不必使用。jade的多行文本，每行又可以交叉使用=或者-（有bug）。
在说说jade的优缺点吧，
优点，
1 开发效率方面。手写情况下效率一定比原生HTML更快，这一点不容置疑。
2 可读行方面，在同样缩进良好的情况下，并且开发者同样对HTML和jade语言足够熟悉的情况下，jade的可读行一定更高，因为同样屏幕大小jade可以一次显示两倍行数的代码。并且本身DOM是树状结构，看同时jade的标记方式也与CSS相统一，方便编写和查看。
3 可维护性，HTML的话改个元素需要改两行，三个元素需要删两行，增加一个中间元素还需要复制粘贴或者鼠标拖过来拖过去移动，而且可能搞着搞着缩进就乱了，这些jade从来都不用担心。
缺点：
1 可移植行差
2 调试困难
3 性能没有想象的那么出色
虽然它很强大，但是我们也要正视它的缺点，适合自己再去使用。比较适合一些创业型公司，人手比较少，要求开发速度。

说了这么久，说说怎么用吧

通过npm安装

npm install -g jade

要运行项目的话，用node的express框架（之前有了解过，还写过文章）。创建一个express框架，然后让他运行就OK啦。（默认应该是使用jade模板，如果不是的话手动改一下 app.js 里面的app.set('view engine', 'jade');）

在jade中可以定义js变量，以及不用标签嵌套，标签闭合等等（看上去好像很不符合W3C的标准，但是人家就是这么用的）

body
    h2#aa.bb   一个h2标签id是aa，class是bb
    #aa.bb       没有写标签的话默认是div
    h2 转义      标签后面直接跟里面的内容
    p #{js变量}   变量#{}去显示
    ul（class='class'）   属性的话使用（）例如a标签的href
    style.            如果有换行的话再标签后面加上.
      body{color:#fff}
    - var data = 'text'   使用-定义的都是js代码
    p #{data}
    - var obj = {a:'jade',b:'high'} 
    - for(var k in obj)   在模板中可以使用for循环
      p #k 
    each item in obj   使用each循环
     p= item
   if data == 'text'     可以使用 if else
      p data是text
   else 
      p data不是text
    - var name = 'jade'
    case name       使用case关键字
       when 'java'
       when 'node'
          p HI node
       when 'jade'
          p HI jade
       default
          p HI 
      
定义模板关键字 mixin 
    mixin lesson
      p he jade
调用使用+lesson
+lesson
模板还可以传参数
mixin study(name,courses)
    p #{name}
    ul.courses
        each courses in courses
           li= course
+study('name',['jade','node'])
模板和模板之间也是可以嵌套的
block 关键字定义模块
也可以引入别的文件的模板，通过extends引入别的文件，写入一个路径