复习点1

拉不动的猪
119 阅读11分钟

小记

1.防抖与节流

  1. 防抖经常用在输入框内的执行事件，防抖是为了防止浪费资源的多次消耗，在单位时间内，用户做同样的输入搜索时，只在设定的时间末尾进行执行搜索，当搜索完成后，开始进入下一个单位时间内执行。

  2. 节流也是为了节约资源，节流一般适用于下拉加载中，在单位时间内，无论用户执行了多少次动作，只执行一次的效 果，然后再重新计时等待下次的执行。

2. pinia会进行数据的存储，它最终存在了哪里

  1. 首先pina 是vue3推出的一款存储插件，它本身通过插件存储在localStorage**或sessionStorage**中‌，

3. pinia与vuex的区别

  1. 首先无论是vuex还是pinia都是vue推出的一种存储插件，都是用来状态管理的。

    • ‌兼容性‌：

      • ‌Vuex‌：主要用于Vue 2，虽然也可以用于Vue 3，但需要使用Vuex 4.x版本。
      • ‌Pinia‌：专为Vue 3设计，充分利用了Vue 3的Composition API，不提供对Vue 2的支持‌1。

    • ‌状态管理方式‌：

      • ‌Vuex‌：遵循单一状态树的概念，所有应用状态存储在一个全局的store中。通过actions、mutations和getters来修改和获取状态，具有严格的规则保证状态以一种可预测的方式发生变化‌1。
      • ‌Pinia‌：采用模块化的方法来管理状态，每个模块(store)都有自己的状态、操作和getters。这种方式使得代码更加分散且自包含，降低了复杂性‌1。

    • ‌异步操作处理‌：

      • ‌Vuex‌：异步操作通常需要在actions中处理，这可能导致代码相对冗长。
      • ‌Pinia‌：支持在模块中使用async/await来更轻松地处理异步操作，使代码更加清晰‌1。

    • ‌TypeScript支持‌：

      • ‌Vuex‌：在处理类型和TypeScript支持方面相对较弱，虽然可以使用TypeScript，但需要额外的工作。
      • ‌Pinia‌：专门为TypeScript设计，具有更强大的类型支持。它充分利用了Vue 3的Composition API的类型推断，使得开发者可以更容易地编写类型安全的代码‌1。

    • ‌使用场景‌：

      • ‌Vuex‌：适合大型、复杂的Vue应用，尤其是那些需要严格遵循Flux架构原则的应用。其严格性和规范性使得它成为管理复杂状态的首选‌1。
      • ‌Pinia‌：适合Vue 3项目，特别是那些希望采用Composition API进行开发的项目。Pinia的灵活性和模块化使得它成为Vue 3项目中状态管理的理想选择‌

4.vue2和vue3数据绑定的区别

  1. Vue2.0通过Object.defineProperty()方法实现双向数据绑定。它会对每一个数据属性进行劫持，通过定义getter和setter来追踪数据的变化。然而，这种方式有一些限制，例如不能对新增的属性进行响应式处理，而且需要递归遍历对象的所有属性，对性能有一定影响。
  2. Vue3.0则采用了全新的响应式系统，使用ES6的Proxy API来实现。Proxy允许开发者定义自定义行为，可以拦截和修改对对象的基本操作，从而大大简化了响应式的实现。相比于Vue2.0，Vue3.0的响应式系统更加灵活，支持更复杂的对象操作，例如新增属性、删除属性等，都可以保持响应性。

5.常见的es6语法，至少说出五种

  1. 块级作用域（let、const）

  2. 模版字符串

  3. 解构赋值

  4. 箭头函数

  5. Set 和 Map 数据结构

  6. promise

  7. async 和 await 函数

6.箭头函数和普通函数的区别

  1. 箭头函数的书写较普通函数简介，箭头函数只需要一个箭头就可以了
  2. this的指向问题，普通函数可以通过bind call apply 等改变函数的this指向，但是角头函数不行，谁用它它就指向谁。
  3. 普通函数有参数对象，而普通函数无参数对象
  4. 构造函数问题，普通函数可以作为构造函数创建实例，但是箭头函数不可以（因为作为实例要有明确的this指向，但是箭头函数不行)

