pug模板引擎——jade

随着前端项目工程化的发展，代码结构愈来愈复杂，代码却愈来愈简单，为了将更多的精力集中在业务功能上面，对页面的快速构建需求日益剧增，同js、css同样，html也出现了各类各样的工具，即模板引擎，本文不研究各类模板引擎的实现技术原理，主要介绍jade的使用；

1.常见的模板引擎的

常见的模板引擎有mustache、Handelerbars、Underscore Templates、ejs(Embeded JS Templates)、jade
各类模板的比较能够参考个人另一篇文章传送门
本文主要介绍pug模板引擎的使用，pug原名不叫pug,而是众所周知的jade,jade中文含义为美玉翡翠，其原来的logo为一只精灵的白兔，而pug中文含义为哈巴狗，如今logo也改为了憨态可掬的哈巴狗，至于为什么将美玉改成哈巴狗，该开源项目在github给出的解释为jade的商标被人抢先注册了（这个理由也是让人服）；

2.pug结构语法

pug模板引擎兼容html,便可以在代码中直接书写html；

1. 标签：
   - 默认在每行文本开头(或紧跟白字符部分)书写html标签的名称；
   - 使用缩进来表示标签之间的嵌套关系
   - 自动识别闭合和非闭合标签，也能够在标签后加上/显示声明闭合标签

   如：
            ```
                div
                    a: p 这里是输出字符
            ```
    渲染结果：`<div><a><p>这里是输出字符</p></a></div>`

2. 内容
   - 管道文本：最简单的向模板添加纯文本的方法，在空白或标签后加上一个|字符，如：p | 这里是管道文本；
   - 标签内文本：标签内添加文本，在索要添加的文本和标签元素之间输入一个空格便可，如：p 这里是标签内文本；
   - 嵌入大段文本：在标签后输入一个.便可，注意标签和.之间无空格，如插入脚本：

   ```
        script. 
            if (true)
                console.log('这里是脚本片断1');
            else
                console.log(‘这里是脚本片断2’)
        ```

3. 属性
   - 单行属性：标签属性与html语法类似，及普通js表达式，多个属性间用逗号或空格分隔，如：a(href=''baidu.com''，class='link') 百度；
   - 多行属性：多行属性与单行属性相似，分多行些便可；
   - 长属性：长属性按照JS表达式书写便可；
   - 特殊字符：特殊字符可用''或""括起来便可，如：div(class='box' "(click)"="play()"
   - 转移属性：默认状况下，全部属性都通过转义(即将特殊字符串换成转义序列)来防止跨站脚本攻击之类方式
   - 布尔值：布尔值可直接使用，不指定值时默认为true；
   - class和id: 类可使用.className、id使用#idname语法来使用，如：a.btn p#content
   - 行内样式：样式属性与其余属性同样，能够为字符串或对象，如：a(style={color:'red',background:'#333'})
4. 注释
   - 单行注释：与javascript注释相似,采用//此时注释会输出，//-此时注释不会输出；
   - 块注释：与javascript相似，采用//换行便可；
   - 条件注释：
5. JS代码
   - 不输出的代码：用-符号开始一段不直接输出的代码;
   - 输出的代码： 用=符号开始一段代码；
   - 不转义的输出代码：用!=开始的代码不会被转义；

6. 变量
   pug文件中变量来源有三种，其内部变量优先级最高，其他两种按命令前后顺序，之后面的为准：
   ①pug文件内部，直接使用，如：-var name='内部变量'；
   ②命令行参数：使用--obj参数在命令行中传递，如pug test.pug -P -w --obj "{name:'命令行参数'}"；
   ③外部json文件：使用-O 跟随一个文件路径名，如pug test.pug -P -w -O test.json
   - 内容变量：使用=或#{}来进行真实变量的替换，如：

   ```
        - var url='baidu.com';
        p | 连接地址为 #{url}
        a(href=url)
        ```
    -

7. 条件
   pug的条件语句相似于JavaScipt,不一样之处在于不用书写()和{}符号；
8. 循环
   pug目前支持两种主要迭代方式：each和while
   - each:如'each value,index in [1,2,3,4,5]';
   - while:

9. 混入
   混入容许pug中重复使用一整个代码块、传入参数的方法,同时也支持属性方式传入参数；如：

   ```
        mixin list（name）
            p #{name}
   
        +list(复用1)
        +list(复用2)(class='btn'）
    ```

10. 文件包含
    包含(include)功能容许把另外的文件内容插入进当前文件,若是包含文件为js或css则会当作文本引入如：

    ```
        //- index.html
        doctype html
            html
                include includes/header.pug
                body
                // index.html文件内容
                include includes/footer.pug
    `` `

11. 文件继承
    - 覆盖：使用block和extends关键字进行模板的继承，一个称之为块的代码块，能够被字模板覆盖替换。该过程是递归的。
    - 扩展：语序去替换(默认的行为)，prenpend(向头部添加内容）、或appned(向尾部追加内容)

--end