> 文中使用的青龙镜像版本是 2.10.13

## 安装
按步骤执行指令即可
```bash
# 拉取镜像
docker pull whyour/qinglong:2.10.13

# 指定存放青龙临时文件的根目录（将之加到你的命令行临时文件中）
export QL_HOME = $HOME/dockers/ql

# 挂载镜像
docker run -dit \
  -v $QL_HOME/data:/ql/data \
  -v $QL_HOME/raw:/ql/raw \
  -p 5700:5700 \
  --name qinglong \
  --hostname qinglong \
  --restart unless-stopped \
  whyour/qinglong:2.10.13
```
挂载完成之后，等待一段时间即可通过 localhost:5700 访问青龙后台。<br />安装引导中的通知方式可以先跳过，设定好登录账户和密码之后就可以登录了。
## 试运行
在上面定义的 `$QL_HOME/data`文件夹中添加一个文件 `hello-world.js`文件，试运行一下。
```javascript
// hello-world.js
console.log('hello world')

```
按顺序执行命令
```bash
# 进入容器
docker exec -it qinglong bash

# 运行脚本
task /ql/data/hello-world.js now
```
能够在命令行看到 hello-world 的输出即表示试运行成功！


文中使用的青龙镜像版本是 2.10.13安装按步骤执行指令即可# 拉取镜像 docker pull whyour/qinglong:2.10.13  # 指定存放青龙临时文件的根目录（将之加到你的命令行临时文件中） export QL_HOME = $HOME/dockers/ql  # 挂载...

Docker 青龙