7.数组去重的几种方式

  1. ‌使用Set**去重‌：这是ES6中引入的一种新的数据结构，可以直接用来去重。将数组转换为Set，Set会自动去除重复元素，然后再转回数组。这种方法代码最少，但无法保持元素的原始顺序‌12。
  2. ‌使用indexOf**去重‌：遍历数组，对于每个元素，检查它是否已经在新数组中。如果不在，就把它添加到新数组中。这种方法可以保持元素的原始顺序，但需要额外的空间来存储索引‌13。
  3. ‌使用filter**去重‌：通过遍历数组，并在filter回调函数中检查每个元素是否已经存在于新数组中。如果不在，就把它添加到新数组中。这种方法可以保持元素的原始顺序，且代码简洁易懂‌34。
  4. ‌使用reduce**去重‌：通过遍历数组，使用reduce方法将元素组合成一个新数组。在遍历过程中，检查当前元素是否已经在新数组中，如果不存在则添加。这种方法也可以保持元素的原始顺序‌34。
  5. ‌使用forEach**去重‌：类似于filter方法，但使用forEach遍历数组，并在回调函数中进行判断和添加操作。这种方法也可以保持元素的原始顺序‌4。
  6. ‌使用includes**去重‌：遍历数组，对于每个元素，检查它是否已经在新数组中。如果不在，就把它添加到新数组中。这种方法可以保持元素的原始顺序‌34。
  7. ‌使用map**去重‌：类似于forEach方法，但返回一个新数组。在遍历过程中进行判断和添加操作‌4。
  8. ‌使用sort**去重‌：首先对数组进行排序，这样重复的元素会相邻。然后遍历排序后的数组，对于每个元素，检查它是否已经在新数组中。如果不存在则添加。这种方法可以去除重复元素，但会改变元素的原始顺序‌4。
  9. ‌使用Object.keys**去重‌：创建一个对象，将数组元素作为对象的键。由于对象的键是唯一的，这样可以去除重复元素。这种方法也可以去除重复元素，但会改变元素的原始顺序‌4。

8.单点登录

前端几种常见的登录方式：

  • Session
  • Token
  • Oauth 第三方登录
  • SSO 单点登录
  • 多因素认证

1、 基于会话（Session）的认证

特点：服务端存储 SessionId

1.1 实现流程

  1. 用户提交登录表单，包含用户名和密码。
  2. 服务器验证凭证，如果凭证正确，则创建一个新的会话，并生成一个唯一的会话 SessionId。
  3. 服务器将 SessionId 作为HTTP响应的一部分（通常是设置在Cookie中）返回给浏览器。
  4. 浏览器将 SessionId 保存在Cookie中，后续的请求会自动带上这个Cookie。
  5. 服务器通过Cookie中的 SessionId 识别用户身份，处理请求。

1.2 优缺点

优点：

  • 相对简单易懂，易于实现。
  • 服务器控制会话，可以主动管理用户的登录状态，如主动让用户登出。

缺点：

  • 随着用户量的增加，服务器需要维护更多的会话状态，可能对服务器资源和性能造成压力。
  • 如果服务器端是一个集群，为了同步登录态，需要将 SessionId 同步到每一台机器上，增加了服务器端维护成本
  • 需要使用安全措施防范会话劫持和固定会话攻击

1.3 应用场景

适用于单一服务器、用户量不大的小型网站或内部系统

2、基于Token的认证（如JWT）

特点：浏览器存储 token

2.1 实现流程

  1. 用户提交登录表单，包含用户名和密码。
  2. 服务器验证用户凭证，如果凭证正确，生成包含用户信息的Token（如使用JWT格式）。
  3. 服务器将Token返回给前端。
  4. 前端存储Token（通常在LocalStorage、SessionStorage或内存中）。
  5. 后续请求携带Token（通常在HTTP请求头的Authorization字段）。
  6. 服务器校验Token，如果有效，处理请求并返回资源。

