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

你可能感兴趣的:(#,Lenovo,【项目学习】)