codingmeup

#### 1. npm 模块安装机制： * 发出`npm install`命令 * 查询node_modules目录之中是否已经存在指定模块 * 若存在，不再重新安装 * 若不存在 * npm 向 registry 查询模块压缩包的网址 * 下载压缩包，存放在根目录下的`.npm`目录里 * 解压压缩包到当前项目的`node_modules`目录 #### 2. npm 实现原理 输入 npm install 命令并敲下回车后，会经历如下几个阶段（以...

35、防抖和节流高阶

2

## 函数防抖（debounce） 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。 将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。 ```js function debounce(fn, ms) { let timer; return function(...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn(...args) timer = null; }, ms);...

39、EventLoop 事件循环，宏/微任务

3

### 定义 event loop翻译出来就是事件循环，可以理解为**实现异步的一种方式** 一个event loop有一个或者多个task队列 #### task任务源： - setTimeout - setInterval - setImmediate - I/O - UI rendering 有两种event loops，一种在浏览器上下文，一种在workers中。 **浏览器上下文 browsing contexts**是一个将 Document 对象呈现给用户的环境。在一个 Web 浏览器内，一个标签页或窗口常包含一个浏览上下文，如一个 iframe 或一个...

5、JS继承、及寄生组合继承

2

### 构造函数、原型对象和实例之间的关系。 代码表示： ```js function F(){} var f = new F(); // 构造器 F.prototype.constructor === F; // true F.__proto__ === Function.prototype; // true Function.prototype.__proto__ === Object.prototype; // true Object.prototype.__proto__ ===...

30、ES特性、BABEL AST相关、编译原理解释器

3

## ES6 等等  **ES6**是ECMA为JavaScript制定的第6个标准版本，相关历史可查看此章节《ES6-ECMAScript6简介》。 标准委员会最终决定，标准在每年6月正式发布并作为当年的正式版本，接下来的时间里就在此版本的基础上进行改动，直到下一年6月草案就自然变成新一年的版本，这样一来就无需以前的版本号，只要用年份标记即可。ECMAscript 2015是在2015年6月发布ES6的第一个版本。以此类推，ECMAscript 2016是ES6的第二个版本、 ECMAscript 2017是ES6的第三个版本。 ES6既是一个历史名词也是一个泛指，含义是5.1版本以后的JavaScript下一代标准，目前涵盖了ES2015、ES2016、ES2017、ES2018、ES2019、ES2020。 所以有些文章上提到的ES7(实质上是ES2016)、ES8(实质上是ES2017)、ES9(实质上是ES2018)、ES10(实质上是ES2019)、ES11(实质上是ES2020)，实质上都是一些**不规范的概念**。 从ES1到ES6，每个标准都是花了好几年甚至十多年才制定下来，你一个ES6到ES7，ES7到ES8，才用了一年，按照这样的定义下去，那不是很快就ES20了。用正确的概念来说ES6目前涵盖了ES2015、ES2016、ES2017、ES2018、ES2019、ES2020。 https://juejin.im/post/5d9bf530518825427b27639d ES6 原理解读 https://juejin.im/post/5c6234f16fb9a049a81fcca5

12、布局类

8

### 左边定宽、右边自适应（类似管理台） - #### 方案一 左边设置左浮动，右边宽度设置100% () ```css .left { float: left; } .right { width: 100% } ``` - #### 方案二 左设置左浮动、右边也左浮动 但是使用calc去补宽度长度计算（方案一二没有完全分层） ```css .left { float: left; }...

[前端面试复习必读精选文章【赠复习导图】 #39](https://github.com/axuebin/articles/issues/39) https://juejin.im/post/5e8b163ff265da47ee3f54a6

18、This问题

3

### this是JS的关键字、代表函数运行时候生成的一个内部对象、只能在函数内部用。 #### 函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。 - 情况一：纯粹的函数调用 函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。 ```js 　　function test(){ 　　　　this.x = 1; 　　　　alert(this.x); 　　} 　　test(); // 1 // 明this就是全局对象，对代码做一些改变： 　　var x = 1; 　　function test(){ 　　　　this.x = 0; 　　} 　　...

16、JS原生的方法实现各种工具方法及call/apply/bind

15

### paserInt ```js function _parseInt(str, radix) { let str_type = typeof str; let res = 0; if (str_type !== 'string' && str_type !== 'number') { // 如果类型不是 string 或 number...

42、WebWorker

3

### Web Worker Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和通道属性总是为空)。一旦创建， 一个worker 可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序 (反之亦然)。 众所周知，Javascript是运行在单线程环境中，也就是说无法同时运行多个脚本。假设用户点击一个按钮，触发了一段用于计算的Javascript代码，那么在这段代码执行完毕之前，页面是无法响应用户操作的。但是，如果将这段代码交给Web Worker去运行的话，那么情况就不一样了：浏览器会在后台启动一个独立的worker线程来专门负责这段代码的运行，因此，页面在这段Javascript代码运行期间依然可以响应用户的其他操作 Web Worker 是HTML5标准的一部分，这一规范定义了一套 API，它允许一段JavaScript程序运行在主线程之外的另外一个线程中。 值得注意的是， Web Worker 规范中定义了两类工作线程， - 专用线程Dedicated Worker Dedicated Worker只能为一个页面所使用 - 共享线程 Shared Worker，Shared...