你是否曾经在JavaScript代码中迷失过？是否曾经感到自己的代码像一团乱麻？别担心，这就是我们需要设计模式的时候了！让我们一起探索这些神奇的模式，让你的代码变得像个天才！ 序言总体来说设计模式分为三大类： 创建型模式： 工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。 结构型模式： 适配器模式、装饰模式、代理模式、外观模式、桥接模式、组合模式、享元模式。 行为型模式： 策略模式、模

Vue3 面试题总结1. OptionsAPI 与 CompositionAPI 的区别？ OptionsAPI： 选项式API，通过定义data、computed、watch、method等属性与方法，共同处理页面逻辑； 缺点： 当组件变得复杂的时候，导致对应属性的列表也会增长，可能会导致组件难以阅读和后期维护成本变高； CompositionAPI： 组合式API，组件根据逻辑功能来组

【导读】本文总结了前端面试中经常问到的vue高频面试题，仅供参考。 下图为思维导图： 1.vue的生命周期有哪些及每个生命周期做了什么？beforeCreate是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。 created在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更

前言这个问题想必很多朋友都遇到过，我再详细说一下场景！ 如 Boss 搜索框所示： 先输入1 再输入2 再输入3 再输入123  请求参数依次为：1 12 123 123123 请求参数通过右侧的 query 参数也可以看到，一共请求了四次。 不难发现，这里已经做了基本的防抖，因为我们连续输入123的时候，只发了一次请求。 好了，现在看完基本场景，我们回到正题！ 从上面的演

WebSocket简介WebSocket是一种在客户端和服务器之间实现双向通信的网络协议。它通过在单个TCP连接上提供全双工通信功能，使得服务器可以主动向客户端推送数据，而不需要客户端发起请求。 WebSocket与HTTP的区别与传统的HTTP协议相比，WebSocket具有以下几个显著的区别： 双向通信：WebSocket支持客户端和服务器之间的实时双向通信，而HTTP协议是单向请求-响应模

在vue3中$on，$off 和 $once 实例方法已被移除，组件实例不再实现事件触发接口，因此大家熟悉的EventBus便无法使用了。然而我们习惯了使用EventBus，对于这种情况我们可以使用Mitt库（其实就是我们视频中讲的发布订阅模式的设计） 1.安装 1npm install mitt -S 2.main.ts 初始化全局总线，vue 入口文件 main.js 中挂载全局属性 123

Flex 布局教程：语法篇作者： 阮一峰 日期： 2015年7月10日 网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目

Flex 布局教程：实例篇作者： 阮一峰 日期： 2015年7月14日 上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。 你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局骰子的一面，最多可以放置9