ES6
开发环境中如何使用+重点语法掌握
- es6模块化如何使用，开发环境如何打包
- class和哦普通构造函数有何区别
- promise的基本使用和原理
- 总结一下es6其他常用功能
es6模块化如何使用，开发环境如何打包
- 模块化的基本语法
- 开发环境配置
- 关于js众多模块化标准
开发环境---babel
开发环境---webpack
关于js众多模块化标准
模块化总结
class和普通构造函数的区别
- js构造函数
- class基本语法
- 语法糖
-
继承
本质上类型还是function，没有类的概念，只是在模拟类。
继承-JS
class---总结
Promise的基本使用
es6其他常用功能
原型
- 说一个原型的实际应用
-
原型如何体现它的扩展性
实际应用：
1.zepto
2.jquery
3.自己想法扩充：①vue中的非父子组件传递（总线/bus/发布订阅/观察者模式 给vue的原型中添加bus监听。②js中引用对象的原型方法，如数组的slice可以被数组类型使用，是因为原型中有用到。③实现继承
异步
- 什么是单线程，和异步有什么关系
- 什么是event-loop
- 是否用过jquery的deferred
- promise的基本使用和原理
- 介绍async/await（和promise的区别联系）
- 总结当前js解决异步的方案
什么是单线程，和异步有什么关系
- 单线程-只有一个线程，只能做一件事
- 避免dom渲染的冲突
①浏览器需要渲染dom
②js可以修改dom结构（浏览器html渲染页面dom和js操作是同一个线程）
③js执行的时候，浏览器dom渲染会暂停
④两段js也不能同时执行（都修改dom会有冲突）
⑤webworker支持多线程，但是不能访问dom - 解决方案--异步
①问题一：没有按照书写方式执行，可读性差
②callback中不容易模块化
什么是event-loop
- 事件轮询，js实现异步的具体解决方案
- 同步代码，直接执行
- 异步函数先放在异步队列中
- 待同步函数执行完毕，轮询执行异步队列的函数
总结 - 事件轮询，js异步的解决方案
- 什么是异步队列，何时被放入异步队列
- 轮询的过程
jquery的deferred
（promise的前世）
- jquery1.5的变化
- 使用jquery的deferred
- 初步引入promise概念，由deferred演化而来
jquery1.5之前
jquery1.5之后
链式操作
jquery1.5的变化
- 无法改变js异步和单线程的本质
- 只能从写法上杜绝callback这种形式
- 是一种语法糖形式，但是解耦了代码
-
很好的体现：开放封闭原则（设计模式）
修改后
还有w.done() w.fail()
使用dtd.promise()
总结
promise的基本使用和原理
- 基本语法
- 异常捕获
- 多个串联
- promise.all/promise.race
- promise标准
通过.catch统一捕获所有的异常(error和reject)，这样就不用在.then里再写入第二个函数捕获错误。让代码更加规范
多个串联
如果按照传统方式，浏览器会并行加载图片，不分先后顺序。
promise.all/promise.race
**关于“标准”的闲谈
promise标准
状态变化：
①三种状态：pending fulfilled rejected
②初始状态是pending
③状态不可逆
④只能pending---->fulfilled或者pending---->rejected
then：
①promise实例必须实现then方法
②then()必须可以接收两个函数作为参数
③then()返回的必须是一个promise实例
总结
介绍一下async/await（es7体验中，结合promise使用，替代then写法）
- then只是将callback拆分了（本质还是callback）
- async/await是最直接的同步写法
- 语法
①使用await，函数必须用async标识
②await后面跟的是一个promise实例
③需要babel-polyfill（兼容）
修改后
如果按照传统写法，则图片是并行加载，不会按照顺序加载图片。
同步写法，和then效果一致，如果函数中要用await，函数名前必须加上async。result接收resolve传入的参数。
总结
generrator不是为了解决异步而提出的，虽然也可以解决异步。既然解决异步有更简便的方案（promise+async/await）就不用太深入去了解generator（太复杂）
MVVM和Vue
- 如何理解MVVM
- 如何实现MVVM
- 是否解读过vue的源码
题目 - 说一下使用jquery和使用框架的区别
- 说一下对mvvm的理解
- vue的响应式原理
- vue的模板解析
- vue的整个实现流程
说一下使用jquery和使用框架的区别
- jquery实现todo-list
- vue实现todo-list
- jquery和vue区别
两者区别 - 数据和试图的分离（解耦，开放封闭原则，很重要这个原则！！）
-
以数据驱动试图
扩展开放，修改封闭
（开放封闭原则--设计模式）
学习去分析过程，怎么考虑，怎么对应到具体代码中！
jquery数据和视图结合，操作了dom，设置数据，而并不是修改数据，让视图自动更新
而vue将数据和视图分离了，且做到了data对象中数据更新，视图自动更新，无需操作dom
MVC
MVVM
- mvvm不算是一种创新
- 但其中的viewmodel确实是一种创新
- 真正结合前端场景应用的创建（借鉴后端的mvc）
mvvm框架（也就是vue）的三大要素
- 再次分析demo
-
三要素总结
①响应式：vue如何监听到data的每个属性变化？
②模板引擎：vue的模板如何被解析，指令如何处理？
③：vue的模板如何被渲染成html？以及渲染过程
vue中如何实现响应式
- 什么是响应式
①修改data属性后，vue立刻监听到，渲染页面
②data属性被代理到vm上 - Object.defineProperty
-
模拟
代理到vm的实现
vue中如何解析模板
模板是什么
①本质：字符串
②有逻辑，如v-if，v-for等
③与html格式很像，但是有很大区别
④最终还要转换为html来显示
⑤模板最终必须转换为js代码，因为：
有逻辑（v-for v-if 必须用js才能实现）
转换为html渲染页面，必须用js才能实现
因此，模板最终要转换为一个js函数（render函数）render函数
-
render函数与vdom
render函数---with用法
模板中所有信息都包含在了render函数中
this即vm
price即this.price即vm.price,即data中的price
-
_c即this._c即vm._c
不用太关心模板怎么生成对应的js（因为vue2.0已经有具体的工具自动生成，平时写的模板html标签，都会自动转换为js，工具化细节不用深究），只要清楚生成的js与模板的对应关系就行，主要目的是理解设计理念。
那么模板如何生成html来渲染页面呢？
-
vm._c是什么？render函数返回了什么？
vdom里的snabbdom---h函数
render函数与h函数，返回的都是vnode
render函数和vdom
新旧vnode对比，prevnode保存上次的，vnode传入最新的。
第一次执行时，没有旧的vnode，直接将vnode加入到el容器中。
后面再执行时，就进行新旧对比。（就是之前vdom的用法）
总结 模板： 字符串，有逻辑，嵌入js变量
模板必须转换为js代码（有逻辑，需然然html，js变量）
render函数是什么样的
render函数执行返回vnode
updateCoponent
vue的三大要素总结
第一步：解析模板生成render函数
- with的用法
- 模板中的所有信息都被render函数包含
- 模板中用到的data中的属性，都变成了js变量
- 模板中的v-model v-for v-on都变成了js逻辑
- render函数返回vnode
第二步：响应式开始监听 - Object.defineProperty
- 将data的属性代理到vm上（这样render函数中的js逻辑与js变量才能获取到）
第三步：首次渲染，显示页面，且绑定依赖 - 初次渲染，执行updateComponent,执行vm._render()
- 执行render函数，会访问到vm.list和vm.title
- 会被响应式的get方法监听到
- 执行updateComponent，会走到vdom的patch方法
*patch将vnode渲染成dom，初次渲染完成 - 为何要监听get？直接监听set不行吗？
①data中有很多属性，有些被用到，有些可能不被用到
②被用到的会走get，不被用到的不会走get
③没有走到get中的属性，set的时候也不需要关心
④避免不必要的重复渲染
第四步：data属性变化 - 修改属性，被响应式的set监听到
- set中执行updateComponent
- updateComponent重新执行vm._render()
- 生成的vnode和
preVnode，通过patch进行对比 -
渲染到html中
