pug模板引擎——jade

最新推荐文章于 2024-06-25 11:10:30 发布

weixin_30521161

最新推荐文章于 2024-06-25 11:10:30 发布

阅读量195

点赞数

文章标签： json 前端 javascript ViewUI

原文链接：http://www.cnblogs.com/hbzyin/p/7752542.html

版权

随着前端项目工程化的发展，代码结构越来越复杂，代码却越来越简单，为了将更多的精力集中在业务功能上面，对页面的快速构建需求日益剧增，同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；

标签：
- 默认在每行文本开头(或紧跟白字符部分)书写html标签的名称；
- 使用缩进来表示标签之间的嵌套关系
- 自动识别闭合和非闭合标签，也可以在标签后加上/显示声明闭合标签
```
 如：
         ```
             div
                 a: p 这里是输出字符
         ```
 渲染结果：`<div><a><p>这里是输出字符</p></a></div>`
```
内容
- 管道文本：最简单的向模板添加纯文本的方法，在空白或标签后加上一个|字符，如：p | 这里是管道文本；
- 标签内文本：标签内添加文本，在索要添加的文本和标签元素之间输入一个空格即可，如：p 这里是标签内文本；
- 嵌入大段文本：在标签后输入一个.即可，注意标签和.之间无空格，如插入脚本：
```
     ```
     script. 
         if (true)
             console.log('这里是脚本片段1');
         else
             console.log(‘这里是脚本片段2’)
     ```
```
属性
- 单行属性：标签属性与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'})
注释
- 单行注释：与javascript注释类似,采用//此时注释会输出，//-此时注释不会输出；
- 块注释：与javascript类似，采用//换行即可；
- 条件注释：
JS代码
- 不输出的代码：用-符号开始一段不直接输出的代码;
- 输出的代码：用=符号开始一段代码；
- 不转义的输出代码：用!=开始的代码不会被转义；
变量
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)
     ```
 - 
```
条件
pug的条件语句类似于JavaScipt,不同之处在于不用书写()和{}符号；
循环
pug目前支持两种主要迭代方式：each和while
- each:如'each value,index in [1,2,3,4,5]';
- while:
混入
混入允许pug中重复使用一整个代码块、传入参数的方法,同时也支持属性方式传入参数；如：
```
 ```
     mixin list（name）
         p #{name}

     +list(复用1)
     +list(复用2)(class='btn'）
 ```
```

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

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