我们可以先来看看ES5继承的实现方式，请看下面示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function Rectangle (length, width) {
  this.length = length;
  this.width = width;
}

Rectangle.prototype.getArea = function () {
  return this.length * this.width
}

function Square (width, length) {
  Rectangle.call(this, width, length)
}

Square.prototype = Object.create(Rectangle.prototype, {
  constructor: {
    writable: true,
    enumerable: true,
    configurable: true
  }
});

let square = new Square(2, 3);
console.log(square.getArea())             // 6
console.log(square instanceof Square)     // true
console.log(square instanceof Rectangle)  // true

以上代码简单的实现了一个继承过程。为了实现这个继承过程，我们先创建了子类对象Square的实例对象this，然后调用call方法将父类Reatangle的方法添加到子类对象的this上。

ES6中的继承

学习过其他面向对象编程语言的都或多或少知道类和类继承的概念，而JavaScript虽然也是面向对象的却并不支持这些特性，要实现类的继承只能通过其他方法定义并关联上多个相似的对象。这个状态一直从ECMAScript1延续到了ECMAScript5， 直到ECMAScript6终于引入了类的概念。
ES6类的出现让我们可以轻松的实现继承功能，和其他能够实现类继承的编程语言一样，ES6的继承也是通过关键字extends来实现的。ES6实现继承的实质是先创造父类的实例对象this，然后通过子类的构造函数修改this。
下面我们将上面的函数进行一个修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

class Rectangle {
  constructor (length, width) {
    this.length = length;
    this.width = width;
  };

  getArea () {
    return this.width * this.length;
  }
}

class Square extends Rectangle {
  constructor (length, width) {
    super(length, width)
  }
}

let square = new Square(2, 4);
console.log(square.getArea());            // 8
console.log(square instanceof Square)     // true
console.log(square instanceof Rectangle)  // true

类的出现让我们轻松的实现了继承功能，使用extends可以指定类的继承函数，原型会自己调整，然后通过super()方法即可快速访问父类的构造函数。

super关键字

下面我们来详细看一下super关键字

super这个关键字既可以当做函数使用，也可以当做对象使用

第一种情况，super作为函数调用时代表父类的构造函数，ES6中有明确的规定，子类的构造函数必须执行一次super函数，但是如果我们不使用构造函数，当创建新的类实例时就会自动调用super()方法，并传入所有的参数。

1
2
3
4
5
6
7
8
9
10
11

class Square extends Rectangle {
  // 没有构造函数
}

// 等价于

class Square extends Rectangle {
  constructor (length, width) {
    super(length, width)
  }
}

super虽然代表了父类A的构造函数，但是返回的却是子类B的实例，也就是说super内部this指向的是B，因此super()在这里相当于A.prototype.constractor.call(this)

1
2
3
4
5
6
7
8
9
10
11
12

