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中

高级js进阶

ES6