羊肉汤是满满的一粗瓷大碗，上面撒满了芫荽、葱花和几丝细细的姜丝。用筷子翻了，大片的熟羊肉片，溜薄，挑开往里一淹，将芫荽往浓香肥腻的汤里一浸，舀一勺羊油熟的辣椒块，往碗里一搅，拿烧饼一块儿一块儿撕了，就着羊肉汤吃喝了。

【奎楼街的鱼汤】

鱼是沙河里的那种细极细极的长条鱼，用菜花油炸了，焦黄里嫩，汤便是那沙河泉水和着各种作料熬煮的，盛汤的更是本地神垕产的青瓷细花碗。都说只有用那种碗盛，浸出的鱼汤才别样的美嫩。微风起时，独木招牌上的小红灯笼就一晃一晃的，模糊的柳影便在乌亮的方桌上渐渐移动。

【茭白烩肥鸭】

若是酷暑，又很口馋，便做一道茭白烩肥鸭来吃。茭白消暑气，去烦热；鸭子滋补，振食欲。

先将鸭子清水洗净，取一二盅白酒倾入冷水，搅匀，将鸭子放入水中冷镇。半小时左右，将鸭子取出，控去酒水，利刃旋片。茭白洗净，也切成圆片。坐炒锅，打火，倾坚果油若干。油热时，爆炒鸭肉，候变色，着三两盅白酒淋入，翻炒一下，盖锅焖煮。待鸭肉酒香溢出，揭盖将茭白片倾入，撒盐若干，翻炒三四下，此菜即成。

【吃野菜】

寨外两个沟，沟里有星星点点杨树，若遇潮湿落雨天，这一处那一片勃长出许多“地曲莲”。“地曲莲”是乡间的一种俗称。一小瓣一小瓣褐叶子，薄薄的，采回来，拿井水淘净了，类似于县城集市上卖的黑木耳，但总体要比木耳小很多。油锅坐上，先磕几枚鸡蛋进去炒。待鸡蛋快熟了，将“地曲莲”搓进菜锅内，与鸡蛋翻炒几下，一盘香喷喷的菜便完成。

【火烧夹肉】

火烧夹牛肉要好吃，火烧必炕的外焦里嫩，牛肉必煮的五香筋烂，二者缺一不可。火烧炕好了，案板上一扔，“啪”，圆圆整整，有弹性。一手压了一手便拿刀去片，“噗”——散出一股热气，里头的瓤如蜂窝，然后去切牛肉。牛肉必是五香的好吃，有嚼头，还要烂熟，切成溜薄的片，往火烧里一夹，满满一兜。

【鲫鱼包韭菜】

若要讲究，做好鲫鱼包韭菜，性情不得急躁。

必提前半晌就要购回鲜活鲫鱼一二条来，逗进泉水或井水瓷缸里，为的是将鲫鱼内里的脏水排净。然后换水，依然还得用泉水或井水，倾入少许酒，鱼养进去。酒水养鱼，目的有二：一是为了好杀，二是酒浸鱼内，鱼味异常鲜美。这边就要准备春韭去。最好取一些肥肥的韭菜，洗净，手掐成长短齐整的段来。切忌不可刀切，铁刀夺味。鱼饮酒后，便倦了，拿竹刀杀之。然后剔鳞、剖肚，一边淘洗干净，大料、姜丝、酱油腌好，韭菜成段填进鱼肚，撒少量盐，文火蒸吃，味道清雅不俗；或者裹好、系紧，炭火烤吃。最妙处，是郊外野柴烤吃，美味自不必多言。

【吃黏转儿】

小水渠沟里有积水，一汪一汪倒映着一小片一小片蓝天，天上一絮朵一絮朵镶了金边的白云，动动，就如优游水中的小金鱼。而沟垅上的草和野花，皆睡醒了，眨动晶晶亮的小眼睛看我们。我和妹妹尽量斜了身子，沿水渠走，怕碰疼他们。我们已经碰疼她们了，走过去，裤脚都被小小的泪水打湿。

【香椿翅】

起风了，小小的风，像无数细碎风铃，满树满枝挂满了，脆生生乱响。我爬进风声中间，香椿叶子晃动我、拍打我，宛如肥嫩嫩的小巴掌。太阳光一耀，穿亮了青涩涩的香气，在灿灿亮光与风里面，我一叶一叶摘着，像摘下一片片小月亮、小银盘，放进筐里去。满筐都是银灿灿的。然而，一会儿，他们纷纷转变颜色——浅绿了，又似满筐的翠鸟。我一胳膊挎着满筐小鸟，一胳膊搂着树干，滑下来。地上的风与香椿树影，宛若明灭的花朵。

1. 深拷贝和浅拷贝(递归调用死循环问题如何解决) :star:

基本类型–名值都存储在栈内存中。
引用数据类型–存储的是地址（指针），数据存储在堆上（栈内存会提供一个引用的地址指向堆内存中的值）

基本类型赋值时，赋的是值，所以不存在深浅拷贝问题。

引用类型赋值时，复制的是原本变量的引用地址（指针），浅拷贝就是新值和旧值变量指向同一个内存地址，当地址中的值改变时，他们都会同时变化。

深拷贝就是实现新旧值互不影响，拷贝的过程中，独立地开辟了一个空间，这个对象指向这个地址，与原来的对象互不干扰。深拷贝也被称为值拷贝。

对象实现深拷贝有JSON.parse(JSON.stringify())，Object.assign()。数组实现深拷贝有slice，concat。

用扩展运算符对数组或者对象进行拷贝时，只能扩展和深拷贝第一层的值，对于第二层及其以后的值，扩展运算符将不能对其进行打散扩展，也不能对其进行深拷贝，即拷贝后和拷贝前第二层中的对象或者数组仍然引用的是同一个地址，其中一方改变，另一方也跟着改变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 实现深拷贝
export function deepClone(obj, hash = new WeakMap()) {
  // 处理null或者undefined
  if (obj === null) return obj;
  // 处理日期类型
  if (obj instanceof Date) return new Date(obj);
  // 处理正则类型
  if (obj instanceof RegExp) return new RegExp(obj);
  // 普通值或函数不需要深拷贝
  if (typeof obj !== "object") return obj;
  // 对象进行深拷贝(解决循环引用)
  if (hash.get(obj)) return hash.get(obj);
  let cloneObj = new obj.constructor();
  // 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
  hash.set(obj, cloneObj);
  for (let key in obj) {
    // 检测属性是否为对象的自有属性
    if (obj.hasOwnProperty(key)) {
      // 实现一个递归拷贝
      cloneObj[key] = deepClone(obj[key], hash);
    }
  }
  return cloneObj;
}

JS 从零手写一个深拷贝

JSON.parse(JSON.stringify(obj)) 实现深拷贝存在的缺陷

• 如果obj里面存在时间对象,JSON.parse(JSON.stringify(obj))之后，时间对象变成了字符串。
• 如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象。
• 如果obj里有函数，undefined，则序列化的结果会把函数， undefined丢失。
• 如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null。
• JSON.stringify()只能序列化对象的可枚举的自有属性。如果obj中的对象是有构造函数生成的，则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor。
• 如果对象中存在循环引用的情况也无法正确实现深拷贝。

JSON.stringify的参数

JSON.stringify(value[, replacer [, space]])

• replacer：处理序列化中的每个属性的函数方法
• space：指定缩进用的字符串，用于美化输出

手写一个JSON.stringify

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

function myStringify(obj){
  //忽略undefind和function 先置为undefined 组合的时候忽略
  if(obj === undefined || typeof(obj) === 'function'){
    return undefined;
  }

  //null或者NaN Infinity置为null
  if(obj === null){
    return null;
  }

  // 时间对象转为字符串
  if(obj instanceof Date){
    return `"${obj.toJSON()}"`
  }

  //regExp输出{}
  if(obj instanceof RegExp){
    return `{}`
  }

  //字符串 置为“spring” 布尔 数字原样输出
  if(typeof(obj)!== 'object'){
    return typeof(obj) === 'string' ? `"${obj}"`:obj
  }

  //数组
  if(Array.isArray(obj)){
    let arrStr = obj.map(item => `${myStringify(item)}` )
   return `[${arrStr.join(',')}]`
  }

  //采用Object.getOwnPropertyNames直接过滤掉symbol
  let keyNames = Object.getOwnPropertyNames(obj);
  const arrObj = keyNames.map((item) => {
    return `${myStringify(obj[item]) !== undefined && `"${item}":${myStringify(obj[item])}`}`
  })
  return `{${arrObj.join(',')}}`
}

2. 防抖和节流 :star:

防抖（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时（多次触发，只执行最后一次）。

作用： 高频率触发的事件，在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间。

应用场景：按钮多次点击，resize 多次触发、搜索框输入查询等

1
2
3
4
5
6
7
8
9
10
11
12
13

// 防抖函数
function debounce (f, wait) {
  let timer;  // 创建一个标记用来存放定时器的返回值

  return (...args) => {
    // 每当用户输入的时候把前一个 setTimeout clear 掉
    clearTimeout(timer)
    // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
    timer = setTimeout(() => {
      f(...args)
    }, wait)
  }
}

节流（throttle），控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。类似（规定时间内，只触发一次）。

作用： 高频率触发的事件,在指定的单位时间内，只响应第一次。

应用场景：监听滚动事件，播放事件等

1
2
3
4
5
6
7
8
9
10
11

// 节流函数
function throttle (f, wait) {
  let timer
  return (...args) => {
    if (timer) { return }
    timer = setTimeout(() => {
      f(...args)
      timer = null
    }, wait)
  }
}

3. async/await 和 Promise、JS事件循环机制 :star:

async/await 是参照 Generator 封装的一套异步处理方案，可以理解为 Generator 的语法糖。

async/await原理：将 Generator 函数和自动执行器，包装在一个函数里，不用手动调用Generator.next。一般返回一个promise对象。

写给自己的前端面试指南

4. for in 和 for of

• for in：主要用来遍历对象（for keys in obj）

  遍历自身和继承的可枚举属性（延续原型链遍历出对象的原型属性）

  有什么问题：要使用 hasOwnProperty 判断，只处理自身的，不处理继承的

• for of： ES6 新增的，遍历所有数据结构的统一的方法

  只要部署了 Symbol.iterator 属性，就被视为具有 iterator 接口，就可以用 for…of 循环遍历它的成员

  包括数组、Set 和 Map 结构、某些类似数组的对象（比如 arguments 对象、DOM NodeList 对象）、Generator 对象，以及字符串

5. 函数式编程：柯里化(curry)；组合函数(compose)；管道函数(pipe)

高阶函数：一个函数接收的参数是一个函数，或者调用的返回值是一个函数。

• 函数柯里化(curry)：把接收多个参数的函数，转成接收单一参数的函数，它返回一个新的函数, 这个新函数去处理剩余的参数；
• 函数组合（pipe&compose）：函数组合可以让我们把多个函数组合成一个新的函数，然后在执行的过程中，我们可以把参数输入给第一个函数，当它执行完成以后会返回一个中间结果。并且把这个中间结果交接下一个函数去处理，当最后一个函数执行完毕之后，我们会把最终结果返回

6. slice和splice的区别

两者都是数组删除的方法

• splice改变原数组，slice不改变原数组;
• slice会返回一个新的数组，可用于截取数组;
• splice返回被删除项组成的的新数组，除了可以删除之外，还可以替换，添加数组;
• 传参：splice(index, number, …newItems)，slice(start, end)

7. substr和substring的区别

两者的作用都是截取字符串的。

• substr(start, length)是从起始索引开始提取指定长度的字符串
• substring(start, stop)是提取字符串中两个指定索引之间的字符

8. let const var区别 :star:

和var的区别：

• 重复声明：let和const不允许在相同作用域内，重复声明同一个变量
• 变量提升：let不像var那样，会发生“变量提升”现象。（var会提升变量的声明到作用域的顶部）
• 暂时性死区：只要作用域内存在let、const，它们所声明的变量或常量就会自动“绑定”这个区域，不再受外部作用域的影响
• 块级作用域：var没有块级作用域(var 声明的变量的作用域只能是全局或者整个函数块的,作用域是它当前的执行上下文)，let和const有块级作用域
• 全局作用域中：let和const声明的变量内存空间不挂在于window上（let、const声明的全局变量在window对象上看不到，在script中形成了一个块级作用域，这样在全局就可以访问到），而var声明的变量是挂载到window上

const声明常量，声明之后常量的值不会改变。

9. 箭头函数与普通函数的区别

• 箭头函数是匿名函数，而普通函数可以匿名也可以不匿名
• 本身没有 this，内部this是上层作用域决定
• 没有原型，没有自己的arguments
• 不能作为构造函数

10. Map和WeakMap的区别, Set

• Map可以接受任何类型作为key，WeakMap只接受Object作为key；Map 通过两个数组分别存放键和值，容易导致内存泄漏。
• WeakMap 对键是弱引用，有垃圾回收机制，不可枚举。
• Set: Set 对象允许你存储任何类型的值，无论是原始值或者是对象引用。它类似于数组，但是成员的值都是唯一的，没有重复的值。（has、add、delete、size）

11. requestAnimationFrame

requestAnimationFrame 自带函数节流功能，基本可以保证在 16.6 毫秒内只执行一次（不掉帧的情况下），并且该函数的延时效果是精确的，没有其他定时器时间不准的问题。

12. class继承的优点

简化了原型链继承的写法。

13. js实现私有属性和方法

在一个构造函数里面定义的function，只有父类可以访问的方法和属性，就是一个私有方法。

• 基于编码规范约定实现方式: this._name

• 基于闭包的实现方式:

  1 2 3 4 5 6

  function Person(name){ var _name = name; this.getName = function(){ return _name; } }

• 使用Proxy 拦截访问私有变量_prop

• Es6：通过 # 的方式来标识私有属性和方法 #prop

14. js为什么是单线程

js是作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom。如果多线程同时操作dom会混乱（比如删除和监听点击事件同时被触发）。

js的异步：js主线程虽然是单线程，但是底层还是有其他线程的，比如事件执行线程等，异步任务就会放到事件队列中执行，执行完返回给主线程。

16. dom事件模型

事件冒泡和事件捕获。事件捕获 ——> 目标 ——> 冒泡

IE和DOM事件流的区别

事件冒泡（IE事件流）：从目标元素冒泡到body（绑定事件attachEvent）

事件捕获： 从body到目标元素

DOM事件模型： 先捕获后冒泡（绑定事件addEventListener）

17. null，undefined的区别

null 表示空对象，转换数值会变成0；undefined表示“无”的原始值，转换数值是NaN

null表示一个对象被定义了，但存放了空指针，转换为数值时为0。
undefined表示声明的变量未初始化，转换为数值时为NAN。

18. 栈和堆的区别？

栈（stack）：由程序自动分配释放，存放函数的参数值，局部变量等；
堆（heap）：一般由程序员分配释放，若程序员不释放，程序结束时可能由操作系统释放。

19. JS延迟加载的方式

• defer：延迟脚本。立即下载(与html解析并行)，但延迟执行（等整个页面都解析完再运行），按照脚本出现的先后顺序执行;
• async: 异步脚本。下载(与html解析并行)完立即执行(可能会阻塞html解析)，但不保证按照脚本出现的先后顺序执行;
• 动态创建dom方式、
• 使用jquery的getScript方法、
• 使用setTimeout延迟方法、让js最后加载

PS：同步和异步：同步强调的是顺序性，按顺序执行

20. Symbol和bigint

symbol作为对象的属性是不能用for in 和Object.keys()来枚举的。JSON.stringify()将对象转换成JSON字符串的时候，Symbol属性也会被排除在输出内容之外。
使用场景：

• 使用Symbol来作为对象属性名，利用该特性，把一些不需要对外操作和访问的属性使用Symbol来定义
• 使用Symbol定义类的私有属性和方法
• 由于在 Number 与 BigInt 之间进行转换会损失精度，因而建议仅在值可能大于253 时使用 BigInt 类型，并且不在两种类型之间进行相互转换。

21. prefetch和preload

preload与prefetch同属于浏览器的Resource-Hints，用于辅助浏览器进行资源优化。prefetch通常翻译为预提取，preload则翻译为预加载。

• preload和prefetch的本质都是预加载，即先加载、后执行，加载与执行解耦。
• preload和prefetch不会阻塞页面的onload。
• preload用来声明当前页面的关键资源，强制浏览器尽快加载；而prefetch用来声明将来可能用到的资源，在浏览器空闲时进行加载。
• 关于preload和prefetch资源的缓存，它被存储在HTTP缓存（也就是disk cache）中，可以被现在或将来的任务使用；如果资源不能被缓存在HTTP缓存中，作为代替，它被放在内存缓存中直到被使用。

22. BOM（浏览器对象模型）和DOM（文档对象模型）

23. Ajax、Axios、Fetch有啥区别？

Ajax：是对XMLHttpRequest(XHR)的封装
Axios：是基于Promise对XHR对象的封装
Fetch：是window的一个方法，基于Promise，与XHR无关，不兼容IE

24. load、$(document).ready、DOMContentLoaded的区别？

$(document).ready、DOMContentLoaded：DOM树构建完毕，但还没有请求静态资源
load：静态资源请求完毕, 页面加载完成后

