2.前端去重的方法有哪些？（上篇）

前言

首先，感谢一些同行们对上篇的肯定。

其次，文章标题为”大纲”，只是笔者，整理给自己的一个复习大纲。

也许内容并不深入，因为文章的标题与定义就是大纲，并没指望一篇文章，可以教会提到的对应的知识点。无论哪个知识点，一个原型链最基础的东西，都可进行深挖，大神都可以扯上几万字，也未必能让所有人看懂，培训机构上万的学费，也未必敢说一句包你懂，何况笔者只是一个免费的大纲汇总呢？本文仅是大纲而已。大家哪个知识点不熟悉，应该学会自己查漏补缺，自己学习着去深入。

也许错别字，也许知识点有误，因为时间紧迫，精力有限，能力也有限，多多包涵，也欢迎您的指出，大家一起进步SEO基础知识手册设计，

下篇，不像上篇，很多都是一个开放性的答案，也因个人时间原因，故只提供一个简介，或者第三方链接。

大纲

本章一共有两篇：

其中，该文为下篇，上篇链接为：juejin.im/post/686771…

三.巩固前端基建

本章重点，提供的知识点的归类，以及重点。具体的知识点不做多余的介绍。（如果对知识点不熟悉，建议重点突击补充一下。）

1）加深巩固篇1.前端去重的方法有哪些？

看过一篇文章，里边有十二种，可以参考：segmentfault.com/a/119000001…

但是内容感觉很多重复，以及有点为重复而重复。笔者简单提及一下自己脑袋里可行的去重方法（关键字思维，代码太多了暂不提供）：

2.前端异步的方案有哪些？

1）Promise(可看上篇的解释)2）generator(可看上篇的解释)3）async/await4）事件发布/监听模式(可看后续的设计模式，属于发布订阅模式，代表作EventBus)

async 和 await 相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码。缺点在于滥用 await 可能会导致性能问题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。

3.前端网络请求有哪些？

ajax, fetch, axios。

一句简单的语句来概括的话，ajax因为不支持promise给淘汰，从而有了fetch，然后fetch缺陷多，不支持对异常捕捉，不支持监听进度条，cookies不友好等等。所以，axios当今浪潮。

有兴趣了解，推荐：juejin.im/post/684490…

4.前端定时器有哪些？

异步编程当然少不了定时器了，常见的定时器函数有 setTimeout、setInterval、requestAnimationFrame。我们先来讲讲最常用的setTimeout，很多人认为 setTimeout 是延时多久，那就应该是多久后执行。其实这个观点是错误的，因为 JS 是单线程执行的，如果前面的代码影响了性能，就会导致 setTimeout 不会按期执行。当然了，我们可以通过代码去修正 setTimeout，从而使定时器相对准确

首先 requestAnimationFrame 自带函数节流功能，基本可以保证在 16.6 毫秒内只执行一次（不掉帧的情况下），并且该函数的延时效果是精确的，没有其他定时器时间不准的问题SEO基础知识手册设计，当然你也可以通过该函数来实现 setTimeout。

5.前端创建对象有哪几种方式？

该知识点只做汇总提示，不做具体分析。请各自查询资料查漏补缺。

function TestObj(name){

this.name = name;

}

5)原型创建

function TestObj(){}

Person.prototype.name = '小明';

};

6.前端的继承方式有哪些？

详细可参考：juejin.im/post/684490…

7.前端代码的复用有哪几种方式？

该知识点只做汇总提示，不做具体分析。请各自查询资料查漏补缺。

2）手写api

此部分，废话不多说，直接给对应的代码！如果还有其他重要手写代码，留言笔者会考虑补充。

1.new

2.apply/call/bind

3.instanceOf

4.获取url参数

5.模拟深拷贝

简版看笔者代码，如需要深入建议：…

6.防抖与节流

7.手写迭代器next

8.手写Object.freeze

3）框架源码理解

源码是很多企业的考试重点，看不懂源码没关系，但是要明白源码大概是什么，大概的原理又是什么。此章节内容相对较多，笔者就不单独在本文解析。

笔者自身也处于探索或学习状态。如果你2到5年工作经验，想学习一下源码，可以参考一下笔者过去写的文章，那也是笔者的复习思路。

列的知识点，都是重点之重点。

如果你有一定的基础，或以及看过源码，或觉得网上还有更好的帖子，可以另从他处学习，不喜勿喷。(笔者也是学习中写下的源码，有不足或者理解错误的地方，多多包涵与讨论)

1.vue源码

笔者mini版草文：juejin.im/post/684790…

2.react源码

笔者mini版草文：juejin.im/post/685457…

