前端知识点总结（自参）

BFC

块级格式化上下文。BFC元素不会影响到其它环境中的布局。

触发BFC的条件

• 根元素或其它包含它的元素
• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 具有overflow 且值不是 visible 的块元素
• 弹性盒（flex或inline-flex）
• display: flow-root
• column-span: all

BFC元素特性

• 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）
• 处于同一个BFC中的元素相互影响，可能会发生外边距重叠
• 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存- 在浮动也是如此
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
• 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算
• 浮动盒区域不叠加到BFC上

BFC解决的问题

• 垂直外边距重叠问题
• 去除浮动（BFC元素会计算内部浮动子元素高度）
• 自适用两列布局（float + overflow）

盒模型

W3C盒模型

元素大小=margin+border+padding+width(内容)

IE盒模型

元素大小=margin+width(border+padding+内容·)

闭包

闭包就是能够读取其他函数内部变量的函数。

作用域链

由多个执行上下文的变量对象构成的链表就叫做作用域链。

Event Loop

Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制。JS中有两种任务类型：微任务（microtask）和宏任务（macrotask）（在ES6中，microtask称为 jobs，macrotask称为 task）。js主线程在运行时会产生执行栈，先运行script宏任务，遇到微任务或宏任务就先添加进任务队列，等script宏任务执行完毕会去检查任务队列有没有微任务。有则执行完全部的微任务再执行下一个宏任务，如果没有微任务则继续执行下一个宏任务，这样循环直到任务队列清空。

MVVM

MVVM是一种项目架构模式。分成三个部分，Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据