class A {
  constructor () {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor () {
    super();
  }
}
new A();     // A
new B();     // B

上面的代码中，new.target指向的正是当前执行的函数。从结果中我们可以看到，在super()执行的时候它指向的是子类B的构造函数，而不是父类A的构造函数，也就是说，super()内部this的指向是B。
super在使用的时候还有另外一种情况–super作为对象时在普通方法中指向父类的原型对象，在静态方法中指向父类

1
2
3
4
5
6
7
8
9
10
11
12

class A {
  p () {
    return 1;
  }
}
class B extends A{
  constructor () {
    super();
    console.log(super.p());      // 1
  }
}
new B();

上面的代码中，子类B中的super就是当成一个对象来使用的，此时的super就相当于普通函数中的A.prototype，所以super.p()就相当于A。prototype.p()。
还有一点需要注意的是，在子类的构造函数中，如果需要访问父类的属性可以使用this来实现，但是只有调用了super()方法之后才可以使用this关键字，否则会报错，这是因为子类实例的构建是基于对父类实例的加工，只有super方法才能够返回父类的实例。

下面我们来总结一下super()的使用需要注意的一些细节

• 只可以在派生类的构造函数中使用super()方法，如果尝试在非派生类或函数中使用则会导致程序抛出异常。
• 如果不想使用super()，则唯一的办法是让父类的构造函数返回一个对象。
• 在派生类的构造函数中使用this之前一定要先调用super()方法，如果次序颠倒程序会抛出异常。
• super指向的是父类的原型对象，所以定义在父类实例上的属性和方法是无法通过super方法调用的

下面我们再来看一个容易出错的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

class A {
  constructor () {
    this.x = 1;
  }
  print () {
    console.log(this.x)
  }
}
class B extends A {
  constructor () {
    super();
    this.x = 2;
  }
  m () {
    super.print();
  }
}
let b = new B();
b.m();    // 2

上面的代码中，super.print()虽然调用的是父类A.prototype.print()，但是A.prototype.print却被添加到子类B的this中，所以代码输出结果是2，所以上述代码相当于执行A.prototype.print.call(this)。同理如果使用super赋值，赋值的属性会变成子类实例的属性，此时的super就是this。
下面我们再来看看super作用在静态方法中的情况，借用《ES6标准入门》中的一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

class Parent {
  static myMethod(msg) {
    console.log('static', msg)
  }
  myMethod(msg) {
    console.log('instance', msg)
  }
}
class Child extends Parent {
  static myMethod(msg) {
    super.myMethod(msg)
  }
  myMethod (msg) {
    super.myMethod(msg);
  }
}
Child.myMethod(1);    // static 1
let child = new Child();
child.myMethod(2);    // instance 2

上面的代码中，super在静态代码中指向父类，在普通方法中指向父类的原型对象。
另外在使用super的时候我们必须显式指定是作为对象还是作为函数使用，因为super无法看出是作为函数使用还是作为对象使用，所以在解析代码时就会报错。

extends关键字

说完了super关键字，我们再来说说extends关键字，extends可以继承任何类型的表达式，只要该表达式最终返回的是一个可继承的函数，也就是说extends可以继承具有prototype属性的函数，由于函数都有prototype属性(除了Function函数)，因此A可以是任意函数。
那么 ES6 extends继承到底做了什么操作？
我们先来看看这段包含静态方法的ES6继承代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// ES6
class Parent{
    constructor(name){
        this.name = name;
    }
    static sayHello(){
        console.log('hello');
    }
    sayName(){
        console.log('my name is ' + this.name);
        return this.name;
    }
}
class Child extends Parent{
    constructor(name, age){
        super(name);
        this.age = age;
    }
    sayAge(){
        console.log('my age is ' + this.age);
        return this.age;
    }
}
let parent = new Parent('Parent');
let child = new Child('Child', 18);
console.log('parent: ', parent); // parent:  Parent {name: "Parent"}
Parent.sayHello(); // hello
parent.sayName(); // my name is Parent
console.log('child: ', child); // child:  Child {name: "Child", age: 18}
Child.sayHello(); // hello
child.sayName(); // my name is Child
child.sayAge(); // my age is 18

这其中包含了两条原型链，我们来看看具体代码

1
2
3
4
5
6
7
8
9
10

// 1、构造器原型链
Child.__proto__ === Parent; // true
Parent.__proto__ === Function.prototype; // true
Function.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true
// 2、实例原型链
child.__proto__ === Child.prototype; // true
Child.prototype.__proto__ === Parent.prototype; // true
Parent.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true

结合以上代码我们可以看出：ES6的extends主要就是

1. 把子类构造函数(Child)的原型(proto)指向了父类构造函数(Parent)
2. 把子类实例child的原型对象(Child.prototype) 的原型(proto)指向了父类parent的原型对象(Parent.prototype)。
3. 子类构造函数Child继承了父类构造函数Preant的里的属性。使用super调用的(ES5则用call或者apply调用传参)。

本文完

相信从事过前端开发的童靴都知道，操作Virtual DOM会比操作原生DOM要快。但是为什么说操作原生DOM慢呢？

为什么操作原生DOM慢？

我们知道执行JS代码有一个JS引擎，执行渲染也有一个渲染引擎。
一方面当我们使用JS去操作DOM时，涉及到两个线程之间的通信，会产生一部分性能的损耗。如果操作DOM的次数过多，那么就相当于这两个线程一直在进行通信。
另一方面当我们操作DOM的时候，很容易就引起重绘和回流操作，对性能会产生很大的影响。

虚拟DOM

相较于直接操作DOM，操作JS对象会快很多。Virtual DOM就是用一个原生JS对象去描述一个DOM节点，当你使用jQuery或者原生api去操作DOM时，浏览器很可能会出现重绘和回流操作。
比如当你在一次操作时，需要更新100个DOM节点，理想情况是DOM节点更新完毕后，浏览器进行一次回流操作，将修改的节点信息渲染出来。
但是浏览器没有那么智能，当它收到第一个更新DOM的请求时，并不知道后来还有99个，因此会马上执行更新操作，这样就会出现100次更新和100次回流。
Virtual DOM就是为了解决类似问题而被设计出来的，虚拟DOM不会立即操作DOM，而是将这100次操作作用在虚拟DOM上，最终通过diff函数生成真实DOM的补丁用来更新真实DOM，通知浏览器去执行绘制工作。
在Vue中，Virtual DOM是用VNode这样的一个类去表示。

VNode对象

一个VNode的实例对象包括以下属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

export interface VNode {
    // 当前节点的标签名  
    tag?: string;
    // 当前节点的数据对象
    data?: VNodeData;
    // 当前节点的子节点
    children?: VNode[];
    // 当前节点的文本，一般注释节点会有该属性
    text?: string;
    // 当前节点对应的真实节点
    elm?: Node;
    // 当前节点的nameSpace
    ns?: string;
    // 当前节点的作用域
    context?: Vue;
    // 节点的key，有利于diff执行效率
    key?: string | number;
    // 创建组件实例时会用到的选项信息
    componentOptions?: VNodeComponentOptions;
    // 组件实例
    componentInstance?: Vue;
    // 组件的父节点
    parent?: VNode;
    raw?: boolean;
    // 静态节点的标识
    isStatic?: boolean;
    // 是否作为根节点插入
    isRootInsert: boolean;
    // 当前节点是否是注释节点
    isComment: boolean;
}

下面我们来简单模拟一段代码

1
2
3

<ul class='list'>
  <li>1</li>
</ul>

以上代码转换成VNode就是

1
2
3
4
5
6
7
8
9
10

const ul = {
  tag: 'ul',
  props: {
    class: 'list'
  },
  children: {
    tag: 'li',
    children: '1'
  }
}

用js对象模拟DOM节点的好处是，页面的更新可以先全部反映在js对象上，操作内存中的js对象的速度显然要快多了。等更新完后，再将最终的js对象映射成真实的DOM，交由浏览器去绘制。
那么具体是怎么实现的呢？我们来看看Vue中createElement方法

createElement解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

const SIMPLE_NORMALIZE = 1
const ALWAYS_NORMALIZE = 2

export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array<VNode> {
    // 兼容没有data的情况
    if (Array.isArray(data) || isPrimitive(data)) {
        normalizationType = children
        children = data
        data = undefined
    }
    // 如果alwaysNormalize是true
    // 那么normalizationType应该设置为常量ALWAYS_NORMALIZE的值
    if (isTrue(alwaysNormalize)) {
        normalizationType = ALWAYS_NORMALIZE
    }
    调用_createElement创建虚拟节点
    return _createElement(context, tag, data, children, normalizationType)
}

export function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode> {
    // 判断是否存在data.__ob__， 如果存在说明data是被监控的数据
    // 不能作为虚拟节点，抛出警告然后返回一个空节点
    
    // data 被监控不能作为虚拟节点的原因：
    // data在vnode渲染过程中可能会被改变，这样会触发监控，导致不符合预期的操作
    if (isDef(data) && isDef((data: any).__ob__)) {
        process.env.NODE_ENV !== 'production' && warn(
            `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
            'Always create fresh vnode data objects in each render!',
            context
        )
        return createEmptyVNode()
    }
    // 当组件的is属性被设置为一个falsy的值
    // Vue将不会知道要把这个组件渲染成什么
    // 所以渲染一个空节点
    if (isDef(data) && isDef(data.is)) {
        tag = data.is
    }
    if (!tag) {
        return createEmptyVNode()
    }
    // 确保节点的key必须为String/Number
    if (process.env.NODE_ENV !== 'production' &&
      isDef(data) && isDef(data.key) && !isPrimitive(data.key)
    ) {
        if (!__WEEX__ || !('@binding' in data.key)) {
            warn(
            'Avoid using non-primitive value as key, ' +
            'use string/number value instead.',
            context
            )
        }
    }
    // 支持使用作用域插槽
    if (Array.isArray(children) &&
        typeof children[0] === 'function'
    ) {
        data = data || {}
        data.scopedSlots = { default: children[0] }
        children.length = 0
    }
    // 根据normalizationType的值，选择不同的处理方法
    if (normalizationType === ALWAYS_NORMALIZE) {
        children = normalizeChildren(children)
    } else if (normalizationType === SIMPLE_NORMALIZE) {
        children = simpleNormalizeChildren(children)
    }
    let vnode, ns
    // 标签名是string时执行下面的方法
    if (typeof tag === 'string') {
        let Ctor
        // 获取标签的命名空间
        ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
        // 判断是否是保留的标签
        if (config.isReservedTag(tag)) {
            // 如果是保留标签,就创建一个这样的vnode
            vnode = new VNode(
            config.parsePlatformTagName(tag), data, children,
            undefined, undefined, context
            )
        // 如果不是保留标签，那么我们将尝试从vm的components上查找是否有这个标签的定义
        } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
            // 如果找到了这个标签的定义，就以此创建虚拟组件节点
            vnode = createComponent(Ctor, data, context, children, tag)
        } else {
            // 正常创建一个VNode
            vnode = new VNode(
            tag, data, children,
            undefined, undefined, context
            )
        }
    // 当标签不是string时就直接创建
    } else {
        // direct component options / constructor
        vnode = createComponent(tag, data, context, children)
    }
    if (Array.isArray(vnode)) {
        // 如果vnode是一个数组就直接返回
        return vnode
    } else if (isDef(vnode)) {
        // 如果有namespace，就应用下namespace，然后返回vnode
        if (isDef(ns)) applyNS(vnode, ns)
        if (isDef(data)) registerDeepBindings(data)
        return vnode
    } else {
        // 否则，返回一个空节点
        return createEmptyVNode()
    }
}

或许看上面的代码有点晕，所以我在网上找了张图可以对照着理解上述代码

patch 实现

关于patch的实现，代码量太大了，所以就不在这儿贴出来了，在这里我简述一下它的比较过程，感兴趣的童靴可以去看看Vue源码，源码位于/src/core/vdom/patch.js
首先patch接收四个参数

• oldVnode：旧的虚拟节点或者当前真实节点
• vnode：新的虚拟节点
• hydrating：是否要和真的dom混合
• removeOnly：特殊flag，用于组件

patch函数的执行过程：

• 如果vnode不存在，但是oldVnode存在，说明需要删除此节点，调用invokeDestroyHook(oldVnode)
• 如果vnode存在但是oldVnode不存在，说明此节点是新加的节点，调用createElm(vnode, insertedVnodeQueue)创建新节点
• 如果vnode和oldVnode都存在的情况，就需要比较节点值了。当两个节点值的比较的时候，就调用patchVnode函数。节点的比较主要分为5种情况：

1. 当它们的引用一致时，可以认为是没有变化，不需要进行操作。

1
2
3

if (oldVnode === vnode) {
      return
}

2. 文本节点的比较，需要修改则调用setTextContent。

1
2
3

if (oldVnode.text !== vnode.text) {
    nodeOps.setTextContent(elm, vnode.text)
}

3. 两个节点都有子节点，而且它们不一样，这是就调用updateChildren进行子节点的比较。

1
2
3

if (isDef(oldCh) && isDef(ch)) {
    if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
} 

4. 只有新的节点有有子节点，调用addVnodes方法。

1
2
3
4
5
6
7

if (isDef(ch)) {
    if (process.env.NODE_ENV !== 'production') {
        checkDuplicateKeys(ch)
    }
    if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
    addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
}

5. 新节点没有子节点，老节点有子节点，直接删掉老节点。

1
2
3

if (isDef(oldCh)) {
    removeVnodes(elm, oldCh, 0, oldCh.length - 1)\
}

1245步执行的操作都比较简单，最重要的还是updateChildred，为了形象的展示updateChildren所进行的操作，我们来看看这样的一张图。

过程可以概括为：oldCh和newCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了，就会结束比较。
在updateChildren中，算法如下：

• 分别获取oldVnode和vnode的firstChild、lastChild，赋值给oldStartVnode、oldEndVnode、newStartVnode、newEndVnode
• 如果oldStartVnode和newStartVnode是同一节点，调用patchVnode进行patch，然后将oldStartVnode和newStartVnode都设置为下一0个子节点，重复上述流程。

• 如果oldEndVnode和newEndVnode是同一节点，调用patchVnode进行patch，然后将oldEndVnode和newEndVnode都设置为上一个子节点，重复上述流程。

• 如果oldStartVnode和newEndVnode是同一节点，调用patchVnode进行patch，如果removeOnly是false，那么可以把oldStartVnode.elm移动到oldEndVnode.elm之后，然后把oldStartVnode设置为下一个节点，newEndVnode设置为上一个节点，重复上述流程。

• 如果newStartVnode和oldEndVnode是同一节点，调用patchVnode进行patch，如果removeOnly是false，那么可以把oldEndVnode.elm移动到oldStartVnode.elm之前，然后把newStartVnode设置为下一个节点，oldEndVnode设置为上一个节点，重复上述流程

• 如果以上都不匹配，就尝试在oldChildren中寻找跟newStartVnode具有相同key的节点，如果找不到相同key的节点，说明newStartVnode是一个新节点，就创建一个，然后把newStartVnode设置为下一个节点

• 如果上一步找到了跟newStartVnode相同key的节点，那么通过其他属性的比较来判断这2个节点是否是同一个节点，如果是，就调用patchVnode进行patch，如果removeOnly是false，就把newStartVnode.elm插入到oldStartVnode.elm之前，把newStartVnode设置为下一个节点，重复上述流程

• 如果在oldChildren中没有寻找到newStartVnode的同一节点，那就创建一个新节点，把newStartVnode设置为下一个节点，重复上述流程
• 如果oldStartVnode跟oldEndVnode重合了，并且newStartVnode跟newEndVnode也重合了，这个循环就结束了。

Vue源码中这一块还是比较复杂的，本文只是抛砖引玉，希望小伙伴们还是能够亲自去看一看。

参考文档：
vue虚拟dom实现
Vue.js 技术揭秘
面试官：你了解vue的diff算法吗?
解析vue2.0的diff算法

什么是BFC

1

Block fomatting context= block-level box+Formatting Context

• block-level box即块级元素

  display属性为block，list-item，table的元素，会生成block-level box;并且参与block fomatting context;

• inline-level box即行内元素

  display属性为inline，inline-block，inline-table的元素，会生成inline-level box。并且参与inline formatting context;

• Formatting Context
  格式化上下文是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系，相互作用。最常见的格式化上下文有块格式化上下文（简称BFC）和内联格式化上下文（简称IFC）。
  CSS2.1中只有BFC和IFC，CSS3中还增加了G（网格）FC和F（flex）FC。

BFC定义

BFC(Block Formatting Context)块级格式化上下文，是用于布局块级盒子的一块渲染区域。MDN上的解释：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。
注意：一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用。

三种文档流的定位方案

常规流(Normal flow)

• 在常规流中，盒一个接着一个排列;
• 在块级格式化上下文里面， 它们竖着排列；
• 在行内格式化上下文里面， 它们横着排列;
• 当position为static或relative，并且float为none时会触发常规流；
• 对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位置；
• 对于相对定位(relative positioning)，position: relative，盒偏移位置由top、bottom、left、right属性定义。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。

浮动(Floats)

• 左浮动元素尽量靠左、靠上，右浮动同理
• 这导致常规流环绕在它的周边，除非设置 clear 属性
• 浮动元素不会影响块级元素的布局
• 但浮动元素会影响行内元素的布局，让其围绕在自己周围，撑大父级元素，从而间接影响块级元素布局
• 最高点不会超过当前行的最高点、它前面的浮动元素的最高点
• 不超过它的包含块，除非元素本身已经比包含块更宽
• 行内元素出现在左浮动元素的右边和右浮动元素的左边，左浮动元素的左边和右浮动元素的右边是不会摆放浮动元素的

绝对定位(Absolute positioning)

• 绝对定位方案，盒从常规流中被移除，不影响常规流的布局；
• 它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；
• 如果元素的属性position为absolute或fixed，它是绝对定位元素；
• 对于position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute，如果没有则相对于body；

BFC触发方式

1. 根元素，即HTML标签
2. 浮动元素：float值为left、right
3. overflow值不为 visible，为 auto、scroll、hidden
4. display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
5. 定位元素：position值为 absolute、fixed
   注意: display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell，是这个匿名的table-cell生成了BFC。

约束规则

浏览器对BFC区域的约束规则：

1. 生成BFC元素的子元素会一个接一个的放置
2. 垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素的外边距会折叠(Mastering margin collapsing)。
3. 生成BFC元素的子元素中，每一个子元素左外边距与包含块的左边界相接触（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。
   规则解读：
4. 内部的Box会在垂直方向上一个接一个的放置
5. 内部的Box垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠。）
6. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
7. BFC的区域不会与float的元素区域重叠
8. 计算BFC的高度时，浮动子元素也参与计算

作用

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。我们可以利用BFC的这个特性来做很多事。

5.1 阻止元素被浮动元素覆盖

一个正常文档流的block元素可能被一个float元素覆盖，挤占正常文档流，因此可以设置一个元素的float、display、position值等方式触发BFC，以阻止被浮动盒子覆盖。

5.2 可以包含浮动元素

通过改变包含浮动子元素的父盒子的属性值，触发BFC，以此来包含子元素的浮动盒子。
注意，这里触发BFC并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。

5.3 阻止因为浏览器因为四舍五入造成的多列布局换行的情况

有时候因为多列布局采用小数点位的width导致因为浏览器因为四舍五入造成的换行的情况，可以在最后一列触发BFC的形式来阻止换行的发生。比如下面栗子的特殊情况

5.4 阻止相邻元素的margin合并

属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，(设置writing-mode:tb-rl时，水平margin会发生重叠)。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。
这里给任一个相邻块级盒子的外面包一个div，通过改变此div的属性使两个原盒子分属于两个不同的BFC，以此来阻止margin重叠。
但是这里有个疑问：
如果外面包一层div，设置能触发BFC的任何属性都能阻止相邻元素的margin合并。因为分属不同BFC不会发生margin合并。
而如果在外面不包一个div的话，当设置display为inline-block、inline-flex、table-captain，和position为absolute、fixed，float为left、right是可以阻止margin合并的。

本文完

观察者模式

我认为大多数人都会同意观察者模式是学起来最好入门的，因为我们从字面意思就能知道它主要是做什么的。
这里我列举2个通俗易懂的例子：

1. 那些年，90后的小时候，我们没有手机。悠闲地上午时光，我们出门各自玩耍，临出门前会跟老妈说一下是否回家吃午饭。总在临近中午之时开始关注一个事情，“午饭好了么，是否该回家吃饭了”。没有手机可咋整？跑回去瞅瞅。老妈说，饭还没开始做呢。
   于是再出去浪一会。老妈说饭马上就好了，洗手准备吃饭。于是咕咕叫的肚子变得欢喜。后来，手机成了必备品，便没了这样的烦恼。中午时分总会接到老妈的电话，语气不甚和善的喊一句：“还吃不吃饭了，麻利回来～”。
   观察者模式也便是如此了。当有一到多用户（粗去玩耍的我们）都在观察一个事情（饭是否已做好）的变化。使用观察者模式（手机），不需要我们时不时的跑回家确认，事情变化发生（饭已做好）时，老妈可便捷的通知所有关注午饭的我们。
   上面问题概述起来，适用观察者模式有几个要素：被观察者（老妈）、观察者（外出的我们）、事件（老妈是否做好饭）和由被观察者维护的观察者列表（老妈知道要回家吃饭的是谁）。
   不知从上述实例，小伙伴是否看出隐藏的几点。
   1.观察者并非一成不变。并不是每天都是所有人回家吃午饭，只有提前告知老妈要回家吃午饭的人才会接到电话。因为观察者的可变性，需要被观察者维护一个列表。
   2.观察者模式可以便捷的完成目标。不需要观察者不停的轮询查看事件变化，也不需要被观察者多次询问观察者意愿。只需要观察者提前加入或离开列表，便可以由被观察者准确的进行事件通知。 说起来，微信订阅号便是观察者模式的一种实现。感兴趣的人订阅公众号，在公众号有新的文章时推送给所有订阅人。
2. 我们假设你正在找一份软件工程师的工作，对“香蕉公司”很感兴趣。所以你联系了他们的HR，给了他你的联系电话。他保证如果有任何职位空缺都会通知你。这里还有几个候选人也你一样很感兴趣。所以职位空缺大家都会知道，如果你回应了他们的通知，他们就会联系你面试。
   所以，以上和“观察者模式”有什么关系呢？这里的“香蕉公司”就是Subject，用来维护Observers（和你一样的候选人），为某些event（比如职位空缺）来通知（notify）观察者。
   观察者模式在软件设计中是一个对象，维护一个依赖列表，当任何状态发生改变自动通知它们。
   
   所以，如果你想在你的软件或者应用中实现观察者模式，你可以遵循上图这个流程。

发布-订阅模式

在观察者模式中的Subject就像一个发布者（Publisher），而观察者（Observer）完全可以看作一个订阅者（Subscriber）。subject通知观察者时，就像一个发布者通知他的订阅者。这也就是为什么很多书和文章使用“发布-订阅”概念来解释观察者设计模式。但是这里还有另外一个流行的模式叫做发布-订阅设计模式。它的概念和观察者模式非常类似。最大的区别是：
在发布-订阅模式，消息的发送方，叫做发布者（publishers），消息不会直接发送给特定的接收者（订阅者）。
意思就是发布者和订阅者不知道对方的存在。需要一个第三方组件，叫做信息中介，它将订阅者和发布者串联起来，它过滤和分配所有输入的消息。换句话说，发布-订阅模式用来处理不同系统组件的信息交流，即使这些组件不知道对方的存在。
那么如何过滤消息的呢？事实上这里有几个过程，最流行的方法是：基于主题以及基于内容。好了，就此打住，如果你感兴趣，可以去维基百科了解。

所以，我用下图表示这两个模式最重要的区别：

我们把这些差异快速总结一下：

• 在观察者模式中，观察者是知道Subject的，Subject一直保持对观察者进行记录。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。
• 在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。
• 观察者模式大多数时候是同步的，比如当事件触发，Subject就会去调用观察者的方法。而发布-订阅模式大多数时候是异步的（使用消息队列）。
• 观察者模式需要在单个应用程序地址空间中实现，而发布-订阅更像交叉应用模式。