25. includes 比 indexOf好在哪

includes可以检测NaN，indexOf不能检测NaN，includes内部使用了Number.isNaN对NaN进行了匹配

Vue

1. 响应式原理 :star:

• Vue2：通过Object.defineProperty()(可以控制一个对象属性的一些特有操作)来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
• Vue3: 基于 Proxy 实现的，解决了 Vue2 响应式的缺陷。通过 new Proxy 代理了 obj 对象，然后通过 get、set 方法代理了对象的读取、修改和删除操作，从而实现了响应式的功能。

Vue2和Vue3原理区别

2. 虚拟 dom 原理 和 diff 算法 :star:

• 虚拟DOM：它通过js对象模拟DOM中的节点，是对真实DOM的抽象，状态变更时，记录新树和旧树的差异，最后把差异更新到真正的dom中。（通过特定的render方法将其渲染成真实的DOM节点）
• diff算法：一种通过同层的树节点进行比较的高效算法。通过JS层面的计算，返回一个patch对象，即补丁对象，在通过特定的操作解析patch对象，完成页面的重新渲染。其有两个特点：
  1. 只会在同层级节点进行比较，不会跨级。
  2. diff比较过程是从两侧向中间进行比较。

patch作用：更新 DOM 树,将两次渲染之间的 DOM 操作更新到树中。

虚拟dom原理：

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

虚拟dom缺点：
⾸次渲染⼤量 DOM 时，由于多了⼀层虚拟 DOM 的计算，会⽐ innerHTML 插⼊慢

Vue2和Vue3原理区别

3. vue 组件传值 :star:

props/$emit、ref、$parent/$children、$attrs/$listeners、provide/inject、eventBus、vuex

• 父子：props/$emit、ref、$attrs、$parent
• 兄弟：$parent、$root、eventBus、vuex
• 跨级：eventBus、vuex、provide/inject

几大框架知识点梳理

4. vue生命周期钩子函数为什么不能使用箭头函数

所有生命周期钩子的 this 上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。因为箭头函数绑定了父系上下文，所以 this 不会指向预期的组件实例，并且this.fetchTodos 将会是 undefined。

箭头函数自己没有定义 this 上下文，而是绑定到其父函数的上下文中。当你在 Vue 程序中使用箭头函数时，this 关键字并不会绑定到 Vue 实例，因此会引发错误。

5. nextTick 实现原理 :star:

在下次DOM更新循环结束之后执行的延迟回调。应用于需要在视图更新之后，基于新的视图进行操作。

Vue 在更新 DOM 时是异步执行的。Vue的异步更新策略：如果数据变化，视图不会立即更新，而是把组件更新函数保存在一个队列中，在同一事件循环中发生的所有数据变更会异步的批量更新。

实现原理：nextTick方法主要是使用了事件循环机制，定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空队列：

• Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，找到存在的就调用他childrenRef；如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。(优先微任务)
• 先把传入的回调函数 cb 推入 回调队列 callbacks 数组，同时在接收第一个回调函数时，执行能力检测中对应的异步方法 timerFunc，在该方法中会使用当前浏览器支持的异步方法去异步执行 flushCallbacks，而 flushCallbacks 函数中会对 callbacks 进行遍历，并执行每一个回调函数。

nextTick的实现原理

6.如何衡量组件封装的好与不好

扩展性；如何设置扩展性比较好（预留插槽）

对于组件的设计，一般是一个组件能够完整的完成一件事情，或者一个完整的逻辑；另外组件的设计一般是讲究高内聚，低耦合等原则进行设计。一个组件的设计应该具备以下的内容：

• 功能独立和唯一
• 可复⽤的模块，完成既定功能
• 有明确的接⼝规定
• 有上下⽂依赖、外部依赖资源的定义
• 可以独⽴发布

7. vue style scoped 属性作用是啥，如何是样式仅在当前模块生效

作用：实现组件的私有化，不对全局造成样式污染，表示当前 style 属性只属于当前模块
原理：打包之后，编译成特定样式，data-v-[hash]，即 CSS 带属性选择器

8. Vue3 和 React的区别

Vue的优势：

• 模板和渲染函数的弹性选择
• 简单的语法及项目创建
• 更快的渲染速度和更小的体积

React的优势：

• 适用于大型应用和更好的可测试性
• 同时适用于Web端和原生App

Vue与React的区别和优势对比

9. vue key 的作用

高效的更新虚拟 dom。

如果循环dom时没有key，在diff算法比较时（key相同且tag相同认为是相同元素）就可能判断出错，可能永远认为是相同节点，执行更新操作，导致DOM操作频繁，影响性能。

10. vue-router 实现原理 :star:

• hash模式（浏览器的hashchange事件）
• history模式（HTML5 History API）

Vue路由

11. v-model原理

v-model一般配合input框使用，实现双向数据绑定的效果，它是v-bind和v-on的语法糖，原理是通过v-bind将数据绑定给input框，再通过v-on:input，在input中的值改变时，通过$event可以获取到事件源对象 再通过target.value获取到input中更新后的值 将这个值再赋值给绑定的数据即可

12. 父子组件的周期执行顺序 :star:

1. 初始化阶段时，先执行父组件的beforeCreate、created、beforeMount三个钩子函数，然后执行子组件的beforeCreate、created、beforeMount、mounted四个钩子函数，最后执行父组件的mounted钩子函数
2. 更新阶段，先执行父组件的beforeUpdate，然后执行子组件的beforeUpdate，updated，最后执行父组件的updated
3. 销毁阶段，先执行父组件的beforeDestroy，然后执行子组件的eforeDestroy，destroyed，最后执行父组件的destroyed

13. vite 和 webpack 区别

1. 工具本身定位不同：webpack是底层的东西，vite则是更上层的工具。webpack是配置化，灵活度极高的工具，vite是开箱即用，使用更简单的工具
2. 原理不同：webpack是bundle，自己实现了一套模块导入导出机制。vite是利用浏览器的esm能力，是unbundle。

优缺点:
vite开箱即用，基于浏览器esm，使得热更新更加优秀。(vite主要使用插件进行扩展功能)

webpack更加灵活，api以及插件生态更加丰富，高可定制，兼容更多浏览器，例如ie11。

vite介绍

vite: 基于esbuild与Rollup，依靠浏览器自身ESM编译功能，实现的构建工具

vite的特点：

• 冷启动快，不需要等待打包操作；
• 热更新快（采用 unbundle 机制，所以 dev server在监听到文件发生变化以后，只需要通过ws通知浏览器去重新加载变化的文件，剩下的工作就交给浏览器做）；
• 按需编译，不再等待整个应用编译完成（Vite 只需要在浏览器请求源码时进行转换并按需提供源码）
• 缺点：首屏和懒加载性能的下降

vite常用配置：plugins，server, resolve/alias, build(outDir, lib, rollupOptions)

vite的打包原理

Vite 原理是利用现代浏览器支持原生的 ESM 规范，配合 server 做拦截，把代码编译成浏览器支持的。通过劫持浏览器的请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器。

1.将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。

• 依赖 ：一般是第三方依赖，比如组件库，这一部分使用 esbuild 来进行 依赖预构建, esbuild 使用的是 Go 进行编写，比 JavaScript 编写的打包器预构建依赖快很多
• 源码 ：浏览器不能直接执行的非js代码(.jsx、.css、.vue等)，vite只在浏览器请求相关源码的时候进行转换，以提供ESM源码。

2.拦截浏览器对模块的请求并返回处理后的结果。（浏览器执行ESM的import时，会向dev server发起该模块的ajax请求，服务器对源码做简单处理后返回给浏览器。）

过程：
依赖预构建 -> 启动dev server -> 浏览器解析模块并根据顺序请求 -> 拦截浏览器请求并进行转换 -> 源码返回给浏览器

vite首屏加载优化：在启动时对某些资源进行预打包，尽量避免后续的动态打包（vite-plugin-optimize-persist）

vite的打包原理

14. vite为什么启动那么快（快速的冷启动和快速的热更新）

Vite 借助了浏览器对 ESM 规范的支持，采取了与 Webpack 完全不同的 unbundle 机制。

unbundle 机制：不需要做 bundle 操作，即不需要构建、分解 module graph，源文件之间的依赖关系完全通过浏览器对 ESM 规范的支持来解析。这就使得 dev server 在启动过程中只需做一些初始化的工作，剩下的完全由浏览器支持。

• 模块之间的依赖关系的解析由浏览器实现
• 文件的转换由 dev server 的 middlewares 实现并做缓存
• 不对源文件做合并捆绑操作

unbundle 机制缺点：首屏慢，vite需要动态的解析依赖，并打包，引入。

Vite为什么快

15. vue keep-alive 缓存组件的策略

keep-alive是Vue提供的一个内置的抽象组件，被keep-alive组件包裹的内部组件，其状态将被缓存(缓存不活跃的组件实例而不是销毁他们，在组件切换过程中状态保存在内存中，防止重复渲染)，该组件会新增两个生命周期函数activated和deactivated，每次进入都会被执行。

如何实现：主要是根据LRU策略缓存组件 VNode，最后在 render 时返回子组件的 VNode。

如何更新：缓存渲染过程会更新 keep-alive 插槽，重新再 render 一次，从缓存中读取之前的组件 VNode 实现状态缓存。(vnode中的componentInstance保存了组件实例，在patch过程中直接insert实例，避免重新渲染)。

在使用 keep-alive 时，可以添加 prop 属性 include、exclude、max 允许组件有条件的缓存。
$route.meta.keepAlive可以缓存页面。

原理：LRU（最近最少使用）策略，根据组件访问的时间，将很久未访问的组件从缓存中删除。组件首次渲染时，keep-alive 会将组件缓存起来。等到缓存渲染时，keep-alive 会更新插槽内容，之后 $forceUpdate 重新渲染。这样在 render 时就获取到最新的组件，如果命中缓存则从缓存中返回 VNode。

16. 组件渲染更新的过程

初次渲染：

• 解析模板为render函数（在开发环境下用vue-loader完成）
• 触发响应式，监听data属性（Object.freeze可以不做响应式监听）
• 执行render函数(会触发用到的getter)，生成vnode，并且进行patch(ele, vnode)

更新：

• 修改data触发setter
• 重新执行render函数，生成newVnode
• 执行patch(vnode, newVnode)，diff算法更新视图

异步渲染：汇总data修改，一次性更新视图，减少DOM操作优化性能

17. computed 和 watch 区别

computed一般是根据data数据返回计算之后的结果。
computed与methods区别：computed是惰性的，有缓存性。如果依赖值不变就不重新计算。
watch没有返回值，一般用于监听数据变化执行一些异步操作或DOM操作。

18. vuex的理解

vue的状态管理库。可以统一管理所有组件的状态。vue中尽量使用单向数据流，所以在多个组件共享一个状态，就很难保证单向。所以我们需要把共享状态抽离出来，以全局单例模式管理，使得状态管理更加结构化和可维护。比较适合用于中大型项目。

原理：vuex利用了vue的mixin机制，混合 beforeCreate 钩子 将store注入至vue组件实例上，并注册了 vuex store的引用属性 $store。
vuex的state是借助vue的响应式data实现的。getter是借助vue的计算属性computed特性实现的。

19. vue挂载过程发生了啥

• 初始化：创建组件实例，初始化组件状态，创建响应式数据
• 建立更新机制：执行组件渲染函数（patch将vnode转成DOM）；同时渲染时会创建内部响应式数据和依赖关系

20. vue可以做哪些性能优化

路由懒加载、keep-alive缓存、对很大的组件可以用v-show（防止重复创建）、v-once(只变化一次就不改变)、长列表采用虚拟滚动、组件销毁时清空事件监听、图片懒加载、第三方组件按需引用、无状态的静态组件尽量不拆分，需要更新的大组件尽量拆分

21. Vue2为什么只能一个根元素

vdom是单根的树形结构，patch算法会从根元素开始遍历, 然后渲染组件。Vue3中增加了Fragment这个抽象节点，如果是多根元素，就会创建一个Fragment节点作为根节点包裹。

22. router-link和router-view

vue-routers会监听popstate事件。点击后页面不会刷新，用当前path和routers中的path匹配找到对应路由组件然后在router-view（组件内容渲染）渲染。
router-link（路由导航）默认生成a标签，点击后取消默认跳转，执行pushState重新匹配路由。

23. vue的data为什么是函数

为了保证组件的独立性和可复用性。

组件可能在多次使用时多次实例化，如果写成对象形式，所有组件会复用一个data（引用类型）。函数可以保证每个组件实例化都有独立的作用域。

new Vue生成的是根元素实例，所以不会重复使用，可以用对象data。

24. vue-loader用法

用来解析和转换vue文件，把script template style标签中的内容提取出来交给对应的loader处理。（调用预处理，允许热重载）

25. 如何解析template, 如何解析指令？

解析模板字符串，先通过正则等方式将其转换为AST语法树，然后经过一步优化，将其中的静态节点打上标签，最后将AST转换为render函数。模板 ——> 解析器（parser） ——> 代码生成器 ——> 渲染函数

26. vue本地代理怎么解决跨域

实际上就是把实际请求转到了本地开启的server里面去请求，就不存在什么浏览器同源安全问题了。

Vue模板解析原理

26. 导航守卫

全局：

• beforeEach((to, from, next)=>{})（全局前置守卫，跳转前触发）
• beforeResolve （路由解析之前 这个几乎不用）
• afterEach((to, from)=>{})（全局后置守卫）
• beforeEnter(写在路由里面的，进入这个路由时才会调用)

组件内：

• beforeRouteEnter（不能访问 this，此时组件实例还未创建）
• beforeRouteUpdate
• beforeRouteLeave

27. mixins

生命周期顺序：mixin的beforeCreate > 父beforeCreate > mixin的created > 父created > mixin的beforeMount > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > mixin的mounted >父mounted

• 对于data定义属性，组件中定义属性覆盖mixins中同名字段
• 对于created、mounted等生命周期函数，mixins中生命周期函数优先执行（执行顺序按mixins中顺序），再执行组件中生命周期函数
• 对于methods中的同名方法，组件内的方法覆盖mixins中的方法

Css

1. z-index 无效问题

• 父级元素溢出隐藏或者不显示：父元素设置了 overflow:hidden /display:none/ 等，那么子元素如果在父元素外部绝对定位，那么调节子元素 z-index 可能不会显示
• 父级元素层级低，z-index 被覆盖
• 没有设置定位(position)属性
• 父级元素 position 属性为 relative
• 含有浮动(float)属性
• IE 不兼容

2. 水平垂直居中实现 :star:

• 相对定位和绝对定位：absolute + margin | absolute + transform | absolute + top + left
• flex布局（移动端推荐）：flex + justify-content + align-items | flex + margin auto
• table布局：table-cell + vertical-align:middle
• grid布局：grid + justify-self + align-self；| place-items:center

3. link 和 import区别

link属于HTML标签，而@import完全是CSS提供的一种方式。
link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。

4. scss的混合和函数

混合：@mixin 和@include ，可以传参

函数：@function pxToRem($num) {}， 函数可以计算

5. rem和em基于什么取值

em 单位基于使用他们的元素的字体大小，可能受父元素字体大小影响。
rem 单位基于 html 元素的字体大小。（1rem等于html根元素设定的font-size的px值）

6. 三栏布局

• flex布局
• grid布局
• float + width

7. line-height 1.5

设置数字时，继承的是数字的值。line-height的值会是本身字体大小乘以数字。
设置em时，继承的时父元素的字体大小乘以em之后的值，所以可能会带来不确定的结果。

8. display:none和visibility:hidden的区别

none: 让这个元素也是直接消失，会影响到布局问题。
hidden: 可以让元素消失，属于css样式，它只是让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在（比如块元素样式）。

9. 优先级

内联 > id > class > 标签

浏览器与网络安全

从输入 url 到浏览器渲染经过了哪些流程 :star:

URL 解析 -> DNS 查询 -> TCP 连接 -> HTTP 请求 -> 服务器响应请求 -> 页面渲染

• 首先浏览器在输入URL之后，会先解析URL，判断是否合法；
• 合法的话会查看浏览器缓存，判断是否有缓存，如果有缓存，则显示；
• 如果没有缓存，浏览器会向服务器发送HTTP协议，会进行DNS解析，获取IP地址；（通过ip寻址和arp，找到目标（服务器）地址）
• 浏览器和服务器进行TCP连接，进行三次握手，建立tcp连接；
• 握手成功之后，浏览器会向服务器发送http请求，请求数据包；
• 服务器处理请求，并对请求做出响应；
• 浏览器收到服务器响应，得到html代码；
• 渲染页面：获取到服务器相应之后，浏览器会根据相应的content-type字段对响应字符串进行解析。能够解析并成功解析就显示，能够解析但解析错误就报错，不能解析就下载。

从服务器返回数据会经过哪些阶段

浏览器首先去找本地hosts文件，检查在该文件中是否有相应的域名、IP对应关系，如果有，则向其IP地址发送请求，如果没有就发送给DNS（域名服务器）进行解析，解析成对应的服务器IP地址 ——> 网络通信 ——> 浏览器拿到数据 ——> 四次挥手断开连接

css是否会阻塞加载html

css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染， 会阻塞link后面js语句的执行。（当cssdom还没构建完成时，页面是不会渲染到浏览器界面的）。

