# 高级篇

# 一、JavaScript进阶

# 1 内置类型

• JS 中分为七种内置类型，七种内置类型又分为两大类型：基本类型和对象（Object）。
• 基本类型有六种：null，undefined，boolean，number，string，symbol。
• 其中JS 的数字类型是浮点类型的，没有整型。并且浮点类型基于IEEE 754标准实现，在使用中会遇到某些 Bug。NaN 也属于number 类型，并且NaN 不等于自身。
• 对于基本类型来说，如果使用字面量的方式，那么这个变量只是个字面量，只有在必要的时候才会转换为对应的类型。

let a=111// 这只是字面量，不是 number 类型a.toString()// 使用时候才会转换为对象类型

对象（Object）是引用类型，在使用过程中会遇到浅拷贝和深拷贝的问题。

let a={ name:'FE'}let b= ab.name='EF'console.log(a.name)// EF

# 2 Typeof

typeof 对于基本类型，除了null 都可以显示正确的类型

typeof1// 'number'typeof'1'// 'string'typeofundefined// 'undefined'typeoftrue// 'boolean'typeofSymbol()// 'symbol'typeof b// b 没有声明，但是还会显示 undefined

typeof 对于对象，除了函数都会显示object

typeof[]// 'object'typeof{}// 'object'typeof console.log// 'function'

对于null来说，虽然它是基本类型，但是会显示object，这是一个存在很久了的Bug

typeof null // 'object'

PS：为什么会出现这种情况呢？因为在JS的最初版本中，使用的是32 位系统，为了性能考虑使用低位存储了变量的类型信息，000 开头代表是对象，然而null表示为全零，所以将它错误的判断为object 。虽然现在的内部类型判断代码已经改变了，但是对于这个Bug却是一直流传下来。

• 如果我们想获得一个变量的正确类型，可以通过Object.prototype.toString.call(xx)。这样我们就可以获得类似[object Type] 的字符串

let a// 我们也可以这样判断 undefineda===undefined// 但是 undefined 不是保留字，能够在低版本浏览器被赋值letundefined=1// 这样判断就会出错// 所以可以用下面的方式来判断，并且代码量更少// 因为 void 后面随便跟上一个组成表达式// 返回就是 undefineda===void0

# 3 类型转换

转Boolean

在条件判断时，除了undefined，null，false，NaN，''，0，-0，其他所有值都转为true，包括所有对象

对象转基本类型

对象在转换基本类型时，首先会调用valueOf 然后调用toString。并且这两个方法你是可以重写的

let a={valueOf(){    	return0}}

四则运算符

只有当加法运算时，其中一方是字符串类型，就会把另一个也转为字符串类型。其他运算只要其中一方是数字，那么另一方就转为数字。并且加法运算会触发三种类型转换：将值转换为原始值，转换为数字，转换为字符串

1+'1'// '11'2*'2'// 4[1,2]+[2,1]// '1,22,1'// [1, 2].toString() -> '1,2'// [2, 1].toString() -> '2,1'// '1,2' + '2,1' = '1,22,1'

对于加号需要注意这个表达式'a' + + 'b'

'a'++'b'// -> "aNaN"// 因为 + 'b' -> NaN// 你也许在一些代码中看到过 + '1' -> 1

== 操作符

这里来解析一道题目[] == ![] // -> true ，下面是这个表达式为何为true 的步骤

// [] 转成 true，然后取反变成 false[]==false// 根据第 8 条得出[]==ToNumber(false)[]==0// 根据第 10 条得出ToPrimitive([])==0// [].toString() -> ''''==0// 根据第 6 条得出0==0// -> true

比较运算符

• 如果是对象，就通过toPrimitive 转换对象
• 如果是字符串，就通过unicode 字符索引来比较

# 4 原型

• 每个函数都有prototype 属性，除了Function.prototype.bind()，该属性指向原型。
• 每个对象都有__proto__属性，指向了创建该对象的构造函数的原型。其实这个属性指向了[[prototype]]，但是[[prototype]] 是内部属性，我们并不能访问到，所以使用_proto_ 来访问。
• 对象可以通过__proto__ 来寻找不属于该对象的属性，__proto__ 将对象连接起来组成了原型链

# 5 new

• 新生成了一个对象
• 链接到原型
• 绑定this
• 返回新对象

在调用 new 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 new

