查缺补漏

[mileOfSunshine]

? MVC

• Controller（控制器） 负责将 Model（模型） 数据用 View（视图） 显示出来

? MVVM

• 视图数据双向绑定，数据驱动视图。
• VM: 双向绑定。模型 -> 视图：数据绑定；视图 -> 模型：DOM 事件监听。
• 严格要求：View 与 Model 不能直接通信。
• MVC 与 MVVM 最大的区别是：它实现了 Model 和 View 的自动同步，无需手动操作 DOM。
• Vue 并未完全遵循 MVVM：它提供了 $refs 属性，让 Model 可以直接操作 View。

? Vue2.x 响应式数据原理

• 数据劫持 + 观察者模式，vue2数据响应式实现根据对象类型做不同处理
• 『对象』则通过Object.defineProperty(obj,key,descriptor)拦截对象属性访问
• 『数组』则覆盖数组的7个变更方法实现变更通知
• 问题：
  • 初始化时需要遍历对象所有key，如果对象层级较深，性能不好
  • 通知更新过程需要维护大量dep实例和watcher实例，额外占用内存较多
  • 动态新增、删除对象属性无法拦截，只能用特定set/delete api代替
  • 不支持新的Map、Set等数据结构

? Vue3.x 与 Vue2.x 响应式原理的区别

• Vue3.x 使用 Proxy 来代替 Vue2.x 的 Object.defineProperty。
• Proxy 能直接监听对象和数组的变化，并且多大13种拦截方法。
• 可以同时支持object和array，动态属性增、删都可以拦截，新增数据结构均支持，对象嵌套属性运行时递归，用到才代理，也不需要维护特别多的依赖关系，性能取得很大进步。

? 虚拟 DOM

• 频繁操作 DOM 会产生性能问题。 虚拟 DOM 本质是用一个原生 JS 对象来描述 DOM 节点，是对真实 DOM 的一层抽象。
• 优点：保证性能下线；无需手动操作 DOM；跨平台
• 缺点：无法极致优化；首次渲染，因多一层虚拟 DOM 计算，会比 innerHTML插入慢

?v-for 加 key

• 不使用 key：最大限度减少动态元素、尽可能就地修改/复用同类元素（算法）
• 使用 key：为了 diff 更准确、更快速

?Vue.mixin

• 使用场景：不同组件中，相同或者相似的代码，代码功能相对独立。
• 原理：类似于“对象的继承”，组件初始化时会调用 mergeOptions 方法进行合并，采用策略模式针对不同的属性进行合并。

? nextTick

• 使用场景：修改数据之后立即使用这个方法获取更新后的DOM
• 原理：采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法。vue有个批量、异步更新策略，数据变化时，vue开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。然后在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

? 自定义指令

• 本质上是装饰器，是 vue 对 HTML 元素的扩展。

? 函数式组件

• 优点：
  • 1、由于函数式组件不需要实例化、无状态、没有生命周期，所有渲染性能好于普通组件；
  • 2、函数式组件结构比较简单、代码结构更清晰
• 使用场景：一个简单的展示组件（eg: router-view）; “高阶组件”

? vue-router 常用路由模式

• hash 模式：
  • hash不会包含在 HTTP 请求中，对后端完全没有影响，改变 hash 不会重新加载页面
  • 可为 hash 改变添加监听事件，实现前端路由“更新视图但不重新请求页面”的功能
  • 兼容性好，不美观
• history 模式
  • 利用新增的 pushState() 和 replaceState() 方法。来实现单页应用前端路由“更新视图但不重新请求页面”的功能
  • 美观，但刷新404，需后端配置

[mileOfSunshine]

? 从输入URL开始建立前端知识体系

1. 输入 URL
   • 组成：协议、主机、端口、路径、查询参数、锚点
   • HSTS：强制客户端使用 HTTPS 访问页面
2. 查找（浏览器）缓存 【304过程】
   • 根据请求头 expires & cache-control 是否命中强缓存策略
   • [命中]，从缓存获取资源，显示页面
   • [没命中]，根据请求头 If-Modified-Since（Last-Modified） & If-None-Match（ETag） 是否命中协商缓存
   • [命中]，从缓存获取资源，显示页面（返回304）
   • [没命中]，从服务端获取资源
3. DNS 域名解析
   • 递归查询（浏览器缓存 ⇌ 操作系统 ⇌ 路由器缓存 ⇌ ISP代理）
   • 迭代查询：客户端（根据局部DNS浏览器提供的服务器信息）不断的向这些服务器查询，直到查到位置
   • DNS 负载均衡
   • DNS 预解析：减少页面卡顿
