尽管js是一门单线程的脚本语言，其同步代码我们是自上而下读取执行的，我们无法干涉其执行顺序，但是我们可以借助异步代码中的微任务队列来实现任务的并发任务控制。那我们用一个例子来带入一下。

如何使下面的代码按照我所想的效果来输出

function timeout(time) {

  return new Promise((resolve) => {

    setTimeout(() => {

      resolve()

    }, time)

  })

}



function addTask(time, name) {

  superTask

    .add(() => timeout(time)) 

    .then(() => {

      console.log(`任务${name}完成`);

    })

}



addTask(10000, 1) // 10000   3

addTask(5000, 2)  // 5000    1

addTask(3000, 3)  // 8000    2

addTask(4000, 4)  // 12000   4

addTask(5000, 5)  // 15000   5

就是使得两个任务并发执行，当一个任务执行完了，下一个任务就接在空出来的任务队列中，以此类推。
在代码中我们可以看到在add方法调用后接了.then那么说明我们必须在add函数执行完返回出一个Promise对象

我们在实现并发任务控制之前需要明确并发几个任务执行我们应该可以人工控制

class SuperTask {

  constructor(executeCount = 2) {

    this.executeCount = executeCount;  // 并发执行的任务数

    this.runningCount = 0; // 正在执行的任务数

    this.tasks = [];  // 任务队列

  }

  

  // 添加任务

  add(task) {

    return new Promise((resolve,reject) => {

      this.tasks.push({

        task,

        resolve,

        reject

      });  // add方法将任务添加到任务队列中，后面我会解释为什么需要这么做

      

      /*接下来就是判断正在执行的任务，是不是达到了并发任务数量*/

       this._run();  // 为了代码的可读性，将这个另外写一个方法

    })

  }

  

  // 执行任务队列中的任务

  _run() {

    // 如果正在执行的任务数小于并发执行的任务数，那么我们就将任务队列队头的元素取出来执行

    if(this.tasks.length && this.runningCount < this.executeCount) {

      //任务队列中有任务， 并发任务队列有空余，可以执行任务

      this.runningCount++;

      const { task,resolve,reject } = this.tasks.shift();

      task().then(resolve,reject).finally(res => {

        this.runningCount--;

        this._run();

      })

    }

  }

}

利用Promise.then微任务的特性，我们可以控制Promise的状态改变时，再去取任务队列中队头元素再执行，这个地方有一些细节，就是add函数执行时，返回出的是一个Promise对象，但是我们需要将他resolve以及reject保存下来，使得所有的任务并不是共用同一个Promsie对象，而是每一个任务执行完都是独立的Promise，所以我们需要将其的resolve、reject保存下来，当任务并发执行的队列调用时再使用，再每个task执行完之后的.then之后就说明这个任务已经执行完了，此时this.runningCount--；再递归调用_run函数，考虑代码的完整性，我们使用Promise.finally来执行后续任务，Promise.finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。

代码测试

const superTask = new SuperTask(2)  // 并发执行两个任务



function addTask(time, name) {

  superTask

    .add(() => timeout(time))

    .then(() => {

      console.log(`任务${name}完成`);

    })

}



addTask(10000, 1) // 10000   3

addTask(5000, 2)  // 5000    1

addTask(3000, 3)  // 8000    2

addTask(4000, 4)  // 12000   4

addTask(5000, 5)  // 15000   5

个人见解

在js中实现并发任务控制，其核心在于借助我们可控制的Promise的状态何时改变，在其状态改变时，说明之前在执行的任务已经执行完毕或者报错了，那么就应该执行后一个任务，但是如果只单纯使用Promsie.then去调用的话，如果其中某一个函数报错，那后续的就不会执行了，所以我们使用Promsie.finally来递归调用，为了保证每一个任务不会相互受影响，我们将其resolve和reject一并保存，在其执行时使用保存的resolve和reject，在后面接.finally这样就实现了。以上就是我个人对于并发任务的想法与见解，当然方式有各种各样，欢迎大家留言讨论。

函数的尾调用

尾调用是什么，它能解决什么问题，他的存在意味着什么，为什么我叫他内存的清道夫，下面我将带读者通过概念，作用，尾巴递归三个方面来学习使用函数的尾调用。

尾调用概念

尾调用指的是在函数的最后一步通过return调用另一个函数

function fn() {

    return _fn()

}

如上就是一个标准的函数尾调用

尾调用的作用

尾调用的作用非常重要，它可以为我们节省在函数调用时的内存，这也是我为什么叫它内存的清道夫，我们先来看一下函数执行的底层原来，再来了解尾调用是如何节省内存的

函数执行中的帧

伴随函数的执行，函数会在内存中生成一个调用帧，我们先设定A,B,C三个函数，通过下面的形式调用（注意下面是普通的函数调用）

fn_A() {

    fn_B()

}

fn_B() {

    fn_C()

}

如上：A函数执行，执行B函数，B函数内执行C函数，函数执行的过程是这样的：

• A执行生成一个A调用帧，在内部执行B函数


• B函数生成一个调用帧在A调用帧上方


• B函数内执行C函数，C函数执行生成一个调用帧在B调用帧上方，其本质就是一个调用帧栈


• C函数执行完毕，C调用帧出栈


• B函数执行完毕，B调用帧出栈


• A函数执行完毕，A调用帧出栈

通过以上过程就能了解函数执行中会生成调用帧占用内存，而不断地嵌套函数会占据越来越多的内存空间，下面我们来看看尾调用是如何改变这一过程达到优化的效果。

尾调用优化的过程

那么如果我们使用尾调用来执行函数内部的函数。它的过程是怎么样的？

fn_A() {

   return fn_B()

}

fn_B() {

   return fn_C()

}

• A执行生成一个A调用帧入栈


• 由于B函数在尾部执行，无需A的资源，所有A调用帧出栈，生成B调用帧入栈


• B函数执行，尾部调用C函数，无需B的资源，B调用帧出栈出栈，生成C调用帧入栈


• C执行结束，C调用帧出栈

尾调用：在执行A函数中的B函数的前就可以对A调用帧进行出栈处理，也就是说在这连续嵌套一过程中，栈中只有一个调用帧，大大节省了内存空间，成为一名合格的内存清道夫！

注意：真正的尾调用是需要考虑到资源的占用，即B函数执行不需要A函数内的资源，才能算是真正的尾调用

一种特殊的尾调用

当尾调用的函数是自身的时候就诞生了一种特殊的尾调用形式即尾递归

function fn() {

    return fn()

}

正常的递归使用如果过多的话会产生栈溢出的现象，所以可以使用尾递归来解决这个问题，我们来看下面的例子

function fn(n) {

    if(n === 1) return 1

    return n * fn(n-1)

}

console.log(fn(6)); // 720

如上是一个普通的递归函数求阶乘，那么我们可以使用尾递归来优化这个过程

function fn(n, tol) {

  if (n === 1) return tol;

  return fn(n - 1, n * tol);

}

console.log(fn(6, 1)); // 720

尾递归的实现

需要注意的是我们只有在严格模式下，才能开启尾调用模式，所以在其他场景我们需要使用其他的解决方案来替代尾调用，尾递归也同理，因为尾递归的过程其实是循环调用，所以利用循环调用可以变相实现尾递归，这里涉及到了一个名词：蹦床函数

function trampoline(f) {

  while (f && f instanceof Function) {

    f = f();

  }

  return f;

}

如上就是一个蹦床函数的封装，传入的参数是要进行递归的函数，其作用是代替递归，进行循环调用传入参数，下面我们来看看具体应用

function num (x,y) {

    if(y > 0) {

        return num(x+1,y-1)

    }else {

        return x

    }

}

num(1,10000) // Maximum call stack size exceeded

Maximum call stack size exceeded就是栈溢出的报错，递归直接使用如果次数过多就会造成这样的现象，那么我们下面搭配蹦床函数使用。

function trampoline(f) {

  while (f && f instanceof Function) {

    f = f();

  }

  return f;

}

​

function num(x, y) {

  if (y > 0) {

    return num.bind(null, x + 1, y - 1);

  } else {

    return x;

  }

}

console.log(trampoline(num(1, 1000))); // 1001

通过蹦床函数将递归函数纳入，以循环的形式调用，最后得到结果，不会发生栈溢出现象，总结来看，尾调用是切断函数与尾调用函数之间的联系，用完即释放，藕断丝不连，不占用内存的效果。

最后

函数的尾调用就到这里啦！如有错误，请多指教，欢迎关注猪痞

瀑布流布局

瀑布流又称瀑布流式布局，是比较流行的一种网站页面 布局方式。多行等宽元素排列，后面的元素依次添加到后面，接下来，要开始介绍这种布局如何实现
Html代码以及效果展示：

代码：

先使用一个container容器作为父容器，里面分别装了十个子容器box，这十个子容器下面分别装载了各自的样品图片。

效果展示：

Div是块级元素，所以每一张图片分别占据了一行。

接下来介绍瀑布流css的代码以及效果实现

Css的代码展示如下图：