3.wepback源码

笔者mini版草文：juejin.im/post/685457…

4.vuex源码

笔者mini版草文：juejin.im/post/685705…

5.vue route源码

笔者mini版草文：juejin.im/post/686010…

6.diff源码

笔者mini版草文：juejin.im/post/686881…

7.promise源码

笔者mini版草文： juejin.im/post/686920…

8.react体系

react fiber,，react redux， react Hook等，笔者来不及学习或汇总，提供曾看到不错的文章：

React Fiber： juejin.im/post/685952…

React Hook：juejin.im/post/686774…

React redux： juejin.im/post/684490…

4）工具拓展篇1.babel

概念部分拷贝：juejin.im/post/684490…

Babel是一个工具链，主要用于将ECMAScript 2015+版本代码向后兼容 Javascript 语法，以便可以运行到旧版本浏览器或其他环境中。Babel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。

2.nignx

非专业人员，不过前端人员还是必要掌握一下前端如何部署。

简单的普及一下nignx，Nginx可见简单理解成，所开发高性能的 Web和 反向代理 服务器。

明白nigix如何实现正向代理，如何实现反向代理，如何完成负载均衡。本文不做重点介绍，有兴趣请移步：juejin.im/post/684490…

3.csr与ssr

SSR(Server Side Rendering) ：传统的渲染方式，由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。

CSR(Client Side Rendering)：是一种目前流行的渲染方式，它依赖的是运行在客户端的JS，用户首次发送请求只能得到小部分的指引性HTML代码。第二次请求将会请求更多包含HTML字符串的JS文件。

SSR优点：1）有利于SEO的优化2）首屏快

缺陷：1）性能全都依赖于服务器2）只能做静态，交互效果还是得用CSR，前端界面开发可操作性不高3）开发条件受限，生命周期等。

反之，CSR 不利于SEO，首屏慢，但是交互效果好。

4.web Worker

想了解的朋友们移步：juejin.im/post/684490…

四.编程相关

这里为”编程相关”，而不是”前端相关”，因为这是无论哪个客户端的开发人员都必须掌握的基础。废话不多说，本文列举以前端挂钩的知识点。

1）设计模式篇

设计模式更是一种思维。设计模式一共23种，分创建型，结构，行为型。本文举几个，前端用到的几个设计模式，且是简单的描述一下。

1.单例模式

一个极有可能重复出现的“实例”, 如果重复创建，是否消耗性能？如果借助第一次的实例，后续只是对该实例的重复使用，这样就达到了我们节省性能的目的。

可能服务端的朋友，知道什么是数据库链接池，这就是一个单例的经典模式，数据库连接池，与每次创建数据库连接，效率值将差异巨大。这就是单例模式的魅力。

我们前端的实践中，也经常可以借鉴这个思维。例如，登录弹出框，取消重新弹出时，再显示原来的弹出框，而不是重新创建。

2.工厂模式

这里严格来说有两类设计模式，一个叫简单工厂，一个抽象工厂。

简单工厂模式叫做静态工厂方法模式，是由一个工厂对象决定创建出哪一种产品类的实例。例如富士康同时需要生产华为，苹果等手机，我们可用一个工厂的模型，生产人只要输入型号，就可以产出对应的手机。

抽象工厂，多一个抽象对象。抽象工厂是工厂方法模式的核心，所有创建对象的工厂类都必须实现该接口。 如上栗子，如果还需要手机颜色，内存大小，共同来确定一步手机，这就是抽象工厂。抽象工厂，还需要使用户根据参数获得对应的类实例，避免了直接实例化类，降低了耦合性。

3.策略模式

简单点的理解，就是针对不同的状态，给出不同的算法或者结果。定义好策略组，根据不同的状态定义不同的策略。我们前端的实例，比如我们的form验证。他的优点：

4.责任链模式

用来处理相关事务责任的一条执行链。例如前端JS 中的事件冒泡，一层一层往上传递。优点：

5.观察者模式(Vue必懂)

发布订阅模式属于广义上的观察者模式。经过时间的沉淀，慢慢独立于观察者模式，成为另外一种不同的设计模式。

这篇写得挺好的：blog.csdn.net/hf872914334…

Vue双向绑定的思维的设计模式，Vue玩家必须深入一下。

7.装饰器模式(React必懂)

装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。有点类似我们的相框与相片的关系。

React高阶组件的思维，React玩家必须深入一下。

2）网络协议篇

本人列举几个重点的点。建议直接tiantianUp的文章，写得比较适合观众（不像写得比较适合自己，自己看的都是写个要点去联想）。

本节内容参考：