代码的复用是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. VMware VSAN 设计规则

    1.集群节点数量:3-64台主机(生产环境最少4节点起,5.5版本支持32节点,6.0版本支持64节点),配置万兆网卡,主机规格应满足VSAN兼容性要求. 2.每台主机需配置磁盘组,每台主机的磁盘组数 ...

  2. Flutter easyrefresh示例 上拉加载+下拉刷新

    官方示例,简单改了下,实现功能为主. 代码如下: import 'dart:async'; import 'package:flutter/material.dart'; import 'packag ...

  3. python3.7.3安装beautifulsoup4出现版本不兼容的问题

    今天想安装一个beautifulsoup4,结果一直出错,好多教程总是有各种坑……找了很多个教程,为了记录方法也为了分享给大家,简单些一个.但是是真真不想再费劲写一遍了……直接贴链接,亲测有效,但是底 ...

  4. 【VS开发】【数据库开发】libevent入门

    花了两天的时间在libevent上,想总结下,就以写简单tutorial的方式吧,貌似没有一篇简单的说明,让人马上就能上手用的.首先给出官方文档吧: http://libevent.org ,首页有个 ...

  5. 采用霍夫曼编码(Huffman)画出字符串各字符编码的过程并求出各字符编码 --多媒体技术与应用

    题目:有一个字符串:cabcedeacacdeddaaaba,问题: (1)采用霍夫曼编码画出编码的过程,并写出各字符的编码 (2)根据求得的编码,求得各编码需要的总位数 (3)求出整个字符串总编码长 ...

  6. 第三坑:jar包编译版本

    这个是之前往was上发应用的时候踩的一个坑,当时我们知道was的jdk版本是1.6,然后我们是用1.7的jdk,编译版本选的是1.6,然后放上去不对,我们以为是编译的问题,然后又下载了1.6的jdk, ...

  7. php 之分页

    $a=$_FILES; // print_r($a);die; foreach ($a as $key => $value) { $k=$key; } // $_FILES['license'] ...

  8. centos7无网络环境下创建基于scratch镜像的Linux镜像,并带有Java运行环境

    一.准备 将下载好的jdk以及scratch镜像放在同一文件夹下:这里放在linux:2.0 二.导入scratch镜像 #docker load -i scratch.tar 三.创建dockerf ...

  9. SAS学习笔记11 SAS宏

    宏是一个被储存的文本,用一个名字识别它.最简单的宏就像一个宏变量一样工作,但复杂的宏可以完成许多宏变量不能做的事. 定义宏的语句格式为: %macro 宏名称: 宏文本 %mend <宏名称&g ...

  10. c++学习---迭代器

    迭代器类型: begin和end的返回值的类型由对象是否为常量所决定 无论对象是都为常量,cbegin和cend都将都到一个const_iterator