weixin_43502666的博客

原创 peerDependencies 和 overrides区别

强制依赖版本：通过 overrides，你可以覆盖包的 dependencies 或 peerDependencies 中指定的版本，确保你的项目中始终使用指定版本的某个依赖。例如，假设你的项目中某些包依赖于不同版本的 react，而你希望所有包都使用相同版本的 react，你可以通过 overrides 来强制所有包使用一个版本。peerDependencies 是用来指定你包的用户需要安装某些特定版本的依赖，确保不同的包使用兼容的版本，避免版本冲突。自动安装或使用指定版本，覆盖其他包的依赖版本。

原创 ES模块（ESM）、CommonJS（CJS）和UMD三种格式

文件格式 适用环境 使用场景举例ES（.mjs） 现代浏览器、打包工具、Node.js Vue/React 项目、Vite/Rollup 构建CJS（.cjs） Node.js、传统工具链 Jest 测试、旧版 Node.js 服务器UMD（.js） 浏览器全局变量、CDN、兼容多环境 直接通过。

原创 import动态导入和require动态导入区别

而在老旧的 Node.js 项目或 CommonJS 环境中，require 是常见的选择。require：由于 require 是同步加载的，因此它会在应用启动时一次性加载所有依赖，可能会导致较长的启动时间，但在传统的 Node.js 后端应用中仍然是常见的做法。即便是动态加载同一个模块，require 会直接返回缓存的模块内容，而不会重新加载。require：是同步的，即在执行 require 时，代码会等待模块加载完成后再继续执行。可以在代码的任何地方动态加载模块，适合在运行时根据条件选择加载模块。

原创 webpack的hash值详解

在Webpack中，hash值的生成方式与Vite类似，但它有一些细微的差别。

原创 inversify

vue3 架构设计——使用 inversify 做逻辑层框架@TOC你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z重做：Ctrl/Command + Y加粗：Ctrl/Command + B斜体：Ct

原创 Windows CDM命令提示符-杀死端口且进程

原创 前端设计模式详解

参考链接： https://refactoringguru.cn/design-patterns/catalog。

原创 vite导入优化插件vite-plugin-importer

https://github.com/ajuner/vite-plugin-importer/blob/main/src/index.js

原创 webpack插件打包优化

(1)dll https://www.cnblogs.com/echoyya/p/16413591.html(2) HardSourceWebpackPlugin

原创 前端mjs和js文件区别，mjs和cjs区别---.es.js和.mjs的区别

https://www.cnblogs.com/jocongmin/p/18432236

原创 .es.js和.cjs.js和.js文件

原创 远程调试---在电脑上devtools调试运行在手机上的应用

【代码】远程调试---在电脑上devtools调试运行在手机上的应用。

原创 今天菜单菜谱

【代码】今天菜单菜谱。

原创 将扁平的菜单树型化

【代码】将扁平的菜单树型化。

原创 一共有n阶台阶,一次上1或者2有多少种可能

原创 TS中的Record和泛型和元组

1、泛型: 泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。2、元组: 数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。3、Record: Record是一个用于创建具有特定类型的键和值的对象类型的工具类型。它的语法是Record<K, V>，其中K是键的类型，V是值的类型

原创 TS在interface和type的区别

在TypeScript中，interface和type都是用来定义类型的方式(1)语法：interface 关键字用于定义接口,一般定义对象类型,可以描述对象的形状，即一个对象应该具有哪些属性和方法。interface可以声明对象应该具有的结构和属性。type 关键字用于定义类型别名。它为现有的类型起一个新的名称。type不仅可以用于对象类型，还可以用于基本类型、联合类型、元组类型和交叉类型。(2)继承和扩展性interface: 可以使用extends关键字来继承其他接口或实现多个接口，这使得

原创 蓝湖面试题---Promise简单使用---间隔n秒后输出

原创 蓝湖面试题---手写filter函数

原创 蓝湖面试题---函数被调用无数次,只执行n次

原创 js编程题

原创 Vue3中基本数据类型为什么需要.value,,,引用类型不需要.value

1、在v3中使用基本数据类型（如数字、字符串、布尔值）时，如果你希望响应式地更新数据并触发视图更新,需要使用ref包裹基本数据类型,然后将基本数据类型转化为响应式对象;- - - 因此当你使用ref包裹基本数据类型时,实际上得到的是一个包含.value属性的对象;所以我们需要通过.value属性访问和修改此基本数据类型的值;2、对于引用类型(数组和对象)不需要使用.value,因为reactive已经自动将此对象或者数组转化为响应式,可以直接对引用类型的属性进行修改，Vue会自动追踪这些修改并触发相应的

原创 html2canvas实现原理

html2canvas 是一个 JavaScript 库，可以将 HTML 元素转换为 Canvas 元素，进而实现对网页内容的截图功能。它的实现原理主要包括以下几个步骤：1、解析和构建 DOM 树：html2canvas 首先会解析网页上指定的 HTML 元素，包括文本、样式和布局等信息，并构建成一个 DOM 树的内部表示。2、计算样式和布局: 针对每个 DOM 元素，html2canvas 会计算其最终的样式和布局信息，包括位置、大小、颜色、字体等属性。3、绘制到 Canvas：html2canv

原创 vue项目实现---用户在页面没有操作5分钟时退出登录

【代码】vue项目实现---用户在页面没有操作5分钟时退出登录。

原创 测试11111

【代码】测试11111。

原创 前端开发模式