为了防止html页面的重复渲染而降低性能，所以浏览器只会在加载的时候去解析dom树，然后等在css加载完成之后才进行dom的渲染以及执行后面的js语句。

http 和 网络攻击 :star:

HTTP和HTTPS协议

get和post请求方式的区别

1. get重点在从服务器上获取资源；post重点在向服务器发送数据；
2. get传输数据是通过URL请求，参数加在url上；post的参数放在请求实体中，这个过程对用户是不可见的；
3. 受URL长度限制，get传输的数据是有限的；post可以传输大量数据，所以上传文件时只能用post方式；
4. post安全性高（因为get参数放在url上可见）；
5. get方式只能支持ASCII字符，向服务器传的中文字符可能会乱码；post支持标准字符集，可以正确传递中文字符。

post一般没有大小限制，但是实际上post所能传递的数据量大小取决于服务器的设置和内存大小。

ajax发起请求的流程

创建请求对象new XMLHttpRequest()  ——> 创建HTTP请求 ——> 设置响应HTTP请求状态变化的函数 ——> 发送HTTP请求 ——> 监听 onreadystatechange 事件，获取请求状态码和响应码状态

前端性能优化 :star::star::star:

1. 首页白屏解决

缓存；骨架屏(用css占位置，当资源加载完成即可填充，减少页面的回流与重绘)；减少包大小；解决阻塞；SSR；预渲染

2. 大数据量的问题处理

分页；分片；虚拟滚动；关键字远程搜索；异步加载

3. 跨域问题解决 :star:

跨域：浏览器同源策略的限制（协议，域名和端口），不允许非同源的 URL 之间进行资源的交互。

• JSONP：通过script标签（没有同源策略限制）向服务器端发送一个get请求（src=url）（ajax是通过XmlHttpRequest动态获取数据，jsonp是通过添加script标签动态获取数据）

  优缺点：兼容性好，缺点是只支持 GET 请求，不支持 POST 请求。

• iframe；

• postMessage（允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本）；

• CORS：跨域资源共享, 设定http的 Access-Control-Allow-Origin 允许的值（分为简单请求和非简单请求）

• Proxy；

• WebSocket

4. 项目优化

• 减少HTTP请求数量：减少图片使用，使用icon代替、合并静态资源，比如雪碧图、善用缓存；缓存接口请求；
• 压缩图片：背景图使用webp格式
• 源码优化：代码模块化、路由懒加载、使用keep-alive对组件缓存、图片懒加载（默认data-src渲染时src）、长列表优化（无限滚动、虚拟滚动）
• 项目打包优化：开启Gzip压缩（借助 Compression-webpack-plugin来生成 .gz文件，nginx也需要同时配置）、修改配置文件去掉打包的sourcemap、组件的按需引入
• 使用cdn的方式外部加载一些资源
• 减少页面回流和重绘：预加载（preload）、预渲染（prerender）、或者增加骨架屏和loading
• 使用浏览器控制台的performance查看渲染时间，使用lighthouse查看可优化项

cdn原理：内容分发网络，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

实践

1. 主题色

css颜色变量、scss变量 + @mixin

使用scss处理多主题切换功能

2. 权限管理（菜单权限，角色权限，路由权限，页面内部权限） :star:

路由守卫、动态路由加载、自定义指令按钮

3. token 失效刷新如何实现的

现token无感刷新对于前端来说是一项常用的技术,其本质是为了优化用户体验,当token过期时不需要用户跳回登录页重新登录,而是当token失效时,进行拦截,发送刷新token的ajax,获取最新的token进行覆盖,让用户感受不到token已经过期。

4. webpack :star:

个性化配置：拆包；less，sass 处理；打包加速优化 ；图片资源压缩(image-webpack-loader)

性能优化：

• 并行压缩，开启多进程打包（happyPack、pipeline）；
• dllplugin提升构建速度(可以将特定的类库提前打包然后引入。生成xx.dll.js文件,通过manifest.json引用)；
• splitchunk 拆包；
• 混淆压缩；
• cache，缓存中间产物，对性能优化作用最大，改善构建速度

深入探究Webpack原理

5. 脚手架，一般会改哪些配置

压缩的处理：插件的压缩处理，gzip 压缩，代码压缩

6. 浏览器兼容性问题 :star:

1. 添加reset.scss（初始化全局样式，如*{margin:0px; padding:0px}），解决不同浏览器标签默认的内外间距不同
2. 图片默认有间距，使用float:left
3. 安装babel兼容ES6
4. js事件获取target兼容ie, 获取getSelection兼容ie（IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。

   1 2 3

   var ev = ev || window.event var w = document.documentElement.clientWidth || document.body.clientWidth var target = ev.srcElement || ev.target

解决方法：使用srcObj = event.srcElement ?event.srcElement : event.target;）
5. css不支持，css hack

浏览器兼容性问题

7. 图片上传预览

图片存在本地，通过 base64 转化

8. 单点登录实现

单点登录（SSO），指在同一帐号平台下的多个应用系统中，用户只需登录一次，即可访问所有相互信任的系统。多个系统，统一登陆。

实现原理：sso需要一个独立的认证中心，所有子系统都通过认证中心的登录入口进行登录，登录时带上自己的地址，子系统只接受认证中心的授权，授权通过令牌（token）实现，sso认证中心验证用户的用户名密码正确，创建全局会话和token，token作为参数发送给各个子系统，子系统拿到token，即得到了授权，可以借此创建局部会话，局部会话登录方式与单系统的登录方式相同。

单点登录的实现方案，一般就包含：Cookies，Session同步，分布式Session，目前的大型网站都是采用分布式Session的方式。

9. 第三方登录对接

前端对接第三方登录

10. 微信公众号，小程序的开发的区别，登陆的过程

公众号授权登录：先在公众号管理页设置网页授权，然后通过authorize（调用https://open.weixin.qq.com/connect/oauth2/authorize）获取的code

小程序登录：小程序端检测登录信息(wx.checkSession)，然后调用wx.login，获取登录凭证（code），并调用接口，将code发送到第三方客户端，第三方服务器端调用接口，用code换取session_key和openid

绑定同一个微信开发平台账号下, 则同一用户，对同一个微信开放平台下的不同应用，unionid是相同的

11. PC端扫码实现

扫码登录是如何实现的

12. axios返回值

axios返回的是一个promise对象。

ajax是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据。

13. 常见命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// vue-cli创建项目
vue create projectName

// vite创建vue-ts项目
yarn create vite projectName --template vue-ts

// vite创建项目
yarn create vite projectName --template vue

/* vite集成electron */
// 安装依赖和打包
npm install electron electron-builder -D
// 安装调试
npm install electron-devtools-installer -D
npm install vite-plugin-electron -D

14. 大文件上传分块和断点续传

前端负责分块，服务端负责整合。首先是选择上传的文件资源，通过FileList对象获取到相应的文件，而 File.prototype.slice 方法可以实现资源的分块。

前端可以基于 Promise.all 将这多个接口整合，上传完成在发送一个合并的请求，通知服务端进行合并。

断点续传：下载文件时，不必重头开始下载，而是从指定的位置继续下载。可以利用请求头：Range:bytes=5001-10000或者size传参。

15. chrome调试

• Performance 查看性能: 火焰图中每个方块的宽度代表执行耗时
• Memory 查看内存：
  • Snapshot：某个时间点的 堆内存快照
  • TimeLine：实时的按照 时间线 显示的内存分配情况
  • Sampling：采样 的方式收集内存分配情况

16. axios特性

Axios实现是：基于nodejs的http或者https模块来发起请求的。

• 从浏览器创建XMLHttpRequests，从node.js创建http请求
• 支持promise API
• 拦截请求和相应，转换请求和相应数据，取消请求，自动转换JSON数据
• 客户端支持防御XSRF

取消请求：AbortController， cancelToken
axios要点

17. 组件库的按需加载

• elementUI : 使用babel插件是目前大多数组件库实现按需引入的方式，安装babel-plugin-component(可以实现样式的按需加载)

• Vant: 使用tree-shaking: 输入格式commonjs规范是最常见的使用方式，umd一般用于cdn方式直接在页面引入，而esmodule就是用来实现Tree Shaking。（esmodule是静态编译的，也就是在编译阶段就能确定某个模块导出了什么，引入了什么，代码执行阶段不会改变，所以打包工具在打包的时候就能分析出哪个方法被使用了）（rollup也是）

  修改package.json，main是commonjs模块入口，module是esmodule模块，Vue CLI使用的是webpack，对应的我们需要在package.json文件里新增一个sideEffects字段（去掉副作用函数）。

18. echarts和antv区别

echarts是以图表为主, 而antv则是以图形出发。echarts相对于antv来说是比较成熟的一套图表库, 使用方便、图表种类多， 也是比较容易上手的, 遇到问题网上的解决方式也有很多，而antv是以数据可视化底层引擎，以数据驱动， 相对于echart更具有拓展性和灵活性。

渲染器

作用：虚拟DOM转成真实DOM。

工作原理：递归地遍历虚拟DOM，调用原生js创建真实的DOM。

虚拟DOM

虚拟DOM就是一个用来描述真实DOM的JS对象。

1
2
3
4
5
6
7

const vnode = {
  tag: 'div',
  props: {
    onClick: () => console.log('This is a div')
  },
  children: 'click me'
}

组件

虚拟DOM元素的封装，可以是返回虚拟DOM的函数，也可以是一个对象（这个对象必须有一个函数用来产出组件要渲染的虚拟DOM）

1
2
3
4
5
6
7
8
9

const myComponent = function() {
  return {
    tag: 'div',
    props: {
      onClick: () => console.log('This is a div')
    },
    children: 'click me'
  }
}

实现一个渲染器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

// 假设一个虚拟dom
const vnode = {
  tag: myComponent
}
// 渲染函数
function renderer(vnode, container) {
  // 判断vnode描述的是dom标签还是组件
  if(typeof vnode.tag === 'string') {
    mountElement(vnode, container)
  } else if(typeof vnode.tag === 'function') {
    mountComponent(vnode, container)
  }
}

// 渲染标签元素
function mountElement(vnode, container) {
  // 创建元素
  const el = document.createElement(vnode.tag)
  // 绑定事件或设置属性
  for(const key in vnode.props) {
    // 事件
    if(key.startsWith('on')) {
      const eName = key.substr(2).toLowerCase()
      el.addEventListener(eName, vnode.props[key])
    }
  }
  // children
  if(typeof vnode.children === 'string') {
    // 文本节点
    el.appendChild(document.createTextNode(vnode.children))
  } else if(vnode.children instanceof Array) {
    // 递归添加子元素
    vnode.children.forEach(child => renderer(child, el))
  }

  if(container) container.appendChild(el)
}

// 渲染组件
function mountComponent(vnode, container) {
  // 调用组件函数获取虚拟dom
  const subtree = vnode.tag()
  // 递归的调用渲染函数
  renderer(subtree, container)
}

响应式数据

实现原理：对数据的“读取”和“设置”操作的拦截，在副作用函数和响应式数据间建立联系。当“读取”时，把当前执行的副作用函数放入“桶”；当“设置”时，把副作用函数取出并执行。

Proxy

可以创建一个代理对象，能够实现对其他对象的代理。

1
2
3
4
5
6

const n = new Proxy(obj, {
  // 拦截读取属性
  get() {},
  // 拦截设置属性
  set() {},
})

实现简单的响应式数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

// 数据
const data = {
  text: 'hello world'
}
// 全局变量存被注册的副作用函数
let activeEffect

// 注册副作用函数
function effect(fn) {
  //设置当前激活的副作用函数
  const effectFn = () => {
    activeEffect = fn
    fn()
  }
  // 存所有与该副作用函数相关联的依赖集合
  effectFn.deps = []
  // 执行副作用函数
  effectFn()
}
// 存副作用函数的桶
const bucket = new WeakMap() // new Set() => 副作用函数没有和目标对象字段绑定
/*
WeakMap由 target --> Map 构成
Map由 key --> Set 构成
*/

// 代理
const obj = new Proxy(data, {
  // 拦截读取属性
  get(target, key) {
    // 副作用函数添加到桶
    track(target, key)
    return target[key]
  },
  // 拦截设置属性
  set(target, key, newVal) {
    // 设置新值
    target[key] = newVal
    // 取出副作用函数并执行
    trigger(target, key)
    return true
  },
})

// get调用
function track(target, key) {
  // 没有activeEffect
  if(!activeEffect) return target[key]
  // 从桶中获取depsMap
  let depsMap = bucket.get(target) // Map类型
  // 没有depsMap，新建一个与target绑定
  if(!depsMap) {
    depsMap = new Map()
    bucket.set(target, depsMap)
  }
  // 获取与key相关的所有副作用函数
  let deps = depsMap.get(key) // Set类型
  if(!deps) {
    deps = new Set()
    depsMap.set(key, deps)
  }
  // 存副作用函数
  // bucket.add(activeEffect)
  // 添加当前激活的副作用函数
  deps.add(activeEffect)
}

// set调用
function trigger(target, key) {
  // 取出副作用函数并执行
  // bucket.forEach(fn => fn())
  const depsMap = bucket.get(target)
  if(!depsMap) return
  // 获取与key相关的所有副作用函数
  const effects = depsMap.get(key)
  effects && effects.forEach(fn => fn())
}
// 需要执行的副作用函数
effect(function effectFn() {
  document.body.innerText = obj.text
})

computed

计算属性实际上是一个懒执行的副作用函数

watch

实现原理：利用副作用函数重新执行时的可调度性

编译器

作用：将模板字符串编译成渲染函数。

render 函数是模板编译后的产物，它负责构建 VNode 树，构建好的 VNode 会传递给 patch，patch 根据 VNode 的关系生成真实dom节点树。

编译器过程：

• 用来将模板字符串解析为模板AST的解析器（parser）
• 用来将模板AST转换为JavaScript AST的转换器（transformer）
• 根据JavaScript AST生成render函数代码的生成器（generator）

实现一个编译器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const template = `<p>{{ message }}</p>`

function compiler(template) {// render
  // 解析模版，生成 ast
  const ast = parse(template)
  // 将 ast 生成渲染函数
  const render = generate(ast)
  return render
}

function parse() {

}

function generate() {
  
}