在对整个页面自带的边框进行清除之后，对父容器container使用了相对定位，让其不需要脱离文档流，给子容器加上该有的样式后将其下面装载的图片进行父容器宽的100%继承，一般在这里设置只需要考虑宽或者高的一种继承设置即可。

效果展示：

因为每一张图片的高度不一致，所以图片排列并没有按照顺序排列。

JS部分的代码以及效果展示：

总体思路：

首先我们要获取所有我们要摆放的照片，根据用户视窗的宽度以及每一张图片的宽度计算出每一行会占据多少张图片，再计算第一列图片的高度，将下一列的图片分别对应最低高度的图片在其后面进行存放布局展示，然后更新新的高度，重复上述的操作。

首先，我们要调用imgLocation函数，将父容器和子容器放进这个函数进行调用。

Winodw.onload()函数的意思是必须等待网页全部加载完毕，包括在内的图片，然后再执行包裹代码。

接下来详细介绍imgLocation函数内容

在imgLocation函数里面设置parent和content两个形参，这两个形参将会对应调用函数的时候传递过来的两个实参，用cparent变量和ccontent变量分别对应parent（就是父容器container）以及content（就是父容器下对应的第一层子容器box）

getChildElement()函数是自己写的，再来介绍一下这个函数的内容：这个函数的作用就是取得父容器中的某一层子容器

代码展示：

说明：

首先我们设置一个变量数组contentArr存放最终取到的所有子容器，再设置一个变量存放所取得整个父容器的标签，直接通过标签来取得，显示就是直接用的是数组的形式。然后写一个for循环函数，在所有的标签下寻找对应的类名，便将其存放在contentArr数组中，最后返回一个数组形式，因此ccontent是一个数组形式。

接下来再回到imgLocation函数中，在获取所有要摆放的图片之后，我们要进行计算从哪一张图片是需要被操作，被摆放位置，计算第一行能存放多少图片。

代码展示：

说明：
winWidth装载的是用户的视窗宽度，imgWidth装载的是一张图片的宽度，因为每一张图片的宽度都是一致的，因此可以直接固定随意写一张图片的宽度，num存放的就是第一行能存放多少图片的张数。

接下来要开始操作第num+1章图片，先拿到第一列所有的图片的高度，我们使用一个数组进行高度的存放。

代码展示：

说明：

循环遍历取得的每一个子容器，前num个子容器只需要取得他们的高度即可，就是第一行的图片的高度。接下来这部分是我们要进行操作的box，math.min（）这个里面装的是数字不是数组，调用apply将这个找最小值的方法借给数组用取得最小高度，然后minIndex拿到最低高度的图片所在的位置，就是下标。将需要操作的子容器图片的样式变成绝对定位，距离顶部的距离就是最低图片的高度，距离左边就是图片的小标乘以图片的宽度，因为每张图片的宽度都是一致的。最后再更新最矮的那一列高度，重复循环再找到新的最矮的高度进行排列。

所有代码展示：

效果展示：

什么是Vuex？Vuex官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

说到Vuex其实很多小伙伴的项目中基本都引入了，对Vuex的使用其实并不陌生！但面试的时候，面试官突然问起：你对Vuex是怎么理解的？或者怎么看待Vuex?

此刻我估计有些小伙伴回答得还是磕磕盼盼，那么这篇文章就从O到1，再彻底讲一下我对Vuex的理解

首先咱从面试的角度出发？

1.面试官第一个问题：Vuex有哪几种属性？

共有5个核心属性：state，getters，mutations，actions，modules 。小伙伴们这里一定要背哦!不仅要背出来，还要英文发音标准哦。这是必须要装的逼！不然第一题都挂了，就没有然后了！

2.面试官第二个问题：请你说说这几属性的作用？

此时小伙伴们就要注意了，你不能这么回答：state是定义数据的，等同与vue里面的data啥啥啥的... getters又等同与vue里面的计算属性啥啥啥的...

这样回答虽说问题不大，但总又感觉好像差点意思！显得不专业，半吊子（半桶水），培训机构刚那个啥一样（纯属玩笑，没有任何贬低的意思）

咱换个思路，直接从Vuex的使用层面跟面试官去讲！咱先看官网流程图

解析这张图之前咱先想一下，我们怎么获取Vuex里面的数据？ 如果配置过Vuex的小伙伴此时就会说：新建store文件->index.js，进行如下配置

//store/index.js

import Vue from 'vue' //引入vue

import Vuex from 'vuex' //引入vuex

 

Vue.use(Vuex) //在vue里面注入

 

export default new Vuex.Store({

  state: { //存放状态

    flag:'我是一个全局变量'

  },

})





//全局入口文件main.js

import store from './store/index.js'

new Vue({

    store,

    ...//省

})

这样一个简单的vuex就配置好了。接下来怎么去页面引用呢？ 非常简单！

//组件

<template>

  <div>{{$store.state.flag}}</div>

</template>



<script>

//省...

</script>

怎么样？ 小伙伴们，复杂吗？

那此时小伙伴就问了，那为什么上面那个流程图那么复杂呀？

这里咱就要解开你的疑惑了，上面流程图表述得更多的是教你修改状态。而不是读取状态！。

咱现在要修改Vuex的里面state的flag，小伙伴们怎么改呀？

<template>

  <div>{{$store.state.flag}}</div>

  <button @click='edit()' >修改</button>

</template>



<script>

    export default {

        methods:{

          edit(){

            this.$store.state.flag = '修改全局变量'

          },

        }

    }

</script>

上面这样做能改掉吗？ 很明确的告诉你们，能改，但是不建议也不允许这样改！

为什么呢？ 没有为什么（可参考这篇博客）！肯定是按照上面流程图的方式走呀。不然要这个流程图干嘛呀？对吧！那按照流程图的意思是，你要改状态，必须在mutations上面定义方法去改！ 该怎么改呢？这里咱就要修改一下store文件->index.js

import Vue from 'vue' //引入vue

import Vuex from 'vuex' //引入vuex

 

Vue.use(Vuex) //在vue里面注入

 

export default new Vuex.Store({

  state: { //存放状态

    flag:'我是一个全局变量'

  },

  mutations：{ //新增mutations配置项，里面写修改状态的方法

     Edit(state){

         state.flag = '修改全局变量'

     }

  }

})

完成store文件->index.js文件修改后，咱组件里面使用如下：

<template>

  <div>{{$store.state.flag}}</div>

  <button @click='edit()' >修改</button>

</template>



<script>

    export default {

        methods:{

          edit(){

            this.$store.commit('Edit')  //直接调用vuex下面mutations的方法名

          },

        }

    }

</script>

怎么样？伙伴们？简单吗？ 咱再回顾一下上面的流程图

咱上面的案例是不是就完全按照流程图的方式修改的状态？ 细心的小伙伴很快就发现了，很显然不是呀！
你没经过黄色的Actions 这个玩意啊？

这里要补充说明一下，我之前也被误导了很久。这也是这张图没表明的地方！跟伙伴们这么说吧，黄色的可以省略！什么意思呢？ 就是你可以直接从绿色（组件）->红色（mutations）->蓝色(state状态)

就像我们上面的案例：直接在Vue Components组件视图里面，通过 $store.commit 调用 Vuex里面的方法，vuex里面的方法再修改Vuex的数据，总之一句话，Vuex的数据修改，只能Vuex自己来，外人别参与！

那下面咱为了巩固一下这个思想，再次演示一下

//vuex 文件

import Vue from 'vue' //引入vue

import Vuex from 'vuex' //引入vuex

 

Vue.use(Vuex) //在vue里面注入

 

export default new Vuex.Store({

  state: { //存放状态

    flag:'我是一个全局变量'

  },

  mutations：{ //新增mutations配置项，里面写修改状态的方法

     Edit(state，data){ //data是组件传过来的参数

         state.flag = data

     }

  }

})



//vue组件

<template>

  <div>{{$store.state.flag}}</div>

  <button @click='edit("red")' >红色</button>

  <button @click='edit("yellow")' >黄色</button>

  <button @click='edit("green")' >绿色</button>

</template>

<script>

    export default {

        methods:{

          edit(color){

            this.$store.commit('Edit',color)  //commit 有2个参数，第一个是方法名称，第二个参数

          },

        }

    }

</script>

再次通过案例，说明了想要修改Vuex状态。就要遵守Vuex修改流程，把你要修改的值动态传入,就像普通的函数传参一样！只不过，你是通过 $store.commit 调用的函数方法。

好了，讲到这里。其实vuex核心就已经讲完了，因为你们已经知道了，Vuex怎么获取数据，也知道了Vuex怎么修改数据！

伙伴们又要说了，你开始讲了有5个属性！现在才讲2个，一个state,一个mutations？ 就这么糊弄？

别急呀，伙伴们。咱也得喝口水嘛！ 其实接下来剩下的3个就属于辅助性作用的存在了

什么叫辅助性呢？ 因为刚才我们说了，核心已经讲完，你们知道怎么获取，也知道怎么修改。一个状态知道怎么获取，怎么修改。那就是已经完了呀！ 剩下的只是说，让你怎么更好的去获取状态，更好的去管理状态，以及特殊情况下怎么修改状态了。

