前端模板引擎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引入别的文件,写入一个路径
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容