1、代理模式: 代理模式控制对对象的访问，可以起到保护对象和增强对象的作用。2、工厂模式: 工厂模式是一种创建型设计模式，用于封装对象的创建过程，通过工厂方法来实例化对象;;;一般情况下我们通过构造函数创建实例对象,我们可创建一个工厂函数专门用来创建实例对象;3、观察者模式: 观察者模式定义了一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖它的对象都会得到通知并自动更新;可以理解响应式原理当属性值改变时,观察者模式起作用,从weakMap集合中拿出依赖执行;4、单例模式: 确保一个类或者构造

原创 js将数组n等分

【代码】js将数组n等分。

原创 js标签中defer和async的区别

async和defer是用来控制脚本和执行的两个关键字1、async(1) 当浏览器遇到带有async属性的(2)当下载完成时,脚本会立即执行,不需要等待整个HTML文档解析完毕;;;所以意味着脚本的执行顺序不同于页面的出现顺序;(3)适用于独立的不依赖于页面其他内容的脚本;2、defer(1)带有defer属性的脚本会等整个文档解析完成后再执行;(2)带有多个defer属性的脚本会按照页面的文档的顺序依次执行;(3)适用于等待页面解析完成才需要执行的脚本,并且各个脚本之间的依赖关系得到满足;

原创 函数柯里化

原创 js中字符串排序

1、第一种方法2、第二种方法–使用js自带的方法localeCompare方法

原创 vue项目中监听页面滚动事件

【代码】vue项目中监听页面滚动事件。

原创 CSP（Content Security Policy）策略---内容安全策略

【代码】CSP（Content Security Policy）策略---内容安全策略。

原创 前端跨页面通信的几种方式---同源

参考链接1、LocalStorage:当 LocalStorage 变化时，会触发storage事件。利用这个特性，我们可以在发送消息时，把消息写入到某个 LocalStorage 中；然后在各个页面内，通过监听storage事件即可收到通知。2、BroadCast Channel: BroadCast Channel 可以帮我们创建一个用于广播的通信频道。当所有页面都监听同一频道的消息时，其中某一个页面通过它发送的消息就会被其他所有页面收到。它的API和用法都非常简单。3、Service Work

原创 数据大屏---＞前端实时更新数据的几种方式

参考文章:实时数据更新一、轮询:简单来说轮询就是客户端不停地调用服务端接口以获得最新的数据1、短轮询:每隔3s向服务器发送一次请求- - -请求数据优点:最大的优点就是实现简单缺点:(1)无用的请求多,客户端不知道服务端什么时候数据更新,只能不停的向服务端发送请求,(2)数据实时性差:客户端还是需要一段时间(3s)才能拿到最新的数据2、长轮询:长轮询，客户端发起请求后，服务端发现当前没有新的数据，这个时候服务端没有立即返回请求，而是将请求挂起，在等待一段时间后(一般为30s或者是60s)，发现还

原创 session和cookie的区别

session和cookie一般都是用于保持用户会话状态的技术, 主要目的是进行会话跟踪;主要区别如下:1、存储位置:(1) Cookie :存储在客户端(浏览器中),一般是字符串的形式,大小限制只有4kb;(2) Session:一般将数据存储在服务端,可以存储任意类型的数据,理论上只受内存限制;2、内容:(1) cookie一般包含在HTTP请求中,用于在客户端和服务端之间传递数据;可以存储少量的文本信息,例如登录信息–用户名、密码和用户偏好;(2)session:通常是保存在服务端的一个数

原创 webpack和vite的区别

Webpack:优点：灵活、强大、适用于复杂场景、庞大的插件生态。缺点：构建速度较慢、配置复杂、开发体验不如Vite流畅。

原创 vue组件封装注意事项

1、组件设计:(1)合理的组件结构: 将组件拆分为小的可复用部分,使每个组件只关注于自己的职责;(2)单一职责原则: 确保每个组件只负责一项功能,避免功能过于复杂;(3)可配置性: 一般通过props传参将数据传递给子组件,提供灵活的配置选项,以适应不同的应用场景;2、样式的处理(1)肯定要考虑到样式隔离,避免样式污染;(2)有时候需要制定一些主题样式(3)css变量,在裁剪组件中,我们的预览框大小需要根据我们裁剪框的大小来决定,裁剪框的大小是通过props传递的,所以需要设置CSS变量(4

原创 vue3中hooks的作用

1、将相关逻辑统一化: 通过使用Hooks,我们可以将相关的逻辑组织在一起,而并非散落在不同的生命周期钩子函数中,提高了代码的可读性和可维护性;2、促进逻辑的复用: Hooks可以被多个组件共享和复用,避免了传统的混入和继承带来的问题;3、简化了组件选项,可以使父组件选项更加简洁明了;4、提高了代码的可测试性:可以很容易的对各个Hooks进行测试;5、可以在Hooks中使用生命周期函数,更加简洁明了;

原创 前端常见的安全问题以及处理措施

1、XSS跨站脚本攻击—是一种常见的Web安全漏洞,攻击者在目标网站中通过注入恶意脚本,，当用户浏览该网页时，嵌入其中的script代码会被执行，从而达到恶意攻击用户的目的。防御措施：(1) 对所用用户提交的内容进行输入验证，包括对URL、查询关键字、HTTP请求头等验证长度、格式(2) 使用https协议(3) 后台输入的校验2. CSRF：跨站点伪造请求:攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到

原创 双指针---解决实际问题