接下来咱先讲特殊情况下怎么修改状态。什么叫特殊情况？异步就叫特殊情况。

咱们刚才的一系列操作，是不是都属于同步操作呀？ 那么咱想象一个场景，咱要修改的这个状态一开始是不知道的，什么情况下知道呢？必须调用后端接口，后端返回给你，你才知道！ 此时聪明的小伙伴就说了：这还不简单吗？ 我直接在函数里面发请求呗！如下

//vuex 文件

import request form '../utils/request.js'

import Vue from 'vue' //引入vue

import Vuex from 'vuex' //引入vuex

 

Vue.use(Vuex) //在vue里面注入

 

export default new Vuex.Store({

  state: { //存放状态

    flag:'我是一个全局变量'

  },

  mutations：{ //新增mutations配置项，里面写修改状态的方法

     Edit(state){

        request('/xxx').then(res=>{ //异步请求

            state.flag = res.data

        })

     }

  }

})

这样做虽然可以改。但是小伙伴们咱又回到了最初的话题，这样改合规吗？符合流程图流程么？

是不是显然不符合呀，咱刚才讲同步代码修改状态的时候，是不是也特意把Actions提了一嘴？

所以此时Actions作用就在此发挥出来了，废话少说，Actions就是用来定义异步函数的，每当我们要发起请求获取状态，就必须写在这个函数里面，如下：

//vuex 文件

import request form '../utils/request.js'

import Vue from 'vue' //引入vue

import Vuex from 'vuex' //引入vuex

 

Vue.use(Vuex) //在vue里面注入

 

export default new Vuex.Store({

  state: { //存放状态

    flag:'我是一个全局变量'

  },

  mutations：{ //新增mutations配置项，里面写修改状态的方法

     Edit(state){

       state.flag = state

     }

  },

  actions:{ //新增actions配置项

      GetData({commit}){ //定义获取异步数据的方法

        request('/xxx').then(res=>{ //异步请求

            commit('Edit',res.data)

        })

      }

  }

})





//vue组件

<template>

  <div>{{$store.state.flag}}</div>

  <button @click='setData()' >调用异步</button>

</template>

<script>

    export default {

        methods:{

          setData(color){

            this.$store.dispatch('GetData')  //通过dispatch调用vuex里面的actions下面定义的方法名

          },

        }

    }

</script>

这样一来，是不是就跟流程图彻底对应上了？

在Vue Components组件视图里面，通过 $store.dispatch 调用 Vuex里面的actions下定义的异步方法，然后通过vuex里面的异步 $store.commit 再调用vuex里面的同步方法，最终由同步方法修改状态。

最后总结出：只要涉及到修改状态，必须调用同步里面方法。不管是在组件使用 $store.commit， 还是在 actions 里面使用commit ，都必须调用mutations里面定义的方法 ！

通过以上的实例，我相信大家已经明白了整个Vuex修改状态的过程。也对官网的流程图有了更清晰的认知了。

接下来就只剩下2个最简单的属性了，getters与modules

getters类似于vue组件中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据！直接看实例：

//vuex 文件

import request form '../utils/request.js'

import Vue from 'vue' //引入vue

import Vuex from 'vuex' //引入vuex

 

Vue.use(Vuex) //在vue里面注入

 

export default new Vuex.Store({

  state: { //存放状态

    flag:'我是一个全局变量！',

    name:'伙伴们'

  },

  getters：{ //新增mutations配置项，里面写修改状态的方法

     flagName(state){

           return state.name + state.flag

     }

  },

 

})





//vue组件

<template>

  <div>{{$store.state.flagName}}</div>

</template>

<script>

    export default {

       

    }

</script>

最后咱们来讲modules，modules针对比较大型的项目时才能发挥优势，不然你项目太小，整个维护的状态都不超过10，那就没必要用modules了！

modules其实就是把Vuex里面的所有功能进行一个更细化的拆分：

//vuex 文件

import request form '../utils/request.js'

import Vue from 'vue' //引入vue

import Vuex from 'vuex' //引入vuex

 

Vue.use(Vuex) //在vue里面注入

 

const moduleA = {  //组件A需要单独维护的状态

  state: () => ({ ... }),

  mutations: { ... },

  actions: { ... },

  getters: { ... }

}



const moduleB = { //组件B需要单独维护的状态

  state: () => ({ ... }),

  mutations: { ... },

  actions: { ... }

}



const store = new Vuex.Store({

  state:{}, //全局状态

  modules: {  //整体合并

       moduleA: moduleA,

       moduleB: moduleB

  }

})







//vue组件A

<template>

  <div>{{$store.state[moduleA].flag}}</div>  //调用Vuex模块里面的状态时，要加moduleA模块名

</template>

<script>

    export default {

       

    }

</script>



//vue组件B

<template>

  <div>{{$store.state[moduleB].flag}}</div> //调用Vuex模块里面的状态时，要加moduleB模块名

</template>

<script>

    export default {

       

    }

</script>

怎么样？小伙伴们。。是不是也挺简单的。

文章到了这里也就把Vuex基本知识都讲完了。小伙伴们需要自己多加练习与消化！ 把文章中所讲的Vuex更新状态的流程在脑海里面多回想几遍。有任何疑问，评论区留言吧！

前几天在前端技术群里聊起Code Review的事，大伙儿似乎都憋了一肚子气：

我觉得这份难言之隐应该要让更多人看到，就跟Henry约了个稿：

于是Henry赶在周末，一边带娃，一边给我抹眼泪整理（脱敏）出了这篇小小的屎山合集，供大家品鉴。

以下是正文。

（文字大部分是Henry所写，沐洒进行了一些精简和调整）

1. 直接操作DOM

const a = document.querySelector('.a');



const scrollListener = throttle(() => {

  const currentY = window.scrollY;



  if (currentY > 100) {

    a.classList.add('show');

  } else {

    a.classList.remove('show');

  }

}, 300);



window.addEventListener('scroll', scrollListener);

return () => {

  window.removeEventListener('scroll', scrollListener);

};

上面的代码在监听scroll方法的回调函数中，直接上手修改DOM的类名。众所周知，React属于响应式编程，大部份情况都不需要直接操作DOM，具体原因参考官方文档（react.dev/learn/manip…

优化方法也很简单，充分发挥响应式编程的优点，用变量代替即可：

const [refreshStatus, setRefreshStatus] = useState('');



const scrollListener = throttle(() => {

  if (tab.getBoundingClientRect().top < topH) {

    setRefreshStatus('show');

  } else {

    setRefreshStatus('');

  }

}, 300);



return <div className={['page_refresh', refreshStatus].join(' ')}/>;

2. useEffect不指定依赖

依赖参数缺失。

useEffect(() => {

    console.log('no deps=====')

    // code...

});

