commit message

Author: ihoneys

.git-ftp-include

@@ -0,0 +1 @@
+!build/

.gitignore

@@ -0,0 +1,26 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+/drafts
+/tmp
+cloudbaserc.json
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env
+
+docsearch.json
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.hygen.js

@@ -0,0 +1,7 @@
+// hygen 生成器辅助函数库
+module.exports = {
+  helpers: {
+    // 用于生成 yyyy-MM-dd 文章标题的日期部分
+    date: () => new Date().toISOString().slice(0, 10)
+  }
+};

README.md

@@ -0,0 +1,34 @@
+# 个人博客
+
+## 使用方法
+
+首先克隆仓库代码：
+
+```bash
+$ git clone https://github.com/ihoneys/ihoneys.github.io.git
+
+```
+
+安装依赖：
+
+```bash
+$ cd ihoneys.github.io
+$ yarn install
+# 或使用 npm install，下同
+```
+
+启动项目：
+
+```bash
+$ yarn start
+```
+
+构建项目：
+
+```bash
+# 同时构建中文和英文版
+$ yarn build
+
+# 只构建中文版
+$ yarn build-cn
+```

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

blog/2021-02-09-一文看懂？？和｜｜的区别.md

@@ -0,0 +1,68 @@
+---
+slug: '/no'
+layout: Post
+title: 直观看懂 ?? || 的区别 # 博客标题（必须）
+date: 2021-02-09 # 博客日期，会显示在文章头部（可选）
+author: Lucas
+author_title: 一枚小前端
+author_url: https://github.com/ihoneys
+author_image_url: /img/ihoneys.png
+catalog: true # 是否启用右侧目录：false / true（可选，默认为 false）
+tags: [JavaScript]
+---
+
+日常开发中，`??` 和 `||` 的使用，必不可少，那么我们知道何时用 `??` 何时用 `||` ?。
+
+<!--truncate-->
+
+# 直观看懂 ?? || 的区别
+
+## 写在前面
+
+下面会通过当值为 `undefined`、`null`、`“”`、`false`、`0` 来测试使用 `??` `||` 运算符的结果。
+
+### (1)当值为`undefined` 时：
+
+```tsx
+const a = undefined;
+console.log(`a || 'value' --->${a || "value"}`); // 输出 value
+console.log(`a ?? 'value' --->${a ?? "value"}`); // 输出 value
+```
+
+### (2)当值为`null`时：
+
+```tsx
+const a = null;
+console.log(`a || 'value' --->${a || "value"}`); // 输出 value
+console.log(`a ?? 'value' --->${a ?? "value"}`); // 输出 value
+```
+
+### (3)当值为`””` 时：
+
+```tsx
+const a = "";
+console.log(`a || 'value' --->${a || "value"}`); // 输出 "value"
+console.log(`a ?? 'value' --->${a ?? "value"}`); // 输出 ""
+```
+
+### (4)当值为布尔值`false` 时：
+
+```tsx
+const a = false;
+console.log(`a || 'value' --->${a || "value"}`); // 输出 value
+console.log(`a ?? 'value' --->${a ?? "value"}`); // 输出 false
+```
+
+### (5)当值为`0` 时：
+
+```tsx
+const a = 0;
+console.log(`a || 'value' --->${a || "value"}`); // 输出 "value"
+console.log(`a ?? 66 --->${a ?? "value"}`); // 输出 0
+```
+
+## 总结
+
+使用 `??` 符号时只有当使用左侧值为 `undefined`、`null` 时才会取右右侧的值，而 `||` 当上面的几种情况都存在时都会取右侧设定的默认值。
+
+我相信大家也会有这样的疑问❓，使用 || 时，当左侧的值为 false 的时候都能取到默认值，为什么还要有??这个符号呢，其实这个运算符的一个目的，就是跟链判断运算符`?.`配合使用，为`null`或`undefined`的值设置默认值。

blog/2021-02-13-调试源码环境.md