functioncreate(){// 创建一个空的对象let obj=newObject()// 获得构造函数let Con=[].shift.call(arguments)// 链接到原型    obj.__proto__=Con.prototype// 绑定 this，执行构造函数let result=Con.apply(obj, arguments)// 确保 new 出来的是个对象returntypeof result==='object'? result: obj}

# 6 instanceof

instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的prototype

我们也可以试着实现一下instanceof

functioninstanceof(left, right){// 获得类型的原型let prototype= right.prototype// 获得对象的原型    left= left.__proto__// 判断对象的类型是否等于类型的原型while(true){    	if(left===null)    		returnfalse    	if(prototype=== left)    		returntrue    	left= left.__proto__}}

# 7 this

functionfoo(){	console.log(this.a)}var a=1foo()var obj={	a:2,	foo: foo}obj.foo()// 以上两者情况 `this` 只依赖于调用函数前的对象，优先级是第二个情况大于第一个情况// 以下情况是优先级最高的，`this` 只会绑定在 `c` 上，不会被任何方式修改 `this` 指向var c=newfoo()c.a=3console.log(c.a)// 还有种就是利用 call，apply，bind 改变 this，这个优先级仅次于 new

看看箭头函数中的this

functiona(){return()=>{return()=>{        	console.log(this)}}}console.log(a()()())

箭头函数其实是没有this 的，这个函数中的this 只取决于他外面的第一个不是箭头函数的函数的this。在这个例子中，因为调用a 符合前面代码中的第一个情况，所以this 是window。并且 this 一旦绑定了上下文，就不会被任何代码改变

# 8 执行上下文

当执行 JS 代码时，会产生三种执行上下文

• 全局执行上下文
• 函数执行上下文
• eval 执行上下文

每个执行上下文中都有三个重要的属性

• 变量对象（VO），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问
• 作用域链（JS 采用词法作用域，也就是说变量的作用域是在定义时就决定了）
• this

var a=10functionfoo(i){var b=20}foo()

对于上述代码，执行栈中有两个上下文：全局上下文和函数 foo 上下文。

stack=[    globalContext,    fooContext]

对于全局上下文来说，VO大概是这样的

globalContext.VO=== globeglobalContext.VO={    a:undefined,	foo:<Function>,}

对于函数foo 来说，VO 不能访问，只能访问到活动对象（AO）

fooContext.VO=== foo.AOfooContext.AO{    i:undefined,	b:undefined,    arguments:<>}// arguments 是函数独有的对象(箭头函数没有)// 该对象是一个伪数组，有 `length` 属性且可以通过下标访问元素// 该对象中的 `callee` 属性代表函数本身// `caller` 属性代表函数的调用者

对于作用域链，可以把它理解成包含自身变量对象和上级变量对象的列表，通过[[Scope]]属性查找上级变量

fooContext.[[Scope]]=[    globalContext.VO]fooContext.Scope= fooContext.[[Scope]]+ fooContext.VOfooContext.Scope=[    fooContext.VO,    globalContext.VO]

接下来让我们看一个老生常谈的例子，var

b()// call bconsole.log(a)// undefinedvar a='Hello world'functionb(){	console.log('call b')}

想必以上的输出大家肯定都已经明白了，这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行上下文时，会有两个阶段。第一个阶段是创建的阶段（具体步骤是创建VO），JS 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为undefined，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用。

• 在提升的过程中，相同的函数会覆盖上一个函数，并且函数优先于变量提升

b()// call b secondfunctionb(){	console.log('call b fist')}functionb(){	console.log('call b second')}var b='Hello world'

var会产生很多错误，所以在ES6中引入了let。let不能在声明前使用，但是这并不是常说的let 不会提升，let 提升了声明但没有赋值，因为临时死区导致了并不能在声明前使用。

• 对于非匿名的立即执行函数需要注意以下一点

var foo=1(functionfoo(){    foo=10    console.log(foo)}())// -> ƒ foo() { foo = 10 ; console.log(foo) }

因为当JS 解释器在遇到非匿名的立即执行函数时，会创建一个辅助的特定对象，然后将函数名称作为这个对象的属性，因此函数内部才可以访问到foo，但是这个值又是只读的，所以对它的赋值并不生效，所以打印的结果还是这个函数，并且外部的值也没有发生更改。

specialObject={};Scope= specialObject+ Scope;foo=newFunctionExpression;foo.[[Scope]]= Scope;specialObject.foo= foo;// {DontDelete}, {ReadOnly}delete Scope[0];// remove specialObject from the front of scope chain

# 9 闭包

闭包的定义很简单：函数 A 返回了一个函数 B，并且函数 B 中使用了函数 A 的变量，函数 B 就被称为闭包。

functionA(){let a=1functionB(){      console.log(a)}returnB}

你是否会疑惑，为什么函数A已经弹出调用栈了，为什么函数B 还能引用到函数A中的变量。因为函数A 中的变量这时候是存储在堆上的。现在的JS引擎可以通过逃逸分析辨别出哪些变量需要存储在堆上，哪些需要存储在栈上。

经典面试题，循环中使用闭包解决 var 定义函数的问题

for(var i=1; i<=5; i++){	setTimeout(functiontimer(){		console.log( i);	}, i*1000);}

• 首先因为setTimeout 是个异步函数，所有会先把循环全部执行完毕，这时候i 就是6 了，所以会输出一堆6。
• 解决办法两种，第一种使用闭包

for(var i=1; i<=5; i++){(function(j){setTimeout(functiontimer(){      console.log(j);}, j*1000);})(i);}

• 第二种就是使用setTimeout 的第三个参数

for(var i=1; i<=5; i++){	setTimeout(functiontimer(j){		console.log( j);	}, i*1000, i);}

第三种就是使用let 定义i 了

for(let i=1; i<=5; i++){	setTimeout(functiontimer(){		console.log( i);	}, i*1000);}

因为对于let 来说，他会创建一个块级作用域，相当于

{// 形成块级作用域let i=0{let ii= isetTimeout(functiontimer(){        console.log( i);}, i*1000);}  i++{let ii= i}  i++{let ii= i}...}

# 10 深浅拷贝

letet a a={    age:1}let b= aa.age=2console.log(b.age)// 2

• 从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。
• 通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题

浅拷贝

首先可以通过Object.assign 来解决这个问题

let a={    age:1}let b= Object.assign({}, a)a.age=2console.log(b.age)// 1

当然我们也可以通过展开运算符（…）来解决

let a={    age:1}let b={...a}a.age=2console.log(b.age)// 1

通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就需要使用到深拷贝了

let a={    age:1,    jobs:{        first:'FE'}}let b={...a}a.jobs.first='native'console.log(b.jobs.first)// native

浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到刚开始的话题了，两者享有相同的引用。要解决这个问题，我们需要引入深拷

深拷贝

这个问题通常可以通过JSON.parse(JSON.stringify(object)) 来解决

let a={    age:1,    jobs:{        first:'FE'}}let b=JSON.parse(JSON.stringify(a))a.jobs.first='native'console.log(b.jobs.first)// FE

但是该方法也是有局限性的：

• 会忽略undefined
• 不能序列化函数
• 不能解决循环引用的对象

let obj={  a:1,  b:{    c:2,    d:3,},}obj.c= obj.bobj.e= obj.aobj.b.c= obj.cobj.b.d= obj.bobj.b.e= obj.b.clet newObj=JSON.parse(JSON.stringify(obj))console.log(newObj)

如果你有这么一个循环引用对象，你会发现你不能通过该方法深拷贝

• 在遇到函数或者undefined 的时候，该对象也不能正常的序列化

let a={    age:undefined,jobs:function(){},    name:'poetries'}let b=JSON.parse(JSON.stringify(a))console.log(b)// {name: "poetries"}

• 你会发现在上述情况中，该方法会忽略掉函数和`undefined。
• 但是在通常情况下，复杂数据都是可以序列化的，所以这个函数可以解决大部分问题，并且该函数是内置函数中处理深拷贝性能最快的。当然如果你的数据中含有以上三种情况下，可以使用lodash 的深拷贝函数。

# 11 模块化

在有Babel 的情况下，我们可以直接使用ES6的模块化

// file a.jsexportfunctiona(){}exportfunctionb(){}// file b.jsexportdefaultfunction(){}import{a, b}from'./a.js'importXXXfrom'./b.js'

CommonJS

CommonJs 是Node 独有的规范，浏览器中使用就需要用到Browserify解析了。

// a.jsmodule.exports={    a:1}// orexports.a=1// b.jsvar module=require('./a.js')module.a// -> log 1

在上述代码中，module.exports 和exports 很容易混淆，让我们来看看大致内部实现

var module=require('./a.js')module.a// 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，// 重要的是 module 这里，module 是 Node 独有的一个变量module.exports={    a:1}// 基本实现var module={  exports:{}// exports 就是个空对象}// 这个是为什么 exports 和 module.exports 用法相似的原因var exports= module.exportsvarload=function(module){// 导出的东西var a=1    module.exports= areturn module.exports};

再来说说module.exports 和exports，用法其实是相似的，但是不能对exports 直接赋值，不会有任何效果。

对于CommonJS 和ES6 中的模块化的两者区别是：

• 前者支持动态导入，也就是require(${path}/xx.js)，后者目前不支持，但是已有提案,前者是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。
• 而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响
• 前者在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。
• 但是后者采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化
• 后者会编译成require/exports 来执行的

AMD

AMD 是由RequireJS 提出的

// AMDdefine(['./a','./b'],function(a, b){    a.do()    b.do()})define(function(require, exports, module){var a=require('./a')    a.doSomething()var b=require('./b')    b.doSomething()})

# 12 防抖

你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。

• 这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作
• PS：防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数

// 这个是用来获取当前时间戳的functionnow(){return+newDate()}functiondebounce(func, wait=50, immediate=true){let timer, context, args// 延迟执行函数constlater=()=>setTimeout(()=>{// 延迟函数执行完毕，清空缓存的定时器序号    timer=null// 延迟执行的情况下，函数会在延迟函数中执行// 使用到之前缓存的参数和上下文if(!immediate){func.apply(context, args)      context= args=null}}, wait)// 这里返回的函数是每次实际调用的函数returnfunction(...params){// 如果没有创建延迟执行函数（later），就创建一个if(!timer){      timer=later()// 如果是立即执行，调用函数// 否则缓存参数和调用上下文if(immediate){func.apply(this, params)}else{        context=this        args= params}// 如果已有延迟执行函数（later），调用的时候清除原来的并重新设定一个// 这样做延迟函数会重新计时}else{clearTimeout(timer)      timer=later()}}}

• 对于按钮防点击来说的实现：如果函数是立即执行的，就立即调用，如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行。一旦我开始一个定时器，只要我定时器还在，你每次点击我都重新计时。一旦你点累了，定时器时间到，定时器重置为null，就可以再次点击了。
• 对于延时执行函数来说的实现：清除定时器ID，如果是延迟调用就调用函数

# 13 节流

防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行

_.throttle=function(func, wait, options){var context, args, result;var timeout=null;// 之前的时间戳var previous=0;// 如果 options 没传则设为空对象if(!options) options={};// 定时器回调函数varlater=function(){// 如果设置了 leading，就将 previous 设为 0// 用于下面函数的第一个 if 判断      previous= options.leading===false?0: _.now();// 置空一是为了防止内存泄漏，二是为了下面的定时器判断      timeout=null;      result=func.apply(context, args);if(!timeout) context= args=null;};returnfunction(){// 获得当前时间戳var now= _.now();// 首次进入前者肯定为 true	// 如果需要第一次不执行函数	// 就将上次时间戳设为当前的// 这样在接下来计算 remaining 的值时会大于0if(!previous&& options.leading===false) previous= now;// 计算剩余时间var remaining= wait-(now- previous);      context=this;      args= arguments;// 如果当前调用已经大于上次调用时间 + wait// 或者用户手动调了时间 	// 如果设置了 trailing，只会进入这个条件	// 如果没有设置 leading，那么第一次会进入这个条件	// 还有一点，你可能会觉得开启了定时器那么应该不会进入这个 if 条件了	// 其实还是会进入的，因为定时器的延时	// 并不是准确的时间，很可能你设置了2秒	// 但是他需要2.2秒才触发，这时候就会进入这个条件if(remaining<=0|| remaining> wait){// 如果存在定时器就清理掉否则会调用二次回调if(timeout){clearTimeout(timeout);          timeout=null;}        previous= now;        result=func.apply(context, args);if(!timeout) context= args=null;}elseif(!timeout&& options.trailing!==false){// 判断是否设置了定时器和 trailing	// 没有的话就开启一个定时器// 并且不能不能同时设置 leading 和 trailing        timeout=setTimeout(later, remaining);}return result;};};

# 14 继承

在 ES5 中，我们可以使用如下方式解决继承的问题

functionSuper(){}Super.prototype.getNumber=function(){return1}functionSub(){}let s=newSub()Sub.prototype= Object.create(Super.prototype,{  constructor:{    value: Sub,    enumerable:false,    writable:true,    configurable:true}})

• 以上继承实现思路就是将子类的原型设置为父类的原型
• 在ES6 中，我们可以通过class 语法轻松解决这个问题

classMyDateextendsDate{test(){returnthis.getTime()}}let myDate=newMyDate()myDate.test()

• 但是ES6 不是所有浏览器都兼容，所以我们需要使用Babel 来编译这段代码。
• 如果你使用编译过得代码调用myDate.test()你会惊奇地发现出现了报错

因为在JS 底层有限制，如果不是由Date构造出来的实例的话，是不能调用Date 里的函数的。所以这也侧面的说明了：ES6 中的class 继承与ES5 中的一般继承写法是不同的。

• 既然底层限制了实例必须由Date 构造出来，那么我们可以改变下思路实现继承

functionMyData(){}MyData.prototype.test=function(){returnthis.getTime()}let d=newDate()Object.setPrototypeOf(d,MyData.prototype)Object.setPrototypeOf(MyData.prototype,Date.prototype)

• 以上继承实现思路：先创建父类实例 => 改变实例原先的_proto__转而连接到子类的prototype=> 子类的prototype 的__proto__ 改为父类的prototype。
• 通过以上方法实现的继承就可以完美解决JS 底层的这个限制

# 15 call, apply, bind

• call 和apply 都是为了解决改变this 的指向。作用都是相同的，只是传参的方式不同。
• 除了第一个参数外，call 可以接收一个参数列表，apply 只接受一个参数数组

let a={    value:1}functiongetValue(name, age){    console.log(name)    console.log(age)    console.log(this.value)}getValue.call(a,'yck','24')getValue.apply(a,['yck','24'])

# 16 Promise 实现

• 可以把Promise 看成一个状态机。初始是pending 状态，可以通过函数resolve和reject ，将状态转变为resolved或者rejected 状态，状态一旦改变就不能再次变化。
• then 函数会返回一个Promise 实例，并且该返回值是一个新的实例而不是之前的实例。因为Promise 规范规定除了pending 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个then 调用就失去意义了。
• 对于then来说，本质上可以把它看成是flatMap

// 三种状态constPENDING="pending";constRESOLVED="resolved";constREJECTED="rejected";// promise 接收一个函数参数，该函数会立即执行functionMyPromise(fn){let _this=this;  _this.currentState=PENDING;  _this.value=undefined;// 用于保存 then 中的回调，只有当 promise// 状态为 pending 时才会缓存，并且每个实例至多缓存一个  _this.resolvedCallbacks=[];  _this.rejectedCallbacks=[];  _this.resolve=function(value){if(valueinstanceofMyPromise){// 如果 value 是个 Promise，递归执行return value.then(_this.resolve, _this.reject)}setTimeout(()=>{// 异步执行，保证执行顺序if(_this.currentState===PENDING){        _this.currentState=RESOLVED;        _this.value= value;        _this.resolvedCallbacks.forEach(cb=>cb());}})};  _this.reject=function(reason){setTimeout(()=>{// 异步执行，保证执行顺序if(_this.currentState===PENDING){        _this.currentState=REJECTED;        _this.value= reason;        _this.rejectedCallbacks.forEach(cb=>cb());}})}// 用于解决以下问题// new Promise(() => throw Error('error))try{fn(_this.resolve, _this.reject);}catch(e){    _this.reject(e);}}MyPromise.prototype.then=function(onResolved, onRejected){var self=this;// 规范 2.2.7，then 必须返回一个新的 promisevar promise2;// 规范 2.2.onResolved 和 onRejected 都为可选参数// 如果类型不是函数需要忽略，同时也实现了透传// Promise.resolve(4).then().then((value) => console.log(value))  onResolved=typeof onResolved==='function'?onResolved:v=> v;  onRejected=typeof onRejected==='function'?onRejected:r=>throw r;if(self.currentState===RESOLVED){return(promise2=newMyPromise(function(resolve, reject){// 规范 2.2.4，保证 onFulfilled，onRjected 异步执行// 所以用了 setTimeout 包裹下setTimeout(function(){try{var x=onResolved(self.value);resolutionProcedure(promise2, x, resolve, reject);}catch(reason){reject(reason);}});}));}if(self.currentState===REJECTED){return(promise2=newMyPromise(function(resolve, reject){setTimeout(function(){// 异步执行onRejectedtry{var x=onRejected(self.value);resolutionProcedure(promise2, x, resolve, reject);}catch(reason){reject(reason);}});}));}if(self.currentState===PENDING){return(promise2=newMyPromise(function(resolve, reject){      self.resolvedCallbacks.push(function(){// 考虑到可能会有报错，所以使用 try/catch 包裹try{var x=onResolved(self.value);resolutionProcedure(promise2, x, resolve, reject);}catch(r){reject(r);}});      self.rejectedCallbacks.push(function(){try{var x=onRejected(self.value);resolutionProcedure(promise2, x, resolve, reject);}catch(r){reject(r);}});}));}};// 规范 2.3functionresolutionProcedure(promise2, x, resolve, reject){// 规范 2.3.1，x 不能和 promise2 相同，避免循环引用if(promise2=== x){returnreject(newTypeError("Error"));}// 规范 2.3.2// 如果 x 为 Promise，状态为 pending 需要继续等待否则执行if(xinstanceofMyPromise){if(x.currentState===PENDING){      x.then(function(value){// 再次调用该函数是为了确认 x resolve 的// 参数是什么类型，如果是基本类型就再次 resolve// 把值传给下个 thenresolutionProcedure(promise2, value, resolve, reject);}, reject);}else{      x.then(resolve, reject);}return;}// 规范 2.3.3.3.3// reject 或者 resolve 其中一个执行过得话，忽略其他的let called=false;// 规范 2.3.3，判断 x 是否为对象或者函数if(x!==null&&(typeof x==="object"||typeof x==="function")){// 规范 2.3.3.2，如果不能取出 then，就 rejecttry{// 规范 2.3.3.1let then= x.then;// 如果 then 是函数，调用 x.thenif(typeof then==="function"){// 规范 2.3.3.3then.call(          x,y=>{if(called)return;            called=true;// 规范 2.3.3.3.1resolutionProcedure(promise2, y, resolve, reject);},e=>{if(called)return;            called=true;reject(e);});}else{// 规范 2.3.3.4resolve(x);}}catch(e){if(called)return;      called=true;reject(e);}}else{// 规范 2.3.4，x 为基本类型resolve(x);}}

# 17 Generator 实现

Generator 是ES6中新增的语法，和Promise 一样，都可以用来异步编程

// 使用 * 表示这是一个 Generator 函数// 内部可以通过 yield 暂停代码// 通过调用 next 恢复执行function*test(){let a=1+2;yield2;yield3;}let b=test();console.log(b.next());// >  { value: 2, done: false }console.log(b.next());// >  { value: 3, done: false }console.log(b.next());// >  { value: undefined, done: true }

从以上代码可以发现，加上* 的函数执行后拥有了next函数，也就是说函数执行后返回了一个对象。每次调用next函数可以继续执行被暂停的代码。以下是Generator 函数的简单实现

// cb 也就是编译过的 test 函数functiongenerator(cb){return(function(){var object={      next:0,stop:function(){}};return{next:function(){var ret=cb(object);if(ret===undefined)return{ value:undefined, done:true};return{          value: ret,          done:false};}};})();}// 如果你使用 babel 编译后可以发现 test 函数变成了这样functiontest(){var a;returngenerator(function(_context){while(1){switch((_context.prev= _context.next)){// 可以发现通过 yield 将代码分割成几块// 每次执行 next 函数就执行一块代码// 并且表明下次需要执行哪块代码case0:          a=1+2;          _context.next=4;return2;case4:          _context.next=6;return3;		// 执行完毕case6:case"end":return _context.stop();}}});}

# 18 Proxy

Proxy 是ES6 中新增的功能，可以用来自定义对象中的操作

let p=newProxy(target, handler);// `target` 代表需要添加代理的对象// `handler` 用来自定义对象中的操作可以很方便的使用 Proxy 来实现一个数据绑定和监听letonWatch=(obj, setBind, getLogger)=>{let handler={get(target, property, receiver){getLogger(target, property)return Reflect.get(target, property, receiver);},set(target, property, value, receiver){setBind(value);return Reflect.set(target, property, value);}};returnnewProxy(obj, handler);};let obj={ a:1}let valuelet p=onWatch(obj,(v)=>{  value= v},(target, property)=>{  console.log(`Get '${property}' =${target[property]}`);})p.a=2// bind `value` to `2`p.a// -> Get 'a' = 2

# 二、浏览器

# 1 事件机制

事件触发三阶段

• document 往事件触发处传播，遇到注册的捕获事件会触发
• 传播到事件触发处时触发注册的事件
• 从事件触发处往document 传播，遇到注册的冒泡事件会触发

事件触发一般来说会按照上面的顺序进行，但是也有特例，如果给一个目标节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行

// 以下会先打印冒泡然后是捕获node.addEventListener('click',(event)=>{	console.log('冒泡')},false);node.addEventListener('click',(event)=>{	console.log('捕获 ')},true)

注册事件

• 通常我们使用addEventListener 注册事件，该函数的第三个参数可以是布尔值，也可以是对象。对于布尔值useCapture 参数来说，该参数默认值为false 。useCapture 决定了注册的事件是捕获事件还是冒泡事件
• 一般来说，我们只希望事件只触发在目标上，这时候可以使用stopPropagation 来阻止事件的进一步传播。通常我们认为stopPropagation 是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件。stopImmediatePropagation 同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件

node.addEventListener('click',(event)=>{	event.stopImmediatePropagation()	console.log('冒泡')},false);// 点击 node 只会执行上面的函数，该函数不会执行node.addEventListener('click',(event)=>{	console.log('捕获 ')},true)

事件代理

如果一个节点中的子节点是动态生成的，那么子节点需要注册事件的话应该注册在父节点上

<ulid="ul">	<li>1</li><li>2</li>	<li>3</li>	<li>4</li>	<li>5</li></ul><script>	let ul= document.querySelector('##ul')	ul.addEventListener('click',(event)=>{		console.log(event.target);	})</script>

事件代理的方式相对于直接给目标注册事件来说，有以下优点

• 节省内存
• 不需要给子节点注销事件

# 2 跨域

因为浏览器出于安全考虑，有同源策略。也就是说，如果协议、域名或者端口有一个不同就是跨域，Ajax 请求会失败

JSONP

JSONP 的原理很简单，就是利用<script> 标签没有跨域限制的漏洞。通过<script> 标签指向一个需要访问的地址并提供一个回调函数来接收数据当需要通讯时

<scriptsrc="http://domain/api?param1=a&param2=b&callback=jsonp"></script><script>functionjsonp(data){    	console.log(data)	}</script>

• JSONP 使用简单且兼容性不错，但是只限于get 请求

CORS

• CORS需要浏览器和后端同时支持
• 浏览器会自动进行CORS 通信，实现CORS通信的关键是后端。只要后端实现了CORS，就实现了跨域。
• 服务端设置Access-Control-Allow-Origin 就可以开启CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源

document.domain

• 该方式只能用于二级域名相同的情况下，比如a.test.com 和b.test.com 适用于该方式。
• 只需要给页面添加document.domain = 'test.com' 表示二级域名都相同就可以实现跨域

postMessage

这种方式通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息，另一个页面判断来源并接收消息

// 发送消息端window.parent.postMessage('message','http://blog.poetries.com');// 接收消息端var mc=newMessageChannel();mc.addEventListener('message',(event)=>{var origin= event.origin|| event.originalEvent.origin;if(origin==='http://blog.poetries.com'){        console.log('验证通过')}});

# 3 Event loop

JS中的event loop

众所周知JS 是门非阻塞单线程语言，因为在最初JS 就是为了和浏览器交互而诞生的。如果JS 是门多线程的语言话，我们在多个线程中处理DOM 就可能会发生问题（一个线程中新加节点，另一个线程中删除节点）

• JS 在执行的过程中会产生执行环境，这些执行环境会被顺序的加入到执行栈中。如果遇到异步的代码，会被挂起并加入到Task（有多种task） 队列中。一旦执行栈为空，EventLoop 就会从Task 队列中拿出需要执行的代码并放入执行栈中执行，所以本质上来说JS 中的异步还是同步行为

console.log('script start');setTimeout(function(){  console.log('setTimeout');},0);console.log('script end');

不同的任务源会被分配到不同的Task 队列中，任务源可以分为 微任务（microtask） 和 宏任务（macrotask）。在ES6 规范中，microtask 称为 jobs，macrotask 称为 task

console.log('script start');setTimeout(function(){  console.log('setTimeout');},0);newPromise((resolve)=>{    console.log('Promise')resolve()}).then(function(){  console.log('promise1');}).then(function(){  console.log('promise2');});console.log('script end');// script start => Promise => script end => promise1 => promise2 => setTimeout

以上代码虽然setTimeout 写在Promise 之前，但是因为Promise 属于微任务而setTimeout 属于宏任务

微任务

• process.nextTick
• promise
• Object.observe
• MutationObserver

宏任务

• script
• setTimeout
• setInterval
• setImmediate
• I/O
• UI rendering

宏任务中包括了script ，浏览器会先执行一个宏任务，接下来有异步代码的话就先执行微任务

所以正确的一次 Event loop 顺序是这样的

• 执行同步代码，这属于宏任务
• 执行栈为空，查询是否有微任务需要执行
• 执行所有微任务
• 必要的话渲染 UI
• 然后开始下一轮Event loop，执行宏任务中的异步代码

通过上述的Event loop 顺序可知，如果宏任务中的异步代码有大量的计算并且需要操作DOM 的话，为了更快的响应界面响应，我们可以把操作DOM 放入微任务中

Node 中的 Event loop

• Node 中的Event loop 和浏览器中的不相同。
• Node 的Event loop 分为6个阶段，它们会按照顺序反复运行

┌───────────────────────┐┌─>│        timers         ││  └──────────┬────────────┘│  ┌──────────┴────────────┐│  │I/O callbacks     ││  └──────────┬────────────┘│  ┌──────────┴────────────┐│  │     idle, prepare     ││  └──────────┬────────────┘      ┌───────────────┐│  ┌──────────┴────────────┐      │   incoming:   ││  │         poll          │<──connections───     ││  └──────────┬────────────┘      │   data, etc.  ││  ┌──────────┴────────────┐      └───────────────┘│  │        check          ││  └──────────┬────────────┘│  ┌──────────┴────────────┐└──┤    close callbacks    │   └───────────────────────┘

timer

• timers 阶段会执行setTimeout 和setInterval
• 一个 timer 指定的时间并不是准确时间，而是在达到这个时间后尽快执行回调，可能会因为系统正在执行别的事务而延迟

I/O

• I/O 阶段会执行除了close 事件，定时器和setImmediate 的回调

poll

• poll 阶段很重要，这一阶段中，系统会做两件事情

  • 执行到点的定时器
  • 执行poll 队列中的事件

• 并且当poll 中没有定时器的情况下，会发现以下两件事情

  • 如果poll 队列不为空，会遍历回调队列并同步执行，直到队列为空或者系统限制
  • 如果poll 队列为空，会有两件事发生
  • 如果有setImmediate 需要执行，poll 阶段会停止并且进入到check 阶段执行setImmediate
  • 如果没有setImmediate 需要执行，会等待回调被加入到队列中并立即执行回调
  • 如果有别的定时器需要被执行，会回到timer 阶段执行回调。

check

• check 阶段执行setImmediate

close callbacks

• close callbacks 阶段执行close 事件
• 并且在Node 中，有些情况下的定时器执行顺序是随机的

setTimeout(()=>{    console.log('setTimeout');},0);setImmediate(()=>{    console.log('setImmediate');})// 这里可能会输出 setTimeout，setImmediate// 可能也会相反的输出，这取决于性能// 因为可能进入 event loop 用了不到 1 毫秒，这时候会执行 setImmediate// 否则会执行 setTimeout

上面介绍的都是macrotask 的执行情况，microtask 会在以上每个阶段完成后立即执行

setTimeout(()=>{    console.log('timer1')    Promise.resolve().then(function(){        console.log('promise1')})},0)setTimeout(()=>{    console.log('timer2')    Promise.resolve().then(function(){        console.log('promise2')})},0)// 以上代码在浏览器和 node 中打印情况是不同的// 浏览器中一定打印 timer1, promise1, timer2, promise2// node 中可能打印 timer1, timer2, promise1, promise2// 也可能打印 timer1, promise1, timer2, promise2

Node 中的process.nextTick 会先于其他microtask 执行

setTimeout(()=>{ console.log("timer1"); Promise.resolve().then(function(){   console.log("promise1");});},0);process.nextTick(()=>{ console.log("nextTick");});// nextTick, timer1, promise1

# 4 Service Worker

Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API

目前该技术通常用来做缓存文件，提高首屏速度

// index.jsif(navigator.serviceWorker){  navigator.serviceWorker.register("sw.js").then(function(registration){      console.log("service worker 注册成功");}).catch(function(err){      console.log("servcie worker 注册失败");});}// sw.js// 监听 `install` 事件，回调中缓存所需文件self.addEventListener("install",e=>{  e.waitUntil(    caches.open("my-cache").then(function(cache){return cache.addAll(["./index.html","./index.js"]);}));});// 拦截所有请求事件// 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据self.addEventListener("fetch",e=>{  e.respondWith(    caches.match(e.request).then(function(response){if(response){return response;}      console.log("fetch source");}));});

打开页面，可以在开发者工具中的Application 看到Service Worker 已经启动了

在 Cache 中也可以发现我们所需的文件已被缓存

当我们重新刷新页面可以发现我们缓存的数据是从ServiceWorker 中读取的

# 5 渲染机制

浏览器的渲染机制一般分为以下几个步骤

• 处理HTML 并构建DOM 树。
• 处理CSS 构建CSSOM 树。
• 将DOM 与CSSOM 合并成一个渲染树。
• 根据渲染树来布局，计算每个节点的位置。
• 调用GPU 绘制，合成图层，显示在屏幕上

• 在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢
• 当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。并且 CSS 也会影响 JS 的执行，只有当解析完样式表才会执行 JS，所以也可以认为这种情况下，CSS 也会暂停构建 DOM

图层

一般来说，可以把普通文档流看成一个图层。特定的属性可以生成一个新的图层。不同的图层渲染互不影响，所以对于某些频繁需要渲染的建议单独生成一个新图层，提高性能。但也不能生成过多的图层，会引起反作用

• 通过以下几个常用属性可以生成新图层
  • 3D变换：translate3d、translateZ
  • will-change
  • video、iframe 标签
  • 通过动画实现的opacity 动画转换
  • position: fixed

重绘（Repaint）和回流（Reflow）

• 重绘是当节点需要更改外观而不会影响布局的，比如改变color 就叫称为重绘
• 回流是布局或者几何属性需要改变就称为回流

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流

• 所以以下几个动作可能会导致性能问题：
  • 改变window 大小
  • 改变字体
  • 添加或删除样式
  • 文字改变
  • 定位或者浮动
  • 盒模型

很多人不知道的是，重绘和回流其实和Event loop 有关

• 当Event loop 执行完Microtasks 后，会判断document 是否需要更新。因为浏览器是60Hz的刷新率，每16ms才会更新一次。
• 然后判断是否有resize 或者scroll ，有的话会去触发事件，所以resize 和scroll 事件也是至少16ms 才会触发一次，并且自带节流功能。
• 判断是否触发了media query
• 更新动画并且发送事件
• 判断是否有全屏操作事件
• 执行requestAnimationFrame 回调
• 执行IntersectionObserver 回调，该方法用于判断元素是否可见，可以用于懒加载上，但是兼容性不好
• 更新界面
• 以上就是一帧中可能会做的事情。如果在一帧中有空闲时间，就会去执行requestIdleCallback 回调

减少重绘和回流

• 使用translate 替代top
• 使用visibility 替换display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
• 不要使用table 布局，可能很小的一个小改动会造成整个 table 的重新布局
• 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用requestAnimationFrame
• CSS 选择符从右往左匹配查找，避免DOM 深度过深
• 将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于video标签，浏览器会自动将该节点变为图层

# 三、性能

# 1 DNS 预解析

• DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的IP

<linkrel="dns-prefetch"href="//blog.poetries.top">

# 2 缓存

• 缓存对于前端性能优化来说是个很重要的点，良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度
• 通常浏览器缓存策略分为两种：强缓存和协商缓存

强缓存

实现强缓存可以通过两种响应头实现：Expires和Cache-Control 。强缓存表示在缓存期间不需要请求，state code为200

Expires: Wed, 22 Oct 2018 08:41:00 GMT

Expires 是HTTP / 1.0 的产物，表示资源会在Wed, 22 Oct 2018 08:41:00 GMT 后过期，需要再次请求。并且Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效

Cache-control: max-age=30

Cache-Control 出现于HTTP / 1.1，优先级高于Expires 。该属性表示资源会在30 秒后过期，需要再次请求

协商缓存

• 如果缓存过期了，我们就可以使用协商缓存来解决问题。协商缓存需要请求，如果缓存有效会返回 304
• 协商缓存需要客户端和服务端共同实现，和强缓存一样，也有两种实现方式

Last-Modified 和If-Modified-Since

• Last-Modified 表示本地文件最后修改日期，If-Modified-Since 会将Last-Modified的值发送给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来
• 但是如果在本地打开缓存文件，就会造成Last-Modified 被修改，所以在HTTP / 1.1 出现了ETag

ETag 和If-None-Match

• ETag 类似于文件指纹，If-None-Match 会将当前ETag 发送给服务器，询问该资源 ETag 是否变动，有变动的话就将新的资源发送回来。并且ETag 优先级比Last-Modified 高

选择合适的缓存策略

对于大部分的场景都可以使用强缓存配合协商缓存解决，但是在一些特殊的地方可能需要选择特殊的缓存策略

• 对于某些不需要缓存的资源，可以使用Cache-control: no-store ，表示该资源不需要缓存
• 对于频繁变动的资源，可以使用Cache-Control: no-cache 并配合ETag 使用，表示该资源已被缓存，但是每次都会发送请求询问资源是否更新。
• 对于代码文件来说，通常使用Cache-Control: max-age=31536000 并配合策略缓存使用，然后对文件进行指纹处理，一旦文件名变动就会立刻下载新的文件

# 3 使用 HTTP / 2.0

• 因为浏览器会有并发请求限制，在HTTP / 1.1 时代，每个请求都需要建立和断开，消耗了好几个RTT 时间，并且由于TCP 慢启动的原因，加载体积大的文件会需要更多的时间
• 在HTTP / 2.0 中引入了多路复用，能够让多个请求使用同一个TCP 链接，极大的加快了网页的加载速度。并且还支持Header 压缩，进一步的减少了请求的数据大小

# 4 预加载

• 在开发中，可能会遇到这样的情况。有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载
• 预加载其实是声明式的fetch ，强制浏览器请求资源，并且不会阻塞onload 事件，可以使用以下代码开启预加载

<linkrel="preload"href="http://example.com">

预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好

# 5 预渲染

可以通过预渲染将下载的文件预先在后台渲染，可以使用以下代码开启预渲染

<linkrel="prerender"href="http://poetries.com">

• 预渲染虽然可以提高页面的加载速度，但是要确保该页面百分百会被用户在之后打开，否则就白白浪费资源去渲染

# 6 懒执行与懒加载

懒执行

• 懒执行就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化，对于某些耗时逻辑并不需要在首屏就使用的，就可以使用懒执行。懒执行需要唤醒，一般可以通过定时器或者事件的调用来唤醒

懒加载

• 懒加载就是将不关键的资源延后加载

懒加载的原理就是只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。对于图片来说，先设置图片标签的src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为src 属性，这样图片就会去下载资源，实现了图片懒加载

• 懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等

# 7 文件优化

图片优化

对于如何优化图片，有 2 个思路

• 减少像素点
• 减少每个像素点能够显示的颜色

图片加载优化

• 不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用CSS 去代替。
• 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片
• 小图使用base64格式
• 将多个图标文件整合到一张图片中（雪碧图）
• 选择正确的图片格式：
  • 对于能够显示WebP 格式的浏览器尽量使用WebP 格式。因为WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好
  • 小图使用PNG，其实对于大部分图标这类图片，完全可以使用SVG 代替
  • 照片使用JPEG

其他文件优化

• CSS文件放在head 中
• 服务端开启文件压缩功能
• 将script 标签放在body 底部，因为JS 文件执行会阻塞渲染。当然也可以把script 标签放在任意位置然后加上defer ，表示该文件会并行下载，但是会放到HTML 解析完成后顺序执行。对于没有任何依赖的JS文件可以加上async ，表示加载和渲染后续文档元素的过程将和JS 文件的加载与执行并行无序进行。 执行JS代码过长会卡住渲染，对于需要很多时间计算的代码
• 可以考虑使用Webworker。Webworker可以让我们另开一个线程执行脚本而不影响渲染。

CDN

静态资源尽量使用CDN 加载，由于浏览器对于单个域名有并发请求上限，可以考虑使用多个CDN 域名。对于CDN 加载静态资源需要注意CDN 域名要与主站不同，否则每次请求都会带上主站的Cookie

# 8 其他

使用 Webpack 优化项目

• 对于Webpack4，打包项目使用production 模式，这样会自动开启代码压缩
• 使用ES6 模块来开启tree shaking，这个技术可以移除没有使用的代码
• 优化图片，对于小图可以使用base64 的方式写入文件中
• 按照路由拆分代码，实现按需加载
• 给打包出来的文件名添加哈希，实现浏览器缓存文件

监控

对于代码运行错误，通常的办法是使用window.onerror 拦截报错。该方法能拦截到大部分的详细报错信息，但是也有例外

• 对于跨域的代码运行错误会显示Script error. 对于这种情况我们需要给script 标签添加crossorigin 属性
• 对于某些浏览器可能不会显示调用栈信息，这种情况可以通过arguments.callee.caller 来做栈递归
• 对于异步代码来说，可以使用catch 的方式捕获错误。比如Promise 可以直接使用 catch 函数，async await 可以使用try catch
• 但是要注意线上运行的代码都是压缩过的，需要在打包时生成sourceMap 文件便于debug。
• 对于捕获的错误需要上传给服务器，通常可以通过img 标签的src发起一个请求

# 四、安全

# 1 XSS

跨网站指令码（英语：Cross-site scripting，通常简称为：XSS）是一种网站应用程式的安全漏洞攻击，是代码注入的一种。它允许恶意使用者将程式码注入到网页上，其他使用者在观看网页时就会受到影响。这类攻击通常包含了HTML 以及使用者端脚本语言

XSS 分为三种：反射型，存储型和DOM-based

如何攻击

• XSS 通过修改HTML节点或者执行JS代码来攻击网站。
• 例如通过URL 获取某些参数

<!-- http://www.domain.com?name=<script>alert(1)</script> --><div>{{name}}</div>

上述URL 输入可能会将HTML 改为<div><script>alert(1)</script></div> ，这样页面中就凭空多了一段可执行脚本。这种攻击类型是反射型攻击，也可以说是DOM-based 攻击

如何防御

最普遍的做法是转义输入输出的内容，对于引号，尖括号，斜杠进行转义

functionescape(str){	str= str.replace(/&/g,"&amp;");	str= str.replace(/</g,"&lt;");	str= str.replace(/>/g,"&gt;");	str= str.replace(/"/g,"&quto;");	str= str.replace(/'/g,"&##39;");	str= str.replace(/`/g,"&##96;");    str= str.replace(/\//g,"&##x2F;");return str}

通过转义可以将攻击代码<script>alert(1)</script> 变成

// -> &lt;script&gt;alert(1)&lt;&##x2F;script&gt;escape('<script>alert(1)</script>')

对于显示富文本来说，不能通过上面的办法来转义所有字符，因为这样会把需要的格式也过滤掉。这种情况通常采用白名单过滤的办法，当然也可以通过黑名单过滤，但是考虑到需要过滤的标签和标签属性实在太多，更加推荐使用白名单的方式

var xss=require("xss");var html=xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>');// -> <h1>XSS Demo</h1>&lt;script&gt;alert("xss");&lt;/script&gt;console.log(html);

以上示例使用了js-xss来实现。可以看到在输出中保留了h1 标签且过滤了script 标签

# 2 CSRF

跨站请求伪造（英语：Cross-site request forgery），也被称为one-click attack或者session riding，通常缩写为CSRF 或者XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法

CSRF 就是利用用户的登录态发起恶意请求

如何攻击

假设网站中有一个通过 Get 请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口

<img src="http://www.domain.com/xxx?comment='attack'"/>

如何防御

• Get 请求不对数据进行修改
• 不让第三方网站访问到用户Cookie
• 阻止第三方网站请求接口
• 请求时附带验证信息，比如验证码或者token

# 3 密码安全

加盐

对于密码存储来说，必然是不能明文存储在数据库中的，否则一旦数据库泄露，会对用户造成很大的损失。并且不建议只对密码单纯通过加密算法加密，因为存在彩虹表的关系

• 通常需要对密码加盐，然后进行几次不同加密算法的加密

// 加盐也就是给原密码添加字符串，增加原密码长度sha256(sha1(md5(salt+ password+ salt)))

但是加盐并不能阻止别人盗取账号，只能确保即使数据库泄露，也不会暴露用户的真实密码。一旦攻击者得到了用户的账号，可以通过暴力破解的方式破解密码。对于这种情况，通常使用验证码增加延时或者限制尝试次数的方式。并且一旦用户输入了错误的密码，也不能直接提示用户输错密码，而应该提示账号或密码错误

前端加密

虽然前端加密对于安全防护来说意义不大，但是在遇到中间人攻击的情况下，可以避免明文密码被第三方获取

# 五、小程序

# 1 登录

unionid和openid

了解小程序登陆之前，我们写了解下小程序/公众号登录涉及到两个最关键的用户标识：

• OpenId 是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。
• UnionId 是一个用户对于同主体微信小程序／公众号／APP的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过UnionId，实现多个小程序、公众号、甚至APP 之间的数据互通了。

关键Api

• wx.login 官方提供的登录能力
• wx.checkSession校验用户当前的session_key是否有效
• wx.authorize 提前向用户发起授权请求
• wx.getUserInfo 获取用户基本信息

登录流程设计

• 利用现有登录体系

直接复用现有系统的登录体系，只需要在小程序端设计用户名，密码/验证码输入页面，便可以简便的实现登录，只需要保持良好的用户体验即可

• 利用OpenId 创建用户体系

OpenId 是一个小程序对于一个用户的标识，利用这一点我们可以轻松的实现一套基于小程序的用户体系，值得一提的是这种用户体系对用户的打扰最低，可以实现静默登录。具体步骤如下

• 小程序客户端通过wx.login 获取code
• 传递code 向服务端，服务端拿到 code 调用微信登录凭证校验接口，微信服务器返回openid 和会话密钥session_key ，此时开发者服务端便可以利用openid 生成用户入库，再向小程序客户端返回自定义登录态
• 小程序客户端缓存 （通过storage）自定义登录态（token），后续调用接口时携带该登录态作为用户身份标识即可

利用 Unionid 创建用户体系

如果想实现多个小程序，公众号，已有登录系统的数据互通，可以通过获取到用户unionid 的方式建立用户体系。因为unionid 在同一开放平台下的所所有应用都是相同的，通过unionid 建立的用户体系即可实现全平台数据的互通，更方便的接入原有的功能，那如何获取unionid 呢，有以下两种方式

• 如果户关注了某个相同主体公众号，或曾经在某个相同主体App、公众号上进行过微信登录授权，通过wx.login 可以直接获取 到unionid
• 结合wx.getUserInfo 和<button open-type="getUserInfo"><button/> 这两种方式引导用户主动授权，主动授权后通过返回的信息和服务端交互 (这里有一步需要服务端解密数据的过程，很简单，微信提供了示例代码) 即可拿到unionid 建立用户体系， 然后由服务端返回登录态，本地记录即可实现登录，附上微信提供的最佳实践
  • 调用wx.login 获取code，然后从微信后端换取到session_key，用于解密getUserInfo返回的敏感数据
  • 使用wx.getSetting 获取用户的授权情况
    • 如果用户已经授权，直接调用APIwx.getUserInfo 获取用户最新的信息；
    • 用户未授权，在界面中显示一个按钮提示用户登入，当用户点击并授权后就获取到用户的最新信息
  • 获取到用户数据后可以进行展示或者发送给自己的后端。

 wx.login(获取code) ===> wx.getUserInfo(用户授权) ===> 获取 unionid

# 2 图片导出

这是一种常见的引流方式，一般同时会在图片中附加一个小程序二维码。

基本原理

• 借助canvas 元素，将需要导出的样式首先在canvas 画布上绘制出来 （api基本和h5保持一致，但有轻微差异，使用时注意即可
• 借助微信提供的canvasToTempFilePath 导出图片，最后再使用saveImageToPhotosAlbum （需要授权）保存图片到本地

如何优雅实现

• 绘制出需要的样式这一步是省略不掉的。但是我们可以封装一个绘制库，包含常见图形的绘制，例如矩形，圆角矩形，圆， 扇形， 三角形， 文字，图片减少绘制代码，只需要提炼出样式信息，便可以轻松的绘制，最后导出图片存入相册。笔者觉得以下这种方式绘制更为优雅清晰一些，其实也可以使用加入一个type参数来指定绘制类型，传入的一个是样式数组，实现绘制。
• 结合上一步的实现，如果对于同一类型的卡片有多次导出需求的场景，也可以使用自定义组件的方式，封装同一类型的卡片为一个通用组件，在需要导出图片功能的地方，引入该组件即可。

classCanvasKit{constructor(){}drawImg(option={}){...returnthis}drawRect(option={}){returnthis}drawText(option={}){...returnthis}staticexportImg(option={}){...}}let drawer=newCanvasKit('canvasId').drawImg(styleObj1).drawText(styleObj2) drawer.exportImg()

# 3 数据统计

数据统计作为目前一种常用的分析用户行为的方式，小程序端也是必不可少的。小程序采取的曝光，点击数据埋点其实和h5原理是一样的。但是埋点作为一个和业务逻辑不相关的需求，我们如果在每一个点击事件，每一个生命周期加入各种埋点代码，则会干扰正常的业务逻辑，和使代码变的臃肿，笔者提供以下几种思路来解决数据埋点

设计一个埋点sdk

小程序的代码结构是，每一个Page 中都有一个Page 方法，接受一个包含生命周期函数，数据的 业务逻辑对象 包装这层数据，借助小程序的底层逻辑实现页面的业务逻辑。通过这个我们可以想到思路，对Page进行一次包装，篡改它的生命周期和点击事件，混入埋点代码，不干扰业务逻辑，只要做一些简单的配置即可埋点，简单的代码实现如下

// 代码仅供理解思路page=function(params){let keys= params.keys()   keys.forEach(v=>{if(v==='onLoad'){         params[v]=function(options){stat()//曝光埋点代码           params[v].call(this, options)}}elseif(v.includes('click')){         params[v]=funciton(event){let data= event.dataset.configstat(data)// 点击埋点           param[v].call(this)}}})}

这种思路不光适用于埋点，也可以用来作全局异常处理，请求的统一处理等场景。

分析接口

对于特殊的一些业务，我们可以采取 接口埋点，什么叫接口埋点呢？很多情况下，我们有的api并不是多处调用的，只会在某一个特定的页面调用，通过这个思路我们可以分析出，该接口被请求，则这个行为被触发了，则完全可以通过服务端日志得出埋点数据，但是这种方式局限性较大，而且属于分析结果得出过程，可能存在误差，但可以作为一种思路了解一下。

微信自定义数据分析

微信本身提供的数据分析能力，微信本身提供了常规分析和自定义分析两种数据分析方式，在小程序后台配置即可。借助小程序数据助手这款小程序可以很方便的查看

# 4 工程化

工程化做什么

目前的前端开发过程，工程化是必不可少的一环，那小程序工程化都需要做些什么呢，先看下目前小程序开发当中存在哪些问题需要解决：

• 不支持css预编译器,作为一种主流的css解决方案，不论是less,sass,stylus 都可以提升css效率
• 不支持引入npm包 （这一条，从微信公开课中听闻，微信准备支持）
• 不支持ES7等后续的js特性，好用的async await等特性都无法使用
• 不支持引入外部字体文件，只支持base64
• 没有eslint 等代码检查工具

方案选型

对于目前常用的工程化方案，webpack，rollup，parcel等来看，都常用与单页应用的打包和处理，而小程序天生是 “多页应用” 并且存在一些特定的配置。根据要解决的问题来看，无非是文件的编译，修改，拷贝这些处理，对于这些需求，我们想到基于流的gulp非常的适合处理，并且相对于webpack配置多页应用更加简单。所以小程序工程化方案推荐使用gulp

具体开发思路

通过gulp 的task 实现：

• 实时编译less 文件至相应目录
• 引入支持async，await的运行时文件
• 编译字体文件为base64 并生成相应css文件，方便使用
• 依赖分析哪些地方引用了npm包，将npm包打成一个文件，拷贝至相应目录
• 检查代码规范

# 5 小程序架构

微信小程序的框架包含两部分View 视图层、App Service逻辑层。View 层用来渲染页面结构，AppService 层用来逻辑处理、数据请求、接口调用。

它们在两个线程里运行。

视图层和逻辑层通过系统层的JSBridage 进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理

• 视图层使用WebView 渲染，iOS中使用自带WKWebView，在Android 使用腾讯的x5内核（基于Blink）运行。
• 逻辑层使用在iOS 中使用自带的JSCore 运行，在Android中使用腾讯的x5 内核（基于Blink）运行。
• 开发工具使用nw.js 同时提供了视图层和逻辑层的运行环境。

# 6 WXML && WXSS

WXML

• 支持数据绑定
• 支持逻辑算术、运算
• 支持模板、引用
• 支持添加事件（bindtap）
• Wxml编译器：Wcc 把Wxml文件 转为JS
• 执行方式：Wcc index.wxml
• 使用Virtual DOM，进行局部更新

WXSS

• wxss编译器：wcsc 把wxss文件转化为js
• 执行方式：wcsc index.wxss

尺寸单位 rpx

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。公式：

const dsWidth=750exportconstscreenHeightOfRpx=function(){return750/ env.screenWidth* env.screenHeight}exportconstrpxToPx=function(rpx){return env.screenWidth/750* rpx}exportconstpxToRpx=function(px){return750/ env.screenWidth* px}

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用; 表示语句结束

内联样式

静态的样式统一写到class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style 中，以免影响渲染速度

全局样式与局部样式

定义在app.wxss 中的样式为全局样式，作用于每一个页面。在page 的wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss 中相同的选择器

# 7 小程序的问题

• 小程序仍然使用WebView 渲染，并非原生渲染。（部分原生）
• 服务端接口返回的头无法执行，比如：Set-Cookie。
• 依赖浏览器环境的JS库不能使用。
• 不能使用npm，但是可以自搭构建工具或者使用mpvue。（未来官方有计划支持）
• 不能使用ES7，可以自己用babel+webpack自搭或者使用mpvue。
• 不支持使用自己的字体（未来官方计划支持）。
• 可以用base64 的方式来使用iconfont。
• 小程序不能发朋友圈（可以通过保存图片到本地，发图片到朋友前。二维码可以使用B接口）。
• 获取二维码/小程序接口的限制
• 程序推送只能使用“服务通知” 而且需要用户主动触发提交formId，formId 只有7天有效期。（现在的做法是在每个页面都放入form并且隐藏以此获取更多的formId。后端使用原则为：优先使用有效期最短的）
• 小程序大小限制 2M，分包总计不超过 8M
• 转发（分享）小程序不能拿到成功结果，原来可以。链接（小游戏造的孽）
• 拿到相同的unionId 必须绑在同一个开放平台下。开放平台绑定限制：
  • 50个移动应用
  • 10个网站
  • 50个同主体公众号
  • 5个不同主体公众号
  • 50个同主体小程序
  • 5个不同主体小程序
• 公众号关联小程序
  • 所有公众号都可以关联小程序。
  • 一个公众号可关联10个同主体的小程序，3个不同主体的小程序。
  • 一个小程序可关联500个公众号。
  • 公众号一个月可新增关联小程序13次，小程序一个月可新增关联500次。
• 一个公众号关联的10个同主体小程序和3个非同主体小程序可以互相跳转
• 品牌搜索不支持金融、医疗
• 小程序授权需要用户主动点击
• 小程序不提供测试access_token
• 安卓系统下，小程序授权获取用户信息之后，删除小程序再重新获取，并重新授权，得到旧签名，导致第一次授权失败
• 开发者工具上，授权获取用户信息之后，如果清缓存选择全部清除，则即使使用了wx.checkSession，并且在session_key有效期内，授权获取用户信息也会得到新的session_key

# 8 授权获取用户信息流程

• session_key 有有效期，有效期并没有被告知开发者，只知道用户越频繁使用小程序，session_key 有效期越长
• 在调用wx.login 时会直接更新session_key，导致旧session_key 失效
• 小程序内先调用wx.checkSession 检查登录态，并保证没有过期的session_key 不会被更新，再调用wx.login 获取code。接着用户授权小程序获取用户信息，小程序拿到加密后的用户数据，把加密数据和code 传给后端服务。后端通过code 拿到session_key 并解密数据，将解密后的用户信息返回给小程序

面试题：先授权获取用户信息再 login 会发生什么？

• 用户授权时，开放平台使用旧的session_key 对用户信息进行加密。调用wx.login 重新登录，会刷新session_key，这时后端服务从开放平台获取到新session_key，但是无法对老session_key 加密过的数据解密，用户信息获取失败
• 在用户信息授权之前先调用wx.checkSession 呢？wx.checkSession 检查登录态，并且保证 wx.login 不会刷新session_key，从而让后端服务正确解密数据。但是这里存在一个问题，如果小程序较长时间不用导致session_key 过期，则wx.login 必定会重新生成session_key，从而再一次导致用户信息解密失败

# 9 性能优化

我们知道view部分是运行在webview上的，所以前端领域的大多数优化方式都有用

加载优化

代码包的大小是最直接影响小程序加载启动速度的因素。代码包越大不仅下载速度时间长，业务代码注入时间也会变长。所以最好的优化方式就是减少代码包的大小

小程序加载的三个阶段的表示

优化方式

• 代码压缩。
• 及时清理无用代码和资源文件。
• 减少代码包中的图片等资源文件的大小和数量。
• 分包加载。

首屏加载的体验优化建议

• 提前请求: 异步数据请求不需要等待页面渲染完成。
• 利用缓存: 利用storage API 对异步请求数据进行缓存，二次启动时先利用缓存数据渲染页面，在进行后台更新。
• 避免白屏：先展示页面骨架页和基础内容。
• 及时反馈：即时地对需要用户等待的交互操作给出反馈，避免用户以为小程序无响应

使用分包加载优化

• 在构建小程序分包项目时，构建会输出一个或多个功能的分包，其中每个分包小程序必定含有一个主包，所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本，而分包则是根据开发者的配置进行划分
• 在小程序启动时，默认会下载主包并启动主包内页面，如果用户需要打开分包内某个页面，客户端会把对应分包下载下来，下载完成后再进行展示。

优点：

• 对开发者而言，能使小程序有更大的代码体积，承载更多的功能与服务
• 对用户而言，可以更快地打开小程序，同时在不影响启动速度前提下使用更多功能

限制

• 整个小程序所有分包大小不超过8M
• 单个分包/主包大小不能超过2M
• 原生分包加载的配置 假设支持分包的小程序目录结构如下

├── app.js├── app.json├── app.wxss├── packageA│   └── pages│       ├── cat│       └── dog├── packageB│   └── pages│       ├── apple│       └── banana├── pages│   ├── index│   └── logs└── utils

开发者通过在app.jsonsubPackages 字段声明项目分包结构

{"pages":["pages/index","pages/logs"],"subPackages":[{"root":"packageA","pages":["pages/cat","pages/dog"]},{"root":"packageB","pages":["pages/apple","pages/banana"]}]}

分包原则

• 声明subPackages 后，将按subPackages 配置路径进行打包，subPackages 配置路径外的目录将被打包到app（主包） 中
• app（主包）也可以有自己的pages（即最外层的pages 字段
• subPackage 的根目录不能是另外一个subPackage 内的子目录
• 首页的TAB页面必须在app（主包）内

引用原则

• ``packageA无法require packageB JS文件，但可以require app、自己package内的JS` 文件
• ``packageA无法import packageB的template，但可以require app、自己package内的template`
• ``packageA无法使用packageB的资源，但可以使用app、自己package` 内的资源

官方即将推出 分包预加载

独立分包

渲染性能优化

• 每次setData 的调用都是一次进程间通信过程，通信开销与setData 的数据量正相关。
• setData 会引发视图层页面内容的更新，这一耗时操作一定时间中会阻塞用户交互。
• setData 是小程序开发使用最频繁，也是最容易引发性能问题的

避免不当使用 setData

• 使用data 在方法间共享数据，可能增加setData传输的数据量。。data 应仅包括与页面渲染相关的数据。
• 使用setData 传输大量数据，通讯耗时与数据正相关，页面更新延迟可能造成页面更新开销增加。仅传输页面中发生变化的数据，使用setData 的特殊key实现局部更新。
• 短时间内频繁调用setData，操作卡顿，交互延迟，阻塞通信，页面渲染延迟。避免不必要的setData，对连续的setData调用进行合并。
• 在后台页面进行setData，抢占前台页面的渲染资源。页面切入后台后的setData 调用，延迟到页面重新展示时执行。

避免不当使用onPageScroll

• 只在有必要的时候监听pageScroll 事件。不监听，则不会派发。
• 避免在onPageScroll 中执行复杂逻辑
• 避免在onPageScroll 中频繁调用setData
• 避免滑动时频繁查询节点信息（SelectQuery）用以判断是否显示，部分场景建议使用节点布局橡胶状态监听（inersectionObserver）替代

使用自定义组件

在需要频繁更新的场景下，自定义组件的更新只在组件内部进行，不受页面其他部分内容复杂性影响

# 10 wepy vs mpvue

数据流管理

相比传统的小程序框架，这个一直是我们作为资深开发者比较期望去解决的，在Web 开发中，随着Flux、Redux、Vuex 等多个数据流工具出现，我们也期望在业务复杂的小程序中使用

• WePY 默认支持Redux，在脚手架生成项目的时候可以内置
• Mpvue 作为Vue 的移植版本，当然支持Vuex，同样在脚手架生成项目的时候可以内置

组件化

• WePY 类似Vue实现了单文件组件，最大的差别是文件后缀.wpy，只是写法上会有差异

exportdefaultclassIndexextendswepy.page{}

• Mpvue 作为Vue 的移植版本，支持单文件组件，template、script 和style 都在一个.vue 文件中，和vue 的写法类似，所以对Vue 开发熟悉的同学会比较适应

工程化

所有的小程序开发依赖官方提供的开发者工具。开发者工具简单直观，对调试小程序很有帮助，现在也支持腾讯云（目前我们还没有使用，但是对新的一些开发者还是有帮助的），可以申请测试报告查看小程序在真实的移动设备上运行性能和运行效果，但是它本身没有类似前端工程化中的概念和工具

• wepy 内置了构建，通过wepy init 命令初始化项目，大致流程如下：

  • wepy-cli 会判断模版是在远程仓库还是在本地，如果在本地则会立即跳到第3 步，反之继续进行。
  • 会从远程仓库下载模版，并保存到本地。
  • 询问开发者Project name 等问题，依据开发者的回答，创建项目

• mpvue 沿用了vue 中推崇的webpack作为构建工具，但同时提供了一些自己的插件以及配置文件的一些修改，比如

  • 不再需要html-webpack-plugin
  • 基于webpack-dev-middleware 修改成webpack-dev-middleware-hard-disk
  • 最大的变化是基于webpack-loader 修改成mpvue-loader
  • 但是配置方式还是类似，分环境配置文件，最终都会编译成小程序支持的目录结构和文件后缀

# 11 mpvue

框架原理

两个大方向

• 通过mpvue提供mp 的runtime 适配小程序
• 通过mpvue-loader产出微信小程序所需要的文件结构和模块内容

七个具体问题

• 要了解mpvue 原理必然要了解Vue 原理，这是大前提

现在假设您对 Vue 原理有个大概的了解

• 由于Vue 使用了Virtual DOM，所以Virtual DOM可以在任何支持JavaScript 语言的平台上操作，譬如说目前Vue 支持浏览器平台或weex，也可以是mp(小程序)。那么最后Virtual DOM 如何映射到真实的DOM节点上呢？vue为平台做了一层适配层，浏览器平台见runtime/node-ops.js、weex平台见runtime/node-ops.js，小程序见runtime/node-ops.js。不同平台之间通过适配层对外提供相同的接口，Virtual DOM进行操作Real DOM节点的时候，只需要调用这些适配层的接口即可，而内部实现则不需要关心，它会根据平台的改变而改变
• 所以思路肯定是往增加一个mp 平台的runtime方向走。但问题是小程序不能操作DOM，所以mp 下的node-ops.js里面的实现都是直接return obj
• 新Virtual DOM 和旧Virtual DOM 之间需要做一个patch，找出diff。patch完了之后的diff 怎么更新视图，也就是如何给这些DOM 加入attr、class、style等 DOM 属性呢？Vue中有nextTick 的概念用以更新视图，mpvue这块对于小程序的setData 应该怎么处理呢？
• 另外个问题在于小程序的Virtual DOM 怎么生成？也就是怎么将template编译成render function。这当中还涉及到运行时-编译器-vs-只包含运行时，显然如果要提高性能、减少包大小、输出wxml、mpvue 也要提供预编译的能力。因为要预输出wxml 且没法动态改变DOM，所以动态组件，自定义render，和<script type="text/x-template">字符串模版等都不支持

另外还有一些其他问题，最后总结一下

• 1.如何预编译生成render function
• 2.如何预编译生成wxml，wxss，wxs
• 3.如何 patch 出diff
• 4.如何更新视图
• 5.如何建立小程序事件代理机制，在事件代理函数中触发与之对应的vue组件事件响应
• 6.如何建立vue实例与小程序Page实例关联
• 7.如何建立小程序和vue生命周期映射关系，能在小程序生命周期中触发vue生命周期

platform/mp的目录结构

.├── compiler //解决问题1，mpvue-template-compiler源码部分├── runtime //解决问题3 4 5 6 7├── util //工具方法├── entry-compiler.js //mpvue-template-compiler的入口。package.json相关命令会自动生成mpvue-template-compiler这个package。├── entry-runtime.js //对外提供Vue对象，当然是mpvue└── join-code-in-build.js //编译出SDK时的修复

mpvue-loader

mpvue-loader 是vue-loader 的一个扩展延伸版，类似于超集的关系，除了vue-loader 本身所具备的能力之外，它还会利用mpvue-template-compiler生成render function

entry

• 它会从webpack 的配置中的entry 开始，分析依赖模块，并分别打包。在entry 中app 属性及其内容会被打包为微信小程序所需要的app.js／app.json／app.wxss，其余的会生成对应的
• 页面page.js/page.json/page.wxml/page.wxss，如示例的entry 将会生成如下这些文件，文件内容下文慢慢讲来：

// webpack.config.js{// ...    entry:{        app:resolve('./src/main.js'),// app 字段被识别为 app 类型        index:resolve('./src/pages/index/main.js'),// 其余字段被识别为 page 类型'news/home':resolve('./src/pages/news/home/index.js')}}// 产出文件的结构.├── app.js├── app.json├──· app.wxss├── components│   ├── card$74bfae61.wxml│   ├── index$023eef02.wxml│   └── news$0699930b.wxml├── news│   ├── home.js│   ├── home.wxml│   └── home.wxss├── pages│   └── index│       ├── index.js│       ├── index.wxml│       └── index.wxss└──static    ├── css    │   ├── app.wxss    │   ├── index.wxss    │   └── news    │       └── home.wxss    └── js        ├── app.js        ├── index.js        ├── manifest.js        ├── news        │   └── home.js        └── vendor.js

wxml 每一个.vue 的组件都会被生成为一个wxml 规范的template，然后通过wxml 规范的import 语法来达到一个复用，同时组件如果涉及到props的data 数据，我们也会做相应的处理，举个实际的例子：

<template><divclass="my-component"@click="test"><h1>{{msg}}</h1><other-component:msg="msg"></other-component></div></template><script>import otherComponentfrom'./otherComponent.vue'exportdefault{  components:{ otherComponent},data(){return{ msg:'Hello Vue.js!'}},  methods:{test(){}}}</script>

这样一个Vue的组件的模版部分会生成相应的wxml

<importsrc="components/other-component$hash.wxml"/><templatename="component$hash"><viewclass="my-component"bindtap="handleProxy"><viewclass="_h1">{{msg}}</view><templateis="other-component$hash"wx:if="{{ $c[0] }}"data="{{ ...$c[0] }}"></template></view></template>

可能已经注意到了other-component(:msg="msg") 被转化成了 。mpvue 在运行时会从根组件开始把所有的组件实例数据合并成一个树形的数据，然后通过setData 到appData,$c是$children 的缩写。至于那个0 则是我们的compiler处理过后的一个标记，会为每一个子组件打一个特定的不重复的标记。 树形数据结构如下

// 这儿数据结构是一个数组，index 是动态的{  $child:{'0'{// ... root data      $child:{'0':{// ... data          msg:'Hello Vue.js!',          $child:{// ...data}}}}}}

wxss

这个部分的处理同web 的处理差异不大，唯一不同在于通过配置生成.css 为.wxss ，其中的对于css的若干处理，在postcss-mpvue-wxss 和px2rpx-loader 这两部分的文档中又详细的介绍

• 推荐和小程序一样，将app.json／page.json 放到页面入口处，使用copy-webpack-plugincopy 到对应的生成位置。

这部分内容来源于app 和page 的entry 文件，通常习惯是main.js，你需要在你的入口文件中export default { config: {} }，这才能被我们的loader 识别为这是一个配置，需要写成json 文件

import Vuefrom'vue';import Appfrom'./app';const vueApp=newVue(App);vueApp.$mount();// 这个是我们约定的额外的配置exportdefault{// 这个字段下的数据会被填充到 app.json ／ page.json    config:{        pages:['static/calendar/calendar','^pages/list/list'],// Will be filled in webpack        window:{            backgroundTextStyle:'light',            navigationBarBackgroundColor:'##455A73',            navigationBarTitleText:'美团汽车票',            navigationBarTextStyle:'##fff'}}};

# 六、React

# 1、React 中 keys 的作用是什么？

Keys是React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识

• 在开发过程中，我们需要保证某个元素的key 在其同级元素中具有唯一性。在React Diff 算法中React 会借助元素的Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React 还需要借助Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中Key 的重要性

# 2、传入 setState 函数的第二个参数的作用是什么？

该函数会在setState 函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成：

this.setState({ username:'tylermcginnis33'},()=> console.log('setState has finished and the component has re-rendered.'))

this.setState((prevState, props)=>{return{    streak: prevState.streak+ props.count}})

# 3、React 中 refs 的作用是什么

• Refs 是React 提供给我们的安全访问DOM元素或者某个组件实例的句柄
• 可以为元素添加ref属性然后在回调函数中接受该元素在DOM 树中的句柄，该值会作为回调函数的第一个参数返回

# 4、在生命周期中的哪一步你应该发起 AJAX 请求

我们应当将AJAX 请求放到componentDidMount 函数中执行，主要原因有下

• React 下一代调和算法Fiber 会通过开始或停止渲染的方式优化应用性能，其会影响到componentWillMount 的触发次数。对于componentWillMount 这个生命周期函数的调用次数会变得不确定，React 可能会多次频繁调用componentWillMount。如果我们将AJAX 请求放到componentWillMount 函数中，那么显而易见其会被触发多次，自然也就不是好的选择。
• 如果我们将AJAX 请求放置在生命周期的其他函数中，我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成，并且调用了setState函数将数据添加到组件状态中，对于未挂载的组件则会报错。而在componentDidMount 函数中进行AJAX 请求则能有效避免这个问题

# 5、shouldComponentUpdate 的作用

shouldComponentUpdate 允许我们手动地判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值能够帮我们避免不必要的更新

# 6、如何告诉 React 它应该编译生产环境版

通常情况下我们会使用Webpack 的DefinePlugin 方法来将NODE_ENV 变量值设置为production。编译版本中React会忽略propType 验证以及其他的告警信息，同时还会降低代码库的大小，React 使用了Uglify 插件来移除生产环境下不必要的注释等信息

# 7、概述下 React 中的事件处理逻辑

为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样React 在更新DOM 的时候就不需要考虑如何去处理附着在DOM 上的事件监听器，最终达到优化性能的目的

# 8、createElement 与 cloneElement 的区别是什么

createElement 函数是 JSX 编译之后使用的创建React Element 的函数，而cloneElement 则是用于复制某个元素并传入新的Props

# 9、redux中间件

中间件提供第三方插件的模式，自定义拦截action ->reducer 的过程。变为action ->middlewares ->reducer。这种机制可以让我们改变数据流，实现如异步action ，action 过滤，日志输出，异常报告等功能

• redux-logger：提供日志输出
• redux-thunk：处理异步操作
• redux-promise：处理异步操作，actionCreator的返回值是promise

# 10、redux有什么缺点

• 一个组件所需要的数据，必须由父组件传过来，而不能像flux中直接从store取。
• 当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新render，可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。

# 11、react组件的划分业务组件技术组件？

• 根据组件的职责通常把组件分为UI组件和容器组件。
• UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。
• 两者通过React-Redux 提供connect方法联系起来

# 12、react旧版生命周期函数

初始化阶段

• getDefaultProps:获取实例的默认属性
• getInitialState:获取每个实例的初始化状态
• componentWillMount：组件即将被装载、渲染到页面上
• render:组件在这里生成虚拟的DOM节点
• componentDidMount:组件真正在被装载之后

运行中状态

• componentWillReceiveProps:组件将要接收到属性的时候调用
• shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻止render调用，后面的函数不会被继续执行了）
• componentWillUpdate:组件即将更新不能修改属性和状态
• render:组件重新描绘
• componentDidUpdate:组件已经更新

销毁阶段

• componentWillUnmount:组件即将销毁

# 新版生命周期

在新版本中，React 官方对生命周期有了新的 变动建议:

• 使用getDerivedStateFromProps替换componentWillMount；
• 使用getSnapshotBeforeUpdate替换componentWillUpdate；
• 避免使用componentWillReceiveProps；

其实该变动的原因，正是由于上述提到的Fiber。首先，从上面我们知道 React 可以分成reconciliation 与commit两个阶段，对应的生命周期如下:

reconciliation

• componentWillMount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate

commit

• componentDidMount
• componentDidUpdate
• componentWillUnmount

在Fiber 中，reconciliation 阶段进行了任务分割，涉及到 暂停 和 重启，因此可能会导致reconciliation 中的生命周期函数在一次更新渲染循环中被 多次调用 的情况，产生一些意外错误

新版的建议生命周期如下:

classComponentextendsReact.Component{// 替换 `componentWillReceiveProps` ，// 初始化和 update 时被调用// 静态函数，无法使用 thisstaticgetDerivedStateFromProps(nextProps, prevState){}// 判断是否需要更新组件// 可以用于组件性能优化shouldComponentUpdate(nextProps, nextState){}// 组件被挂载后触发componentDidMount(){}// 替换 componentWillUpdate// 可以在更新之前获取最新 dom 数据getSnapshotBeforeUpdate(){}// 组件更新后调用componentDidUpdate(){}// 组件即将销毁componentWillUnmount(){}// 组件已销毁componentDidUnMount(){}}

使用建议:

• 在constructor初始化state；
• 在componentDidMount中进行事件监听，并在componentWillUnmount中解绑事件；
• 在componentDidMount中进行数据的请求，而不是在componentWillMount；
• 需要根据props 更新state 时，使用getDerivedStateFromProps(nextProps, prevState)；
  • 旧 props 需要自己存储，以便比较；

publicstaticgetDerivedStateFromProps(nextProps, prevState){	// 当新 props 中的 data 发生变化时，同步更新到 state 上	if(nextProps.data!== prevState.data){		return{			data: nextProps.data		}	}else{		return null1	}}

可以在componentDidUpdate监听 props 或者 state 的变化，例如:

componentDidUpdate(prevProps){	// 当 id 发生变化时，重新获取数据	if(this.props.id!== prevProps.id){		this.fetchData(this.props.id);	}}

• 在componentDidUpdate使用setState时，必须加条件，否则将进入死循环；
• getSnapshotBeforeUpdate(prevProps, prevState)可以在更新之前获取最新的渲染数据，它的调用是在 render 之后， update 之前；
• shouldComponentUpdate: 默认每次调用setState，一定会最终走到 diff 阶段，但可以通过shouldComponentUpdate的生命钩子返回false来直接阻止后面的逻辑执行，通常是用于做条件渲染，优化渲染的性能。

# 13、react性能优化是哪个周期函数

shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能，如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法，可以极大的提高性能

# 14、为什么虚拟dom会提高性能

虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能

具体实现步骤如下

• 用JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的DOM 树，插到文档当中
• 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
• 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新

# 15、diff算法?

• 把树形结构按照层级分解，只比较同级元素。
• 给列表结构的每个单元添加唯一的key属性，方便比较。
• React 只会匹配相同class 的component（这里面的class指的是组件的名字）
• 合并操作，调用component 的setState 方法的时候,React 将其标记为 -dirty.到每一个事件循环结束,React 检查所有标记dirty的component重新绘制.
• 选择性子树渲染。开发人员可以重写shouldComponentUpdate提高diff的性能

# 16、react性能优化方案

• 重写shouldComponentUpdate来避免不必要的dom操作
• 使用production 版本的react.js
• 使用key来帮助React识别列表中所有子组件的最小变化

# 16、简述flux 思想

Flux 的最大特点，就是数据的"单向流动"。

• 用户访问View
• View发出用户的Action
• Dispatcher 收到Action，要求Store 进行相应的更新
• Store 更新后，发出一个"change"事件
• View 收到"change"事件后，更新页面

# 17、说说你用react有什么坑点？

1. JSX做表达式判断时候，需要强转为boolean类型

如果不使用!!b 进行强转数据类型，会在页面里面输出0。

render(){const b=0;return<div>{!!b&&<div>这是一段文本</div>}</div>}

2. 尽量不要在componentWillReviceProps 里使用 setState，如果一定要使用，那么需要判断结束条件，不然会出现无限重渲染，导致页面崩溃

3. 给组件添加ref时候，尽量不要使用匿名函数，因为当组件更新的时候，匿名函数会被当做新的prop处理，让ref属性接受到新函数的时候，react内部会先清空ref，也就是会以null为回调参数先执行一次ref这个props，然后在以该组件的实例执行一次ref，所以用匿名函数做ref的时候，有的时候去ref赋值后的属性会取到null

4. 遍历子节点的时候，不要用 index 作为组件的 key 进行传入

# 18、我现在有一个button，要用react在上面绑定点击事件，要怎么做？

classDemo{render(){return<buttononClick={(e)=>{alert('我点击了按钮')}}>      按钮</button>}}

你觉得你这样设置点击事件会有什么问题吗？

由于onClick使用的是匿名函数，所有每次重渲染的时候，会把该onClick当做一个新的prop来处理，会将内部缓存的onClick事件进行重新赋值，所以相对直接使用函数来说，可能有一点的性能下降

修改

classDemo{onClick=(e)=>{alert('我点击了按钮')}render(){return<button onClick={this.onClick}>      按钮</button>}

# 19、react 的虚拟dom是怎么实现的

首先说说为什么要使用Virturl DOM，因为操作真实DOM的耗费的性能代价太高，所以react内部使用js实现了一套dom结构，在每次操作在和真实dom之前，使用实现好的diff算法，对虚拟dom进行比较，递归找出有变化的dom节点，然后对其进行更新操作。为了实现虚拟DOM，我们需要把每一种节点类型抽象成对象，每一种节点类型有自己的属性，也就是prop，每次进行diff的时候，react会先比较该节点类型，假如节点类型不一样，那么react会直接删除该节点，然后直接创建新的节点插入到其中，假如节点类型一样，那么会比较prop是否有更新，假如有prop不一样，那么react会判定该节点有更新，那么重渲染该节点，然后在对其子节点进行比较，一层一层往下，直到没有子节点

# 20、react 的渲染过程中，兄弟节点之间是怎么处理的？也就是key值不一样的时候

通常我们输出节点的时候都是map一个数组然后返回一个ReactNode，为了方便react内部进行优化，我们必须给每一个reactNode添加key，这个key prop在设计值处不是给开发者用的，而是给react用的，大概的作用就是给每一个reactNode添加一个身份标识，方便react进行识别，在重渲染过程中，如果key一样，若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新，如果key不一样，则react先销毁该组件，然后重新创建该组件

# 21、介绍一下react

1. 以前我们没有jquery的时候，我们大概的流程是从后端通过ajax获取到数据然后使用jquery生成dom结果然后更新到页面当中，但是随着业务发展，我们的项目可能会越来越复杂，我们每次请求到数据，或则数据有更改的时候，我们又需要重新组装一次dom结构，然后更新页面，这样我们手动同步dom和数据的成本就越来越高，而且频繁的操作dom，也使我我们页面的性能慢慢的降低。
2. 这个时候mvvm出现了，mvvm的双向数据绑定可以让我们在数据修改的同时同步dom的更新，dom的更新也可以直接同步我们数据的更改，这个特定可以大大降低我们手动去维护dom更新的成本，mvvm为react的特性之一，虽然react属于单项数据流，需要我们手动实现双向数据绑定。
3. 有了mvvm还不够，因为如果每次有数据做了更改，然后我们都全量更新dom结构的话，也没办法解决我们频繁操作dom结构(降低了页面性能)的问题，为了解决这个问题，react内部实现了一套虚拟dom结构，也就是用js实现的一套dom结构，他的作用是讲真实dom在js中做一套缓存，每次有数据更改的时候，react内部先使用算法，也就是鼎鼎有名的diff算法对dom结构进行对比，找到那些我们需要新增、更新、删除的dom节点，然后一次性对真实DOM进行更新，这样就大大降低了操作dom的次数。 那么diff算法是怎么运作的呢，首先，diff针对类型不同的节点，会直接判定原来节点需要卸载并且用新的节点来装载卸载的节点的位置；针对于节点类型相同的节点，会对比这个节点的所有属性，如果节点的所有属性相同，那么判定这个节点不需要更新，如果节点属性不相同，那么会判定这个节点需要更新，react会更新并重渲染这个节点。
4. react设计之初是主要负责UI层的渲染，虽然每个组件有自己的state，state表示组件的状态，当状态需要变化的时候，需要使用setState更新我们的组件，但是，我们想通过一个组件重渲染它的兄弟组件，我们就需要将组件的状态提升到父组件当中，让父组件的状态来控制这两个组件的重渲染，当我们组件的层次越来越深的时候，状态需要一直往下传，无疑加大了我们代码的复杂度，我们需要一个状态管理中心，来帮我们管理我们状态state。
5. 这个时候，redux出现了，我们可以将所有的state交给redux去管理，当我们的某一个state有变化的时候，依赖到这个state的组件就会进行一次重渲染，这样就解决了我们的我们需要一直把state往下传的问题。redux有action、reducer的概念，action为唯一修改state的来源，reducer为唯一确定state如何变化的入口，这使得redux的数据流非常规范，同时也暴露出了redux代码的复杂，本来那么简单的功能，却需要完成那么多的代码。
6. 后来，社区就出现了另外一套解决方案，也就是mobx，它推崇代码简约易懂，只需要定义一个可观测的对象，然后哪个组价使用到这个可观测的对象，并且这个对象的数据有更改，那么这个组件就会重渲染，而且mobx内部也做好了是否重渲染组件的生命周期shouldUpdateComponent，不建议开发者进行更改，这使得我们使用mobx开发项目的时候可以简单快速的完成很多功能，连redux的作者也推荐使用mobx进行项目开发。但是，随着项目的不断变大，mobx也不断暴露出了它的缺点，就是数据流太随意，出了bug之后不好追溯数据的流向，这个缺点正好体现出了redux的优点所在，所以针对于小项目来说，社区推荐使用mobx，对大项目推荐使用redux

# 22、React怎么做数据的检查和变化

Model改变之后（可能是调用了setState），触发了virtual dom的更新，再用diff算法来把virtual DOM比较real DOM，看看是哪个dom节点更新了，再渲染real dom

# 23、react-router里的<Link>标签和<a>标签有什么区别

对比<a>,Link组件避免了不必要的重渲染

# 24、connect原理

• 首先connect之所以会成功，是因为Provider组件：
• 在原应用组件上包裹一层，使原来整个应用成为Provider的子组件 接收Redux的store作为props，通过context对象传递给子孙组件上的connect

connect做了些什么。它真正连接Redux 和React，它包在我们的容器组件的外一层，它接收上面Provider 提供的store 里面的state 和dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件

• connect是一个高阶函数，首先传入mapStateToProps、mapDispatchToProps，然后返回一个生产Component的函数(wrapWithConnect)，然后再将真正的Component作为参数传入wrapWithConnect，这样就生产出一个经过包裹的Connect组件，

该组件具有如下特点

• 通过props.store获取祖先Component的store props包括stateProps、dispatchProps、parentProps,合并在一起得到nextState，作为props传给真正的Component componentDidMount时，添加事件this.store.subscribe(this.handleChange)，实现页面交互
• shouldComponentUpdate时判断是否有避免进行渲染，提升页面性能，并得到nextStatecomponentWillUnmount时移除注册的事件this.handleChange

由于connect的源码过长，我们只看主要逻辑

exportdefaultfunctionconnect(mapStateToProps, mapDispatchToProps, mergeProps, options={}){returnfunctionwrapWithConnect(WrappedComponent){classConnectextendsComponent{constructor(props, context){// 从祖先Component处获得storethis.store= props.store|| context.storethis.stateProps=computeStateProps(this.store, props)this.dispatchProps=computeDispatchProps(this.store, props)this.state={ storeState:null}// 对stateProps、dispatchProps、parentProps进行合并this.updateState()}shouldComponentUpdate(nextProps, nextState){// 进行判断，当数据发生改变时，Component重新渲染if(propsChanged|| mapStateProducedChange|| dispatchPropsChanged){this.updateState(nextProps)returntrue}}componentDidMount(){// 改变Component的statethis.store.subscribe(()={this.setState({              storeState:this.store.getState()})})}render(){// 生成包裹组件Connectreturn(<WrappedComponent{...this.nextState}/>)}}      Connect.contextTypes={        store: storeShape}return Connect;}}

# 25、Redux实现原理解析

为什么要用redux

在React中，数据在组件中是单向流动的，数据从一个方向父组件流向子组件（通过props）,所以，两个非父子组件之间通信就相对麻烦，redux的出现就是为了解决state里面的数据问题

Redux设计理念

Redux是将整个应用状态存储到一个地方上称为store,里面保存着一个状态树store tree,组件可以派发(dispatch)行为(action)给store,而不是直接通知其他组件，组件内部通过订阅store中的状态state来刷新自己的视图

Redux三大原则

• 唯一数据源

整个应用的state都被存储到一个状态树里面，并且这个状态树，只存在于唯一的store中

• 保持只读状态

state是只读的，唯一改变state的方法就是触发action，action是一个用于描述以发生时间的普通对象

• 数据改变只能通过纯函数来执行

使用纯函数来执行修改，为了描述action如何改变state的，你需要编写reducers

Redux源码

letcreateStore=(reducer)=>{let state;//获取状态对象//存放所有的监听函数let listeners=[];letgetState=()=> state;//提供一个方法供外部调用派发actionletdispath=(action)=>{//调用管理员reducer得到新的state        state=reducer(state, action);//执行所有的监听函数        listeners.forEach((l)=>l())}//订阅状态变化事件，当状态改变发生之后执行监听函数letsubscribe=(listener)=>{        listeners.push(listener);}dispath();return{        getState,        dispath,        subscribe}}letcombineReducers=(renducers)=>{//传入一个renducers管理组，返回的是一个renducerreturnfunction(state={},action={}){let newState={};for(var attrin renducers){            newState[attr]=renducers[attr](state[attr],action)}return newState;}}export{createStore,combineReducers};

# 26、pureComponent和FunctionComponent区别

PureComponent和Component完全相同，但是在shouldComponentUpdate实现中，PureComponent使用了props和state的浅比较。主要作用是用来提高某些特定场景的性能

# 27 react hooks，它带来了那些便利

• 代码逻辑聚合，逻辑复用
• HOC嵌套地狱
• 代替class

React 中通常使用 类定义 或者 函数定义 创建组件:

在类定义中，我们可以使用到许多 React 特性，例如 state、 各种组件生命周期钩子等，但是在函数定义中，我们却无能为力，因此 React 16.8 版本推出了一个新功能 (React Hooks)，通过它，可以更好的在函数定义组件中使用 React 特性。

好处:

1. 跨组件复用: 其实 render props / HOC 也是为了复用，相比于它们，Hooks 作为官方的底层 API，最为轻量，而且改造成本小，不会影响原来的组件层次结构和传说中的嵌套地狱；
2. 类定义更为复杂

• 不同的生命周期会使逻辑变得分散且混乱，不易维护和管理；
• 时刻需要关注this的指向问题；
• 代码复用代价高，高阶组件的使用经常会使整个组件树变得臃肿；

3. 状态与UI隔离: 正是由于 Hooks 的特性，状态逻辑会变成更小的粒度，并且极容易被抽象成一个自定义 Hooks，组件中的状态和 UI 变得更为清晰和隔离。

注意:

• 避免在 循环/条件判断/嵌套函数 中调用 hooks，保证调用顺序的稳定；
• 只有 函数定义组件 和 hooks 可以调用 hooks，避免在 类组件 或者 普通函数 中调用；
• 不能在useEffect中使用useState，React 会报错提示；
• 类组件不会被替换或废弃，不需要强制改造类组件，两种方式能并存；

重要钩子

1. 状态钩子 (useState): 用于定义组件的 State，其到类定义中this.state的功能；

// useState 只接受一个参数: 初始状态// 返回的是组件名和更改该组件对应的函数const[flag, setFlag]=useState(true);// 修改状态setFlag(false)// 上面的代码映射到类定义中:this.state={	flag:true}const flag=this.state.flagconstsetFlag=(bool)=>{this.setState({        flag: bool,})}

2. 生命周期钩子 (useEffect):

类定义中有许多生命周期函数，而在 React Hooks 中也提供了一个相应的函数 (useEffect)，这里可以看做componentDidMount、componentDidUpdate和componentWillUnmount的结合。

useEffect(callback, [source])接受两个参数

• callback: 钩子回调函数；
• source: 设置触发条件，仅当 source 发生改变时才会触发；
• useEffect钩子在没有传入[source]参数时，默认在每次 render 时都会优先调用上次保存的回调中返回的函数，后再重新调用回调；

useEffect(()=>{	// 组件挂载后执行事件绑定	console.log('on')	addEventListener()	// 组件 update 时会执行事件解绑	return()=>{		console.log('off')		removeEventListener()	}},[source]);// 每次 source 发生改变时，执行结果(以类定义的生命周期，便于大家理解):// --- DidMount ---// 'on'// --- DidUpdate ---// 'off'// 'on'// --- DidUpdate ---// 'off'// 'on'// --- WillUnmount ---// 'off'

通过第二个参数，我们便可模拟出几个常用的生命周期:

• componentDidMount: 传入[]时，就只会在初始化时调用一次

const useMount = (fn) => useEffect(fn, [])

• componentWillUnmount: 传入[]，回调中的返回的函数也只会被最终执行一次

constuseUnmount=(fn)=>useEffect(()=> fn,[])

• mounted: 可以使用 useState 封装成一个高度可复用的 mounted 状态；

constuseMounted=()=>{const[mounted, setMounted]=useState(false);useEffect(()=>{!mounted&&setMounted(true);return()=>setMounted(false);},[]);return mounted;}

• componentDidUpdate: useEffect每次均会执行，其实就是排除了 DidMount 后即可；

const mounted=useMounted()useEffect(()=>{    mounted&&fn()})

3. 其它内置钩子:

• useContext: 获取 context 对象
• useReducer: 类似于 Redux 思想的实现，但其并不足以替代 Redux，可以理解成一个组件内部的 redux:
  • 并不是持久化存储，会随着组件被销毁而销毁；
  • 属于组件内部，各个组件是相互隔离的，单纯用它并无法共享数据；
  • 配合useContext`的全局性，可以完成一个轻量级的 Redux；(easy-peasy)
• useCallback: 缓存回调函数，避免传入的回调每次都是新的函数实例而导致依赖组件重新渲染，具有性能优化的效果；
• useMemo: 用于缓存传入的 props，避免依赖的组件每次都重新渲染；
• useRef: 获取组件的真实节点；
• useLayoutEffect
  • DOM更新同步钩子。用法与useEffect类似，只是区别于执行时间点的不同
  • useEffect属于异步执行，并不会等待 DOM 真正渲染后执行，而useLayoutEffect则会真正渲染后才触发；
  • 可以获取更新后的 state；

4. 自定义钩子(useXxxxx): 基于 Hooks 可以引用其它 Hooks 这个特性，我们可以编写自定义钩子，如上面的useMounted。又例如，我们需要每个页面自定义标题:

functionuseTitle(title){useEffect(()=>{      document.title= title;});}// 使用:functionHome(){	const title='我是首页'	useTitle(title)	return(		<div>{title}</div>	)}

# 28、React Portal 有哪些使用场景

• 在以前， react 中所有的组件都会位于 #app 下，而使用 Portals 提供了一种脱离 #app 的组件
• 因此 Portals 适合脱离文档流(out of flow) 的组件，特别是 position: absolute 与 position: fixed的组件。比如模态框，通知，警告，goTop 等。

以下是官方一个模态框的示例，可以在以下地址中测试效果

<html><body><divid="app"></div><divid="modal"></div><divid="gotop"></div><divid="alert"></div></body></html>

const modalRoot= document.getElementById('modal');classModalextendsReact.Component{constructor(props){super(props);this.el= document.createElement('div');}componentDidMount(){    modalRoot.appendChild(this.el);}componentWillUnmount(){    modalRoot.removeChild(this.el);}render(){return ReactDOM.createPortal(this.props.children,this.el,);}}

React Hooks当中的useEffect是如何区分生命周期钩子的

useEffect可以看成是componentDidMount，componentDidUpdate和componentWillUnmount三者的结合。useEffect(callback, [source])接收两个参数，调用方式如下

useEffect(()=>{   console.log('mounted');return()=>{       console.log('willUnmount');}},[source]);

生命周期函数的调用主要是通过第二个参数[source]来进行控制，有如下几种情况：

• [source]参数不传时，则每次都会优先调用上次保存的函数中返回的那个函数，然后再调用外部那个函数；
• [source]参数传[]时，则外部的函数只会在初始化时调用一次，返回的那个函数也只会最终在组件卸载时调用一次；
• [source]参数有值时，则只会监听到数组中的值发生变化后才优先调用返回的那个函数，再调用外部的函数。

# 29、react和vue的区别

相同点：

1. 数据驱动页面，提供响应式的试图组件
2. 都有virtual DOM,组件化的开发，通过props参数进行父子之间组件传递数据，都实现了webComponents规范
3. 数据流动单向，都支持服务器的渲染SSR
4. 都有支持native的方法，react有React native， vue有wexx

不同点：

1. 数据绑定：Vue实现了双向的数据绑定，react数据流动是单向的
2. 数据渲染：大规模的数据渲染，react更快
3. 使用场景：React配合Redux架构适合大规模多人协作复杂项目，Vue适合小快的项目
4. 开发风格：react推荐做法jsx + inline style把html和css都写在js了

vue是采用webpack +vue-loader单文件组件格式，html, js, css同一个文件

# 30、什么是高阶组件(HOC)

• 高阶组件(Higher Order Componennt)本身其实不是组件，而是一个函数，这个函数接收一个元组件作为参数，然后返回一个新的增强组件，高阶组件的出现本身也是为了逻辑复用，举个例子

functionwithLoginAuth(WrappedComponent){returnclassextends React.Component{constructor(props){super(props);this.state={            isLogin:false};}asynccomponentDidMount(){const isLogin=awaitgetLoginStatus();this.setState({ isLogin});}render(){if(this.state.isLogin){return<WrappedComponent{...this.props}/>;}return(<div>您还未登录...</div>);}}}

# 31、React实现的移动应用中，如果出现卡顿，有哪些可以考虑的优化方案

• 增加shouldComponentUpdate钩子对新旧props进行比较，如果值相同则阻止更新，避免不必要的渲染，或者使用PureReactComponent替代Component，其内部已经封装了shouldComponentUpdate的浅比较逻辑
• 对于列表或其他结构相同的节点，为其中的每一项增加唯一key属性，以方便React的diff算法中对该节点的复用，减少节点的创建和删除操作
• render函数中减少类似onClick={() => {doSomething()}}的写法，每次调用render函数时均会创建一个新的函数，即使内容没有发生任何变化，也会导致节点没必要的重渲染，建议将函数保存在组件的成员对象中，这样只会创建一次
• 组件的props如果需要经过一系列运算后才能拿到最终结果，则可以考虑使用reselect库对结果进行缓存，如果props值未发生变化，则结果直接从缓存中拿，避免高昂的运算代价
• webpack-bundle-analyzer分析当前页面的依赖包，是否存在不合理性，如果存在，找到优化点并进行优化

# 32、Fiber

React 的核心流程可以分为两个部分:

• reconciliation (调度算法，也可称为render)
  • 更新state 与props；
  • 调用生命周期钩子；
  • 生成virtual dom
    • 这里应该称为Fiber Tree 更为符合；
  • 通过新旧 vdom 进行 diff 算法，获取 vdom change
  • 确定是否需要重新渲染
• commit
  • 如需要，则操作dom 节点更新

要了解 Fiber，我们首先来看为什么需要它

• 问题: 随着应用变得越来越庞大，整个更新渲染的过程开始变得吃力，大量的组件渲染会导致主进程长时间被占用，导致一些动画或高频操作出现卡顿和掉帧的情况。而关键点，便是 同步阻塞。在之前的调度算法中，React 需要实例化每个类组件，生成一颗组件树，使用 同步递归 的方式进行遍历渲染，而这个过程最大的问题就是无法 暂停和恢复。
• 解决方案: 解决同步阻塞的方法，通常有两种: 异步 与 任务分割。而 React Fiber 便是为了实现任务分割而诞生的
• 简述
  • 在React V16 将调度算法进行了重构， 将之前的stack reconciler 重构成新版的 fiberreconciler，变成了具有链表和指针的 单链表树遍历算法。通过指针映射，每个单元都记录着遍历当下的上一步与下一步，从而使遍历变得可以被暂停和重启
  • 这里我理解为是一种 任务分割调度算法，主要是 将原先同步更新渲染的任务分割成一个个独立的 小任务单位，根据不同的优先级，将小任务分散到浏览器的空闲时间执行，充分利用主进程的事件循环机制
• 核心
  • Fiber 这里可以具象为一个 数据结构

classFiber{	constructor(instance){		this.instance= instance		// 指向第一个 child 节点		this.child= child		// 指向父节点		this.return= parent		// 指向第一个兄弟节点		this.sibling= previous	}}

• 链表树遍历算法: 通过 节点保存与映射，便能够随时地进行 停止和重启，这样便能达到实现任务分割的基本前提
  • 首先通过不断遍历子节点，到树末尾；
  • 开始通过sibling 遍历兄弟节点；
  • return 返回父节点，继续执行2；
  • 直到 root 节点后，跳出遍历；
• 任务分割，React 中的渲染更新可以分成两个阶段
  • reconciliation 阶段: vdom 的数据对比，是个适合拆分的阶段，比如对比一部分树后，先暂停执行个动画调用，待完成后再回来继续比对
  • Commit 阶段: 将 change list 更新到 dom 上，并不适合拆分，才能保持数据与 UI 的同步。否则可能由于阻塞 UI 更新，而导致数据更新和 UI 不一致的情况
• 分散执行: 任务分割后，就可以把小任务单元分散到浏览器的空闲期间去排队执行，而实现的关键是两个新API:requestIdleCallback 与requestAnimationFrame
  • 低优先级的任务交给requestIdleCallback处理，这是个浏览器提供的事件循环空闲期的回调函数，需要pollyfill，而且拥有deadline 参数，限制执行事件，以继续切分任务；
  • 高优先级的任务交给requestAnimationFrame处理；

// 类似于这样的方式requestIdleCallback((deadline)=>{// 当有空闲时间时，我们执行一个组件渲染；// 把任务塞到一个个碎片时间中去；while((deadline.timeRemaining()>0|| deadline.didTimeout)&& nextComponent){        nextComponent=performWork(nextComponent);}});

• 优先级策略: 文本框输入 > 本次调度结束需完成的任务 > 动画过渡 > 交互反馈 > 数据更新 > 不会显示但以防将来会显示的任务

• Fiber 其实可以算是一种编程思想，在其它语言中也有许多应用(Ruby Fiber)。
• 核心思想是 任务拆分和协同，主动把执行权交给主线程，使主线程有时间空挡处理其他高优先级任务。
• 当遇到进程阻塞的问题时，任务分割、异步调用 和 缓存策略 是三个显著的解决思路。

# 33、setState

在了解setState之前，我们先来简单了解下 React 一个包装结构: Transaction:

事务 (Transaction)

是 React 中的一个调用结构，用于包装一个方法，结构为: initialize - perform(method) - close。通过事务，可以统一管理一个方法的开始与结束；处于事务流中，表示进程正在执行一些操作

• setState: React 中用于修改状态，更新视图。它具有以下特点:

异步与同步: setState并不是单纯的异步或同步，这其实与调用时的环境相关:

• 在合成事件 和生命周期钩子(除 componentDidUpdate) 中，setState是"异步"的；
  • 原因: 因为在setState的实现中，有一个判断: 当更新策略正在事务流的执行中时，该组件更新会被推入dirtyComponents队列中等待执行；否则，开始执行batchedUpdates队列更新；
    • 在生命周期钩子调用中，更新策略都处于更新之前，组件仍处于事务流中，而componentDidUpdate是在更新之后，此时组件已经不在事务流中了，因此则会同步执行；
    • 在合成事件中，React 是基于 事务流完成的事件委托机制 实现，也是处于事务流中；
  • 问题: 无法在setState后马上从this.state上获取更新后的值。
  • 解决: 如果需要马上同步去获取新值，setState其实是可以传入第二个参数的。setState(updater, callback)，在回调中即可获取最新值；
• 在原生事件 和 setTimeout 中，setState是同步的，可以马上获取更新后的值；
  • 原因: 原生事件是浏览器本身的实现，与事务流无关，自然是同步；而setTimeout是放置于定时器线程中延后执行，此时事务流已结束，因此也是同步；
• 批量更新: 在 合成事件 和 生命周期钩子 中，setState更新队列时，存储的是 合并状态(Object.assign)。因此前面设置的 key 值会被后面所覆盖，最终只会执行一次更新；
• 函数式: 由于 Fiber 及 合并 的问题，官方推荐可以传入 函数 的形式。setState(fn)，在fn中返回新的state对象即可，例如this.setState((state, props) => newState)；
  • 使用函数式，可以用于避免setState的批量更新的逻辑，传入的函数将会被 顺序调用；

注意事项:

• setState 合并，在 合成事件 和 生命周期钩子 中多次连续调用会被优化为一次；
• 当组件已被销毁，如果再次调用setState，React 会报错警告，通常有两种解决办法
  • 将数据挂载到外部，通过 props 传入，如放到 Redux 或 父级中；
  • 在组件内部维护一个状态量 (isUnmounted)，componentWillUnmount中标记为 true，在setState前进行判断；

# 34、HOC(高阶组件)

HOC(Higher Order Componennt) 是在 React 机制下社区形成的一种组件模式，在很多第三方开源库中表现强大。

简述:

• 高阶组件不是组件，是 增强函数，可以输入一个元组件，返回出一个新的增强组件；
• 高阶组件的主要作用是 代码复用，操作 状态和参数；

用法:

• 属性代理 (Props Proxy): 返回出一个组件，它基于被包裹组件进行 功能增强；

1. 默认参数: 可以为组件包裹一层默认参数；

functionproxyHoc(Comp){	returnclassextends React.Component{		render(){			const newProps={				name:'tayde',				age:1,			}			return<Comp{...this.props}{...newProps}/>		}	}}

2. 提取状态: 可以通过 props 将被包裹组件中的 state 依赖外层，例如用于转换受控组件:

functionwithOnChange(Comp){	returnclassextends React.Component{		constructor(props){			super(props)			this.state={				name:'',			}		}		onChangeName=()=>{			this.setState({				name:'dongdong',			})		}		render(){			const newProps={				value:this.state.name,				onChange:this.onChangeName,			}			return<Comp{...this.props}{...newProps}/>		}	}}