Ant-Design-Vue 中，在调用RangePicker时，要求限制最大值、最小值，以及间隔，时分秒也需要限制2025-03-23 09:51:57
一. 需求描述
最近在进行项目开发过程中，由于业务要求，需要：
要求限制最大值、最小值，以及间隔，时分秒也需要限制
需要考虑到：
年月日限制、时分秒限制
最大间隔时间（天）
当选择开始时间时，结束时间的最大时间
当选择结束时间是，开始时间的最小值
如果已经赋值了，重新选择时，也要满足上述要求
<br />
二. 完整代码
由于项目中，一个页面日期选择动态生成，不确定含有多少了个，所以封装了一个日期组件。
info 属性格式：
{
min: {
value: "2025-01-12 06:30:30"
},
max: {
value: "2025-01-31 08:20:00"
}echarts 地图时，城市地理数据中没有南沙群岛，为啥会显示南沙群岛2025-02-19 09:55:42
一. 问题
在进行 echarts 地图开发时，显示云南省地图，但是显示内容中会包含南沙群岛。
二. 产生原因
经检查，map 字段是 "china" 这样全都是小写的会默认添加南海诸岛。
三. 解决方法
地理数据名称重新起一个不是 china 名字。
如下：
mapCharts.setOption({
series: [
{
type: "map",
map: "chinaYunNan",
},
],
});
please specify container or renderCanvas!2025-02-18 14:47:39
一. 问题
在 Vue 项目中引入 VisActor 时，报：please specify container or renderCanvas!
具体错误信息如下：
App.vue:13 Error: please specify container or renderCanvas!
at Object.onError (vchart.js:246:15)
at new VChart (vchart.js:296:572)
at init (index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&JSX 元素隐式具有类型 "any",因为不存在接口 "JSX.IntrinsicElements"2025-02-13 13:33:03
一. 问题
在 vue3 中使用 tsx 时，遇到了报错提示：JSX 元素隐式具有类型 "any",因为不存在接口 "JSX.IntrinsicElements"。
二. 解决方法
查询 tsconfig.json 中配置，并修改如下：
{
"jsx": "preserve",
"jsxImportSource": "vue",
}
详细介绍JavaScript中的深拷贝、浅拷贝2025-02-11 11:18:41
在 JavaScript 中，深拷贝（Deep Copy） 和 浅拷贝（Shallow Copy） 是两种常见的对象复制方法，它们的区别主要在于如何处理对象中的引用类型数据（如对象、数组等）。
一. 浅拷贝（Shallow Copy）
浅拷贝是一种复制对象的方式，它只会复制对象的第一层属性。如果对象的某个属性是引用类型（例如对象或数组），浅拷贝只是复制了这个属性的引用对象（内存地址），而不是它的值。这意味着，拷贝对象和原始对象中的引用类型数据会共享同一个内存地址，修改拷贝对象中的引用类型数据时，会影响原始对象，反之亦然。
浅拷贝的常见方式：
1. Object.assign()
const obj1 = { a: 1, b: { c: 2 } }
const obj2 = Onpm unpublish 删除包2025-02-08 14:39:13
npm unpublish 是 npm（Node Package Manager）命令，用于从 npm registry 中删除一个已发布的包。通过执行该命令，用户可以将自己发布到 npm 上的包完全删除，或者删除某个版本的包。
一. 基本用法
1. 删除整个包
如果你想删除整个包，可以直接使用 npm unpublish 命令并指定包的名称：
npm unpublish <package-name> --force
<package-name>：是你要删除的包的名称。
--force：这个标志是必须的，否则在发布后的24小时内，npm 默认不允许删除包，以避免破坏依赖关系。
注意：删除整个包会影响到所有依赖此包的项目，因此通常不推荐在公共的、广泛报错：Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined...2025-01-24 17:05:44
一. 问题
Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle。
二. 问题解析
这个警告出现在你使用 Vue 的 ESM（ECMAScript Modules）打包版本 时，VuInternal server error: [less] Inline JavaScript is not enabled. Is it set in your options?2025-01-06 09:50:58
一. 问题
在进行组件库开发时，添加 ant-design-vue 的 less 文件时，报：Internal server error: [less] Inline JavaScript is not enabled. Is it set in your options?
具体错误信息：
[vitepress] Internal server error: [less] Inline JavaScript is not enabled. Is it set in your options?
Plugin: vite:css
File: C:/Users/guoyongqi/Desktop/jr/jr-design/node_modules/ant-design-vue/es"this" 隐式具有类型 "any"，因为它没有类型注释。(“this” implicitly has type “any” because it does not have a type annotation )2025-01-01 20:14:12
一. 问题
"this" 隐式具有类型 "any"，因为它没有类型注释。
“this” implicitly has type “any” because it does not have a type annotation 。
二. 解决方案
将 this 放在函数参数列表上声明类型即可，使用的时候 this 不会干扰形参传入顺序。如下：
const fn = () => {
return function (this: any, ...args: any[]) {
return this;
};
};
解决 failed, reason: connect ECONNREFUSED 127.0.0.1:7890（xxx）2024-12-26 10:29:38
一. 问题
最近在进行 npm install 下载，以及本地启服务等时，会报错：
FetchError: request to xxx failed, reason: connect ECONNREFUSED 127.0.0.1:7890
具体错误信息
npm ERR! code ECONNREFUSED
npm ERR! syscall connect
npm ERR! errno ECONNREFUSED
npm ERR! FetchError: request to xxx failed, reason: connect ECONNREFUSED 127.0.0.1:7890
npm ERR! at ClientRequest.<anonymous&g深入理解JS函数去抖2024-12-23 17:07:37
一. 基本定义
去抖（Debounce）是指当持续触发事件时，只在指定时间间隔内的最后一次触发生效。其他期间的触发会被忽略。这通常用于搜索框输入时，用户停止输入一段时间后开始搜索，防止因为用户的快速输入导致不必要的资源消耗。
在JavaScript中，可以使用定时器（setTimeout）来实现去抖功能。
二. 自定义函数
在 JavaScript 中，创建自定义的 debounce 函数是一个非常常见的需求，特别是为了优化高频触发事件的性能。以下是如何实现一个自定义的 debounce 函数，以及对其工作原理的详细解释。
1. 自定义 debounce 函数
function debounce(func, delay = 500) {
let timeoutId; // 存SQL BETWEEN AND 操作符2024-12-18 23:52:16
一. 基本定义
在 SQL 中，BETWEEN 操作符用于筛选某个范围内的数据。它可以用于数值、文本或日期。AND 关键字与 BETWEEN 一起使用，定义范围的上下限。
请注意，在不同的数据库中，BETWEEN 操作符会产生不同的结果！
请检查您的数据库是如何处理 BETWEEN 操作符！
在某些数据库中，BETWEEN 选取介于两个值之间但不包括两个测试值的字段。
在某些数据库中，BETWEEN 选取介于两个值之间且包括两个测试值的字段。
在某些数据库中，BETWEEN 选取介于两个值之间且包括第一个测试值但不包括最后一个测试值的字段。
1. 基本语法：
SELECT column1, column2, ...
FROM table_name
WHERE columnSQL IN 操作符2024-12-11 22:47:29
一. 基本定义
在 SQL 中，IN 是一个用于指定多个值的操作符。它用于 WHERE 子句中，以检查某个字段的值是否与一组给定的值中的任何一个匹配。
它通常用于简化多个 OR 条件的查询。
它常用于过滤满足条件的数据，既可以使用静态值列表，也可以结合子查询动态生成值列表。
1. 基本语法
SELECT column1, column2, ...
FROM table_name
WHERE column_name IN (value1, value2, value3, ...);
2. 参数说明
column1, column2, ...：要选择的字段名称，可以为多个字段。如果不指定字段名称，则会选择所有字段。
table_name：要查询的表名称。
coluSQL 通配符2024-12-10 19:52:05
一. 基本定义
SQL 通配符是与 LIKE 运算符一起使用的特殊字符，用于在SQL查询中匹配模式。它们在查询数据库时特别有用，例如在模糊搜索的场景中。
SQL 通配符必须与 LIKE 运算符一起使用。
在 SQL 中，常用的通配符：
通配符
描述
%
代表0个或多个字符
_
仅替代一个字符
[]
方括号，用于匹配指定范围内的任意单个字符或属于特定集合的字符，例如：[abc]，匹配 a、b、或者c
[^] 或者[!]
用于匹配不在指定范围内的字符，例如：[^abc]，非a、b、c字符
二. 用法
1. % （百分号）
表示0个、一个或多个字符。适用于需要匹配任意长度字符的场景。
例如：查询首字母是 “李”ConfigError: Config "antfu/javascript/rules": Key "rules": Key "accessor-pairs": structuredClone is not defined2024-12-10 16:15:11
一. 问题
再进行项目开发过程中，eslint 时遇到错误信息：ConfigError: Config "antfu/javascript/rules": Key "rules": Key "accessor-pairs": structuredClone is not defined。
ESLint: 9.1.1
<img style="width: 100%" src="https://www.wangyuegyq.top/images/eslint/eslint-error-commit.png" />
二. 解决方案
切换 node 至 17 版本及以上。
经实验，node 16 版本以下，会出现以上错误。
JavaScript 判断页面是否是从搜索引擎进入还是直接打开操作2024-12-09 11:06:34
一. document.referrer
document.referrer 是 JavaScript 中的一个属性，它提供了访问当前页面的来源页面的URL。
document.referrer 是一个只读属性，返回的是浏览器从哪个页面链接访问了当前页面。例如，如果用户点击了一个链接从 A 页面跳转到了 B 页面，那么在 B 页面中 document.referrer 将会返回 A 页面的 URL。
二. 实现代码
const getSearchSite = () => {
const sites = [
"google",
"baidu",
"soso",
"bing&qWHERE LIKE 操作符2024-12-08 22:41:44
一. 基本定义
在SQL中，LIKE 关键字用于在 WHERE 子句中进行模糊匹配。通过结合通配符（通常是百分号 % 和下划线 _），实现对文本数据的模糊搜索，提高查询的灵活性。
1. 语法：
SELECT column1, column2, ...
FROM table_name
WHERE column_name LIKE pattern
2. 参数说明
column1, column2, ...：要选择的字段名称，可以为多个字段。如果不指定字段名称，则会选择所有字段。
table_name：要查询的表名称。
column_name：要搜索的字段名称。
pattern：搜索模式。
3. 通配符
_：下划线，匹配单个字符。
%：百分号，ORDER BY 对结果集进行排序2024-12-08 13:09:15
一. 基本定义
取出按照某个字段升序或者降序进行排列的结果集，用 ORDER BY 关键字来实现。
1. 语法
...
[ORDER BY 字段名1 [DESC|ASC], 字段名2 [DESC|ASC], ...字段名n [DESC|ASC] ];
2. 参数说明
desc | asc: 排序顺序关键字，desc 是 descend 简写，表示降序，asc 是 ascend 简写，表示升序。
如果不写排序关键字，默认是 asc，升序排列。
ORDER BY 后面可以跟多个排序字段，每个排序字段后可以有不同的排序顺序。
如果排序字段的值一致，则值相同的字段按照第二个排序字段进行排序，以此类推。如果只有一个排序字段，这些字段相同的记录，则无需排列。
二. 示例
1. 学SQL AND 和 OR 逻辑运算符2024-12-08 10:00:27
在 <a href="/alone/mysql/6sfxb33zyw5#3.%20逻辑运算符">SQL where 介绍过详细的逻辑运算符和比较运算符，可以点击进行查看。
一. 基本定义
AND 和 OR 运算符用于基于一个以上的条件对记录进行过滤。可以把两个或多个条件结合起来，形成联合条件。
可以把 AND，理解成数学中的 并且 ，只有多个条件都满足时，才能过滤出来。可以把 OR，理解成 或者 ，只要有一个条件满足时，就能过滤出来。
如果第一个条件和第二个条件都成立，则 AND 运算符显示一条记录。
如果第一个条件和第二个条件中只要有一个成立，则 OR 运算符显示一条记录。
二. 示例
创建 student 和 teacher 表：
CREATE TABLE studenSQL WHERE 用于过滤记录2024-12-07 22:29:37
一. 概述
1. 基本定义
WHERE condition 用于过滤记录，对于修改、查询记录非常有用。
接下来，以查询记录介绍，更新同理。
SQL SELECT WHERE 语句用于提取那些满足指定条件的记录。
语法：
SELECT column1, column2, ...
FROM table_name
WHERE condition;
参数说明：
（1）column1, column2, ...：要选择的字段名称，可以为多个字段。如果想要获取所有的字段，不需要全写，可以使用 * 代替。
（2）table_name：要查询的表名称。
（3）condition：查询条件，支持联合查询，多个条件语句之间用 OR、 AND 等逻辑运算符进行联合查询。
2. 比较SELECT DISTINCT 查询不重复的记录2024-12-06 11:34:06
一. 语法
SELECT DISTINCT 语句用于查询不重复的记录。
在表中，一个列可能会包含多个重复值，有时您也许希望仅仅列出不重复的值。
DISTINCT 关键词用于返回唯一不同的值。
SELECT DISTINCT column FROM table_name;
参数说明：
column：要选择的字段名称。
table_name：要查询的表名称。
二. 示例
获取 student 表中的学生都来自于那些城市：
SELECT DISTINCT address FROM student;
<img style="width: 80%" src="https://www.wangyuegyq.top/images/mysql/select/seSQL SELECT 从表中查询记录2024-12-06 00:02:43
一. 语法
SQL SELECT 语句用于从表中查询记录。
查询结果被存储在一个结果表中，称为结果集。
1. 返回表中所有列
SELECT * FROM table_name;
2. 返回表中指定列
SELECT column1, column2, ...
FROM table_name;
3. 返回表中列别名
针对字段别名，我们使用 AS 关键字。
注意：as 可以省略。
SELECT column1 AS alias1, column2 AS alias2,, ...
FROM table_name;
3. 参数说明
table_name：要查询的表名称。
*: 通配符，表示选择表中的所有列。
column1, column2, SQL DELETE 删除单表中的记录2024-12-05 19:42:12
一. 基本定义
SQL DELETE 语句用于删除表中的记录。
如果执行该语句时，不携带条件 WHERE ，会删除表中所有的记录，但是表结构、属性、索引将保持不变。
1. 语法
DELETE FROM table_name
[WHERE condition]
2. 参数说明
table_name：要删除的表名称。
condition：删除条件，用于指定哪些数据要删除。
WHERE 子句规定哪条记录或者哪些记录需要删除。如果您省略了 WHERE 子句，所有的记录都将被删除！
在删除记录时要格外小心！因为记录不能恢复！
二. 示例
例如，删除student表中名叫"李明"学生记录信息：
DELETE FROM studSQL UPDATE 更新表中已存在的记录2024-12-05 19:05:42
一. 语法
SQL UPDATE 语句用于更新表中已存在的记录。
UPDATE table_name
SET column1 = value1, column2 = value2, ...
WHERE condition;
参数说明：
table_name：要修改的表名称。
column1, column2, ...：要修改的字段名称，可以为多个字段。
value1, value2, ...：要修改的值，可以为多个值。
condition：修改条件，用于指定哪些数据要修改。
请注意：WHERE 子句规定哪条记录或者哪些记录需要更新。如果您省略了 WHERE 子句，所有的记录都将被更新！
二. 示例
例如，将王五学生的年龄从15改为19岁，SQL INSERT INTO 向表中插入新记录2024-12-05 13:47:23
一. 语法
INSERT INTO 语句用于向表中插入新记录。INSERT INTO 语句以下几种编写形式。
1. 不需指定列名
不需指定要插入数据的列名，只需提供被插入的值。需注意：不指定数据的列名时，values 后面的顺序要和表中的字段顺序一致。
INSERT INTO table_name VALUES (value1,value2,value3,...);
2. 需要指定列名
需要指定列名及被插入的值。
INSERT INTO table_name (column1,column2,column3,...) VALUES (value1,value2,value3,...);
3. 插入多条记录
如果一次性插入多条记录，用法如下：
INSERT INTO如何实现让 CSS Flex 布局最后一行列表左对齐2024-11-30 23:21:29
一. 问题
在CSS Flex布局中，我们通过 justify-content: space-between 属性可以控制列表的水平方向两端对齐。但是，如果最后一行的列表的个数不满行，则就会出现最后一行没有左对齐的问题。如下图所示：
<img style="width: auto;" src="https://www.wangyuegyq.top/images/css/flex-error.png" />
代码如下：
<div id="container">
<div class="list"></div>
<div class="list"></div>Vue Element Plus 中 el-input-number 组件无法实时触发表单校验，只支持 blur 事件2024-11-27 11:16:12
一. 问题
el-input-number 组件添加必填校验和自定义校验函数，手动输入值后，无法及时清除校验提示，必须失去焦点时才会消失。 希望在输入值之后即时清除校验提示。
二. 产生原因
el-input-number 组件在 blur 时，才会调用 change 事件。
三. 解决方案
1. el-input-number
依然使用 el-input-number 组件，需添加 @input 事件，在 input 事件中触发表单校验，例如：
<el-form-item :prop="formState.age" :rules="rules">
<el-input-number
v-model="Vant-UI Dialog 取消默认关闭事件时，一直转圈圈问题2024-11-26 11:23:24
一. 问题
在使用 Vant-UI Dialog 组件时，想要实现一个效果：点击确定时，先调用后端接口，等返回结果后，再关闭弹框。
但是，在开发过程中，使用 beforeClose ，一直转圈圈 loading。
二. 解决方案
this.$dialog.confirm({
title: "提示",
message: "异步回调",
beforeClose: (action, done) => {
if (action === "cancel") {
done(true); // 关闭弹框
} else {
new Promise((resolve) => {浅析 URLSearchParams 使用2024-11-22 08:13:28
一. 目的
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
二. 基本定义
URLSearchParams 是一个构造函数，接受一个参数，通过 new URLSearchParams(options) 会创建并返回一个新的 URLSearchParams 实例对象。
当然，我们可以直接从 URL 实例对象上直接获取 URLSearchParams 实例对象。
const url = new URL(window.location.href);
const searchParams = url.searchParams;
1. 语法
new URLSearchParams();
new URLSearchParams(optionode-schedule 设置定时任务2024-11-15 10:12:41
node-schedule 是 Node.js 的一个 定时任务（crontab）模块。我们可以使用定时任务来对服务器系统进行维护，让其在固定的时间段执行某些必要的操作，还可以使用定时任务发送邮件、爬取数据等。
一. 安装
# 安装在项目 package.json 中 dependencies
npm install --save node-schedule
# 全局
npm install -g node-schedule
# yarn
yarn add node-schedule
二. 基础用法
使用 schedule.scheduleJob() 即可创建一个定时任务。
一个简单的示例：
const schedule = require("node-sche正则学习（六）- 贪婪模式和惰性模式2024-11-01 16:38:02
一. 概述
1. 贪婪模式
尽可能多的匹配字符。
2. 惰性模式
又称非贪婪模式，尽可能少的匹配字符。
量词默认是贪婪的，尽可能多的匹配字符。
如果让量词变成惰性（不贪婪）的，在量词后面添加上 ? 。
二. 示例
1. 贪婪匹配
const regex = /[a-zA-Z]{2,4}/g;
const string = "ab abc abcd abcde";
console.log(string.match(regex));
// ["ab", "abc", "abcd", "abcd"]
2. 惰性匹配 - {m, n}?
const regex = /[aElement-UI Table 表格尾部的合计行，当固定表头时，不显示2024-10-30 13:07:02
一. 问题
根据 Element UI 文档要求，实现合计行，固定表头，需要如下配置：
<el-table
ref="tableRef"
show-summary
:height="height"
...
>
实现合计行后，当固定表头（设置height）时，发现合计行不显示。
二. 解决方案
通过查看文档，发现：
<img src="https://www.wangyuegyq.top/images/vue/element-ui-table.png" />
export default {
updated() {
this.$nextTick(() => {
this.$refs.构建 NPM 包（一） - 从零开始发布一个简单的 NPM 包2024-10-17 09:52:03
npm 是 node package manager 简写，意为包管理工具。nodejs 中第三方模块都可以叫做包，一般由第三方团队或者个人开发，供其他开发者使用。在平时开发中，我们可以通过封装组件库或者一些工具等等，去提高整个公司团队的开发效率。
一. npm 用户注册
<a href="https://www.npmjs.com" target="_blank">NPM官网(www.npmjs.com) 注册一个账号
需注意：发布时，需要用到用户名、密码、邮箱，也可能需要验证码（NPM 官网会向邮箱发送一个验证码）。
二. 创建项目
2.1 创建 package.json 文件
创建 parse-markdown 目录:
# 创建目录
mkdir parse-mar浏览器输入框autocomplete=off失效2024-10-15 17:56:30
一. 问题
今天在处理表单时，不希望账号和密码的输入框中自动添加，选择使用autocomplate="off"，但是发现一直不能禁止。
二. 解决方法
autocomplete="new-password"
在 Vue、React 中遵循驼峰写法autoComplete，测试中写不写autoComplete都是支持的（React待测试）。
关于 Firefox 兼容问题，发现目前 Firefox 已支持。
对象属性描述对象-JavaScript2024-10-10 23:15:44
一、定义
属性描述对象是 ECMAScript 5 新增的语法，它其实就是一个内部对象，用来描述对象的属性的特性。每个属性都有自己对应的属性描述对象，用来描述该属性的信息，以及控制它的行为。
属性描述对象提供6个属性描述：
1. value
表示属性的值，默认为undefined，可以是任何类型值。
2. writable
boolean类型，表示该属性值是否可以被修改，默认是true，如果是false，表示不能修改属性值。
3. enumerable
enumerable是一个布尔值类型，表示该属性是否可以被遍历，默认是true。如果是false，会使某些操作（比如for in 、Object.keys）跳过遍历。
4. configurable
configubrew 如何安装 nginx2024-09-28 17:08:43
要使用 Homebrew 安装 nginx，请打开终端并运行以下命令：
brew install nginx
安装完成后，你可以通过以下命令启动 nginx：
brew services start nginx
或者手动启动：
nginx
要停止 nginx，可以使用：
brew services stop nginx
或者如果你已经手动启动了它，可以使用：
nginx -s stop
要查看 nginx 是否正在运行，可以使用：
curl -I localhost
如果安装成功，你将看到 nginx 的相关响应头信息。
Linux 平台中如何安装 nvm、git 等2024-09-27 14:00:20
nvm 安装
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
安装后，退出终端，重新打开即可。
git 安装
yum install git-core
有可能安装失败，返回以下提示：
Loaded plugins: fastestmirror, langpacks
You need to be root to perform this command.
提示你需要获取 root 权限，之后再执行 yum install git-core 命令
如何获取 root 权限？在终端上直接执行 su 命令，并回车，输入密码即可：
su
上传 NPM 包时，报： Package name too similar to existing package xxx2024-09-27 10:53:30
一. 问题
当进行 npm publish 上传 NPM 包时，报以下错误：
npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/xxx - Package name too similar to existing package xxx; try
renaming your package to ”xxx“ and publishing with ”npm publish --access=public“ instead
npm ERR! 403 In most cases, you or one of your dependencies are requesting
解决 npm login一直跳转到浏览器2024-09-23 07:17:27
一. 问题
在进行 NPM 包上传时，输入 npm login --registry=https://registry.npmjs.org/ 时，一直跳转到浏览器中进行操作，现在想要在终端上进行。
二. 解决方案
npm login --auth-type=legacy --registry=https://registry.npmjs.org/
三. auth-type 介绍
默认值："web"
类型："legacy" 或 "web"
login 使用什么身份验证策略。请注意，如果给出 otp 配置，则此值将始终设置为 legacy。
Ant-Design-Vue Form 中，对于多选下拉表表单时，重置时，表单未正确展示2024-09-18 23:28:23
一. 问题
最近在进行Ant-Design-Vue Form 表单中，当进行多选下拉表（Select multiple）重置（resetFields）时，多选下拉表显示一个值，但是值内容是空。
通过打印结果，发现执行 form.resetFields 后，多选下拉表的重置值变为[undefined]。
<img src="https://www.wangyuegyq.top/images/questions/antd-vue-select-multiple-1.png" alt="" />
二. 解决方法
通过查看 <a href="https://www.antdv.com/components/form-cn#%E6%96%B9%E6%B3%95">ant-design-vuenpm install时，下载失败，报：network request to https://registry.nlark.com/yallist/download/yallist-2.1.2.tgz?2024-09-13 13:41:49
一. 问题
对一个老的项目进行Jenkins部署时，一直报失败：network request to <a href="https://registry.nlark.com/yallist/download/yallist-2.1.2.tgz?cache=0&sync_timestamp=1622604530774">https://registry.nlark.com/yallist/download/yallist-2.1.2.tgz?cache=0&sync_timestamp=1622604530774 ...
<img src="https://www.wangyuegyq.top/images/npm/install-error-1.png" alt="" />
产JavaScript之 in 运算符及其应用2024-09-05 20:24:18
一、定义
如果指定的属性在指定的对象或其原型链中，则 in 运算符返回 true。
二、语法
prop in object
参数详解：
prop: 要检查的属性，类型是一个字符串类型或者 symbol 类型的属性名或者数组索引（非 symbol 类型将会强制转为字符串）。
object: 要检查的目标对象，检查它（或其原型链）是否包含指定的属性。
三、示例
1. in 左操作数的类型，是一个字符串类型或者 symbol 类型的属性名或者数组索引（非 symbol 类型将会强制转为字符串）
（1）字符串类型
const obj = {
name: "xiaoming"
};
"name" in obj;nvm安装node，报Get "https://nodejs.org/dist/latest/SHASUMS256.txt" dial tcp 104.20.23.46:443i/o timeout2024-08-21 16:22:00
window系统中通过nvm管理node版本，当nvm install 18.0.0时，发现报以下错误信息：
Could not retrieve https://nodejs.org/dist/latest/SHASUMS256.txt.
Get "https://nodejs.org/dist/latest/SHASUMS256.txt": dial tcp 104.20.23.46:443: i/o timeout
这是由于网络原因引起的问题，由于node源都是国外的服务，只需要将node和npm的源设置成国内的服务的源就可以了。
解决方法：
找到nvm的安装目录中的settings.txt（如果没有可以创建一个），添加下面的2行代码：
node_minpm 镜像地址更改2024-08-21 08:07:48
一. 目的
npm 源网址是国外的，依赖包下载速度慢，为了提高下载速度，可以更改国内 npm 镜像地址。
二. 查看当前镜像地址
npm config get registry
三. 更改 npm 镜像地址
npm config set registry https://registry.npmmirror.com/
更改完成后，可以通过 npm config get registry 查看下当前镜像地址，是否已经更新成功。
四. 常用的 npm 镜像地址
1. 官网镜像
https://registry.npmjs.org/
2. 淘宝镜像
https://registry.npmmirror.com/ （新的）
https://registry.npnpm 包登录、发布、删除、查看命令2024-08-21 07:46:57
一. npm 登录
npm login --registry https://registry.npmjs.org/
如果您只输入npm login，请先确认下您当前设置的镜像地址 （您的 npm 包要上传的地址）。
您可以通过下面命令查看当前镜像地址：
npm config get registry
二. npm 发布
npm publish --registry https://registry.npmjs.org/
当然你也可以和 npm login 一样，只写 npm publish，但是也需要先确认下当前镜像地址。
三. npm unpublish
从注册表中删除软件包
npm unpublish [<@scope>/]<pkg&ggit clone 指定分支拉取代码2024-08-20 22:59:14
一. 不指定分支
git clone 资源仓库地址
比如：
git clone git@xxxxxx.git
二. 指定分支
git clone -b 分支名称 资源仓库地址
-b 中的 b 是 branch 的简写
比如：
git clone -b test git@xxxxxx.git
三. 指定分支拉，且重新命名项目名称
指定分支拉取代码，并重新命名项目名称，与资源仓库上的名称不一致
git clone -b 分支名称 资源仓库地址 项目名称
比如：
git clone -b uat git@xxxx/jr-common-system.git test
当前会从uat分支下载资源，并且本地项目名称不是jr-common-system，而是teVariable @primary-color-hover is undefined2024-08-20 14:41:59
最近在处理公司老项目时，遇到这个问题。
这个问题产生原因：依赖项 @ant-design/pro-xxx 需要的基础样式是从 antd 引入的，但是 antd 的基础变量里面把这个删除了，所以会报这个错误。
解决方案
1. 固定 @ant-design/pro-xxx 版本
项目中报错依赖信息
"dependencies": {
...
"@ant-design/pro-descriptions": "^1.9.0",
"@ant-design/pro-form": "^1.43.0",
"@ant-design/pro-layout&qreact-app-rewired中如何设置ant-design主题，以及不生效问题2024-08-11 09:28:39
项目中使用的是：react-app-rewired、customize-cra
首先你需要下载依赖包：
npm install -D react-app-rewired customize-cra babel-plugin-import
config-overrides.js文件配置：
const {
override,
addLessLoader,
fixBabelImports, // 按需加载配置函数
} = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "a学习 webpack 之 loader 讲解2024-08-04 16:01:59
为什么出现loader
webpack 只能处理 .js 和 .json 类型文件，对于其他类型，无法处理。webpack 为了解决这个问题，出现了loader机制。
loader机制，让 webpack 有了处理其他类型文件的能力。
什么是loader
loader其实就是一个内容转换器，将webpack不能识别的文件，转换为标准的js模块，交给webpack处理。
loader的本质是一个导出（export ）一个函数的JavaScript模块。
loader函数中this 指向loader上下文，在上下文中包含一些方法或者属性，比如同步loader中的callback、异步loader中async方法等。
/**
* content：文件内容
* map：soMac安装nvm时，各种问题总结2024-03-27 07:51:33
使用brew install nvm命令安装nvm使用时，报错zsh: command not found: nvm
vi ~/.zshrc
添加配置
export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh" # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_c彻底搞懂JavaScript中的原型（__proto__）、原型对象（prototype）及原型链2024-03-26 08:20:56
一. 原型（__proto__）
任何对象（除了null以外）上都会有一个内部属性__proto__。这个属性就是对象的原型，你可以在控制台中通过obj.__proto__打印（obj是定义的一个对象）。
<img src="https://www.wangyuegyq.top/images/object/console-1.jpg" alt="object">
但是需要注意的是，这个属性是一个内部属性，在平时开发代码中是不能直接使用这个属性，你可以通过getPrototypeOf（获取）、setPrototypeOf（设置）等。
那__proto__指向什么呢？你可以理解为构造该对象的构造函数的prototype。比如我们通过 new 一个构造函数，创建一个对象：
functio深入理解BFC2024-02-18 08:45:07
定义
BFC（block Formating context）块级格式上下文，它是页面中的一块渲染区域，具有一定的渲染规则，决定了其中子元素的布局方式和与其他元素的相互作用和关系。
通俗讲，BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
如何创建BFC
根元素 html
浮动元素（float除了none之外）
绝对定位元素（position为fixed或者absolute）
display属性设置为inline-block、inline-flex等
overflow值不为visible的元素
BFC的特点
垂闭包2024-01-17 19:43:22
全局变量和局部变量
1. 全局变量
在任何地方都可以访问到的变量就是全局变量。
无论let、const还是var，在全局作用域下的都是全局变量。
不管在函数作用域还是块级作用域下，如果省略var、const、let定义的变量都是全局变量。
2. 局部变量
块级作用域下（{}，需要注意，在块级作用域下，通过var定义的变量是全局变量，let、const定义的变量是局部变量
）、函数等定义的变量，是局部变量。
什么是闭包
官方说法：闭包就是指有权访问另一个函数作用域中的变量的函数。
MDN说法：闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。
当执行函数A时，会创建一个函数执行上下文，并将函数执行上下文进入栈引用计数算法2024-01-17 19:42:44
引用计数算法是早先的一种垃圾回收机制算法，由于存在重大问题，目前基本上不使用了。
通过跟踪实际对象的引用次数，如果变成零引用（表示没有其他变量对其引用），那么就会进行垃圾回收，释放其内存。
计算过程
当声明一个变量，并将实际对象的引用（指针对象，指向是实际对象的开始地址）赋值给该变量的时候，那么这个实际对象的引用次数就为1。
如果实际对象的引用又被赋给另一个变量，那么引用次数+1。
如果变量的值被赋予其他的值（不是指向这个实际对象了），则引用次数-1。
当这个实际对象的引用次数变为0的时候，就会进行垃圾回收，释放其内存。
举例：
let a = {}; // {} 被a引用，其引用次数1
let b = a; // {} 引用计数是 2（a, b引深入理解JS预解析（变量提升和函数提升）2024-01-17 18:21:51
预解析
在执行代码之前，会首先进行预解析，那什么是预解析呢？
预解析是指JavaScript代码执行之前，会首先将var声明的变量和function声明的函数（这里指函数声明而不是函数表达式）提前到当前作用域的最顶端，也即我们常常提到的变量提升和函数提升。
变量提升
变量预解析也被称为变量提升，JavaScript代码执行之前，会首先将var声明的变量提升到当前作用域的最顶端。
需要注意的是：变量提升只会提升变量名的声明，而不会提升变量的赋值初始化。
例如：
console.log(abc); // 不会报错，打印出undefined
var abc = 123;
预解析后：
var abc;
console.log(abc);
abc = 123;
函数提Centos7中 Verdaccio 搭建 npm 私服2024-01-16 14:39:27
一. 搭建 npm 私服优点
1. 通过公共代码的提取，提高开发效率，不需要重复性开发。
2. 安全性保障。
3. 由于前端每次打包都需要重新拉取第三方包，这个步骤的速度依赖于网络以及第三方镜像。npm 私服可以设置缓存，第一次拉取第三方包后，以后的拉取将直接从 npm 私服上进行，这样将会极大的提升打包编译速率。
二. 如何搭建
1. 全局安装 verdaccio ：
npm i -g verdaccio
2. 全局安装 pm2 ：
npm i -g pm2
3. pm2 启动 verdaccio ：
pm2 start verdaccio
4. pm2 停止 verdaccio ：
pm2 stop verdaccio
5.面试题：this指向2024-01-07 16:10:59
this是一个在运行时才进行绑定的引用，在不同的情况下它可能会被绑定不同的对象。
this关键字由来
在对象内部的方法中使用对象内部的属性是一个非常普遍的需求。但是JavaScript的作用域机制并不支持这一点，基于这个需求，JavaScript又搞出来另外一套this机制。
this在什么时候确定下来
this和作用域不一样，作用域是声明的时候就定下来了，this是在调用的时候才确定下来
this存在场景
全局执行上下文
在全局执行环境中无论是否在严格模式下，（在任何函数体外部）this 都指向全局对象.
当普通函数在执行时，如果是严格模式，内部的this指向undefined，如果非严格模式，内部的this指向Window对象。
函数执行上下文
在函数执行上下文面试题：new关键字做了什么2024-01-06 11:05:44
new内部流程
创建一个新的对象obj
将obj和构造函数的原型链链接起来（obj.__proto__ === O.prototype）
将this指向obj，并执行构造函数内部代码
根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理。（new 关键词执行之后总是会返回一个对象，要么是实例对象，要么是 return 语句指定的对象）
手写new
function create(fn, ...args) {
let obj = Object.create(fn.prototype);
let res = fn.apply(obj, args);
return res instanceof Object ? rObject对象中的静态方法setPrototypeOf2024-01-06 10:49:13
一、产生原因
任何对象（除了null）中，都有一个内部属性__proto__，我们通过这个内部属性可以获取到当前的原型，以及其整个原型链。但是由于__proto__只是一个内部属性（浏览器广泛支持），而不是一个正式的对外的 API，所以在正式的代码中，是不能使用的。所以，这个时候，就需要Object的静态方法setPrototypeOf。
二、作用
Object.setPrototypeOf() 静态方法可以将一个指定对象的原型（即内部的 __proto__属性）设置为另一个对象或者 null。
三、语法
Object.setPrototypeOf(obj, prototype)
obj：要设置原型的对象
prototype：该对象的新原型（可以是一个对象，也可以是nulldisplay为inline-block的元素中间有间隙的原因和解决办法2024-01-05 15:32:26
原因
浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。通常为了美观，会将标签单独占一行，标签与标签之间使用了空格或者是换行符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display为inline-block的元素中间有间隙</title>
&Verdaccio中，如何用VERDACCIO_PUBLIC_URL修改私服资源的域名2023-12-27 16:42:22
用 Verdaccio 搭建私服时，当使用定义的域名访问时，报错，原因是JS等资源文件的访问域名是 127.0.0.1:4873 ，并不是我们想要的域名:
<img src="https://www.wangyuegyq.top/images/questions/verdaccio-domain.png" alt="verdaccio domain">
通过查看 <a href="https://verdaccio.org/docs/env#public-url" target="_blank">Verdaccio 文档 了解，在 /verdaccio/config.yaml 配置中不支持设置这个域名，Verdaccio 给了一个环境变量 VERDACCIO_PUBLIC_URL正则学习（五）-深入理解String.prototype.replace2023-12-25 11:15:46
replace方法在正则表达式的数据处理中扮演者重要角色，是绕不过去的一个话题，今天就深入了解一下它的使用。
一. 语法
String.prototype.replace(pattern, replacement)
该方法并不会改变调用它的字符串本身，而返回一个新替换后的字符串，其中一个、多个或所有匹配的 pattern 被替换为 replacement。
pattern: string | 一个带有 Symbol.replace 方法的对象（典型的例子就是正则表达式），任何没有 Symbol.replace 方法的值都会被强制转换为字符串。
replacement: string | function（每次匹配时调用的函数）
二. 第一个参数 patter正则学习（四）-正则表达式中的位置匹配2023-12-25 11:06:32
正则表达式的匹配要么匹配字符，要么匹配位置。
字符比较理解，那么什么是位置呢？
一. 位置
相邻字符之间的空隙，可以被称为位置，也被称为锚。开头和第一个字符之间、结束和最后一个字符之间，也被称为位置。
比如下图红色箭头位置：
字符串："ab abc abcd abcde"
<img src="https://www.wangyuegyq.top/images/regexp/regexp-1.png" alt="regexp">
二. 如何匹配位置
1. ^
^ 被称为脱字符，表示开头位置，需要注意的是，如果匹配时支持多行匹配，此时匹配多行的开头。
比如下图中红色箭头位置：
<img src="https://www.wangyuegyq.top/im正则学习（三）-正则中不得不说的捕获和反向引用2023-12-25 10:51:59
一. 子表达式
在正则表达式中，被一对圆括号括起来的内容，这个内容，被称为子表达式。
比如：
const regex = /(\d)hello/;
这个正则表达式中 \d 被称为子表达式。
二. 捕获组
在正则表达式中，子表达式匹配到相应的内容时，系统会自动捕获到这个行为，然后把子表达式匹配的内容放入系统的缓存中，我们把这个过程称为捕获。
正则捕获后我们可以使用RegExp.$1获取捕获的第一个内容，$2表示捕获的第二个内容，以此类推，也可以从match，exec等js方法返回值中获取。
例如：
console.log("1hello2".match(/(\d)hello(\d)/));
console.log(RegExp.$1);正则学习（二）- 常用元字符：量词和字符组2023-12-23 18:27:26
一. 概述
正则表达式的基本组成：普通字符和元字符。
普通字符：可以理解成常使用的数字和字母。
元字符：又称特殊字符，常用来表示一些特殊语义的字符，比如 ^、$ 等。
需要注意的是，特殊字符放置位置的不同，可以代表不同的语义，比如当 ^ 放在正则表达式首位时，表示以 ... 开始，当放在字符组([])的首位时，即[^]，表示非。
例如：
（1） 匹配以 start 开始的字符串：
/^start/.test("start end");
// true
/^start/.test("please start");
// false
（2） 匹配非 a、b、c 以外字母：
/[^abc]/.test("a");
/正则学习（一）-什么是正则表达式，及如何创建正则表达式2023-12-23 18:25:10
一. 概述
百度百科定义：
正则表达式是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。
在 JavaScript 中，正则表达式也是对象。正则表达式描述一种字符串匹配的模式，可以用来检查字符串中是否存在一个子串，将字符串中匹配的子串替换成其他字符，也可以隐藏字符串中某一部分。
例如：
/^\d+/ instanceof Object;
// true
/^\d+/ instanceof RegExp;
// true
正则表达式是一个 RexRep 实例对象，也超详细的MySQL表连接2023-12-12 15:47:41
笛卡尔积定义
来自百度百科定义：
笛卡尔乘积是指在数学中，两个集合X和Y的笛卡尔积（Cartesian product），又称直积，表示为X×Y，第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员。
假设集合A={a, b}，集合B={0, 1, 2}，则两个集合的笛卡尔积为{(a, 0), (a, 1), (a, 2), (b, 0), (b, 1), (b, 2)}。
多表查询
多表查询原理：是将多个表通过笛卡尔积形成一个虚表，再根据查询条件筛选符合条件的记录集合。
SELECT命令不仅可以从一张表中查询数据，还可以从多张表中一次性查询数据，语法如下：
SELCT 字段列表 FROM 表列表;
应用
首先，我们创建student表和teachSQL语句-DQL（数据查询语言）中排序、分页功能详解2023-12-11 16:46:52
排序
取出按照某个字段升序或者降序进行排列的结果集，用 ORDER BY 关键字来实现。
SELECT [字段名1, ..., 字段n] FROM 表名
[WHERE 条件]
[ORDER BY 字段名1 [DESC|ASC], 字段名2 [DESC|ASC], ...字段名n [DESC|ASC] ];
desc|asc: 排序顺序关键字，desc是descend简写，表示降序，asc是ascend简写，表示升序。
如果不写排序关键字，默认是asc，升序排列
ORDER BY 后面可以跟多个排序字段，每个排序字段后可以有不同的排序顺序。
如果排序字段的值一致，则值相同的字段按照第二个排序字段进行排序，以此类推。如果只有一个排序字段，这些字段相同的记录，则无需排列超详细的DQL（数据查询语言）讲解2023-12-11 14:48:24
查询记录完整语法
语法如下：
SELECT [字段名1, 字段名2, ...字段名n] [, function_name]
FROM 表名
WHERE 条件1, 条件2, ...条件n
GROUP BY 分组字段列表
[WITH ROLLUP]
HAVING 分组后条件列表
ORDER BY 排序字段列表
LIMIT 分页参数
查询功能
1 基础查询
SELECT 字段名1, ..., 字段名n FROM 表名;
字段列表之间用逗号（,）隔开。
你也可以给字段名起一个别名：
SELECT 字段名1 [AS] 别名1, ..., 字段名n [AS] 别名n FROM 表名;
注意：as 可以省略
例如，只查询student表中name和age字段： MySQL中的约束详解2023-12-11 10:40:44
概念
约束是指对表中数据的一种约束，能够帮助数据库管理员更好地管理数据库，并且能够确保数据库中数据的正确性和有效性。
约束分类
1 主键约束
主键约束是使用最频繁的一种约束。当创建一个表时，一般情况下都要求设置一个主键。使用PRIMARY KEY 关键字表示，改字段能唯一标识表中的每条记录的，该主键字段非空且唯一。
2 非空约束
NOT NULL，限制字段数据不能为空。
例如，当我们往teacher表中插入一个辅导员名称null时（teacher表中name字段设置了非空约束）：
<img src="https://www.wangyuegyq.top/images/mysql/constraint-1.png" alt="constraint not null">
3 唯SQL语句-DML（数据操作语言）对表记录的插入、更改、删除命令2023-12-06 15:47:03
DML是指对数据库中表记录的操作，主要包含表记录的插入（INSERT）、更改（UPDATE）、删除（DELETE）、查询（SELECT）。
一. 插入记录
1. 语法
INSERT INTO 表名 (字段名1, 字段名2, ...) VALUES (value1, value2, ...);
2. 示例
例如，向student表中插入一条学生信息记录：
INSERT INTO student (name, age) VALUES ("李红", 20);
<img style="width: auto" src="https://www.wangyuegyq.top/images/mysql/dml-1.png" />
也可以不指定字段名称，但是如何调用百度和微软必应链接收录API2023-12-05 13:13:58
为了快速进行百度和微软Bing链接收录，不用每次都要登录，填入收录地址，所以写了一个收录接口api，内部调用百度和微软收录的API。
本人项目后台是用express搭建。
百度收录：
app.post("/baiduEmploy", (req, res) => {
const { urls } = req.body || {};
const data = urls.join("
");
axios.post(
"http://data.zz.baidu.com/urls?site=你的site&token=你的token",
data
)
});
参数名称
是否必选 MySQL中如何对表字段进行增加、删除、改名、类型修改2023-12-04 16:36:53
对于已创建的表，表结构的修改，大多数使用alter table命令。
1. 修改表字段类型
ALTER TABLE 表名 MODIFY [COLUMN] 列名 列类型 约束条件 [FIRST | AFTER 列名];
例如，修改student表中的name列，将其varchar(10)，改为varchar(15)：
ALTER TABLE student MODIFY name varchar(15) NOT NULL;
<img src="https://www.wangyuegyq.top/images/mysql/ddl-10.png" alt="alter column">
2. 增加表字段
ALTER TABLE 表名 ADD [COLUMN] 列名 列类超详细的 SQL 语句 DDL（数据定义语言）讲解2023-12-04 14:45:25
一. DDL 简介
DDL 是数据定义语言的缩写，简单的说，就是对数据库内部的对象进行创建、删除、修改等操作的语言。和 DML 的最大区别，是 DML 只是对数据库里的数据进行操作，而不涉及到表的定义、结构修改。DDL 更多是由数据库的管理员使用，开发者一般很少使用。
MySQL 服务启动之后，在终端上输入 mysql -u root -p，回车后输入密码，就会连接到 MySQL 服务器中。
<img src="https://www.wangyuegyq.top/images/mysql/ddl-1.png" alt="login">
注释：u 是 -username 简写，表示数据库用户名，当然你的数据库可能不是 root，p 是 password 的简写，即数据库的密码。
MySQL入门-什么是MySQL，什么是SQL2023-12-04 14:29:15
一. MySQL
近几年，开源数据库逐渐流行起来。由于具有免费使用、配置简单、稳定性好、性能优良等优点，开源数据库在中低端应用中占据了很大市场份额，而MySQL正式开源数据库中的杰出代表。
MySQL是一种关系型数据库。
二. SQL
SQL (Structured Query Language:结构化查询语言) 是用于管理关系数据库管理系统（RDBMS）。
SQL 通过一系列的语句和命令来执行数据定义、数据查询、数据操作和数据控制等功能,包括数据插入、查询、更新和删除，数据库模式创建和修改，以及数据访问控制。
1. 什么是 SQL
（1）SQL 指结构化查询语言，全称是 Structured Query Language。
（2）SQL 让您可以访问和处理数据库，包括数据插关于调用微软Bing API推送链接时，报：errorcode 3 message ERROR!!! InvalidApiKey2023-11-30 15:40:17
问题：errorcode 3 message ERROR!!! InvalidApiKey
解决方案：
1. 首先检查一下bing的apikey是否正确
进入API秘钥
<img src="https://www.wangyuegyq.top/images/bing-step-1.png" alt="bing-step-1" style="width: 100%;" />
进入后，如果没有，可以点击产生apikey，如果已存在，可以检查一下是否正确
2. 在进行bing api推送调用时，apikey没问题，还总是报无效的apikey，解决方法：重写?，如果还报此错误，再将apikey重写一下（我的api路径都是从微软bing api上复制，重写?apikey）
bVerdaccio npm私服中发布项目时，README.md内容不显示2023-11-29 22:33:14
一. 问题
最近在封装公司组件库，当向公司私服发布组件时，README.md内容不显示
版本：Verdaccio: 4.4.4. nodejs: 18.14.x
二. 产生原因
产生问题原因：nodejs版本过高（也可以认为Verdaccio版本过低）
三. 解决方案
Verdaccio升级（这个方案需要运维处理，困难有点大）
降node版本，可以降为到14.18.x（其他还没有尝试，各位可以试试）
使用yarn进行组件库版本的发布
JavaScript--原型链图解2023-11-25 00:40:59
__proto__：指向构造该对象的构造函数的原型对象（prototype）
prototype：原型对象
<img src="https://www.wangyuegyq.top/images/graph-1.png" alt="__proto__" style="width:100%;" />
下面通过一个实例来说明原型链:
<img src="https://www.wangyuegyq.top/images/graph-2.png" alt="__proto__" style="width:100%;" />深入理解原型链2023-11-25 00:18:57
一、原型链定义
原型链是一种查找规则
当查找一个对象上的属性或者方法时，首先从自身属性开始查找，如果没有，则去该对象的原型上查找（__proto__），如果没有，再去对象的原型的原型上去查找，直至null（Object.prototype.__proto__ === null）结束，这种链式查找，被称为原型链。
MDN上对原型链解释：
当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（ object ）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象( __proto__ ) ，层层向上直到一个对象的原型对象为null。根据定义，null没有原型，并作为这个原型链中的最后一个环节。对象的isPrototypeOf和静态方法Object.getPrototypeOf2023-11-24 17:19:09
一、如何判断一个对象是普通对象
在研究react-redux和redux源码时，出现一个判断对象是普通对象方法isPlainObject：
function isPlainObject(obj) {
if (typeof obj !== "object" || obj === null) return false
let proto = Object.getPrototypeOf(obj)
if (proto === null) return true
let baseProto = proto
while (Object.getPrototypeOf(baseProto) !== null) {
baseProto = Object.深入理解constructor2023-11-24 13:33:49
一、定义
constructor伴随着函数产生的，当创建一个函数时，会默认为函数创建一个prototype对象（原型对象）。在prototype对象里，也会默认添加两个属性，__proto__和constructor。
__proto__是形成原型链的重要原因，如果想要了解__proto__，请进入<a href="https://www.wangyuegyq.top/article/2ns7blvciye" target="_blank">JavaScript--深入理解__proto__ 。constructor属性是指向构造函数本身的。
二、举例
比如： function A() { }
A.prototype.constructor === A
接下来，我将通过一个实例对深入理解对象原型__proto__2023-11-24 10:56:55
一、定义
__proto__属性（前后各两个下划线），用来读取或设置当前对象的原型（__proto__）。__proto__指向谁呢？通俗来说，__proto__指向构造当前对象的构造函数的原型对象（prototype）。当然了，如果你设置了__proto__，就是修改了当前对象的原型链 。
目前，所有浏览器（包括 IE11）都部署了这个属性。该属性没有写入 ES6 的正文，而是写入了附录，原因是__proto__前后的双下划线，说明它本质上是一个内部属性，而不是一个正式的对外的 API，只是由于浏览器广泛支持，才被加入了 ES6。
React-Router源码分析-History库2023-11-15 11:41:13
history源码
history 在 v5 之前使用单独的包， v6 之后再 router 包中单独实现。
<a href="https://www.wangyuegyq.top/public/history.ts">history源码
Action
路由切换的动作类型，包含三种类型：
POP
REPLACE
PUSH
Action 枚举：
export enum Action {
Pop = "POP",
Push = "PUSH",
Replace = "REPLACE",
}
关于三种动作类型意思，可以进入<a href="https://www.wangyuegyq.top/arHistory库源码分析-createPath2023-11-15 11:40:40
createPath(to: To): string
To interface
interface To = Partial<Path>
传入一个Path类型对象，之后拼接成一个字符串地址。
源码：
export function createPath({
pathname = "/",
search = "",
hash = "",
}: Partial<Path>) {
if (search && search !== "?")
pathname += search.charAt(0) === "?" ? se路由模式-hash2023-11-15 11:40:12
hash模式
hash模式是一种把前端路由的路径用井号 # 拼接在浏览器 URL 后面的模式。
一个完整的 URL 包括：协议、域名、端口、虚拟目录、文件名、参数、锚。
https://www.wangyuegyq.top/utils/index.html?name=123&phone=123#home
协议：https
域名：<a href="http://www.wangyuegyq.top">www.wangyuegyq.top
端口号：443，https默认端口号是443，http默认端口号是80，默认端口号可以不写
虚拟目录：/utils
文件名：index.html
参数：name=123&phone=123
锚部分：home（#后面的History库源码分析-createLocation2023-11-15 11:30:36
createLocation(current: string | Location, to: To, state: any = null, key?: string)
返回一个带有唯一值key的location对象。
当前方法是一个公共方法，在createBrowserHistory/createHashHistory/createMemoryHistory中都使用其创建location对象。
Location interface
interface Location extends Path {
state: State;
key: string;
}
Path interface
interface Path {
pathname: strHistory库源码分析-Action动作类型2023-11-15 11:29:52
Action
Action 枚举
export enum Action {
Pop = "POP",
Push = "PUSH",
Replace = "REPLACE",
}
Action表示location变化（路由切换）的动作类型，目前有三种动作类型：
POP
在history栈中，跳转到其他已存在的历史纪录（回退或者前进），这种location变化，叫做POP，比如浏览器的前进或者后退。
POP动作类型也作为默认的动作类型，当进行push或者replace时，再更新当前的动作类型为PUSH或者REPLACE。
PUSH
PUSH表示一种新的历史记录被添加到history栈中，例如：react-router中的Link（底层调用的是hiHistory库源码分析-parsePath2023-11-15 11:29:21
parsePath(path: string)
<hr />
返回对象类型： Partial
Path 类型
export interface Path {
pathname: string;
search: string;
hash: string;
}
通过解析传入的path，返回一个对象，这个对象包含pathname、search、hash
源码：
export function parsePath(path: string): Partial<Path> {
let parsedPath: Partial<Path> = {};
if (path) {
let hashIndex = path.inde路由模式-原生history2023-11-11 16:52:07
history
浏览器历史记录对象
属性:
length: 历史记录对象长度
方法:
go(n):
跳转到相应的历史记录，以当前历史记录为标准线0，回到之前历史记录，为负值，比如回到上一页，n就是-1，向后，就是正值，如果n === 0，相当于刷新当前页面。
back():
回到上一页，相当于浏览器后退按钮，也可以用go(-1)实现
forward():
前进到下一页，相当于浏览器前进按钮，也可以用go(1)实现
HTML5 对 History API 新增的两个方法：pushState()、replaceState()，均具有操纵浏览器历史记录的能力
history.pushState(state, title, url)
state为什么更多前端应用偏向于单页面应用2023-11-11 16:51:05
单页面应用（SPA，Single Page Application）和传统的多页面应用（Multiple Page Application）一样，是一种网页应用程序模型。
多页面应用
在传统的多页面应用中，每个页面都是独立的HTML，每次切换页面时，都会重新加载整个页面，从服务器中下载相应的HTML、JS、CSS文件。
单页面应用
SPA，即单页面应用(Single Page Application)。所谓单页 Web 应用，就是只有一张 Web 页面的应用。单页应用程序 (SPA) 是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。浏览器一开始会加载必需的 HTML 、 CSS 和 JavaScript ，所有的操作都在这张页面上完成，都由 Jaundefined和null区别2023-11-08 16:50:10
undefined（未定义）
当一个变量只声明，未赋值时，当前变量会设置为undefined；
当前一个函数未明确return时，默认会return undefined。
当一个函数定义了行参，但是没有传递实参时，默认为undefined；
当一对象上没有该属性，并且原型链上也没有找到时，那么用对象访问时，为undefined
typeof undefined == "undefined"
null
null表示的是我们知道这个变量是一个对象，但是我们不知道它是一个什么对象，刚开始，我们就设置为null。
当需要释放一个对象时，直接赋值为 null 即可
undefined 表示一个变量初始状态值，而 null 则表示一个变量被人为的设置为空对象，而不是如何使用变量2023-11-08 16:49:16
变量定义
<hr />
变量的定义，可以通过var、const、let来定义，let和const是ES6新特性，let和const是解决var中的一些问题产生的。
// 定义一个年龄为18的age变量
var age = 18;
// 定义一个名称叫xiaoming的name变量
let name = "xiaoming";
// 定义一个值为3.14的PI常量
const PI = 3.14;
const是针对常量定义，这个值在整个生命周期中不改变，比如我们定义了一个常量 π = 3.14，由于 π 是不可变化的值，所以这个时候，我们就可以用const来定义。
const PI = 3.14;
区别
<hr />
1. 说说let和const
声明和定义区别2023-11-08 14:36:52
声明和定义区别
在编程中，变量声明和变量定义是两个不同的概念。
变量声明：是指在程序中声明一个变量，并指定它的名称和类型，但并不为它分配具体的值。
变量定义是指在程序中给变量分配具体的值。它为变量分配内存，并初始化它的值。变量定义可以在声明的同时完成，也可以在稍后的代码中进行。
let name; // 声明一个变量
let age = 18; // 定义一个age变量，值为18
变量类型判断2023-11-08 14:35:01
变量类型判断
typeof
常用于基础数据类型判断:
typeof 123 === "number"; // true
typeof true === "boolean"; // true
typeof "123" === "string"; // true
typeof undefined === "undefined"; // true
但是要注意:
typeof null === "object" // true
对于复杂数据类型判断，除了function之外，其他都返回object
const fn = () => {}
typ变量类型2023-11-08 14:19:00
变量类型
JavaScript变量类型有6种（新增加的Symbol、BigInt，八种），又将分为两大类：基础数据类型和引用数据类型。
1. 基础数据类型
null：空对象
undefined：未定义
number：数字
boolean：布尔类型 true/false
string: 字符串
2. 引用数据类型
object: 对象
区别：
存放位置：简单数据类型存放在栈中，复杂数据类型存放在堆中
栈：容量小、运行速度快、先进后出
堆：容量大、运行速度慢、先进先出
简单数据类型的变量是真真实实的数据值，而承载复杂数据类型的变量是变量指针，指向堆中存放的复杂数据。
当我们将一个简单数据赋值给另一个变量时，其实是相当于copy了一份数据给赋值备案号：鄂ICP备2023020200号-1
文章分类
最热文章
最新文章
Ant-Design-Vue 中，在调用RangePicker时，要求限制最大值、最小值，以及间隔，时分秒也需要限制echarts 地图时，城市地理数据中没有南沙群岛，为啥会显示南沙群岛please specify container or renderCanvas!JSX 元素隐式具有类型 "any",因为不存在接口 "JSX.IntrinsicElements"详细介绍JavaScript中的深拷贝、浅拷贝npm unpublish 删除包报错：Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined...Internal server error: [less] Inline JavaScript is not enabled. Is it set in your options?
房贷计算器
万年日历查询
二十四节气