@@ -0,0 +1,143 @@
+---
+layout: Post
+title: 调试React源码环境 # 博客标题（必须）
+date: 2021-02-13 # 博客日期，会显示在文章头部（可选）
+author: Lucas
+author_title: 一枚小前端
+author_url: https://github.com/ihoneys
+author_image_url: /img/ihoneys.png
+catalog: true # 是否启用右侧目录：false / true（可选，默认为 false）
+tags: [JavaScript, React]
+---
+
+学习React源码的时候，该如何调试是一个头疼的问题，那么如何调试，下面娓娓道来。
+
+<!--truncate-->
+
+# 调试源码环境
+
+---
+
+## 在前面
+
+本文以下内容调试时间与文章发布时间一致，调试版本为 v17.0.2，过程中遇到的问题，会在下面说明。
+
+## 拉去源码
+
+首先需要拉取 React 代码
+
+```
+# 拉取/克隆代码
+git clone <https://github.com/facebook/react.git>
+
+# 网络环境不好，拉取速度慢，可以选择下面2个方案：
+
+# 1. 使用 cpm 代理
+git clone <https://github.com.cnpmjs.org/facebook/react>
+
+# 2. 或者通过码云国内环境下载
+git clone <https://gitee.com/mirrors/react.git>
+
+```
+
+拉取成功后，安装依赖
+
+```
+# 进入 react 源码文件夹
+cd react
+
+# 安装依赖
+yarn
+
+```
+
+在安装依赖过程中，可能会遇到安装失败情况，比如我遇到的：
+
+![Untitled](./img//debug-react//debug.png)
+
+解决方案：
+
+修复 node 版本不兼容的命令配置，忽略引擎版本检查。
+
+```
+yarn config set ignore-engines true
+
+```
+
+再从新 `yarn`即可。
+
+## 打包源码
+
+需要打包 `react`、`scheduler`、`react-dom`三个包，为 dev 环境可以使用的 cjs 包。
+
+```
+# 执行打包命令
+yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE
+
+```
+
+执行 `yarn build` 可能会出现下面打包不成功的问题。
+
+![Untitled](./img/debug-react/debug-1.png)
+
+解决办法就是 尝试使用 `npm` 打包就能打包成功。
+
+```
+npm run build react/index,react/jsx,react-dom/index,scheduler --type=NODE
+
+```
+
+打包成功效果图：
+
+![Untitled](./img/debug-react/debug-2.png)
+
+然后进入源码目录 `build/node_modules` 会生成最新的打包的代码。我们为 `react`、`react-dom`创建 `yarn link`。
+
+> 通过 yarn link 可以改变项目中依赖包的目录指向
+> 
+
+```
+cd build/node_moudles
+# 分别进入 react、react-dom文件下执行 yarn link
+cd react
+yarn link
+cd ..
+cd react-dom
+yarn link
+
+```
+
+## 创建一个调试项目
+
+```
+# 使用 create-react-app 创建一个 react 应用
+npx create-react-app react-origin-code
+
+cd react-origin-code
+
+# 在创建好的项目中，将 react、react-dom 2个包 指向我们刚才生成的包
+yarn link react react-dom
+
+```
+
+我们可以试试在 `react/build/node_modules/react-dom/cjs/react-dom.development.js`文件中打印看看是否成功：
+
+![Untitled](./img/debug-react/debug-3.png)
+
+然后 `yarn start` 启动项目。
+
+可能启动项目之后页面会报错。
+
+![Untitled](./img/debug-react/debug-4.png)
+
+解决方案：
+
+复制 `react/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-dev-runtime.development.js`文件到我们打包好的 `build`文件夹 `build/node_modules/react/cjs`下面即可，再从新 `yarn start`。
+
+最终看看控制台我们在 `react-dom.development.js`文件中添加的 `console.log`
+
+![Untitled](./img/debug-react/debug-5.png)
+
+## 最后
+
+打印成功，妥，可以开始调试了！

blog/2021-03-12-记录一次正则使用变量.md

@@ -0,0 +1,46 @@
+---
+layout: Post
+title: 记录一次正则使用变量 # 博客标题（必须）
+date: 2021-03-12 # 博客日期，会显示在文章头部（可选）
+author: Lucas
+author_title: 一枚小前端
+author_url: https://github.com/ihoneys
+author_image_url: img/ihoneys.png
+catalog: true # 是否启用右侧目录：false / true（可选，默认为 false）
+tags: [JavaScript, RegExp]
+---
+
+一次动态表单验证，并且验证的规则不是规定的，而已根据某种特定的情况变化，因此需要使用正则变量的规则去完成。
+
+<!--truncate-->
+
+# 记录一次正则使用变量
+
+## 背景
+
+最开始写了单个判断小数点后几位的正则，由于多处地方公用，希望能封装起来通用，但是正则判断小数的值是写死的，所以想写成变量的形式，根据传递的值来判断小数位后几位。
+
+## 操作
+
+正则表达式校验小数点后几位：
+
+```tsx
+const validatorPrecision = (value: number) => {
+		const reg = /^(\d+)(.\d{0,4})?$/
+		
+		if (!reg.test(value + '') || value <= 0) {
+		  return Promise.reject(
+		    new Error(t('xxxx')),
+		  )
+		} else {
+		  return Promise.resolve(new Error())
+		}
+}
+```
+
+上面代码正则是使用**字面量形式**去创建的，**如果使用正则表达式里面使用变量**那么需要使用函数创建的方式就是 `new Regexp` 
+
+```tsx
+const precision = 4;
+const reg = new RegExp('^(\\d+)(.\\d{0,' + precision + '})?$');
+```