2.2 优缺点

优点：

  • 服务端不需要维护用户状态，所以不会对服务器造成压力
  • 无状态，适合分布式系统，方便横向扩展
  • Token能够包含过期时间和权限信息，更加灵活

缺点：

  • Token如果被盗用，则攻击者可以得到和用户相同的权限。
  • Token一旦签发，在有效期内一般无法在服务端使其失效

2.3 应用场景

  • 服务需扩展到多个服务器，或后端服务为微服务架构。
  • 适合需要单页面应用（SPA）的认证和前后端分离的项目

单点登录的两大类别，相同的根域名不同的子域名，不同的域名

image.png

9.单页面与多页面的优缺点

  1. ‌页面加载方式‌：

    • ‌SPA‌：在初始加载时，SPA只加载一个HTML文件和相关的JavaScript、CSS等资源。用户在与应用交互时，通过前端路由（如hash或history模式）进行页面切换，仅加载和更新相关组件，不会重新加载整个页面‌12。
    • ‌MPA‌：每个页面都有独立的HTML文件和资源。用户每次切换页面时，都需要重新加载整个HTML页面及其相关资源，包括JavaScript和CSS等‌12。

  2. ‌用户体验‌：

    • ‌SPA‌：用户体验较好，页面切换时只是局部刷新，不会造成视觉上的闪烁，且可以实现转场动画，提升用户体验‌12。
    • ‌MPA‌：页面切换需要重新加载整个页面，用户体验较差，且无法实现转场动画，每次切换都是白屏‌12。

  3. ‌数据交互‌：

    • ‌SPA‌：通过AJAX异步获取数据，组件之间数据传递方便，可以实现实时更新‌13。
    • ‌MPA‌：数据传递不方便，通常通过URL参数、Cookie或本地存储等方式进行数据传递‌13。

  4. ‌搜索引擎优化（SEO） ‌：

    • ‌SPA‌：由于SPA依赖于JavaScript渲染页面内容，搜索引擎爬虫可能无法完全抓取所有内容，因此SEO优化较为困难‌13。
    • ‌MPA‌：每个页面都有独立的HTML和内容，搜索引擎更容易抓取和索引，SEO优化相对容易‌13。

  5. ‌开发成本和维护成本‌：

    • ‌SPA‌：开发成本较高，需要使用框架如React、Vue等，但维护成本较低，因为组件化和单向数据流的设计模式提高了代码的可维护性和复用性‌14。

一般来说，单页面应用各种系统，多页面主要是利用在官网等方面，主要是利用seo优化

10.浏览器输入地址到输出页面流程

  • 一、输入网址：输入要访问的网址，即URL。

  • 二、缓存解析：浏览器获取到输入的URL后，会先去缓存中查找资源（提高查询速度）。它按照从浏览器缓存→系统缓存→路由器缓存中逐步进行查看，如果有就从缓存中显示界面，则不再发送请求；如果没有，则发送http请求。

  • 三、域名解析：当发现缓存中不存在资源时，则发送http请求。在发送http请求之前，需要进行DNS域名解析（DNS域名解析：域名到IP地址映射的过程，域名的解析由DNS服务器来完成，解析后便可以获得域名对应的IP地址）。

  • 四、TCP连接：三次握手在域名解析之后，浏览器向服务器发起了http请求request，而http的底层就是使用的TCP连接。TCP译为传输控制协议，它是面向连接的，所以在传输数据前必须建立连接，也就是常说的三次握手。TCP连接建立后，浏览器开始向服务器发送http请求报文。

  • 五、收到请求：服务器收到浏览器发送的请求信息，返回响应response。

  • 六、页面渲染：浏览器收到服务器发送的响应，显示页面内容。

avatar
文章
阅读
粉丝