webpack 是一个模块打包工具(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack的作用

• 通过webpack可以将零散的js文件打包到一个文件中；
• 通过webpack Loader实现对代码的编译转换，兼容低版本浏览器
• 支持不同种类（js/css/img）的模块资源的打包
• 具备代码拆分能力：所有模块按需分块打包，一般会把应用初次加载必须的模块打包到一起，其他模块单独打包，等到应用工作过程中再异步加载这个模块（渐进式加载就不用担心打包单文件过大而加载慢的问题）

核心概念

webpack的核心有以下几点：

1. Entry：入口
2. Output：出口
3. Loader：加载器
4. Plugin：插件
5. Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。
6. Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。

具体可查阅：webpack安装使用

Loader和Plugin的区别

Loader 本质就是一个函数，主要用于对特殊类型资源的加载，转换输出成webpack识别的格式（接受文件作为参数,返回转化后的结构）。webpack自身只支持js和json这两种格式的文件，对于其他文件需要通过loader将其转换为commonJS规范的文件后，webpack才能解析到。

Plugin 就是插件，包含apply方法。apply方法会被 webpack的 compiler（编译器）对象调用，并且 compiler 对象可在整个 compilation（编译）生命周期内访问。

Plugin可以理解为扩展webpack，实现各种自动化构建任务。在webpack打包编译过程里，针对loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于webpack的事件机制（webpack在每一个工作环境都预留了合适的钩子），会监听webpack打包过程中的某些节点，挂载并执行任务。

开发一个Plugin

在插件项目中定义一个插件名类，在该类中通过compiler的hooks属性访问到xx钩子，再通过tap方法注册一个钩子函数（挂载要执行的函数在钩子上），返回处理后的新内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

///src/plugins/helloPlugin.js
// 命名函数。
function HelloPlugin(options) {
  // 使用 options 设置插件实例……
  console.log(options);
}
//插件函数的 prototype 上定义一个 apply 方法
HelloPlugin.prototype.apply = compiler => {
  //hooks
  compiler.hooks.done.tap('HelloPlugin', status => {
    console.log(status.toJson());
  })
  // 设置回调来访问 compilation 中的步骤：
  compilation.plugin('optimize', () => {
      console.log('optimize');
  })
}

module.exports = HelloPlugin

实现loader

loader 的处理策略:

• CSS：转换成 js 的模块，执行模块会在 DOM 中创建 style 标签并且插入CSS内容
• Img：转换成图片路径
• JSON：转化成 js 模块, default export = json

loader的执行顺序是从右到左，从下到上。而loader的加载顺序是从左到右，从上到下。

babel-loader的主要原理:
调动@babel/core这个包下面的transform方法，将源码通过presets预设来进行转换，然后生成新的代码、map和ast语法树传给下一个loader。这里的presets，比如@babel/preset-env这个预设其实就是各类插件的集合，基本上一个插件转换一个语法，比如箭头函数转换，有箭头函数转换的插件，这些插件集合就组成了预设。

1
2
3
4
5
6

// myloader替换尖括号
module.exports = function(source){
  var content = "";
  content = source.replace("/[<>]/g","尖括号");
  return content; 
}

webpack钩子

• beforeRun: 在编译器执行前
• run: 在编译器开始读取记录前执行
• compilation: 创建compilation后
• beforeCompile: 在编译前
• compile: 创建compilation前
• make: 编译完成前
• done: 编译完成后
• emit: 文件提交到dist目录前
• afterEmit: 文件提交到dist目录后

source map配置

在webpack配置文件中，指定devtool: “source-map”等字段可以输出对应的.map文件，方便在浏览器中调试，sourceMap对应的模式有很多，建议：

• 开发环境：cheap-module-eval-source-map，报错可以定位到源码的行信息，且构建速度比较快
• 生产环境: nosources-source-map，可以定位到报错的位置，且不会暴露源代码

webpack的特性

• HMR(热更新)

• Tree-shaking(摇树)：生产环境自动启动，打包时去掉没有用到的代码成员

  可以通过配置webpack的 optimization 对象控制：

  • usedExports 打包结果中只导出外部用到的成员；
  • minimize 压缩打包结果，去掉无效代码

• sideEffects：开启可以打包时无视无效模块中的副作用代码（需要在package.json中同时配置）

• code splitting：通过把项目资源模块按照我们的规则打包到不同的bundle中，降低应用成本，提高响应速度

  webpack实现分包方式：

  • 根据业务不同配置多个打包入口，输出多个打包结果（适用于传统多页应用）
  • 结合ES Module的动态导入特性，按需加载模块（import(module path).then()）

webpack的扩展方式

loader、plugin、minimizer

构建流程/打包流程

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

• 初始化：
  • 初始化参数：启动打包流程，读取并合并配置参数
  • 创建编译器对象：载入webpack核心模块，传入配置项，创建Compiler对象
  • 开始编译：使用Compiler对象开始编译项目
• 编译：
  • 确定入口：从入口文件（entry）开始解析，并且找到其导入的依赖模块，递归遍历分析，形成依赖关系树；
  • 编译模块：将每个模块交给Loader；对不同文件类型的依赖模块文件使用对应的Loader进行编译，最终转为JS模块文件（对于无法被转成js的资源文件，Loader一般会将它们单独作为资源文件拷贝到输出目标中，将资源文件的路径作为导出成员）
• 输出：将编译后的模块组合成 Chunk，将 Chunk 转换成文件，输出到文件目录中

PS:
编译的过程中，webpack会通过发布订阅模式，向外抛出一些hooks，而webpack的插件即可通过监听这些关键的事件节点，执行插件任务进而达到干预输出结果的目的。所以Plugin应该在webpack生命周期开始之前注册，才能监控到事件节点。

打包原理

webpack通过模拟module，exports，require变量，将我们的模块代码打包成一个IIFE(立即执行函数)，,函数参数是我们写的各个模块被包装之后组成的数组,浏览器执行这个立即执行函数就可以运行我们的模块代码。

1. 根据入口文件，先逐级递归识别依赖，构建依赖图谱
2. 将代码转化成AST抽象语法树
3. 在AST阶段中处理代码
4. 把AST抽象语法树变成浏览器可以识别的代码， 然后输出

打包优化

常见的优化就是拆包、分块、压缩等，主要是两个优化点：

1. 减少打包时间
2. 减少打包大小

减少打包时间

1. 优化解析时间：开启多进程打包

• thread-loader（webpack4 官方推荐）：把这个 loader 放置在其他 loader 之前， 之后的 loader 就会在一个单独的 worker 池里运行，一个worker 就是一个nodeJS 进程。
• HappyPack(将不再维护)：将loader的同步执行转为并行，减少loader的编译等待时间

2. 合理利用缓存

• 缓存已编译过的文件（如设置babel-loader的cacheDirectory）
• cache-loader：对性能开销较大的 loader 使用。可以将使用了该loader的结果缓存到磁盘里，显著提升二次构建速度

3. 优化压缩时间：webpack4内置默认使用terser-webpack-plugin 插件压缩优化代码。
4. 优化搜索时间：缩小文件搜索范围 减小不必要的编译工作

• 优化 loader 文件搜索范围：使用 Loader 时可以通过 test 、 include 、 exclude 三个配置项来命中 Loader 要应用规则的文件
• 优化resolve下的配置

减少打包大小

• 启用gzip压缩
• 按需加载：首页加载文件越小越好，将每个页面单独打包为一个文件
• 在webpack4中production下打包默认开启UglifyJS压缩代码
• 开启Tree-shaking等去掉无效代码

热更新（HMR）

热更新（Hot Module Replacement）是指能够不用刷新浏览器而将新变更的模块替换掉旧的模块（不用刷新整个页面）。热更新实现主要分为几部分功能:

• 服务器构建、推送更新消息
• 浏览器模块更新
• 模块更新后页面渲染

原理：

• 通过webpack-dev-server创建两个服务器：提供静态资源的服务（express）和Socket服务
• 使用 webpack-dev-server 托管静态资源，同时以 Runtime 方式注入 HMR 客户端代码；
• 浏览器加载页面后，与 WDS 建立 WebSocket 连接
• Webpack 监听到文件变化后，增量构建发生变更的模块，并通过 WebSocket 发送 hash 事件
• 浏览器接收到 hash 事件后，请求 manifest 资源文件，确认增量变更范围
• 浏览器加载发生变更的增量模块
• Webpack 运行时触发变更模块的 module.hot.accept 回调，执行代码变更逻辑

简单理解：dev server 启动以后，会 watch 源文件的变化。当源文件发生变化后，Webpack 会重新编译打包, 再通过 ws 连接通知浏览器去获取新的打包文件，然后对页面做局部更新。

webpack和rollup的选择

Rollup 是一个 JavaScript 模块打包器（ES Module打包器），和webpack类似，但小巧的多，它可以将小块代码编译成整块代码，从而使得这些模块更好的运行在浏览器或nodeJS环境。Rollup中只能通过插件扩展。

Rollup优点：

• 输出结果更加扁平，执行效率更高
• 良好的tree-shaking, 自动移除未引用代码
• 打包结果可读

Rollup缺点：

• 如要加载非ES Module第三方模块会比较复杂
• 模块最终会打包到全局，不能HMR
• 浏览器环境中，代码拆分模块需要用require.js这样的AMD库

webpack 拆分代码， 按需加载；Rollup 所有资源放在同一个地方，一次性加载，利用 tree-shake 特性来剔除项目中未使用的代码，减少冗余。

Rollup偏向应用于js库、框架；webpack偏向应用于应用开发。如果应用场景中只是js代码，希望做ES转换，模块解析，可以使用Rollup。如果应用场景中涉及到css、html，涉及到复杂的代码拆分合并，建议使用webpack。

组件库选择rollup: webpack 无法构建出 esm 格式的 js 文件。 即使借助一些插件实现了，产出代码也比不上 rollup 简洁、干净。

gulp和webpack

Glup和Webpack区别

webpack5和webpack4区别

• webpack5通过优化 Tree Shaking 和代码生成来减小Bundle体积(更好的处理嵌套 tree-shaking)

• 压缩代码：
  webpack4需要安装terser-webpack-plugin 插件

  webpack5: 内置了 terser-webpack-plugin 插件，在 mode=“production” 的时候会自动开启 js 压缩功能

  1 2 3 4 5 6 7

  // webpack.config.js中 module.exports = { optimization: { usedExports: true, //只导出被使用的模块 minimize : true // 启动压缩 } }

• 缓存设置：
  webpack5 内部内置了 cache 缓存机制, cache 会在开发模式下被设置成 type： memory 而且会在生产模式把cache 给禁用掉

  1 2 3 4 5 6 7 8

  // webpack.config.js module.exports= { // 使用持久化缓存 cache: { type: 'filesystem'， cacheDirectory: path.join(__dirname, 'node_modules/.cac/webpack') } }

• 启动服务：
  webpack4通过 webpack-dev-server 启动服务

  webpack5内置使用 webpack serve 启动

• 模块依赖关系构建

• 打包体积更小

http是一个超文本传输协议。是一个客户端和服务器端请求和应答的标准。是一个基于请求与响应，无状态的，应用层协议，通常基于TCP/IP协议传输数据。

特点：

• 无状态：协议自身不对请求和响应之间的通信状态进行保存，任何两次请求之间都没有依赖关系。
• 无连接：服务器处理完客户端的请求，并收到客户端的应答后，立即断开连接。
• 基于请求与响应：由客户端发起请求，服务端响应
• 优点：简单快速灵活

HTTP的发展历程

• 长连接：HTTP 1.1的长连接(Connection: keep-alive)是复用一个TCP连接，在一个TCP中可以发送多次请求，当客户端与服务端的某一方或者同时关闭连接的时候，或者网络原因，这个连接才会断掉。缺点是HTTP 1.1 基于串行文件传输数据，因此这些请求必须是有序的。

• 多路复用：客户端和服务端可以并行发起或者回复，避免串行带来的阻塞。HTTP2.0对同一域名下所有请求都是基于流，也就是说同一域名不管访问多少文件，也只建立一次连接。提高了最大并发数。

• 二进制分帧：HTTP/2 把 HTTP 协议通信的基本单位缩小为一个一个的帧，这些帧对应着逻辑流中的消息。并行地在同一个 TCP 连接上双向交换消息。二进制分帧层在 应用层(HTTP/2)和传输层(TCP or UDP)之间。

  HTTP2.0 引入二进制数据帧和流的概念，其中帧对数据进行顺序标识，这样浏览器收到数据之后，就可以按照序列对数据进行合并，而不会出现合并后数据错乱的情况。同样是因为有了序列，服务器就可以并行的传输数据。

• 缓存处理：HTTP1.0中主要使用header里的If-Modified-Since,Expires来做为缓存判断的标准，HTTP1.1则引入了更多的缓存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match等更多可供选择的缓存头来控制缓存策略。

HTTP1.1的缺点

• 无状态特性，带来巨大的HTTP头部（解决方案：头部压缩）
• 明文传输，不安全
• 不支持服务器推送消息
• 请求延迟比较高：浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制，而超过限制数目的请求会被阻塞（解决方案：多路复用）

HTTP2.0的缺点

• TCP建立连接的延迟（握手延迟）
• TCP的队头阻塞没有彻底解决

HTTP1.1和HTTP2的主要区别

• HTTP2采用二进制分帧(基于SPDY)
• HTTP2是完全多路复用的，而非有序并阻塞的——只需一个连接即可实现并行
• 使用报头压缩，HTTP2降低了开销
• HTTP2让服务器可以将响应主动“推送”到客户端缓存中

HTTP3

HTTP3.0的底层支撑协议QUIC基于UDP实现，又含TCP的特点，实现了又快又可靠的协议。

HTTP报文

HTTP交互的信息称为HTTP报文，HTTP报文是由多行数据构成的字符串文本。

HTTP请求报文主要包括请求行（由请求方法、URL和HTTP协议版本组成）、请求头部、请求的实体（传参）三部分，HTTP响应报文同样也分为三部分，有状态行（协议版本、状态码与原因短语）、响应头部、实体。

HTTP缺点

• 通信使用明文传输不安全
• 不验证通信方身份可能遭遇伪装
• 无法证明报文完整性，可能遭篡改

HTTPS介绍

可以理解为 HTTPS = HTTP + 加密 + 认证 + 数据完整性保护。基于HTTP协议，通过SSL或TSL提供加密数据处理、认证身份以及数据完整性保护。

特点：

• 内容加密：采用混合加密（结合非对称加密和对称加密技术），中间者无法直接查看明文内容
• 验证身份：通过证书认证客户端访问的是自己的服务器
• 保护数据完整性：防止传输的内容被中间人篡改

SSL建立连接过程

1. 客户端向服务器发送请求（发送随机值1和客户端加密算法）
2. 服务器接收到后给客户端发送响应握手（发送随机值2和协商好的加密算法）
3. 服务器给客户端发送第二个响应报文（数字证书：一对公钥和私钥）
4. 客户端解析证书。（TLS验证公钥是否有效，如果没有问题就生成随机值：预主秘钥）
5. 认证通过后，组装所有随机值成会话秘钥，通过证书的公钥加密会话秘钥
6. 传输加密信息
7. 服务端解密，组装会话秘钥，和客户端一致
8. 客户端通过会话秘钥加密信息给服务器，验证服务器是否能正常接受消息
9. 服务器通过会话秘钥加密消息并回传给客户端，如果客户端正常接受就表面连接建立

缺点

• 依然对黑客攻击、服务器劫持等方面没有什么安全作用
• https页面加载时间比http长，影响用户体验
• 连接缓存不如http高效，流量成本高
• 服务器端资源占用更多，需要更高的成本

TCP/IP协议族

TCP/IP协议族分层划分。

• 应用层：向用户提供应用服务时的通信活动，如FTP（文件传输协议）、DNS（域名系统，提供域名到IP地址的解析服务）、HTTP
• 传输层：TCP（传输控制协议，提供可靠的字节流服务）以及UDP（用户数据报协议）
• 网络层：处理网络上流动的数据包，如IP协议
• 数据链路层：处理网络连接的硬件部分

HTTP的通信传输

1. 建立TCP连接（三次握手建立连接）
2. 客户端向服务器发送请求，客户端发送请求头
3. 服务器应答，服务器发送应答头，服务器发送数据
4. 服务器关闭连接（如果Connection: keep-alive，发送完数据连接也不会断开）

TCP三次握手过程：

1. 客户端发送带SYN标志的数据包给服务器
2. 服务器收到后，回传一个SYN/ACK标志的数据包确认信息
3. 客户端最后回传一个ACK标志数据包，代表握手结束

三次握手优点：确认可靠传输；防止已失效或者滞留过期的信息发送到服务端，导致资源浪费。

TCP四次挥手：

1. 客户端发送一个释放连接TCP数据报文段
2. 服务器进入关闭等待状态，并向客户端发送一条普通的TCP确认报文段
3. 服务器没有数据后会向客户端发送一条TCP释放连接报文段
4. 客户端回向服务器发送一个TCP确认报文段

TCP与UDP的区别

• TCP是面向连接的，UDP是无连接的
• TCP提供可靠的服务，UDP是不保证可靠性交付(可能丢包)
• TCP是面向字节流，UDP是面向报文
• TCP只能是1对1的，而UDP可以1对1，也可以1对多

有些应用场景对可靠性要求不高会用到UPD，比如直播，要求速率。

常见状态码

• 1xx：指示信息
• 2xx：成功
• 3xx：重定向
  • 301：永久性重定向（如果没有额外指定，这个响应默认会被浏览器缓存）
  • 302：临时重定向（这个响应默认不会被浏览器缓存）
  • 304：对客户端有缓存情况下服务端的一种响应（发送附带条件的请求时，条件不满足时返回，与重定向无关）
• 4xx：客户端错误
  • 400：请求报文语法有误，服务器无法识别
  • 401：请求需要认证
  • 403：请求的对应资源禁止被访问
  • 404：服务器无法找到对应资源
• 5xx：服务器端错误

熟练掌握JavaScript

this指向 :star:

代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。

• 全局环境下的this：指向全局对象window

• 函数内的this：

  • 默认情况：非严格模式下this指向全局对象, 严格模式下this会指向undefined
  • 箭头函数：箭头函数本身没有 this， this的指向由外层作用域决定的
  • 构造函数：构造函数中的this是指向实例，不会被任何方式改变 this
  • 通过call()、apply()或者bind()直接指定this的绑定对象，bind()是创建一个新的函数，需要手动调用才会执行；多次bind，this指向第一次的bind

• 对象中的this：

  • 函数的定义位置不影响其this指向，this指向只和调用函数的对象有关(this 永远指向最后调用它的那个对象)
  • 多层嵌套的对象，内部方法的this指向离被调用函数最近的对象

this面试题

箭头函数 :star:

箭头函数内部的this是词法作用域（本身没有this），由上下文确定。在以下需要用this的场景尽量不使用：

• 定义对象的方法
• 定义原型方法
• 构造函数使用箭头函数
• 作为事件的回调函数

原型 :star:

原型：用于实现对象的继承，可以理解为对象的父对象。每个对象都有__proto__属性，指向了创建该对象的构造函数的原型。

原型链是由原型对象组成，__proto__将对象连接起来组成了原型链。是一个用来实现继承和共享属性的对象链。

实例的 constructor 属性指向构造函数，构造函数又通过 prototype 属性指向原型。

__proto__和constructor属性是对象所独有的。prototype属性是函数所独有的。但是由于JS中函数也是一种对象，所以函数也拥有__proto__和constructor属性。

prototype是从函数指向一个对象（以当前函数作为构造函数构造出来的对象的原型对象，包含了constructor），可以让所有实例都共享公用的属性和方法。

constructor是指向该对象的构造函数。可以理解为所有函数(对象)都由Function构造而来，所以constructor的终点就是Function。

属性查找机制： __proto__属性（即[[prototype]]）是一个对象指向它的原型对象的指针。当访问一个对象的属性，如果找不到对象的该属性，就会沿着__proto__指向的父对象找，如果还没找到就会继续沿着__proto__指向找，直到找到原型链的终点null，这种就是原型链。

对象本身 -> 构造函数（constructor） -> 对象的原型（__proto__） -> 构造函数的原型（prototype）

属性修改机制：只会修改实例对象本身的属性，不会直接修改到原型对象。

搞懂JS中的prototype、__proto__与constructor

new操作符

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

操作：

1. .开辟一个新的内存空间，创建一个空的JS对象；

2. 为创建的对象添加__proto__属性，该属性指向构造函数的原型对象prototype；

   1 2	newobj.__proto__ = father.protetype // newobj.__proto__.constuctor = father

3. 将构造函数的作用域赋给新对象（因此this就指向了这个对象）；

   1	father.call(newobj)

执行构造函数中的代码（为这个新对象添加属性）。
4. 返回的对象赋值给newobj；如果函数没有返回对象，则返回这个this（这也是为什么构造函数通常不写return语句）

继承

• 原型链继承（原型的共享性会导致实例的引用类型值相同）、
• 构造函数继承（不能继承原型属性/方法；无法实现函数复用，每个方法都要在实例上重新创建一遍，影响性能）、
• 原型链+借用构造函数的组合继承
• class 继承

ES5的继承时通过原型或构造函数机制来实现。ES6通过class定义类实现，里面有构造方法，类之间通过extends关键字实现继承。

ES5和ES6继承机制的区别：
ES5先创建子类，再将父类的方法添加到这个对象上面，即“实例在前，继承在后”；ES6先将父类的属性和方法，加到一个空的对象上面，然后再将该对象作为子类的实例，在子类中通过调用super方法访问父级后，通过修改this实现继承，即“继承在前，实例在后”。

JavaScript常见的六种继承方式

class继承

修饰符：

• pubilc
• peivate(只能在当前定义的类里面进行访问 在其它子类中进行访问会提示错误)
• protected(子类可以访问它的属性 不属于它的子类 访问会报错)
• readonly
• static(可以直接访问的属性 不需要实例化 可以直接在类上进行调用，静态属性通过浅拷贝实现继承)

extends 来实现继承(es6继承 = 寄生组合式继承 + 修改子类__proto__)：

1
2
3
4
5

// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype); // B.prototype.__proto__ === A.prototype // true

// B 继承 A 的静态属性
Object.setPrototypeOf(B, A); //B.__proto__ === A // true

extends关键字不仅可以用来继承类，还可以用来继承原生的构造函数。

为什么子类的构造函数，一定要调用super()，不然就报错？

ES6 要求，子类的构造函数必须执行一次super函数。（新建子类实例时，父类的构造函数必定会先运行一次）

这和class的继承机制有关，super会生成一个继承父类的this对象，通过这个继承父类。class中的super表示父类的构造函数，用来新建一个父类的实例对象。

super可以作为函数使用，也可以作为对象使用。super内部的this指的是子类的实例。

Promise和 async/await :star:

Promise是ES6中新加的一个函数，用来解决js中进行异步编程的方式。

Promise解决了异步嵌套的怪圈，异步请求方法用链式表达更加清晰，但是如果有大量的异步请求的时候，流程复杂的情况下，会发现充满了屏幕的then，看起来非常吃力，而ES7的Async/Await的出现就是为了解决这种复杂的情况。

错误捕捉方式：promise 使用.catch；async/await 可以.then.catch，也可以 try/catch

调用方式：promise 连续调用，链式调用；async/await 简洁易懂，异步操作同步化

异步Promise及Async/Await可能最完整入门攻略

Promise的特性

• Promise的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
• 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，再对Promise对象添加回调函数，也会立即得到这个结果。

Promise.all

• all() : 所有都成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
• race(): 哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。
• allSettled() : 当给定的promise数组中的所有promise被拒绝后会返回一个拒绝的promise数组，一一对应。

Promise中的then第二个参数和catch有什么区别？

如果在then的第一个函数里抛出了异常，后面的catch能捕获到，而then的第二个函数捕获不到。

then的第二个参数和catch捕获错误信息的时候会就近原则，如果是promise内部报错，reject抛出错误后，then的第二个参数和catch方法都存在的情况下，只有then的第二个参数能捕获到，如果then的第二个参数不存在，则catch方法会捕获到。

promise实现并发个数限制

限制并发请求数量

Event loop :star:

事件循环机制指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也是使用异步的原理。

javascript是一门单线程语言，执行事件是先同步再异步，异步中先微任务，再宏任务。event loop它最主要是分三部分：主线程、宏任务（macro-task）、微任务（micro-task）。

• macro-task(宏任务)：setTimeout，setInterval， script (宏任务是由浏览器规定的)
• micro-task(微任务)：Promise.then/catch，process.nextTick (微任务是js语法规定的)

执行流程：主线程从”任务队列”中读取执行事件，这个过程是循环不断的，这个机制被称为事件循环。主线程会不断从任务队列中按顺序取任务执行，每执行完一个任务都会检查微任务队列是否为空（执行完一个任务的具体标志是函数执行栈为空），如果不为空则会一次性执行完所有微任务。然后再进入下一个循环去任务队列中取下一个任务执行。

1. 所有同步任务都在主线程上执行，形成一个执行栈
2. 主线程之外，还存在一个”任务队列”。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件
3. 一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

js事件循环机制event-loop

为什么区分宏任务和微任务

区分微任务和宏任务的根本原因是为了插队。由于微任务执行快，一次性可以执行很多个，在当前宏任务执行后立刻清空微任务可以达到伪同步的效果，这对视图渲染效果起到至关重要的作用。

• 微任务是线程之间的切换，速度快。不用进行上下文切换，可以快速的一次性做完所有的微任务。
• 宏任务是进程之间的切换，速度慢，且每次执行需要切换上下文。因此一个Eventloop中只执行一个宏任务。

node和浏览器循环的区别

区别主要是node的 宏任务 分好几种，而这好几种又有不同的 任务队列，而不同的 任务队列 又有顺序区别，而 微任务是穿插在每一种宏任务之间的。

浏览器：当某个宏任务执行完后,会查看是否有微任务队列。如果有，先执行微任务队列中的所有任务，如果没有，会读取宏任务队列中排在最前的任务，执行宏任务的过程中，遇到微任务，依次加入微任务队列。栈空后，再次读取微任务队列里的任务，依次类推。

node中：libuv 引擎中的事件循环分为 6 个阶段，它们会按照顺序反复运行。每当进入某一个阶段的时候，都会从对应的回调队列中取出函数去执行。当队列为空或者执行的回调函数数量到达系统设定的阈值，就会进入下一阶段。

作用域和作用域链

JavaScript采用的是静态作用域（词法作用域），函数的作用域在函数定义的时候就决定了。

作用域就是代码的执行环境，全局执行环境就是全局作用域，函数的执行环境就是私有作用域，它们都是栈内存。（规定变量和函数的可使用范围称为作用域，JS的作用域靠函数形成）

作用域链（作用域形成的链条）是在函数定义的时候创建的(函数有一个内部属性 [[scope]], 创建时保存所有父变量对象到其中)。当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从上级执行上下文的变量对象中查找，一直找到全局上下文的变量对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

JS 作用域和作用域链

js执行环境

js代码的执行分为编译器的编译解析和js引擎与作用域执行两个阶段。

执行环境定义了变量或函数是否具有访问其他数据的权限,进而决定各自行为。

JS解释器不会编译代码，而是边解析边执行的，对于语法错误，如果没有被执行到就不会报错。语法检查之后，进入预解析阶段，在预解析阶段会在内存中创建执行上下文，也叫执行环境。

当函数执行/调用时，会进入一个特定的执行环境，分为全局执行环境、函数执行环境、eval()函数的动态执行环境。

每个执行环境由三部分构成：

• 变量对象(所有的变量(变量 函数 形参 arguments)组成的一个对象)
• 作用域链([[Scope]]作用域即变量对象，作用域链是一个由变量对象组成的单向链表，作用是用来进行变量查找。)
• this(指向一个环境对象)

执行环境生命周期：在预解析阶段被创建、代码执行阶段被重新赋值，代码执行完出栈、等待被回收。

执行上下文栈

JS实现为单线程，因此同一时刻仅有一个环境处于运行状态。因此，可以把JS的执行实现为栈，每次进入一个新的执行环境，都会把该环境置于栈顶执行，执行完毕后可弹出。因此形成了一个执行上下文栈。而变量的查找正是基于该栈的。

变量提升

函数在运行的时候，会首先创建执行上下文，然后将执行上下文入栈，然后当此执行上下文处于栈顶时，开始运行执行上下文。

在创建执行上下文的过程中：创建变量对象，创建作用域链，确定 this 指向。其中创建变量对象的过程中，首先会为 arguments 创建一个属性，值为 arguments，然后会扫 function 函数声明，创建一个同名属性，值为函数的引用，接着会扫 var 变量声明，创建一个同名属性，值为 undefined，这就是变量提升。

闭包

闭包就是能够读取其他函数内部变量的函数，参数和变量不会被垃圾回收机制收回。

闭包的原理：利用作用域链的特性，所以闭包访问的上级作用域中的变量对象，其值为其运算结束后的最后一个值。（当前环境中存在指向父级作用域的引用）

如何产生闭包：

• 函数中返回函数
• 函数当做参数传递

闭包的特点：

• 里面的变量和参数不会被垃圾回收机制回收（按照作用域链的特点，闭包使用的变量不会销毁，因为函数会一直被调用，所以只能一直存在）
• 闭包能访问外部变量，闭包的局部变量无法被外部访问（闭包的私有变量在自执行后直接销毁）

闭包的缺点：

• 可能造成多余的内存消耗
• 可能造成内存泄漏

闭包的作用：

• 封装私有变量，防止变量被全局污染
• 存储变量，实现累加

闭包的作用

判断Object类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 1
function isPlainObject() {
  return val !== null && !Array.isArray(val) && typeof val === 'object';
}

//2
function isPlainObject(val){
  return val.constructor == Object;
}

// 3
function isPlainObject(val){
  return Obejct.prototype.toString.call(val) == '[object Object]';
}

instanceof 和 typeof

typeof 对于原始类型来说，除了 null 都可以显示正确的类型。

typeof原理：不同的对象在底层都表示为二进制，在Javascript中二进制前（低）三位存储其类型信息

instanceof 判断一个对象是否是另一个对象的实例。通过原型链的方式来判断是否为构造函数的实例（用于判断某个实例是否属于某构造函数）。

instanceof 可以准确判断对象(引用)类型，但是不能准确检测原始类型。

PS：可以通过修改原型的指向修改 instanceof。

instanceof原理：查找构造函数的原型对象是否在实例对象的原型链上，如果在返回true，如果不在返回false。a.__proto__ === Fn.prototype

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

typeof undefined // 'undefined'
typeof null //object
typeof [] //object

typeof function() {} // 'function'
typeof class a{} // function
typeof /a/ // 'object'
typeof new Map() // 'object'

//instanceof
const Fn = function() {
  this.name = '构造函数'
}
Fn.prototype = Object.create(Array.prototype)
let a = new Fn()
console.log(a instanceof Array) // true

console.log instanceof Function //true
console.log instanceof Object //true
1 instanceof Number // false

手写实现：

1
2
3
4
5
6
7
8
9
10
11

function myInstanceof(left, right) {
  let proto = Object.getPrototypeOf(left); // 获取对象的原型
    prototype = right.prototype; // 获取构造函数的 prototype 对象
  // 判断构造函数的 prototype 对象是否在对象的原型链上
  while (true) {
    if (!proto) return false; //找到也没有找到 尽头Object.prototype.__proto__ = null
    if (proto === prototype) return true; //找到了

    proto = Object.getPrototypeOf(proto); // 接着往上找
  }
}

垃圾回收机制

在JavaScript中拥有自动的垃圾回收机制，通过一些回收算法，找出不再使用引用的变量或属性，由JS引擎按照固定时间间隔周期性的释放其所占的内存空间。

JavaScript 中主要的内存管理概念是可达性。大概意思是以某种方式可以访问到或者可以使用的值，它们就是需要保存在内存中，无法访问，也无法使用的值，则需要被垃圾回收机制回收。

• 引用计数（当该引用类型的值的引用次数为0，就说明没有变量被该引用类型的值赋值）
• 标记清除（销毁那些未带标记的值并回收他们所占用的内存空间）

call apply bind

call的性能优于apply。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Function.prototype.myCall = function(context, ...args){
    // 不传第一个参数默认为windows
    context = context || window
    //普通函数的this指向调用者, 故this就是要改造的那个函数
    //将函数挂载到目标对象上
    context.func = this
    //执行函数，并保存返回值
    let res = context.func(...args)
    //删除之前挂载在目标对象上的函数，还原目标对象
    delete context.func
    //return返回值
    return res
}

Function.prototype.myApply = function(context, args){
    context = context || window
    context.func = this
    let res = context.func(...args)
    delete context.func
    return res
}

Function.prototype.myBind = function(context, ...args){
    let _this = this
    return function Fn(){
      //因为返回值是一个函数，需要判断 new Fn() 的情况
      //new 会让 this 指向这个新的对象，所以直接判断 Fn 是否在 this 的原型链上
      if(this instanceof Fn){
        return new _this(...args, ...arguments)
      }
      //调用 call 改变 this 指向
      return _this.call(context, ...args, ...arguments)
    }
}

内存泄漏

无用的内存还在占用，得不到释放和归还，比较严重的时候，无用的内存还会增加，从而导致整个系统卡顿，甚至崩溃。

闭包，全局变量的不恰当使用，没清空的定时器，没清理的dom引用等

常用设计模式

设计模式是代码设计经验的总结，为了可重用代码，保证代码的可靠性等。

• 工厂模式：主要用来创建同一类对象，在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。
• 单例模式：只允许实例化一次的对象类，该类负责创建自己的对象，同时确保只有单个对象被创建。
• 装饰器模式（结合到es7的装饰器）：允许向一个现有的对象添加新的功能，同时又不改变其结构，这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。
• 代理模式 （结合es6的proxy）：创建具有现有对象的对象，以便向外界提供功能接口。
• 观察者模式：当对象间存在一对多关系时使用。当一个对象被修改时，则会自动通知依赖它的对象。
• 原型模式：使用于创建新的对象的类共享原型对象的属性以及方法

JavaScript设计模式

数据结构与算法

数组：

1
2

const arr = [1, 2, 3, 4]   
const arr1 = new Array()

栈：后进先出(LIFO)，只用 pop 和 push 完成增删的“数组”

队列：先进先出(FIFO)，只用 push 和 shift 完成增删的“数组”

链表：有序的列表、都是线性结构（有且仅有一个前驱、有且仅有一个后继）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/* 结点格式
{
  // 数据域
  val: 1,
  // 指针域，指向下一个结点
  next: {
    val:2,
    next: ...
  }
}
*/
// 创建链表结点
function ListNode(val) {
  this.val = val
  this.next = null
}
const node = new ListNode(1)  
node.next = new ListNode(2)

二叉树：空树或者由根结点、左子树和右子树组成，且左右子树都是二叉树

1
2
3
4
5
6

// 二叉树结点的构造函数
function TreeNode(val) {
  this.val = val
  this.left = this.right = null
}
const node  = new TreeNode(1)

JavaScript 算法与数据结构

进击的CSS

css盒模型

盒模型包括包括margin、border、padding、content

• 标准盒模型：content 部分不包含其他部分
• IE盒模型：content 部分包含了 border 和 padding

面试官：谈谈你对 CSS 盒模型的认识?

文档流和BFC :star:

文档流：将窗体自上而下分成一行行，并在每一行中按从左到右的顺序来排放元素，这个我们称之为文档流。

非文档流(脱离文档流)：也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。（float、absolute、fixed）

BFC(Block formatting context): 称为块级格式化上下文，是CSS中的一种渲染机制。BFC是一个独立的渲染区域，它决定了块级元素如何对它的子元素内容进行布局，以及与子元素同级别的兄弟元素的关系和相互作用。

可以理解为：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流。

BFC 的原理：

• 独立的容器，内外元素互不影响
• 内部的Box会在垂直方向，一个接一个地放置
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• BFC 的区域不会与浮动元素的 float 重叠
• 计算 BFC 高度，浮动元素也参与计算

如何创建BFC：

• 根元素
• float属性不为none
• position为absolute或fixed
• overflow不为visible
• display为inline-block, table-cell, table-caption, flex, inline-flex

BFC作用：

• 防止外边距重叠
• 清除浮动的影响
• 防止文字环绕

flex和grid

flex 布局是一维布局，Grid 布局是二维布局。Flex布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局，Grid 布局则是将容器划分成“行”和“列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局，Grid布局远比 Flex布局强大。

flex布局详解

grid布局

1
2

flex: 1
// flex: 1; === flex: 1 1 auto;

flex-grow是用来增大盒子的，比如，当父盒子的宽度大于子盒子的宽度，父盒子的剩余空间可以利用flex-grow来设置子盒子增大的占比

flex-shrink用来设置子盒子超过父盒子的宽度后，超出部分进行缩小的取值比例

flex-basis是用来设置盒子的基准宽度，并且basis和width同时存在basis会把width干掉

css动画

animation: name duration timing-function delay iteration-count direction;

@keyframes（@keyframes动画是循环的，而transform 只执行一遍）

深入浅出 CSS 动画

必备的HTML

history api

window 对象通过 history 对象提供了对浏览器的会话历史的访问，提供了对history栈中内容的操作。可以在不刷新页面的前提下动态改变浏览器地址栏中的URL地址，动态修改页面上所显示资源。

1
2
3
4
5
6
7
8
9
10

//在history中向后跳转：
window.history.back()
window.history.go(-1)

//向前跳转：
window.history.forward()
window.history.go(1)

//历史记录中页面总数
history.length

HTML5 引入了history.pushState()和history.replaceState()方法，它们分别可以添加和修改历史记录条目。

• history.pushState(state, title, url): 添加一条历史记录，不刷新页面
• history.replaceState(state, title, url): 替换当前的历史记录，不刷新页面
• popstate 事件：历史记录发生改变时触发，调用history.pushState()或者history.replaceState()不会触发popstate事件
• hashchange 事件：当页面的hash值改变的时候触发，常用于构建单页面应用

主流的前端框架

几大框架知识点梳理

模块化和工程化

前端工程化是一种工程化的思想，而并不是一种技术手段。前端工程化的目标就是让前端项目，更利于团队的协作，解耦团队的分工，提高团队的开发效率。对于后期，更利于前端项目的维护。

工程化可以理解为，系统的、规范的进行开发和部署的流程。

结合代码实践，全面学习前端工程化

模块化

在浏览器中使用esm，在Node中使用CommonJS的模块化支持。

• CommonJs (典型代表：node.js 早期，require / module.exports)：用于服务端

  • 都运行在模块作用域，不会污染全局作用域
  • 同步加载的，即只有加载完成，才能执行后面的操作
  • 首次执行后就会缓存，再次加载只返回缓存结果，如果想要再次执行，可清除缓存
  • require 返回的值是被输出的值的拷贝，模块内部的变化也不会影响这个值
  • 缺点：在浏览器环境同步加载大量模块会导致性能问题

• AMD (典型代表：require.js，require / defined):异步模块定义。
  所有依赖模块的语句，都定义在一个回调函数中，等到模块加载完成之后，这个回调函数才会运行
  require。

• ES6 的 Module：import/export（或者在script中指定type=”module”）

  • CommonJS 和 AMD 模块，都只能在运行时确定这些东西
  • 编译时确定依赖：ES6 设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量
  • 按需加载：import()允许您仅在需要时动态加载模块，而不必预先加载所有模块

脚手架

脚手架的出现就是为减少重复性工作而引入的命令行工具，实现脚手架的核心思想就是自动化思维。

webpack

webpack 是一个模块打包工具(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

深入探究Webpack原理

基础配置和常用插件 :star:

webpack安装使用

打包优化 :star:

玩转 webpack，使你的打包速度提升 90%

Webpack构建速度优化

摇树的原理

采用删除不需要的额外代码的方式优化代码体积的技术。ES6的模块方案：import()引入模块的方式采用静态导入，可以采用一次导入所以的依赖包再根据条件判断的方式，获取不需要的包，然后执行删除操作。

webpack4和3区别

webpack3和webpack4区别

rollup

对于组件库项目，支持按需加载需要满足：组件库以ES模块化方式导出。 而rollup本来就支持ES模块的导出。

• rollup-plugin-postcss：增加配置可以抽离单独的css文件
  rollup常用扩展插件

单元测试

JavaScript 缺少类型检查，编译期间无法定位到错误，单元测试可以帮助你测试多种异常情况。通过编写测试用例，可以做到一次编写，多次运行。

使用框架：Jest（内置了集成度比较高的断言库expect.js，自带断言、测试覆盖率工具，实现了开箱即用）。
它会自动识别一些常用的测试文件，比如*.spec.js和 *.test.js后缀的测试脚本，所有的测试脚本都放在tests或__tests__目录下。

浏览器

浏览器存储

Cookie、localStorage、sessionStorage、IndexedDB

常见的浏览器本地存储

浏览器原理 :star:

前端都该懂的浏览器工作原理

输入url到浏览器渲染 :star:

URL 解析 -> DNS 查询 -> TCP 连接 -> HTTP 请求 -> 服务器响应请求 -> 页面渲染

从输入URL到页面渲染的整个过程

浏览器的本地缓存

优先级:MemoryCache > ServiceWorker> DiskCache。

• Memory Cache：内存中的缓存，主要包含的是当前中页面中已经抓取到的资源。内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。(关闭Tab页面就释放)。浏览器使用的内存是有限的，一般优先存小的文件或请求，优先存文件。
• Disk Cache： 硬盘中的缓存，读取速度慢，胜在容量大和存储时效性上（根据 HTTP Herder 中的字段判断哪些资源需要缓存）绝大多数缓存都是disk cache。
• Service Worker：必须HTTPS中使用（Service Worker 中涉及到请求拦截），运行在浏览器背后的独立线程。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。
• Push Cache：HTTP/2中的，缓存时间短暂，只在会话（Session）中存在，一旦会话结束就被释放。（当以上三种缓存都没有命中时，它才会被使用。）

浏览器的缓存机制

强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互。强缓存是利用http头中的Expires和Cache-Control两个字段来控制的，用来表示资源的缓存时间。（请求返回Code 200）

协商缓存：浏览器发送请求到服务器，服务器判断是否可使用本地缓存（主要通过请求头中的Etag和If-None-Match、Last-Modified和If-Modified-Since标识通信）更改了就重新请求，没有改变就直接用缓存。

ETag：协商缓存中判断是否变更的标志（优先级更高）。ETag 类似于文件指纹，If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否变动，有变动的话就将新的资源发送回来。

ETag一般不以明文形式相应给客户端。在资源的各个生命周期中，它都具有不同的值，用于标识出资源的状态。当资源发生变更时，那么ETag也随之发生变化。

强缓存和协商缓存

Etag详解

网络

http协议 :star:

http：是一个客户端和服务器端请求和应答的标准（TCP），是一个超文本传输协议。

https：是以安全为目标的 HTTP 通道，即 HTTP 下 加入 SSL 层进行加密。其作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。

HTTP 1.1 和 HTTP 2.0 的区别：

• HTTP/2采用二进制格式而非文本格式
• HTTP/2是完全多路复用的，而非有序并阻塞的——只需一个连接即可实现并行
• 使用报头压缩，HTTP/2降低了开销
• HTTP/2让服务器可以将响应主动“推送”到客户端缓存中

HTTPS如何防止中间人攻击：
服务器是通过 SSL 证书来传递公钥，客户端会对 SSL 证书进行验证，其中证书认证体系就是确保SSL安全的关键。

HTTP和HTTPS协议

详解HTTP/1.0、HTTP/1.1、HTTP/2、HTTPS

HTTPS怎么避免中间人攻击

CSRF和XSS、SQL 注入攻击 :star:

CSRF：跨站请求伪造，攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

防御办法：

• 在服务器端验证请求来源的站点，禁止第三方站点的请求（验证 HTTP Referer 字段， Referer记录了该 HTTP 请求的来源地址）
• 随机token（在请求地址中添加 token 并验证）
• 为Set-Cookie响应头新增Samesite属性（在 HTTP 头中自定义属性并验证）

XSS：跨站脚本攻击，攻击者通过“注入”，在网页中插入恶意代码，从而被浏览器执行所造成的一种攻击方式。

• 反射型：url请求中加上script代码
• 存储型：输入框中输入脚本提交到服务器，服务器返回信息执行
• DOM型：通过脚本修改页面的DOM节点

防御办法：

• 对输入进行检查和转码；
• CSP(内容安全策略): 设置 HTTP Header 的 Content-Security-Policy; 或者设置 meta 标签的方式

SQL 注入: 主要是利用前端表单提交，比如输入框、富文本框，输入sql语句提交到后端，当后端服务通过提交的字段拼接成sql语句进行数据库查询的时候，恶意sql被执行，从而达到攻击的目的。

中间人攻击: 攻击方同时与服务端和客户端建立起了连接，并让对方认为连接是安全的。攻击者不仅能获得双方的通信信息，还能修改通信信息。防御办法：https

防止token泄露：HTTPS认证、对称加密、将请求 URL、时间戳、token 三者进行合并加盐签名，服务端校验有效性

xss和csrf

websocket

Websocket是 HTML5 新增的基于TCP的网络通信协议（全双工通讯的协议）。websocket不属于http无状态协议，协议名为”ws”。(没有同源限制)

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。

优点：

• 较少的控制开销
• 更强的实时性
• 保持连接状态
• 性能更好

过程：

1. 客户端发起http请求，经过3次握手后，建立起TCP连接；http请求里存放WebSocket支持的版本号等信息；
2. 服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据；
3. 客户端收到连接成功的消息后，开始借助于TCP传输信道进行全双工通信（可以通过 send() 方法来向服务器发送数据，通过 onmessage 事件来接收服务器返回的数据）

最初的握手阶段是http协议，握手完成后就切换到websocket协议，借助于TCP传输信道进行全双工通信。建立通讯时，是由客户端主动发起连接请求，服务端被动监听，通信的数据是基于“帧(frame)”的，可以传输文本数据，也可以直接传输二进制数据，效率高。

websocket深入浅出

WebSocket

可视化

canvas常用API

Canvas API 提供了一个通过JavaScript和HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

rect、clearRect、beginPath、moveTo、lineTo、closePath、stroke、arc、rotate、translate、transform

Canvas常用API

html5中canvas的绘图API

webgl 和 threejs

js动画库

Anime.js（可以处理CSS属性，单个CSS转换，SVG 或任 何 DOM 属性以及 JS 对象）、Mo.js（用于 Web 的动态图形工具带）

其他

TS

TypeScript 是基于 JavaScript 创造的强类型编程语言，可以进行任意程度的扩展。

优点：

• 类型定义：良好的类型定义和对 ES6 的支持
• 可维护性：增长了代码的可读性和可维护性
• 提早报错：类型错误会在编译过程中被编译器发现，便于发现BUG
• 代码可预测性：声明的变量一旦指定类型，它的类型就再也不能修改。这样变量就具有可预测性。
• 便于重构

缺点：

• 因为需要兼容 JavaScript 的缘故，TypeScript 的类型是可选的。所以还是会有些类型问题（如any）
• 需要编译：浏览器和 Nodejs 并不支持 TypeScript，所以多了一步编译操作。
• 增加开发成本：如类型定义和接口声明

「面试题」TypeScript

与js的区别

• ts是静态语言，js是动态类语言
• ts对比js基础类型上，增加了 void/never/any/元组/枚举/以及一些高级类型
• js没有重载概念，ts可以重载

js项目如何升级为ts

安装typescript -> 安装eslint相关依赖 -> 新建tsconfig.json -> 修改文件后缀

配置项

• target: 控制编译后输出的是什么js版本
• lib: 指定要引入的库文件，是内置对象所应用的声明（如配置：[‘ES2015’, ‘DOM’]）
• module: 指定要使用的模块标准

Nodejs

一个基于Chrome V8引擎的JavaScript运行环境。它是一个轻量级框架，用于创建服务器端 Web 应用程序并扩展 JavaScript API 以提供常用的服务器端功能，创建前端工具库等。

NodeJS面试题

NodeJS面试题

应用场景

• 基于 Express 框架 (opens new window)，可以快速构建 Web 应用
• 基于 Electron 框架 (opens new window)，可以构建跨平台的桌面应用
• 基于 restify 框架 (opens new window)，可以快速构建 API 接口项目
• 读写和操作数据库、创建实用的命令行工具辅助前端开发

Buffer

Buffer是nodejs全局上的一个內置模块，作用就是让JavaScript可以直接操作二进制数据。

全局对象

global、 process, console、 module和 exports

事件循环

事件循环其实就是一个事件队列，先加入先执行，执行完一次队列，再次循环遍历看有没有新事件加入队列。

目的：处理非阻塞 I/O 操作的机制 （指以异步来执行函数，先执行同步任务，耗时任务放在事件队列中，以此轮询执行）

IO事件→ setImmediate→ setTimeout/setInterval→ process. nextTick

libuv 引擎中的事件循环分为 6 个阶段，它们会按照顺序反复运行。每当进入某一个阶段的时候，都会从对应的回调队列中取出函数去执行。当队列为空或者执行的回调函数数量到达系统设定的阈值，就会进入下一阶段。
事件循环中细分为这六个阶段：

• Timers: 执行定时器回调事件（依次执行完所有定时器回调才到下个阶段，微任务队列是在每个阶段完成后立即执行）
• Pending: 一些系统级回调将会在此阶段执行
• Idle,prepare: 此阶段”仅供内部使用”
• Poll: IO回调函数，这个阶段较为重要也复杂些，
• Check: 执行 setImmediate() 的回调
• Close: 执行 socket 的 close 事件回调

如何支撑高并发

虽然js是单线程（缺点：不能充分利用多核，容易阻塞），node支持高并发主要基于事件循环机制。
nodejs 是异步非阻塞的，所以能扛住高并发。

stream

Node.js 中有四种基本的流类型：

• Writable: 可写入数据的流（例如 fs.createWriteStream()）。
• Readable: 可读取数据的流（例如 fs.createReadStream()）。
• Duplex: 可读又可写的流（例如 net.Socket）。
• Transform: 在读写过程中可以修改或转换数据的 Duplex 流（例如 zlib.createDeflate()）。

npm安装机制

• 查询 node_modules 目录之中是否已经存在指定模块
• 若存在，不再重新安装
• 若不存在，npm 向 registry 查询模块压缩包的网址
• 下载压缩包，存放在根目录下的.npm目录里
• 解压压缩包到当前项目的 node_modules 目录

移动端

uniapp

Flutter

Flutter 和 React Native 不同主要在于 Flutter UI是直接通过 skia 渲染的 ，而 React Native 是将 js 中的控件转化为原生控件，通过原生去渲染的。

Flutter面试指南

小程序

小程序的逻辑层和渲染层是在两个不同的线程的。

直接把JavaScript执行的逻辑层环境放到沙盒，一个纯JavaScript的执行环境，没有浏览器的概念，这样就没有DOM相关的API了，那小程序也得有页面，所以渲染层就单独开一个线程了。

• 不能直接操作DOM, 保护页面上用户隐私
• 限制一些API的调用, 规避了XSS攻击

安装axios

1

npm i axios axios-miniprogram-adapter

安装 -> 工具 -> 构建npm -> 引入

性能优化

• 资源打包分析：webpack-bundle-analyzer

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

  npm install --save-dev webpack-bundle-analyzer // webpack.config.js 文件 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports={ plugins: [ new BundleAnalyzerPlugin({ analyzerMode: 'server', analyzerHost: '127.0.0.1', analyzerPort: 8889, reportFilename: 'report.html', defaultSizes: 'parsed', openAnalyzer: true, generateStatsFile: false, statsFilename: 'stats.json', statsOptions: null, logLevel: 'info' }), ] } // package.json "analyz": "NODE_ENV=production npm_config_report=true npm run build"

• Gzip压缩: Compression-webpack-plugin

• JavaScript、Css、Html压缩：UglifyJS、webpack-parallel-uglify-plugin、terser-webpack-plugin、mini-css-extract-plugin

前端性能优化 24 条建议
聊一聊前端性能优化

electron

介绍

Electron 是使用 JavaScript等前端技术构建跨平台的桌面应用程序的框架，可构建出兼容 Mac、Windows 和 Linux 三个平台的应用程序。允许使用Node.js(作为后端)和Chromium(作为前端)完成桌面GUI应用程序的开发。

Electron = Chromium + Node.js + Native API

原理

它通过集成浏览器内核，使用前端的技术来实现不同平台下的渲染，并结合了 Chromium 、Node.js 和用于调用系统本地功能的 API 三大板块。

• Chromium 为 Electron 提供强大的 UI 渲染能力，由于 Chromium 本身跨平台，因此无需考虑代码的兼容性。
• Chromium 并不具备原生 GUI 的操作能力，因此 Electron 内部集成 Node.js，编写 UI 的同时也能够调用操作系统的底层 API，例如 path、fs、crypto 等模块。
• Native API 为 Electron 提供原生系统的 GUI 支持，借此 Electron 可以调用原生应用程序接口。

架构

基于Chromium 架构（Chromium 是 Chrome 的开源版，也是一个浏览器）。

当用Electron启动一个应用，会创建一个主进程。这个主进程负责与你系统原生的GUI进行交互并为你的应用创建GUI。

electron由主进程main process启动，通过BrowserWindow实例创建渲染进程renderer process(渲染Web页面)，每个渲染进程都是相互独立渲染。考虑到安全问题，在渲染进程里面不允许直接调用GUI API，如果想要调用，必须通过和主进程通讯，请求主进程完成相应的调用。

每个 Electron 应用有且只要一个主进程(Main Process)、以及一个或多个渲染进程(Renderer Process), 对应多个 Web 页面。除此之外还有 GPU 进程、扩展进程等等。主进程负责创建页面窗口、协调进程间通信、事件分发。为了安全考虑，原生 GUI 相关的 API 是无法在渲染进程直接访问的，它们必须通过 IPC 调用主进程。这种主从进程模型缺点也非常明显，即主进程单点故障。主进程崩溃或者阻塞，会影响整个应用的响应。

Node.js 事件循环基于 libuv，但 Chromium 基于 message_pump。
将 Node.js 集成到 Chromium 中的原理：
Electron 起了一个新的安全线程去轮询 backend_fd，当 Node.js 有一个新的事件后，通过 PostTask 转发到 Chromium 的事件循环中，这样就实现了 Electron 的事件融合。

生命周期

• ready：应用程序初始化完成
• dom-ready：一个窗口中的文本加载完成
• did-finish-load: 导航完成时触发
• window-all-closed：所有窗口都被关闭时触发；监听了此事件，需要主动执行app.quit() 事件，before-quit、will-quit、quit 这三个生命周期才会生效
• before-quit：窗口关闭之前
• will-quit：所有窗口都已经关闭,应用程序将退出触发
• quit：应用程序关闭
• closed：当窗口关闭时触发，此时应删除窗口引用

修改自定义图标

窗口图标：

1
2
3
4
5

new BrowserWindow({ 
  width: 900, 
  height: 600,
  icon: path.join(__dirname,'./public/icons/login.png')
})，

桌面图标：在package.json中配置图标路径，或者在vue.config.js配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

pluginOptions: {
  electronBuilder: {
    builderOptions: {
      nsis: {
        allowToChangeInstallationDirectory: true,
        oneClick: false,
        installerIcon: "./public/icon.ico", //安装logo
        installerHeaderIcon: "./public/icon.ico" //安装logo
      },
      electronDownload: {
        mirror: "npm.taobao.org/mirrors/" //镜像设置
      },
      win: {
        icon: './public/icon.ico' //打包windows版本的logo
      },
      productName: "vfirstss", //应用的名称
    }
  }
}

Composition API 也叫组合式 API，它主要就是为了解决 Vue2 中 Options API 的问题。

vue2中，我们在methods、computed、watch、data中定义属性和方法，共同处理页面逻辑，我们称这种方式为Options API。
这种代码模式下存在几个问题：

• 随着功能的增长，复杂组件的代码变得越来越难以维护。 尤其去新接手别人的代码时。 根本原因是 Vue 的现有 API 通过「选项」组织代码，但是在大部分情况下，通过逻辑考虑来组织代码更有意义。
• 缺少一种比较「干净」的在多个组件之间提取和复用逻辑的机制。
• 类型推断不够友好。

Composition API顾名思义就是不再传入data、mounted等参数，通过引入的ref、onMounted等方法实现数据的双向绑定、生命周期函数的执行。Composition API目的是通过一组低侵入式的、函数式的 API，使得我们能够更灵活地「组合」组件的逻辑，因此其中的代码是根据逻辑功能来组织的，同一功能所定义的所有api会放在一起。

setup

vue3中使用setup代替了beforeCreate和created这两个生命周期，setup()是在创建vue组件实例并完成props的初始化之后执行（在 created() 生命周期函数之前执行）。同时setup返回的值，可以在模板和其他option中使用。

1
2
3
4
5

setup(props, context){
  return {
    text: 'test'
  }
}

与Vue2区别：

不能使用this，而是通过 context 对象来代替当前执行上下文绑定的对象，context 对象有四个属性：attrs、slots、emit、expose。

ref、reactive

reactive 和 ref 都是用来定义响应式数据的。一般来说，ref用于基础赋值类型的数据，而reactive用于引用类型的数据。ref 的底层就是 reactive。

ref

ref函数传入一个值作为参数，一般传入基本数据类型（原始数据），ref的返回值是一个对象，这个对象上只包含一个.value属性。（可以理解为ref是在reactive上的封装）

• 基本类型数据：响应式依然是通过Object.defineProperty()。
• 引用类型数据：响应式是通过调用内部方法reactive函数（通过Proxy）

reactive

reactive是用来定义更加复杂的数据类型，但是解构就不具备响应式了（相当于跳过了代理重新赋新值了）。

toRef 和 toRefs

toRef是将对象中的某个值转化为响应式数据 toRef(obj, key)。

toRefs函数可以将reactive创建出来的响应式对象转换为普通的对象，这个对象上的每个属性都是Ref类型的响应式数据。

toRef和toRefs是对原始数据的引用，修改响应式数据时，原始数据也会发生改变，但是视图并不会更新。toRef修改的是对象的某个属性，toRefs修改的是整个对象

isRef

判断是否是ref对象。

unref

返回ref的.value值，或返回原值。

watch、watchEffect

watchEffect立即运行一个函数，然后被动的追踪它的依赖，当依赖重新改变时执行该函数。watch监测一个或多个响应式数据，并在变化时调用一个回调函数。

watchEffect是特殊的watch，传入的函数既是数据源又是回调。如果不关心数据变化前后值，只想监听拿到数据执行事件就可以用这个。watch更底层，可以接受多个数据源，可以获取变化前后的值。

watchEffect会立即执行一次，watch默认不会立即执行，除非传入immdiate。

watchEffect与watch区别：

• 不需手动传入依赖
• 初始化时会立即执行
• 无法获取到原值，只能得到变化后的值

watch

watch 作用是监听传值（和Vue2一致，是惰性的，会返回新值和旧值）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// ref 数据
const name = ref('name1')
watch(
  name,
  (newValue, oldValue) => {},
  { immediate: true, deep: true }
)

// reactive 数据
const user = reactive({ name: 'username' })
watch(
  () => user.name,
  (newValue, oldValue) => {}
)

// 多个数据
watch(
  [name, () => user.name],
  (newValue, oldValue) => {}
)

// 立即执行，在变化时追踪
watchEffect(() => console.log('Value: ' + user.name))

与Vue2区别：

1. 传参不一样，watch需要传监听的响应式变量，回调函数，options配置
2. 停止监听: 在组件中创建的watch监听，会在组件被销毁时自动停止。如果在组件销毁之前想要停止掉某个监听， 可以调用watch()函数的返回值。

   1 2 3 4 5 6 7 8 9 10

   const watchFun = watch( name, (newValue, oldValue) => {}, { immediate: true, deep: true } ) setTimeout(()=>{ // 停止监听 watchFun() }, 3000)

watchEffect

watchEffect用法和watch不一样。watchEffect 是传入一个立即执行函数，所以默认第一次也会执行一次；不需要传入监听内容，会自动收集函数内的数据源作为依赖，在依赖变化的时候又会重新执行该函数，如果没有依赖就不会执行；而且不会返回变化前后的新值和老值。

1

watchEffect(() => {})

生命周期钩子

• setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
• onBeforeMount() : 组件挂载到节点上之前执行的函数。
• onMounted() : 组件挂载完成后执行的函数。
• onBeforeUpdate(): 组件更新之前执行的函数。
• onUpdated(): 组件更新完成之后执行的函数。
• onBeforeUnmount(): 组件卸载之前执行的函数。
• onUnmounted(): 组件卸载完成后执行的函数
• onActivated(): 被包含在keep-alive中的组件，会多出两个生命周期钩子函数。被激活时执行。
• onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
• onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数（以后用到再讲，不好展现）。

Fragment(碎片化节点)

vue3组件的模板结构中出现多个标签时，可以不用根标签。编译时vue会在这些元素节点上添加一个<Fragment></Fragment>标签。并且该标签不会出现在dom树中。

Teleport（传送门）

是一个内置组件，使我们可以将一个组件的一部分模板“传送”到该组件的 DOM 层次结构之外的 DOM 节点中。

使用场景：有时组件模板的一部分逻辑上属于该组件，但元素上最好将模板的这一部分移动到组件之外的其他位置。比如点击按钮出现的弹出框。

1
2
3
4
5
6

// 渲染到body标签下
<teleport to="body">
  <div class="modal">
    模态框
  </div>
</teleport>

Suspense(异步组件)

vue3中提供一个<Suspense></Suspense>组件用于控制异步组件。

作用：等待异步组件时渲染一些额外内容，让应用有更好的用户体验

使用：

1
2
3
4
5
6
7
8
9

<Suspense>
  <template #default>
    <!-- 异步组件 -->
    <async-component />
  </template>
  <template #fallback>
    加载中 ...
  </template>
</Suspense>

其他框架层面的优化

• 更快
  • 虚拟DOM重写：
  • 编译器优化：静态提升、patchFlags.block等
  • 基于Proxy的响应式
• 更小：Tree-shaking优化
• 更好维护：Ts + 模块化
• 更容易扩展
  • 独立的响应化模块
  • 自定义渲染器

路由模式

hash模式

使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。

• 原理

  基于浏览器的window.onhashchange事件，当地址变化时，通过window.location.hash 获取地址上的hash值；并通过构造Router类，配置routes对象设置hash值与对应的组件内容。

• 优点

  hash值不会被包含在Http请求中, 因此hash值改变不会重新加载页面；

  hash改变会触发onhashchange事件, 能控制浏览器的前进后退；

  兼容性好；

• 缺点

  地址栏中携带#不美观；

  hash有体积限制，只可添加短字符串；

  当设置的新值必须与原来不一样才会触发hashchange事件；

history模式

用url规范的路由，但跳转时也不会刷新页面。依赖 HTML5 History API 和服务器配置。

• 原理

  基于HTML5新增的history.pushState()和history.replaceState()两个api（改变url不刷新页面），以及浏览器的window.onpopstate事件（用来监听前进或后退事件），地址变化时，通过window.location.pathname找到对应的组件。并通过构造Router类，配置routes对象设置pathname值与对应的组件内容。

  PS: 调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件。

• 优点

  pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；

  pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；

  浏览器的进后退能触发浏览器的onpopstate事件，获取window.location.pathname来控制页面的变化；

• 缺点

  URL的改变属于http请求，借助history.pushState实现页面的无刷新跳转，因此会重新请求服务器，所以前端的 URL 必须和实际向后端发起请求的 URL 一致。需要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面；

  兼容性差，特定浏览器支持；

• 后端配置例子

  HTML5 History 模式

abstract

支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

响应路由

当使用路由参数时，例如从 /user/id1 导航到 /user/id2，原来的组件实例会被复用。这也意味着组件的生命周期钩子不会再被调用。
此时可以监听路由的变化：

1
2
3
4
5
6
7
8

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}

导航守卫（beforeRouteUpdate）

1.全局前置守卫

1
2
3
4
5
6
7
8
9
10

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

//全局后置钩子
router.afterEach((to, from) => {
  // ...
})

2.全局解析守卫
可以使用router.beforeResolve注册一个全局守卫，在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

3.路由独享的守卫

1
2
3
4
5
6
7
8
9
10
11

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

4.组件内的守卫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

5.完整的导航解析流程
失活组件beforeRouteLeave -> beforeEach -> 重用组件beforeRouteUpdate -> 路由beforeEnter -> 激活组件beforeRouteEnter -> beforeResolve -> afterEach -> DOM更新

参考

Vue Router

原来这就是hash模式和history模式的区别

疫苗

猫咪是否打过猫三联疫苗和狂犬疫苗，打过的话会一般有小本本。（一般1年打一次，1年带猫咪做一次体检）

驱虫

是否驱虫，准备好驱虫药，后期自己定期给猫驱虫。

驱虫分内驱、外驱、内外同驱3种方式。

猫咪刚到新家，刚注射完疫苗的7天内，生病时等情况下，都不适合驱虫。建议是断奶后，大概两个月左右开始驱虫。

六个月以后的猫咪：如果猫咪不外出、不捕猎、不吃生肉的情况下，可以每隔3个月驱虫一次（体内3个月1次，体外2个月一次（体外驱虫一定要带伊丽莎白圈防止猫猫舔舐，且驱虫后2天内不能洗澡））。

带猫咪回家之前，你需要准备的东西

自动饮水机

猫咪也需要多喝水，尤其是公猫，喝水太少的话容易有泌尿系统的疾病

航空箱

猫抓板（2块）或者 猫爬架

选择性

• 猫罐头（主食罐头）
• 羊奶粉（幼猫）

养猫之前，你必需要知道的安全知识：

1. 猫窝不要买
2. 封窗

新猫到家，需要注意的事项：

1. 接回家之前，要给猫猫体检，确保没有寄生虫等其他疾病，确认猫猫疫苗接种情况
2. 进门第一件事：把猫咪从航空箱里抱到猫砂盆里，让它闻一下，也可以轻轻用它的小爪子扒拉两下。让小猫知道这是上厕所的地方
3. 大部分猫咪胆子都很小，可能会钻到沙发/ 床底下躲起来。因为呆在狭窄且黑暗的地方，猫咪会比较有感全感。

日常护理建议

注意饮食

猫的饮食最好的是：湿粮>成品干粮>菜汤拌饭

宠物幼年时期就要注意饮食，因为这直接决定了它们成年后的免疫力、发育能力、抵抗力。成年后的宠物要注意不要喂高糖、高盐、高脂肪食物。

宠物的便便关系着它的身体健康，铲屎官们要学会观察，及时判断异常，宠物便便形态分级可见下图：

猫猫食物

1. 猫粮（换猫粮的时候需要将新粮和旧粮按照比例1:5/2:5/1:2/3:5/4:5/全新。这样的比例更换）

选猫粮最简单的办法就是看成分表，前几位都是肉就是好粮食

2. 化毛膏/猫草
3. 营养膏
4. 喝水：一定要用烧开晾凉的水，或者矿泉水都可以（水要每天更换，自动喂水器可以3-5天更换）

猫猫用品

1. 猫碗2个（吃饭一个，喝水一个）
2. 猫砂盆1（推荐封闭式或顶入式，不然猫砂会被猫猫播出来，同时猫屎很臭）
3. 猫砂（推荐豆腐猫砂，可以冲厕所的，很省事）
4. 指甲剪（猫咪专用的那种）
5. 宠物梳子（梳毛用）
6. 猫咪沐浴液
7. 猫用牙刷牙膏
8. 毛巾（推荐鹿皮毛巾，超级吸水超便宜）
9. 针管20ml(供强制猫猫喝水喂药用)
10. 伊丽莎白圈（给猫驱虫时用需要带头上防止他舔舐）
11. 猫笼（你打扫卫生或者他犯错误都可以先关进去）
12. 猫药品（体内驱虫药片，体外驱虫滴剂，益生菌，洗耳液，猫咪赖氨酸，眼药水）
13. 猫消毒（杜邦卫可消毒粉）

猫猫药品

1. 益生菌，2天一次加到猫食物里调节猫咪肠胃，防止软便拉稀
2. 洗耳液，法国维克洗耳液，滴入猫耳朵里，扣住按摩松开猫咪会自动将脏东西甩出，再擦干 就好。预防猫咪耳部疾病
3. 赖氨酸，猫咪受凉得了感冒就是大病，很难治，所以在天气要转冷或者夏天常开空调记得给猫加到饭里作为预防
4. 眼药水，这个不是必须，但是猫咪有时候会不小心眼睛感染，流浑浊泪水，眼屎多，这个时候就需要眼药水帮它康复，托百士就可以。特别严重还是要上医院
5. 杜邦卫可消毒粉，这个是能有效抵御猫瘟病毒的消毒粉，一般用它一周拖地消毒，以及用来喷他的饭碗，舔舐也无害

日常清理

1. 早晚铲屎，猫砂每天更换
2. 一周剪指甲一次，一周刷牙一次，一周梳毛一次，1～2周清洗一次耳朵
3. 每隔半年洗一次澡（一般猫咪都很怕自己的毛沾湿，所以也很抗拒洗澡，洗澡也容易让猫咪受惊，产生应激反应，洗澡后要吹干）

其他养猫的基础知识

1.猫打呼噜
2.清洁猫砂盆：最好是一天一次
3.猫咪可绝育年龄：6个月-1岁左右（母猫7个月大绝育，公猫6个月大绝育）
4.不要出门遛猫
5.如果要出远门，最好找朋友隔两天来家里照顾下猫咪

组件通信

props/$emit

父组件通过props向下传递数据给子组件，子组件通过$emit发送事件给父组件发消息（传值）。

缺点：比较适合父子组件通信，在兄弟组件和跨级组件中使用会比较复杂

eventBus

通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙地实现了任何组件间的通信，包括父子、兄弟、跨级。

1
2
3

let EventBus = new Vue()
EventBus.$emit(eventName, data)
EventBus.$on(eventName, data => {})

缺点：比较适合兄弟组件和跨级组件通信，但事件太多会比较混乱不好管理

vuex

缺点：使用vuex组件传值需要把值存到全局仓库中，对于小型的项目，通信十分简单，这时使用 Vuex 反而会显得冗余和繁琐。

$attrs/$listeners

• $attrs：包含了父作用域中不被 prop 所识别的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=”$attrs” 传入内部组件。通常配合 interitAttrs 选项一起使用。
• $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器（存放的是父组件中绑定的非原生事件）。它可以通过 v-on=”$listeners” 传入内部组件。

缺点：适用于特定的情况，比如父组件和孙子组件

provide/inject

祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。

provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

缺点：provide 和 inject 绑定并不是可响应的。（如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。）它被设计是为组件库和高阶组件服务的，平常业务中的代码不建议使用。

ref

ref如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

缺点：不太适合嵌套层级太多的时候使用。$refs 不是响应式的，只能拿到获取它的那一刻子组件实例的状态。

$parent / $children

$parent 属性可以用来从一个子组件访问父组件的实例，$children 属性 可以获取当前实例的直接子组件。

缺点：如果使用 $parent 导致父组件数据变更后会破坏单项数据流，在绝大多数情况下，不推荐使用。

生命周期

Vue生命周期

路由（建议vue-router)

Vue路由

配置404

当使用通配符路由时，含有通配符的路由应该放在最后。

1
2
3
4

{
  path: '*',    //至于最底部
  redirect: '/404'
}

状态管理（Vuex)

state

定义了应用状态的数据结构，可以在这里设置默认的初始状态。

getters

允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

mutations

唯一更改 store 中状态的方法，且必须是同步函数。

actions

用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。

modules

允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

原理

Vue3

优点

1.vue3对比vue2具有明显的性能提升

2.具有的composition API实现逻辑模块化和重用

3.支持TS

区别

1.原理上

Vue2实现双向数据绑定原理，是通过es5的 Object.defineProperty，根据具体的key去读取和修改。其中的getter方法来实现数据劫持的，setter实现数据的修改。因此无法监听属性的添加和删除，不能监听数组的变化等。

Vue3使用原生Proxy 替代 Object.defineProperty，Proxy可以理解成，在对象之前架设一层“拦截”，拦截了对象的get和set操作。Proxy可以直接监听对象而非属性，并返回一个新对象，具有更好的响应式支持。

详细可看Vue2和Vue3原理区别

React

setState

1.setState 操作合并

• 当第一个传入的参数是 object 数据类型它就会合并，类型调用了 Object.assgin
• 当参数类型是 function 数据类型时，不会合并

2.setState 是否异步

• React 获得控制权的时候，它就是异步执行
• 当 React 丧失控制权的时候，它就是同步执行（setTimeout、Promise 等异步函数；自定义注册 DOM 事件等）

组件生命周期的方法(react v17)

1.挂载

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

2.更新

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

3.卸载

• componentWillUnmount()

4.错误处理

• static getDerivedStateFromError()
• componentDidCatch()

Redux、React-redux、Redux 中间件

React Hook

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。

react hook 详解及使用

微信小程序

生命周期

• 应用生命周期

  小程序从启动 -> 运行 -> 销毁的过程

  1 2 3 4 5 6 7 8 9 10 11 12 13

  App({ //小程序初始化完成时，执行此函数，全局只触发一次。可以做一些初始化的工作 onLaunch: function(options) {}, //小程序启动，或从后台进入前台显示时触发 onShow: function(options) {}, //小程序从前台进入后台时触发 onHide: function() {}, //小程序发生脚本错误或 API 调用报错时触发 onError: function() {} })

• 页面生命周期

  小程序中，每个页面的加载 -> 渲染 -> 销毁的过程

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  Page({ //监听页面加载，一个页面只调用1次 onLoad: function(options) {}, //监听页面显示 onShow: function() {}, //监听页面初次渲染完成，一个页面只调用1次 onReady: function() {}, //监听页面隐藏 onHide: function() {}, //监听页面卸载，一个页面只调用1次 onUnload: function() {} })

• 组件的生命周期

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  Component({ //监听组件创建 created: function() {}, //在组件完全初始化完毕、进入页面节点树后被触发 attached: function() {}, //在组件离开页面节点树后被触发 detached: function() {}, //在组件在视图层布局完成后执行 ready: function() {}, //在组件实例被移动到节点树另一个位置时执行 moved: function() {}, //组件抛出错误时执行 error: function() {} })

Flutter

生命周期

状态管理

路由管理

脑图

最后附上我去年画的思维脑图吧：

参考

Vuex

react

类型断言

TypeScript 类型断言允许覆盖编译器的推断，说明你更了解这个类型，编译器不应该再发出错误。

1
2
3
4
5
6
7

let str = 'aaa'
//断言str为string类型
// 方式一
let len = (<string>str).len 

// 方式二
let len = (str as string).length

类型别名

类型别名就是给类型起一个新名字，但是都代表同一类型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 方式一
type types = string | number | boolean
type names = '小明' | '小红'
let person1 : names // person1 只能为 '小明' 或者 '小红'

// 方式二
type testPerson {
  name: string,
  age: number
}
let person2 : testPerson = {
  name: '小明',
  age: 20
}

类型别名也支持扩展：

1
2
3
4
5
6

type test1 = {
  t1: string
}
type testNew = test1 & {
  t2: string
}

接口与类型别名

相同点：

• 都可以描述属性和方法
• 都允许扩展

不同点：

• type 可以声明基本类型，联合类型，数组，元组等；interface只能声明对象
• type 语句中还可以使用 typeof 获取实例的类型进行赋值
• interface 会自动合并，type不会（当type和interface声明同名数据时，type会报错，interface会进行组合）

接口

可选属性和只读属性

1
2
3
4

interface Info {
  readonly name: string, //只读
  age?: number //可选
}

索引签名

1
2
3
4
5
6
7
8

// 可以用来定义不确定的object属性
interface Info {
  [props: string]: number | string
}
// 对数组约束
interface MyArr {
  [index: number]: string
}

函数接口

对函数传入的参数以及返回值进行约束——批量约束（即对函数的输入参数和输出结果的约束）

1
2
3
4
5
6
7
8

interface PersonName {
  (firstName: string, lastName: string): string;
}
// 为函数定义参数和返回值类型
let getName: PersonName = function(x: string, y: string) : string {
  return x + y
} 
console.log(getName('li', 'ming'))

接口继承

Ts允许接口继承多个接口，可以使用继承来扩展接口。

如果继承的两个接口中同时声明了同名的非函数成员且它们的类型不同，则编译器会报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

interface Person {
  name: string
}
interface PersonInfo extends Person {
  age: number
}
let p: PersonInfo = {
  name: 'aa',
  age: 18
}

// 多继承
interface Title {
  title: string
}
interface PersonInfoNew extends Person, Title {
  age: number
}
let p2: PersonInfoNew = {
  name: 'p2',
  age: 18,
  title: 'title'
}

函数

函数的定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 匿名函数
const fun1 = function(a: number) : number {
  return a
}

// 命名函数
function fun2(a: number) : number {
  return a
}

// 箭头函数
const fun3 = (a: number) : number => {
  return a
}

// 接口函数
type funType = (a: number, b: number) => number
const fun4: funType = (a: number, b: number) => a + b
// 或者
const fun5: (a: number, b: number) => number = function(a, b) {
  return a + b
}

构造函数

1
2

// 构造函数
let myFun = new Function('a', 'b', 'return a * b')

函数重载

重载是函数名字相同，传参不同，返回类型可以相同也可以不同。

1
2
3
4
5
6
7
8

function addFun(a: string, b: string) : string
function addFun(a: number, b: number) : number
function addFun(a: string, b: number) : string
function addFun(a: number, b: string) : string

function addFun(a: any, b: any) : any {
  return a + b
}

类

类描述了所创建的对象共同的属性和方法。

类的继承

子类除了不能继承父类的私有属性和构造函数，其他都可以继承。TS支持多重继承。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

class Parent {
  name: string
  static title: string //静态成员可以通过类名调用
  constructor(name: string, title: string) {
    this.name = name
    this.title = title
  }
  say(): void {
    console.log('我是父类', this.name)
  }
}
console.log(Parent.title)

class Child extends Parent {
  age: number
  constructor(name: string, title: string, age: number) {
    super(name, title) //父类的属性
    this.age = age
  }
  say(): void {
    super.say() //调用父类的方法
    console.log('我是子类')
  }
}

抽象类

抽象类不能实例化，只能用于继承。

1
2
3
4
5
6
7
8

abstract class Person {
  abstract name: string
  abstract say(): string //抽象方法

  sayName() {
    console.log(this.say())
  }
}

抽象类和接口的区别：

• 抽象类要被子类继承，接口要被类实现(implements继承需要重写才能使用)
• 抽象类可以有具体的方法，还可以有方法的实现，接口只能有抽象方法。
• 接口不包含构造器；而抽象类中可以包含构造器。
• 一个类最多有一个直接父类，包括抽象类；但是一个类可以直接实现多个接口。

implements

类可以通过implements实现接口。implements继承类，必须重写才能使用。

1
2
3
4
5
6
7
8
9
10

interface Info {
  name: string,
  say(): void
}
class InfoClass implements Info {
  name: string = 'aa'
  say(): void {
    console.log(this.name)
  }
}

ts的类和js的类有什么区别

ts中类的属性可以有修饰符:

• public：公有
• protected：保护类型，在类、子类里面可以访问，在类外部不能访问
• private：私有，在类可以访问，子类、类外边不能访问
• readonly：只读

泛型

泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，而是在使用的时候在指定类型限制的一种特性。

1
2
3
4
5
6
7

function test <T> (a: T) : T {
  console.log(a)
  return a
}
test<number>(1)
test<string | boolean>('hh')
test<string | boolean>(true)

和any的区别：可以定义参数和返回值类型一致的情况。

泛型接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 可以解决函数中不同类型获取某一属性。
interface ILength {
  length: number
}
function getLen <T extends ILength> (a: T) : number {
  return a.length
}

// 泛型接口
interface IPerson<T1, T2=string> {// 泛型也可以指定默认类型
  name: T1,
  age: T2
}
let p0 :  IPerson<string, number> = {
  name: 'a',
  age: 10
}

使用类型参数约束

1
2
3
4
5
6
7

function getKey<T, K extends keyof T>(obj: T, key: K) {
    return obj[key]
}
let x = {
  a: 1,
}
getKey(x, 'a')

is 关键字

被称为类型谓词，用来判断一个变量属于某个接口或类型。

在很久很久以前，由于HTTP 协议是一个无状态协议，服务器是无法记录浏览器的状态的。如果每次都要在通过表单提交信息给服务器，或者通过向服务器请求某些固定的数据，这无疑是十分繁琐的事情，因此如何进行状态管理就是急需解决的一个问题。因此cookie就这样诞生啦，在此后的许多年，浏览器发展迅速，出现了更多的存储方式，他们各有优缺点，接下来让我们详细了解下吧！

Cookie

Cookie最初是用于存储会话信息的，它会自动随着HTTP请求头信息一起发送，因此服务器就可以获取到cookie中的数据。

Cookie的存储是以域名形式进行区分的，不同的域下存储的cookie是独立的。

Cookie的优点

1. Cookie相比于其他的数据存储方式，兼容性更好。
2. Cookie可以设置过期时间，默认是会话结束时到期自动销毁。cookie的有效时间默认为-1，如果不进行设置的话，就会默认在浏览器会话关闭时结束。

Cookie的缺点

1. Cookie能存储的数据容量有限，最大只能有 4KB，因此Cookie只能用来存少量信息。
2. Cookie会被放到统一域名下的所有请求的请求头中，而有些请求并不需要cookie中的数据，因此会增加一部分不必要的网络开销。
3. Cookie一般只能存储字符串，存储的格式有限。
4. 由于Cookie中的键值对是经过URL编码的，所以读取Cookie需要解码，使用不太方便。
5. Cookie是使用HTTP连接传递数据，所以 cookie 存储的信息容易被窃取，安全性不高。

Cookie的用法

读取

1
2
3
4
5
6
7
8
9
10

function getCookie(name){
  var start = document.cookie.indexOf(name+"=") ;
  if ( start != -1 ){
      start = start + name.length + 1 ;
      var end = document.cookie.indexOf(";", start) ;
      if ( end == -1 ) end = document.cookie.length ;
      return unescape(document.cookie.substring(start,end)) ;
  }
  return null;
}

写入

1
2
3
4
5
6

function setCookie(name, value){
  var expdate = new Date();
  //设置过期时间
  expdate.setTime(expdate.getTime() + 60 * 60  * 1000);//1 hour
  document.cookie = name + "=" + escape(value) + ";expires=" + expdate.toUTCString();
}

删除

1
2
3
4

function delCookie(name){
  let newVue = new Vue();
  newVue.setCookie( name, null, -1) ;
}

localStorage

localStorage是HTML5中新增的浏览器存储机制，它可以作为持久保存客户端数据的方案，除非主动删除localStorage中的数据，否则数据是永远不会过期的。(localStorage受同源策略的限制)

localStorage的优点

1. localStorage的存储量大。
2. localStorage也是以键值对的方式存储字符串，相对于cookie，它可存的数据格式更多。
3. localStorage不会与服务端发生通信，仅位于浏览器端。

localStorage的缺点

1. 如果要存储JSON格式的数据，存储和获取的时候需要进行JSON和字符串之间的转换，因此它还是更适合存储数据结构较为简单的数据。
2. localStorage中的数据没有过期时间设置，不能自动删除，如果存储内容多的话会消耗内存空间。

localStorage的用法

读取

1
2
3

localStorage.getItem(key)
//或者
localStorage[key]

写入

1

localStorage.setItem(key,value);

删除

1
2
3

localStorage.removeItem(key)
//或者清除所有的数据
localStorage.clear()

sessionStorage

sessionStorage和localStroage差不多，也是本地存储。但sessionStorage的生命周期和localStroage不同，它是会话级别的本地存储，当会话结束时存储内容就会被销毁。

Local Storage、Session Storage 和 Cookie 都遵循同源策略。但 Session Storage 特别的一点在于，即便是相同域名下的两个页面，只要它们不在同一个浏览器窗口中打开，那么它们的 Session Storage 内容便无法共享。

sessionStorage的用法

读取

1

sessionStorage.getItem(key)

写入

1

sessionStorage.setItem(key,value);

删除

1
2
3

sessionStorage.removeItem(key)
//或者清除所有的数据
sessionStorage.clear()

IndexedDB

以上三种都只适用于少量数据，如果要存储更多更复杂的数据就不适用了。因此我们需要新的存储方式，比如IndexedDB。

IndexedDB 是一个运行在浏览器上的非关系型数据库。

IndexedDB与 Web storage 一致，均是在创建数据库的域名下才能访问。且不能指定访问域名。IndexedDB存储时间永久，除非用户清除数据，可以用作长效的存储。

webpack

官方的话来说，Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

接下来让我们安装并初步配置下webpack4吧~

全局安装

全局安装，安装成功之后可以在全局使用webpack：

1
2

npm install -g webpack
npm install -g webpack-cli

全局安装失败可能是网络的原因，可以使用淘宝镜像安装：

1

cnpm install webpack -g

栗子初体验

初始化

新建一个文件夹weproject并初始化项目：

1
2

cd weproject
npm init

npm init会自动创建一个package.json文件，这个文件存放着当前项目的相关信息。

安装webpack

在项目中安装webpack：

1

npm install --save-dev webpack webpack-cli

构建目录

新建文件夹src

1

mkdir src

在src文件夹中新建一个index.js。该文件是webpack的入口文件。webpack打包后会自动生成一个dist文件夹，默认生成构建文件main.js。

1
2

//index.js
document.write("I'm index.js")

在src文件夹中新建一个新建静态页面index.html，方便之后查看效果：

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<script src="../dist/main.js"></script>
</body>
</html>

webpack4是可以不用手动配置（webpack会提供一套默认配置），但如果需要自定义配置，我们可以新建一个webpack的配置文件webpack.config.js，通过配置文件可以告诉webpack需要做些什么。

如下，在该文件中配置了入口文件和输出文件的路径：

1
2
3
4
5
6
7
8
9

let path = require('path')

module.exports = {
  entry: './src/index.js',  //入口文件
  output: { //打包出口文件
    path: path.resolve(__dirname, 'dist'),
    filename: './main.js'
  }
};

PS： 可以通过npx直接执行node_modules中的依赖。

执行webpack

在文件夹中执行命令webpack可以看到打包后的js文件在自动生成的dist文件夹中：

1

webpack //或者 webpack --mode development

在浏览器打开index.html可以查看效果，说明webpack把src/index.js文件打包成dist/main.js了。

修改执行命令

只需在package.json的scripts中加入:

1
2
3
4
5

"scripts": {
// ...
"dev":"webpack",
"build":"webpack --mode production"
}

就可以用npm run dev代替webpack，用npm run build代替webpack --mode production了。

新建模块

新建一个module.js：

1
2

//module.js
module.exports = "I'm module.js"

在index.js中引用module.js：

1
2
3

// ...
let myModule = require('./module.js')
alert(myModule)

重新执行npm run dev打开页面可以看到页面变化。webpack会分析入口文件，并解析包含依赖关系的文件，把他们都打包到main.js中。

让配置文件支持智能提示

通过 Configuration 让 VSCode 提供webpack配置的智能提示，修改webpack.config.js为：

1
2
3
4
5
6
7
8
9
10
11

// 运行webpack时注释下面这句
import { Configuration } from 'webpack'

/**
* @type {Configuration}
*/
const config = {
//...配置项
}

module.exports = config

到这里我们就初步了解了webpack的安装和使用啦，不过如果要实现更多自定义功能的话，我们还需要了解webpack的几个核心概念。

webpack核心概念

webpack的核心有以下几点：

1. Entry：入口
2. Output：出口
3. Loader：加载器
4. Plugins：插件
5. Mode：模式

Entry

入口文件，默认是src/index.js，entry可以是字符串（单入口），可以是数组或对象（多入口），如下：

1
2
3

module.exports = {
  entry: './src/index.js',
}

或

1
2
3
4
5
6
7
8

module.exports = {
  entry: {
    main: [
      './src/index.js',
      './src/index2.js'
    ]
  }
}

webpack会解析多个入口文件的依赖后进行打包。

Output

输出文件，是一个对象，webpack默认创建的输出内容就是 ./dist/main.js。也可以自定义路径：