这样的话，每次页面有重渲染，该useEffect都会执行，带来严重的性能问题。例如我们项目中，这个useEffect内部执行的是第一点中的内容，即每次都会绑定一个scroll事件的回调，而且页面中有实时轮询接口每隔5s刷新一次列表，用户在该页面稍加停留，就会有卡顿问题出现。解决方案很简单，根据useEffect的回调函数内容可知，如果需要在第一次渲染之后挂载一个scroll的回调函数，那么就给useEffect第二个参数传入空数组即可，参考官方文档(react.dev/reference/r…

useEffect(() => {

    // code...

}, []);

3. 硬编码

硬编码，即一些数据信息或配置信息直接写死在逻辑代码中，例如

这两行代码本意是从url上拿到指定的参数的值，如果没有，会用一个固定的配置做兜底。

乍一看代码逻辑很清晰，但再想深一层，兜底值具体的含义是什么？为什么要用这两个值来兜底？写这行代码的同学可能很快可以解答，但是一段时间之后，写代码的人和提需求的人都找不到了呢？

这个示例代码还比较简单，拿对应的值去后台可以找到对应的含义，如果是写死的是枚举值，而且还没有类型定义，那代码就很难维护了。

解决此类问题，要么将这些内容配置化，即写到一个config文件中，使用清晰的语义化命名变量；要么，至少在硬编码的地方写上注释，交代清楚这里需要硬编码的前因后果。

沐洒：

关于硬编码问题，我在之前的一篇关于“配置管理”的文章里有详细阐述和应对方案，感兴趣的朋友可以看看《小白也能做出满分前端工程：01 配置管理》

4. 放任文件长度，只着眼于当下的需求

很多同学做需求、写代码都比较少从全局考虑，只关注到当前需求如何完成。从“战术”上来说没有问题，快速完成产品的需求、快速迭代产品也是大家希望看到的。

可一旦只关注“战术实现”而忽略“战略设计”，除非做的产品是月抛型的，否则一定会遇到旧逻辑难以修改的情况。

如果再加上一个文件被多达10余人修改过的情况，那么每改一行代码都会是一场灾难，例如最近接手的一个页面：

单文件高达1600多行！哪怕去除300多行的注释，和300多行的模板，剩下的逻辑代码也有1000行左右，这种代码可读性就极其糟糕，必须进行拆分。

而很常见的是，由于每一任经手人都疏于考虑全局，导致大量代码毫无模块化可言，甚至出现多个useEffect的依赖是完全相同的：

这里明显还有另一个问题：滥用hooks。

从行号可以看出来确实是相同的依赖写了多个useEffect，很明显是多个同学各写各的的需求引入的这些hooks。

这代码跑肯定是能跑的，但是很可能会出现多个hooks中修改同一个变量，导致其他地方在使用的时候需要搞一些很tricky的操作来修Bug。

5.变量无初始值

在typescript的加持下，对变量的类型定义可以说是日益严格了。可是在一些变量的类型定义比较复杂的情况下，可能一个变量的字段很多、层级很复杂，此时有些同学就可能想偷个懒了，例如：

const [variable, setVariable] = useState();



// some code...

const queryData = function() {

    // some logic

    setVariable({ show: true });

};



useEffect(() => {

    queryData();

}, []);



return variable.show ?  : null;

这里的问题很明显，如果queryData耗时比较长，在第一次渲染的时候，最后一行的variable.show就会报错了，因为variable的初始值是undefined。所以声明变量时，一定要根据变量的类型设置好有效默认值。

6. 三元选择符嵌套使用

网上很多人会推荐说用三元选择符代替简单的if-else，但几乎没有见过有人提到嵌套使用三元选择符的事情，如果看到如下代码，不知道各位读者会作何感想？

{condition1 === 1

    ? "数据加载中"

    : condition2

    ? "没有更多了"

    : condition3

    ? "当前没有可用房间"

    : "数据加载中"}

真的很难理解，明明只是一个简单的提示语句的判断，却需要拿出分析性能的精力去理解，多少有点得不偿失了。

这还只是一种比较简单的三元选择符的嵌套，因为当各个条件分支都为true时，就直接返回了，没有做更多的判断，如果再多做一层，都会直接把人的cpu的干爆炸了。 

替代方案： 

1. 直接用if-else，可读性更高，以后如果要加逻辑也很方便。


2. Early Return，也叫卫语句，这种写法能有效简化逻辑，增加可读性。

if (condition1 === 1) return "数据加载中";

if (condition2) return "没有更多了";

if (condition3) return "当前没有可用房间";

return "数据加载中";

虽然不嵌套的三元选择符很简单，但是在例如jsx的模版中，仍然不建议大量使用三元选择符，因为可能会出现如下代码：

return (

    condition1 ? (

        <div className={condition2 ? cls1 : cls2}>

            {condition3 ? "111" : "222"}

            {condition4 ? (

                a : b} />

            ) : null

        

当我们在编写代码的时候，有一些对象内部会有一些方法（函数），如果将这些函数在构造函数内部声明会导致内存的浪费，因为实例化构造函数得到不同的实例对象，其内部都有同一个方法，但是占据了不同的内存，就存在内存浪费问题。于是乎我们就需要用到继承。

什么是继承？

通过某种方式让一个对象可以访问到另一个对象中属性和方法，我们将这种方法称之为继承（inheritance）。

如果一个类B继承自另一个类A，就把B称之为A的子类，A称之为B的父类或者超类。

如何实现继承？

1、原型链继承

// 原型链的继承

SuperType.prototype.getSuperValue = function () {

  return this.property;

}

function SuperType() {

  this.property = true

}



Type.prototype = new SuperType();



function Type() {

  this.typeproperty = false

}



console.log(Type.prototype);



var instance = new Type()



console.log(instance.getSuperValue());  // true

让SuperType的实例对象赋给Type的原型，Type就能继承到SuperType的属性和方法

优点：原型链继承容易上手，书写简单，父类可以复用，被多个子类继承。

缺点：会在子类实例对象上共享父类所有的引用类型实例属性，（子类改不动父类的原始类型），更改一个子类的引用属性，其他子类均受影响；子类不能改父类传参。

2、经典继承（伪造对象）

// 经典继承

SuperType.prototype.name = '寒月十九'



function SuperType(age) {

  this.color = ['red', 'green', 'blue'],

  this.age = age

}



function Type(age) {

  SuperType.call(this,age)

}



var instance = new Type(18)

console.log(instance);

console.log(instance.color);

经典继承就是借助this的显示绑定，将SuperType的指向绑定到Type身上，使得我们可以直接访问到SuperType身上的属性。

优点：解决了原型链继承子类不能向父类传参的问题和原型共享的问题。

缺点：方法不能复用；子类继承不到父类原型上的属性，只能继承到父类实例对象上的属性。

3、组合继承(原型链继承 + 经典继承)

// 组合继承 (伪经典继承)

SuperType.prototype.sayName =function() {

  console.log(this.name);

}



function SuperType(name) {

  this.name = name,

  this.color = ['red', 'green', 'blue']

}

function Type(age,name) {

  this.age = age

  SuperType.call(this,name)

}



Type.prototype = new SuperType()

Type.prototype.constructor = Type  



//Type.prototype被替换了，所以要补充一个constructor属性，指向自身，这样new Type得到的实例对象就有constructor属性



Type.prototype.sayAge = function() {

  console.log(this.age)

}



var instance = new Type(20,'寒月十九');

instance.sayAge();

组合继承就是将上面两种继承方式结合起来，先将SuperType的this指向显示绑定到Type，然后再替换Type的原型，再添加上构造器属性指向自身，使得new Type()得到的实例对象就具备构造属性，并且可以继承到SuperType的属性。

优点：解决了原型链继承和经典继承的缺点造成的影响。

缺点：每一次都会调用两次父类的构造函数，一次是在创建子类原型上，另一次是在子类构造函数内部。

4、原型式继承

（1）借助构造函数实现对象的继承

// 原型式继承

function object(obj) {

  function newFn() {}

  newFn.prototype = obj;

  return new newFn();

};

var person = {

  name: '寒月十九',

  age: 20,

  like: {

    sport: 'coding'

  }

};

let newObj = object(person);

（2）Object.create()

var person = {

  name: '寒月十九',

  age: 20,

  like: {

    sport: 'coding'

  }

};

let newPerson = Object.create(person,{sex: 'boy'});

优点：不需要单独构建构造函数。

缺点：属性中的引用地址会在相关对象中共享。

5、寄生式继承

function createPerson(original) {

  var clone = Object.create(original)

  clone.say = function() {  // 增强这个对像

    console.log('hello');

  }

  return clone;

};

var person = {

  name: '寒月十九',

  age: 20,

  like: {

    sport: 'coding'

  }

};

let newPerson =createPerson(person);

寄生式继承是原型式继承的加强版，它结合原型式继承和工厂模式，创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回对象。

优点：上手简单，不用单独创建构造函数。

缺点：寄生式继承给对象添加函数会导致函数难以重用，因此不能做到函数复用而效率降低；引用类型的属性始终都会被继承所共享。

寄生组合式继承

// 寄生组合式继承

SuperType.prototype.sayName = function() {

  console.log(this.name);

};

SuperType.prototype.like = {

  a: 1,

  b: 2

};

function SuperType(name) {

  this.name = name;

  this.colors = ['red', 'blue', 'green']

};



function Type(name, age) {

  this.age = age;

  SuperType.call(this, name);

}



var anotherPrototype = Object.assign(Type.prototype, SuperType.prototype);

// anotherPrototype.constructor = Type



Type.prototype = anotherPrototype; // new SuperType()

寄生组合继承是为降低父类构造函数的开销。通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。

优点：高效，只调用一个次父构造函数，不会在原型上添加多余的属性，原型链还能保持不变；开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

缺点：代码较复杂。

class类继承

class Parent{

  constructor(name) {

    this.name = name;

    this.hobbies = ["running", "basketball", "writting"];

  }

  getHobbies() {

    return this.hobbies;

  }

  static getCurrent() {  // 静态方法，只能类本身调用

    console.log(this);

  }

}



class Child extends Parent {

  constructor(name) {

    super(name);

  }

}



var c1 = new Child('寒月十九');

var c2 = new Child('十九');

前言

今天和大家一起 来 弄清楚一段 JavaScript 代码，它是如何执行的呢？ 进而彻底讲明白闭包和作用于链的含义。

JavaScript 是一门高级语言，需要转化成机器指令，才能在电脑的 CPU 中运行。使 JavaScript 代码转换成机器指令，是通过 JavaScript 引擎来完成的。

JavaScript 引擎在把 JavaScript 代码转换成机器指令过程中，先对 JavaScript 代码进行解析（词法分析，语法分析），生成 AST 树，然后在通过一些列操作转换成机器指令，从而在 CPU 中运行。今天带大家详细讲解一下相关概念，并通过一个具体的案例加深大家对相关概念的理解。

JavaScript 执行过程

JavaSc 是一门高级语言，JavaScript 引擎会先把 JavaScript 代码转换成机器指令，先对 JavaScript 代码进行解析（词法分析，语法分析），生成 AST 树，然后转换成机器指令，进而会才能 CPU 中运行。

如下图所示：

JS 执行过程，我们会遇到一些名词，这里在前面先做个解释

名词太多不容易理解，这里不用去记，下面用到的时候重新从这里查找即可。

⚠️⚠️❗️❗️ 下面的小章节是按照特定顺序讲解的，讲解了代码生成执行过程。

解析阶段（编译器伪代码）

1. 创建一个全局对象 GO/window（全局作用域）


2. 词法分析。词法分析就是将我们写的代码块分解成词法单元。


3. 检查语法是否有错误。语法分析是将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树。这个树被称为“抽象语法树”（Abstract Syntax Tree,AST）。 并检查你的代码有没有什么低级的语法错误，如果有，引擎会停止执行并抛出异常。


4. 给全局对象 GO 赋值（GO/VO 中不止包括变量自身，还包含其他的上下文等）

如果遇到了函数，编译阶段是不会去解析他，仅仅是在堆内存中创建了 FO 对象（会记录他的 parent scope 和 当前代码块），在 GO 中定义的函数变量会指向此变量。

生成全局对象的伪代码是什么? （变量提升考点）

1. 从上到下查找，遇到 var 声明，先去全局作用域查找是否有同名变量，如有忽略当前声明，没有则添加声明变量为 GO 对象的属性，值为 undefined，并为变量分配内存。


2. 遇到 function，如有同名变量，则将值替换为 function 函数，没有则添加到 GO，并分配内存并赋值。


3. ES6 中的 class 声明也存在提升，不过它和 let、const 一样，被约束和限制了，其规定，如果再声明位置之前引用，则是不合法的，会抛出一个异常。

创建全局对象有什么用？

• 所有的作用域（scope）都可以访问该全局对象；


• 对象里面会包含一些全局的方法和类，像 Math、Date、String、Array、setTimeout 等等；


• 其中有一个 window 属性是指向该全局对象自身的；


• 该对象中会收集我们上面全局定义的变量，并设置成 undefined；


• 全局对象是非常重要的，我们平时之所以能够使用这些全局方法和类，都是在这个全局对象中获取的；

什么是变量提升？

面试经常问是因为工作中经常因为他出现 BUG。
什么是变量提升：通常 JS 引擎会在正式执行之前先进行一次预编译，在这个过程中，首先将变量声明及函数声明提升至当前作用域的顶端，然后进行接下来的处理。

• 函数提升只针对具名函数，而对于赋值的匿名函数（表达式函数），并不会存在函数提升。


• 【提升优先级问题】函数提升优先级高于变量提升，且不会被同名变量声明覆盖，但是会被变量赋值后覆盖。而且存在同名函数与同名变量时，优先执行函数。

console.log(a);      //f a()

console.log(a());    //1

var a=1;

function a(){

    console.log(1);

}

console.log(a);       //1

a=3

console.log(a())      //a not a function

🤔 思考：（一道腾讯面试题）

var a=2;

function a() {

   console.log(3);

}

console.log(typeof a);

为什么会进行变量提升？

• 【比较信服的一种说法】正是由于第一批 JavaScript 虚拟机编译器上代码的设计失误，导致变量在声明之前就被赋予了 undefined 的初始值，而又由于这个失误产生的影响（无论好坏）过于广泛，因此在现在的 JavaScript 编译器中仍保留了变量提升的“特性”。


• 【提升性能，这是预编译的好处，与变量提升没有没有关系】解析和预编译过程中的声明提升可以提高性能，让函数可以在执行时预先为变量分配栈空间


• 【但也带了很多弊端】声明提升还可以提高 JS 代码的容错性，使一些不规范的代码也可以正常执行

现在讲完了变量赋值过程，接下来我们了解一下，全局执行上下文和函数执行上下文。

什么是 全局执行上下文 和 函数执行上下文？

全局执行上下文和函数执行上下文，大致也分为两个阶段：编译阶段和执行阶段。

解析过程中，获得了三个重要的信息（上下文包含的重要信息）【上下文对象中包含的信息有哪些？】：

1. VO(Variable Object)对象：该对象保存了当前执行上下文中的变量和函数地址（也就是当前作用域）。


2. 作用域链：VO(当前作用域) + ParentScope(父级作用域) 【在函数部分重要讲解】


3. this 的指向： 视情况而定。

什么是作用域？

JavaScript 中的作用域说的是变量的可访问性和可见性。也就是说整个程序中哪些部分可以访问这个变量，或者说这个变量都在哪些地方可见。

作用域两个重要作用是 安全 和 命名压力（可以在不同的作用域下面定义相同的变量名）。

Javascript 中有三种作用域：

1. 全局作用域


2. 函数作用域


3. 块级作用域
   作用域链：当在 Javascript 中使用一个变量的时候，首先 Javascript 引擎会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上层作用域寻找，以此类推直到找到该变量或是已经到了全局作用域。

记住两句话：

1. 父级作用域在编译阶段就已经确定了。


2. 查找变量就是按照作用域链查找（找到近停止）[]
   
   也可以这么理解：作用域链是 AO 对象上的一个变量[scopeChain] 里面的变量是 当前的 VO+parentVO，当某个变量不存在时会顺着 parentVO 向上查找，直到找到为止。

什么是词法作用域？

词法作用域（也叫静态作用域）从字面意义上看是说作用域在词法化阶段（通常是编译阶段）确定而非执行阶段确定的。 JavaScript 的作用域是词法作用域。

例如：

let number = 42;

function printNumber() {

  console.log(number);

}

function log() {

  let number = 54;

  printNumber();

}

// Prints 42

log();

上面代码可以看出无论printNumber()在哪里调用console.log(number)都会打印42。

动态作用域不同，console.log(number)这行代码打印什么取决于函数printNumber()在哪里调用。

如果是动态作用域，上面console.log(number)这行代码就会打印54。

使用词法作用域，我们可以仅仅看源代码就可以确定一个变量的作用范围，但如果是动态作用域，代码执行之前我们没法确定变量的作用范围。

什么是执行上下文？

简单的来说，执行上下文是一种对 Javascript 代码执行环境的一种抽象概念，也就是说只要有 Javascript 代码运行，那么它就一定是运行在执行上下文中。

Javascript 一共有三种执行上下文：

• 全局执行上下文。
  
  这是一个默认的或者说基础的执行上下文，所有不在函数中的代码都会在全局执行上下文中执行。它会做两件事：创建一个全局的 window 对象(浏览器环境下)，并将 this 的值设置为该全局对象，另外一个程序中只能有一个全局上下文。


• 函数执行上下文。
  
  每次调用函数时，都会为该函数创建一个执行上下文，每一个函数都有自己的一个执行上下文，但注意是该执行上下文是在函数被调用的时候才会被创建。函数执行上下文会有很多个，每当一个执行上下文被创建的时候，都会按照他们定义的顺序去执行相关代码（这会在后面会说到）。


• Eval 函数执行上下文。
  
  在 eval 函数中执行的代码也会有自己的执行上下文，但由于 eval 函数不会被经常用到，这里就不做讨论了。(译者注：eval 函数容易导致恶意攻击，并且运行代码的速度比相应的替代方法慢，因为不推荐使用)。

执行上下文栈（调用栈）？

了解了什么是全局对象后，下面就来聊聊代码具体执行的地方。JS 引擎为了执行代码，引擎内部会有一个执行上下文栈（Execution Context Stack，简称 ECS），它是用来执行代码的调用栈。

ECS 如何执行？先执行谁呢？

• 无疑是先执行我们的全局代码块；


• 在执行前全局代码会构建一个全局执行上下文（Global Execution Context，简称 GEC）；


• 一开始 GEC 就会被放入到 ECS 中执行；
  GEC 主要包含三个内容（和 FEC 基本一样）： VO，作用域链，this 的指向。

调用栈（ECS）、全局执行上下文、函数执行上下文（FEC）三者大致的关系如下：

函数执行上下文

在执行全局代码遇到函数如何执行呢？

• 在执行的过程中遇到函数，就会根据函数体创建一个函数执行上下文（Functional Execution Context，简称 FEC），并且加入到执行上下文栈（ECS）中。


• 函数执行上下文（FEC）包含三部分内容：
  
  
  
  • AO：在解析函数时，会创建一个 Activation Objec（AO）；
  
  
  • 作用域链：由函数 VO 和父级 VO 组成，查找是一层层往外层查找；
  
  
  • this 指向：this 绑定的值，在函数执行时确定；
  
  
  
  


• 其实全局执行上下文（GEC）也有自己的作用域链和 this 指向，只是它对应的作用域链就是自己本身，而 this 指向为 window。

变量环境和记录（VO 和 VE）

上文中提到了很多次 VO，那么 VO 到底是什么呢？下面从 ECMA 新旧版本规范中来谈谈 VO。

在早期 ECMA 的版本规范中：每一个执行上下文会被关联到一个变量环境（Variable Object，简称 VO），在源代码中的变量和函数声明会被作为属性添加到 VO 中。对应函数来说，参数也会被添加到 VO 中。

• 也就是上面所创建的 GO 或者 AO 都会被关联到变量环境（VO）上，可以通过 VO 查找到需要的属性；


• 规定了 VO 为 Object 类型，上文所提到的 GO 和 AO 都是 Object 类型；
  在最新 ECMA 的版本规范中：每一个执行上下文会关联到一个变量环境（Variable Environment，简称 VE），在执行代码中变量和函数的声明会作为环境记录（Environment Record）添加到变量环境中。对于函数来说，参数也会被作为环境记录添加到变量环境中。


• 也就是相比于早期的版本规范，对于变量环境，已经去除了 VO 这个概念，提出了一个新的概念 VE；


• 没有规定 VE 必须为 Object，不同的 JS 引擎可以使用不同的类型，作为一条环境记录添加进去即可；


• 虽然新版本规范将变量环境改成了 VE，但是 JavaScript 的执行过程还是不变的，只是关联的变量环境不同，将 VE 看成 VO 即可；

什么是闭包？

MDN 上解释：闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。换而言之，闭包让开发者可以从内部函数访问外部函数的作用域。
也可以简单：函数 + 函数定义时的词法环境。

具体实例来理解整个执行过程

var name = 'curry'



console.log(message)



var message = 'I am new-coder.cn'



function foo() {

  var name = 'foo'

  console.log(name)

}



var num1 = 1

var num2 = 2



var result = num1 + num2



foo()

如下图：图中描述了上面这段代码在执行过程中所生成的变量。

图中三个步骤的详细描述：

1. 初始化全局对象。

• 这里需要注意的是函数存放的是地址，会指向函数对象，与普通变量有所不同；


• 从上往下解析 JS 代码，当解析到 foo 函数时，因为 foo 不是普通变量，并不会赋为 undefined，JS 引擎会在堆内存中开辟一块空间存放 foo 函数，在全局对象中引用其地址；


• 这个开辟的函数存储空间最主要存放了该函数的父级作用域和函数的执行体代码块；

2. 
   

   构建一个全局执行上下文（GEC），代码执行前将 VO 的内存地址指向 GlobalObject（GO）。

   
   


3. 
   

   将全局执行上下文（GEC）放入执行上下文栈（ECS）中。

   
   


4. 
   

   从上往下开始执行全局代码，依次对 GO 对象中的全局变量进行赋值。

   
   

• 当执行 var name = 'curry'时，就从 VO（对应的就是 GO）中找到 name 属性赋值为 curry；


• 接下来执行 console.log(message)，就从 VO 中找到 message，注意此时的 message 还为 undefined，因为 message 真正赋值在下一行代码，所以就直接打印 undefined（也就是我们经常说的变量作用域提升）；


• 后面就依次进行赋值，执行到 var result = num1 + num2，也是从 VO 中找到 num1 和 num2 两个属性的值进行相加，然后赋值给 result，result 最终就为 50；


• 最后执行到 foo()，也就是需要去执行 foo 函数了，这里的操作是比较特殊的，涉及到函数执行上下文，下面来详细了解；

5. 遇到函数是怎么执行的
   继续来看上面的代码执行，当执行到 foo()时：

• 先找到 foo 函数的存储地址，然后解析 foo 函数，生成函数的 AO；


• 根据 AO 生成函数执行上下文（FEC），并将其放入执行上下文栈（ECS）中；


• 开始执行 foo 函数内代码，依次找到 AO 中的属性并赋值，当执行 console.log(name)时，就会去 foo 的 VO（对应的就是 foo 函数的 AO）中找到 name 属性值并打印；

6. 如此下去函数执行完成后会进行出栈，直到栈为空。代码出栈，如果出栈中发现当前上下文中的一些变量仍然被引用（形成了闭包），那就会将此出栈的上下文移动到堆中。

参考链接

• JavaScript 系列：JavaScript 的执行过程


• JavaScript 的执行过程（深入执行上下文、GO、AO、VO 和 VE 等概念）


• “浅谈”JavaScript 执行过程


• 彻底搞懂作用域、执行上下文、词法环境

前言

前端开发中，关于JS原生的内容和前端算法相关的内容一直都是前端工作中的核心，不管是在实际的前端业务开发还是前端求职面试，都是非常重要且必备的内容。那么本篇博文来分享一个关于前端开发中必备内容：diff算法，diff算法在前端实战中和前端求职面试中都是必备知识，整理总结一下，方便查阅使用。

diff算法是什么？

diff算法其实就是用于比较新旧虚拟DOM节点的差异性的算法。众所周知，每一个虚拟DOM节点都会有一个唯一标识，即Key，diff算法把树形结构按照层级分解，只比较同级元素，不同层级的节点只有创建和删除操作，通过对比新旧节点的Key来判断当前节点是否改变，把两个节点不同的地方存储在patch对象中，然后利用patch记录的消息进行局部更新DOM操作。

注意：若输入的新节点不是虚拟DOM , 那么需要将DOM节点转换为虚拟DOM才行，也就是说diff算法是针对虚拟DOM的。

patch()函数

patch函数其实就是用于节点上树，更新DOM的函数，也就是将新旧节点进行比较的函数。

diff算法的诞生

想必大家都知道，前端领域中在之前传统的DOM操作非常昂贵，数据的改变往往需要更新 DOM 树上的多个节点，可谓是牵一发而动全身，所以虚拟DOM和Diff算法的诞生就是为了解决上述问题。

前端的Web界面由 DOM 树来构成，当某一部分发生变化的时候，其实就是对应的某个 DOM 节点发生了变化。在 Vue中，构建 UI 界面的思路是由当前状态决定界面，前后两个状态就对应两套界面，然后由 Vue来比较两个界面的区别，本质是比较 DOM 节点差异当两个节点不同时应该如何处理，分为两种情况：一、节点类型不同；二、节点类型相同，但是属性不同。了解它们就需要对 DOM 树进行 Diff 算法分析。

diff算法的优势

diff算法的性能优势在于对比新旧两个 DOM节点的不同的时候，只对比同一级别的 DOM 节点，一旦发现有不同的地方，后续的DOM子节点将被删掉而不再作对比操作。使用diff算法提高了更新DOM的性能，不用再把整个页面全部删除后重新渲染；使用diff算法让虚拟DOM只包括必须的属性，不再把真实DOM的全部属性都拿出来。

diff算法的示例

这里先来以Vue来介绍一下diff算法的示例，这里直接在vue文件的模板中进行一个简单的标签实现，需要被vue处理成虚拟DOM，然后渲染到真实DOM中，具体代码如下所示：

//标签设置



//相对应的虚拟DOM结构



const dom = {



type: 'div',



attributes: [{id: 'content'}],



children: {



type: 'p',



attributes: [{class: 'sonP'}],



text: 'Hello'



}



}

通过上面的代码演示可以看到，新建标签之后，系统内存中会生成对应的虚拟DOM结构，由于真实DOM属性有很多，无法快速定位是哪个属性发生改变，然后通过diff算法能够快速找到发生变化的地方，然后只更新发生变化的部分渲染到页面上，也叫打补丁。

虚拟DOM

虚拟DOM是保存在程序内存中的，它只记录DOM的关键信息，然后结合diff算法来提高DOM更新的性能操作，在程序内存中比较差异，最后给真实DOM打补丁更新操作。

diff算法的比较规则

diff算法在进行比较操作的规则是这样的：

1. 新节点前和旧节点前；


2. 新节点后和旧节点后；


3. 新节点后和旧节点前；


4. 新节点前和旧节点后。

只要符合一种情况就不会再进行判断，若没有符合的，就需要循环来寻找，移动到旧前之前操作。结束查找的前提是：旧节点前<旧节点后 或者 新节点后>新节点前。

diff算法的三种比较方式

diff算法的比较方式有三种，分别如下所示：

方式一：根元素发生改变，直接删除重建

也就是同级比较，根元素发生改变，整个DOM树会被删除重建。如下示例：

//旧的虚拟DOM

<ul id="content">

<li class="sonP">hello</li>

</ul>

//新的虚拟DOM

<div id="content">

<p class="sonP">hello</p>

</div>

方式二：根元素不变，属性改变，元素复用，更新属性

这种方式就是在同级比较的时候，根元素不变，但是属性改变之后更新属性，示例如下所示：

//旧的虚拟DOM

<div id="content">

<p class="sonP">hello</p>

</div>

//新的虚拟DOM

<div id="content" title="hello">

<p class="sonP">hello</p>

</div>

方式三：根元素不变，子元素不变，元素内容发生变化

也就是根元素和子元素都不变，只是内容发生改变，这里涉及到三种小的情况：无Key直接更新、有Key但以索引为值、有Key但以id为值。

1、无Key直接更新

无Key直接就地更新，由于v-for不会移动DOM，所以只是尝试复用，然后就地更新；若需要v-for来移动DOM，则需要用特殊 attribute key 来提供一个排序提示。示例如下所示：

<ul id="content">

<li v-for="item in array">

{{ item }}

<input type="text">

</li>

</ul>

<button @click="addClick">在下标为1的位置新增一行</button>

export default {

data(){

return {

array: ["11", "44", "22", "33"]

}

},

methods: {

addClick(){

this.array.splice(1, 0, '44')

}

}

};

2、有Key但以索引为值

这里也是直接就地更新，通过新旧虚拟DOM对比，key存在就直接复用该标签更新的内容，若key不存在就直接新建一个。示例如下所示：

-



{{ item }}



在下标为1的位置新增一行



export default {



data(){



return {



array: ["11", "44", "22", "33"]



}



},



methods: {



addClick(){



this.array.splice(1, 0, '44')



}



}



};

通过上面代码可以看到，通过v-for循环产生新的DOM结构, 其中key是连续的, 与数据对应一致，然后比较新旧DOM结构, 通过diff算法找到差异区别, 接着打补丁到页面上，最后新增补一个li，然后从第二元素以后都要更新内容。

3、有Key但以id为值

由于Key的值只能是唯一不重复的，所以只能以字符串或数值来作为key。由于v-for不会移动DOM，所以只是尝试复用，然后就地更新；若需要v-for来移动DOM，则需要用特殊 attribute key 来提供一个排序提示。

若新DOM数据的key存在, 然后去旧的虚拟DOM里找到对应的key标记的标签, 最后复用标签；若新DOM数据的key存在, 然后去旧的虚拟DOM里没有找到对应的key标签的标签，最后直接新建标签；若旧DOM结构的key, 在新的DOM结构里不存在了, 则直接移除对应的key所在的标签。

<ul id="content">

<li v-for="object in array" :key="object.id">

{{ object.name }}

<input type="text">

</li>

</ul>

<button @click="addClick">在下标为1的位置新增一行</button>

export default {

data(){

return {

array: [{id:11,name:"11"}, {id:22,name:"22"}, {id:33,name:"33"}]

}

},

methods: {

addClick(){

this.array.splice(1, 0,{id:44,name: '44'})

}

}

};

最后

通过本文关于前端开发中关于diff算法的详细介绍，diff算法不管是在实际的前端开发工作中还是在前端求职面试中都是非常关键的知识点，所以作为前端开发者来说必须要掌握它相关的内容，尤其是从事前端开发不久的开发者来说尤为重要，是一篇值得阅读的文章，重要性就不在赘述。欢迎关注，一起交流，共同进步。

获取更多信息，可以康康我的博客，所有文章会在博客上先发布随记 - 记录指间流逝的美好 (xiaoyustudent.github.io)

前言

新的一年还没过去，我又开始搞事情了，偶尔一次用到了在线编辑网页代码的网站，顿时想到，能不能自己实现一个呢？（PS：反正也没事干），然后又想着，能不能用在博客上呢，这样有些代码可以直接展现出来，多好，说干就干，让我们康康怎么去实现一个在线编辑代码的功能吧。（PS：有瑕疵，还在学习！勿喷！orz）

大致介绍

大概的想法就是通过iframe标签，让我们自己输入的内容能够在iframe中显示出来，知识点如下，如果有其他问题，欢迎在下方评论区进行补充！

1. 获取输入的内容


2. 插入到iframe中


3. 怎么在博客中显示

当然也有未解决的问题：目前输入的js代码不能操作输入的html代码，查了许多文档，我会继续研究的，各位大佬如果有想法欢迎讨论

页面搭建

页面搭建很简单，就是三个textarea块，加4个按钮，就直接上代码了

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>在线编辑器</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <script>

        $(document).ready(function () {

            $('.HTMLBtn').click(function () {

                $("#cssTextarea").fadeOut(function () {

                    $("#htmlTextarea").fadeIn();

                });

            })



            $('.CSSBtn').click(function () {

                $("#htmlTextarea").fadeOut(function () {

                    $("#cssTextarea").fadeIn();

                });

            })

        });

    </script>

    <style>

        * {

            padding: 0;

            margin: 0;

        }



        body,

        html {

            width: 100%;

            height: 100%;

        }



        .main {

            display: flex;

            flex-direction: row;

            justify-content: space-between;

            width: 100%;

            height: 100%;

        }



        .textarea-box {

            display: flex;

            flex-direction: column;

            width: calc(50% - 20px);

            padding: 10px;

            background: rgba(34, 85, 85, 0.067);

        }



        .textarea-function-box {

            display: flex;

            flex-direction: row;

            justify-content: space-between;

        }



        .textarea-function-left,.textarea-function-right {

            display: flex;

            flex-direction: row;

        }



        .textarea-function-left div,

        .textarea-function-right div {

            padding: 5px 10px;

            border: 1px solid rgb(9, 54, 99);

            border-radius: 3px;

            cursor: pointer;

        }



        .textarea-function-left div:not(:first-child) {

            margin-left: 10px;

        }



        #htmlTextarea,

        #cssTextarea {

            height: calc(100% - 30px);

            width: calc(100% - 20px);

            margin-top: 10px;

            padding: 10px;

            overflow-y: scroll;

            background: #fff;

        }



        .html-div {

            background-color: cadetblue;

            margin-top: 10px;

            flex: 1;

        }



        .iframe-box {

            width: 50%;

            flex: 1;

            overflow: hidden;

        }

    </style>

</head>



<body>

    <div class="main">

        <div class="textarea-box">

            <div class="textarea-function-box">

                <div class="textarea-function-left">

                    <div class="HTMLBtn">HTML</div>

                    <div class="CSSBtn">CSS</div>

                </div>

                <div class="textarea-function-right">

                    <input type="text" id="input_name">

                    <div class="run">运行</div>

                    <div class="download">保存</div>

                </div>

            </div>

            <textarea id="htmlTextarea" placeholder="请输入html代码"></textarea>

            <textarea id="cssTextarea" placeholder="请输入css代码" style="display: none;"></textarea>

        </div>

        <div class="iframe-box">

            <iframe style="height: 100%;width: 100%;" src="" frameborder="0"></iframe>

        </div>

    </div>

</body>

</html>

忽略我的样式，能用就行！！

运行代码

这里是核心功能，应该怎么把代码运行出来呢，我这里用的是iframe，通过获取iframe元素，然后把对应的代码插入进去

$('.run').click(function () {

    var htmlTextarea = document.querySelector('#htmlTextarea').value;

    var cssTextarea = document.querySelector('#cssTextarea').value;

    htmlTextarea += '<style>' + cssTextarea + '</style>'

    // 获取html和css代码

    let frameWin, frameDoc, frameBody;

    frameWin = document.querySelector('iframe').contentWindow;

    frameDoc = frameWin.document;

    frameBody = frameDoc.body;

    // 获取iframe元素



    $(frameBody).html(htmlTextarea);

    // 使用jqury的html方法把代码插入进去，这样能够直接执行

})

这样一个基本的在线代码编辑网页就完成了，接下来，我们看下怎么把这玩意给用在博客当中！

hexo设置

首先我们需要创建一个文件夹，用来放置我们写好的在线的html文件。在source文件夹下新建文件online，并且设置禁止渲染此文件夹，打开_config.yml文件，并设置以下

skip_render: online/*

页面设置

我目前想到的办法就是保存文件，然后在hexo里使用，添加以下代码

<div class="textarea-function-right">

    <input type="text" id="input_name">

    <div class="download">保存</div>

    <!-- .... -->

</div>

<script>

    function fake_click(obj) {

        var ev = document.createEvent("MouseEvents");

        ev.initMouseEvent(

            "click", true, false, window, 0, 0, 0, 0, 0

            , false, false, false, false, 0, null

        );

        obj.dispatchEvent(ev);

    }



    function export_raw(name, data) {

        var urlObject = window.URL || window.webkitURL || window;

        var export_blob = new Blob([data]);

        var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")

        save_link.href = urlObject.createObjectURL(export_blob);

        save_link.download = name;

        fake_click(save_link);

    }



    $(document).ready(function () {

        $(".download").click(function () {

            let scriptStr = $('html').first().context.getElementsByTagName("script")[2].innerHTML

            var htmlTextarea = document.querySelector('#htmlTextarea').value != "" ? document.querySelector('#htmlTextarea').value : '""';

            var cssTextarea = document.querySelector('#cssTextarea').value != "" ? document.querySelector('#cssTextarea').value : '""';

            let htmlStr = $('html').first().context.getElementsByTagName("html")[0].innerHTML.replace(scriptStr, "").replace('<div class="download">保存</div>', "").replace('<input type="text" id="input_name">',"").replace("<script><\/script>", "<script>$(document).ready(function(){document.querySelector('#htmlTextarea').value = `" + htmlTextarea + "`;document.querySelector('#cssTextarea').value = `" + cssTextarea + "`;})<\/script>")

            let n = $('#input_name').val()!=""?$('#input_name').val():"text";

            export_raw(n+'.html', htmlStr);

        })

    })

</script>

可能很多同学会好奇为啥我这里用的script标签框起来，我们看下这个图片和这个代码

et scriptStr = $('html').first().context.getElementsByTagName("script")[2].innerHTML

很简单，我们保存后的代码，是没有这一段js代码的，所以需要替换掉，而这里一共有3个script块，最后一个，也就是下标为2的script块会被替换掉。同理，后面替换掉保存按钮，input输入框（输入框是输入文件名称的，默认名称是text）。

同时这里把我们输入的数据，通过js代码的方式加入进保存后的文件里，实现打开文件就能看到我们写的代码。之后我们把保存后的文件放在刚才我们创建的online文件夹下

hexo里面使用

使用就很简单了，我们通过iframe里面的src属性即可

<iframe src="/online/text.html" style="display:block;height:400px;width:100%;border:0.5px solid rgba(128,128,128,0.4);border-radius:8px;box-sizing:border-box;"></iframe>

展示图

在开发中经常需要我们在数组中查找元素又或者是判断元素是否存在，所以我列举了几种常用的方法供掘友参考学习。

indexOf()

首先想到的就是indexOf()方法，查找元素，并返回第一个找到的位置索引

 [1,2,3,2].indexOf(2)  // 1

他还支持第二个可选参数，指定开始查找的位置

 [1,2,3,2].indexOf(2,2)  // 3

但是indexOf()有个问题，他的实现是由===作为判断的，所以这容易造成一些问题，比如他对于NaN会造成误判

[NaN].indexOf(NaN) // -1

console.log(NaN === NaN) // false

如上，由于误判，没有找到匹配元素，所以返回-1，而在ES6对数组的原型上新增了incudes()方法，他可以代替indexOf()，下面来看看这个方法。

includes()

在ES6之前只有字符串的原型上含有include()方法来判断是否包含字串，而数组在ES6中也新增了include()方法来判断是否包含某个元素，下面来看看如何使用。

[1,2,3].includes(2) // true

数组实例直接调用，参数为要查找的目标元素，返回值为布尔值。而且他能很好地解决indexOf()的问题：

[NaN].includes(NaN) // true

如上includes()可以正确地判断NaN的查找问题，而includes()是用来判断是否包含，查找条件也比较单一，那么如果想要自定义查找条件，比如查找的范围，可以使用这么一对方法：find()与findIndex()接下来看一看他们是如何使用的。

find()与findIndex()

find()与findIndex()可以匹配数组符合条件的元素

find()

find()支持三个参数，分别为value，index，arr，分别为当前值，当前位置，与原数组,，返回值为符号条件的值

let arr = [1,2,10,6,19,20]

arr.find((value,index,arr) => {

    return value > 10

}) // 19

如上，我以元素大于10为范围条件，返回了第一个符合范围条件的值：19。而find()可以返回符合条件的第一个元素，那么我们要是想拿到符合条件的第一个元素索引就可以使用findIndex()。

findIndex()

findIndex()和find相似也支持三个参数，但是返回值不同，其返回的是符合条件的索引

let arr = [1,2,10,6,19]

arr.findIndex((value,index,arr) => {

    return value > 10

}) // 4

例子与find()相同，返回的是19对应的索引

对于NaN值

find()与findIndex()对NaN值也不会误判，可以使用Object.is()来作为范围条件来判断NaN值，如下

[NaN].find((value)=> {

    return Object.is(NaN,value)

}) // NaN

如上例子，findIndex()也同理

最后

判断元素在某数组中是否存在的四种方法就说到这里，对掘友有所帮助的话就点个小心心吧，也欢迎关

继承作为面向对象语言的三大特性之一，可以在不影响父类对象实现的情况下，使得子类对象具有父类对象的特性；同时还能再不影响父类对象行为的情况下扩展子类对象独有的特性，为编码带来了极大的便利。

下面我们就来看看 JavaScript 中都有哪些实现继承的方法。

原型链继承

原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针。

原型链继承的主要思想是：重写子类的prototype属性，将其指向父类的实例。

下面我们结合代码来了解一下。

function Animal (name) {



  // 属性



  this.name = name



  this.type = 'Animal'



  // 实例函数



  this.sleep = function () {



    console.log(this.name + '正在睡觉');



  }



}



// 原型函数



Animal.prototype.eat = function (food) {



  console.log(`${this.name}正在吃${food}`);



}



  





// 子类



function Cat (name) {



  this.name = name



}



// 原型继承



Cat.prototype = new Animal()



// 将Cat的构造函数指向自身



Cat.prototype.constructor = Cat



  





let cat = new Cat('Tom')



console.log(cat.name) // Tom



console.log(cat.type) // Animal



cat.sleep() // Tom正在睡觉



cat.eat('猫罐头') // Tom正在吃猫罐头

在子类Cat中，我们没有增加type属性，因此会直接继承父类Animal的type属性。

在子类Cat中，我们增加了name属性，在生成子类实例时，name属性会覆盖父类Animal属性值。

同样因为Cat的prototype属性指向了Animal类型的实例，因此在生成实例Cat时，会继承实例函数和原型函数。

需要注意：
Cat.prototype.constructor = Cat

如果不将Cat原型对象的constructor属性指向自身的构造函数，那将指向父类Animal的构造函数。

原型链继承的优点

简单，易于实现

只需要设置子类的prototype属性指向父类的实例即可。

可通过子类直接访问父类原型链属性和函数

原型链继承的缺点

子类的所有实例将共享父类的属性

子类的所有实例将共享父类的属性会带来一个很严重的问题，父类包含引用值时，子类的实例改变该引用值会在所有实例中共享。

function Animal () {



  this.skill = ['eat', 'jump', 'sleep']



}



function Cat () {}



Cat.prototype = new Animal()



Cat.prototype.constructor = Cat



  





let cat1 = new Cat()



let cat2 = new Cat()



cat1.skill.push('walk')



console.log(cat1.skill) // ["eat", "jump", "sleep", "walk"]



console.log(cat2.skill) // ["eat", "jump", "sleep", "walk"]

在子类实例化时，无法向父类的构造函数传参

在通过new操作符创建子类的实例时，会调用子类的构造函数，而在子类的构造函数中并没有设置与父类关联，从而导致无法向父类的构造函数传递参数。

无法实现多继承

子类的prototype只能设置一个值，设置多个值时，后面的值会覆盖前面的值。

构造函数继承（借助 call）

构造函数继承的主要思想：在子类的构造函数中通过call()函数改变thi的指向，调用父类的构造函数，从而将父类的实例的属性和函数绑定到子类的this上。

  // 父类



function Animal (age) {



  // 属性



  this.name = 'Animal'



  this.age = age



  // 实例函数



  this.sleep = function () {



    console.log(this.name + '正在睡觉');



  }



}



// 原型函数



Animal.prototype.eat = function (food) {



  console.log(`${this.name}正在吃${food}`);



}



function Cat (name) {



  // 核心，通过call()函数实现Animal的实例的属性和函数的继承



  Animal.call(this)



  this.name = name



}



  





let cat = new Cat('Tom')



cat.sleep() // Tom正在睡觉



cat.eat() // Uncaught TypeError: cat.eat is not a function

通过代码可以发现，子类可以正常调用父类的实例函数，而无法调用父类原型上的函数，这是因为子类并没有通过某种方式来调用父类原型对象上的函数。

构造继承的优点

解决了子类实例共享父类属性的问题

call()函数实际时改变父类Animal构造函数中this的指向，然后调用this指向了子类Cat，相当于将父类的属性和函数直接绑定到了子类的this中，成了子类实例的熟属性和函数，因此生成的子类实例中是各自拥有自己的属性和函数，不会相互影响。

创建子类的实例时，可以向父类传参

   // 父类



function Animal (age) {



  this.name = 'Animal'



  this.age = age



}



function Cat (name, parentAge) {



  // 在子类生成实例时，传递参数给call()函数，间接地传递给父类，然后被子类继承



  Animal.call(this, parentAge)



  this.name = name



}



  





let cat = new Cat('Tom', 10)



console.log(cat.age)

可以实现多继承

在子类的构造函数中，可以多次调用call()函数来继承多个父对象。

构造函数的缺点

实例只是子类的实例，并不是父类的实例

因为我们并未通过原型对象将子类与父类进行串联，所以生成的实例与父类并没有关系。

只能继承父类实例的属性和函数，并不能继承原型对象上的属性和函数

与上面原因相同。

无法复用父类的构造函数

因为父类的实例函数将通过call()函数绑定到子类的this中，因此子类生成的每个实例都会拥有父类实例的引用，这会造成不必要的内存消耗，影响性能。

组合继承

组合继承的主要思想：结合构造继承和原型继承的两种方式，一方面在子类的构造函数中通过call()函数调用父类的构造函数，将父类的实例的属性和函数绑定到子类的this中；另一方面，通过改变子类的prototype属性，继承父类的原型对象上的属性和函数。

// 父类



function Animal (age) {



  // 实例属性



  this.name = 'Animal'



  this.age = age



  this.skill = ['eat', 'jump', 'sleep']



  // 实例函数



  this.sleep = function () {



    console.log(this.name + '正在睡觉')



  }



}



// 原型函数



Animal.prototype.eat = function (food) {



  console.log(`${this.name}正在吃${food}`)



}



  





// 子类



function Cat (name) {



  // 通过构造函数继承实例的属性和函数



  Animal.call(this)



  this.name = name



}



// 通过原型继承原型对象上的属性和函数



Cat.prototype = new Animal()



Cat.prototype.constructor = Cat



  





let cat = new Cat('Tom')



console.log(cat.name) // Tom



cat.sleep() // Tom正在睡觉



cat.eat('猫罐头') // Tom正在吃猫罐头