JS设计模式-策略模式
JS设计模式大合集 仓库地址：JS设计模式大合集欢迎大家 Star ，一起交流学习！
策略模式是个啥策略模式（Strategy Pattern）是一种常见的设计模式，它允许在运行时选择算法的行为。这种模式使得算法可以独立于其使用者而变化。在JavaScript中，策略模式经常用于将一组算法封装成独立的对象，并且使它们在需要时可以相互替换。
理解策略模式策略模式通过定义一系列的算法，将它们封装成独立的策略对象，然后在运行时根据需要选择适当的策略对象。这种方式可以使得算法的变化独立于使用算法的客户端代码。策略模式通常包含以下角色：
环境（Context）：环境类包含一个对策略对象的引用，并且可以在运行时切换不同的策略对象。
策略接口（Strategy Interface）：定义了一组算法的接口，所有具体策略类都实现了该接口。
具体策略（Concrete Strategy）：实现了策略接口的具体算法。
举个例子可能理论说的还是一头雾水，下面我们通过简单的例子来理解策略模式。
例如，我需要一个通用的算法，用来计算图像的面积。那么假设图像分别有：
圆形（circle）
方形（recta ...
JS设计模式-单列模式
JS设计模式大合集 仓库地址：JS设计模式大合集欢迎大家 Star ，一起交流学习！
JS设计模式-单列模式单列模式（Singleton pattern）是一种常见的设计模式，用于限制一个类只能有一个实例，并提供一个全局访问点来获取这个唯一实例。换言之，你只能创建一个特定类的对象。如果你尝试创建一个已存在的实例，那么它将始终返回你已创建的那个实例。这种模式特别适合需要保持状态的场合，例如
数据库连接
日志记录
VUEX
或者任何其他可能需要多个地方更新的数据
来写一个单列模式吧如我们上面所说，单列模式只有一个实例，并且提供一个全局的访问点来访问获取这个唯一实例。因此，也就是私有属性。在js中，我们可以利用闭包来做私有属性。
1234567891011121314151617181920212223242526272829303132333435363738type myInstance = { name: string; showMessage: () => void;};const Singleton = (function () ...
JS设计模式-发布订阅者模式
JS设计模式大合集 仓库地址：JS设计模式大合集欢迎大家 Star ，一起交流学习！
JS设计模式-发布订阅者模式如果你用过VUE、React， 你应该对这个发布者订阅者模式不陌生，明天让我们来一起来探讨一下发布订阅者模式。
什么是发布订阅者模式在我们日常生活中，其实有很多发布订阅者模式案例。
我们在微信里面订阅了一个公众号，这个公众号 在某一个时间阶段会给我发推文。
在电商平台预约一个商品，等商品有货时，平台会给我们发短信通知。
点一个外卖。……
等等数不胜数。
不过从上面的例子，我们可以 提取出三样东西， 一个是订阅者，一个是平台，一个是发布者。
订阅者会向平台订阅属于自己的个性需求， 平台则会收集这个需求， 发布者就会根据这个需求发布对应的内容， 在此之后，平台会把发布者发布的内容推送到订阅者。
好了，有了这三个基本接下来我们可以开始创造属于我们自己的发布订阅者模式啦。
创建一个发布订阅模式首先我们需要一个平台，它可以记录订阅者的需求，以及让发布者能够根据需求发布的功能：
123const platform = { eventPool:{ ...
Javascript操作符运算合集
Javascript操作符运算合集在javascript的语法中，不同类型通过操作符运算后求最终值这样的运算，在面试过程中会经常碰到，因此，今天我们就来一起探讨一下对应的规则。
四则运算符+ 加法加法有两种运算法则，分别为数字加法和字符串连接。运算时，它首先将两个操作数强制转换为基本类型后再计算。我们来一一举例：
若有一方是字符串，则另一方会被转换成字符串，最后再连接起来形成新的字符串。
1234const str = 'chuyuxuan'const num = 1console.log(str + num) // chuyuxuan1typeof (str + num) // 'string'
若双方都是 BigInt，则执行 BigInt 加法。如果一方是 BigInt 而**另一方[1]**不是，会抛出 TypeError。
12345678910// 双方都是 BigIntconst bnum1 = 2024nconst bnum2 = 2025nconsole.log(bnum1 + bnum2) // 4049ntypeof ...
vue源码阅读-Object.defineProperty
在vue2中，这个 js 原生API就是整个vue2的核心了。
我们先来看一下官方文档对该属性的描述：
Object.defineProperty() 允许精确地添加或修改对象上的属性。
Object.defineProperty的语法如下：
1Object.defineProperty(obj, prop, descriptor)
下面是它的参数介绍：
obj要定义属性的对象。
prop一个字符串或 Symbol，指定了要定义或修改的属性键。
descriptor要定义或修改的属性的描述符。
不知道你是不是有这样的疑问，descriptor 到底是个啥?这里呢，我们来了解一下：
对象的属性描述符是一个用于描述对象属性特性的配置对象，它包含以下可选属性：
value: 属性的值，默认为 undefined。用于设置属性的初始值。
writable: 布尔值，默认为 false。如果为 true，则属性的值可以被修改，否则为只读属性。
enumerable: 布尔值，默认为 false。如果为 true，则属性可以通过 for...in 循环和 Object.keys ...
如何优雅的甩锅BUG
BUG归属地判断在前后端分离的项目中，如何判断是前端BUG还是后端BUG？其实方法很简单，我们打开浏览器的控制台（图1）就可以一目了然了。
图 1
判断前后端BUG，我们主要看Network[网络]选项卡，如图2方框所标注的。通过网络的传值，我们就可以知道个大概了。图2介绍了部分功能项
图 2
接下来，让我们以BUG为例。例如，在页面中存在这样的BUG，当我们改变了一个表单值，并且点击保存。但是我再打开这个表单，发现这个值没有更新。
图 3
我们就可以看接口来判断是前端问题还是后端问题了。
首先，保存时是会调用保存接口的，我们看看前端有没有把清空后的值传过去。如图4 所示，值已经传过去了。
图 4
我们再看看查询接口，后端有没有把正确的值更新回来。如图5所示.
图 5
接口返回回来的值确是旧值，好啦，原因找到了，是因为前端传过去的值后端没有更新，然后返回的还是旧值，所以我们可以判断，这个BUG是后端的BUG
类似的，如果后端返回过来的值更新了，有想要的值，但是前端没有更新或者渲染，就是前端的BUG啦。
如何拿到选项的label
如何拿到选项的label在我们的日常开发中，下拉框获取值是一个很常见的业务方法。
基本上都是拿到代码里的value，如果有一天，我需要label的值该如何拿到呢？
这里提供几个方法：
方法1通过find函数去过滤对应的label，具体方法如下：
123456789101112<script setup>import { ref } from 'vue'const value = ref('')let obj = ref({})const getLabel = (value) => { console.log(value) obj = options.find((item) => { return item.value === value }) console.log(obj.label)}</script>
这里通过find 找到了对应的值。
方法2我们可以直接通过绑定值拿label，具体方法如下：
123 ...
win设置同时链接内外网
需求我需要访问内网的几个固定IP。例如 10.76.55.43，172.89.45.2。等等，但是内网链接好后，无法访问互联网，不利于开发的效率提升。故此，现需求如下：
通过网线走内网访问固定IP的服务。
通过Wi-Fi走外网访问互联网。
思路其实思路很明确，只要你访问内网服务，就直接路由到内网即可，其余的一律走外网。所以，我们只要简单的改一下路由表配置就行。
1.断开网线链接当然，你可以物理意义上的把网线给拔掉。或者，直接禁用网络。
2.链接WiFi找网关首先，点一下Wi-Fi链接，我们需要找到你WiFi的网关。链接好后，输入
1ipconfig
找到你WiFi那列，找到网关（gateway），记录下来这个地址，例如192.168.8.1。
⚠️下面也是基于这个网关而写的，你需要换成你自己的
输入
1route print -4
查看接口列表，找到你的有线网卡和无线网卡的接口数字，例如我的如下
12345678910111213141516171819202122232425============================================= ...
尝试配置一下简单的webpack?
准备1.需要安装node.js，当前教学版本为v12.22.12
2.一个IDE，这里使用vs code ，当前版本为v1.70.2。
初始化一个项目在一个位置，我们新建一个文件夹，并且进入该文件夹。
12mkdir webpack_studycd webpack_study
初始化一个node项目。
1npm init -y
此时，在该目录下会有一个package.json文件
12.└── package.json
我们在根目录创建三个文件index.html,index.js,outside.js。
12345.├── index.html├── index.js├── outside.js└── package.json
index.html内容如下：
1234567891011121314151617<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>index</ti ...
ReactHook之useState
React的Hook之useState我们在写Vue时，组件从挂载到卸载有初始化前后，更新前后，卸载前后这样的三种类型的生命周期，当然，在这里面，还有更细的分类，这里就不再一一例举了。作为目前前端主流框架的React，也有如此类似的生命周期。
试想一下，这么多的状态，如果我要获取一个值，时而把它清空，时而有需要加载，时而更新，想想头都大了，有没有一种方法，能够智能的管理这个值的去留问题呢？
欸！还真有，这个就是今天要介绍的React中好玩的Hook。
什么是Hook呢？我们先来看看官方的定义：
Hook 是一些可以让你在函数组件里“钩入” 生命周期等特性的函数。
Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。
不妨我们先从代码入手，来看看什么是hook。在React中有两种组件，一种是函数组件，另一种则是类组件。组件内部当然是需要自身使用的值，那么我们可以把这些值叫做state。我们先来看一下代码：
12345678910111213141516171819//不使用hook的类组件class Example extend ...