随着前端项目工程化的发展,代码结构越来越复杂,代码却越来越简单,为了将更多的精力集中在业务功能上面,对页面的快速构建需求日益剧增,同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标签的名称;
- 使用缩进来表示标签之间的嵌套关系
- 自动识别闭合和非闭合标签,也可以在标签后加上/
显示声明闭合标签如:```diva: p 这里是输出字符```渲染结果:`<div><a><p>这里是输出字符</p></a></div>`
内容
- 管道文本:最简单的向模板添加纯文本的方法,在空白或标签后加上一个|
字符,如:p | 这里是管道文本
;
- 标签内文本:标签内添加文本,在索要添加的文本和标签元素之间输入一个空格即可,如:p 这里是标签内文本
;
- 嵌入大段文本:在标签后输入一个.
即可,注意标签和.
之间无空格,如插入脚本:```script. if (true)console.log('这里是脚本片段1');elseconsole.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.htmldoctype htmlhtmlinclude includes/header.pugbody// index.html文件内容include includes/footer.pug `` `
文件继承
- 覆盖:使用block
和extends
关键字进行模板的继承,一个称之为块的代码块,可以被字模板覆盖替换。该过程是递归的。
- 扩展:语序去替换(默认的行为),prenpend(向头部添加内容)、或appned(向尾部追加内容)
--end