建议大家使用FireFox、Opera、Safri、IE8+等主流浏览器访问本站,否则可能会出现不兼容等问题!

jade引擎的继承相关知识

express 凶恶的方块 1747次浏览 已收录 1个评论

前言:

在很多编程狗的面前比较习惯用ejs引擎来渲染页面,但是受到柴犬君的影响,我这次用了jade,话说jade的设计真的是反人类,采用的是缩进包含逻辑,这对大牛来说是非常方便的,但是对于菜逼来说…. express4默认采用jade渲染,人们都说这是个趋势,但是jade除了简便和直观以外,其实性能上还是略逊一筹的。最想吐槽的其实还是对齐、

主要内容:

PS:只记录继承部分的笔记。 参考:推酷,编程网志

继承——原作者 孙崇升  GTIHUB

Jade 中使用 extends 来继承代码片段,与 include 本本分分地引用代码段不同,继承可以修改代码片段。

首先,在 layout 页面使用 block 标识符,设置一个可修改的代码片段,紧跟block 标识符之后的是该代码片段的名字:

<code>//- layout.jade
doctype html
html
  head
    b<span class="operator"><span class="keyword">lock</span> title
      title <span class="keyword">Default</span> title
  body
    block content
</span></code>

然后,在 index 页面继承 layout ,并可以根据代码片段的名字修改相关代码:

<code>//- index.jade
extends ./layout.jade

b<span class="operator"><span class="keyword">lock</span> title
  title Article Title

block content
  h1 My Article
</span></code>

生成的 HTML:

<code><span class="doctype"><!doctype html></span>
<span class="tag"><<span class="title">html</span>></span>
  <span class="tag"><<span class="title">head</span>></span>
    <span class="tag"><<span class="title">title</span>></span>Article Title<span class="tag"></<span class="title">title</span>></span>
  <span class="tag"></<span class="title">head</span>></span>
  <span class="tag"><<span class="title">body</span>></span>
    <span class="tag"><<span class="title">h1</span>></span>My Article<span class="tag"></<span class="title">h1</span>></span>
  <span class="tag"></<span class="title">body</span>></span>
<span class="tag"></<span class="title">html</span>></span>
</code>

上述这种继承方式,会抹除原来代码片段的部分,如果想要追加代码片段,可以使用 appendprepend 指令。 append 用于在原有代码片段之后追加, prepend用于在原有代码片段之前追加。一个初始页面:

<code>//- layout.jade
html
  head
    title Layout
  body
    b<span class="operator"><span class="keyword">lock</span> content
      p Hello
</span></code>

使用 append

extend layout

block append content
    p World

生成的 HTML:

<code><span class="tag"><<span class="title">html</span>></span>
  <span class="tag"><<span class="title">head</span>></span>
    <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/vendor/jquery.js"</span>></span><span class="tag"></<span class="title">script</span>></span>
    <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/vendor/caustic.js"</span>></span><span class="tag"></<span class="title">script</span>></span>
  <span class="tag"></<span class="title">head</span>></span>
  <span class="tag"><<span class="title">body</span>></span>
    <span class="tag"><<span class="title">p</span>></span>Hello<span class="tag"></<span class="title">p</span>></span>
    <span class="tag"><<span class="title">p</span>></span>World<span class="tag"></<span class="title">p</span>></span>
  <span class="tag"></<span class="title">body</span>></span>
<span class="tag"></<span class="title">html</span>></span>
</code>

使用 prepend

extend layout

block prepend content
    p World

生成的 HTML:

<code><span class="tag"><<span class="title">html</span>></span>
  <span class="tag"><<span class="title">head</span>></span>
    <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/vendor/jquery.js"</span>></span><span class="tag"></<span class="title">script</span>></span>
    <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/vendor/caustic.js"</span>></span><span class="tag"></<span class="title">script</span>></span>
  <span class="tag"></<span class="title">head</span>></span>
  <span class="tag"><<span class="title">body</span>></span>
    <span class="tag"><<span class="title">p</span>></span>World<span class="tag"></<span class="title">p</span>></span>
    <span class="tag"><<span class="title">p</span>></span>Hello<span class="tag"></<span class="title">p</span>></span>
  <span class="tag"></<span class="title">body</span>></span>
<span class="tag"></<span class="title">html</span>></span></code>

方块网络 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明jade引擎的继承相关知识
喜欢 (0)or分享 (0)
avatar
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. avatar
    挺好的 支持
    米粒博客2016-03-15 10:38 回复 Windows XP | Chrome 45.0.2454.101