共计 3257 个字符，预计需要花费 9 分钟才能阅读完成。
1、原型 – jquery 使用
注释 : 实例虽然不同，但是构造函数是同一个。
jquery 源码中，原型的使用：
为什么要把原型方法放在 $.fn 上？
好处:
只有 $ 会暴露在 window 全局变量
将插件扩展统一到 $.fn.xxx 这一个接口，方便使用
2、原型 – Zepto – 1 使用
3、什么是单线程，和异步的关系：
单线程 – 只有一个线程，只做一件事
原因 – 避免 DOM 渲染的冲突
解决方案 – 异步
4、js 单线程的原因
原因 – 避免 DOM 渲染冲突
浏览器需要渲染 DOM
js 可以修改 DOM 结构
js 执行的时候，浏览器 DOM 渲染会暂停
两段 js 也不能同时执行(都修改 DOM 就冲突了)
webworker 支持多线程，但是不能访问 DOM
解决方案 – 异步
比如：
单线程 – 总结
| 问题解答：单线程就是同时间只能做一件事，两段 js 不能同时执行 | |
| 原因就是为了避免 DOM 渲染的冲突 | |
| 异步是一种“无奈”的解决方案，虽然有很多问题 | |
| 解决方案 - 异步 | |
| 问题 1：没按照书写顺序执行，可读性差 | |
| 问题 2：callback 中不容易模块化 |
5、event -loop 事件轮询
什么是 event-loop：
事件轮询，js 实现异步的具体解决方案
同步代码，直接执行
异步函数先放在异步队列中
待同步函数执行完毕，轮询执行异步队列的函数
实例分析 1：
实例分析 2：
注释：javascript 引擎，轮询机制会一直监视异步队列，当异步队列中有函数时，会拿到主线程中执行，然后再回来继续监视异步队列，当异步队列有函数时，再拿到主线程中执行，然后回来继续监视异步队列 ….
6、jqueryy-deferred- 介绍
jquery 1.5 的变化：
无法改变 js 异步和单线程的本质
只能从写法上杜绝 callback 这种形式
它是一种语法糖形式，但是解耦了代码
开放封闭原则 (对扩展开放，对修改封闭) 的很好体现
7、jquery – defered – 应用 -1
改造后：
使用 dtd.promise
8、promise – 语法回顾
9、promise – 串联
10、promise-all-race
Promise.all()方法：最终 promise 的状态有 result1、result2 决定，分成两种情况：
1. 只有 result1、result2 的状态都变成 fullfilled，promise 的状态才会变成 fullfilled，此时 result1、result2 的返回值组成一个数组，传递给 promise 的回调函数
2. 只要 result1、result2 之中有一个被 rejected，promise 的状态就会变成 rejected，此时第一个被 reject 的实例的返回值，会传递给 promise 的回调函数
Promise.race()方法：
只要 result1、result2 中有一个实例率先改变状态，promise 的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就会传递给 promise 的回调函数。
11、async-await
then 只是将 callback 拆分了
async/await 是最直接的同步写法
Generator 函数，依次读取两个文件：
改写成 async 函数，如下
一比较就会发现，async 函数就是将 Generator 函数的星号 (*) 替换成 async，将 yield 替换成 await，仅此而已。
async 函数对 Generator 函数的改进，体现在以下四点：
1. 内置执行器。
2. 更好的语义。
3. 更广的适用性。
4. 返回值是 Promise。
进一步说，async 函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而 await 命令就是内部 then 命令的语法糖。
12、什么是 vdom
virtual dom, 虚拟 DOM
用 js 模拟 DOM 结构
DOM 变化的对比，放在 js 层来做(图灵完备语言: 能实现高复杂逻辑的语言)，提高效率
提高重绘性能
用 js 来模拟 dom
vdom – 总结
DOM 操作是“昂贵”的，js 运行效率高
尽量减少 DOM 操作，而不是“推倒重来”
项目越复杂，影响就越严重
vdom 即可解决这个问题
13、使用 vdom-snabbdom-1
介绍 snabbdom：
介绍 snabbdom – h 函数：
介绍 snabbdom – patch 函数
14、使用 vdom -snabbdom 示例
15、使用 vdom – 总结
16、Diff 算法 – vdom 为何要使用 Diff
DOM 操作是“昂贵”的，因此尽量减少 DOM
找出本次 DOM 必须跟新的节点来更新，其他的不更新
这个“找出”的过程，就需要 diff 算法
17、Diff 算法 – 实现 -1
18、Diff 算法 – 总结
知道什么是 diff 算法，是 linux 的基础命令
vdom 中应用 diff 算法是为了找出需要更新的节点
diff 实现，patch(container,vnode) patch(vnode,newVnode)
核心逻辑，createElement 和 updateChildren
19、从 jQuery 到框架 – 总结
数据和视图的分离，解耦 (开放封闭原则：对扩展开放，对修改封闭)
以数据驱动视图，只关心数据变化，DOM 操作给封装
20、如何理解 MVVM -MVC
MVC：
21、如何理解 MVVM -MVVM
Model - 模型、数据
View – 视图、模板(视图和模板是分离的)
ViewModel – 连接 Model 和 View 的桥梁
图解：
注释：View 通过事件绑定来操作 Model，Model 通过数据绑定来操作 View
关于 ViewModel：
MVVM 不算是一种创新
但其中的 ViewModel 却是一种创新
真正结合前端场景应用的创建
22、Vue 三要素 (MVVM 框架的三大要素)
响应式：vue 如何监听到 data 的每个属性变化？
模板引擎：vue 的模板如何被解析，指令如何处理？
渲染：vue 的模板如何被渲染成 html？以及渲染过程
23、响应式 - 介绍：修改 data 属性之后，vue 立刻监听到。实现的核心函数：Object.defineProperty (vue2.0)
重写 get 和 set 函数。
响应式 – 模拟:
24、模板解析 – 模板是什么
本质：字符串
有逻辑，如 v -if,v-for 等
与 html 格式很像，但有很大区别
最终还要转换为 html 来显示
模板最终必须转换成 js 代码，因为：
模板有逻辑，必须用 js 才能实现 (图灵完备语言)
转换为 html 渲染页面，必须用 js 才能实现
因此，模板最终要转换成一个 js 函数(render 函数)
25、render 函数 – with 的用法
26、render 函数 – 讲解
render 函数：
模板中所有信息都包含在了 render 函数中
this 即 vm
price 即 this.price 即 vm.price, 即 data 中的 price
_c 即 this._c 即 vm._c
如下图：
27、如何在源码中查找生成的 render 函数：
1. 先写一个简单的 vue-demo 示例：
2. 在未压缩的源码中搜索“code.render”。
3. 打印出来。
此时，模板已经变成了 render 函数了。
render 函数和 vdom
vm._c 其实就相当于 snabbdom 中的 h 函数。
render 函数执行之后，返回的是 vnode。
渲染页面：updateComponent
updateComponent 中 实现了 vdom 的 patch
页面首次渲染执行 updateComponent
data 中每次修改属性，执行 updateComponent
28、vue 的整个实现流程：
第一步：解析模板成 render 函数
第二步：响应式开始监听
第三步：首次渲染，显示页面，且绑定依赖
第四步：data 属性变化，触发 rerender
第一步：
第二步：
第三步：
什么要监听 get，直接监听 set 不行吗:
data 中有很多属性，有些被用到，有些可能不被用到。被用到的会走到 get，不被用到的不会走到 get。未走到 get 中的属性，set 的时候我们也无需关心。避免不必要的重复渲染
第四步：
附加：
vuex 的工作原理：
其本质就是讲我们传入的 state 作为一个隐藏的 vue 组件的 data，也就是说：我们的 commit 操作，本质上其实就是修改这个组件的 data 的值。vuex 中的 store 本质就是没有 template 的隐藏的 vue 组件。