4. 建立 TCP 连接：三次握手
5. 发起 HTTP 请求
6. 服务器响应请求并返回结果
7. 浏览器渲染：
   • 构建 DOM 树
   • 构建 CSS 规则树
   • 构建 render 树
   • 布局（Layout）
     • 重排/回流：几何、位置
   • 绘制（Painting）
     • 重绘：外观
8. JS引擎解析过程：
   • 创建 window 对象
   • 加载文件：语法和词法是否合理
   • 预编译： 寻找全局变量声明和全局函数声明
   • 解释执行：变量赋值、函数执行（将函数的环境推入到一个环境的栈中，执行完成后再弹出，控制器交还给之前的环境）
9. 关闭 TCP 连接

[mileOfSunshine]

? Babel编译过程

• Babel 一个 JavaScript 编译器。用于将使用 ES2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能运行在当前和旧版本的浏览器环境中
• 本质上是操作 AST 来完成代码转译
• 编译三步骤：
  • 解析：源码 -> AST
  • 转换：利用 Babel 插件，高版本语法 -> 低版本语法
  • 生成：AST -> 低版本代码

[mileOfSunshine]

? 防抖

• 事件在被触发 n 秒后执行，若在 n 秒内被触发，则重新计时。
• 类比：法师发技能的时候要读条，技能读条未完再按技能就会重新读条。
• 场景：
  • search 搜索联想
  • window 触发的 resize

function debounce(fun, wait) {
  return function() {
    clearTimeout(fun.id)
    fun.id = setTimeout(() => {
      fun.apply(this, arguments)
    }, wait)
  }
}

? 节流

• 规定一个单位时间内只能触发一次函数，若这个单位时间内触发多次函数，只有一次生效。--- 间隔时间执行
• 类比：fps游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。
• 场景：
  • 鼠标不断点击触发
  • 监听滚动事件（例如滑底加载更多）

// 时间戳实现
function throttle(fun, wait) {
  let t1 = 0
  return function() {
    let t2 = +new Date()
    if (t2 - t1 >= wait) {
      fun.apply(this, arguments)
      t1 = t2
    }
  }
}

// 定时器实现
function throttle(fun, wait) {
  return function() {
    if(!fun.id) {
      fun.id = setTimeout(() => {
        fun.id = null
        fun.apply(this, arguments)
      }, wait)
    }
  }
}

[mileOfSunshine]

? for...in & for...of

• for...in
  • 遍历得到 key
  • 用于 可枚举 数据
  • 对象、数组、字符串
• for...of
  • 遍历得到 value
  • 用于 可迭代 数据
  • 数组、字符串、Map、Set

[mileOfSunshine]

? require & import

• require
  • require & exports/module.exports 是 CommonJS 标准，适用于 Node.js
  • 赋值过程，运行时执行
• import
  • import & export 是 ES6标准，适用于 React、Vue
  • 解构过程，编译时执行，编译时可进行 tree shaking

[mileOfSunshine]

? 【vue】computed & watch

• computed
  • 支持缓存（基于响应式数据【data、props】进行缓存），只有依赖数据改变才会重新计算
  • 不支持异步
  • 函数get，set
• watch
  • 不支持缓存，数据【data、props】变则触发
  • 支持异步

[mileOfSunshine]

? Promise

• 作用
  • 解决回调地域
  • 异步问题
  • 并发请求
• 特性
  • Promise 状态一经改变就不能再改变了
  • .catch 不管连接那里，都能捕获上层未捕获的错误
  • 在 Promise 中，返回任意一个非 promise 的值都会包裹成 promise 对象，例如 return 2 会被包裹成 return Promise.resolve(2)
  • .then 和 .catch 都会返回一个新的 Promise
  • Promise 的 .then 或者 .catch 可以被调用多次，但如果 Promise 内部的状态一经改变，并且有了一个值，那么后续每次调用 .then 或者 .catch 的时候都会直接拿到该值。
  • .then 或 .catch 返回值不能是 promise 自身，否则会造成死循环
  • .then 或 .catch 的参数期望值是函数，传入非函数则会发生值透传
  • .then 或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不被后续 .catch 捕获到
  • 在 Promise 中抛出错误只能是：return Promise.reject(new Error('error!!!')) 或者 throw new Error('error!!!')
  • .then 函数中两个参数，第一个参数处理 Promise 成功的函数，第二则是处理失败的函数
  • .finally 方法也是返回一个 Promise，他在 Promise 结束的时候，无论结果为 resolved 还是 rejected，都会执行里面的回调方法

