1.ES6语法
语法:import export(注意有无default)
环境:babel编译ES6语法,模块化可用webpack和rollup
扩展:阐述自己对模块化标准的统一的期待(AMD,CMD标准)
2.class和普通构造函数的区别
class在语法上更加贴合面向对象的写法
class实现继承更加易读,易理解,也更易于写java等后端语言的人使用
class本质上还是语法糖,使用prototype检验
语法糖:typeof + classname (function) 和JS中的构造函数一致,无类的概念
显式原型:classname.prototype.constructor === classname //true
隐式原型:(classname的实例).__proto__ === classname.prototype //true
3.promise步骤
new promise实例
new promise时要传入函数参数,有resolve和reject两个参数
成功时执行resolve() ,失败时执行reject()
用then监听结果,catch执行出错时的操作
4.ES6其他常用的功能
let/const let可以被重新赋值,const定义常量,不能重新赋值
多行字符串/模板变量 用反引号及$符号 例如
var item = 'zhangsan'
var message = `我叫${item}`
console.log(message) //我叫zhangsan
箭头函数 (改变了this指向window) ()=> {}
函数默认参数
//无默认参数
function a(age,name){
if(!age){
age=6
}
}
//有默认参数
function a(age = 6,name){
}
块级作用域 (for循环 来看for里的变量能否被外部变量访问到)
for(var i = 0;i < n; i ++){
//
}
console.log(i) //能访问到
for(let i = 0;i < n; i ++){
//
}
console.log(i) //不能访问到
解构赋值 拆解对象的值
var arr={a:5,b:6}
var {a,b}=arr //a=5,b=6
//用扩展符
var arr = [5,6,7,8,9]
console.log(...arr) //5,6,7,8,9
5.单线程与异步的关系
单线程:同一时间只能做一件事情(为了避免DOM的渲染的冲突),两段JS不能同时执行
解决方案:异步
实现方式:event-loop(js实现异步的具体解决方案)
event-loop:同步代码直接执行,异步函数先放在异步队列中,待同步函数执行完成后,轮循执行异步队列的函数
console.log(111)
setTimeout(function(){
conosole.log(222)
})
setTimeout(function(){
conosole.log(444)
},300)
console.log(333)
/*
先执行同步代码:(异步代码加入异步队列中)
打印出111 333
然后轮循执行异步队列中代码:
打印出222 444
*/
6.jQuery1.5 Deferred
由Deferred演化成Promise对象,使用开放封闭原则(扩展开放,修改封闭)
Deferred有resolve(),reject(),then(),done(),fail()方法
Promise只有then(),catch()
7.Promise
捕获异常:err和reject两者都要考虑
多个串联:链式执行(第一个执行完后需要返回Promise对象)
Promise.all 接收一个promise对象的数组
Promise.race 接收一个包含多个promise对象的数组,数组中有一个加载完成了就会执行
状态变化:初始状态 pending -> 成功:fulfilled 或者 失败rejected
只能是:pending ->fulfilled 或者 pending -> rejected 状态不可逆
Promise实例必须实现then方法
8.async/await
使用了promise,并没有和promise冲突,完全是同步的写法,没有回调函数,但改变不了JS单线程、异步的本质
function loadImg(src){
const promise = new Promise(function(resolve, reject) {
var img = document.createElement('img')
img.onload = function(){
resolve(img)
}
img.onerr = function(){
reject()
}
img.src = src
})
return promise
}
const load = async function(){
const result1 = await loadImg(src1)
conosole.log(result1)
const result2 = await loadImg(src2)
console.log(result2)
}
load()
9.当前异步解决方案
Promise
async/await
jQuery Deferred
10.virtual dom
用JS模拟DOM结构,DOM变化的对比放在JS层做,以提高重绘的性能
DOM操作昂贵,JS运行效率高,要减少DOM操作
使用:snabbdom的使用
核心API:h函数 h('标签名',{属性},[子元素]) 或者 h('标签名',{属性},'')
patch(container,vnode) 或者 patch(vnode,newvnode)
var container = document.getElementById('container')
var vnode = h('div#container.two.classes',{on:{click:someFn}},[h('span',{style:{fontSize:'20px'}},'this is block')])
patch(container, vnode)
var newvnode = h('div#container.two.classes',{on:{click:handleFn}},[h('span',{style:{fontSize:'30px'}},'this is text')])
patch(vnode, newvnode)
11.MVVM中JQuery和框架Vue的区别
视图与数据的分离,解耦(开放封闭原则)
以数据驱动视图,只关心数据,DOM操作被封装
12.MVVM的理解
MVC:model view controller
(数据模型 -> 视图 ->控制器 ->数据模型)
或者(控制器 -> 数据模型->视图)
MVVM:model view viewmodel(视图与数据之间的桥:事件绑定,数据绑定)
13.Vue三要素
响应式:修改data属性后,Vue立刻监听到
响应式核心:用Object.defineProperty,将data的属性代理到vm上
var obj = {}
var name = 'zhangsan'
Object.defineProperty(obj, "name", {
get:function() {
return name
},
set: function(newValue) {
name = newValue
}
})
模板引擎:
本质:字符串;有逻辑,v-if,v-for等,可以嵌入JS变量,必须用JS才能实现,转换成html渲染页面,模板最终转换成JS函数(render函数:with方法)
var obj = {
name: 'zhangsan',
age:20,
getAddress: function() {
console.log(111)
}
}
function fn(){
alert(obj.name)
alert(obj.age)
alert(obj.getAddress)
}
fn()
var obj = {
name: 'zhangsan',
age: 20,
getAddress: function() {
console.log(111)
}
}
function fn() {
with(obj) {
alert(name)
alert(age)
alert(getAddress)
}
}
fn()
渲染
14.Vue的流程
解析模板成render函数:
with的使用,模板中所有信息都被render函数包含
模板中用到的data中的属性,都变成JS变量,模板中的v-model,v-for,v-on都变成JS逻辑,render函数返回vnode
响应式开始监听:
Object.defineProperty将data的属性代理到VM上 ,使用get监听是为了防止重复渲染
首次渲染,显示页面,且绑定依赖
data属性变化,触发re-render