最初是看到狼叔的这篇文章“[迷茫时学习Node.js最好的方法](https://zhuanlan.zhihu.com/p/29625882)”，里面提到的可以通过定时定量的去学习开源仓库的方式来达到自我精进的目的。<br />这个想法触动了我，除了工作和业余时间接活外，这个方法是成本最小、针对性可以很强的方案了。

有了大方向之后，还需要规划一些具体的方法论来让这个过程更加高效。

首先，从时间维度来说，打算先看小模块，小模块有很多好处，从职责单一性、性能的极致优化，和学习成本低来说都是很好的选择，这里从 [Awesome Micro npm Packages](https://github.com/parro-it/awesome-micro-npm-packages) 开始，虽然这里列出的库不多。<br />小模块掌握到一定程度之后，会定期接触一些大型的模块，尝试从大型的模块里面去吸取解耦、架构设计的经验，还有团队协作、文档维护方式等方面都可以有很多可以学习的地方。

之后是学习的方向，根据大牛们的建议和我自己最近在努力的方向，我列出了以下的学习大纲：

- 技术侧
   - 源码剖析和伪代码分析
   - 算法效率
   - 数据结构分析
   - 设计模式分析
   - 编码范式分析
   - 编码技巧、闪光点分析
   - 编码规范
- 项目经营侧
   - 项目目的和需求分析
   - 竞品分析
   - 自动测试实施方案和量化成果（覆盖率、有无压力测试）
   - 开源做法（文档维护方式、issues维护方式、分支管理方式）




最初是看到狼叔的这篇文章“迷茫时学习Node.js最好的方法”，里面提到的可以通过定时定量的去学习开源仓库的方式来达到自我精进的目的。这个想法触动了我，除了工作和业余时间接活外，这个方法是成本最小、针对性可以很强的方案了。有了大方向之后，还需要规划一些具体的方法论来让这个过程更加高效。首先，从...

初衷：为什么通过每天看一个npm小模块来自学

## 定义

官方定义：Flutter is Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase.

- 便捷的 UI 工具类
- 目标是用于构建美观的（Material UI）、基于原生实现的（IOS、Android）的应用
- 应用的平台可以是手机、web和桌面端

## 特性

- 快速的本地开发体验，封装的组件能通过统一的配置接口进行开发
- 开发阶段的热加载



定义官方定义：Flutter is Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single co...

Flutter 是什么

转自[[https://blog.csdn.net/jiangxuqaz/article/details/80264085](https://blog.csdn.net/jiangxuqaz/article/details/80264085)]

# 原理

## 数据来源

在官方获取权威数据的省市县数据来源

[民政部官网](http://www.mca.gov.cn/article/sj/)

![image.png](../images/0a6692ca890c45f7a063ade1ce68cae7.png)


## 数据处理

利用js代码将数据转换成你需要的结构，需要将网站的静态代码下载下来进行处理，原作者是使用JAVA代码进行处理的，js代码的处理逻辑现在暂未验证




转自[https://blog.csdn.net/jiangxuqaz/article/details/80264085]原理数据来源在官方获取权威数据的省市县数据来源民政部官网数据处理利用js代码将数据转换成你需要的结构，需要将网站的静态代码下载下来进行处理，原作者是使用JAVA代码进行处理...

获取最新最完整的省市县数据

## MySQL环境安装

下载链接：[https://dev.mysql.com/downloads/mysql/](https://dev.mysql.com/downloads/mysql/)

最好下载 Community  版本的（免费）

下载完正常安装即可

## Navicat Premium 安装（可视化数据库管理工具）

下载地址：[https://www.navicat.com.cn/products](https://www.navicat.com.cn/products)

改地址下载中文版的，也可自行切换至其他语言

安装完之后先打开软件一次（但先别连接数据库，先破解）

## Navicat Premiun 破解

破解工具：[https://github.com/DoubleLabyrinth/navicat-keygen](https://github.com/DoubleLabyrinth/navicat-keygen)

破解步骤：[https://github.com/DoubleLabyrinth/navicat-keygen/blob/mac/README.zh-CN.md](https://github.com/DoubleLabyrinth/navicat-keygen/blob/mac/README.zh-CN.md)

按照步骤破解即可，这里有个没有列出来的注意点是如何自行创建一个用于授权的证书（第5步），创建步骤如下：

创建步骤：[https://github.com/DoubleLabyrinth/navicat-keygen/issues/50#issuecomment-416824334](https://github.com/DoubleLabyrinth/navicat-keygen/issues/50#issuecomment-416824334)

如上，基本就没有问题了


MySQL环境安装下载链接：https://dev.mysql.com/downloads/mysql/最好下载 Community  版本的（免费）下载完正常安装即可Navicat Premium 安装（可视化数据库管理工具）下载地址：https://www.navicat.com.cn/p...

MacOS安装MySQL环境

# 常用指令
## ls 列出该项目（或全局）安装的依赖列表

```bash
npm ls
```

### 使用示例

```bash
# 只显示全局安装的模块
npm ls -g --depth=0
```

### 常用配置项
#### global

- Default: false
- Type: Boolean

> 显示全局安装的依赖而非当前目录下的项目的依赖


#### depth

- Type: Int

> 包遍历的深度，默认遍历全部


## install 安装依赖

```bash
npm install [<@scope>/]<name>
```

### 常用配置项
#### 安装指定地址的依赖

```bash
npm install git+ssh://git@github.com:npm/cli.git#v1.0.27
npm install git+ssh://git@github.com:npm/cli#semver:^5.0
npm install git+https://isaacs@github.com/npm/cli.git
npm install git://github.com/npm/cli.git#v1.0.27
```

## upgrade 升级依赖

```bash
# 升级全局安装的某个包
npm update <name> -g

# 升级本地生产依赖的某个包
npm update <name> --save(-S)

# 升级本地开发依赖的某个包
npm upgrade <name> --save-dev(-D)

```


常用指令ls 列出该项目（或全局）安装的依赖列表npm ls使用示例# 只显示全局安装的模块 npm ls -g --depth=0常用配置项globalDefault: falseType: Boolean显示全局安装的依赖而非当前目录下的项目的依赖depthType: Int包遍历的深度，...

npm 小知识

## 安装 nvm

参考 [nvm文档](https://github.com/creationix/nvm)

大概流程是

1.下载安装包

> curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash


2.编译安装

> command -v nvm


3.重启终端或者手动引入nvm环境变量

> source ~/.bashrc


## 安装NodeJS和npm

参考 [nvm文档](https://github.com/creationix/nvm#usage)

## Jenkins安装

参考 [Jenkins环境搭建](https://github.com/Runtu4378/blog/issues/14)

这里要注意如果 jenkins 安装和启动的用户（教程中是 root）和安装nvm时的用户不同的话，需要在配置jenkins任务时手动引入对应的nvm用户的环境变量才能找到node指令

## Jenkins配置任务

### 处理环境变量

参考 實作：[Jenkins + Node.js（上）](https://github.com/trunk-studio/jenkins-book/blob/master/nodejs.md)


安装 nvm参考 nvm文档大概流程是1.下载安装包curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash2.编译安装command -v nvm3.重启终端或者手动引入nvm环境变...

使用 Jenkins 进行 NodeJS 项目自动部署

转自 https://www.cnblogs.com/jbelial/articles/2116074.htmlP01: 01背包问题题目有N件物品和一个容量为V的背包。第i件物品的费用是c[i]，价值是w[i]。求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量，且价值总和最大。基本...

dd大牛的《背包九讲》

## 命令列表

```bash
# 查看硬盘使用情况
df -TH

# 查看当前目录所有文件的体积
du -sh *
```

## 清理 journal 日志文件

> [https://www.cnblogs.com/jiuchongxiao/p/9222953.html](https://www.cnblogs.com/jiuchongxiao/p/9222953.html)


```bash
journalctl --vacuum-time=2d
journalctl --vacuum-size=500M
```

## 清理 jenkins 日志文件

设置构建任务定时清理: 设置 "丢弃旧的构建" 策略


命令列表# 查看硬盘使用情况 df -TH  # 查看当前目录所有文件的体积 du -sh *清理 journal 日志文件https://www.cnblogs.com/jiuchongxiao/p/9222953.htmljournalctl --vacuum-time=2d journa...

CentOS定位大文件

## 思路

使用 prerender-spa-plugin 对 spa（单页应用）按照路由生成各自的静态化 html，优化首屏加载速度

```
# 路由结构
/
/maps
/quest
```

```
# 静态文件结构
/index.html
/maps/index.html
/quest/index.html
```

## 配置方式

```javascript
// webpack.prod.conf.js
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

module.exports = {
  // ...other code
	plugins: [
  	new PrerenderSPAPlugin({
      staticDir: path.resolve(__dirname, '../dist'),
      routes: [
        '/',
        '/maps',
        '/quest',
      ],
      // indexPath 指的是要把哪个文件当做获取路由的入口文件（即是各个chunk被引入的那个文件）
      indexPath: path.resolve(__dirname, '../dist/index.html'),
      renderer: new Renderer({
        renderAfterDocumentEvent: 'dva-init',
        // headless: false,
      }),
    })
  ],
}

```



思路使用 prerender-spa-plugin 对 spa（单页应用）按照路由生成各自的静态化 html，优化首屏加载速度# 路由结构 / /maps /quest# 静态文件结构 /index.html /maps/index.html /quest/index.html配置方式// w...

React 项目使用 prerender-spa-plugin 实现预渲染

# 什么是GithubActions

先直接上 [官方文档](https://help.github.com/cn/actions/automating-your-workflow-with-github-actions)，对此有了解的可以跳过本章。GithubActions 是 github 官方推出的自动化模块，利用任务、流程和事件监听等功能的组合实现对 github 项目的持续集成或持续部署。

# 价格

作为个人开发者，对比过 travis-ci 等第三方云构建平台后，发现 github Action 在当前这个时间节点是更好的选择，个人项目有 500mb 的空间额度和每月重置的 2000 分钟部署时长，这对于业余项目来说是挺充裕的了

[价格文档](https://help.github.com/en/github/setting-up-and-managing-billing-and-payments-on-github/about-billing-for-github-actions#about-billing-for-github-actions)

# 示例

## web项目

下面是一个 vue-web 项目的 Action workflows 代码。通过代码分析看下 Actions 能够提供哪些能力

```yaml
name: Build and Publish Front End Framework Website

on: 
  pull_request:
    branches: 
      - release

jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
      with:
        ref: refs/heads/release
    
    - name: Use Node.js 10.x
      uses: actions/setup-node@v1
      with:
        node-version: '10.x'
      
    - name: Build Project
      run: |
        npm install
        npm run build

    - name: List output files
      run: ls

    - name: FTP-Deploy-Action
      uses: SamKirkland/FTP-Deploy-Action@2.0.0
      env:
        FTP_SERVER: ${{ secrets.SERVER_HOST }}
        FTP_USERNAME: mwop
        FTP_PASSWORD: ${{ secrets.SERVER_PASSWORD }}
        METHOD: sftp
        LOCAL_DIR: dist
        REMOTE_DIR: /home/mwop/web/sf/sf-web
        ARGS: --delete --verbose

```

首先整个 workflows 的属性定义有几项 name、on 和 jobs 其中 on 定义的是此 workflows 的触发时机、此处是只有当 release 分支触发了 pull_request 请求才会触发此 workflow 的执行

jobs 定义的是执行单元、可以理解成函数、支持复用，此处只有一个 jobs，负责将此前端项目拉取到云端服务器打包并通过 FTP 推送到个人服务器

jobs 会在 github 的云端机器进行本地执行、所以需要定义执行环境，使用 runs-on 进行配置，然后通过 steps 来定义执行的步骤，由上到下执行，下面简单讲下各个 steps

第一个 steps 是拉取代码，使用了 github 官方提供的 action actions/checkout 版本是 v1.给 action 传参告诉它拉取的是 release 分支

第二个 steps 是定义 nodejs 环境，定义了 jobs 的执行环境后（系统环境），还需要定义项目语言需要的环境，这里定义的是 10.x 版本的 nodejs

第三个 steps 是执行原生代码对项目进行依赖安装和打包，这里没有使用封装好的 action 模块，直接执行原生 shell

第四个 steps 是使用 SamKirkland/FTP-Deploy-Action@2.0.0 模块将打包产物上传到个人服务器，这里用到了 secrets 环境变量，这个环境变量是 github 为用户提供的加密存储文本库，让用户能够将敏感的信息进行加密存储和调用

至此，前端项目的部署就完成了，每当我把代码合并到 release 分支就会触发这个工作流的执行，进行持续部署

## Nodejs项目

下面再贴一个基于 eggjs 的 Nodejs 后端项目的自动部署工作流的代码。思路是触发 ssh 连接，在个人服务器进行代码的更新和项目的重启

```yaml
name: remote ssh command

on: 
  pull_request:
    branches: 
      - release

jobs:
  build:
    runs-on: [ubuntu-latest]
    steps:
      - name: executing remote ssh commands using password
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: mwop
          password: ${{ secrets.SERVER_PASSWORD }}
          port: 22
          script: |
            whoami
            cd ~/web/sf/sf-app/
            git pull origin release
            sh deploy.sh install
            sh deploy.sh migrate di1
            sh deploy.sh restart di1

```

因为项目本来就用了 sh 文件来进行部署代码的封装，所以详细的部署细节没有贴出来，这次部署的重点就在于能够通过 shh 协议连接到个人服务器

# 补充文档

[github action 仓库](https://github.com/actions)

> 这个仓库是 github 官方提供的一些 action 功能模块的封装，没有直接暴露在模板市场里面，如果你在使用 actions/* 的模块的时候希望找到文档的话可以来这里找



什么是GithubActions先直接上 官方文档，对此有了解的可以跳过本章。GithubActions 是 github 官方推出的自动化模块，利用任务、流程和事件监听等功能的组合实现对 github 项目的持续集成或持续部署。价格作为个人开发者，对比过 travis-ci 等第三方云构建平...

使用 GithubActions 进行Nodejs前后端项目自动部署

在 webpack 项目中使用 moment 的时候 moment 源码内部会尝试引入所有语言包，不额外处理的话会导致产物多出约 283kb 的冗余代码

## 处理方式 webpack.IgnorePlugin

在打包配置中加入以下代码

```javascript
// ./build/webpack.prod.conf.js
const webpack = requrie('webpack')

plugins: [
  // 忽略moment
  new webpack.IgnorePlugin({
    resourceRegExp: /^\.\/locale$/,
    contextRegExp: /moment$/,
  }),
]
```

上面代码的作用是忽略从 moment 源码内部发起的引入 `./locale` 行为[[插件文档](https://webpack.js.org/plugins/ignore-plugin)]

- resourceRegExp: 引入资源方式的匹配正则表达式
- contextRegExp: 制定要进行匹配的上下文的正则表达式（如上例指只有在 monent 文件夹中发起的 ./locale 资源引入才进行忽略规则的匹配）

进行了上面的配置之后，理论上 moment 是不会引入任何语言包的，这岂不是没得玩？

所以你需要自己手动引入你需要的语言包

```javascript
// ./src/index.js
import moment from 'moment'
import 'moment/locale/zh-cn.js'

moment.locale('zh-cn')
```

由于这个 `./locale` 的引入行为不是在 moment 文件夹的上下文中进行的，所以并不会被上面的匹配规则匹配到


在 webpack 项目中使用 moment 的时候 moment 源码内部会尝试引入所有语言包，不额外处理的话会导致产物多出约 283kb 的冗余代码处理方式 webpack.IgnorePlugin在打包配置中加入以下代码// ./build/webpack.prod.conf.js co...

Webpack打包中精简moment.js语言包体积

# 利用构建参数（Parameterized Build）控制构建流程

## 使用情景

简单来说，现在一个前端单页引用在构建时候有以下几种流程：

- 只打包业务代码（ `npm run build`）
- 打包/更新 dll 文件（ `npm run dll`）
- 打包/更新静态 db 文件（ `npm run db`）

通常情况下只需要执行上面三种逻辑中的一种，有以下几种方式来实现

1. 在同一个构建任务中的 shell 中选择性注释来启用/禁用不同流程
2. 建三个构建任务分别对应三个任务，选择性构建
3. **利用构建参数在同一个构建任务中控制要走哪个流程**

1 的操作完全靠手动切换，容易出错且不 cool<br />2 无法复用工作空间和部分重复代码和构建配置，<br />3 就是下面要说的方法，在触发构建时增加一个构建参数的输入，通过 jenkins 来注入参数，走不同的构建流程

## 配置流程

> 参考文档
> [https://wiki.jenkins.io/display/JENKINS/Parameterized+Build](https://wiki.jenkins.io/display/JENKINS/Parameterized+Build)


### 参数定义

![image.png](../images/6b1398f2796f6fb2de725e8acfdf6987.png)

1. 在构建任务的 **general** 选项卡中勾选 **参数化构建过程（This build is parameterized）**
2. 点击 **添加参数** -> **选项参数** 定义你要添加的选项式参数
3. 如上述图示我定义了一个 BUILD_TYPE 变量来控制要执行的构建流程

### 参数访问

定义完构架参数之后，构建任务的构建按钮会变成以下样式：

![image.png](../images/43695dfc74267cafba6c3d0608e01b6f.png)

这就是 **选项参数** 类型的参数的注入方式（构建前通过选项选择，然后注入）

我们选择完要注入的参数后，要如何在 shell 中选择呢，你可以直接访问 `$varName` 的方式来访问，如：

```shell
echo === checking BUILD_TYPE ===
echo $BUILD_TYPE
```

执行参数为 dll 的构建会得到以下结果

```
15:59:34 [gf_web] $ /bin/bash /tmp/jenkins2008296156885955729.sh
15:59:34 === checking BUILD_TYPE ===
15:59:34 dll
```

下面是个简单的利用 构造参数 控制构建流程细节的代码片段

```shell
if [ $BUILD_TYPE == "build" ]
then
  echo === build dist ===
  npm run build
elif [ $BUILD_TYPE == "dll" ]
then
  echo === init dll ===
  npm run dll
elif [ $BUILD_TYPE == "db" ]
then
  echo === init db ===
  npm run db
fi
```


# 按需复制文件

> 参考文档
> [https://www.cnblogs.com/irisrain/p/4324817.html](https://www.cnblogs.com/irisrain/p/4324817.html)


构建任务结束后一般通过 cp 命令来将产物复制到目标目录，如何配置 cp 达到尽量少的缓存变动也是需要考虑的

我一般用 `cp -R -u [source dir] [target dir]` ，-u 会按照文件的更新日期先后选择性复制文件


利用构建参数（Parameterized Build）控制构建流程使用情景简单来说，现在一个前端单页引用在构建时候有以下几种流程：只打包业务代码（ npm run build）打包/更新 dll 文件（ npm run dll）打包/更新静态 db 文件（ npm run db）通常情况下只需...

Jenkins使用技巧

## 基本指令

### 用户操作

```bash
# 创建 phpq 用户
adduser phpq

# 为 phpq 用户设置密码
passwd phpq
```

### 用户组操作

```bash
# 创建工作组 test
groupadd test

# 创建 phpq 用户的同时分配工作组 test
useradd -g test phpq

# 给以后的用户分配工作组
usermod -G groupname username
```



基本指令用户操作# 创建 phpq 用户 adduser phpq  # 为 phpq 用户设置密码 passwd phpq用户组操作# 创建工作组 test groupadd test  # 创建 phpq 用户的同时分配工作组 test useradd -g test phpq  # 给以...

centos 创建用户和用户组

## 改造原因

使用 VUE 单页应用进行开发的资讯类页面面临下面问题：

- 如果使用依赖分包的策略的话，包含页面内容展示的业务代码（被包含在分包文件中）会在入口文件和 vendor 文件下载并解析完之后才会开始下载
- 在网络情况恶劣的时候，要经历很长一段时间的白屏（只有 #app 的 div 的页面），要等到入口文件下载完（耗时一）加上业务代码下载完（耗时2）才会开始显示页面

由于是简单的前端半静态页面，所以用不上服务端渲染等方式

针对这个情况，找到的其中一个简单的解决方法就是预渲染

> 参考资料
> Vue SSR 指南：[https://ssr.vuejs.org/zh/](https://ssr.vuejs.org/zh/)
> Vue SSR VS Vue 预渲染：[https://ssr.vuejs.org/zh/#服务器端渲染-vs-预渲染-ssr-vs-prerendering](https://ssr.vuejs.org/zh/#%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-vs-%E9%A2%84%E6%B8%B2%E6%9F%93-ssr-vs-prerendering)


## 改造流程

改造方式是通过在 webpack 生成打包流程中增加 prerender-spa-plugin 的方式来实现，配置比较简单

> 参考资料
> prerender-spa-plugin 文档：[https://github.com/chrisvfritz/prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin)
> Vue-router 类项目示例：[https://github.com/chrisvfritz/prerender-spa-plugin/tree/master/examples/vue2-webpack-router](https://github.com/chrisvfritz/prerender-spa-plugin/tree/master/examples/vue2-webpack-router)


主要的配置思路就是配置哪些路由需要经过预渲染处理，和预渲染处理的事件的配置

最终代码如下：

```javascript
// webpack.config.prod.js
const PrerenderSPAPlugin = require('prerender-spa-plugin')

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const staticRoutes = ['/']	// 要进行预渲染的路由，这里只预渲染首页
...other code
// spa
new PrerenderSPAPlugin({
  // Required - The path to the webpack-outputted app to prerender.
  staticDir: config.build.assetsRoot, // 就是静态产物目录，path.resolve(__dirname. '../dist') 之类的
  // captureAfterElementExists: '#app',
  // Required - Routes to render.
  routes: staticRoutes,
  // 下面的配置是参考 https://github.com/chrisvfritz/prerender-spa-plugin/issues/198 来的
  // 目的是去除预渲染时在 head 里面插入的由 webpack 的入口文件引入的模块分包文件
  postProcess (renderedRoute) {
    if (renderedRoute.route.endsWith('.html')) {
      renderedRoute.outputPath = path.join(config.build.assetsRoot, renderedRoute.route)
    }
    renderedRoute.html = renderedRoute.html.replace(/(\<head\>.*?)(\<script.*?\<\/script\>){1,}(.*\<\/head\>)/g, '$1$3');
    // 下面部分的代码的作用是重定义#app
    if (staticRoutes.indexOf(renderedRoute.route) !== -1) {
      renderedRoute.html = renderedRoute.html.replace(/<div id="app">/, '<div id="app" data-server-rendered="true">');
    }
    return renderedRoute
  },
  renderer: new Renderer({
    // inject: {
    //   foo: 'bar'
    // },
    headless: true,
    renderAfterDocumentEvent: 'render-event',
  })
})
...other code
```

除了 webpack 配置更改之外，还需要在 Vue 实例启动时增加一个事件推送，告诉预渲染插件何时进行渲染

```javascript
// src/main.js

...other code
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  mounted () {
    // You'll need this for renderAfterDocumentEvent.
    document.dispatchEvent(new Event('render-event'))	// 就是这句话，在vue实例挂载完之后发送事件通知插件收集要加静态化的内容
  },
})
...other code

```

## 注意点

### 分包策略带来的异常

预渲染插件内部的原理大概是模拟 Vue 实例的挂载（使用 puppeteer 模块带的 chrome 内核），然后获取到预渲染后的内容生成到 html 中

使用了分包策略的打包配置会导致生成下面这样的文件：

```html
<!DOCTYPE html>
<html data-dpr="1" style="font-size: 213.333px;">

<head>
  
  
  <script type="text/javascript" charset="utf-8" async="" src="/static/js/5.1bc0a15fb25f1b931c8f.js"></script>
  <script type="text/javascript" charset="utf-8" async="" src="/static/js/0.ffb0e5711f3cbcb4ffa6.js"></script>
  <script type="text/javascript" charset="utf-8" async="" src="/static/js/7.5ea22241c854b46a5154.js"></script>
</head>

<body>
  <div id="app">
    
  </div>
  
	<script type="text/javascript" src="/static/js/manifest.ed26a9ae3f73b180f2c9.js"></script>
  <script type="text/javascript" src="/static/js/vendor.0c5682db47fbea096227.js"></script>
  <script type="text/javascript" src="/static/js/app.b4f90732fdc2accbeab9.js"></script>  
</body>
</html>

```

这样的静态文件渲染时无法按照预期表现，原因是本应加载完入口文件再动态插入到 head 里面去加载的分包文件实际上比入口文件要早加载，这里可以看到使用了 async 标签，但是 async 的表现在这种情况下会使分包文件加载早于入口文件，报出 Uncaught ReferenceError: webpackJsonp is not defined 的异常

#### 解决方法

解决这个问题的方式可以用上面的 postProcess 对输出内容进行处理，将产物的 head 标签里面的分包文件去除

### Vue 渲染机制带来的的异常闪烁

#### 现象描述

页面先显示了正常的页面结构，然后突然白屏，隔一段时间后（视网路环境而定），重新渲染出正常的页面结构

#### 成因

页面在下载完入口文件和样式文件之后就显示出预期的页面结构了，不过在开始加载分包代码的时候，页面重新变为了空白（此时正在执行将 #app 里面的内容替换为 vue-router 要显示的内容的过程，不过此时的做法是先清空 #app 里面的内容再等待下载回来的分包文件决定如何进行替换），但是因为分包文件下载需要时间，所以在开始下载到下载完成这段时间内，页面一直为空白状态，对于用户的体验来说就是，已经看到页面了（以为能操作）-页面突然又变空白了-页面又好了

#### 解决方法

为 #app 增加属性 data-server-rendered="true" 让 Vue 以增量 diff 的方式去更换 #app 的内容，但由于 prerender-spa-plugin 获取到的 #app 看样子不是直接从给定模板的 html 中提取的，所以需要做一点 hack

代码如下：

```javascript
// webpack.config.prod.js

...other code
postProcess (renderedRoute) {
  if (renderedRoute.route.endsWith('.html')) {
    renderedRoute.outputPath = path.join(config.build.assetsRoot, renderedRoute.route)
  }
  renderedRoute.html = renderedRoute.html.replace(/(\<head\>.*?)(\<script.*?\<\/script\>){1,}(.*\<\/head\>)/g, '$1$3');
  // 下面部分的代码的作用是重定义#app
  if (staticRoutes.indexOf(renderedRoute.route) !== -1) {
    renderedRoute.html = renderedRoute.html.replace(/<div id="app">/, '<div id="app" data-server-rendered="true">');
  }
  return renderedRoute
},
...other code

```

> 相关资料
> White flash when loading prerendered page: [https://github.com/chrisvfritz/prerender-spa-plugin/issues/131](https://github.com/chrisvfritz/prerender-spa-plugin/issues/131)


### 自定义预渲染时页面的展示内容

#### 思路

预渲染在某些情况下会降低页面的展示速度和效果

- 预渲染产生的静态资源链接（图片等）会占用浏览器并行下载的数量，延迟实际注入业务逻辑的入口文件和分包文件的下载
- 无法改变在慢网络下资源未下载完时页面的样式异常（如没有图片占位时元素的体积异常，大而全的全局样式表下载完成之前丑陋的页面）

我能想到的比较好的解决方法是尽可能精简预渲染产生的代码，在下载完实际入口文件和分包文件之前给用户以良好的体验，为整个页面增加一个新的生命周期节点：预渲染期

#### 为什么不直接在 index.html 里面写死

预渲染可以不同路由定义不同的预渲染页面内容和处理逻辑

#### 最佳实践

1.通过 prerender-spa-plugin 的 renderer 的 inject 注入临时变量，判断此次渲染是预渲染还是在浏览器中实际渲染，以展示不同的内容<br />2.更改 #app 内容挂载的时机，等待所有业务代码下载完之后再进行内容替换（暂时还不知道怎么做）

## 效果

### SPA 改造前
| 节点 | 网络环境-本地 | 网络环境-本地Slow 3G |
| --- | --- | --- |
| html文件下载完 | 50ms | 2.1s |
| 入口文件加载完 | 350ms | 10.5s |
| 分包文件加载完 | 900ms | 20s |
| 页面开始显示内容 | 1.06s | 20.60s |
| DOMContentLoaded事件 | 437ms | 12.47s |
| Load事件 | 3.35s | 1.7m |

### SPA 改造后

| 节点 | 网络环境-本地 | 网络环境-本地Slow 3G |
| --- | --- | --- |
| html文件下载完 | 14ms | 2.76s |
| 入口文件加载完 | 172ms | 45s |
| 分包文件加载完 | 562ms | 1.9m |
| 页面开始显示内容 | 755ms | 50s |
| DOMContentLoaded事件 | 498ms | 44.93s |
| Load事件 | 829ms | 2.6m |


### 思考

这里看到在本地慢网络环境时的表现并不理想，有几个可能的影响因素

- 未开启 GZip SPA改造前的数据是从测试环境中获取的， SPA改造后的数据是从本地的 http-server 中获取的

改造原因使用 VUE 单页应用进行开发的资讯类页面面临下面问题：如果使用依赖分包的策略的话，包含页面内容展示的业务代码（被包含在分包文件中）会在入口文件和 vendor 文件下载并解析完之后才会开始下载在网络情况恶劣的时候，要经历很长一段时间的白屏（只有 #app 的 div 的页面），要等到...

VUE 单页应用脚手架的 SPA 改造

[https://github.com/vuejs/vue-cli/issues/2463#issuecomment-423704639](https://github.com/vuejs/vue-cli/issues/2463#issuecomment-423704639)

```javascript
chainWebpack: config => {
  // TODO: Remove this workaround once https://github.com/vuejs/vue-cli/issues/2463 is fixed
  // Remove preload plugins for multi-page build to prevent infinite recursion
  Object.keys(pagesObject).forEach(page => {
    config.plugins.delete(`preload-${page}`)
    config.plugins.delete(`prefetch-${page}`)
  })
}
```



https://github.com/vuejs/vue-cli/issues/2463#issuecomment-423704639chainWebpack: config => {   // TODO: Remove this workaround once https://github....

Vue 多页应用 RangeError: Maximum call stack size exceeded 解决方案

# 文档地址

# 安装和本地部署

TinyMCE可以使用云端引用（Tiny Cloud）和本地部署（Self-hosted）两种方式，国内网络状况抓鸡，这里介绍本地部署方式。

首先在项目本地安装 `tinymce` 模块 `npm i -S tinymce` 

然后将 tinymce 整个项目复制到静态资源托管文件夹中 （如我使用的脚手架是 vue-cli 就将 tinymce 复制到 `./public` 中）

```javascript
// vue.config.js
...
configureWebpack: config => {
	return {
  	plugins: [
    	 new CopyPlugin([
          { from: path.resolve('./node_modules/tinymce'), to: 'libs/tinymce' },
       ]),
    ]
  }
},
...
```

```
// .env
...
// tinymce 静态托管根路径
VUE_APP_TINYMCE_PATH = /libs/tinymce
...
```

```html

  <head>
    ...
    <script src="<%= VUE_APP_TINYMCE_PATH %>/tinymce.min.js"></script>
    ...
  </head>
```

经过上述配置就能够使用本地的 tinymce 库而不是使用云端 cdn 的方式了

> [https://www.tiny.cloud/docs/integrations/vue/#procedure](https://www.tiny.cloud/docs/integrations/vue/#procedure)
> [https://www.tiny.cloud/docs/general-configuration-guide/advanced-install/#npm](https://www.tiny.cloud/docs/general-configuration-guide/advanced-install/#npm)



# 工具栏配置

分为顶部菜单（menu）和工具栏（toolbar）

> 可配置项：[https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar](https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar)
> 可配置菜单项和工具栏项：[https://www.tiny.cloud/docs/advanced/editor-control-identifiers/#menucontrols](https://www.tiny.cloud/docs/advanced/editor-control-identifiers/#menucontrols)


# 插件配置

TinyMCE 默认情况没有表格、列表等功能，需要使用插件来进行支持，下面贴点代码：

```javascript
...
initConfig = {
	...
  plugins: 'table lists',
  toolbar: [
		...
    {
      name: 'list', items: [ 'numlist', 'bullist' ],
    },
    ...
  ],
  ...
}
...
```

# 语言包配置

TinyMCE 默认是英文，可以切换成其他语言，但是本地部署的方式把语言包单独托管在本地比较好一点，下面贴点代码

我把中文的语言包文件下载到 `/libs/tinymce_lang` 

```
// .env
...
VUE_APP_TINYMCE_LANG_PATH = /libs/tinymce_lang
...

```

```javascript
...
initInfo = {
	...
  language: 'zh_CN',
  language_url: process.env.VUE_APP_TINYMCE_LANG_PATH + '/zh_CN.js',
  ...
}
...

```

> 语言包文档地址：[https://www.tiny.cloud/docs/configure/localization/#language](https://www.tiny.cloud/docs/configure/localization/#language)


# 字体配置

中文字体涉及要统一在不同系统（MacOS、Window）的表现，如微软雅黑字体在 Window 可以用 `Microsoft Yahei` 在 MacOS 可以用 `PingFang SC` 来呈现

在 TinyMCE 上也要针对字体进行配置，下面贴点代码：

```javascript
...
initInfo = {
  ...
	font_formats: [
    '微软雅黑=Microsoft Yahei, PingFang SC',
    '黑体=SimHei, STHeiti',
    '宋体=SimSun, STSong',
    '楷体=KaiTi, STKaiti',
    '新宋体=NSimSun, STZhongsong',
    '仿宋=FangSong, STFangsong',
    'Andale Mono=andale mono,times',
    'Arial=arial,helvetica,sans-serif',
    'Arial Black=arial black,avant garde',
    'Book Antiqua=book antiqua,palatino',
    'Comic Sans MS=comic sans ms,sans-serif',
    'Courier New=courier new,courier',
    'Georgia=georgia,palatino',
    'Helvetica=helvetica',
    'Impact=impact,chicago',
    'Symbol=symbol',
    'Tahoma=tahoma,arial,helvetica,sans-serif',
    'Terminal=terminal,monaco',
    'Times New Roman=times new roman,times',
    'Trebuchet MS=trebuchet ms,geneva',
    'Verdana=verdana,geneva',
    'Webdings=webdings',
    'Wingdings=wingdings,zapf dingbats',
  ].join('; '),
  ...
}
...
```


# 完整配置代码

```javascript
<template>
  <div class="tinymce-editor">
    <Editor
      v-model="currentValue"
      :init="initConfig"
      :toolbar="toolbar"
      plugins="table wordcount lists"
    />
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

const initConfig = {
  menubar: 'format tools table',
  toolbar_mode: 'wrap',

  font_formats: [
    '微软雅黑=Microsoft Yahei, PingFang SC',
    '黑体=SimHei, STHeiti',
    '宋体=SimSun, STSong',
    '楷体=KaiTi, STKaiti',
    '新宋体=NSimSun, STZhongsong',
    '仿宋=FangSong, STFangsong',
    'Andale Mono=andale mono,times',
    'Arial=arial,helvetica,sans-serif',
    'Arial Black=arial black,avant garde',
    'Book Antiqua=book antiqua,palatino',
    'Comic Sans MS=comic sans ms,sans-serif',
    'Courier New=courier new,courier',
    'Georgia=georgia,palatino',
    'Helvetica=helvetica',
    'Impact=impact,chicago',
    'Symbol=symbol',
    'Tahoma=tahoma,arial,helvetica,sans-serif',
    'Terminal=terminal,monaco',
    'Times New Roman=times new roman,times',
    'Trebuchet MS=trebuchet ms,geneva',
    'Verdana=verdana,geneva',
    'Webdings=webdings',
    'Wingdings=wingdings,zapf dingbats',
  ].join('; '),

  min_height: 500,
  branding: false,

  language: 'zh_CN',
  language_url: process.env.VUE_APP_TINYMCE_LANG_PATH + '/zh_CN.js',
}

export default {
  components: {
    Editor,
  },

  props: {
    value: String,
  },
  data () {
    return {
      currentValue: '',
      initConfig,
      toolbar: [
        {
          name: 'history', items: [ 'undo', 'redo' ],
        },
        {
          name: 'font', items: [ 'formatselect', 'fontselect', 'fontsizeselect' ],
        },
        {
          name: 'formatting', items: [ 'bold', 'italic', 'underline', 'strikethrough', 'removeformat' ],
        },
        {
          name: 'alignment', items: [ 'alignleft', 'aligncenter', 'alignright', 'alignjustify' ],
        },
        {
          name: 'list', items: [ 'numlist', 'bullist' ],
        },
        {
          name: 'indentation', items: [ 'outdent', 'indent' ],
        },
      ],
    }
  },

  watch: {
    currentValue (val) {
      if (val !== this.value) {
        this.$emit('input', val)
      }
    },
    value (val) {
      if (val !== this.currentValue) {
        this.currentValue = val
      }
    },
  },
}
</script>

```

文档地址安装和本地部署TinyMCE可以使用云端引用（Tiny Cloud）和本地部署（Self-hosted）两种方式，国内网络状况抓鸡，这里介绍本地部署方式。首先在项目本地安装 tinymce 模块 npm i -S tinymce 然后将 tinymce 整个项目复制到静态资源托管文件夹...

TinyMCE 富文本编辑器 使用记录

## 在国内使用 Flutter 的注意事项

主要是 Flutter 提供了翻译的国内站 [https://flutter-io.cn/](https://flutter-io.cn/)

也可以使用国内镜像地址来替代官方地址

如：

- 源 URL:<br />[`https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip`](https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip)<br />
- 国内镜像 URL:<br />[`https://storage.flutter-io.cn/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip`](https://storage.flutter-io.cn/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip)

> 引用自[https://flutter-io.cn/](https://flutter-io.cn/)
> 
> 如果你在国内使用 Flutter，那么你可能需要找一个与官方同步的可信的镜像站点，帮助你的 Flutter 命令行工具到该镜像站点下载其所需的资源。
> 你需要为此设置两个环境变量：“PUB_HOSTED_URL”和“FLUTTER_STORAGE_BASE_URL”，然后再运行 Flutter 命令行工具，查看[设置教程](https://flutter.io/community/china)。
> ### Flutter 社区
> FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
> PUB_HOSTED_URL: https://pub.flutter-io.cn
> ### 上海交通大学 Linux 用户组
> FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn
> PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn
> 
> #### 注意：我们无法保证这些镜像网站得以长期维护和运行，请慎重选择一些可信的镜像网站。


## 安装

[https://flutter.dev/docs/get-started/install](https://flutter.dev/docs/get-started/install)

不同平台有不同的安装方式，这里以 MacOS 的为例，具体安装细节见[最新文档](https://flutter.dev/docs/get-started/install/macos)，这里讲几点比较关键的步骤

### 下载SDK

国内下载包建议手动替换下载地址的域名为国内域名：

> 原地址：https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.5.4-hotfix.2-stable.zip
> 替换后：https://storage.flutter-io.cn/flutter_infra/releases/stable/macos/flutter_macos_v1.5.4-hotfix.2-stable.zip
> 
> 将 https://storage.googleapis.com 替换为 https://storage.flutter-io.cn


SDK 包大小约 600M

### 解压SDK

类似于 NodeJS 的本地解压安装，将 SDK 解压到某目录并设定环境变量

```bash
# 创建SDK目录
cd /User/runtu
mkdir apps

# 复制SDK压缩包到本目录
cp ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip .

# 解压SDK
unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip

# 获取目录路径（设置环境变量时用到）
cd flutter
pwd

# /User/runtu/apps/flutter
```

### 设定环境变量

```bash
# 编辑环境变量文件
vi ~/.bash_profile

# 设定环境变量
# export PATH="$PATH:/User/runtu/apps/flutter/bin"

# 保存文件

# 更新环境变量
source ~/.bash_profile

# 查看效果
echo $PATH
```

参考资料：[https://flutter.dev/docs/get-started/install/macos#update-your-path](https://flutter.dev/docs/get-started/install/macos#update-your-path)

### 检查依赖

设定好 SDK 的环境变量之后，我们就能在命令行的任何地方访问到 flutter 指令了，官方提供了一个指令给我们检查还有哪些环境依赖未安装

```bash
flutter doctor
```

按照提示安装好依赖之后就可以准备开发了

主要的依赖是下面几点：

- Android Studio 的安装和相关的 Android SDK、Flutter和Dart插件的安装
- Xcode的安装和相关的配置
- Vscode的Flutter安装和配置
- 其他环境依赖

参考资料：[https://flutter.dev/docs/get-started/install/macos#run-flutter-doctor](https://flutter.dev/docs/get-started/install/macos#run-flutter-doctor)

### 配置镜像

在启动 Flutter 项目前，先设置国内的镜像地址

```bash
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
```
### 
### 快速初始化一个示例项目

配置好 Vscode 环境之后，在 VsCode 命令行中键入 `Flutter: New Project` 来选择要初始化项目的位置

如果忘了配置镜像地址的话，可以先设置镜像地址，然后在手动安装示例项目的依赖包

```bash
# 安装依赖
flutter packages get
```

如果没有连接真实设备的话，可以先启动一个模拟器（MacOS）

```bash
flutter emulators --launch apple_ios_simulator • iOS Simulator • Apple
```

启动 Flutter 项目

```bash
flutter run
```

## 参考资料

[Using Flutter in China](https://flutter.dev/community/china)


在国内使用 Flutter 的注意事项主要是 Flutter 提供了翻译的国内站 https://flutter-io.cn/也可以使用国内镜像地址来替代官方地址如：源 URL:https://storage.googleapis.com/flutter_infra/releases/stab...

开始第一个Flutter demo

# 下载证书

如我从阿里云申请的 ssl 能直接下载证书，得到 host.pem 和 host.key 两个文件

# 设置nginx

将上述两个文件复制到如 /etc/nginx/cert/ 目录下，然后编辑 nginx 配置，代码如下

```
server {
 listen 443;
 server_name localhost;
 
 root html;
 index index.html index.htm;
 
 ssl on;
 ssl_certificate   /etc/nginx/cert/host.pem;
 ssl_certificate_key  /etc/nginx/cert/host.key;
 ssl_session_timeout 5m;
 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
 ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
 ssl_prefer_server_ciphers on;

 location / {
     root html;
     index index.html index.htm;
 }
}

# 将所有 http 请求重定向到 https
server {  
    listen  80;  
    server_name localhost;  
      
    rewrite ^(.*)$  https://$host$1 permanent;  
}  
```

完成上述配置后，重启 nginx 即可

# 启用 HTTP2

只需在上述 https 的配置中修改以下内容

```
listen 443 ssl http2;
listen [::]:443 ssl http2;
```

然后重启 nginx 即可


下载证书如我从阿里云申请的 ssl 能直接下载证书，得到 host.pem 和 host.key 两个文件设置nginx将上述两个文件复制到如 /etc/nginx/cert/ 目录下，然后编辑 nginx 配置，代码如下server {  listen 443;  server_name l...

Nginx 设置 https

Code Splitting 是指按照你预设的方式去进行代码分离，如今前端项目越来越依赖于打包工具进行预处理，打包工具推出的代码分离特性应对以下情景：

1. 单页应用（SPA）如何按照路由结构分离业务代码
2. 把常用库进行代码分离（如moment、jquery等）
3. 懒加载等实现的前提

[webpack 官方 CodeSplitting 教程](https://webpack.js.org/guides/code-splitting) 中建议以以下三个角度去进行代码分离：

1. 定义多入口：手动通过定义 entry 属性来分离模块
2. 避免重复引用：使用  [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/) 来避免模块重复用引用
3. 异步加载：将某些模块的代码分离为单独文件并通过函数按需加载

具体的代码分离看项目架构而异，下面记录一次简单的 React SPA 项目的 Code Splitting 改造

# 思路

按照路由拆分项目，把产物结构改造成如下结构：

```bash
# 改造前

DLL.js # 环境dll
index.html # 入口html
main.[contentHash].js # 业务代码入口
```

```bash
# 改造后

chunks/
  route_index.[contentHash].js # / 路由的业务代码
  route_about.[contentHash].js # /about 路由的业务代码
DLL.js # 环境dll
index.html # 入口html
main.[contentHash].js # 业务代码入口（已剔除 /, /about 路由的业务代码）
```


---


# 施工

> 相关依赖：
> [_@loadable/component_](https://www.npmjs.com/package/@loadable/component)
> [_webpack-DynamicImports_](https://webpack.js.org/guides/code-splitting#dynamic-imports)


## 将模块抽离为 Chunk

webpack 支持使用关键字 import() 来异步打包模块（被引入的这个模块视为分裂点 chunk，会被另外打包为 chunkFile）,没有被命名的 chunk 会被名为自动生成的 chunkId，可以通过 [magic comments](https://webpack.js.org/api/module-methods#magic-comments) 来手动定义 chunkFileName，

> 相关知识点文档：
> [webpack-import()](https://webpack.js.org/api/module-methods#import-1)
> [magic comments](https://webpack.js.org/api/module-methods#magic-comments)


```javascript
// 定义了一个名为 route_index 的 chunk
const Index = import(
  /* webpackChunkName: "route_index" */ 
  './routes/index'
)
```

根据你的 webpack 配置里面的 output.chunkFilename 上面抽离的 chunk 会被按照定义输出，如：

```javascript
// webpack.dev.conf.js

module.exports = {
	output: 'dist',
  publicPath: '/',
  filename: '[name].[contenthash].js',
  chunkFilename: 'chunks/[name].[chunkhash].js',
}

// chunk "route_index" 会生成为以下文件：
// chunks/router_index.d1f38639a5badd76c7c8.js

```

## 使用异步加载React模块

上述代码是把某个路由的模块文件 chunk 化，但是 import() 生成的是一个 Promise 加载实例，无法直接用来作为路由组件，你要进行以下逻辑的处理：

1. 在 chunk 组件外面包裹一个组件，处理：
2. 在加载实例未 resolve 前显示占位符组件，组件加载完之后再显示实际的组件
3. 把所有参数向下传递给实际组件

通过上面处理才能把 chunk 和 React 组件结合起来，不过我们有现成的库 [_@loadable/component_](https://www.npmjs.com/package/@loadable/component)_ _，它能提供一个包裹组件完成上述功能，具体代码如下：

```javascript
// ./src/components/Loading/index.js
const Loading = () => {
  return (
    <div>loading...</div>
  )
}

export default Loading

```

```javascript
// ./src/common/utils.js
import loadable from '@loadable/component'
import Loading from "../components/Loading"

export const dynamicWrap = func => loadable(func, {
  fallback: <Loading />,
})
```

```javascript
// ./src/router.js
import {
  BrowserRouter as Router,
  Route,
  Link,
} from 'react-router-dom'

import {
  dynamicWrap,
} from './common/utils.js'

const Index = dynamicWrap(() => import(
  /* webpackChunkName: "router_index" */ 
  './routes/index'
))
const About = dynamicWrap(() => import(
  /* webpackChunkName: "router_about" */
  './routes/about'
))

export default () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about/">About</Link>
            </li>
          </ul>
        </nav>

        <Route
          path="/" exact
          component={Index}
        />
        <Route
          path="/about/"
          component={About}
        />
      </div>
    </Router>
  );
}

```

至此就完成了按照路由结构实现 CodeSplitting 的改造


Code Splitting 是指按照你预设的方式去进行代码分离，如今前端项目越来越依赖于打包工具进行预处理，打包工具推出的代码分离特性应对以下情景：单页应用（SPA）如何按照路由结构分离业务代码把常用库进行代码分离（如moment、jquery等）懒加载等实现的前提webpack 官方 Co...

React SPA 项目 Code Splitting 实战

## 资源指什么

本文提到的资源，除特殊说明外，指电影。除此之外，还有电视剧、综艺、纪录片、动漫、漫画、体育赛事、MV、音轨、游戏等常见资源，命名规则相通，文末将简单介绍。

本文提到的资源指从 PT 站下载到的资源（通常一部压制后的电影，1080p 在 5G 以上，720p 在 2.5G 以上，受编码方式、视频长度影响），而非网络在线视频。

## 常见命名

需要说明的是，各家 PT 站对资源的命名规则基本一致，可能会在细节上有不同要求。这里只按某个常见规则进行举例。

电影资源的命名：

```
[中文名] 名称 [年份] [剪辑版本] [发布说明] 分辨率 来源 [音频/]视频编码-发布组名称

如：蝙蝠侠:黑暗骑士 The Dark Knight 2008 PROPER 720p BluRay x264-SiNNERS
```

下面进行逐字段解释。

### 电影名称

往往只写英文的（或者官方的外文）正式名称，不会写中文，便于国际间流通。中文名开头的资源可能是国内的视频站（非PT）为了便于国内用户辨识而另行增补。

单词间的间隔符通常为空格，但也有压制组或站点采用“.”点号作为间隔符。

### 电影年份

这项没什么好说的，字面意思。

### 剪辑版本

如果有的资源是特别的剪辑版，如导演剪辑版，会标识有 `DC/Director's Cut`；其他的还有 `UNRATED`（未分级版）、`LIMITED` 等。

### 发布说明

用于压制组解释说明该资源的备注，如 `PROPER`、`REPACK`，说明该版本修正了上一版中的一些瑕疵。

### 分辨率

- **1080p**：1080 逐行扫描（Progressive）。实际分辨率通常为 `1920 x ****`（如 1920 x 1080 ）或 1440 x 1080 等。
- **1080i**：1080 隔行扫描（Interlaced）。
- **720p**：720 逐行扫描。实际分辨率通常为 `1280 x ***`（如 1280 x 720）或 960 x 720 等。
- **SD**：标清（Standard Definition）。未达到 720p 标准视频的分辨率应选择 SD，如 DVDRip。

还有 **2K**、**4K**、**2160p** 等等

关于分辨率还要多说一下，大家可能知道如 720p 的 720 指的是短边的像素。而有的电影有效画面很窄，算上上下黑边后才有 720px，为了提高压制效率，发布组会裁掉上下黑边，最终只剩 500 多 px，但这样的资源也算是 720p。

### 来源

- **Blu-ray**：来源为蓝光光碟。蓝光原碟、蓝光 remux 以及各种来源于蓝光原碟的重编码（BDRip）的来源都应选择“Blu-ray”。还有衍生的“Criterion Collection BluRay”（一种收藏级的蓝光碟）。算是目前最常见的电影资源来源。
- **HDDVD**：类似于 “Blu-ray”。
- **DVD**：来源为 DVD。DVD 原碟、DVDR 以及 DVDRip 的来源都应选择“DVD”。常见于老电影资源。
- **HDTV**：来源为 HDTV。HDTV 流媒体（ts/tp等）以及各种来源于 HDTV 的重编码（HDTVRip）的来源都应选择“HDTV”。常见于综艺资源。
- **TV**：来源为 TV。PDTV/SDTV/IPTV/DSR 流及重编码的来源应选择“TV”。
- **WEB-DL**：来源为网络媒体，如 Netflex 之类的站点。常见于流媒体自己生产的网络电视、电影资源。
- **Other**：其它来源。

### 编码

- **H.264**：H.264/H264，AVC，x264 等。很常见的电影资源编码。
- **VC-1**：VC-1/VC1，WMV 等。
- **Xvid**：XviD，DivX 等，常见于 DVD 资源。
- **MPEG-2**：MPEG-2/MPEG2。
- **Other**：其它。

近年来 H.265 的资源的逐渐多了。<br />FLAC、DD 等，音频编码

### 发布组

发布组，或者发布人@发布组，也没什么太好说的，组很多，曾经也有人去区分梯队，不过梯队当然也不是一成不变的，实际资源质量、你的需求才是重要的。比如你想看导演剪辑版、带导演评论音轨/配音音轨、内挂字幕的资源，知道怎么去分辨，然后去找就好了。

## 字幕

发布资源的人，真的没义务发布字幕。压制组的目标有速度（比如0day）、质量（Top组），但真不一定都自己有字幕组的人员。

需要字幕可以专门去相关网站找对应的字幕下载，然后挂到视频里看就好了，如果不同步，可以手动调整下。当然，也有很多好心人会上传到PT种子信息页上。

字幕也有分几种的：

- **硬字幕**：又称内嵌字幕，就是把字幕跟画面一起压成了视频了，像水印一样，无法隐藏。
- **内挂字幕**：封装到了资源文件中，但可通过播放器选择切换不同的字幕、隐藏字幕、调整字幕字体、时间轴等。
- **外挂字幕**：字幕网站下载到的字幕文件，如 sub，ass，srt 拖到播放器中就能使用，与内挂类似。

（好久前总有不知道哪流出韩语硬字幕的资源，蓝光都没出就有了，总体来说不太行）

## 格式

通常压制后的高清资源格式是 .mkv 的。可以理解成一种容器，可以容纳各种视频、音频编码的数据，能装入内挂字幕、多音轨。

## 其他类型资源的命名

不细说了，大同小异：

电视剧：

```
[中文名] 名称 [年份] S**E** [发布说明] 分辨率 来源 [音频/]视频编码-发布组名
例：越狱 Prison Break S04E01 PROPER 720p HDTV x264-CTU
```

音轨：

```
[中文艺术家名 - 中文专辑名] 艺术家名 - 专辑名 [年份] [版本] [发布说明] 音频编码[-发布组名称]
例：恩雅 - 冬季降临 Enya - And Winter Came 2008 FLAC
```

游戏：

```
[中文名] 名称 [年份] [版本] [发布说明][-发布组名称]
例：红色警戒3:起义时刻 Command And Conquer Red Alert 3 Uprising-RELOADED
```


资源指什么本文提到的资源，除特殊说明外，指电影。除此之外，还有电视剧、综艺、纪录片、动漫、漫画、体育赛事、MV、音轨、游戏等常见资源，命名规则相通，文末将简单介绍。本文提到的资源指从 PT 站下载到的资源（通常一部压制后的电影，1080p 在 5G 以上，720p 在 2.5G 以上，受编码方...

资源命名方式

> 原文地址：[https://www.developerway.com/posts/why-custom-react-hooks-could-destroy-your-app-performance](https://www.developerway.com/posts/why-custom-react-hooks-could-destroy-your-app-performance)
> 原文作者：NADIA MAKAREVICH
> 原文发布于：2022 年 01 月 24 日


标题很吓人，不是吗？可悲的是，事实确实如此：对于对性能敏感的应用程序来说，如果不小心编写和使用自定义 React hook，它很容易就会成为最大的性能杀手。

我不会在这里解释如何构建和使用 hook，如果您以前从未自己实现过 hook，[React 文档](https://react.dev/learn/reusing-logic-with-custom-hooks)对此有很好的介绍。我今天要重点讨论的是 hook 对复杂应用程序性能的影响。

# 让我们使用自定义 hook 实现一个弹窗

从本质上讲，hook 只是一种高阶函数，允许开发人员在不创建新组件的情况下使用状态和上下文等功能。当您需要在应用程序的不同部分之间共享同一段需要状态的逻辑时，自定义 hook 就显得非常有用。有了它，React 开发进入了一个新时代：有了 hook 之后，我们的组件变得纤细整洁、不同关注点的分离也更加容易的实现。

例如，让我们来实现一个弹窗。看看使用传统的方式和自定义 hook 的方式，哪种方式比较优雅。

首先，我们来实现一个 `ModalBase` 组件，它不包含状态，只是在 `isOpen` 属性为真时渲染对话框，并在点击弹窗背后的遮罩时触发 `onClose` 回调。

```tsx
type ModalProps = {
  isOpen: boolean;
  onClosed: () => void;
};

export const ModalBase = ({
  isOpen,
  onClosed,
}: ModalProps) => {
  return isOpen ? (
    <>
      <div css={modalBlanketCss} onClick={onClosed} />
      <div css={modalBodyCss}>Modal dialog content</div>
    </>
  ) : null;
};
```

接着是状态管理，即“打开弹窗/关闭弹窗”逻辑。在“传统”方法中，我们通常会实现一个高阶组件，它处理状态管理，并接受一个触发器组件属性来触发弹窗的打开。类似这样：
```tsx
export const ModalDialog = ({ trigger }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <div onClick={() => setIsOpen(true)}>{trigger}</div>
      <ModalBase
        isOpen={isOpen}
        onClosed={() => setIsOpen(false)}
      />
    </>
  );
};
```

然后就可以这样使用了：
```tsx
<ModalDialog trigger={<button>Click me</button>} />
```

这并不是一个特别优雅的解决方案，将触发器组件包裹在一个 div 中，从而将触发器组件的位置和可访问性耦合在一起。更不用说的是，这个不必要的 div 会导致 DOM 更大、更乱。

接下来是使用自定义 hook 的方式。如果我们将“打开/关闭”逻辑提取到自定义 hook 中，在 hook 中渲染该组件，并作为 hook 的返回值导出，导出中的组件和 API 分别控制何处安置组件和何处触发打开弹窗函数，我们就能获得两全其美的效果。在 hook 中，同样实现了“高阶”弹窗，它可以处理自己的状态，但没有和触发器耦合在一块，也不需要关注如何实现触发器：
```tsx
export const useModal = () => {
  const [isOpen, setIsOpen] = useState(false);

  const open = () => setIsOpen(true);
  const close = () => setIsOpen(false);
  const Dialog = () => (
    <ModalBase onClosed={close} isOpen={isOpen} />
  );

  return { isOpen, Dialog, open, close };
};
```

而在消费者侧，我们只需少量代码，就能实现触发器、显示弹窗：
```tsx
const ConsumerComponent = () => {
  const { Dialog, open } = useModal();

  return (
    <>
      <button onClick={open}>Click me</button>
      <Dialog />
    </>
  );
};
```

如果这还不算完美，那我就不知道什么才算完美了！😍详见 [codesandbox](https://codesandbox.io/s/modal-dialog-example1-9ds2c?file=/src/App.tsx)。只是不要急着马上在你的应用程序中使用它，除非你读完了它的性能阴暗面 😅。

# 性能影响

在[上一篇文章](https://www.developerway.com/posts/how-to-write-performant-react-code)中，我详细介绍了导致性能低下的各种模式，并实现了一个“慢”应用程序：只是在页面上呈现一个未经优化的简单列表，其中包含约 250 个国家。但每一次交互都会导致整个页面重新渲染，因此它可能是有史以来最慢的简单列表。详见 [codesandbox](https://codesandbox.io/s/re-renders-final-bad-4znwe)，点击列表中的不同国家就能明白我的意思（如果你使用的是最新的 Mac，可以稍微调低一下 CPU，以获得更直观的体验）。

**怎样调低你的 CPU**：在 Chrome 开发者工具的 Performance 页签，点击顶部右侧的“齿轮”展开菜单，找到里面的“CPU throttling”进行配置。

在这个慢应用中使用我们新的、完美模式弹窗 hook，看看会发生什么。`Page` 组件的代码相对简单，如下所示：
```tsx
export const Page = ({
  countries,
}: {
  countries: Country[];
}) => {
  const [selectedCountry, setSelectedCountry] =
    useState<Country>(countries[0]);
  const [savedCountry, setSavedCountry] = useState<Country>(
    countries[0],
  );
  const [mode, setMode] = useState<Mode>('light');

  return (
    <ThemeProvider value={{ mode }}>
      <h1>Country settings</h1>
      <button
        onClick={() =>
          setMode(mode === 'light' ? 'dark' : 'light')
        }
      >
        Toggle theme
      </button>
      <div className="content">
        <CountriesList
          countries={countries}
          onCountryChanged={(c) => setSelectedCountry(c)}
          savedCountry={savedCountry}
        />
        <SelectedCountry
          country={selectedCountry}
          onCountrySaved={() =>
            setSavedCountry(selectedCountry)
          }
        />
      </div>
    </ThemeProvider>
  );
};
```

现在我需要在“Toggle theme”按钮附近添加一个按钮，打开一个弹窗，为该页面添加一些未来的附加设置。幸运的是，有了自定义 hook 之后再简单不过了：在代码顶部引入 `useModal` hook，在需要的地方添加按钮，并将打开弹窗函数传递给按钮。页面组件几乎没有变化，仍然非常简单：<br />![image.png](../../images/2980b6d04605ab5bc0926929a69b2d55.png)

您可能已经猜到结果了🙂。引入的这 2 个几乎为空的 divs，同样导致了超慢的整个列表重渲染的现象😱。请参见 [codesandbox](https://codesandbox.io/s/re-renders-bad-with-dialog-6egnq?file=/src/country-settings/page.tsx)。

我们来看看发生了什么，我们的 `useModal` 挂钩使用了状态。我们知道，状态变化是组件重新渲染的原因之一。这同样适用于 hook——如果 hook 里面的状态发生变化，“宿主”组件就会重新渲染。这完全说得通。如果我们仔细观察一下 `useModal` hook，就会发现它可以视为对一系列 `setState` 操作的一个抽象封装，而且它存在于 `Dialog` 组件**之外**。从本质上讲，它与在 `Page` 组件中直接调用 `setState` 没有什么区别。

这就是 hook 的最大危险所在：是的，hook 帮助我们把 API 整理得非常漂亮。但从使用之后的结果代码、自定义 hook 所鼓励的使用方式，实质上是将状态从他本来该在的位置上往上提升了。除非你进入 `useModal` 的实现内部，或者对 hook 和重渲染机制有丰富的经验。否则你完全不会注意到这一点。我只会觉得我在 `Page` 组件中渲染了一个弹窗组件并调用了一个命令式 API 来打开它而已，不会察觉到我引入了新的、有可能导致组件重渲染的状态。

在“传统”方法中，状态被封装在通过属性传入 `trigger` 的略显简陋的 `Modal` 组件中。当触发器按钮被点击的时候，`Page` 不会触发重渲染。而现在点击触发器按钮时会改变 `Page` 组件的状态，从而触发重渲染（上述示例代码这个重渲染代价尤为缓慢）。只有重渲染完成后，弹窗才会出现，因此出现了很大的延迟。

![image.png](../../images/fb086d2022cf1ff94ca96dcd7db18690.png)

那么，我们能做些什么呢？假设我们没有时间和资源来修复 `Page` 组件的底层性能（假设它糟糕的重渲染性能是历史遗留原因），因为实际的应用程序开发更多会出现这种情景。我们不敢动已有的代码，但至少我们可以确保新功能的添加不会增加性能问题，而且本身速度很快。在这里，我们只需将状态“向下”移动，远离缓慢的 `Page` 组件即可：
```tsx
const SettingsButton = () => {
  const { Dialog, open } = useModal();

  return (
    <>
      <button onClick={open}>Open settings</button>
      <Dialog />
    </>
  );
};
```

然后在 `Page` 中渲染 `SettingButton` 组件：
```tsx
export const Page = ({
  countries,
}: {
  countries: Country[];
}) => {
  // same as original page state
  return (
    <ThemeProvider value={{ mode }}>
      // stays the same
      <SettingsButton />
      // stays the same
    </ThemeProvider>
  );
};
```

现在，当点击按钮时，只有 `SettingsButton` 组件会重新渲染，而缓慢的 `Page` 组件则不受影响。从本质上讲，我们是在模仿“传统”方法中的状态模型，同时保留了基于 hook 的 API。请参见解决方案的 [codesandbox](https://codesandbox.io/s/re-renders-bad-with-dialog-fixed-rrfey?file=/src/country-settings/page.tsx)。

![image.png](../../images/41e47da87f422c176aaf4ed90f153dff.png)

# 为 `useModal` 增加更多功能

让我们对 hook 性能的讨论更加深入一点 🙂。举例来说，设想一下您需要跟踪弹窗内容中的滚动事件。也许您想在用户滚动文本时发送一些分析事件，以跟踪阅读情况。如果我不想在 `ModalBase` 中实现这个功能，而是在 `useModal` hook 中实现，会发生什么？

这一点相对容易实现。我们只需引入一个新的状态来跟踪滚动位置，在 `useEffect` 中添加事件监听器，并将 ref 传递给 `BaseModal` 以获取内容元素来挂载监听器。类似这样：
```tsx
export const ModalBase = React.forwardRef(
  (
    { isOpen, onClosed }: ModalProps,
    ref: RefObject<any>,
  ) => {
    return isOpen ? (
      <>
        <div css={modalBlanketCss} onClick={onClosed} />
        <div css={modalBodyCss} ref={ref}>
          // add a lot of content here
        </div>
      </>
    ) : null;
  },
);

export const useModal = () => {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useRef<HTMLElement>(null);
  const [scroll, setScroll] = useState(0);

  // same as before

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const handleScroll = () => {
      setScroll(element?.scrollTop || 0);
    };

    element.addEventListener('scroll', handleScroll);
    return () => {
      element.removeEventListener('scroll', handleScroll);
    };
  });

  const Dialog = () => (
    <ModalBase onClosed={close} isOpen={isOpen} ref={ref} />
  );

  return {
    isOpen,
    Dialog,
    open,
    close,
  };
};
```

现在我们可以根据这个新状态值来做任何事情了。现在，让我们稍微往后倒退一步，假装 `Page` 组件的性能问题并非难以解决，再次把 `useModal` hook 直接在 `Page` 组件中使用。代码详见 [codesandbox](https://codesandbox.io/s/re-renders-bad-with-dialog-with-scroll-p9wi8?file=/src/country-settings/page.tsx)。

滚动甚至无法正常工作！😱 每次我试图滚动弹窗里面的内容时，它都会重置到滚动条顶部！

好吧，让我们从逻辑上思考一下。根据我们[已经知道](https://www.developerway.com/posts/how-to-write-performant-react-code)的，在 render 函数里面创建组件是致命的。因为 React 会在每次重渲染时重新创建并挂载这些组件。我们还知道，hook 会随着状态的改变而改变。这就意味着，当我们引入滚动状态时，每次滚动都会改变状态，从而导致 hook 重新渲染，导致 Dialog 组件重新创建。这与在 render 函数内部创建组件的问题一样，解决方法也完全相同：我们需要将组件提取到 hook 外部，或者直接将其记忆化。
```tsx
const Dialog = useMemo(() => {
  return () => (
    <ModalBase onClosed={close} isOpen={isOpen} ref={ref} />
  );
}, [isOpen]);
```

滚动无效的问题已经解决，但是还有另一个问题：每次滚动时，缓慢的 `Page` 组件都会重新渲染。由于弹窗的内容都是文本，因此很难注意到这个问题。你可以将 CPU 降低 6 倍。滚动一次，然后尝试选中弹窗中的部分文字。你会发现甚至无法选中任何文字，就像是浏览器卡死了一样。这是因为它正在忙于处理一连串的重渲染！示例请见 [codesandbox](https://codesandbox.io/s/re-renders-bad-with-dialog-with-scroll-fixed-scroll-0s5g3?file=/src/country-settings/page.tsx)。

毫无疑问，在将其投入生产之前，我们肯定需要解决这个问题。让我们再看看我们的组件代码，尤其是这一部分：
```tsx
return {
  isOpen,
  Dialog,
  open,
  close,
};
```

每次重新渲染时，我们都会返回一个新对象，由于我们现在每次滚动都会重新渲染 hook，这意味着每次滚动时该对象也会发生变化。我们在这里并没有使用滚动状态，它完全是 `useModal` hook 的内部数据。所以，只需将该对象记忆化就能解决问题？
```tsx
return useMemo(
  () => ({
    isOpen,
    Dialog,
    open,
    close,
  }),
  [isOpen, Dialog],
);
```

你知道最棒（或最可怕）的是什么吗？它没有！😱详见 [codesandbox](https://codesandbox.io/s/re-renders-bad-with-dialog-with-scroll-fixed-scroll-and-memo-35lqx?file=/src/country-settings/modal-dialog.tsx)。

这也是 hook 在性能方面的另一个巨大缺陷。事实证明，在 hook “之内”或“之外”发生的状态变化并不重要。**hook 中的每次状态变化，无论是否影响其返回值，都会导致挂载它的组件重新渲染。**

当然，嵌套使用时也是如此：如果一个 hook 的状态发生变化，会令挂载了它的另一个 hook 也一样发生变化，如此一致网上传播，直到事件到达“宿主”组件并触发组件的重新渲染（这会引起另一个对象为组件，往下传播的重新渲染事件），**无论 hook 中间是否应用了任何记忆化**。

将“滚动”功能提取到新的 hook 中完全没有区别，缓慢的 `Page` 组件还是会重新渲染😔。
```tsx
const useScroll = (ref: RefObject) => {
  const [scroll, setScroll] = useState(0);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const handleScroll = () => {
      setScroll(element?.scrollTop || 0);
    };

    element.addEventListener('scroll', handleScroll);
    return () => {
      element.removeEventListener('scroll', handleScroll);
    };
  });

  return scroll;
};

export const useModal = () => {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useRef<HTMLElement>(null);
  const scroll = useScroll(ref);

  const open = useCallback(() => {
    setIsOpen(true);
  }, []);

  const close = useCallback(() => {
    setIsOpen(false);
  }, []);

  const Dialog = useMemo(() => {
    return () => (
      <ModalBase
        onClosed={close}
        isOpen={isOpen}
        ref={ref}
      />
    );
  }, [isOpen, close]);

  return useMemo(
    () => ({
      isOpen,
      Dialog,
      open,
      close,
    }),
    [isOpen, Dialog, open, close],
  );
};
```
详见 [codesandbox](https://codesandbox.io/s/re-renders-bad-with-dialog-with-scroll-extracted-woeer?file=/src/country-settings/modal-dialog.tsx)。

如何解决？那么，唯一能做的就是将滚动跟踪移到 `useModal` hook 之外，并将其用在不会导致连锁重新渲染的地方。例如，可以引入 `ModalBaseWithAnalytics` 组件：
```tsx
const ModalBaseWithAnalytics = (props: ModalProps) => {
  const ref = useRef<HTMLElement>(null);
  const scroll = useScroll(ref);

  console.log(scroll);

  return <ModalBase {...props} ref={ref} />;
};

```

并用它代替 `useModal` 中的 `ModalBase`：
```tsx
export const useModal = () => {
  // the rest is the same as in the original useModal hook

  const Dialog = useMemo(() => {
    return () => (
      <ModalBaseWithAnalytics
        onClosed={close}
        isOpen={isOpen}
        ref={ref}
      />
    );
  }, [isOpen, close]);

  return useMemo(
    () => ({
      isOpen,
      Dialog,
      open,
      close,
    }),
    [isOpen, Dialog, open, close],
  );
};
```

这样改造之后，滚动跟踪导致的状态变化就被局限在 `ModalBaseWithAnalytics` 组件中，不会影响到缓慢的 `Page` 组件了，详见 [codesandbox](https://codesandbox.io/s/re-renders-bad-with-dialog-scroll-fixed-for-good-v6ohp?file=/src/country-settings/modal-dialog.tsx)。

今天就写到这里！希望这篇文章能~~吓到你~~让你对自定义 hook 如何在不影响应用程序性能的情况下编写和使用。在离开之前，让我们回顾一下 hook 的性能规则：

- hook 中的每一次状态变化都会导致其“宿主”组件重新渲染，无论 hook 是否返回了该状态，也无论该状态是否被记忆化。
- hook 的调用链也是一样，hook 的每次状态变化都会导致所有“父” hook 发生变化，直到到达“宿主”组件，而“宿主”组件又会触发重新渲染。

以及在编写或使用自定义 hook 时需要注意的事项：

- 在使用自定义 hook 时，确保该 hook 封装的状态要满足限制：这些状态都是“宿主”组件有用到的。否则的话，如有必要，可将其“下移”到较小的组件中。
- 永远不在在 hook 内定义和使用自循环的状态。或者不要使用有使用了自循环状态的 hook。
- 当使用自定义 hook 时，确保它不会执行一些独立的状态操作，即这些操作不会在其返回值中暴露出来。
- 在使用自定义 hook 时，请确保该 hook 使用的所有 hook 也遵循上述规则。

注意安全，祝愿您的应用程序从现在起快速运行！✌🏼



自定义 hook 如何在不影响应用程序性能的情况下编写和使用。本文总结了几条性能规则和实现自定义 hook 时需要注意的事项。

[译] 为什么自定义 hook 有可能会毁掉你应用的性能

## 背景
有一个开发的项目在实现内嵌浏览器的时候需要支持老旧系统的 Flash 特性，Electron 官方是有对此特性的支持的，不过在具体使用过程中有一些疑难杂症，下面讲一下。

## 官方文档
笔者使用的 Electron 版本是 9.0.0，官方对此版本的 Flash 特性开启的方式如下：

1. 通过 `appendSwitch` 指令定义 `ppapi-flash-path` 和 `ppapi-flash-version` 来引入 pepperFlash
2. 在需要开启 Flash 特性的 `BrowserWindow` 或 `webview` 上配置 `plugins` 属性为 `true`

代码示例如下：
```javascript
const { app, BrowserWindow } = require('electron')
const path = require('path')

// 指定 flash 路径，假定它与 main.js 放在同一目录中。
let pluginName
switch (process.platform) {
  case 'win32':
    pluginName = 'pepflashplayer.dll'
    break
  case 'darwin':
    pluginName = 'PepperFlashPlayer.plugin'
    break
  case 'linux':
    pluginName = 'libpepflashplayer.so'
    break
}
app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname, pluginName))

// Optional: Specify flash version, for example, v17.0.0.169
app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169')

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      plugins: true, // 此处
    }
  })
  win.loadURL(`file://${__dirname}/index.html`)
  // Something else
})
```
> 文档地址：[https://www.electronjs.org/docs/tutorial/using-pepper-flash-plugin](https://www.electronjs.org/docs/tutorial/using-pepper-flash-plugin)


## 提取 PepperFlash 文件
在 chrome 的地址栏输入并进入 `chrome://version/`，找到 flash 一栏，这里显示的是你的 chrome 使用的 PepperFlash 版本和本地文件的位置。<br />如 `32.0.0.433 /Users/huorunquan/Library/Application Support/Google/Chrome/PepperFlash/32.0.0.433/PepperFlashPlayer.plugin`<br />找到对应文件并将其拷贝到你的 electron 项目中。

> 以上操作在以下版本的 chrome 均验证有效
> mac: 85.0.4183.102
> window_x64: 65.0.3325.181


## 解决 WIndow 的 chrome 自带的 pepflashplayer.dll 无效的问题
出于未知原因，笔者提取的 window 64 位和 32 位的 chrome 自带的 pepflashplayer.dll 均无法用来支持 electron 的 flash 功能。<br />出于无奈，只能自行安装并提取 PepperFlash 库。

PepperFlash 是由谷歌维护的，运行于 Chromium 上的对 FLash 实现支持的库。<br />不过由于 Flash 从 2017 年宣布停止维护开始，在国内由某家公司单独进行维护并进行锁区的策略，所以从 30 版本开始的国内特供版都需要一个 `FlashHelperService` 的系统服务，这对于要求跨平台使用的业务系统来说是致命的。

下面提供一个好不容易找到的 29 版本的 Flash 安装包，[https://cowtransfer.com/s/54e68143770940](https://cowtransfer.com/s/54e68143770940)（提取码xvnuwh）<br />安装完在（TODO: 目录位置）中找到 pepflashplayer.dll 并使用即可，~~该安装包是 32 位的，dll可以同时在 64 位和 32 位的 electron 上使用~~

> 相关文档
> [Pepper Flash Player - Debian Wiki](https://wiki.debian.org/PepperFlashPlayer)
> [如何看待Adobe Flash Player锁区？ - 知乎](https://www.zhihu.com/question/281163698)

## POC验证
由于 Electron 对引入 pepperFlash 的 debug 支持很弱，所以需要一个最小可用版本的代码来快速验证 flash 的支持是否可用，这里有两部分，一是使用 flash 的网站（[http://ssfw.njfy.gov.cn/ssfwzx/ext/flash/flash.jsp](http://ssfw.njfy.gov.cn/ssfwzx/ext/flash/flash.jsp)）、二是 electron 的代码：

```javascript
// index.js
const { BrowserWindow, app } = require('electron')

const loadFlash = () => {
	app.commandLine.appendSwitch(
		'ppapi-flash-path',
		'D:\\Users\\mine\\files\\flashSupport\\pepflashplayer32_32_0_0_314.dll'
	)
  app.commandLine.appendSwitch('ppapi-flash-version', '32.0.0.314')
}
const funcFlash = () => {
  const wins = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      devTools: true,
      webviewTag: true,
      plugins: true
    }
  })

  wins.loadFile('./index.html')

  wins.webContents.openDevTools()
}

loadFlash()

app.whenReady().then(() => {
  funcFlash()
})
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>test flash</title>
  </head>
<body>
  <webview
    frameborder="0"
    style="width: 800px; height: 600px;"
    src="http://ssfw.njfy.gov.cn/ssfwzx/ext/flash/flash.jsp"
    plugins
  ></webview>
</body>
</html>
```

创建上述两个文件，然后 `electron index.js` 便可快速验证 flash 的开启是否成功。

## 其他疑难杂症
### 1、ppapi-flash-path 的路径需为绝对路径
```javascript
// 这里提供的要是绝对路径
app.commandLine.appendSwitch(
  'ppapi-flash-path',
  'D:\\Users\\mine\\files\\flashSupport\\pepflashplayer32_32_0_0_314.dll'
)
```


背景有一个开发的项目在实现内嵌浏览器的时候需要支持老旧系统的 Flash 特性，Electron 官方是有对此特性的支持的，不过在具体使用过程中有一些疑难杂症，下面讲一下。官方文档笔者使用的 Electron 版本是 9.0.0，官方对此版本的 Flash 特性开启的方式如下：通过 appen...

Electron 开启 Flash 特性

> 原文地址：[https://newrelic.com/blog/nerd-life/successful-software-developers-habits](https://newrelic.com/blog/nerd-life/successful-software-developers-habits)
> 原文作者：Kevin Casey
> 原文发布于：2017年4月15日


想象一下，你正在比较两个软件开发人员的简历：Dev A 与 Dev B。两位候选人的背景和技能几乎完全相同：编程语言、框架、平台、方法论、行业等等。在纸面上，他们几乎是同一人。然而，如果可以通过一些特征表明（无论从任何方面来看），表明 Dev A 在他的职业生涯中可能会比 Dev B 更成功。这会是哪些特征呢？

事实证明，技术技能和经验只能让你走得那么远。卓越开发者还培养了关键的行为特征和心态，使他们脱颖而出。我们询问了多个软件专家，了解到能够将卓越开发者和其他人进行区分的习惯和特点。他们列出或预测了这 10 个习惯：
## 1. 你编写整洁、可重用的代码，更易于阅读和测试。
有许多方法可以编写整洁的代码，更易于重用、阅读和测试，但无论使用哪种方法，这都是高质量软件开发的一个越来越关键的特征。位于英国的 [Enigma Digital](https://www.enigma-recovery.com/) 的软件开发经理 [Andrew Magee](https://www.linkedin.com/in/andrew-magee-622398a/) 为我们提供了这样的出发点：**为每个函数分配一个唯一的目的**。

“当你开始编码时，通常是从一行接着一行地编写代码开始，进而使这个函数越来越大”。Magee 说道。一开始你可能会觉得这样更简单，但这会产生几个问题：你的代码变得更难读、更难重用和更难测试。 “一个函数应该只做一件事。如果它做了多于一件事，就不够聚焦。”

Magee 还建议为变量和函数分配清晰、有意义的名称——如果你遵循一个函数一个目的的经验法则，这会更容易实现。 “作为开发人员，你花在阅读代码上的时间比写代码的时间更多”，Magee 指出。“重要的是，在几周后回到开发时，你能够快速、轻松地理解它的意图。”
## 2. 理解你的代码如何推动整体业务。
有很多开发者有能力为公司开发的新的移动应用程序。但是能够在开发前就理解到，公司为什么要开发移动应用程序的大局观的人却很少。优秀的开发人员“广泛了解公司在业务层面上的运作方式，使用业务语言进行沟通，并掌握将业务语言转换为技术语言，反之亦然”。[Ask Applications](http://iac.com/brand/ask-applications) 的软件工程副总裁 Todd Stephan 这样说。同样，Stephan 补充说：优秀的开发人员可以用业务术语讲述技术的价值，换句话说，用公司除开发以外其他人，包括高管们能够理解的术语来表达。

[MarketGoo](http://www.marketgoo.com/) 的 CTO [Jose Miguel Pérez](https://www.linkedin.com/in/josemiguelperez/) 在这一点上也持有类似的观点：“他们公司寻求这种开发者：对项目的目标、目标和影响有广泛的理解，不只局限在作为一个开发者需要了解的范围”。

这里有一个能更好地了解代码对公司整体贡献的关键步骤：专注于你用户或客户。 “成功的开发人员对他们交付的东西负责——不只是指存储库，还包含了对用户的交付”、“顶尖的开发人员会随身携带寻呼机并保持值班状态。”
## 3. 倾听比你说的更重要——或者说你要先倾听，然后再表达
[Evus Technologies](https://www.evus.com/) 的开发主管 Christopher Mendy 表示：“如果你在一个和其他开发人员共事的办公室里，先倾听，然后再说话。这是学习的最快捷方式”。

这需要谦卑，特别是如果你认为自己是房间里最聪明的人。MarketGoo 的 Perez 补充说：优秀的开发人员具有“承认自己不懂的能力和意愿”。此外，他建议不要成为那种只会说一堆技术术语而不承认自己可能还不知道特定问题答案的程序员。
## 4. 你是有纪律性的
除非天赋异常出众，否则它并不是一切。实际上，天赋或技能只是成功公式的一部分。[Badger Maps](https://www.badgermapping.com/) 的 CTO [Gady Pitaru](https://www.linkedin.com/in/gadypitaru/) 表示：“纪律是另一部分”。“一位拥有优秀技能的软件工程师如果没有纪律，就像一位没有地图的老练水手：擅长驾驶船只，但找不到海岸。”

Pitaru 将一个有纪律的软件工程师描述为：

1. 不会为了速度而牺牲质量。除非是必须时，他们意识到他们正在创造技术债务，并努力在未来偿还。
2. 接受开发流程，因为他们认识到这些开发流程是为了帮助开发成功而设立的。例如：“他们在代码审查期间完充分参与，并鼓励有建设性的冲刺回顾”。
3. 了解专注于开发工作的价值：“他们想办法确保自己能做得到，例如使用番茄工作法、阻止日程提醒或戴上耳机等”。
## 5. 你能深深的专注于正确的事情
New Relic 的 Ruby Agent 软件工程师 Katherine Wu 分享了一种特定形式的规律，标志着高度成功的开发人员：他们有能力专注于特定项目的共同目标，而不会被一些“很容易得到”的想法或不切实际的幻想分心，这些想法实际上并没有使你更接近目标。

“我认为沉迷于某个特定技术实现的细节或边缘情况是一种普遍的习惯”，New Relic 的 Ruby Agent 软件工程师 Katherine Wu 说。她将这种心态描述为“如果我们能实现 X、Y 和 Z 就好了”，的思考方式。然而实际项目的目标是“A、B 和 C”。对于工程师来说，这是一种自然的思考过程，但有时需要加以控制。“当你稍微退后一点，你可能会意识到你正在为某些不是所有人都想要实现的宏伟目标而付出很大的努力”。

Wu 表示，有时向前看是好的，只要你能够重新聚焦于：你知道你需要完成的任务是更加重要的，相对于你以为你可能需要完成的任务。这其中一部分是确保你与团队的其他成员处于同一频率。正如 New Relic 的 Smith 所指出的那样，“成功的开发人员明白，创新是一项团队运动”。
## 6. 你对于解决问题有坚持不懈的态度
“要有坚定的信念——某些问题非常困难”，Mendy 指出。“只要有足够的时间和研究，总会找到解决方案，能找到一个难题的解决方案是最棒的感觉”。
## 7. 你能在互联网上得到陌生人的帮助
不要将坚持与骄傲混淆。卓越的开发者不会因为自己的自尊心，而将编程中问题转化成不必要的生产力损耗，特别是当解决方案可能可以在网上找到时。有时，寻求帮助——是的，谷歌也算——是解决问题的最有效的第一步。

“学会如何用谷歌搜索”，Mendy 建议道。“你将遇到的几乎所有计算机编程问题都已经有了解决方案。在某个地方，一定有人遇到了你正在遇到的同样的问题，并且他们通常会在网上发布他们的解决方案”。

不要认为在网上寻求帮助只意味着从 [Stack Overflow](https://stackoverflow.com/) 中复制和粘贴代码。New Relic 的 Tori Wieldt 指出，优秀的开发人员会花时间了解他们在网上找到的解决方案的 What，Why 和 How。她建议：“研究代码的作用以及它如何解决问题，而不是单纯的复制和粘贴；如果没有这个研究透这个解决方案的背景知识，它可能还会回来找你麻烦”。
## 8. 你需要超越技能，才能达到专业水平，但不意味你已经精通它们
当 Ask 正在招聘开发人才时，Stephan 会寻找候选人之前经验中的专业知识，这些经验不必与他试图应聘的工作直接相关。“如果一个人之前很快地建立了专业知识，那么有理由相信这个人能够在其他技能和技术方面再次做到这一点”，他说。

Badger Maps 的 Pitaru 解释了技能和精通之间的区别：“一名拥有优秀技能的软件工程师可以编写 Django 数据库查询，但一名经验丰富的软件工程师将知道如何最有效地编写该查询，以便一行代码可以扩展”。

区分技能和精通。后者意味着你没有任何需要学习的东西。“不要认为你会精通所有事情”，Mendy 说。“现在的开发只是不断地持续学习”。
## 9. 对新事物保持开放态度
另一个 Mendy 所描述的持续学习的前提条件：对新事物持开放态度，并在需要时接受并采纳它们。

“高度成功的软件工程师不断学习行业中的新趋势，并将其直接应用于他们的工作中”，Pitaru 说。“成功的软件工程师知道如何过滤和筛选那些有助于他们继续做到最好和成长的新语言、框架和方法论。可以说，对于一个成功的软件工程师来说，最重要的技能是知道如何获取新的技能”。

正如 Pitaru 所说，学习不会随着计算机科学学位或编码训练营的完成、以及听到“你被雇用了！”这些话而停止（如果你担心这正在发生，那么可能是时候[重启](https://blog.newrelic.com/technology/software-developer-career-boost/)了）。

“保持开放的心态。最糟糕的事情就是只关注一种语言或工具”，Mendy 建议。毕竟，“如果你只有一把锤子，那么所有东西看起来都像钉子”。
## 10. 勇于走出舒适圈
New Relic 的 Wu 表示，她对持续教育和技能发展的方法的不断完善是部分受到了 Cal Newport 的书[《深度工作》](http://calnewport.com/books/deep-work/)的启发。其中的关键引语是：真正的技能发展需要“能够深入探究一个主题，并面对其中困难的部分——并坚持度过那些沮丧的时刻，以便你真正探索，真正理解眼前的事物”。

这可能因为各种各样的原因而变得困难，包括所有那些常常让我们感觉很忙碌但不一定有助于 Wu 所描述的深度思考的事情，比如电子邮件、Slack、会议等等。例如，Wu 注意到她在努力理解复杂话题时遇到了一些困难的信号：她的注意力开始漂移。 “我可能正在阅读一篇技术博客文章，在某个想法的段落中间，甚至在某个句子的中间，我的大脑像是背叛了我——我想知道 Facebook 上有什么？”

Wu 从 Newport 的书中获得的经验是将所学知识运用到实践中。为了实现这个目标，她会设置专注的时间段，例如两小时，并且避免分散注意力的干扰。她将此比作冥想练习，因为专注于某个目标需要刻意地将注意力引回任务本身。她说：“当我注意力开始游离时，我会注意到这一点并轻轻地将注意力重新引回到手头的任务上。这样我就可以努力攻克难题，找出哪些部分我不理解，然后想办法找到答案。我需要进行实验吗？需要编写一个 demo 项目来实验它吗？需要找一个专家为我解释吗？这需要对困难的话题有意识地进行攻克”。

要明确的是，关闭电子邮件几个小时并不会使您成为更好的开发人员——它只是一种集中于真正的进展和改进的机制。她说，要变得更好，“你必须在困难的事情上工作。即使你没有干扰，而且得到了很多编码时间，如果你只是一遍又一遍地构建相同的简单应用程序，那并不一定会扩展你技能的边界。如果你不刻意地扩展你的技能边界，你可能不会尝试以帮助你作为技术贡献者真正成长的方向来构建技能。”

如果感兴趣的话，可以阅读[《成为更棒的开发者的 8 个途径》](https://blog.newrelic.com/engineering/8-ways-become-a-better-coder/)


原文地址：https://newrelic.com/blog/nerd-life/successful-software-developers-habits原文作者：Kevin Casey原文发布于：2017年4月15日想象一下，你正在比较两个软件开发人员的简历：Dev A 与 Dev B。两...

[译] 卓越开发者的10个习惯


[archiver](https://www.npmjs.com/package/archiver) 模块可以将多个文件分步放到压缩包中，下面是示例代码

```javascript
const output = fs.createWriteStream(path.join(dir, `${filenameReal}.zip`))
const archive = archiver('zip')

archive.on('error', (err) => {
  throw err
})
archive.on('end', () => {
  console.log('压缩完成')
})

archive.pipe(output)

// append files
archive.file('/path/to/file0.txt', {name: 'file0-or-change-this-whatever.txt'});
archive.file('/path/to/README.md', {name: 'foobar.md'});

// finalize the archive
archive.finalize()

```

具体文档见 [archiver - npm](https://www.npmjs.com/package/archiver)


archiver 模块可以将多个文件分步放到压缩包中，下面是示例代码const output = fs.createWriteStream(path.join(dir, `${filenameReal}.zip`)) const archive = archiver('zip')  archi...

NodeJS将多个文件转换为压缩的zip文件

> 原文地址：[https://www.developerway.com/posts/react-key-attribute](https://www.developerway.com/posts/react-key-attribute)
> 原文作者：NADIA MAKAREVICH
> 原文发布于：2022 年 05 月 09 日


了解 React "key "属性的工作原理、如何正确使用该属性、如何使用该属性提高列表性能，以及为什么有时将数组索引作为键是个好主意。

React 的“key”属性可能是 React 中使用最多的“自动驾驶”功能之一😅，我们当中有谁能坦诚地说他们使用它是因为“......一些合理的原因”，而不是“因为 eslint 规则向我抱怨我应该这样做”。我猜大多数人在面对“React 为什么需要‘key’属性”这个问题时，都会回答 “呃......我们应该把唯一值放在那里，这样 React 才能识别列表项，这样对性能更好”。从技术上讲，这个答案是正确的。有时。

但“识别项目”到底是什么意思？如果跳过“key”属性会发生什么？应用程序会崩溃吗？如果我在这里输入一个随机字符串会怎样？值的唯一性如何判断？可以直接使用数组的索引值吗？这些选择会产生什么影响？它们对性能有什么影响？

让我们一起调查吧！

# React 的 key 属性是如何工作的？

首先，在开始编码之前，让我们先搞清楚理论：“key”属性是什么，为什么 React 需要它。

简而言之，如果存在“key”属性，React 就会在重新渲染时，在所有同类型的同级的元素之间，标记和识别元素的身份的一种方法（请参阅文档：[https://reactjs.org/docs/lists-and-keys.html](https://reactjs.org/docs/lists-and-keys.html) 和 [https://reactjs.org/docs/reconciliation.html#recursing-on-children](https://reactjs.org/docs/reconciliation.html#recursing-on-children)）。换句话说，只有在重新渲染时和相邻的元素中有同类型元素（即扁平列表）时才需要“key”属性（这一点很重要！）。

简单来说，重新渲染时判断重复元素的简化算法如下：

- 首先，React 会生成元素列表在“重新渲染前”跟“预计重新渲染后”的快照。
- 其次，它会尝试识别页面上已经存在的元素，以便重新使用它们，而不是从头开始创建它们。
   - 如果元素存在“key”属性，它将假定“渲染前”和“渲染后”具有相同“key”的元素是相同的。
   - 如果“key”属性不存在，则会使用它在同级元素中索引作为默认“key”。
- 最后：
   - 将“渲染前”存在，但“渲染后”被移除的元素进行卸载（unmount）。
   - 对“渲染前”不存在，但“渲染后”存在的元素执行创建（mount）。
   - 对“渲染前”跟“渲染后”都存在的元素执行重新渲染（re-render）。

通过代码跑一下就更容易理解了，所以我们也来写一下。

# 为什么随机内容的“key”是个坏主意

让我们先实现一个国家列表。我们将有一个 `Item` 组件，用于渲染国家信息：
```javascript
const Item = ({ country }) => {
  return (
    <button className="country-item">
      <img src={country.flagUrl} />
      {country.name}
    </button>
  );
};
```

和一个 `CountriesList` 组件承载实际的列表：
```javascript
const CountriesList = ({ countries }) => {
  return (
    <div>
      {countries.map((country) => (
        <Item country={country} />
      ))}
    </div>
  );
};
```

现在，我的项目上没有“key”属性。那么，当 `CountriesList` 组件重新呈现时会发生什么情况？

- React 会发现 `Item` 组件都没有“key”，默认使用国家数组的索引作为 key 的默认值。
- 我们的数组没有改变，因此所有项目都将被识别为之前和之后都是“已存在”，项目将被重新渲染。

从本质上讲，这与在 `Item` 中明确添加 `key={index}` 没有什么区别
```javascript
countries.map((country, index) => <Item country={country} key={index} />);
```

![image.png](../../images/0c064b8f7950fa643f5242c5ebe65cfa.png)

简而言之：当 `CountriesList` 组件重新渲染时，每个 `Item` 也会重新渲染。如果用 `React.memo` 对 `Item` 进行包装，我们甚至可以避免这些不必要的重新渲染，从而提高列表组件的性能。

现在，有趣的部分来了：如果我们不使用索引，而是一些随机字符串作为“key”属性呢？
```javascript
countries.map((country, index) => <Item country={country} key={Math.random()} />);
```

在这种情况下：

- 在每次 `CountriesList` 重新渲染，会重新生成“key”属性。
- 由于“key”属性已经存在，React 将使用它来识别元素是否存在。
- 由于所有元素的“key”属性都是新的，所有“渲染前”的项目都将被视为“已移除”，每个项目都将被视为“新的”，React 将卸载所有项目并重新创建它们。

![image.png](../../images/66e0b03c66f5666e60feb7c589ed38d6.png)

简而言之：当 `CountriesList` 组件重新呈现时，每个 `Item` 都会被销毁，然后从头开始重新创建。

与简单的重新渲染相比，重新挂载组件在性能方面的代价要高得多。此外，`React.memo` 封装 `Item` 所带来的性能提升也将消失--因为每次重新渲染都要重新创建项，所以记忆化将无法发挥作用。

你可以在 [codesandbox](https://codesandbox.io/s/react-key-attribute-simple-render-vrpcj3?file=/src/country-settings/list.tsx) 中查看上述示例。点击按钮重新渲染，并注意控制台输出。稍微调低一下 CPU，这样你即使肉眼也能看到点击按钮时的延迟！

**怎样调低你的 CPU**

在 Chrome 开发者工具的 Performance 页签，点击顶部右侧的“齿轮”展开菜单，找到里面的“CPU throttling”进行配置。

# 为什么使用列表索引来作为“key”不是好主意

现在我们应该明白，为什么我们需要稳定的“key”属性，并且在重新渲染之间保持不变。那么数组的“索引”呢？即使在官方文档中，也不推荐使用索引，理由是索引会导致错误和影响性能。那么，当我们使用“索引”而不是某个唯一 ID 时，究竟是什么原因导致了这样的后果呢？

首先，我们不会在上面的用例中看到原因。使用索引可能会带来的错误和对性能的影响只会发生在“动态”列表中，即子元素的顺序或数量会在重新渲染时发生变化的列表。为了模仿这种情况，让我们为列表实现排序功能：
```javascript
const CountriesList = ({ countries }) => {
  // introduce some state
  const [sort, setSort] = useState('asc');

  // sort countries base on state value with lodash orderBy function
  const sortedCountries = orderBy(countries, 'name', sort);

  // add button that toggles state between 'asc' and 'desc'
  const button = <button onClick={() => setSort(sort === 'asc' ? 'desc' : 'asc')}>toggle sorting: {sort}</button>;

  return (
    <div>
      {button}
      {sortedCountries.map((country) => (
        <ItemMemo country={country} />
      ))}
    </div>
  );
};
```

每次我点击按钮，列表的顺序都会颠倒。为了建立对照，第一个例子是使用 id 作为“key”：
```javascript
sortedCountries.map((country) => <ItemMemo country={country} key={country.id} />);
```

另一个例子是使用索引来作为“key”：
```javascript
sortedCountries.map((country, index) => <ItemMemo country={country} key={index} />);
```

同时为了提高性能，对 Item 进行记忆化处理：
```javascript
const ItemMemo = React.memo(Item);
```

下面是完整实现的 [codesandbox](https://codesandbox.io/s/react-key-attribute-sorting-1jwd6y?file=/src/country-settings/list.tsx)。在 CPU 被调低的情况下点击排序按钮，注意基于“索引”键值的列表速度稍慢，并注意控制台输出：在基于“索引”的列表中，每次点击按钮都会重新显示每个条目，但是 `Item` 是记忆化的，从理论上不应该会这样。而基于“id”键值的实现，除了键值外，其他属性与基于“索引”的完全相同，它就不会出现这个问题：点击按钮后不会重新渲染任何项目，控制台输出也很干净。

为什么会出现这种情况？秘密当然是“key”值：

- React 生成“渲染前”跟“渲染后”的列表进行比较，判断那些元素是跟原来一样的。
- 从 React 的角度来说，相同“key”值的元素是跟原来一样的。
- 在基于“索引”的实现中，数组中的第一个项目总是 `key="0"`，第二个项目总是 `key="1"`，等等等等--与数组的排序无关

因此，当 React 进行比较时，当它在“渲染前”和“渲染后”列表中看到 `key="0"` 的项目时，它会认为这是完全相同的项目，只是 props 值不同：在我们反转数组后，序列 0 对应的国家发生了变化。因此，它对同一个项目做了应该做的事：触发重新渲染循环。由于它发现 `country` 这个 props 值已经改变，因此会绕过记忆化函数，触发实际项目的重新渲染。<br />![image.png](../../images/8c76f94ffdd503018efe48e179e7c62c.png)

基于 id 的行为是正确和高效的：项目能被准确识别，每个项目都被备忘，因此没有组件需要重新渲染。<br />![image.png](../../images/7057072e7bc15b2ff3b35524218b5cb2.png)

如果我们为 `Item` 组件引入一些状态，这种行为就会特别明显。例如，让我们在点击时改变其背景：
```javascript
const Item = ({ country }) => {
  // add some state to capture whether the item is active or not
  const [isActive, setIsActive] = useState(false);

  // when the button is clicked - toggle the state
  return (
    <button className={`country-item ${isActive ? 'active' : ''}`} onClick={() => setIsActive(!isActive)}>
      <img src={country.flagUrl} />
      {country.name}
    </button>
  );
};
```

还是之前的 [codesandbox](https://codesandbox.io/s/react-key-attribute-sorting-1jwd6y?file=/src/country-settings/list.tsx)，只是这次先点击几个国家，触发背景变化，然后再点击“sort”按钮。

基于 id 的列表的行为与你预期的完全一样。但基于索引的列表现在的行为却很奇怪：如果我点击列表中的第一个项目，然后点击 sort --无论排序如何，第一个项目都会保持选中状态。原因是： React 认为，`key="0"` 的项目（数组中的第一个项目）在状态更改前后是完全一样的，因此它会重新使用相同的组件实例，保持原来的状态（即此项目的 `isActive` 设置为 `true`），并更新 props 值（传入的值由第一个国家变为最后一个国家）。

如果我们不进行排序，而是在数组的开头添加一个项目，也会发生完全相同的情况： React 会认为 `key="0"` 的项目（第一个项目）保持不变，而最后一个项目才是新项目。因此，如果选择了第一个项目，在基于索引的列表中，选择（isActicve=true）将停留在第一个项目，每个项目都将重新渲染，最后一个项目甚至会触发“挂载”。而在基于 id 的列表中，只有新添加的项目才会被挂载和渲染，其他项目都会静静地等待。请在 [codesandbox](https://codesandbox.io/s/react-key-attribute-sorting-and-inserting-first-item-v5r8hf?file=/src/country-settings/list.tsx) 中查看。调低 CPU，在基于索引的列表中添加一个新项目的延迟再次以肉眼可见！与之相比，即使对 CPU 进行 6 倍的节流，基于 id 的列表速度也非常快。

# 为什么使用列表索引来作为“key”是个好点子

经过前面几节的介绍，我们很容易得出“只要在'key'属性中使用唯一的项目 id 就可以了”，这个结论。在大多数情况下确实如此，而且如果你一直使用 id，可能你也认为没有什么值得继续注意的了。但是，当你掌握知识越多，你的能力就越强。现在，既然我们知道了 React 渲染列表时到底发生了什么，我们就可以作弊，用 index 代替 id，让某些列表变得更快。

典型场景：分页列表。列表中的条目数量有限，点击分页按钮后，就会在相同大小的列表中显示同一类型的不同条目。如果使用 `key="id"` 方法，那么每次更改页面时，都会以完全不同的 id 加载全新的项目集。这意味着 React 无法找到任何“已有”的项目，只能卸载整个列表，并加载全新的项目集。但是！如果使用 `key="index"` 方法，React 会认为新“页面”上的所有项目都已存在，因此只会用新数据更新这些项目，而不会挂载实际组件。如果项目组件很复杂，即使数据集相对较小，这种方法也会明显更快。

请看 [codesandbox](https://codesandbox.io/s/react-key-attribute-faster-with-index-3mnyxp?file=/src/country-settings/list.tsx) 中的示例。请注意控制台输出--在右侧基于“id”的列表中切换页面时，每个项目都会被重新挂载。但在左边基于“索引”的列表中，项目只会被重新渲染。速度更快。在 CPU 有调低的情况下，即使是 50 个非常简单的列表（只有一个文本和一个图片），在基于“id”的列表和基于“索引”的列表中切换页面的差别也是显而易见的。

同样的情况也会出现在各种动态列表式数据中，在保留列表式外观的同时，用新的数据集替换现有的项目：自动完成组件、类似谷歌的搜索页面、分页表格。只是需要注意不要在这些项目中引入状态：它们必须是无状态的，或者状态应与 props 同步。

# 请确保在对的地方用对“key”值

今天就到这里！希望你喜欢这篇文章，并能更好地理解 React “key”属性的工作原理、如何正确使用它，甚至是如何按照自己的意愿利用规则，在性能游戏中作弊。

几个重点的总结：

- 永远不要使用随机值作为“key”的值：它会导致在列表每次重渲染时，列表项目的重新挂载。
- 在“静态”列表中使用数组索引作为“key”值也没有什么坏处：因为这些列表的项号和顺序都会保持不变。
- 使用唯一标识符（id）作为“key”的值：当列表是动态的，元素的顺序会动态改变，或新元素会被插入到数组中随机一个地方时。
- 在动态列表中也可以使用数组索引作为“key”值的情景：列表子项是无状态的、如展示性质的分页列表、搜索的自动完成列表等。这样可以把重挂载变为重渲染，提高列表的性能。

祝您度过愉快的一天，并祝愿您的列表项目永远不会重新渲染，除非您明确告诉它们这样做！✌🏼

此外，还可以查看 [YouTube 视频](https://youtu.be/76OedwmXlYY)，该视频通过一些漂亮的动画来解释文章内容：




了解 React "key "属性的工作原理、如何正确使用该属性、如何使用该属性提高列表性能，以及为什么有时将数组索引作为键是个好主意。

[译] React Key：实现高性能列表的最佳实践

> 原文地址：[https://dev.to/kinginit/how-to-code-faster-vs-code-edition-4pa](https://dev.to/kinginit/how-to-code-faster-vs-code-edition-4pa)
> 原文作者：Thomas King
> 原文发布于：2023 年 11 月 24 日


结对编程可以提高工作效率。但是，没有什么比看到你的程序员同伴在编码中苦苦挣扎更令人讨厌的了。说到 "挣扎"，我并不一定是指他缺乏经验，而是指他的编码速度太慢。这种感觉就像《疯狂动物城》（Zootopia，一部不可错过的电影）中闪电的那一幕。

![Source: Alphacoders.com](../images/8353d1d443ec8c73b8290cd5f684e8ee.png "Source: Alphacoders.com")

如何可以不做闪电？这里有一些在 Visual Studio Code (VS Code) 中编码的技巧和窍门。

> 注意：我没有 Mac，因此这里提到的短键仅适用于 Windows。你可以在[这里](https://www.makeuseof.com/windows-vs-mac-shortcuts/)找到 Mac 版的翻译，但由于我无法在实体 Mac 上重现它们，所以没有将它们包含在本指南中。


# 更智能地复制和粘贴

我见过有人通过以下方式复制粘贴代码：

1. 将鼠标光标移至单词开头。
2. 按住左键。
3. 一直拖到单词的末尾。
4. 松开左键。
5. 右键单击所选内容。
6. 点击 "复制"。
7. 在 VS Code 的文件资源管理器中滚动，找到目标文件。
8. 单击目标文件。
9. 将光标移至文件中需要的位置。
10. 将光标移至文件中需要的位置。
11. 右键单击目标文件。
12. 单击 "粘贴"。

这个过程有点慢。尤其是当您需要多次使用时...改进复制粘贴的一些方法有：

- 使用 `CTRL + C` **复制**，使用 `CTRL + V` **粘贴**。
- 使用 `CTRL + SHIFT + 左/右箭头` **按单词增加/减少字数选择**。
- 使用 `SHIFT + 左/右箭头` **按字符增加/减少选择**。
- 在 VS Code 中单击一行代码并按下 `CTRL + X` 键，**将把该行代码放入剪贴板（剪切）**。在任何地方使用 `CTRL + V` 都会**插入该行代码**。
- 使用 `ALT + 上/下箭头` 可以**将一行代码上移/下移**。

---

# 更智能地导航

使用组合键 `CTRL + P` 代替手动浏览资源管理器窗格。这样，你就可以按名称搜索文件。这是一种 “智能”搜索，也就是说，它不仅会查找包含搜索文本的单词，还会查找组合词，例如， `prodetcon` 也会查找 `project-details-container.component.ts` 。使用 `CTRL + P` 要比看别人在文件资源管理器窗格中苦苦寻找要快得多，后者本身就是一种痛苦（双关语）。

![tgi4edfc61mjln700yon.gif](../images/5d91835ec3e3d2687888be86e6677339.gif)

与其在文件中滚动查找某些代码，不如使用这些组合键：

- `CTRL + G`：转到行
- `CTRL + F`：在文件中搜索（使用 ENTER 键导航到下一个出现的位置）
- `CTRL + 点击类/函数/等`：转到所述类/函数/等的定义。

使用 `CTRL + TAB` 在上次打开的文件和当前文件之间切换（或继续按 `TAB` 进一步切换到其他已打开的文件）。这比将光标移动到任务栏，寻找正确的选项卡并单击打开要快得多。

> 注意：在 VS Code 中，使用这招在打开的文件之间切换是非常有效的。此外，在 Windows 中也可使用 `ALT + TAB` 在打开的窗口之间切换。


---

# 更智能地重新命名

不要在变量的每一个出现的地方去进行重命名。这样做既费时又容易出错。相反，请转到该变量的定义并按下 `F2` 键，重命名该变量，然后按下 `ENTER` 键。这将改变每次出现的变量。这不仅适用于变量，也适用于函数、类、接口等。这也会跨文件生效。

![jls5prhd81ua6o24w6hl.gif](../images/c64c5ecfd6c3218f674ae05bc05b8308.gif)

---

# 使用 Emmet

[Emmet](https://emmet.io/) 是一款内容/代码辅助工具，用于更快、更高效地编写代码。它[成为了 VS Code 的标准配置](https://code.visualstudio.com/docs/editor/emmet)，因此无需额外安装任何插件。其概念很简单：开始键入一个 Emmet 缩写，按下 `TAB` 或 `ENTER` 键，就会出现该缩写的完整 Emmet 代码段。

举个例子，键入 Emmet 缩写 `.grid>.col*3` 。当您按下 `TAB` 或 `ENTER` 时，VS Code 会为您生成整段代码：

![7wt5s8wb3splmpvylkhm.gif](../images/dd9e60af282198c2a3b673253fb9e087.gif)

Emmet 最酷的一点是，您还可以生成“[乱数假文](https://docs.emmet.io/abbreviations/lorem-ipsum/)”。例如， `ul>li*4>lorem4` 将生成一个包含 4 个元素的无序列表，每个列表项包含 4 个随机单词。

![3pgcocuj4r7nfbt6wvyb.gif](../images/1adad739f5346a4ea3ed1545bb2485a7.gif)

---

# 使用格式化器

在 VS Code 中使用代码格式器来格式化代码。我强烈推荐使用 [Prettier](https://prettier.io/docs/en/)。

使用代码格式化工具的好处之一是，它还能“美化”你的代码。因此，如果你从没有格式的地方复制粘贴代码，你可以点击格式组合键（`CTRL + ALT + F`），然后你的代码就被“美化”了，更重要的是，它还具有可读性。

> 注意：保存时应用格式化是个好建议。您可以在设置中进行更改（查找配置中的“Format on save”）。


格式化不仅对你自己有用，对整个团队也很有用，因为它能使团队的代码更加一致。想了解更多相关信息，请参阅我的另一篇文章《[在 Angular 项目中执行前端指南](https://dev.to/kinginit/enforcing-front-end-guidelines-in-an-angular-project-4199)》。

---

# 使用代码片段

代码片段是一种模板，可让您更轻松地编写重复的代码片段，如 for 循环、while 语句等。

![9v9g9v8mhlojm00aex6g.gif](../images/4da20c35b247a4205ba70ae149049a97.gif)

通过使用代码片段，只需输入最基本的内容，就能轻松创建代码块。您可以使用内置的代码片段，也可以使用提供代码片段的扩展，甚至还可以创建自己的片段！

内置语法片段支持提供了许多语言的模板，如 TypeScript、JavaScript、HTML、CSS 等。例如，您可以使用它轻松创建 `switch` 语句，如上图所示。

VS Code 插件市场有多个扩展，可为您提供代码片段。例如 [Angular snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)、[Tailwind UI snippets](https://marketplace.visualstudio.com/items?itemName=evondev.tailwindui-snippets)、[Bootstrap snippets](https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode) 等。

最后，您还可以创建自己的片段。你既可以为特定语言创建全局片段，也可以为某个项目创建特定片段。在此我就不详细介绍了，不过您可以查看文档，了解[如何创建自己的代码片段](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets)。

---

# 利用“量子键入”

我把它称为 "量子键入"，因为这确实加快了在 VS Code 中键入代码的速度。这一切都与多行选择有关。当你需要更改或添加文本到多行时，VS Code 允许你通过选择这些行并同时开始键入这些行来实现。

按住 `SHIFT + ALT`，拖动光标对多行进行选择。你会看到这些行上出现多个打字光标。只需开始键入，文本就会同时添加。

![nl37ca8jwo8sfnm07j0p.gif](../images/1a603fc4dfb6d18a991d8f8daeecd49c.gif)

如果您想在多个位置添加相同的文本，但它们不对齐，您可以按住 `ALT` 不放，同时单击要输入相同文本的所有位置。

![loqu6id3968iilj1o1jl.gif](../images/1db8358ab2f68cfd4968027c17c58e7e.gif)

您还可以按住 `ALT` 键，同时选择多个单词。在按住 `ALT` 键的同时，您只需拖动以选择一个位置，然后释放左键或双击以选择单个单词，而无需单击某个位置。

![o05eg38ejzcxhtotlza9.gif](../images/dae551da43330ab0843b0b5e6bbbc2f1.gif)

---

# 快速环绕选择

代码经常需要用方括号、圆括号或大括号包围。或者某些内容需要用引号（单引号或双引号）包围。要做到这一点，人们通常会移至起始位置，键入起始括号，然后将光标移至结束位置，键入结束括号。

更有效的方法是先选择需要被包围的部分，然后直接键入起始括号。VS Code 会很聪明地知道需要包围整个部分。

![upt3uxf00b9j9ujoetq4.gif](../images/8561099fb7b2ea584ae6d69859738e47.gif)

对这些起始括号生效： `(`、`{`、`[`、`<`、`'`、和`"`。

---

# 利用 VS Code 的代码重构功能

您可以使用 VS Code 自动重构代码片段。例如，您可以让 VS Code 为您生成 getters 和 setters，而不是自己编写。

要重构某些内容，只需选中需要重构的内容，单击右键，然后点击 `Refactor...` 或更快：使用 `CTRL + SHIFT + R`。

VS Code 可以根据您所在的文件类型提供不同重构。例如，对于 TypeScript，您可以使用 `Extract function`、`Extract constant` 或 `Generate get and set accessors`。点击[此处](https://code.visualstudio.com/docs/typescript/typescript-refactoring)查看 TypeScript 的完整列表。

---

# 使用正则进行搜索和替换

正则表达式（RegEx）是开发人员工具包中一个非常强大的工具，值得您进一步熟悉。您不仅可以在自己的代码中使用它（如验证模式、字符串替换等），还可以在 VS Code 中使用它进行高级搜索和替换。

## 例子

您所在的项目中，某些 CSS 选择器以 `app-` 开始，以 `-container` 结束。你需要根据新的样式规范进行重命名，他们希望您将后缀 `-container` 更改为 `-wrapper` 。您可以尝试进行简单的搜索和替换，查找 `-container` 并将其替换为 `-wrapper` ，但是当您进行替换时，您会发现某些不应该被替换的选择符被替换了（例如，名为 `.unit-container-highlight` 的 CSS 选择符变成了 `.unit-wrapper-highlight`）。

使用正则，我们可以进行更精细的搜索。使用捕获组，我们可以提取想要保留的单词，同时替换其余的单词。例如使用正则表达式 `app-([a-z\-]+)-container`。我们要替换那些以 `-wrapper` 结尾的匹配结果。替换后的字符串将显示为 `app-$1-wrapper`。请确保您勾选了 `Use Regular Expression`。

> 注意：尽管使用正则允许更精细的搜索，但在进行实际替换之前，请检查搜索窗格中的结果！


![image.png](../images/85ebe85e5b3912df2e77a065be3d6f64.png)

通过允许只对某些文件进行搜索，您可以获得更多控制权。例如，只搜索 HTML 文件（`*.html`），甚至只搜索整个文件夹（`src/app/modules`）。

![image.png](../images/1126c39c23fc91d95eb539ff7e3689f8.png)

如果您想在搜索前试用正则表达式，以确定它是正确的，请使用在线正则测试器，如 [Regex101](https://regex101.com/)。如果您没有或几乎没有使用正则的经验，可以看看 [https://regexlearn.com/](https://regexlearn.com/learn/regex101)。

---

# 使用工具将单调的工作自动化

有时，我们不得不做一些单调的工作，比如创建模拟数据、为类中的每个字段创建一个函数、根据接口的属性创建 HTML 列表项，等等。俗话说得好

> 更聪明地工作，而不是更努力地工作！


使用工具将这类单调的工作自动化，而不是自己完成所有繁琐的工作。我经常使用的工具有：

- [NimbleText](https://nimbletext.com/live)：根据给定格式将输入行转换为特定输出。
- [Mockaroo](https://www.mockaroo.com/)：生成模拟数据并以多种格式（JSON、CSV、XML 等）输出。
- [JSON Generator](https://json-generator.com/)：也能生成模拟数据，但专门针对 JSON。它比较复杂，但可以实现量身定制的结果。

使用 NimbleText 的一个很好的例子就是根据几个字段在 HTML 中创建整个表单。我们有一个字段列表，希望在表单中显示这些字段。每个字段都有一个标签和一个输入。让我们创建一些数据供 NimbleText 转换：

```
first name, text
last name, text
email, email
street, text
number, number
city, text
postal code, text
```

这里有 7 行 2 列。每一行代表一个表单字段。第一列是标签名称，第二列是 HTML 输入类型。

在 NimbleText 中，我们确保 data 的设置为：列分隔符 `,` 和行分隔符 `\n`。

每个表单字段都应位于类 `.form-field` 的 `div` 中，包含一个包含文本的 `label` 和一个用于表单字段的 `input` 。在 NimbleText 的 pattern 填入如下内容：

```
<div class="form-field">
  <label for="<% $0.toCamelCase() %>"><% $0.toSentenceCase() %>:</label>
  <input id="<% $0.toCamelCase() %>" type="$1"/>
</div>
```

当我们看到输出结果时，就会发现已经为我们做了很多工作：

```html
<div class="form-field">
  <label for="firstName">First name:</label>
  <input id="firstName" type="text"/>
</div>
<div class="form-field">
  <label for="lastName">Last name:</label>
  <input id="lastName" type="text"/>
</div>
<div class="form-field">
  <label for="email">Email:</label>
  <input id="email" type="email"/>
</div>
<div class="form-field">
  <label for="street">Street:</label>
  <input id="street" type="text"/>
</div>
<div class="form-field">
  <label for="number">Number:</label>
  <input id="number" type="number"/>
</div>
<div class="form-field">
  <label for="city">City:</label>
  <input id="city" type="text"/>
</div>
<div class="form-field">
  <label for="postalCode">Postal code:</label>
  <input id="postalCode" type="text"/>
</div>
```

因此，请发挥创意，尽情使用这些工具。

---

# 结论

要在 VS Code 中更快地编码，归根结底是要了解自己的快捷键，并充分利用集成开发环境的强大功能。下面是所提到内容的快速汇总：

1. 使用短键进行复制粘贴。
2. 用搜索代替手动导航，提高导航效率。
3. 使用 `F2` 重命名，而不是手动重命名。
4. 使用 Emmet。
5. 使用格式化工具来整齐地列出大纲（还有其他优点）。
6. 使用代码片段。
7. 量子键入，就像没有明天一样。
8. 使用 VS 代码重构。
9. 使用 RegEx 进行搜索和替换。
10. 使用 NimbleText 等工具自动处理单调的工作。

希望你喜欢阅读这篇文章。如果您认识的人在编码方面需要帮助，请随时分享这篇文章！

如果您有任何问题，请随时联系我们！谢谢！



原文地址：https://dev.to/kinginit/how-to-code-faster-vs-code-edition-4pa原文作者：Thomas King原文发布于：2023 年 11 月 24 日结对编程可以提高工作效率。但是，没有什么比看到你的程序员同伴在编码中苦苦挣扎更令人讨...

[译] 如何更快地编写代码--VS Code 版

> 记录下我以后博客的书写格式，以免忘记以及慢慢完善。
> 部分内容参考自[阮一峰-中文技术文档的写作规范](https://github.com/ruanyf/document-style-guide)

# 段落
## 层次

文章最多只能有三级目录，第一级是 `#` 大小的，第二级是 `##` 大小的，第三级是 `###`大小。

若三级目录下还有分节需要，尽量使用项目列表：

```markdown
# 标题1

## 标题2

### 标题3

- 标题3.1

  正文

- 标题3.2

  正文

***

```
## 段落间格式

一级段落之间使用分割线进行区分 `***`

---

## 中英文文本的处理
### 全角中文和半角英文之前，应有一个半格空格分隔。

> 错误：本文介绍Window系统。<br />正确：本文介绍 Window 系统。


### 全角中文字符与半角阿拉伯数字之间，有没有半角空格都可，但必须保证风格统一，不能两种风格混杂。

_半角的百分号，视同阿拉伯数字。_

> 错误：2011年5月15日，我订购了 5 台笔记本电脑与 10 台平板电脑。<br />正确：2011 年 5 月 15 日，我订购了 5 台笔记本电脑与 10 台平板电脑。


### 英文单位若不翻译，单位前的阿拉伯数字与单位间不留空格。

> 错误：一部容量为 16 GB 的智能手机<br />正确：一部容量为 16GB 的智能手机


### 半角英文字符和半角阿拉伯数字，与全角标点符号之间不留空格。

> 错误：他的电脑是 MacBook Air 。<br />正确：他的电脑是 MacBook Air。

## 语言风格
### 尽量不使用被动语态，改为使用主动语态。

> 错误：假如此软件尚未被安装，<br />正确：假如尚未安装这个软件，


### 不使用非正式的语言风格。

> 错误：Lady Gaga 的演唱会真是酷毙了，从没看过这么给力的表演！！！<br />正确：无法参加本次活动，我深感遗憾。


### 用对“的”、“地”、“得”。

> 她露出了开心的笑容。<br />（形容词＋的＋名词）


> 她开心地笑了。<br />（副词＋地＋动词）


> 她笑得很开心。<br />（动词＋得＋副词）


### 使用代词时（比如“其”、“该”、“此”、“这”等词），必须明确指代的内容，保证只有一个含义。

> 错误：从管理系统可以监视中继系统和受其直接控制的分配系统。<br />正确：从管理系统可以监视两个系统：中继系统和受中继系统直接控制的分配系统。


### 名词前不要使用过多的形容词。

> 错误：此设备的使用必须在接受过本公司举办的正式的设备培训的技师的指导下进行。<br />正确：此设备必须在技师的指导下使用，且指导技师必须接受过由本公司举办的正式设备培训。


### 单个句子的长度尽量保持在 20 个字以内；20 ～ 29 个字的句子，可以接受；30 ～ 39 个字的句子，语义必须明确，才能接受；多于 40 个字的句子，在任何情况下都不能接受。

> 错误：本产品适用于从由一台服务器进行动作控制的单一节点结构到由多台服务器进行动作控制的并行处理程序结构等多种体系结构。<br />正确：本产品适用于多种体系结构。无论是由一台服务器（单一节点结构），还是由多台服务器（并行处理结构）进行动作控制，均可以使用本产品。


### 同样一个意思，尽量使用肯定句表达，不使用否定句表达。

> 错误：请确认没有接通装置的电源。<br />正确：请确认装置的电源已关闭。


### 避免使用双重否定句。

> 错误：没有删除权限的用户，不能删除此文件。<br />正确：用户必须拥有删除权限，才能删除此文件。


---


# 文章模板
## 翻译类文章
### 标题格式

[译] 我希望在 25 岁时就知道的 10 条理财经验

### 正文格式

1. 标明来源

> 原文地址：[https://hackernoon.com/10-money-lessons-i-wish-i-knew-when-i-was-25](https://hackernoon.com/10-money-lessons-i-wish-i-knew-when-i-was-25) 
> 原文作者：Paul Knulst
> 原文发布于：2023 年 08 月 05 日



记录下我以后博客的书写格式，以免忘记以及慢慢完善。部分内容参考自阮一峰-中文技术文档的写作规范段落层次文章最多只能有三级目录，第一级是 # 大小的，第二级是 ## 大小的，第三级是 ###大小。若三级目录下还有分节需要，尽量使用项目列表：# 标题1  ## 标题2  ### 标题3  - 标题...

博客格式规范

原文地址：https://www.developerway.com/posts/how-to-write-performant-react-code原作者：NADIA MAKAREVICH原文发布于：2022年1月9日React 和性能！在六个月的时间内，关于这个有趣的话题的讨论、最佳实践有如...

[译] 如何编写高性能的 React 代码：规则、模式、该做和不该做的

> 原文地址：[https://www.developerway.com/posts/how-to-use-memo-use-callback](https://www.developerway.com/posts/how-to-use-memo-use-callback)
> 原文作者：NADIA MAKAREVICH
> 原文发布于：2022 年 06 月 13 日


设计 useMemo 和 useCallback 的目的是什么，使用它们时的常见错误和最佳实践，以及为什么绝大部分的使用可以移除掉，并且可能是更好的选择。

如果您不是 React 的完全新手，您可能至少已经熟悉了 [useMemo](https://reactjs.org/docs/hooks-reference.html#usememo) 和 [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) Hook。如果您正在开发一个中型到大型应用程序，您很可能会把应用程序的某些部分描述为“一连串难以理解的 `useMemo` 和 `useCallback`，其理解和调试难于登天”。这些 Hook 有一种不受控制地在代码中四处传播的能力，直到它们完全占据了代码，你会发现自己编写它们的原因只是因为它们无处不在，你周围的每个人都在编写它们。

你知道最可悲的是什么吗？所有这一切都完全没有必要。您现在就可以移除应用程序中 90% 的 `useMemo` 和 `useCallback`，这样应用程序也不会有问题，甚至可能会稍微快一点。别误会，我并不是说 `useMemo` 或 `useCallback` 毫无用处。只是说它们的使用仅限于一些非常特殊和具体的情况。而且大多数情况下，我们只是无效的一直用它们来把东西包裹起来。

这就是我今天要讨论的话题：开发人员在使用 `useMemo` 和 `useCallback` 时会犯哪些错误，它们的实际用途是什么，以及如何正确使用它们。

这些 Hook 在应用程序中的病毒式传播主要有两个来源：

- 对 props 进行记忆，以避免重渲染。
- 对那些高开销计算得来的值进行记忆，避免每次重渲染中都需要重新计算。

我们将在文章的稍后部分了解它们，但首先：`useMemo` 和 `useCallback` 的目的究竟是什么？

# 为什么我们需要 useMemo 和 useCallback

答案很简单——**在重新渲染之间**记忆化。如果一个值或一个函数被封装在这些 Hook 中，React 会在初始渲染时缓存它，并在接下来重新渲染时返回对该保存值的引用。没有它，像数组、对象或函数这样的非原始值将在每次重新渲染时从头开始创建。不熟悉这个 javascript 机制的可以复习一下：
```javascript
const a = { "test": 1 };
const b = { "test": 1 };

console.log(a === b); // 为 false

const c = a; // "c" 只是 "a" 的引用

console.log(a === c); // 为 true
```

换到 React 中：
```javascript
const Component = () => {
  const a = { test: 1 };

  useEffect(() => {
    // "a" 会在重新渲染之间进行比较
  }, [a]);

  // the rest of the code
};
```

`a` 的值是 `useEffect` 的依赖项。。每次 `Component` 重新渲染时，React 都会将其与之前的值进行比较。`a` 是定义在 `Component` 中的对象，这意味着每次重新渲染时，它都将从头开始重新创建。因此，将 “重新渲染前”的值与“重新渲染后”的值进行比较将返回 `false`，并且每次重新渲染都会触发 `useEffect`。

为了避免这种情况，我们通常会用 `useMemo` 将 `a` 包裹起来：
```javascript
const Component = () => {
  // 在每次重渲染之间保存 "a" 的引用
  const a = useMemo(() => ({ test: 1 }), []);

  useEffect(() => {
    // this will be triggered only when "a" value actually changes
  }, [a]);

  // the rest of the code
};
```

现在，只有当 `a` 值实际发生变化时（在这个实例中永远不会发生变化），才会触发 `useEffect`。

`useCallback` 的原理也是一样，只是它更适合用来对函数记忆化：
```javascript
const Component = () => {
  // 在每次重渲染之间保存函数引用
  const fetch = useCallback(() => {
    console.log('fetch some data here');
  }, []);

  useEffect(() => {
    // 只有当 fetch 的值变化时才会触发
    fetch();
  }, [fetch]);

  // the rest of the code
};
```

这里最重要的一点是，`useMemo` 和 `useCallback` 只在**重新渲染阶段有用**。在初始渲染时，它们不仅无用，甚至有害：它们会让 React 做一些额外的工作。 这意味着您的应用程序在初始渲染时会变得稍慢。如果您的应用程序中有成百上千个这样的过程，那么这种变慢甚至是可感知的。

# 通过记忆化 props 来阻止重新渲染

既然我们已经知道了这些 Hook 的用途，那就来看看它们的实际用法吧。其中最重要也是最常用的 Hook 之一就是将 props 记忆化，来阻止重新渲染。如果你在你的应用程序中看到过下面的代码，请大声说出来：

1. 不得不将 `onClick` 包在 `useCallback` 中，以阻止重新渲染：
```javascript
const Component = () => {
  const onClick = useCallback(() => {
    /* do something */
  }, []);
  return (
    <>
      <button onClick={onClick}>Click me</button>
      ... // some other components
    </>
  );
};
```

2. 不得不将 `onClick` 包在 `useCallback` 中，以阻止重新渲染：
```javascript
const Item = ({ item, onClick, value }) => <button onClick={onClick}>{item.name}</button>;

const Component = ({ data }) => {
  const value = { a: someStateValue };

  const onClick = useCallback(() => {
    /* do something on click */
  }, []);

  return (
    <>
      {data.map((d) => (
        <Item item={d} onClick={onClick} value={value} />
      ))}
    </>
  );
};
```

3. 不得不将 `value` 包裹在 `useMemo` 中，因为它是被记忆化的 `onClick` 的依赖项：
```javascript
const Item = ({ item, onClick }) => <button onClick={onClick}>{item.name}</button>;

const Component = ({ data }) => {
  const value = useMemo(() => ({ a: someStateValue }), [someStateValue]);
  const onClick = useCallback(() => {
    console.log(value);
  }, [value]);

  return (
    <>
      {data.map((d) => (
        <Item item={d} onClick={onClick} />
      ))}
    </>
  );
};
```

你有做过，或看到周围其他人做过这些优化吗？你是否同意这些用例以及 Hook 是如何解决这个问题的？如果这些问题的答案是“是”，那么恭喜你：`useMemo` 和 `useCallback` 绑架了你，不必要地控制了你的生活。在所有例子中，这些 Hook 都是无用的，它们不必要地使代码复杂化，减慢了初始渲染速度，却什么也阻止不了。

要了解原因，我们需要记住 React 工作原理中的一件重要事情：组件重新渲染它自身的原因。

# 为什么组件会重新渲染

“当 state 或 props 发生变化时，组件会重新渲染自身”是一个常识。甚至 [React 文档](https://reactjs.org/docs/react-component.html#updating)也是这样表述的。我认为正是这种说法导致了“如果 props 不改变（即记忆化它），就会阻止组件重新渲染”的错误结论。

因为组件重新渲染还有一个非常重要的原因：当它的父组件重新渲染自己时。或者，如果我们反其道而行之：当一个组件重新渲染它自己时，它也会重新渲染它的所有子组件。请看下面这段代码：
```javascript
const App = () => {
  const [state, setState] = useState(1);

  return (
    <div className="App">
      <button onClick={() => setState(state + 1)}> click to re-render {state}</button>
      <br />
      <Page />
    </div>
  );
};
```

`App` 组件有一些状态和一些子组件，包括 `Page` 组件。点击这里的按钮会发生什么？ state 会发生变化，触发 App 的重新渲染，并触发其所有子组件（包括 Page 组件）的重新渲染。`Page` 组件甚至没有接受 props！

现在，假如 `Page`组件含有这样一些子组件：
```javascript
const Page = () => <Item />;
```

它完全是空的，既没有 state 也没有 props。但当 `App` 重新渲染时，`Page` 的重新渲染将被触发，并因此触发其 `Item` 子项的重新渲染。`App` 组件状态的改变会触发整个应用的一连串重新渲染。请参阅 [codesandbox 中的完整示例](https://codesandbox.io/s/parent-children-re-renders-gihtcw?file=/src/App.tsx)。

中断这个链条的唯一方法就是将其中的某些组件记忆化（memoized）。我们可以使用 `useMemo` 钩子，或者更好的是使用 [React.memo](https://reactjs.org/docs/react-api.html#reactmemo) 函数。只有当组件被包装后，React 才会通过检查它的 props 是否发生变化，阻止重新渲染。

记忆化（memoized）组件：
```javascript
const Page = () => <Item />;
const PageMemoized = React.memo(Page);
```

在有状态变化的应用中使用：
```javascript
const App = () => {
  const [state, setState] = useState(1);

  return (
    ... // same code as before
      <PageMemoized />
  );
};
```

**只有**在这种情况下，props 是否被记忆化才是最重要的。

举例说明，假设 `Page` 组件有一个 props `onClick`，接受一个函数。如果我不先对其进行记忆化就将其传递给 `Page`，会发生什么情况？
```javascript
const App = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    console.log('Do something on click');
  };
  return (
    // 无论 onClick 是否被记忆化，Page 都会重新渲染
    <Page onClick={onClick} />
  );
};
```

`App` 将重新渲染时，React 将在其子节点中找到 `Page`，并重新渲染它。至于 `onClick` 是否封装在 useCallback 中并不重要。

但是假如我对 `Page` 组件记忆化？
```javascript
const PageMemoized = React.memo(Page);

const App = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    console.log('Do something on click');
  };
  return (
    // PageMemoized 会因为 onClick 没有记忆化而重渲染
    <PageMemoized onClick={onClick} />
  );
};
```

`App` 将重新渲染时，React 将在其子组件中找到 `PageMemoized`，发现它已被 `React.memo` 封装，停止重新渲染链，并首先检查该组件上的 props 是否发生变化。在这种情况下，由于 `onClick` 是一个未被记忆化的函数，props 比较的结果是 false，`PageMemoized` 将重新渲染自己。接下来，这是是用了 `useCallback` 的用例：
```javascript
const PageMemoized = React.memo(Page);

const App = () => {
  const [state, setState] = useState(1);
  const onClick = useCallback(() => {
    console.log('Do something on click');
  }, []);

  return (
    // PageMemoized 不会重新渲染
    <PageMemoized onClick={onClick} />
  );
};
```

现在，当 React 停止重新渲染链，并对 `PageMemoized` 进行 props 检查时，因为 `onClick` 的引用保持不变，检查结果为 true，`PageMemoized` 将不会重新渲染。

如果我在 `PageMemoized` 中添加另一个非记忆化值，会发生什么情况？其他代码是完全一样的：
```javascript
const PageMemoized = React.memo(Page);

const App = () => {
  const [state, setState] = useState(1);
  const onClick = useCallback(() => {
    console.log('Do something on click');
  }, []);

  return (
    // PageMemoized 会重新渲染
    <PageMemoized onClick={onClick} value={[1, 2, 3]} />
  );
};
```

React 在停止重新渲染链，并对 `PageMemoized` 进行 props 检查时，`onClick` 保持不变，但 `value` 改变了。`PageMemoized` 将重新渲染。请参见此处的[完整示例](https://codesandbox.io/s/everything-memoized-8oltqg?file=/src/App.tsx)，尝试移除记忆化，看看一切是如何重新渲染的。

综上所述，只有一种情况下对组件上的 props 进行记忆化才有意义：**即对每个 props 和组件本身都进行记忆化**。其他情况都只是在浪费内存，并使代码不必要地复杂化。

如果需要，可随意删除这些代码中的所有 `useMemo` 和 `useCallbacks`：

- 它们作为属性直接、或通过依赖链传递给 DOM 元素。
- 它们作为属性直接、或通过依赖链传递给未记忆化的组件。
- 它们作为属性直接、或通过依赖链传递给已经记忆化，但至少有一个属性入参未记忆化的组件。

为什么要删除而不只是修复记忆化？好吧，如果因为未记忆化而导致重新渲染出现了性能问题，你早就注意到并修复了，不是吗？😉 既然没有性能问题，就没有必要修复它。移除无用的 `useMemo` 和 `useCallback` 可以简化代码，加快初始渲染速度，但不会对现有的重新渲染性能产生负面影响。

# 避免每次渲染都进行昂贵的计算

根据 [React 文档](https://reactjs.org/docs/hooks-reference.html#usememo)，useMemo 的主要目标是避免每次渲染都进行昂贵的计算。甚少有人仔细想过什么是“昂贵”的计算。因此，开发人员有时会在渲染函数中使用 `useMemo` 封装几乎所有计算。创建一个新日期？过滤、映射或排序数组？创建对象？通通都使用 `useMemo`！

好吧，让我们来看一些数字。假设我们有一个国家数组（约 250 个），我们希望在屏幕上渲染这些国家，并允许用户对其进行排序。
```javascript
const List = ({ countries }) => {
  // sorting list of countries here
  const sortedCountries = orderBy(countries, 'name', sort);

  return (
    <>
      {sortedCountries.map((country) => (
        <Item country={country} key={country.id} />
      ))}
    </>
  );
};
```

问题是：对 250 个元素的数组进行排序是一项昂贵的操作吗？感觉是的，不是吗？我们或许应该用 `useMemo` 将其封装起来，以避免每次重新渲染时都要重新计算，对吗？嗯，很容易判断：
```javascript
const List = ({ countries }) => {
  const before = performance.now();

  const sortedCountries = orderBy(countries, 'name', sort);

  // this is the number we're after
  const after = performance.now() - before;

  return (
    // same
  )
};
```

最终结果如何？在不使用记忆化的情况下，CPU 运算速度降低 6 倍，但对这个包含约 250 个项目的数组进行排序却只需**不到 2 毫秒**。相比之下，渲染这个列表——仅仅是带文本的原生按钮——需要 20 多毫秒。多出 10 倍！请参见[代码示例](https://codesandbox.io/s/measure-without-memo-tnhggk?file=/src/page.tsx)。

而在现实生活中，数组可能会小得多，渲染的内容也会复杂得多，因此速度也会慢得多。因此，性能上的差异将比 10 倍还要大。

与其将数组操作记忆化，我们还不如将实际最昂贵的计算——重新渲染和更新组件——记忆化。类似这样：
```javascript
const List = ({ countries }) => {
  const content = useMemo(() => {
    const sortedCountries = orderBy(countries, 'name', sort);

    return sortedCountries.map((country) => <Item country={country} key={country.id} />);
  }, [countries, sort]);

  return content;
};
```

使用 `useMemo` 可将整个组件不必要的重新渲染时间从约 20 毫秒降至 2 毫秒以下。

综上所述，这就是我想介绍的关于将“昂贵”操作记忆化的规则：除非你实际上是在计算大数字的阶乘，否则请移除所有纯 javascript 操作上的 `useMemo` Hook。重新渲染子代将始终是你的瓶颈。只有在渲染树的复杂部分才使用 `useMemo`。

**为什么要把它们都删除**？把所有东西都记忆化（memoized）不是更好吗？如果我们将它们全部删除，会不会产生降低性能的复合效应？1 毫秒在这里，2 毫秒在那里，很快我们应用的速度就会大打折扣......

有道理。如果不是有一点需要注意：记忆化（memoized）不是免费的。如果我们使用 `useMemo`，在初始渲染期间，React 需要缓存结果值——这需要时间。是的，这将是很小的一部分，在我们上面的应用中，对这些排序过的国家进行记忆化只需不到一毫秒的时间。但是！这也将是真正的复合效果。当应用第一次出现在屏幕上时，就会进行初始渲染。每个应该出现的组件都要经历它。在一个拥有数百个组件的大型应用程序中，即使其中三分之一的组件对某些内容进行了记忆化，也会导致初始渲染时间增加 10、20 毫秒，最糟糕的情况下甚至可能会增加 100 毫秒。

另一方面，重新渲染只发生在应用程序的某一部分发生变化之后。而在架构良好的应用程序中，只有这一小部分需要重新渲染，而不是整个应用程序。与上述情况类似的“计算”有多少会出现在变化的部分中？2-3? 还是 5 个？每次记忆化将为我们节省少于 2 毫秒的时间，即总体节省少于 10 毫秒。这 10 毫秒可能会发生，也可能不会发生（取决于触发它的事件是否发生），肉眼无法看到，而且会在子组件们的重新渲染中丢失，而重新渲染无论如何都会花费 10 倍于此的时间。但代价是初始渲染的速度会变慢，而这是必然会发生的😔。

# 今天就到此为止吧

这次讨论到的信息量很大，希望对你有用，现在你已经迫不及待地想检查你的应用程序代码，并删除所有无用的 `useMemo` 和 `useCallback`，因为它们不小心占据了你的代码。在你打算这么做之前，我们快速总结一下：

- `useCallback` 和 `useMemo` 是仅对连续渲染（即重新渲染）有用的 Hook，对于初始渲染来说，它们实际上是有害的。
- props 的 `useCallback` 和 `useMemo` 本身并不能防止重新渲染。只有当每个 props 和组件本身都被记忆化时，才能防止重新渲染。只要漏了一个，一切就都完了，这些 Hook 也就失去了作用。
- 移除“原始” JavaScript 操作周围的 `useMemo` —— 与组件更新相比，这些操作是不可见的，只会在初始渲染时占用额外的内存和宝贵的时间。

还有一件小事：考虑到这一切是多么复杂和脆弱，`useMemo` 和 `useCallback` 确实应该是你最后的性能优化手段。请先尝试其他性能优化技术。请参阅介绍其中一些技术的文章：

- [How to write performant React code: rules, patterns, do's and don'ts](https://www.developerway.com/posts/how-to-write-performant-react-code)
- [Why custom react hooks could destroy your app performance](https://www.developerway.com/posts/why-custom-react-hooks-could-destroy-your-app-performance)
- [How to write performant React apps with Context](https://www.developerway.com/posts/how-to-write-performant-react-apps-with-context)
- [React key attribute: best practices for performant lists](https://www.developerway.com/posts/react-key-attribute)
- [React components composition: how to get it right](https://www.developerway.com/posts/components-composition-how-to-get-it-right)

当然，不言而喻：测量第一！没有基于测量结果评判的优化都是无效优化。

愿今天是你在 `useMemo` 和 `useCallback` 地狱中的最后一天！✌🏼

此外，还可以查看 [YouTube 视频](https://youtu.be/G7RNVYaRS3E)，其中使用了一些漂亮的动画来解释文章内容。



设计 useMemo 和 useCallback 的目的是什么，使用它们时的常见错误和最佳实践，以及为什么绝大部分的使用可以移除掉，并且可能是更好的选择。

[译] 如何更好使用 useMemo 和 useCallback：你可以移除其中大部分的错误使用

[模块首页](https://www.npmjs.com/package/is-sorted) [仓库地址](https://github.com/dcousens/is-sorted)<br />![image.png](../images/226e2f1cf313c463aba4fedaeeb5b356.png)
## 功能简述

- 判断传入的数组是否已排好序
- 默认的判断逻辑是比较数字是否按升序排列
## 示例
```javascript
var sorted = require('is-sorted')

console.log(sorted([1, 2, 3]))
// => true

console.log(sorted([3, 1, 2]))
// => false

// supports custom comparators
console.log(sorted([3, 2, 1], function (a, b) { return b - a }))
// => true

```
## 源码解析
源码很简单，14行
```javascript
function defaultComparator (a, b) {
  return a - b
}

module.exports = function checksort (array, comparator) {
  if (!Array.isArray(array)) throw new TypeError('Expected Array, got ' + (typeof array))
  comparator = comparator || defaultComparator

  for (var i = 1, length = array.length; i < length; ++i) {
    if (comparator(array[i - 1], array[i]) > 0) return false
  }

  return true
}

```
算法复杂度是**O(n-1)**，最多需要比较 n-1 次
## 技巧分析
### `defaultComparator` 避免在闭包内定义和使用
节省内存
### for 循环中 ++i 和 i++ 的区别
一开始看会把这个写法和常用的 i++ 进行对比，比较两者优劣。<br />最后发现两者其实从性能和速度上都没有差别，两者都是通过暂存器来实现取值那一刻的前置或后置自增操作。
> [Stop Using i++ in Your Loops](https://medium.com/better-programming/stop-using-i-in-your-loops-1f906520d548)(这篇是错误的观点，评论区里面才是正确的观点)

### 小巧的测试模块
该项目使用 tape 进行自动化测试，凭借少量的代码即可完成基础的测试，对于简单模块来说是个很好的案例。<br />测试用例示例：
```json
[
  {
    "array": [],
    "expected": true
  },
  {
    "array": [1],
    "expected": true
  },
  {
    "array": [5],
    "expected": true
  },
  {
    "array": [1, 5],
    "expected": true
  },
  {
    "array": [1, 2, 3, 4, 5],
    "expected": true
  }
]
```




模块首页 仓库地址功能简述判断传入的数组是否已排好序默认的判断逻辑是比较数字是否按升序排列示例var sorted = require('is-sorted')  console.log(sorted([1, 2, 3])) // => true  console.log(sorted([3,...

is-sorted - 校验数组是否正确排序

> 原文地址：[https://hackernoon.com/10-money-lessons-i-wish-i-knew-when-i-was-25](https://hackernoon.com/10-money-lessons-i-wish-i-knew-when-i-was-25)
>  
> 原文发布于：2023年8月5日


这条 [Twitter](https://hackernoon.com/tagged/tech-twitter-thread) 消息的作者是 [Andrew Lokenauth @FluentInFinance](https://twitter.com/FluentInFinance)（消息来源：[07-08-2023](https://twitter.com/fluentinfinance/status/1677784579111899141?s=46)）。Lokenauth 拥有 15 年的银行和技术从业经验。

我在 35 岁时知道的 10 条理财经验，真希望我在 25 岁时就知道了（如果你想更好地理财，请阅读此文）：

1.  **与正确的网络为伍：** 我曾经认为一年赚 100 万美元是不可能的，直到我开始与那些一年赚 1000 万美元的人交往。一旦你改变了看待事物的方式，你所看到的事物也会开始改变。财富是一种心态。 
2.  **避免生活方式膨胀：** 生活方式膨胀是指随着收入的增加，您的支出也随之增加。避免生活方式膨胀，就能确保长期投资足够的收入，这对积累财富至关重要。赚更多的钱并不能解决不良的消费习惯。 
3.  **学会谈判：** 谈判是积累财富最重要的技能。无论你是在谈判工作加薪、汽车价格还是贷款利率，学会谈判都能帮你省钱，并随着时间的推移增加你的财富。 
4.  **投资自己：** 你最大的资产就是你自己，因此投资于自己的教育、技能和职业生涯非常重要。通过对自己的投资，你将能够提高自己的收入潜力，从而帮助你更快地实现自己的财务目标。 
5.  **尽早投资：** 尽早投资有助于您利用复利。投资时间越长，资金增长的时间就越长。通过对回报进行再投资，您的资金将以指数速度增长，而不仅仅是线性增长。 
6.  **被动收入的力量：** 被动收入是指你不通过主动工作而获得的收入。这包括租金收入、股票分红、课程或电子书籍的销售收入。用你的工资投资于被动收入，让被动收入取代你的工资。 
7.  **编制预算：** 这是控制财务的最重要一步。预算可以帮助您跟踪自己的收入和支出，找出可以削减和节省的地方。预算可确保您量入为出，并为退休进行足够的投资。 
8.  **制定财务计划：** 财务规划是设定财务目标、制定实现目标的计划以及管理资金以实现这些目标的过程。如果没有计划，就等于计划失败。计划应该是时间自由和财务自由。 
9.  **量入为出：** 积累财富最重要的关键之一就是量入为出。这意味着花费少于收入，并将差额用于投资。许多百万富翁之所以富有，是因为他们将钱用于投资，而不是花在不必要的地方。 
10.  **开发多种收入来源：** 在当今的经济环境下，工作保障只是一种幻觉，单一收入来源与零收入来源相差甚远。那些创造了巨额财富的人拥有多种收入来源，如投资房地产、股票或企业。 
11.  **准备一笔应急基金：** 意外支出随时都会发生，拥有一笔应急基金可以为您提供所需的资金缓冲，以应对这些意外支出。你的父母不是应急基金。 

除非你开始让钱为你工作，否则你的一生都将为钱工作。


原文地址：https://hackernoon.com/10-money-lessons-i-wish-i-knew-when-i-was-25 原文发布于：2023年8月5日这条 Twitter 消息的作者是 Andrew Lokenauth @FluentInFinance（消息来源：07...

[译] 我希望在 25 岁时就知道的 10 条理财经验

# Chrome Extensions 是什么？

## 定义

基于 Web 技术（HTML，Javascript、CSS）的，定制浏览器的**浏览体验**的软件程序

## 能够运行的平台

基于 Chrome Extensions 规格创建的扩展能运行在大部分基于 Chromium 内核的环境，如 Chrome、Edge、Electron 等

## 规格版本

mv2 是比较稳定的版本<br />mv3 在 mv2 的版本上增加了 Promise 版 api 等特性

> [About Manifest V2](https://developer.chrome.com/docs/extensions/mv2/)
> [Welcome to Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/)


## API池——我们能利用扩展实现什么？

| **类型** | **api类** | **描述** |
| --- | --- | --- |
| 生命周期 | runtime、windows | 浏览器或网页的生命周期 |
| 系统信息 | system.cpu、system.memory | 系统信息 |
| 提醒 | alarms、notifications | 阻断型强提醒或是系统的消息通知 |
| 书签 | bookmarks |  |
| 标签页 | tabs | 调用或接管标签页功能 |
| 原生右键菜单 | contextMenus |  |
| 下载行为 | downloads |  |
| 开发者工具相关 | debugger、devtools.panels |  |
|  |  |  |


> [API Reference](https://developer.chrome.com/docs/extensions/reference/)


## 尝鲜教程

[https://developer.chrome.com/docs/extensions/mv2/overview/#hello-extensions](https://developer.chrome.com/docs/extensions/mv2/overview/#hello-extensions)

---

# 架构

- Background：随扩展进程初始化执行，通常用于权限初始化、配置初始化、注册事件中心，该进程拥有大部分API权限
- Content：随每个Tabs被创建时执行
- Popup：点击扩展图标时的下拉浮层的实现
- Storage：扩展进程的存储空间

![image.png](../images/a3a0ebba60e8cdbc1ce8fbcb0f728f6e.png)

---

# 脚手架

[https://github.com/Runtu4378/chrome-extensions-template](https://github.com/Runtu4378/chrome-extensions-template)

![image.png](../images/ceb83ba870b9eaf8d1f63fff03729304.png)

---

# 参考文档

- [【干货】Chrome插件(扩展)开发全攻略](https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html)
- [写给前端的 Chrome Extension 开发](https://zhuanlan.zhihu.com/p/134578913)
- [About Manifest V2 - Chrome Developers](https://developer.chrome.com/docs/extensions/mv2/)
- [Microsoft Edge (Chromium) 扩展 - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/zh-cn/microsoft-edge/extensions-chromium/)


Chrome Extensions 是什么？定义基于 Web 技术（HTML，Javascript、CSS）的，定制浏览器的浏览体验的软件程序能够运行的平台基于 Chrome Extensions 规格创建的扩展能运行在大部分基于 Chromium 内核的环境，如 Chrome、Edge、El...

Chrome扩展开发指南

> 原文地址：[https://eslint.org/blog/2022/07/interesting-bugs-caught-by-no-constant-binary-expression/](https://eslint.org/blog/2022/07/interesting-bugs-caught-by-no-constant-binary-expression/)
> 原文作者：Jordan Eldredge
> 原文发布于：2022 年 07 月 06 日


> 这个新规则能捕捉大量惊人惊讶的逻辑错误。


我在 [ESLint v8.14.0](https://eslint.org/blog/2022/04/eslint-v8.14.0-released) 提交了一个新的核心规则 [no-constant-binary-expression](https://eslint.org/docs/rules/no-constant-binary-expression)。我通过这个规则检测到大量的微妙、有趣的代码缺陷。

在这篇文章中，我将解释该规则的作用，并分享它在 Material UI、Webpack、VS Code 和 Firefox 等流行开源项目中检测到的一些真实错误示例，以及它在 Meta 内部发现的一些有趣错误。我希望这些示例能说服您尝试在自己的项目中启用该规则！

# no-constant-binary-expression 有什么作用？

该规则检查运行时结果不会改变的比较（`==`、`!==` 等），以及总是或从不短路的逻辑表达式（`&&`、`??`、`||`）。

举个例子：

- `+x == null` 永远都是 fasle 的，因为 `+` 会把 `x` 强制变成一个数字，而数字永远不会是 nullish。
- `{ ...foo } || DEFAULT` 永远不会返回 `DEFAULT`，因为对象总是 truthy 的。

---

# 使用 `no-constant-binary-expressions` 在真实世界中发现到的错误

在本节中，我将与大家分享该规则可以捕捉到的一些错误类型。每种类型都至少包含一个在流行的开源项目中发现的具体实例。我选择在这里列举真实的例子，并不是要羞辱任何人或任何项目，而是要让大家明白，这些错误是任何团队都很容易犯的。

## 混淆运算符优先级

该规则发现的最常见错误是开发人员误解了运算符的优先级，尤其是一元运算符，如 `!`、`+` 和 `typeof`。

```javascript
if (!whitelist.has(specifier.imported.name) == null) {
  return;
}
```

_来自 _[_Material UI_](https://github.com/mui/material-ui/blob/60f02a7a6b48092eedd2c25b15a7f643168a001f/packages/mui-codemod/src/v5.0.0/top-level-imports.js#L73:L73)_（另见：VS Code _[_1_](https://github.com/captbaritone/vscode/blob/ab86e0229d6b4d0cb49cfd6747c92cafcd2bd4af/src/vs/workbench/contrib/timeline/browser/timelinePane.ts#L64)_、_[_2_](https://github.com/captbaritone/vscode/blob/ab86e0229d6b4d0cb49cfd6747c92cafcd2bd4af/src/vs/workbench/contrib/terminal/browser/terminalProfileResolverService.ts#L456:L456)_、_[_Webpack_](https://github.com/webpack/webpack/blob/3ad4fcac25a976277f2d9cceb37bc81602e96b13/lib/ExportsInfo.js#L468:L468)_、_[_Mozilla_](https://phabricator.services.mozilla.com/D145655)_）_

## 混淆 `??` 和 `||` 的优先级

在尝试定义默认值时，人们会对 `a === b ?? c` 这样的表达式感到困惑，并认为它会被解析为 `a === (b ?? c)`。而实际上，它将被解析为 `(a === b) ?? c`。

```javascript
shouldShowWelcome() {
  return this.viewModel?.welcomeExperience === WelcomeExperience.ForWorkspace ?? true;
}
```

_来自 _[_VS Code_](https://github.com/captbaritone/vscode/blob/ab86e0229d6b4d0cb49cfd6747c92cafcd2bd4af/src/vs/workbench/contrib/testing/browser/testingExplorerView.ts#L118:L118)

_题外话： 观察到开发人员经常对运算符优先级感到困惑，这激发了我的灵感，我尝试使用 _[_VS Code 扩展_](https://jordaneldredge.com/blog/a-vs-code-extension-to-combat-js-precedence-confusion/)_来直观地说明优先级是如何解释的。_

## 期望按值比较对象

在其他语言中，结构是通过值而不是引用来进行比较的，因此来自其他语言的开发人员很容易掉入这样一个陷阱：他们以为可以通过与新创建的空对象进行比较来测试对象是否为空。当然，在 JavaScript 中，对象是通过引用进行比较的，任何值都不可能等于新创建的对象字面。

在下面这个示例中，`hasData` 将始终设置为 true，因为 `data` 永远不可能等同于新创建的对象。

```javascript
hasData = hasData || data !== {};
```

_来自 _[_Firefox_](https://hg.mozilla.org/try/rev/0fe5678fb8b71f4eb26f0a153c52d0be45fc5ac1#l3.34)_（另见：_[_FireFox_](https://hg.mozilla.org/try/rev/0fe5678fb8b71f4eb26f0a153c52d0be45fc5ac1#l1.13)_）_

## 期望空对象为 `false` 或 `null`

另一种常见的 JavaScript 错误是将空对象视为 nullish 或 falsy。对于来自 Python 等语言的用户来说，这很可能是一个容易犯的错误，因为在 Python 中，空列表和字典都是 falsy 的。

```javascript
const newConfigValue = { ...configProfiles } ?? {};
```

_来自 _[_VS Code_](https://github.com/captbaritone/vscode/blob/ab86e0229d6b4d0cb49cfd6747c92cafcd2bd4af/src/vs/workbench/contrib/terminal/browser/terminalProfileQuickpick.ts#L126:L126)_（另见：VS Code _[_1_](https://github.com/captbaritone/vscode/blob/ab86e0229d6b4d0cb49cfd6747c92cafcd2bd4af/src/vs/platform/terminal/node/ptyService.ts#L369:L369)_，_[_2_](https://github.com/captbaritone/vscode/blob/ab86e0229d6b4d0cb49cfd6747c92cafcd2bd4af/src/vs/workbench/contrib/terminal/browser/terminalProfileResolverService.ts#L484:L484)_）_

## 是 `>=` 还是 `=>` ？

我只见过一次这样的错误情景，但我还是想把它写出来，因为它是一个很好的例子，说明这条规则可以捕捉到意想不到的错误类型。

在这里，开发人员的本意是测试一个值是否大于或等于零（`>= 0`），但却不小心颠倒了字符的顺序，创建了一个返回 `0 && startWidth <= 1` 的箭头函数！

```javascript
assert(startWidth => 0 && startWidth <= 1);
```

_来自 _[_Mozilla_](https://phabricator.services.mozilla.com/rMOZILLACENTRAL925b8d1ad45f80faee052492b3b43f5120052405)


---

# no-constant-binary-expression 捕捉到的其他错误

以上五类错误并不详尽。我最初在 Meta 的大型 monorepo 上运行这一规则的第一个版本时，发现了 500 多个问题。虽然许多问题属于上述类别，但也有一些其他有趣的长尾错误。其中包括：

- 以为 `||` 支持集合操作：`states.includes('VALID' || 'IN_PROGRESS')`
- 以为原生函数的返回结果是 nulls：`Number(x) == null`
- 不知道原生对象的构造函数返回的是包装对象：`new Number(x) === 10`

我从来没有打算逐一找出这些具体问题，但通过努力找出任何“无用”的东西，我们得以发现并纠正这些问题。

---

# 结论

正如你现在看到的，`no-constant-binary-expression` 能够检测出各种不同类型的错误。该规则之所以能做到这一点，并不是因为它的程序设计就是为了查找这些特定的问题，而是因为所有这些错误都有一个共同点：它们表现为无用代码。由于开发人员通常不会编写无用代码，因此检测无用代码通常就能检测出错误。

如果您觉得这些示例很有说服力，请考虑在 ESLint 配置中启用 `no-constant-binary-expression`：

```javascript
// eslintrc
module.exports = {
  rules: {
    // Requires eslint >= v8.14.0
    "no-constant-binary-expression": "error"
  }
}
```

如果你这样做了，并且发现了错误，我很乐意[听听你的意见](https://twitter.com/captbaritone)！

_感谢 _[_Brad Zacher_](https://twitter.com/bradzacher)_ 最初的观察，他的观察启发了这项工作，并建议将其作为新的核心规则。感谢 _[_Milos Djermanovic_](https://github.com/mdjermanovic)_ 在代码审查过程中做出的重要贡献。_


[译] 由 no-constant-binary-expression 捕捉到的几个有趣的代码缺陷


# 什么时候需要异步加载

在网络性能调优（如首屏时间优化）的过程中，很容易识别出一些可以放在 `DOMContentLoaded` 事件之后再加载的包。在再也无法减少包整体体积的情况下，自然会把目光投向延迟加载那部分视界以外的包。下面介绍一些常用的异步加载包的方式。

# 异步加载模块文件：ES6的import()

这个有使用过 `vue-router` 的话应该很常见，利用的是 ES6 的 `import()` 异步加载语法， `import()` 返回一个 Promise 对象，内容是模块的导出内容。使用例子见下文：

```javascript
async getComponent () => {
  this.ifInit = false
	try {
  	const { default: func } = await import('./hello.js')
    func('1')
    this.ifInit = true
  } catch (e) {
    console.error(e.message)
  }
}

```

webpack 也原生支持这种异步加载的方式，会自动把 `import()` 涉及到的相关文件也揽到自动流程中进行转码或者代码分离。

> [webpack code-splitting](https://webpack.js.org/guides/code-splitting/#dynamic-imports)
> [阮一峰-ECMAScript 6 入门-import()](https://es6.ruanyifeng.com/#docs/module#import)


# 异步加载Script文件：scriptjs

上面的方式适用于异步加载文件模块，但项目中还会遇到需要异步加载现有的静态 js 文件的情况，在这种情况下可以使用 [scriptjs - npm](https://www.npmjs.com/package/scriptjs)。示例：

```javascript
import $script from 'scriptjs'

async mounted () {
	await new Promise((resolve) => {
  	$script('/static/tinymce.min.js', 'tinymce')
    $script.ready('tinymce', async () => {
    	await import('tinymce/plugins/image')
      this.ifInit = true
      resolve()
    })
  })
}

```

使用这种方式可以把静态化的基础库资源文件的异步加载和文件模块的异步加载结合在一起，不过缺点是无法直接获取到该静态 js 的输出，只能用约定一个全局变量的方式来处理，此方法适合用来异步初始化非常基础的库（如上文是异步加载富文本的基础库来初始化 vue 包装过的富文本组件）


什么时候需要异步加载在网络性能调优（如首屏时间优化）的过程中，很容易识别出一些可以放在 ​DOMContentLoaded 事件之后再加载的包。在再也无法减少包整体体积的情况下，自然会把目光投向延迟加载那部分视界以外的包。下面介绍一些常用的异步加载包的方式。异步加载模块文件：ES6的impor...

模块和静态js的异步加载

> webpack-chain 是一款使用链式 api 来生成或修改 webpack 配置的工具，特点是或简单直观
> 本文是基于 [webpack-chain v5文档](https://github.com/neutrinojs/webpack-chain/tree/v5) 进行翻译和加上一些个人理解


# 工具初衷

这里直接用作者的描述：

> webpack 核心的配置是基于维护一个结构复杂，晦涩的对象。在尝试用于个人项目时利大于弊，但在尝试将配置共享在多个项目并进行各自的自定义变更的时候回变得混乱，这要求修改者必须对配置的结构和作用十分了解。
> webpack-chain 尝试通过提供直观的、可链式调用的 api 来改善这一过程，并可以由用户对局部的设置进行命名声明，借此来输出多项目中可自定义的接口规范。


# 版本环境

webpack-chain 要求 Node.js 版本为 v6.9 以上<br />只支持 2~5 这四个版本的 webpack 进行配置，各版本的文档略有不同，此文是 v5 版本的，[其他版本](https://github.com/neutrinojs/webpack-chain)

# 使用示例

## 使用 webpack-chain 从零创建一个 webpack 配置

```javascript
// webpack.config.js

// 引入模块，模块的输出是一个可以用来创建一个空配置的构造函数
const Config = require('webpack-chain');

// 生成一个新配置的实例
const config = new Config();

// 使用链式api来更改配置，每步配置都会实时的变更到调用api的配置实例

config
  // 声明入口文件（虽然配置得和默认值一样）
  .entry('index')
    .add('src/index.js')
    .end()
  // 更改输出配置
  .output
    .path('dist')
    .filename('[name].bundle.js');

// 显性声明一个规则块，这在下面可以准确的定位并修改这块配置
config.module
  .rule('lint')
    .test(/\.js$/)
    .pre()
    .include
      .add('src')
      .end()
    // 甚至可以为loader规则显性声明
    .use('eslint')
      .loader('eslint-loader')
      .options({
        rules: {
          semi: 'off'
        }
      });

config.module
  .rule('compile')
    .test(/\.js$/)
    .include
      .add('src')
      .add('test')
      .end()
    .use('babel')
      .loader('babel-loader')
      .options({
        presets: [
          ['@babel/preset-env', { modules: false }]
        ]
      });

// Create named plugins too!
config
  .plugin('clean')
    .use(CleanPlugin, [['dist'], { root: '/dir' }]);

// Export the completed configuration object to be consumed by webpack
module.exports = config.toConfig();

```
将 webpack-chain 的配置实例转化为 webpack 可用的配置对象只需要在传递给 webpack 之前调用 `toConfig()` 方法，下面简单演示一种基于基础配置，生成本地和测试环境配置的示例。

```javascript
// webpack.core.js
const Config = require('webpack-chain');
const config = new Config();

// 最基础的配置
// ...

// 输出的是配置实例，而非配置对象
module.exports = config;

// webpack.dev.js
const config = require('./webpack.core');

// 本地的额外配置
// ...

// 转换为配置对象供webpack使用
module.exports = config.toConfig();

// webpack.prod.js
const config = require('./webpack.core');

// 生产的额外配置
// ...

module.exports = config.toConfig();

```

# 核心概念

webpack-chain 会将配置项转化成特殊的数据接口来向他们提供特殊的操作接口和遍历方法，已达到简化操作的目的，主要是类似 ES6 中 `Set` 和 `Map` 的 `ChainedSet` 和 `ChainedMap` 

## ChainedMap

被转换为 `ChainedMap` 的配置节点会拥有下面的接口和方法：

> 如无特地声明返回值，下面的方法返回的都是该 ChainedMap 自身，以此来实现链式调用


```javascript
// 删除该节点的所有条目
clear()

// 根据提供的key删除指定的条目
// key: *
delete(key)

// 根据提供的key获取指定条目的值，返回值是值
// key: *
// returns: value
get(key)

// 尝试根据提供的key获取指定条目，如无此条目，根据传入的回调函数进行值的创建并返回创建后的该条目的值
// key: *
// fn: Function () -> value
// returns: value
getOrCompute(key, fn)

// 设置某个条目的值
// key: *
// value: *
set(key, value)

// 返回提供的key是否已被创建
// key: *
// returns: Boolean
has(key)

// 以数组形式返回改节点的所有值
// returns: Array
values()

// 返回一个承载所有条目的对象，其中对象的key值对应的是条目的key。如果该节点没有条目的话返回undefined
// 对使用.before()或者.after()来进行插入的条目会按照插入时的顺序返回
// returns: Object, undefined if empty
entries()

// Provide an object which maps its properties and values
// into the backing Map as keys and values.
// You can also provide an array as the second argument
// for property names to omit from being merged.
// obj: Object
// omit: Optional Array
merge(obj, omit)

// Execute a function against the current configuration context
// handler: Function -> ChainedMap
// 		A function which is given a single argument of the ChainedMap instance
batch(handler)

// Conditionally execute a function to continue configuration
// condition: Boolean
// whenTruthy: Function -> ChainedMap
// 		invoked when condition is truthy, given a single argument of the ChainedMap instance
// whenFalsy: Optional Function -> ChainedMap
// 		invoked when condition is falsy, given a single argument of the ChainedMap instance
when(condition, whenTruthy, whenFalsy)

```

## ChainedSet

被转换为 `ChainedSet` 的配置节点会拥有下面的接口和方法：

> 同样，如无特地声明返回值，下面的方法返回的都是该 ChainedSet 自身，以此来实现链式调用


```javascript
// Add/append a value to the end of a Set.
// value: *
add(value)

// Add a value to the beginning of a Set.
// value: *
prepend(value)

// Remove all values from a Set.
clear()

// Remove a specific value from a Set.
// value: *
delete(value)

// Returns `true` or `false` based on whether or not the
// backing Set contains the specified value.
// value: *
// returns: Boolean
has(value)

// Returns an array of values contained in the backing Set.
// returns: Array
values()

// Concatenates the given array to the end of the backing Set.
// arr: Array
merge(arr)

// Execute a function against the current configuration context
// handler: Function -> ChainedSet
//   A function which is given a single argument of the ChainedSet instance
batch(handler)

// Conditionally execute a function to continue configuration
// condition: Boolean
// whenTruthy: Function -> ChainedSet
//   invoked when condition is truthy, given a single argument of the ChainedSet instance
// whenFalsy: Optional Function -> ChainedSet
//   invoked when condition is falsy, given a single argument of the ChainedSet instance
when(condition, whenTruthy, whenFalsy)

```

## 速记方法

在类对象的 `ChainedMap` 节点上，有很多以 webpack 中同名配置为名的速记方法可供使用，如 devServer 中的 hot 项的配置有以下两种方法：

```javascript
// 这是速记方法，同样可以达到设置该配置的值的效果
devServer.hot(true);

// 等效于：
devServer.set('hot', true);

```

# 各配置节点的数据类型和速记方法表

链式调用会遇到的一个问题就是随着遍历深入，链的当前上下文也会越来越深，这时候你可以调用 `.end()` 来返回上一级上下文。<br />限于篇幅，这里提供的各节点的数据结构未必是全面的，最完整的配置接口可以对照 [webpack官方配置描述](https://webpack.js.org/configuration/)。

## Config

```javascript
Config : ChainedMap

const Config = require('webpack-chain');

const config = new Config();

```

### 速记方法

```javascript
config
  .amd(amd)
  .bail(bail)
  .cache(cache)
  .devtool(devtool)
  .context(context)
  .externals(externals)
  .loader(loader)
  .name(name)
  .mode(mode)
  .parallelism(parallelism)
  .profile(profile)
  .recordsPath(recordsPath)
  .recordsInputPath(recordsInputPath)
  .recordsOutputPath(recordsOutputPath)
  .stats(stats)
  .target(target)
  .watch(watch)
  .watchOptions(watchOptions)

```
## Config entryPoints
```javascript
config.entryPoints : ChainedMap
config.entry(name) : ChainedSet

config
  .entry(name)
    .add(value)
    .add(value)

config
  .entry(name)
    .clear()

// Using low-level config.entryPoints:

config.entryPoints
  .get(name)
    .add(value)
    .add(value)

config.entryPoints
  .get(name)
    .clear()
```

## Config output: 速记方法

```javascript
config.output : ChainedMap

config.output
  .auxiliaryComment(auxiliaryComment)
  .chunkFilename(chunkFilename)
  .chunkLoadTimeout(chunkLoadTimeout)
  .crossOriginLoading(crossOriginLoading)
  .devtoolFallbackModuleFilenameTemplate(devtoolFallbackModuleFilenameTemplate)
  .devtoolLineToLine(devtoolLineToLine)
  .devtoolModuleFilenameTemplate(devtoolModuleFilenameTemplate)
  .filename(filename)
  .hashFunction(hashFunction)
  .hashDigest(hashDigest)
  .hashDigestLength(hashDigestLength)
  .hashSalt(hashSalt)
  .hotUpdateChunkFilename(hotUpdateChunkFilename)
  .hotUpdateFunction(hotUpdateFunction)
  .hotUpdateMainFilename(hotUpdateMainFilename)
  .jsonpFunction(jsonpFunction)
  .library(library)
  .libraryExport(libraryExport)
  .libraryTarget(libraryTarget)
  .path(path)
  .pathinfo(pathinfo)
  .publicPath(publicPath)
  .sourceMapFilename(sourceMapFilename)
  .sourcePrefix(sourcePrefix)
  .strictModuleExceptionHandling(strictModuleExceptionHandling)
  .umdNamedDefine(umdNamedDefine)

```


webpack-chain 是一款使用链式 api 来生成或修改 webpack 配置的工具，特点是或简单直观本文是基于 webpack-chain v5文档 进行翻译和加上一些个人理解工具初衷这里直接用作者的描述：webpack 核心的配置是基于维护一个结构复杂，晦涩的对象。在尝试用于个人项...

webpack-chain 文档及用法简析

## 从微软办公三件套说起

1983年至今（38岁）
## 文本编辑器的四要素

- 光标
- 选择内容
- 输入
- 其他操作
## 各系统常用的一些选择和编辑操作
### 选择操作

#### 鼠标篇

**双击**：选择一个单词<br />**三击**：选中一行

#### 键盘篇

**便捷选择长段落**：光标置于开始选择处，按住 shift 单击结束处。<br />**选择不连续的多段文本：**先选择中第一段，按住 ctrl 继续选择其他段落。<br />**选择一个矩形内的文字**：shift + ctrl + 鼠标选取<br />选择一个可匹配项：ctrl + d


从微软办公三件套说起1983年至今（38岁）文本编辑器的四要素光标选择内容输入其他操作各系统常用的一些选择和编辑操作选择操作鼠标篇双击：选择一个单词三击：选中一行键盘篇便捷选择长段落：光标置于开始选择处，按住 shift 单击结束处。选择不连续的多段文本：先选择中第一段，按住 ctrl 继续选...

vscode 那些文本编辑的快捷键

[模块首页](https://www.npmjs.com/package/array-first) [仓库首页](https://github.com/jonschlinkert/array-first)<br />![image.png](../images/f0f9b75e56bb17c269fd7b00204b7414.png)
## 功能简述

- 提取数组第一个或前n个元素
- 检验入参是否为标准数组，否则抛出错误
- 取一个元素时返回该元素，取多个元素时返回多个元素
## 示例和源码解析
这个模块比较简单，就不放了，直接看主页就行
```javascript
var isNumber = require('is-number');
var slice = require('array-slice');

module.exports = function arrayFirst(arr, num) {
  if (!Array.isArray(arr)) {
    throw new Error('array-first expects an array as the first argument.');
  }

  if (arr.length === 0) {
    return null;
  }

  var first = slice(arr, 0, isNumber(num) ? +num : 1);
  if (+num === 1 || num == null) {
    return first[0];
  }
  return first;
};

```
## 技巧分析
可以看到这个项目使用者寥寥，部分原因是这个模块的功能基本已经由原生JS提供了，作者自己再次封装一遍意义不大。<br />不过如果不是出于实用性，而是出于对npm模块机制的学习来看的话，作者在源码中使用到的 is-number 和 array-slice 都是他自己发布的模块，而且本模块的环境配置、关键字都有进行特地的维护，可以针对怎样运营 npm 模块学习一下

TODO: npm模块运营指南



模块首页 仓库首页功能简述提取数组第一个或前n个元素检验入参是否为标准数组，否则抛出错误取一个元素时返回该元素，取多个元素时返回多个元素示例和源码解析这个模块比较简单，就不放了，直接看主页就行var isNumber = require('is-number'); var slice = re...

array-first - 提取数组前(n = 1)个元素

> 原文地址：[https://devblogs.microsoft.com/typescript/changes-to-how-we-manage-definitelytyped/](https://devblogs.microsoft.com/typescript/changes-to-how-we-manage-definitelytyped/)
> 原文发布于：2020年5月29日

> 缩写定义
> DT：Definitely Typed 仓库的缩写
> PR：Pull Request 代码拉取请求的缩写


托管在 github 上的 [Definitely Typed](https://github.com/DefinitelyTyped/DefinitelyTyped)（下文统一简称DT）项目是 [Github 年度 octoverse 报告](https://octoverse.github.com/) 上的常客，是贡献者数最多的前十个仓库之一。如果你没有听说过 DT 的话，它是一个存储了成千上万个 JavaScript 项目的类型声明文件（`.d.ts`文件）仓库，并且你可能已经通过使用 `@types/something` 命名方式的模块来使用过这个仓库的产物了。

最开始完全由社区驱动的方式来进行的类型定义工作对 TypeScript 生态的作用变得越来越重要，以至于 TypeScript 团队承担起了主要的维护 DT 项目的工作。而 TypeScript 团队也非常认真的对待维护 DT 项目的职责，自 [2016年年中](https://github.com/Microsoft/TypeScript/issues/9184) 以来，团队实行这样的轮换制度：被轮换到的成员在一周时间内会专注于合并 PR 和 DT 项目的维护。我们和其他 DT 项目的维护者合作，每周处理约 250 个 PR 请求，直至上周，超过90%的请求都已经被处理了。

在过去的一年里，我们一直致力于开发配套的工具，为了在保证 DT 生态系统稳定性的同时，为维护者贡献代码提供更加精简的体验——定义作者现在可以自己将 PR 合并到他们的模块上了！

### 我们是怎么做到的？
我们为 DT 项目建立了一些保证安全性的手段，这为团队提供了更多系统稳健性方面的信心。
#### 
#### 我们会对每一次变更执行性能和集成测试
性能检查会检查两点：

- 该变化是否增加了编译文件时的内存使用；
- 它们是否会减慢编辑器的操作，比如“转到定义”和代码补全。

性能很重要，因为我们看到过因为一个库的变化导致依赖它的模块的编译时间急剧增加的例子。通过在 PR 过程中提供有用的性能反馈，维护者可以了解性能变化并权衡这些变更的必要性。

集成测试会同时验证这两点：

- 你导出的类型定义和使用 [dts-critic](https://github.com/DefinitelyTyped/dts-critic) 的 JavaScript 的类型定义导出能够大致相同。这能够让开发者对所定义的类型说明是否适配目标 JavaScript 模块更有自信。
- 该改变不会破坏该类型定义库所依赖的下游依赖。
#### 
#### TypeScript 开发环境验证
TypeScript 的升级有可能会破坏你在 DT 中的类型定义。这可能是改进编译器控制流分析导致的，或者是通过修复一个不小心引入的依赖导致的。

TypeScript 开发团队不希望发布了一个新版本之后才发现它破坏了大量 DT 中的类型定义。目前有两个系统来防止这一情况。

第一个是我们简化了测试流程，能够使用开发中（WIP）的编译器对所有 DT 测试用例进行测试。如果新代码会导致 DT 中的报错，那么这个编译器 mr 的作者有责任在 mr 被合并之前在 DT 这边进行相关修复。

第二个是 DT 每晚都会拉取 TypeScript 的 master 分支自动测试。

这能帮助团队尽早发现问题，并将修复问题的责任转移给进行语言修改的人。

#### [dtslint](https://github.com/microsoft/dtslint)为基于模块的测试提供支持
DT 中的模块总是和它的测试文件一起被提交的。这些测试文件以 `.ts` 或 `.tsx` 结尾，测试最终提供给用户的 `.d.ts` 文件。我们建议模块的测试文件从测试库的一些使用示例代码开始，以测试模块的核心使用场景，然后随着被新增到 `.d.ts` 的新类型逐步添加测试用例。

这些测试用例可以验证 `.d.ts` 是否准确的描述了对应的 JavaScript 模块，也可以用于验证新的修改不会破坏旧的版本。

有了这些系统，我们能够更容易扩大每日能够容载的 mr 数量，减少了审核时长。这便是为什么我们最近让定义作者可以自己合并 PR 的原因！
### 
### 哪些 PR 是定义作者有权合并的
对所有对 DT 项目提交的 PR 而言，存在这三组关联方：

- **DT 维护者们**，目的是维护整个 DT 生态稳定性。
- **定义作者**，目的是保持他们的模块有最新的、合适的代码提示。
- **普通开发者**，尽管不是模块作者，但自发的想要维护该模块的定义。

在之前，只有 DT 维护者们才可以合并 PR 请求。通过新的 [github 机器人](https://github.com/DefinitelyTyped/dt-mergebot/)，我们把能力下放到定义作者，使他们能够自行合并他们的变更。

在判断一个 PR 能否被定义作者合并时，我们把对 DT 的变更分为两类：

- PR 添加的是新模块的类型定义，这将需要由 DT 维护者们进行验证和合并，这种请求不能由定义作者自行合并。
- 对原有模块的 PR

针对第二类 PR，我们又根据该模块的影响力分为了两类：

- 影响到的是极受欢迎的库，如：Node、React、Lodash 或 Jest 等
- 其他库

在 npm 上每月下载量达 500 万以上的极受欢迎的库的改动也不能直接由定义作者进行合并，同样需要 DT 维护者们参与验证和进行合并。不过，这种改动是少见的，我们收到的大部分 PR 都是对较小的库的快读修改。

### 什么时候 PR 能够由它的作者合并
在判断了一个 PR 能够被定义作者合并之后，我们的机器人会引导 PR 的作者去完成合并过程。我们为 PR 合并设定了四个条件：

- 没有合并冲突
- CI 已经通过了这个模块和它的依赖的自动化测试
- 这次变更都有在 `d.ts` 中编写相应的测试用例
- 最近一次的提交是由定义作者或者是 DT 维护者审批通过的

随着 PR 经历上述阶段，机器人会自动发送相应的评论描述当前自动合并的状态。

这样做的原因是我们试图让机器人为自动合并可能出现的各种状态分支进行对应的引导，并就下一步该做什么进行反馈，为贡献者提供修订文档的链接。

![image.png](../images/a900a36afa857aaa60a516ec71d99c51.png)<br />![image.png](../images/09a143aa714e503b063f5508e49d91c6.png)<br />![image.png](../images/a84d97513e1c8b249ae3aa3aae0bb909.png)<br />![image.png](../images/9cac03ce8cce6d57d1ac74b9e7d844b8.png)<br />我们开始看到每天大约有 20 个 PR 请求通过这个新系统被社区合并。由定义作者合并的 PR 通常会在一天内处理完毕，并且不会因为 TypeScript 团队的轮值值班人员的精力不足而被阻止。例如，[theme-ui](https://theme-ui.com/) 发现了一个[类型定义的缺陷](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/45032#issuecomment-635231194)，发现者发起了一个 [PR](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/45114) 来进行修复，定义作者进行了审批并在一个小时内完成了合并。这是一个完美的例子，说明我们为什么要完善 PR 机制。

在我们思考我们应该如何维护这么一个变化频繁的项目的时候，我们认为它结合了谨慎的自动化流程和大量的人力贡献。DefinitelyTyped 是一个大规模的社区项目，有上万人参与贡献，我们真的为它所取得的成就感到骄傲，也要为了下一万个贡献者能够更轻松而努力。

原作者：<br />Orta Therox<br />Engineer on the TypeScript Compiler<br />[https://devblogs.microsoft.com/typescript/author/ortammicrosoft-com/](https://devblogs.microsoft.com/typescript/author/ortammicrosoft-com/)


原文地址：https://devblogs.microsoft.com/typescript/changes-to-how-we-manage-definitelytyped/原文发布于：2020年5月29日缩写定义DT：Definitely Typed 仓库的缩写PR：Pull Reques...

[译] DefinitelyTyped 的自动化管理改造

> 原文地址：[https://www.paulsblog.dev/advanced-javascript-functions-to-improve-code-quality/](https://www.paulsblog.dev/advanced-javascript-functions-to-improve-code-quality/)
> 原文作者：Paul Knulst
> 原文发布于：2023年1月26日


> 通过使用包括 Debounce、Once 和 Memoize 的函数，以及 Pipe、Pick 和 Zip，来提高代码质量！

## 介绍
**JavaScript 是一种强大而多功能的编程语言**，具有许多内置特性，可以帮助您编写更高效、可维护和易读的代码。

在这篇文章中，我将解释如何使用一些内置特性来创建一些高级函数，以**提高性能**并使你的代码看起来更加美观。我将介绍 Debounce、Throttle、Once、Memoize、Curry、Partial、Pipe、Compose、Pick、Omit 和 Zip，您可以将它们保存在 utils 文件/类中，以优化您的代码质量。

**尽管这些函数使用 JavaScript 实现，但它们可以很容易地在任何编程语言中实现。一旦理解了这些函数的概念，就可以在任何语言中应用。**

此外，本文所描述的函数（或概念）**经常在技术面试中被问到**。

无论您是初学者还是经验丰富的高级开发人员，这些函数都将优化您的代码和编程体验。它们将令你在使用 JavaScript 时更加愉快和高效。
## Debounce
Debounce 函数是一种防止系列事件被快速重复调用的方法。它的机制是推迟函数执行，直到一定时间段过去，事件未被触发，才工作。Debounce 函数是一种有用的解决方案，可以应用于现实世界中，防止用户快速点击按钮并多次执行函数，从而提高性能。

以下代码片段将展示如何在 JavaScript 中实现 debounce 函数：
```javascript
function debounce(func, delay) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}
```
在这个 JavaScript 代码片段中，`debounce` 函数将返回一个新函数，在先前定义的 `delay` 后执行原始函数。如果该函数再次被调用，`timeout` 将被重置，函数的调用将被推迟。

如果您有一个在窗口调整大小时更新网页布局的函数，则此功能将很有用。如果没有 Debounce 函数，当用户调整窗口大小时，此函数将被快速连续调用多次，这可能会导致性能问题。使用 Debounce 函数，可以限制布局更新的频率，使页面更具响应性和效率。

以下代码片段显示了在这种情况下使用 Debounce 函数的方法：
```javascript
// Define the function that updates the layout
function updateLayout() {
  // Update the layout...
}

// Create a debounced version of the function
const debouncedUpdateLayout = debounce(updateLayout, 250);

// Listen for window resize events and call the debounced function
window.addEventListener("resize", debouncedUpdateLayout);
```
在这个例子中，当窗口调整大小时，`updateLayout` 函数最多每 250 毫秒被调用一次。此功能确保布局仅在用户完成调整窗口大小后的 250ms 后被更新，使网页更有效和响应。
## Throttle
Throttle 函数与 Debounce 函数类似，但行为略有不同。它不是限制函数_调用_的速率，而是限制函数_执行_的速率。这意味着如果在上一段给定时间内调用了函数，它将禁止执行。它保证某个函数以一致的速率运行，不会过于频繁地触发。

Throttle 函数的实现如下：
```javascript
function throttle(func, delay) {
  let wait = false;

  return (...args) => {
    if (wait) {
        return;
    }

    func(...args);
    wait = true;
    setTimeout(() => {
      wait = false;
    }, delay);
  }
}
```
在这个代码片段中， `throttle` 函数会执行提供的 `func` 函数，将 `wait` 变量更新为 `true`，然后启动一个计时器，在 `delay` 过后重置 `wait` 参数。 如果再次调用 `throttle` 函数，它在 `wait` 参数仍然为 `true` 时直接返回，反之调用提供的函数。

如果您要在滚动时更新布局，可以在网页上使用 Throttle 功能。 如果没有 `throttle` 函数，当用户在页面上滚动时，此更新函数将被多次调用，导致严重的性能问题。 使用 `throttle` 函数，您可以确保每 X 毫秒只执行一次。 这将导致网页更响应更有效的可用性。

在下面的代码片段中，您可以看到如何使用 `throttle` 函数：
```javascript
// Define the function that updates the layout
function updateLayout() {
  // Update the layout...
}

// Create a throttled version of the function
const throttledUpdateLayout = throttle(updateLayout, 250);

// Listen for window scroll events and call the throttled function
window.addEventListener("scroll", throttledUpdateLayout);
```
通过定义 `hrottleUpdatedLayout` 函数并指定 250 毫秒的延迟，可以确保窗口滚动时，`updateLayout` 函数最多每 250 毫秒执行一次。如果事件在达到延迟之前被触发，则不会发生任何事情。
## Once
Once 函数是一种在已经调用过后将防止再次执行的方法。特别适用于处理仅应该运行一次的事件监听器，而不是在每次都移除事件监听器，您可以在 JavaScript 中使用 Once 函数。
```javascript
function once(func) {
  let ran = false;
  let result;
  return function() {
    if (ran) return result;
    result = func.apply(this, arguments);
    ran = true;
    return result;
  };
}
```
例如，您可以拥有一个向服务器发送请求以加载数据的函数。使用 `once()` 函数，您可以确保请求不会多次调用，即使用户不断点击按钮。**这将避免性能问题**。

如果没有 `once()` 函数，您需要在请求发送后立即删除单击监听器，以防再次发送请求。

在任何代码中应用 `once()` 函数将如下所示：
```javascript
// Define the function that sends the request
function requestSomeData() {
  // Send the request...
}

// Create a version of the function that can only be called once
const sendRequestOnce = once(sendRequest);

// Listen for clicks on a button and call the "once" function
const button = document.querySelector("button");
button.addEventListener("click", sendRequestOnce);
```
在这个例子中，即使用户多次点击按钮，`requestSomeData` 函数也只会被调用一次。
## Memoize
Memoize是 一个 JavaScript 函数，用于缓存给定函数的结果，以防止多次使用相同参数调用计算代价高昂的例程。
```javascript
function memoize(func) {
  const cache = new Map();
  return function() {
    const key = JSON.stringify(arguments);
    if (cache.has(key)) {
        return cache.get(key);
    }
    const result = func.apply(this, arguments);
    cache.set(key, result);
    return result;
  };
}
```
这个 `memoize()` 函数将缓存给定函数的结果，并使用参数作为键来检索如果在同一参数下再次调用时的结果。

现在，如果您有一个基于输入变量的复杂计算的函数，您可以使用 `memoize()` 函数来缓存结果并在多次使用相同输入时立即检索它们。

为了看到 `memoize()` 函数的好处，您可以使用它来计算斐波那契数列：
```javascript
// Define the function that performs the calculation
function fibonacci(n) {
    if (n < 2)
        return 1;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

// Create a memoized version of the function
const memoizedFibonacci = memoize(fibonacci);

// Call the memoized function with multiple input values
console.time('total')
console.time('sub1')
const result1 = memoizedFibonacci(30);
console.timeEnd('sub1')
console.time('sub2')
const result2 = memoizedFibonacci(29);
console.timeEnd('sub2')
console.time('sub3')
const result3 = memoizedFibonacci(30);
console.timeEnd('sub3')
console.timeEnd('total')
```
在这个例子中，`fibonacci()` 函数将被转换成 `memoizedFibonacci` 函数。然后调用 `memoized()` 函数，并将执行时间记录到控制台。

输出将如下所示：<br />![image.png](../images/9387208a873d2e142bcfc2e59d27bf31.png)<br />尽管第二次调用（sub2）仅计算斐波那契数字 29，看起来时间比第二次计算（sub3）斐波那契数字 30 更长，因为它（sub3）被 `memoize()` 函数缓存了。
## Curry
Curry 函数（也称为 Currying）是一个高级的 JavaScript 函数，用于通过“预填充”一些参数来从现有函数创建一个新函数。当处理带有多个参数的函数时，常常使用 Curry 函数将它们转换为仅需局部参数的函数，因为其他参数将始终保持不变。

使用 Curry 函数有几个好处：

- 它有助于避免多次使用同一个变量
- 它使代码更具可读性
- 它将函数划分为多个较小的函数，符合单一职责

```javascript
function curry(func, arity = func.length) {
  return function curried(...args) {
    if (args.length >= arity) return func(...args);
    return function(...moreArgs) {
      return curried(...args, ...moreArgs);
    };
  };
}
```
这个 Curry 函数接收另一个函数 (`func`) 和一个可选的 `arity` 参数，它默认值为 `func` 参数的长度。它返回一个新函数 (`curried`)，可以使用 `arity` 个参数调用。如果调用时未提供所有参数，则返回一个新函数，可以记录后续调用时的参数，直到提供了所有必需参数。当提供了所有参数时，调用原始函数 (`func`)，并返回其结果。

为了理解 Curry 函数的好处，你可以想象一种计算平面上两点间距离的方法。使用 Curry 函数，您可以创建一个新函数，它仅需要其中一个点，使其更容易使用。

以下片段将显示如何使用之前定义的 curry 函数来优化实现的可读性：
```javascript
// Define the function that calculates the distance between two points
function distance(x1, y1, x2, y2) {
  return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
}

// Create a curried version of the function that only requires one of the points
const distanceFromOrigin = curry(distance, 3)(0, 0);

// Call the curried function with the other point
const d1 = distanceFromOrigin(1, 1);
const d2 = distanceFromOrigin(2, 2);
```
在这个例子中，通过使用 `curry` 函数将 `distance` 作为第一个参数， `3` 作为第二个参数（`arity`），创建了距离函数的柯里化版本（`distanceFromOrigin`）。另外，它将使用 `0,0` 和前两个参数一起调用柯里化函数。

现在，函数 `distanceFromOrigin` 是一个新函数，只需要两个参数，并始终使用 `0,0` 作为第一个点。
## Partial
Partial 函数在 JavaScript 中类似于 Curry 函数。Curry 和 Partial 的显著区别在于，调用 Partial 函数会立即返回结果，而不是在 Curry 链中返回另一个函数。
```javascript
function partial(func, ...args) {
  return function partiallyApplied(...moreArgs) {
    return func(...args, ...moreArgs);
  }
}
```
这个 JavaScript 中的 `partial` 函数通常需要一个现有的函数、一个或多个输入参数，并返回一个新函数，新函数在调用时以定义时传入的参数和新参数合并在一起调用原始函数。

在下面的使用情况中，将使用前两个参数预先填充 `calculate` 函数以生成一个具有更可读名称的新函数：
```javascript
// Define the function that calculates something
function calculate(x, y, z) {
	return (x + y) * z
}

// Create a partially applied version of the function the last argument
const multiply10By = partial(calculate, 8, 2);

// Call the partially applied function with the number of iterations
const result = multiply10By(5);
```
在这个例子中，通过部分应用通用计算函数并预先填写前两个参数（8 和 2），创建了 `multiply10By` 函数。 这将创建一个仅需要一个参数的新函数，该参数指定必须对 10 进行的乘法的数量。 此外，它将使代码更易读和理解。
## Pipe
管道函数是一种实用函数，用于链接多个函数并将一个函数的输出传递给下一个函数。它类似于 Unix 管道操作，通过使用 `reduce()` ，所有传入的函数将从左到右依次执行：
```javascript
function pipe(...funcs) {
  return function piped(...args) {
    return funcs.reduce((result, func) => [func.call(this, ...result)], args)[0];
  };
}
```
理解管道函数，想象你有三个函数：

- 向字符串添加前缀
- 向字符串添加后缀
- 将字符串转换为大写

然后，您可以使用管道函数创建一个新函数，该函数从左到右依次执行，对字符串应用变更。
```javascript
// Define the functions that add to the string
function addPrefix(str) {
  return "prefix-" + str;
}

function addSuffix(str) {
  return str + "-suffix";
}

function toUppercase(str) {
    return str.toUpperCase()
}

// Create a piped function that applies the three functions in the correct order
const decorated1 = pipe(addPrefix, addSuffix, toUppercase);
const decorated2 = pipe(toUppercase, addPrefix, addSuffix);

// Call the piped function with the input string
const result1 = decorated1("hello");		// PREFIX-HELLO-SUFFIX
const result2 = decorated2("hello");		// prefix-HELLO-suffix
```
在这个例子中，通过以不同顺序管道执行 `addPrefix`、`addSuffix` 和 `toUppercase` 函数创建了 `decorated1` 和 `decorated2` 函数。创建的新函数可以输入字符串进行调用，以便按给定的顺序应用三个原始函数。由于 pipe 函数提供的顺序不同，因此生成的输出字符串也将不同。
## Compose
组合函数与管道函数相同，但它将使用 `reduceRight` 应用所有函数：
```javascript
function compose(...funcs) {
  return function composed(...args) {
    return funcs.reduceRight((result, func) => [func.call(this, ...result)], args)[0];
  };
}
```
这将导致相同的功能，但函数是从右到左依次执行的。
## Pick
Pick 函数在 JavaScript 中用于从对象中选择特定值。它是通过从提供的项目中选择某些属性来创建一个新对象的方法。它是一种函数编程技术，允许从任何对象中提取属性的子集（如果该属性可用）。

这是 Pick 函数的实现：
```javascript
function pick(obj, keys) {
  return keys.reduce((acc, key) => {
    if (obj.hasOwnProperty(key)) {
      acc[key] = obj[key];
    }
    return acc;
  }, {});
}
```
这个函数有两个参数：

- `obj`：原始对象，新对象将根据它来创建。
- `keys`：要选择传输到新对象中的键数组。

要创建新对象，使用 `reduce()` 方法来遍历键数组并将它们与原始对象的属性进行比较。如果存在值，它将被添加到 reduce 函数的累加器对象中，该对象已使用 `{}` 进行初始化。

在 reduce 函数的最后，累加器对象是一个新的对象，仅包含在 `keys` 数组中的指定属性。

如果您想避免超取数据，此函数非常有用。使用 Pick 函数，您可以从数据库中检索任何对象，然后仅 `pick()` 所需的属性并将它们返回给调用者。
```javascript
const obj = {
    id: 1,
    name: 'Paul',
    password: '82ada72easd7',
    role: 'admin',
    website: 'https://www.paulsblog.dev',
};

const selected = pick(obj, ['name', 'website']);
console.log(selected); // { name: 'Paul', website: 'https://www.paulsblog.dev' }
```
这个函数将使用 `pick()` 函数创建一个仅包含 `name` 和 `website` 的新对象，而不会暴露 `role`、`password` 或 `id` 给调用者。
## Omit
Omit 函数是 Pick 函数的相反，它会从现有对象中删除某些属性。这意味着您可以通过隐藏属性来避免超取数据。如果要隐藏的属性数量小于要选择的属性数量，则可以使用它替换 Pick 函数。
```javascript
function omit(obj, keys) {
  return Object.keys(obj)
    .filter(key => !keys.includes(key))
    .reduce((acc, key) => {
      acc[key] = obj[key];
      return acc;
    }, {});
}
```
这个函数有两个参数：

- `obj`：原始对象，新对象将从中创建。
- `keys`：不应该在新对象中的键数组。

为了创建一个新对象并删除属性，使用 `Object.keys()` 函数创建原始对象的键数组。然后，使用 `filter()` 函数删除在 `keys` 参数中指定的每个键。通过 `reduce` 函数，将遍历剩余的键，并返回一个新对象，该对象仅由不在 `keys` 数组中提供的每个键组成。

实际上，如果您有一个大的用户对象，只想删除 id，您可以使用它：
```javascript
const obj = {
    id: 1,
    name: 'Paul',
    job: 'Senior Engineer',
    twitter: 'https://www.twitter.com/paulknulst',
    website: 'https://www.paulsblog.dev',
};

const selected = omit(obj, ['id']);
console.log(selected); // {name: 'Paul', job: 'Senior Engineer', twitter: 'https://www.twitter.com/paulknulst', website: 'https://www.paulsblog.dev'}
```
在这个例子中，`omit()` 函数被用来移除 `id` 属性，并获取一个仅包含其他属性的对象。这比使用 for 循环，设置 `obj.id=undefined` 或使用 `pick()` 并提供所有属性更具可读性。
## Zip
Zip 函数，它将每个元素数组与另一个元素数组进行匹配，并用于将多个数组合并为单个二维数组。生成的数组将包含来自每个数组的相应元素。通常，当处理来自多个源的数据并需要以某种方式合并或关联时使用此功能。

与 Python 不同，JavaScript 没有预先提供 Zip 函数。但是，实现很容易。
```javascript
function zip(...arrays) {
  const maxLength = Math.max(...arrays.map(array => array.length));
  return Array.from({ length: maxLength }).map((_, i) => {
    return Array.from({ length: arrays.length }, (_, j) => arrays[j][i]);
  });
}
```
这个 JavaScript 代码片段将创建一个新的二维数组，其中每个子数组由提供的数组的元素组成。这意味着，原始数组的每个元素和另一个原始数组的相同索引的元素，根据索引合并成若干个子数组。

例如，您可以有三个数组：

1. 包含各个点的 x 坐标
2. 包含各个点的 y 坐标
3. 包含各个点的 z 坐标

如果没有 zip 函数，您将手动循环数组并配对 x、y 和 z 元素。但是，通过使用 zip 函数，您可以传递原始数组并生成新的 (x、y、z) 元组数组。
```javascript
// Define the arrays that contain the coordinates
const xCoordinates = [1, 2, 3, 4];
const yCoordinates = [5, 6, 7, 8];
const zCoordinates = [3, 6, 1, 7];

// Create a zipped array of points
const points = zip(xCoordinates, yCoordinates, zCoordinates);

// Use the zipped array of points
console.log(points);  // [[1, 5, 3], [2, 6, 6], [3, 7, 1], [4, 8, 7]]
```
在这个例子中，`zip` 函数用于将 `xCoordinates`、`yCoordinates` 和 `zCoordinates` 数组组合成单个元组数组。
## 结束语
在本博客文章中，我涵盖了许多强大且有用的函数，它们帮助编写更高效，可读性更强，更易于维护的 JavaScript 代码。如果正确使用，这些函数将提高代码质量，使项目更易于处理。

重要的是要说明，介绍的这些函数不包含在 JavaScript 语言的核心部分中被实现，但在许多流行的 JavaScript 框架中有被实现，如 **underscore.js**，**lodash** 等。

最后，学习在实际软件项目中有效地使用这些函数是一个持续的实践过程。过一段时间后，您将能轻松高效地使用这些函数，使代码更具可读性和可维护性。同时，总体代码质量将得到优化。

最后，您对这些 JavaScript 函数有什么看法？您是否渴望将其应用于您的项目？此外，您对这些函数都有哪些疑问？我很想听到您的想法和回答您的问题。请在评论中分享一切。

谢谢您的阅读，祝你**编码愉快**！


原文地址：https://www.paulsblog.dev/advanced-javascript-functions-to-improve-code-quality/原文作者：Paul Knulst原文发布于：2023年1月26日通过使用包括 Debounce、Once 和 Memoize...

[译] 提高代码质量的 11 个高级 JavaScript 函数

## 什么是测试用例？
我们可能对下面这条测试用例略有耳闻：

> **The quick brown fox jumps over the lazy dog**

这是一个很著名的测试用例，因为它包含了 26 个英文字母。可以用来测试打字机、练习打字或者测试字体显示效果。

由此可知，测试用例是设计来能够较为全面的体验产品功能的一系列操作流程。

在开发领域中，有一个思想叫做 TDD(Test-Driven Development)，即 **测试驱动开发**。这个思想的原理是在开发功能代码之前，先编写单元测试用例代码，测试代码确定需要编写什么产品代码。

而在普通的前端开发中，对测试的必要性的想像可能一般停留在工作合作中测试同事扔给你的一个测试用例表格而已。其实了解和实践测试相关的方法论能够让你在程序如何实现稳健性和思维的缜密度锻炼能得到提高。

## 测试方法论介绍
这里不才，直接引用两位写得十分完善的相关文章。

其中基本需要了解的是黑盒测试和白盒测试代表的测试方法是什么，哪些指标能够衡量该种测试的结果的好坏。<br />然后需要了解的是有哪些设计方法去支持设计黑盒测试和白盒测试的设计用例。

比如等效类划分、边界值分析等方法可以用来设计黑盒测试的测试用例。

[掘金·前端自动化测试概览]([https://juejin.cn/post/6844903621931302920](https://juejin.cn/post/6844903621931302920))<br />[掘金·功能测试用例设计方法分享]([https://juejin.cn/post/6914216719464529927](https://juejin.cn/post/6914216719464529927))

## 针对组件库的测试标准设计
获取了理论知识之后，在具体落地上还需要设计可重复、可衡量的流程和标准才能通过接入自动测试来提高系统的稳定性，下面是我设计的几个组件库的自动测试系统的流程设计和效果衡量标准：
### 不同对象的测试标准
#### 组件 

- 黑盒测试方面设计对应的快照用例和断言用例（评判断言用例标准依靠 code review 时的主观判断，根据组件的复杂度和使用情景的价值进行判断） 
   - 和 dom 渲染有关的 api 尽可能都设计快照用例以达到留痕的目的
   - 其他复杂渲染逻辑、大数据量的情景均可用断言用例来达到模拟的目的
- 白盒测试方面需保证覆盖率80%以上
#### 纯函数 

- 需拆分到单独的文件中
- 黑盒测试主要关注边界值
- 白盒测试保证覆盖率达100%
### 测试用例书写规范

- 每个组件的测试用例都放在该组件文件夹下的 `__tests__` 目录，文件以 `.spec.(js|tsx)` 结尾
- 一个文件包含一个对应文件的测试用例，如 `index.spec.js` 对应该组件的主流程 `index.tsx` 的测试用例
- 单独情景的测试用例可以另外建立其他文件
- 一个 `it` 表示一个用例，一个用例下可以有多个断言
### 开发流程

1. 根据开发任务创立特性分支
2. pr 时附上测试的指令
3. code review 除审核文件外还需要审核测试用例设计
4. code review 者需要本地执行测试指令验证测试结果

## Jest 介绍
这里同样列出几个写得很好的基础概念介绍文章。

[Jest 官网]([https://jestjs.io/](https://jestjs.io/))<br />[掘金·试试前端自动化测试！（基础篇）]([https://juejin.cn/post/6844904194600599560](https://juejin.cn/post/6844904194600599560))<br />[掘金·Jest测试具体方法]([https://juejin.cn/post/6901488713826566152#heading-22](https://juejin.cn/post/6901488713826566152#heading-22))

## 具体落地方案
使用封装了 Jest 的 umi-test 来作为基础环境。只需要再增加下面两个配置文件就可以支持快照测试了。

```javascript
// jest.config.js
module.exports = {
  setupFiles: ['./tests/setup.js'],
  snapshotSerializers: [require.resolve('enzyme-to-json/serializer')],
};

```
```javascript
// tests/setup.js

// global.requestAnimationFrame = (cb) => setTimeout(cb, 0);
require('regenerator-runtime');

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

Enzyme.configure({ adapter: new Adapter() });

```
```bash
# 增加的依赖
yarn add -D enzyme enzyme-adapter-react-16 enzyme-to-json
```
下面列出几个常用的测试指令

- `npm run test`: 运行所有测试用例
- `npm run test -- --watch`: 以本地监听模式运行测试用例
- `npm run test -- --updateSnapshot`: 更新测试用例的相关快照（不能随便升级，测试应以尽量不改动上次版本的dom结构为佳）
- `npm run test -- --coverage`: 生成覆盖率报告
- `npm run test -- Highlight --coverage --collectCoverageFrom="src/Highlight/**/*.(ts|tsx|js|jsx)"`: 只测试 Highlight 组件，并生成它的覆盖率报告
## 思考
Jest 的配置是相对简单的，而且不会影响到原有项目发布时的构建过程。

但设计测试用例的学习是个长期的过程，且能长期受益。

手动测试无异于停留在测试的”刀耕火种“时代。

以一定的代价引入自动测试机制来替代 log 式测试，是一个更加聪明的选择。


什么是测试用例？我们可能对下面这条测试用例略有耳闻：The quick brown fox jumps over the lazy dog这是一个很著名的测试用例，因为它包含了 26 个英文字母。可以用来测试打字机、练习打字或者测试字体显示效果。由此可知，测试用例是设计来能够较为全面的体验产品...

基于 Jest 的组件库自动测试框架的实现过程

jsdoc 是一种通过注释来为 javascript 代码增加代码提示的规范，代码示例如下:

```javascript
class Dom {
  /**
   * 初始化组件
   * @param {Object} attr 组件的参数
   * @param {string} attr.defaultProps 默认data
   * @param {string} attr.renderFunc 组件的渲染函数
   * @param {string} attr.dataMerge data的后置处理函数
   */
  constructor({
    defaultProps,
    renderFunc,
    dataMerge,
  }) {
    // something...
  }
}
```

在类 `Dom` 的构造函数上面的注释就是使用 jsdoc 规范书写的对这个函数的“注释”了，现在很多 IDE 都有内置了对 jsdoc 的支持，体现在能够格式化的显示这个类的内容，函数的参数列表、使用函数时进行自动补全等：

参数自动提示：<br />![image.png](../images/6b55b01c5016ca1538e2516e6e19e938.png)

自动补全：<br />![image.png](../images/b56175101ba0981c6704d0c05ff689b9.png)<br />通过上述操作就能够很直观的将我们写的代码都纳入代码提示里面了

> 相关链接
> [Use JSDoc](http://usejsdoc.org/)
> [@param](#)[ 格式文档](http://shouce.jb51.net/jsdoc/tags-param.html)




jsdoc 是一种通过注释来为 javascript 代码增加代码提示的规范，代码示例如下:class Dom {   /**    * 初始化组件    * @param {Object} attr 组件的参数    * @param {string} attr.defaultProps 默...

使用jsdoc优化函数的参数提示

有下列函数，想提取该函数的参数的类型通过临时变量来组装入参。
```typescript
interface WhereOptions {
	[key: string]: any | object;
}

interface FindOptions {
	where?: WhereOptions;
  raw?: boolean;
  type?: string;
}

function mockSql (options?: FindOptions) {
	return [];
}

// 下面是示例代码
const body = ctx.request.body;
const { name, wechatId } = body;

const queryOptions = { where: {} };

// 组装参数
if (name) {
	queryOptions.name = { [Op.substring]: name };
}
if (wechatId) {
	queryOptions.wechatId = { [Op.substring]: wechatId };
}

const memberList = await mockSql(queryOptions);

```
可以使用 typescript 的原生工具类 `Parameters<Type>` 来提取某函数的入参类型定义，下面两个使用方式是等同的，其中使用 `Parameters<Type>` 的健壮性更佳。
```typescript
// case 1
const queryOptions: FindOptions = { where: {} };

const memberList = await mockSql(queryOptions);


// case 2
const queryOptions: Parameters<typeof mockSql>[0] = { where: {} };

const memberList = await mockSql(queryOptions);

```
### 参考内容
> [typescript获取函数的参数类型 - 简书](https://www.jianshu.com/p/994273dcac11)
> [TypeScript: Documentation - Utility Types](https://www.typescriptlang.org/docs/handbook/utility-types.html#parameterstype)



有下列函数，想提取该函数的参数的类型通过临时变量来组装入参。interface WhereOptions {	[key: string]: any | object;}interface FindOptions {	where?: WhereOptions;  raw?: boolean;  ...

typescript 提取函数的参数类型定义

> 原文地址：[https://cult.honeypot.io/reads/how-can-chatgpt-help-developers/](https://cult.honeypot.io/reads/how-can-chatgpt-help-developers/)
> 原文作者：DANUSHA NAVOD GAMAGE
> 原文发布于：2023年3月7日


> 人们更多在讨论 ChatGPT 对软件开发人员的危害，但是关于它的好处呢？


ChatGPT 是一种能够回答复杂问题的长文本问答 AI，来自于 [OpenAI](https://openai.com/)。这是一项令人兴奋的新技术，它正在被教授理解并回答现实生活中人们提出的问题。

它具有类似于人类的应答能力，这给整个世界带来了震动，引发了这样一个想法：它有一天可能会改变人们与计算机交互以及信息获取的方式。
## 什么是 ChatGPT（基于预训练模型的自然语言生成技术）
OpenAI 在 2022 年 11 月推出了 ChatGPT，这是一款拥有大型语言模型的聊天机器人。因此，您可以通过多种方式与聊天机器人交流。语言模型可以帮助您编写代码、创建电子邮件和写作文，同样可以回答您提问的问题。ChatGPT 采用了增强学习和监督式学习的方法进行微调。

ChatGPT 的训练基于截止到 2021 年 10 月的大量数据。随后，使用带有人工标注标签的额外数据集，对模型进行了不断的测试和改进，以适用于各种语言相关任务。令人着迷的是，它可以参与对话，并以看似相当有洞察力的评论作出回应。

从技术上讲，ChatGPT 属于[生成式人工智能](https://cult.honeypot.io/reads/can-artificial-intelligence-have-feelings)范畴。一旦训练完成，生成式人工智能模型可以生成与训练数据类似但并非完全相同的结果。

_您是否想成为一名人工智能工程师？_[_这里是一些为此所需要的技能_](https://cult.honeypot.io/reads/ai-engineer/)_。_
## ChatGPT 对开发者有哪些益处？
### 1）生成代码
就代码生成而言，ChatGPT 对开发者来说是一个强大的工具。ChatGPT 可以利用其自然语言处理技能理解和解释开发者的需求，并提供相应的代码片段。对于重复的任务或样板代码，能为程序员节省大量时间。

ChatGPT 不仅可以生成基础功能的代码，还可以为诸如构建整个类或模块等任务生成复杂代码。这使得那些对编程语言或框架不熟悉的开发者也能够快速跟上进度，而无需花费太多时间在基础知识上，这对于初学者非常有价值。

总的来说，ChatGPT 的代码生成功对[各种经验水平](https://cult.honeypot.io/reads/difference-between-junior-mid-level-and-senior-developer)的开发者都有帮助，使他们可以专注于项目最关键的方面。与此同时，模型负责处理重复和耗时的任务。这可以减少错误和出现不一致性的可能性，同时节省时间。

以下是一个例子，当我要求 ChatGPT 使用“React Beautiful DND”库创建一个符合给定要求的 [React](https://cult.honeypot.io/reads/react-js-the-documentary-how-it-all-began) 组件时，ChatGPT 提供了完全符合需求的完全功能齐全的 React 组件。这是一个非常出色的结果。ChatGPT 包含了我所请求的每个功能，而且代码的运行效果也非常好。关键点在于它的理解能力，它完美地满足了我所有的需求。

[_观看《React 纪录片》并听听 React 创始人对于早期争议的看法。_](https://cult.honeypot.io/originals/react-the-documentary)

![image.png](../images/a926749ec82c0659c522393bf927b229.png)
### 2）生成文档
得益于 ChatGPT 具备自然语言处理技能，因此它可以根据需求准确地生成你需要的说明文档。对于经常需要花费大量时间为其代码补充说明文档的开发人员来说，能节省大量的时间。

例如，开发人员可以向 ChatGPT 提供代码片段，并指示它生成包含了对函数意图、输入、输出和其他相关细节的说明文档。此外，ChatGPT 还可以为整个类或模块生成文档，提供代码的全面概述。

此外，ChatGPT 可以提供各种形式的文档，例如 Markdown、HTML 或 JSDoc，使开发人员可以更容易的和他使用的代码编辑器集成。

[_学习如何将 CSS 链接到 HTML。_](https://cult.honeypot.io/reads/how-to-link-css-to-html/)

[_如何在代码中使用依赖注入。_](https://cult.honeypot.io/reads/5-reasons-to-use-dependency-injection-in-your-code)

对于各种技能水平的开发人员来说，ChatGPT 的代码文档生成功能非常有用，因为它能够解放开发人员的时间，让他们集中精力处理项目的更为关键的部分。同时，该模型完成了描述代码的繁琐过程。因此，通过使用 ChatGPT，开发人员可以确保其代码库保持文档化，使其他开发人员更容易理解和参与开发。

下面是 ChatGPT 为给定代码片段生成文档的示例。这是一个简单的包装函数，它包装了 Axios 的 `get` 方法。

在 ChatGPT 生成的文档中，我们可以看到它准确地识别了函数的意图和所有参数的用法。此外，ChatGPT 还提供了一个示例代码，以便更好地理解该函数。这对文档非常有帮助，ChatGPT 在这方面做得很好。

![image.png](../images/8ea7de25fb0593284f4bdb8cac8368a4.png)
### 3）编写测试用例
ChatGPT 可以通过多种方式帮助开发人员编写测试用例。其中一种方法：通过识别测试用例的目的，生成测试输入和预期结果。例如，如果开发人员要求 ChatGPT 编写一个能够处理无效输入的测试用例，ChatGPT 会生成无效的输入，例如特殊字符、空字符串和超出范围的值。

ChatGPT 在编写测试用例方面非常有帮助，是因为它能够识别您提供的代码背后的逻辑和结构。因此，ChatGPT 可以编写覆盖不同代码路径和边界情况的测试用例。例如，如果开发人员提供了一个代码片段，并告诉 ChatGPT 该代码应该能够处理大数据集，那么 ChatGPT 可以生成带有大数据集的测试输入。

ChatGPT 还可用于生成测试用例文档。它可以生成简短、易于理解的测试用例描述，包括测试输入、预测结果以及测试用例通过或失败的条件。因此，即使没有任何测试知识的开发人员也可以快速得到需要的测试用例。

在下面，您可以找到我使用 ChatGPT 为上述 `getHttpMethod` 封装函数生成测试用例后的示例。

如果我们细看 ChatGPT 的结果，我们可以看到 ChatGPT 使用了 [Jest](https://jestjs.io/)，并且生成的测试用例包括两个测试。GET 请求的响应与预期输出进行比较，并检查函数是否按预期工作。

![image.png](../images/8fcbb754a9ef7c71564bbcc57607a40e.png)
### 4）简化代码和解释复杂代码片段
通过 ChatGPT，程序员可以对复杂代码片段快速生成简明的自然语言解释，使其他人更容易理解和维护代码。

通过自动生成代码注释和文档，ChatGPT 可以用于简化代码。因此，开发人员可以节省大量时间和精力。此外，由于该模型能够理解代码的基本逻辑和结构，因此 ChatGPT 生成的文档和注释通常比开发人员写的更准确和详尽。

通过协助程序员进行代码重构和优化，ChatGPT 还可以帮助开发人员简化代码。例如，语言模型可以评估代码并提出改进建议，如缩减代码行数或提高效率。这可以提高性能，也使代码更易读易于管理，减少错误。

[_如何处理并发而来的停机警报_](https://cult.honeypot.io/reads/tackling-a-tough-programming-challenge/)

ChatGPT 可以通过生成代码的自然语言解释，简化开发者理解和使用复杂代码的过程。此外，语言模型可以将复杂的代码拆分为更简单的部分，以描述代码的不同部分是如何相互作用来完成特定任务的。由于开发者不再需要花费数小时来理解复杂的代码，他们可以节省大量时间和精力。

下面是一个简单的示例，要求 ChatGPT 为初学者解释一个小的代码片段：

![image.png](../images/f4cb98a0b12965d8590084d381e80e68.png)
### 5）生成原代码的替代品
对试图寻找替代性、性能优化性的代码的开发者而言，ChatGPT 可以成为一个有的工具。它理解许多编程语言和编码模式，因为它是在大量代码的基础上进行训练的。因此，ChatGPT 可以生成更有效和高效，而且易读和可维护的替代代码。

ChatGPT 对代码优化的建议，是实现这一目标的一种方式。例如，该模型可以评估一段代码并推荐改进性能的替代方法，如减少操作数量或限制内存使用。这些建议可以帮助开发者编写更有效的代码，从而实现更好的可扩展性和更快的性能。

此外，ChatGPT 还可以通过建议使用不同的算法来生成替代代码。它可以检查给定的代码，并具有识别最佳算法的能力。

下面是一个简单的例子，当要求 ChatGPT 为给定函数提供性能优化的替代代码时，它的执行过程。它不仅提供了替代代码，还告诉我们 ChatGPT 在生成代码时进行了哪些更改。

![image.png](../images/3c417c5c5eb81372ba4f1f5578dce0b9.png)
### 6）追踪错误/践行最佳实践的编程方式
对于希望识别错误并在编程中实施最佳实践的开发人员来说，ChatGPT 可能是一个有益的工具。通过推荐[调试策略](https://cult.honeypot.io/reads/do-you-have-a-code-janitor)，ChatGPT 可以用于查找错误。例如，模型可以检查代码片段并建议开发人员采取特定的操作来查找和修正错误。因此，开发人员不再需要花费数小时来确定错误的根本原因，这可能会节省他们大量的时间和精力。

通过生成代码重构的建议，ChatGPT 也可以用于定位错误。例如，模型可以检查代码片段并生成改进其可读性的、可维护性的建议，和不容易引起错误的修改方式。通过这种方式，代码能变得更好，这能减少错误并加快开发周期。

此外，ChatGPT 可以对使用哪种恰当的编码技术提供建议。例如，模型可以评估代码，并建议提高其效率、安全性或可读性。借助这些建议，开发人员可以生成更高效、安全和可维护的代码。

这个示例是 ChatGPT 对我的代码所提供的改进建议：

![image.png](../images/78785e93e66949c5b9f784eb5acd4431.png)
### 7）信息搜集/调研
ChatGPT 可以帮助开发者获取知识，就像一个搜索引擎或者 Stack Overflow 这样的问答网站一样。该模型可以理解复杂的编程概念并向开发者提供相关的信息。

开发者可以将 ChatGPT 当作搜索引擎使用，回答一个或多个问题。例如，开发者可以向 ChatGPT 提出有关特定编程语言或思想的技术问题，该模型将根据其训练数据给出相应的回答。与在多个信息来源手动查阅相比，这对于想要快速回答特定问题的工程师尤为有帮助。

ChatGPT 通过提供相关的代码样本和片段来发挥搜索引擎的功能。例如，开发者可以向 ChatGPT 请求特定的代码样本，该模型将回答与开发者请求相匹配的相关代码片段。与浏览互联网寻找代码片段或示例相比，这可以节省开发者的时间和精力，特别是当他们需要快速构建某个功能或解决问题时。

以下是当询问有关处理拖放功能的库时，ChatGPT 给出的结果：

![image.png](../images/b0a2811cb61d53b4e162910bf28344d6.png)
## 我们能相信 ChatGPT 提供的结果吗？
ChatGPT 有时会出现错误。它有时在处理基本数学问题时出错，有时无法理解简单的逻辑，并且甚至会提供完全错误的事实来支持其答案。OpenAI 已经承认了这个问题，并表示“ChatGPT 有时会写出听起来合理但是不正确或无意义的答案”。

ChatGPT 在给出答案之前会进行一系列的猜测，因此它可能会把不正确的答案作为正确答案来解释。

此外，ChatGPT 的训练数据基于自人类历史以来和当前全球集体的书写内容。这意味着 ChatGPT 的回答可能会出现与数据中相同的偏见。因此，在向 ChatGPT 提问重要问题时，您必须清楚有可能出现具有偏见的回答的可能性。

ChatGPT 是一种有效的学习工具，能够很好地理解复杂的主题。但是，最好不要完全相信它所说的一切。

[_看看这 18 种未来会有的工作_](https://cult.honeypot.io/reads/18-jobs-of-the-future-no-one-is-prepared-for)

[_你是一个 AI 专家吗？来寻找最棒的工作吧_](https://app.honeypot.io/users/sign_up)
## 下一步：ChatGPT 4.0
ChatGPT 的下一个版本是 ChatGPT 4，将会更加智能，具备更多功能，包含若干 ChatGPT 当前没有的技能。

当前版本的 ChatGPT 对一般公众开放，可以根据 1750 亿个参数以理解问题并做出相应的回答。ChatGPT 可以生成包含编码、WordPress 应用、文章、诗歌，甚至音乐等各种内容，但需要考虑许多因素，例如人工智能是否有权复制他人的财产。

ChatGPT 4 中可用的参数数量将超过 100 万亿。由此带来的学习能力和可能应用的增长将会是一个巨大的飞跃。我们正在谈论一个量子级的跃升。
## 结论
ChatGPT 对于希望在工作中节省时间和精力的开发人员来说是一种宝贵的资源。它可以在几秒钟内生成代码片段、回答问题并创建文档，这肯定可以提高生产力。然而，需要记住的是，它的回答并不总是 100% 准确的，因此在将其用于更高级的任务之前，需要进行仔细的研究。

希望这篇文章能够对你的日常编程生活有所帮助。


原文地址：https://cult.honeypot.io/reads/how-can-chatgpt-help-developers/原文作者：DANUSHA NAVOD GAMAGE原文发布于：2023年3月7日人们更多在讨论 ChatGPT 对软件开发人员的危害，但是关于它的好处呢？Ch...

[译] 使用 ChatGPT 增效开发的 7 种方式

## 需求讲解
根据业务的需求，需要把一些动态信息（人名、时间等）和图片资源生成一张图片，使用户能够保存到本地使用、或分享（不能粗暴的让用户截图）。

经过了技术调研，决定使用 canvas 进行文字信息和图片资源的拼接，转换为新图片。用户可以长按保存或者调用客户端（微信小程序或其他）的保存图片接口实现图片保存。

笔者这里实施了两套方案，分别是：在前端使用 canvas 进行图片生成、和使用 NodeJS 在后端进行图片生成。这里先说结论：**建议使用后端生成**。

## 前端实现（不推荐）
### 思路
使用 `canvas.toDataURL('image/png')` 将画布转换为 Base64 格式的图片地址。供 `img` 标签进行渲染，然后用户在移动端使用原生的长按菜单交互进行保存，或者调用客户端（微信小程序或其他）的保存图片接口实现图片保存。

### 代码
```javascript
<template>
  <div class="draw-demo">
    <canvas ref="canvas"></canvas>
    <img ref="img" src="" alt="">
    <div class="save">长按保存到相册</div>
  </div>
</template>

<script>
import './fonts/FZLBJW.TTF';

const BASE_WID = 1334;
const BASE_HEI = 750;

const phoneWidth = window.screen.width;
const phoneHeight = window.screen.height;

const xRadio = phoneWidth / BASE_WID;
const yRadio = phoneHeight / BASE_HEI;

const t = {
  x: (inVal) => {
    return inVal * xRadio;
  },
  y: (inVal) => {
    return inVal * yRadio;
  },
};

const translateWidth = phoneWidth;
const translateHeight = t.y(568.71);

/**
* @author zhangxinxu(.com)
* @licence MIT
* @description http://www.zhangxinxu.com/wordpress/?p=7362
*/
CanvasRenderingContext2D.prototype.fillTextVertical = function (
  text,
  x,
  y,
) {
  var context = this;
  // var canvas = context.canvas;

  var arrText = text.split('');
  var arrWidth = arrText.map(function (letter) {
    return context.measureText(letter).width;
  });

  var align = context.textAlign;
  var baseline = context.textBaseline;

  if (align === 'left') {
    x = x + Math.max.apply(null, arrWidth) / 2;
  } else if (align === 'right') {
    x = x - Math.max.apply(null, arrWidth) / 2;
  }
  if (
    baseline === 'bottom'
    || baseline === 'alphabetic'
    || baseline === 'ideographic'
  ) {
    y = y - arrWidth[0] / 2;
  } else if (
    baseline === 'top'
    || baseline === 'hanging'
  ) {
    y = y + arrWidth[0] / 2;
  }

  context.textAlign = 'center';
  context.textBaseline = 'middle';

  // 开始逐字绘制
  arrText.forEach(function (letter, index) {
    // 确定下一个字符的纵坐标位置
    var letterWidth = arrWidth[index];
    // 是否需要旋转判断
    var code = letter.charCodeAt(0);
    if (code <= 256) {
      context.translate(x, y);
      // 英文字符，旋转90°
      context.rotate(90 * Math.PI / 180);
      context.translate(-x, -y);
    } else if (index > 0 && text.charCodeAt(index - 1) < 256) {
      // y修正
      y = y + arrWidth[index - 1] / 2;
    }
    context.fillText(letter, x, y);
    // 旋转坐标系还原成初始态
    context.setTransform(1, 0, 0, 1, 0, 0);
    // 确定下一个字符的纵坐标位置
    // var letterWidth = arrWidth[index];
    y = y + letterWidth;
  });
  // 水平垂直对齐方式还原
  context.textAlign = align;
  context.textBaseline = baseline;
};

const waitImgLoad = (img) => {
  return new Promise(resolve => {
    img.onload = resolve;
  });
};

export default {
  props: {
    stu: Object,
  },

  async mounted () {
    await this._draw();
    // await this._cavToImg();
  },

  methods: {
    async _draw () {
      const xStart = 0;
      const yStart = (phoneHeight - translateHeight) / 2;

      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');

      canvas.width = phoneWidth;
      canvas.height = phoneHeight;

      // 底色
      ctx.fillStyle = '#CC9965';
      ctx.fillRect(0, 0, phoneWidth, phoneHeight);

      // 轴布
      ctx.fillStyle = '#FDF7F2';
      ctx.fillRect(
        xStart, yStart,
        translateWidth, translateHeight
      );

      // 山水背景
      const imgInkBg = new Image();
      imgInkBg.src = require('./imgs/ink-bg.png');
      await waitImgLoad(imgInkBg);
      ctx.drawImage(
        imgInkBg,
        t.x(-51), t.y(379),
        t.x(1402), t.y(469),
      );

      // 右上角竹子
      const imgRightTop = new Image();
      imgRightTop.src = require('./imgs/bamboo.png');
      await waitImgLoad(imgRightTop);
      ctx.drawImage(
        imgRightTop,
        translateWidth - t.x(135), yStart,
        t.x(135), t.y(233),
        // 198, 263,
      );

      // 标题
      // 描框
      ctx.lineWidth = 2;
      ctx.strokeStyle = '#ccaca9';
      ctx.strokeRect(
        t.x(1163), t.y(163),
        t.x(120), t.y(400),
      );
      // 填字
      const imgRightTitle = new Image();
      imgRightTitle.src = require('./imgs/right-title.png');
      await waitImgLoad(imgRightTitle);
      ctx.drawImage(
        imgRightTitle,
        t.x(1196), t.y(184),
        t.x(64), t.y(358),
      );

      // 口号渲染
      const imgRightSlogan = new Image();
      imgRightSlogan.src = require('./imgs/right-slogan.png');
      await waitImgLoad(imgRightSlogan);
      ctx.drawImage(
        imgRightSlogan,
        t.x(986), t.y(303),
        t.x(122), t.y(261),
      );

      // 祝贺致辞
      const imgRightWelcome = new Image();
      imgRightWelcome.src = require('./imgs/right-welcome.png');
      await waitImgLoad(imgRightWelcome);
      ctx.drawImage(
        imgRightWelcome,
        t.x(834), t.y(147),
        t.x(113), t.y(211),
      );

      ctx.font = `${16}px FZLBJW`;
      ctx.fillStyle = '#000';
      ctx.fillTextVertical(
        '同学被预录取为我校    学',
        t.x(780),
        t.y(350)
      );
    },
    async _cavToImg () {
      // 转换为内联
      const canvas = this.$refs.canvas;
      const insertTarget = this.$refs.img;

      insertTarget.src = canvas.toDataURL('image/png');
      insertTarget.classList.add('img');
      canvas.style.visibility = 'hidden';
    },
  },
};
</script>

<style lang="less">
@font-face {
  font-family: 'FZLBJW';
  src: url('./fonts/FZLBJW.TTF');
}
.FZLBJW {
  font-family: FZLBJW;
}
</style>

<style lang="less" scoped>
.draw-demo {
  position: relative;
  width: 100%;
  height: 100%;

  .img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 2;
  }
  .save {
    position: absolute;
    right: 40px;
    bottom: 30px;
    padding: 6px 12px;
    background: #7F0C00;
    color: #fff;
    border-radius: 4PX;
    box-shadow:
      0px 3px 6px -4px rgba(0, 0, 0, 0.12),
      0px 6px 16px 0px rgba(0, 0, 0, 0.08),
      0px 9px 28px 8px rgba(0, 0, 0, 0.05);
    z-index: 4;
    pointer-events: none;
  }
}
</style>

```

### 重难点解析
上面提供的是涉及场景最多的代码示例，分别是：

- 坐标系按比例转换
- 自定义字体引入和画布渲染
- canvas的字体垂直排版
- 异步引入图片的处理

这里不一一解释，先贴我做时查到的资料。

> [学习 HTML5 Canvas 这一篇文章就够了（入门不错，示例比较全）](https://www.runoob.com/w3cnote/html5-canvas-intro.html)
> [Canvas API中文文档(张鑫旭大神维护的文档，很全)](https://www.canvasapi.cn/)
> [canvas文本绘制自动换行、字间距、竖排等实现](https://www.zhangxinxu.com/wordpress/2018/02/canvas-text-break-line-letter-spacing-vertical/)


#### 异步引入图片的处理
代码中的图片都是在 `onload` 事件之后才会被绘制到画布上的，第一版代码还没用 `await` 来进行阻塞，出现了先绘制的图片挡住了后绘制的文字的情况（其实是我看代码执行顺序没看对），所以后面改成了异步阻塞的做法，当然有好有不好。

#### 自定义字体引入
这里的自定义字体引入方式是错误的，canvas 的机制是：这个字体被注册，而且字体文件加载完成的时候，才能在绘制的那一刻加载正确的字体，而不会在字体加载完成后自动更新之前使用这个字体绘制的部分。

所以我把字体注册的引入放到了 head 标签里面，进入该页面前还有很长的用户信息输入界面，所以基本能保证在绘制时字体已加载完成。

### 不推荐的原因
遇到一个情况：图片的 base64 链接已经生成了、图片元素的体积正常、但是图片就是没有渲染，表现为透明的图片、直到我点击 vconsole 的调试弹窗图片才姗姗来迟。

原因至今没找到，怀疑是 base64 超长，所以后面改用了后端生成。

## 后端实现
### 思路
使用 NodeJS 环境的 [canvas](https://www.npmjs.com/package/canvas) 库进行 canvas 的模拟和图片生成，然后前端的 img 标签通过接口传递信息来获取图片流渲染。

### 代码
```javascript
// app/service/draw.js
'use strict';

const Service = require('egg').Service;
const path = require('path');
const { createCanvas, loadImage, registerFont } = require('canvas');

/**
* @author zhangxinxu(.com)
* @licence MIT
* @description http://www.zhangxinxu.com/wordpress/?p=7362
*/
function fillTextVertical(
  text,
  x,
  y
) {
  const context = this;
  // var canvas = context.canvas;

  const arrText = text.split('');
  const arrWidth = arrText.map(function(letter) {
    return context.measureText(letter).width;
  });

  const align = context.textAlign;
  const baseline = context.textBaseline;

  if (align === 'left') {
    x = x + Math.max.apply(null, arrWidth) / 2;
  } else if (align === 'right') {
    x = x - Math.max.apply(null, arrWidth) / 2;
  }
  if (
    baseline === 'bottom'
    || baseline === 'alphabetic'
    || baseline === 'ideographic'
  ) {
    y = y - arrWidth[0] / 2;
  } else if (
    baseline === 'top'
    || baseline === 'hanging'
  ) {
    y = y + arrWidth[0] / 2;
  }

  context.textAlign = 'center';
  context.textBaseline = 'middle';

  // 开始逐字绘制
  arrText.forEach(function(letter, index) {
    // 确定下一个字符的纵坐标位置
    const letterWidth = arrWidth[index];
    // 是否需要旋转判断
    const code = letter.charCodeAt(0);
    if (code <= 256) {
      context.translate(x, y);
      // 英文字符，旋转90°
      context.rotate(90 * Math.PI / 180);
      context.translate(-x, -y);
    } else if (index > 0 && text.charCodeAt(index - 1) < 256) {
      // y修正
      y = y + arrWidth[index - 1] / 2;
    }
    context.fillText(letter, x, y);
    // 旋转坐标系还原成初始态
    context.setTransform(1, 0, 0, 1, 0, 0);
    // 确定下一个字符的纵坐标位置
    // var letterWidth = arrWidth[index];
    y = y + letterWidth;
  });
  // 水平垂直对齐方式还原
  context.textAlign = align;
  context.textBaseline = baseline;
}

class DrawService extends Service {
  /**
   * 绘制通知书
   * @param {Object} user 用户实例
   */
  async index({
    width,
    height,
    name,
    department,
    grade,
  }) {
    // const { ctx } = this;
    const BASE_WID = 1334;
    const BASE_HEI = 750;

    const phoneWidth = BASE_WID;
    const phoneHeight = BASE_WID * height / width;

    const xRadio = phoneWidth / BASE_WID;
    const yRadio = phoneHeight / BASE_HEI;
    const t = {
      x: inVal => {
        return inVal * xRadio;
      },
      y: inVal => {
        return inVal * yRadio;
      },
    };

    registerFont(
      path.resolve(__dirname, '../res/fonts/FZLBJW.TTF'),
      { family: 'FZLBJW' }
    );

    const canvas = createCanvas(phoneWidth, phoneHeight);
    const context = canvas.getContext('2d');
    context.fillTextVertical = fillTextVertical;

    // 底色
    context.fillStyle = '#CC9965';
    context.fillRect(0, 0, phoneWidth, phoneHeight);

    // 底图
    const imgBackground = await loadImage(path.resolve(__dirname, '../res/imgs/all.png'));
    context.drawImage(
      imgBackground,
      0, (phoneHeight - t.y(660)),
      t.x(1334), t.y(660)
    );

    context.font = '28px FZLBJW';
    context.fillStyle = '#7F0C00';
    context.fillTextVertical(
      name,
      t.x(784), (phoneHeight - t.y(660) + t.y(140))
    );
    context.fillTextVertical(
      department,
      t.x(784), (phoneHeight - t.y(660) + t.y(496))
    );
    context.fillTextVertical(
      grade,
      t.x(722), (phoneHeight - t.y(660) + t.y(84))
    );

    return canvas;
  }
}

module.exports = DrawService;

```

```javascript
// app/controller/home.js
'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {
  async draw() {
    const { ctx, service } = this;

    ctx.validate({
      width: { type: 'number' },
      height: { type: 'number' },
      stuId: { type: 'string' },
    }, ctx.request.query);

    const { width, height, stuId } = ctx.request.query;

    const stu = await ctx.model.Student.findByPk(stuId);
    if (!stu) {
      return service.utils.returnError(1, '抱歉，没有此学生的信息');
    }

    const canvas = await service.draw.index({
      width,
      height,
      name: stu.get('name'),
      department: stu.get('department'),
      grade: stu.get('grade'),
    });

    ctx.type = 'image/jpeg';
    ctx.body = canvas.toBuffer('image/jpeg', { quality: 0.6 });
    return;
  }
}

module.exports = HomeController;

```

### 重难点解析
这里用的是 eggjs 作为后端框架 service 是画布渲染、controller 是业务逻辑。<br />其中重难点有这些：canvas 的安装、canvas 库与浏览器端接口的差异、接口返回参数的配置。

#### canvas 的安装
原生的 `npm install canvas` 安装方式可能需要科学上网，特别慢、所以采用本地编译的方式。

[canvas 文档](https://www.npmjs.com/package/canvas#compiling)

按照文档系统安装了对应系统平台需要的前置依赖之后，执行 `npm install --build-from-source canvas` 本地编译

#### canvas 库与浏览器端接口的差异
总体来说 canvas 库提供的接口完爆浏览器端，不但处理了图片异步加载(`loadImage`)、还提供了同步注册外部字体(`registerFont`)、和将画布转换为二进制流并压缩图片的接口和配置(`toBuffer`)，再看看前端实现过程踩过的坑，感觉十分舒适。


需求讲解根据业务的需求，需要把一些动态信息（人名、时间等）和图片资源生成一张图片，使用户能够保存到本地使用、或分享（不能粗暴的让用户截图）。经过了技术调研，决定使用 canvas 进行文字信息和图片资源的拼接，转换为新图片。用户可以长按保存或者调用客户端（微信小程序或其他）的保存图片接口实现图...

生成动态日签图-前端实现和后端实现

## 为什么安利
使用过不少的个人知识管理工具，比如印象笔记、语雀、teambition等。在个人的知识、日常事项维护方面始终没有发现特别灵活、功能特别全的工具。后面发现 Notion 的灵活性在一定程度上能够解决这个情况。

现在我的使用方式是构建一个自己的工作空间，集成 `日记`+  `待办` + `记账` 等功能，一定程度上高效的维护每天的工作和生活目标。

下面是网友对 Notion 这个工具的定义：
> Notion是一款提供笔记、任务、数据库、看板、维基、日历和提醒等组件的应用程序。用户可以将这些组件连接起来，来创建自己的系统，用于知识管理、笔记记录、数据管理、项目管理等。这些组件和系统可以单独使用，也可以与他人进行跨平台协作。 维基百科

## 工具定位

- All-in-one workspace
- 精髓是对database的抽象和应用
- 灵活的层级结构
- 高颜值
## 核心元件
page、block、database
## 常用操作

- 内容输入
- database 引用、视图设置、筛选
## 功能演示步骤

1. 新建 page
2. 增加内容（图片、database）
3. 新建database
4. 录入db数据
5. 演示database的不同视图
6. 演示page如何引用database
7. 演示设定筛选范围和排序
## 缺陷

- 国内网速较慢（已有第三方提供国内反向代理的dns服务器，能一定程度缓解）
- 暂不支持重复类日程
- 设定繁琐
## 精选使用案例
[「Notion」新手向！从零开始快速搭建自己的小家(工作区)](https://www.bilibili.com/video/BV1Zb411H7xC?t=675)<br />[如何使用「Notion」记日记，管理待办事项，以及database间的联动](https://www.bilibili.com/video/BV1ob411h7rN?t=759)<br />[3个最值得推荐的「Notion」模版](https://www.bilibili.com/video/BV1X441187gT)<br />[【记账使人理智】我的钱都去哪儿了？| 这次双十一，用 Notion / Excel 试一下复式记账吧](https://www.bilibili.com/video/BV17A411j7KA?t=162)
## 资源地址
[Notion-faster(通过反向代理加速国内网络对notion的访问速度)](https://jerryw.cn/notion-faster)<br />[Notion Template Gallery](https://www.notion.so/Notion-Template-Gallery-181e961aeb5c4ee6915307c0dfd5156d)


为什么安利使用过不少的个人知识管理工具，比如印象笔记、语雀、teambition等。在个人的知识、日常事项维护方面始终没有发现特别灵活、功能特别全的工具。后面发现 Notion 的灵活性在一定程度上能够解决这个情况。现在我的使用方式是构建一个自己的工作空间，集成 日记+  待办 + 记账 等功...

Notion安利

Mac 有一个机制就是， `option` + `任意字符键入` 输出对应的特殊字符，对应关系如下图：<br />![image.png](../images/5a52a7f6df5d490e727eba2882365a5c.png)<br />这个机制是系统自带的，通过常规手段很难绕过。对于开发者来说，这个机制限制了快捷键的设定范围。

下面是取消这个机制的方法：

使用 Ukelele 增加一个没有死键的键盘布局，然后把你输入法的键盘布局设置为这个新布局就可以了，具体步骤参考原文：

> 1. Download Ukelele
> 2. You can run it directly from the .dmg file
> 3. File -> New Based On Current Input Source (I had US selected)
> 4. Click Modifiers button
> 5. Select each modifier from list that have Left Down or Right Down in the Option column. (There could be some like Either Down OR Up too, but AFAIK you can leave those.)
> 6. Press the minus button for each like this
> 7. Go to Keyboard menu -> Set Keyboard Name
> 8. Change the name somehow to make it easier to identify
> 9. Go to File -> Save as
> 10. Save to ~/Library/Keyboard\ Layouts/ with suffix .keylayout
> 11. Log out from your Mac OS account
> 12. Log back in
> 13. Go to System Preferences -> Keyboard -> Input Sources
> 14. Hit the + button -> Others -> Your new layout should be available
> 15. Add the new layout
> 16. Possibly leave original keyboard layout too and configure some nice way to switch


> 原文地址：[https://stackoverflow.com/a/24100077](https://stackoverflow.com/a/24100077)
> 文中也有现成的键盘布局文件可供下载，下载下来之后直接从第 10 步往下执行便可




Mac 有一个机制就是， option + 任意字符键入 输出对应的特殊字符，对应关系如下图：这个机制是系统自带的，通过常规手段很难绕过。对于开发者来说，这个机制限制了快捷键的设定范围。下面是取消这个机制的方法：使用 Ukelele 增加一个没有死键的键盘布局，然后把你输入法的键盘布局设置为这...