[mileOfSunshine]

? 模块化

• 定义：解决一个复杂问题时自顶向下，逐层划分为若干模块的过程。
• 优点
  • 避免命名冲突
  • 更好的分离，按需加载
  • 更高复用性
  • 高可维护性
• 规范：
  • CommonJS
  • 服务端、同步加载
  • 模块输出是一个值的拷贝（浅拷贝）
  • 运行时加载
  • AMD（require.js）
  • 浏览器、异步加载、开发成本高、可读可写性比较困难
  • CMD（sea.js）
  • 浏览器、异步加载、依赖就近、使用时才会加载执行
  • ES6
  • 实现简单、可取代 CommonJS 和 AMD
  • 动态引用、不缓存值，模块里的变量绑定其所在模块
  • 编译时输出接口
  • 设计思想：静态化。使得编译时就能确定模块的依赖关系，以及输入和输出的变量

[mileOfSunshine]

? Web Worker

• 作用：
  • 为 JavaScript 创造多线程环境，允许主线程创造 Worker 线程；
  • Worker 线程可负担计算 高密集 或 高延迟 任务；
  • 主线程和 Worker 线程 互不干扰
• 特点
  • 同源限制
  • DOM 限制
  • 通信联系
  • 脚本限制
  • 文件限制

https://juejin.cn/post/7091068088975622175

类型	Worker	SharedWorker	ServiceWorker
概述	-	共享数据的 Worker	作为 Web 应用程序、浏览器、网络之间的 代理服务
通信方式	postMessage	port.postMessage	单向通信，通过addEventListener 监听serviceWorker 的状态
使用场景	适合大量计算的场景	适合跨 tab、iframes之间共享数据	离线缓存、消息推送和网络代理
兼容性	>= IE 10>= Chrome 4	不支持 IE、Safari、Android、iOS>= Chrome 4	不支持 IE>= Chrome 40

[mileOfSunshine]

webpack

• 模块打包流程：

  • 读取 webpack 配置文件
  • 启动 webpack，创建 Compiler 对象并开始解析项目；
  • 从入口文件开始解析，并找到其导入的依赖模块，递归遍历，生成依赖树；
  • 不同类型的文件用对应的 Loader 进行编译，转换成 JavaScript 文件；
  • 整个过程 webpack 会通过发布订阅模式，向外抛出一些 hooks，webpack 插件可监听这些事件节点，执行插件事件从而干预输出结果

• 两个核心对象：

  • compiler：暴露 webpack 的生命周期相关的钩子
  • compilation：暴露与模块和依赖有关的粒度更小的事件钩子

• Loader 文件转换

  • 在打包过程中，会把默认遇到的文件当成 JavaScript 代码进行解析。因此当项目遇到非 JS 文件时，我们需要先将其进行转换，才能继续执行打包。这就需要 Loader 机制。
  • 对代码进行 polyfill（兼容）
  • 编译转换浏览器不支持的文件格式
  • loader 配置：每个类型文件，loader 都支持数组形式配置多个，因此 webpack 在转换改类型文件时，会按顺序链式调用每个 loader ，前一个 loader 的返回内容会是下一个 loader 的入参。
  • loader 开发需遵循：
  • 返回值必须是标准的 JS 代码字符串，以保证下个 loader 能正常运行
  • 需遵循“单一”职责，只关心 loader 的输入和输出
  • loader 的 this 由 webpack 提供，获取当前 loader 所需的各种信息

• Plugin 功能扩展

  • webpack 基于发布订阅模式，在运行的生命周期过程中会广播许多事件，插件通过监听事件，就可以在特定阶段执行插件任务，实现对应功能
  • plugin 开发需遵循：
  • 插件必须是一个函数或是一个包含 apply 方法的对象，这样才能访问到 compiler 对象；
  • 传给插件的 compiler 和 compilation 对象都是同一引用，若修改则会影响后面插件；
  • 异步的事件需要插件在处理完任务后调用回调函数通知 webpack 进入下一个流程，不然会卡死

[mileOfSunshine]

？前端工程化

• 围绕代码处理的一系列工具链，他们把代码当做字符串处理，不关心代码的内容，包括
  • 编译打包
  • 静态分析：Eslint、Stylelint
  • 格式化：prettier
  • CI/CD
  • 代码组织方式：monorepo
  • IDE

[mileOfSunshine]

forEach是不能阻塞的，所以请求是并发，串行请求可使用：

• for循环或是for of
• promise链式
• reduce asysc await