代码的复用是jade非常突出的一个设计目标，jade不仅仅通过mixin来复用代码，他在文件的组织能力上也非常突出，说白了，就是继承和包涵
 
block定义的方式和调用的方式
block desc

　　p jade study

block desc

block desc
=>
<p>jade study</p>

<p>jade study</p>

<p>jade study</p>
继承
layout.jade
html

　　head

　　　　meta(charset='utf-8')

　　　　title layout

　　body

　　　　block descript

　　　　　　p from layout

　　　　block content

index.jade

extends layout.jade

block content

　　block descript

　　　　p desc from index

　　h1 mixin

　　mixin lession

　　　　p jade study

　　+lession
=>
index.html
<html>

　　<head>

　　　　<meta charset="utf-8"/>

　　　　<title>layout</title>

　　</head>

　　<body>

　　　　<p>desc from index</p>

　　　　<p>desc from index</p>

　　　　<h1>mixin</h1>

　　　　<p>jade study</p>

　　</body>

</html>
这里extends，多个文件可以复用，最大的减少代码的重复，block也是就近原则

jade继承的更多相关文章

  1. jade模板引擎

    最近用jade写了点东西,觉得挺有趣的,是一个有意思的模板引擎. 比如说,像这样的结构的html <span> <i class="icon-edit">& ...

  2. jade 入门

    推荐网站: jade官网 html在线转换为jade 参考文章1 参考文章2     node的模板常用的有两个,一个是ejs,另外一个就是jade,相对来说,ejs更容易理解,像原生的html,很多 ...

  3. [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用

    一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的 ...

  4. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  5. jade学习02

    模版继承 ; block,extends ;如果是原生html文件的话,后缀html //layout.jade doctype html html head meat(charset='utf-8' ...

  6. Jade之Template Inheritance

    Template inheritance jade支持通过关键字block和extends来实现模板继承. 比如,在layout.jade写上如下代码 html head title My Site ...

  7. Jade之Extends

    Extends jade允许多个jade文件继承一个jade文件. jade: //- layout.jade doctype html html head block title title Def ...

  8. jade模板引擎学习笔记（WebsStorm9.0.3+ nodejs+express+jade）

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  9. jade复用

    jade复用说白了就是模板的继承. 使用 block 标识符,设置一个可修改的代码片段 layout.jade doctype html html head block title title Def ...

随机推荐

  1. swift ClassNameFromString 的替换方法 + 创建TableviewHelper

    1. ClassNameFromString 的方法oc 可以正常使用,但是swift 不能直接使用的,下面的代码 func getAPPName() -> String?{ let nameK ...

  2. WordPress的Bootstrap面包屑导航

    <ol class="breadcrumb"> 当前位置: <li><a href="<?php bloginfo('url'); ? ...

  3. 【C# 开发技巧】番外篇故事-我是一个线程

    我是一个线程 我是一个线程,一出生就被编了一个号——0x3704,然后被领到一间昏暗的屋子里,在这里,我发现了很多和我一模一样的同伴.我身边的同伴0x6900待的时间比较长,他带着沧桑的口气对我说:“ ...

  4. 移动架构-MVVM框架

    MVVM是Model-View-ViewModel的简写.它本质上就是MVC 的改进版.MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开 MVVM的优点 可重用性 ...

  5. 给引入页面的js和css资源加上版本号，防止浏览器缓存资源

    最近因为在做前端开发的相关工作,每次发布新版本以后,不到5分钟,测试童鞋一个接一个的抱怨说BUG根本就没有修改,这个时候你说的最多的话就是“清缓存!!清页面缓存!!你没有清缓存!!你清理了页面缓存就对 ...

  6. uwp,右键浮出获取DataContext(数据上下文)

    列表视图类控件,如ListView/GridView,有时项目需要按下右键浮出选项,来获取Item的DataContext. 下面的示例代码,事先我已经有了一个自定义类Video,并且已经绑定了数据源 ...

  7. 从MongoDB及mysql 谈B/B+树

    一 B树的由来 B树指的是一类树,包括B-树,B+树,B*树等,是一种自平衡的搜索树,它类似普通的平衡二叉树,不同的一点是B树允许每个节点有更多的子节点.B树是专门为外部存储器设计的,如磁盘,它对于读 ...

  8. C++函数的应用

    函数的相关语法 函数的一般定义形式如下: 返回类型 函数名([参数表])   //函数头 {                                                 //函数体 ...

  9. 2019CCPC网络赛——array（权值线段树）

    题目链接http://acm.hdu.edu.cn/showproblem.php?pid=6703 题目大意: 给出一个n(n<1e5)个元素的数组A,A中所有元素都是不重复的[1,n]. 有 ...

  10. 解读PHP面试-高并发解决方案类考察点

    整理自慕课网360大牛全面解读PHP面试 ,购买链接:https://coding.imooc.com/class/133.html 1.高并发和大流量解决方法 真题回顾 PHP如何解决高并发大流量问 ...