Frankie's Blog

Cursor: Model not available

Mon, 12 Jan 2026 09:05:18 GMT

背景

今天使用 Claude Sonnet 4.5 模型的时候，提示：

Model not available
This model provider doesn't serve your region.Visit https://docs.cursor.com/account/regions for more information

根据 Cursor 官网说明：部分模型提供商有基于位置的限制，这意味着某些模型可能在你所在地区不可用。 更多

兜底选择：可以继续使用 Auto 模式，Cursor 会为每次请求自动选择可用模型。

解决方法

参考 cursor #3372

梯子开启 TUN 模式（参考）
在 Cursor Settings - Network 处，将 HTTP Compatibility Mode 选项改为 HTTP/1.0
重启 Cursor

将剪贴板的图片保存至本地

Tue, 06 Jan 2026 07:14:59 GMT

打开 macOS 内置的预览 App，使用快捷键 ⌘ + N（从剪贴板新建）打开，然后 ⌘ + S 保存便可。

看起来可以用 Raycast Script Command 写一个 AppleScript 处理，有空再搞一下...

Google Antigravity 登录成功无法跳转的解决方法

Thu, 11 Dec 2025 12:47:35 GMT

由于 Antigravity 仅限部分国家地区可用，因此登录过程可能会出现类似的提示：

Your current account is not eligible for Antigravity.

第一步，前往这里修改你的 Google 帐号关联地区，建议中国台湾、美国。提交后，通常约 30 分钟后会有修改结果的邮件，留意邮箱。

第二步，科学上网：

选择与 Google 帐号关联地区相同的节点，比如台湾。
开启 TUN 模式（虚拟网卡模式）

我发现 ClashX 似乎没有开启 TUN 模式的选项，后来装了 Clash Verge，通过上面开启。

第三步，安装 Antigravity，按引导操作便可：

如果可以正常跳转，控制台会有类似提示：

Launched external handler for 'antigravity://oauth-success'.

突然有个想法，macOS 内置的 open 命令是可以直接打开 URL Scheme 的。当网页端登录成功后，前往终端执行 open antigravity://oauth-success 命令是不是让 Antigravity 完成最后一步操作呢？

看，有架飞机 ✈️

Fri, 28 Nov 2025 14:51:08 GMT

📍 广州 TIT 创意园（天台）
🌅 天气晴
⏳ 时间 2021 ~ 2025

▲ 飞机在这 😄

使用 Raycast 搜索 Confluence 或 Jira

Fri, 28 Nov 2025 10:09:16 GMT

前言

如果你用过 Alfred，还没有用过 Raycast，不妨试试，其免费订阅也足够好用（Raycast vs Alfred）。

免费订阅用户无法享用 Raycast 内置的数据同步功能，可借助 Raycast 的 Export/Import Settings & Data + iCloud Drive 进行同步。

背景

我们公司使用 Atlassian 旗下的 Confluence、Jira 做知识库、项目管理。

我们要经常打开 wiki 和 jira 页面查看相关内容，找到一篇目标文章或 Issue，往往需要几个动作才能完成：打开网页、聚焦输入框搜索、筛选...。稍快一点可能是将常用链接添加到书签或者创建 Raycast Quicklink + Alias 方便快速访问。

其中 Quicklink 有些场景很好用，比如检索文档：https://developer.mozilla.org/zh-CN/search?q={Query}，其中 {Query} 表示动态参数，也就是你要搜索的内容。只要是支持链接带参搜索的网站，都可以用这种方式，比如爱范儿的 https://www.ifanr.com/search?query={Query}。

但这种搜索方式在公司内部的 wiki、jira 中行不通。另外，通过创建 Quicklink 的方式其实“不太适合”公司内的文档检索。试想，随着时间积累，要访问、收藏的链接只会越来越多，无论是浏览器书签或 Quicklink 只会越来越多。

于是产生了开发一个 Raycast 扩展的想法，以支持 Confluence 和 Jira 的快速搜索以及部分简单操作。恰好公司私有部署版本（Data Center）也支持以 Personal Access Token 的方式进行身份认证，这是一种安全的认证方式以便于与外部程序集成。了解更多

开始之前

安装 Raycast 后，前往 Raycast Store 安装 Atlassian Data Center (Self-Hosted) 扩展。

使用该扩展的命令时，会引导完成一些初始配置，准备好以下信息：

Confluence Base URL：如 https://confluence.example.com
Confluence PAT：前往公司 Confluence 网站，在 Profile（头像处） → Personal Access Tokens → Create token（请妥善保管访问令牌，如有泄露，及时撤销）
Jira Base URL：https://jira.example.com
Jira PAT：创建方式跟 Confluence 同理

PS：由于以上配置做成必填的，如果只用到其一，另一个可以随便填个值，非空便可。

使用指南

PS：还可以根据个人习惯为命令设置 Alias 更方便直达命令

目前 Atlassian Data Center 提供的命令有：

Confluence
- Search Contents - 搜索页面（文章）、博文、附件、评论，支持收藏功能
- Search Spaces - 搜索空间
- Search Users - 搜索用户
Jira
- Search Issues - 搜索 Issue，并支持一些简单的操作，比如扭转 Issue 状态、创建 Worklog
- Board View - 看板，比如当前 Active Sprint
- Worklog View - 你的工作记录
- Notification View - 通知列表（若有“未读”消息，在 Search Issues 列表也会提示）
- Manage Fields - 该命令的作用是辅助 Search Issues 以在搜索结果展示更多内容

每个搜索面板都内置了很多常用的筛选项（日常应该管够了）：

Search Contents
- All Contents
- Full Text Search - 搜索范围从 title ~ "xxx" 放宽到 text ~ "xxx"，而不仅仅搜索标题
- Viewed Recently
- Updated Recently
- Created by Me
- Contributed by Me
- Mention Me
- My Favourites
- Watched by Me
Search Issues
- All Issues
- Full Text Search - 搜索范围从 summary ~ "xxx" 放宽到 text ~ "xxx"
- Open Issues
- My Open Issues
- Assigned to Me
- Reported by Me
- Created Recently
- Updated Recently
- Resolved Recently
- Viewed Recently
- Watched by Me

前面提到时间越长 Quicklink 越多的情况，我认为将文章进行收藏是一个不错的方案（在 Action Panel 提供了快速收藏和取消收藏），检索时切换至 My Favourites 选项便可。

除此之外，还支持键入完整的 CQL 或 JQL 进行定制化的高级查询：

再提一句：

由于 Jira 允许自定义字段，字段类型繁多，加之各家 Jira 实例大不相同，因此添加了 Manage Fields 命令来辅助 Search Issue 以显示更多信息。

比如在 Manage Fields 界面下搜索 Test Engineer 并通过「Add to Search」添加成功，那么 Search Issues 列表下就可以显示该字段信息。

截图

由于 Raycast List 显示的内容有限，很多附加信息只能隐藏在 tooltip 里，可以通过移动光标至图标、标题、副标题、时间、头像等处显示。

▼ Confluence

▼ Jira

更多截图

其他

个人常用的一些 Raycast 扩展，但不一定适合你，按需食用：

Lark Documents - 搜索飞书文档
Cursor - 常用 Search Recent Projects
WeChat DevTool - 启动小程序
DeepWiki - 了解一些库内部实现问答可能更快

浅谈 CSS 3D Transform 与 Perspective

Wed, 26 Nov 2025 04:11:33 GMT

前言

前不久，在一个项目（打开，出发）中应用了一种新的交互方式「视差滚动」。

恰好设计同学也说可以总结下经验，以便后续的运用，那浅谈一下。

若有错处，欢迎指正。

从数学开始

坐标系

中学时期，我们学习过笛卡尔坐标系，常见的有「平面直角坐标系」和「空间直角坐标系」两种。

同样地，在 CSS 世界里也有一个「坐标系」，但其 X、Y、Z 三轴及其正负方向，与书本中的坐标系稍有不同。我们将屏幕想象成一个「空间直角坐标系」：

原点：即屏幕的左上角。
X 轴：处于水平方向，原点右侧为 X 轴正方向、原点左侧为 X 轴负方向。
Y 轴：处于垂直方向，原点以下为 Y 轴正方向、原点以上为 Y 轴负方向。
Z 轴：与屏幕平面垂直，屏幕正前方为 Z 轴正方向，屏幕正后方为 Z 轴负方向。

如果页面元素是以 2D 形态渲染，就相当于没有 Z 轴，此时是一个「平面直角坐标系」。

投影

我们也学习过「投影」知识。物体在灯光或日光的照射下，就会在墙壁或地面上产生影子，这是一种自然现象。投影就是由这类自然现象抽象出来的。阳光在地面上留下各种影子，便是最直白的例子。

一般地，用光线照射物体，在某个平面上形成的影子，叫做物体的「投影」。发出照射的光源处叫做「投影中心」，照射的光线叫做「投影线」，投影所在的平面叫做「投影面」。

投影可以分为「平行投影」和「中心投影」两类，它们还能细分。

如果投射线是一组互相平行的射线（如手电筒的光线），此时形成的投影叫做「平行投影」。若投射线与投射平面垂直，则称为「正投影」，否则称为「斜投影」。
如果由同一点光源发出的光线（即投射线相交于一点）形成的投影叫做「中心投影」。所有投射线相交的点，称为「消失点/灭点」。

若投影中心与投影面之间的距离足够远，趋向于无穷大，此时的中心投影可认为就是一个平行投影。比如太阳光。

当我们从某一个方向观察物体时，所看到的平面图形叫做物体的一个视图。

CSS 中 2D 与 3D 的区别

示例：https://codepen.io/tofrankie/pen/jOxxrzX

perspective 与 translateZ

perspective 的取值范围是正数，如果小于等于 0 则没有 3D 视觉效果。
translateZ 可正可负。

图中 d 表示视点与屏幕之间的距离，在 CSS 中通过 perspective 属性来设置。图中 Z 表示元素在 Z 轴的位置，在 CSS 中通过 translateZ 属性来设置。

场景可以理解为：人坐在屏幕前，人的眼睛即为视点，d 就是人与屏幕的距离。（注意，perspective 不设置时，不代表人与屏幕之间的距离为 0，CSS 中 px 等单位取了一个人类坐在屏幕前观看屏幕较为舒服的距离而设定的长度单位）

从图片可以看到，当 d 相同时，当 Z 越靠近视点时，投射在屏幕上的点越大（蓝色部分）。简单来说就是「近大远小」。

未完待续...

TS Check 与 JSDoc

Wed, 26 Nov 2025 03:02:14 GMT

参考链接

VS Code 中 JavaScript 文件的代码提示是基于 TypeScript 实现的。

TypeScript 不完全支持所有的 JSDoc 标签，具体请看：JSDoc Reference。

JavaScript 中的类型检查可使用 JSDoc 注释来增强。

JS 类型检查

在项目根目录下添加 tsconfig.json 或 jsconfig.json 配置文件，以启动对项目中 JavaScript 文件的类型检查。

如果只是想要 TS 静态类型检查的能力，可能还需要指定 onEmit 等编译选项，更多请看：TSConfig Reference。

这样的话，安装好 typescript 依赖，执行 tsc 便可对项目进行检查。

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "include": ["xxx"],
  "exclude": ["xxx"]
}

JSDoc

目前 TS 可识别以下这些 JSDoc 注释。对应示例可看 JSDoc Reference。

Types

Classes

Property Modifiers @public, @private, @protected, @readonly
@override
@extends (or @augments)
@implements
@class (or @constructor)
@this

Documentation

Other

@enum
@author
Other supported patterns（特别留意下）
Unsupported patterns（特别留意下）
Unsupported tags（特别留意下）

示例

断言

形式：/** @type {!MyType} */ (valueExpression)

必须要有圆括号，否则断言无效！

常量断言

const STATUS = /** @type {const} */ ({
  PENDING: 'pending'
})

导入

定义可复用的类型：

/**
 * @typedef {import("react").CSSProperties} CSSProperties
 * @typedef {import("react").HTMLAttributes} HTMLAttributes
 */

/**
 * @param {CSSProperties} styles
 */
function getStyle(styles) {}

/**
 * @param {HTMLAttributes} attrs
 */
function getAttrs(attrs) {}

从 TypeScript 5.5 起，可以直接在 JSDoc 中导入一组类型，不再需要使用 @typedef 定义一系列的类型：

/** @import { CSSProperties, HTMLAttributes } from "react" */

/**
 * @param {CSSProperties} styles
 */
function getStyle(styles) {}

/**
 * @param {HTMLAttributes} attrs
 */
function getAttrs(attrs) {}

更多：The JSDoc @import Tag

函数

函数表达式

/**
 * @type {function (number, number): number} 
 */
const sum = (x, y) => x + y

函数声明

/** 
 * @name fn 
 * @param {string} str 
 * @param {boolean} flag 
 * @returns {*[]} 
 */
function fn(str, flag) {
  return []
}

未完待续...

GIF 图片优化

Mon, 24 Nov 2025 10:32:41 GMT

背景

在微信交互图文中，除了 JPG、PNG 图片之外，更多的是 GIF 动图，且所占比例比较高。本文就 GIF 图片优化作相关调研。

GIF 文件

GIF（Graphics Interchange Format）是 1987 年创建的一种位图图形交互文件格式，目前有 87a 和 89a 两种版本。其颜色深度只有 8bit，可最多支持 256 种颜色。

发音：

[dʒɪf] - 发音同 jif，创建者认证的发音。
[ɡɪf] - 发音同 gift，被更广泛使用的发音。

深入了解：

文件格式：

优化方向

[!TIP] 本文提供了一些 GIF 优化方向，但是否适合你的，应按实际情况仔细斟酌。

1. 降低分辨率

提到图片优化，降低分辨率自然是首先想到的方向之一。

$ gifsicle --resize-width=width source.gif > target.gif

对于其他项目，这或许是一个不错的选择。但在微信交互图文，设计师交付的 GIF 图片基本上是 @1.5x 倍图，常见为 514 × 940 像素。如果进一步降低分辨率的话，在 DPR 为 3 及更高的高清屏下显示效果不好。

2. 移除无用的扩展内容

在 GIF 文件中，有一部分扩展内容（比如注释扩展）是对数据流渲染没有影响，因此是可以移除的。

# 移除应用程序扩展（亲测发现不会影响 Loop Count）
$ gifsicle --no-app-extensions source.gif > target.gif

# 移除注释扩展
$ gifsicle --no-comments source.gif > target.gif

# 移除扩展（文档中未注明哪一种扩展）
$ gifsicle --no-extensions source.gif > target.gif

# 移除帧文本名称（可理解为帧的别名）
$ gifsicle --no-names source.gif > target.gif

平常对帧的操作，命令通常是 gifsicle "#0" ...，使用别名（如果有的话）是 gifsicle "#first" ...。其作用仅此而已，因此也是可以移除的。

由于扩展内容的不会占用太多字节，因此移除前后文件大小不会有太大变化。

3. 减色

通常，一个连续的 GIF 动图，帧与帧之间的颜色差异不会很大，意味着大量相同的颜色被重复使用，因此这里面是有优化空间的。

关于 GIF 文件的颜色表：

一个 GIF 文件允许最多有一个全局颜色表，可供所有帧使用。
每一帧允许最多允许有一个本地颜色表，仅供当前帧使用。
一般情况下，至少会存在一种颜色表。若无本地颜色表，则从全局颜色表中寻找。
根据规范，颜色表支持 2 的 N 次方种颜色（N 取值 1 ~ 8），即支持 2 ~ 256 种颜色。

3.1 移除本地颜色表

根据上文，如果本地颜色表不存在，就会往全局颜色表中寻找。这样的话，移除掉所有帧的本地颜色表就能节省一部分空间。

$ gifsicle --colors=256 source.gif > target.gif

其中 --colors 指定为 256 可确保颜色不会被丢失。

请注意 --colors=num 会做两件事：

一是，移除本地颜色表。
二是，减少颜色表数量至指定值，若指定值大于原本数量将会被忽略。

以下两张图片，前者每一帧含本地颜色表，后者仅含全局颜色表。优化前后对比：

/Users/frankie/Desktop/gif-test/input/B2-静帧-1.67s.gif
  原图：416.74 KB
  处理后：373.26 KB
  减少了：43.48 KB
  压缩比例：10.43%

/Users/frankie/Desktop/gif-test/input/F3-按钮触发后-2.13s.gif
  原图：957.43 KB
  处理后：956.25 KB
  减少了：1.18 KB
  压缩比例：0.12%

此方法对于存在本地颜色表的 GIF 图片，优化效果还是挺明显的，否则几乎无影响

3.2 减少颜色表数量

$ gifsicle --colors=num source.gif > target.gif

其中 num 表示颜色表数量，取值范围 2 ~ 256。可同时使用 --color-method 参数以指定减少颜色表的算法（详看 Gifsicle manual）。

请注意，颜色表数量仅支持 2 的 N 次方数量（ N 为 1 ~ 8）。

当使用 Gifsicle 处理图像时，假设指定为 --colors=120，将取可容纳的最小的数量 128，其中第 120 ~ 127 索引位被指定为 #000000（不排除有其他颜色值，但不重要，毕竟不会再有索引值指向它们）。

如果图像中含有透明色，实际处理过程中 num 可能会 +1。

对于普通 GIF 动图优化还是很明显的，但在微信交互图文应该是不能接受的，因此不推荐使用这种方式进行优化，原因有二：

一是，处理前后质量下滑肉眼可见，反而色彩差异倒不是太明显（比如减少至 128 种颜色时）。
二是，结果不可控。其中 Gifsicle 减少颜色表的默认算法为「diversity」。

4. 透明度存储

我们都知道，GIF 动图是由一帧一帧的位图组成的。但通常一个连续的 GIF 动态，帧与帧之间的差异不会很大，意味着重复部分会很多。

如果消除掉重复部分，那么整个文件占用空间将会大幅降低，这种方式称为「透明度存储」。

借助 Gifsicle 工具可实现透明度存储，命令如下：

$ gifsicle -O2 source.gif > target.gif

也可直接使用 -O3 参数，请注意这里是大写字母「O」，而不是数字「0」。

-O2：Store only the changed portion of each image, and use transparency.
-O3：Try several optimization methods (usually slower, sometimes better results).

一般情况下，这种优化方式在体积上会有「质」的变化，而且质量上几乎看不出有损失。

但是，在你亲测之后或许会发现，效果并不明显，可能体积上只降低几个 KB 大小，甚至会多几个 KB（这方面官方文档有提到，但具体原因未说明）。

原因很简单，设计师交付的图片已做了透明度处理，因此我们再使用 gifsicle -O2 处理时，结果是几乎没有变化的。

利用 ImageMagick 将 GIF 逐帧导出：

$ brew install imagemagick
$ convert B2-静帧-1.67s.gif ./output/b.png

第一帧完整性最高，后续帧只保留了变化的部分，未变化部分表现为透明背景。

接着，利用 gifsicle --unoptimize 命令将 GIF 图片还原，再逐帧导出：

$ gifsicle --unoptimize B2-静帧-1.67s.gif > B2-origin.gif
$ convert B2-origin.gif ./output/b-origin.png

是的，这个才是 GIF 图的最初模样。原图大小为 2.1MB，透明度处理之后大小为 250KB，因此透明度存储这种方式的优化是巨大的。

请注意，采用透明度存储的方式，显示效果或许会受到 Disposal Method（定义帧之间的叠加效果）的影响，但一般情况下无需特别设置。若有需要 Gifsicle 也提供了 --disposal 参数供处理。

5. 有损压缩

GIF 的图像数据使用了 LZW 无损压缩算法。

也可以尝试 Gifsicle 提供的 --lossy 有损压缩选项，具体细节其文档中未体现（有兴趣可看 kohler/gifsicle #16），因此实际效果不可预测。

$ gifsicle --lossy=num source.gif > target.gif

其中 num 取值范围是 20 ~ 200，默认为 20。贡献 --lossy 的作者 Kornel Lesiński 在 Loosy GIF compressor 指出：80 应该是一个比较合适的值。

GIF's LZW compression is based on a "dictionary" of strings of pixels seen. Normal encoder searches the dictionary for the longest string of pixels that exactly matches pixels in the image. Lossy encoder picks longest string of pixels that's "similar enough" to pixels in the image (plus some magic to hide the distortions with dithering).

6. 抽帧

经过以上优化处理，或有了一定的效果，但可能还是不太满意。那你或许应该试一下「抽帧」处理。

其实，我们可以预知抽帧带来的影响：

帧数减少，时长变短，速率加快。
帧与帧之间的衔接不流畅，有噪点。

如何优化？

将 GIF 还原成未使用透明存储的状态，接着再抽帧，然后重新进行透明度优化，以减少噪点。
~~由于抽帧导致时长变短，造成速率加快的「现象」，因此可以尝试将所有帧的 Delay Time 取出相加，然后再重新分配。~~
抽帧不应抽取连续的帧。同时，切记不能抽去第一帧。

直接抽帧 vs 先还原透明度再抽帧

以下测试图片，开始前已做透明度处理优化。

接着我们抽掉其中三帧，对比两种方式的优劣：

# 第一组：不还原透明度，直接抽帧
$ gifsicle source.gif --delete "#3" "#12" "#20" > target.gif

# 第二组：先将透明度还原，接着抽帧，最终作透明度优化
$ gifsicle source.gif --unoptimize --delete "#3" "#12" "#20" > temp.gif
$ gifsicle temp.gif -O2 > target.gif

结果如下，在体积上两组相差无几 👇 ：

/Users/frankie/Desktop/gif-test/input/F3-按钮触发后-2.13s.gif（第一组）
  原图：956.25 KB
  处理后：867.45 KB
  减少了：88.80 KB
  压缩比例：9.29%

/Users/frankie/Desktop/gif-test/input/F3-按钮触发后-2.13s.gif（第二组）
  原图：956.25 KB
  处理后：873.74 KB
  减少了：82.52 KB
  压缩比例：8.63%

在效果上，两组差异则非常明显（由于录制 GIF 图片有点麻烦，截图如下 👇 ）：

当然，并不是所有图片如第一组般处理时，效果都那么差。但批量处理图片的话，应先还原透明度，再抽帧，再优化透明度存储。

重新分配 Delay Time（废弃）

前面抽掉三帧之后，GIF 时长会发生变化，由原来的 2.13s 变为 1.92s。时长可使用 FFmpeg 工具查看：

$ ffprobe F3-按钮触发后-2.13s.gif
Input #0, gif, from 'F3-按钮触发后-2.13s.gif':
  Duration: 00:00:01.92, start: 0.000000, bitrate: 3701 kb/s
  Stream #0:0: Video: gif, bgra, 514x1101, 15.08 fps, 15.17 tbr, 100 tbn

这种方式对于每一帧 Delay Time 相同或相近的情况比较合适，因此局限性较大。

小结

基于以上提供的几个优化方向，大致可以划分为两类：

无损压缩：移除扩展内容、移除本地颜色表、透明度存储。
有损压缩：降低图片分辨率、减少颜色表数量、GifSicle Lossy、抽帧。

其中无损压缩适用于绝大多数项目。以微信交互图文项目为例，除了无损压缩，较为合适的只有适当地抽帧了。

快速抽帧技巧

利用 macOS 内置的「预览 App」可快速进行抽帧或添加帧等操作。

用预览打开图片，在「选取边栏显示」处切换至「缩略图」或「缩略清单」模式（如图 👇）。

删除帧：选中帧后，按下「⌘ + delete」组合键，可删除该帧。
添加帧：打开两组图片，选择上述模式之一，然后两组图片之间进行拖拽即可。比如，从 A.gif 中拖拽一帧到 B.gif，A.gif 帧数不会发生变化，B.gif 则会增加一帧。

进行以上操作之前，建议先将原图备份。

优化脚本

初步想法，大概会支持一张或多张图片批量处理。

大致流程如下：

若需要执行抽帧（通过参数区分），则先进行 gifsicle -U 操作以还原透明度，否则跳过。
若需要执行抽帧，根据抽帧方式对图片进行抽帧操作，否则跳过。
移除扩展内容、本地颜色表。
对图片进行透明度存储。

抽帧形式，想法如下：

随机抽帧：按比例抽取对应帧数。随机抽取的帧数，不能是第一帧，也不应该抽取连续帧。
抽取指定帧：传入指定帧数，形如 #3 #9。但这种方式不适用于批量处理。

以上操作，将会使用 Shell 脚本实现。

由于绝大多数场景可能不适合抽帧，暂不实现抽帧处理。

目前已编写了一个 Shell 脚本去「批量、无损」处理 GIF 图片，主要优化点是「透明度存储」、「移除 Local Color Table」、「移除对渲染无用的扩展内容」。

可通过 NPM 的方式安装此脚本。

# 全局安装
$ yarn global add https://github.com/tofrankie/gif-optimize.git

# 使用
$ gg  -o

更多请移步 gif-optimize 仓库。

References

React Query 小记

Mon, 17 Nov 2025 09:20:11 GMT

本文以 V5 版本为例

Query Key

它是由字符串、（可嵌套）对象、或两者兼具组成的数组。

顺序

数组的顺序很重要

// 以下 Query Key 不相同
useQuery({ queryKey: ['todos', status, page] })
useQuery({ queryKey: ['todos', page, status] })
useQuery({ queryKey: ['todos', undefined, page, status] })

对象的顺序不重要

// 以下 Query Key 相同
useQuery({ queryKey: ['todos', { status, page }] })
useQuery({ queryKey: ['todos', { page, status }] })
useQuery({ queryKey: ['todos', { page, status, other: undefined }] })

对象总是以确定性的 sort 排序：👇

/**
 * Default query & mutation keys hash function.
 * Hashes the value into a stable hash.
 */
export function hashKey(queryKey: QueryKey | MutationKey): string {
  return JSON.stringify(queryKey, (_, val) =>
    isPlainObject(val)
      ? Object.keys(val)
          .sort()
          .reduce((result, key) => {
            result[key] = val[key]
            return result
          }, {} as any)
      : val,
  )
}

结构化

尽管 Query Key 在整个 Query 中唯一便可使用，但我们可以按一定的颗粒度进行划分。比如：

useQuery({ queryKey: ['todos', 'list', { filters: 'all' }] })
useQuery({ queryKey: ['todos', 'list', { filters: 'done' }] })
useQuery({ queryKey: ['todos', 'detail', 1] })
useQuery({ queryKey: ['todos', 'detail', 2] })

这样做的好处是，在处理数据更新时更加灵活，或者批量使对应缓存失效：

function useUpdateTitle() {
  return useMutation({
    mutationFn: updateTitle,
    onSuccess: newTodo => {
      // 更新单个数据
      queryClient.setQueryData(['todos', 'detail', newTodo.id], newTodo)

      // 更新列表数据
      queryClient.setQueriesData(['todos', 'list'], previous =>
        previous.map(todo => (todo.id === newTodo.id ? newTodo : todo))
      )

      // 使查询列表失效
      queryClient.invalidateQueries({queryKey: ['todos', 'list']})
    },
  })
}

有时，使用“纯对象”的 Query Key 更好：

function useTodosQuery(filter: string) {
  return useQuery({
    // queryKey: ["todos", "list", filter],
    queryKey: [{scope: 'todos', entity: 'list', filter}],
    queryFn: ({queryKey}) => {
      // 保不准下次会新增什么参数，此时对象要优于数组
      // const [, , filter] = queryKey;
      const {filter} = queryKey
      return fetchTodos({filter})
    },
  })
}

Select

在 useQuery 或 useInfinityQuery 中的 select 会在每次组件更新时执行，而不是查询结果变化时才执行，所以按需使用 useCallback（但如果处理不会很复杂，也不需要缓存处理）。

References

TkDodo's blog

在 Parallels Desktop 中使用 Node.js 遇到的问题

Fri, 14 Nov 2025 02:13:57 GMT

作个记录。

访问 macOS 文件

参考从 Windows 应用程序访问 macOS 文件夹或文件

corepack enable 没有操作权限

在安装 Node.js 后，在 PowerShell 执行 corepack enable 报错：

$ corepack enable
Internal Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\pnpx'
Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\pnpx'

corepack enable 会尝试在 C:\Program Files\nodejs\ 目录下创建 pnpm、yarn、yarnpkg 可执行文件。但该目录属于系统目录，普通 PowerShell 没有写入权限，所以报错了。

以管理员身份启动 PowerShell 运行执行便可解决。

问题二

$ npm install
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsof
t.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ npm install
+ ~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

前往 Node.js 安装目录 C:\Program Files\nodejs，右键「属性 - 安全 - 高级 - 权限」，选择 Users 并更改权限设为「完全控制」，并确认退出。

问题三

$ npm install
npm warn cleanup Failed to remove some directories [
npm warn cleanup   [
npm warn cleanup     '\\\\?\\UNC\\psf\\Home\\Web\\Git\\raycast-wechat-devtool\\node_modules\\@typescript-eslint',
npm warn cleanup     [Error: EPERM: operation not permitted, rmdir '\\psf\Home\Web\Git\raycast-wechat-devtool\node_modules\@typescript-eslint\eslint-plugin\dist'] {
npm warn cleanup       errno: -4048,
npm warn cleanup       code: 'EPERM',
npm warn cleanup       syscall: 'rmdir',
npm warn cleanup       path: '\\\\psf\\Home\\Web\\Git\\raycast-wechat-devtool\\node_modules\\@typescript-eslint\\eslint-plugin\\dist'
npm warn cleanup     }
npm warn cleanup   ]
npm warn cleanup ]
npm error code 1
npm error path \\psf\Home\Web\Git\raycast-wechat-devtool\node_modules\esbuild
npm error command failed
npm error command C:\WINDOWS\system32\cmd.exe /d /s /c node install.js
npm error '\\psf\Home\Web\Git\raycast-wechat-devtool\node_modules\esbuild'
npm error ����Ϊ��ǰĿ¼������·�������� CMD.EXE��
npm error UNC ·������֧�֡�Ĭ��ֵ��Ϊ Windows Ŀ¼��
npm error node:internal/modules/cjs/loader:1424
npm error   throw err;
npm error   ^
npm error
npm error Error: Cannot find module 'C:\Windows\install.js'
npm error     at Module._resolveFilename (node:internal/modules/cjs/loader:1421:15)
npm error     at defaultResolveImpl (node:internal/modules/cjs/loader:1059:19)
npm error     at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1064:22)
npm error     at Module._load (node:internal/modules/cjs/loader:1227:37)
npm error     at TracingChannel.traceSync (node:diagnostics_channel:328:14)
npm error     at wrapModuleLoad (node:internal/modules/cjs/loader:245:24)
npm error     at Module.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:154:5)
npm error     at node:internal/main/run_main_module:33:47 {
npm error   code: 'MODULE_NOT_FOUND',
npm error   requireStack: []
npm error }
npm error
npm error Node.js v24.11.1
npm error A complete log of this run can be found in: C:\Users\frankie\AppData\Local\npm-cache\_logs\2025-11-14T01_57_43_855Z-debug-0.log

由于 macOS 的目录是只读的，需要手动对具体目录移除「只读」属性。
项目位于 Parallels Desktop 的共享目录（UNC 路径），Parallels 的 psf 文件系统不完全兼容 Windows 的权限系统。使用 PS Z:\Web\Git\raycast-wechat-devtool> 替代 \psf\Home\Web\Git\raycast-wechat-devtool。

问题四

在 VS Code 中使用源代码管理无法查看 Changes 内容，提示：The editor could not be opened due to an unexpected error. Please consult the log for more details.

Error: Unable to read file '\\Mac\Home\Web\Git\raycast-wechat-devtool\src\utils\command.ts' (Unknown (FileSystemError): UNC host 'mac' access is not allowed. Please update the 'security.allowedUNCHosts' setting if you want to allow this host.)

参考 Working with UNC paths，在 VS Code 配置：

{
  "security.allowedUNCHosts": ["mac"]
}

在 Parallels Desktop 中通过 ISO 镜像文件升级 Windows

Thu, 06 Nov 2025 04:17:33 GMT

背景

此前在设置中进行 Windows 系统更新，总是失败，提示安装错误 - 0xc1900101。💢

方法

现通过本地镜像文件方式进行升级：

前往 https://www.microsoft.com/en-us/software-download/ 下载 Windows 镜像（按需下载）
在 Parallels Desktop 控制中心，打开镜像配置窗口
切换至硬件选项卡，在「CD/DVD - 源」处选择你的 ISO 镜像文件
启动 Windows 虚拟机，会自动挂载一个虚拟光驱（例如 D:）
在文件管理器打开该光驱，点击 setup.exe 进行升级

解决 Windows 启动错误代码 0x0000605

Thu, 06 Nov 2025 02:38:19 GMT

前情提要

系统：macOS (Apple Silicon)
虚拟机：Parallels Desktop (Windows 11 ARM)

Windows 的版本还是 2023 年安装的 22H2 Beta 版本（2324.1000 ni_prerelease），很久没有在电脑上启动过虚拟机了。

近期打开发现启动不了，报错如下：

搜了一下，错误代码 0x0000605 表示系统的安全验证失败（Secure Boot 验证无法通过），最常见原因是系统时间错误或 Secure Boot 数据损坏。在 Windows ARM 或 EFI 环境中，如果系统时间落在证书签发时间之外（例如时间太早），启动加载的签名校验会失败，于是报 0x0000605。

失败的尝试

根据 ChatGPT，可以在这样处理：

按下 Win 键，进入 UEFI 主界面
进入 Boot Maintenance Manager
选择 Advanced Boot Options 或 Change System Date and Time（不同版本略有不同）
设定为当前正确的日期和时间
返回主界面，选择 Continue 启动 Windows

遗憾的是，我这里并没有时间选项，所以此方案失败告终！

它还提到在 Boot Maintenance Manager 界面，选择 Boot From File，找到 \EFI\BOOT\BOOTAA64.EFI 文件（标准的 EFI Shell 文件），按 Enter 启动它。

先后输入以下命令，看看是不是很早的日期，如果是说明时间错误。

$ date
$ time

接着，移除执行以下命令设置当前时间，设置后再次使用 date、time 命令确认是否设置成功。

$ date 11/06/2025
$ time 09:00:00

格式：

日期：MM/DD/YYYY
时间：HH:MM:SS（24 小时制）

退出：

$ exit

返回主界面，选择 Continue 启动 Windows

但我选择 \EFI\BOOT\BOOTAA64.EFI 回车，并没有进入命令行界面，而是回到文章开头的蓝屏状态，所以这个方案对我也不适用。

成功解决

继续请教 ChatGPT，它提到「关闭 Secure Boot 绕过签名检查」。

按下 Win 键，进入 UEFI 主界面
进入 Device Manager
选择 Secure Boot Configuration
将 Attempt Secure Boot 或 Enable Secure Boot 改为 Disabled（界面上 [X] 表示 Enable，[] 表示 Disabled）
保存退出，回到主界面，选择 Continue 启动 Windows

接着，我出现了新的报错：

说明 Secure Boot 的确已经被你成功关闭了。

但新的蓝屏（BitLocker 恢复界面）说明——Windows 系统磁盘启用了 BitLocker 加密，而 Secure Boot 的关闭让 TPM（可信平台模块）状态变化，Windows 因此认为“系统被篡改”，所以要求恢复密钥。

前往 https://account.microsoft.com/devices/recoverykey
登录与虚拟机中 Windows 相同的 Microsoft 帐号。
找到这台设备对应的恢复密钥。
在蓝屏界面输入该密钥后，即可继续启动。

在前面的蓝屏界面，按回车（还是 Win 键来着）进入 Windows 恢复环境界面：

选择「Troubleshoot - Advanced Options - Command Prompt」进入 cmd.exe 命令行窗口。

查看加密卷：

$ manage-bde -status

这会列出系统上所有磁盘的加密状态（C:、D:、E: 等）。

解锁目标盘

$ manage-bde -unlock C: -RecoveryPassword

我要解锁的是 C 盘，key 是前面提到的恢复密钥（一串 48 位数字）

关闭 BitLocker

$ manage-bde -off C:

确认界面是否完成

$ manage-bde -status

如果输出结果包含以下两行，表示解密已完成。

Percentage Encrypted: 0.0%
Conversion Status: Fully Decrypted

如果显示如下内容，说明仍在后台解密中，不要强制中断或关机，耐心等待完成。

Conversion Status: Decrypting
Percentage Encrypted: XX%

退出命令行

$ exit

回到主界面，选择 Continue，启动系统。

至此，我的 Windows 恢复了。

记十月：珠海 - 澳门三日

Sat, 01 Nov 2025 17:57:01 GMT

简要

时间：10.17 ~ 10.19
地点：珠海、澳门 🇲🇴
去返：中旅大巴（广州 - 珠海）

出发之前

准备：

证件类：身份证、港澳通行证（含澳门有效签注）
药品类：一些必要的基础药品
其他：少量现金 💵

关于要不要兑换葡币（澳门元）？

当前汇率：「人民币 : 葡币 : 港币」是「1 : 1.13 : 1.09」
通关口岸很多找换店，但收点手续费（约 100 ~ 5），金额较大建议提前去银行换
澳门很多店都支持微信、支付宝、人民币结算，但： a. 公交、轻轨等基础设施，或者一些大店，使用国内移动支付会自动折算汇率 b. 一些如便利店、出租车等小作坊，也可能支持人民币，大概率是按「1 : 1 : 1」进行支付

未完待续...

浅谈 TypeScript 泛型

Tue, 09 Sep 2025 10:28:15 GMT

假设现在需要给 id 函数标注类型，它接收任意类型的参数并原样返回。

function id(arg) {
  return arg
}

如何描述参数与返回值的类型关系呢？

较笨的做法是使用函数重载把可能的类型都列出来，但这样写下去，没写完就下班了...

function id(arg: number): number
function id(arg: string): string
function id(arg: boolean): boolean
// ...

类型可以有无数种（包括复合类型、联合类型等），根本穷举不完。

如果希望类型足够灵活，这也不是一种合理的做法。

我们知道，参数 arg 的具体值只有在函数调用时才能确认，参数类型也是同样的。

TS 的类型也是支持函数编程的，伪代码如下：

function Id(Arg) {
  return Arg
}

把类型函数化，也就是说 Arg 类型取决于函数调用时入参的类型。比如，当输入为 string 类型，输出也是 string 类型。

但这样写跟 JS 的函数语法有冲突，实际会被当作一个名为 Id 的 JS 函数。

TS 需要使用特有的语法来表达类型函数，用的是 <>，类似于 JS 函数的 ()，在其内部声明类型的形参、函数的形参，伪代码如下：

// 伪代码
function Id {
  return Arg
}

历史故事：由于 TS 比 React 早出生，刚开始 TS 跟 JSX 的 <> 语法是有冲突的，直到 TS 1.6 才开始支持 JSX。

前面都是伪代码，最后 TS 是这么干的，它把类型函数和函数本身融合在一起，语法如下：

⚠️ 注意，「类型函数」只是本文为了让读者更好地理解泛型而使用的一种表述，并非官方定术语。

function id(arg: Arg): Arg {
  return arg
}

我们可以这样去解读：

它是由函数本身和类型函数两部分组成。
函数本身和类型函数都可以定义形参，分别在 ()、<> 内定义。
类型函数的形参在 <> 内定义，其作用范围（即函数体）是函数本身的形参类型和返回值类型。
因为形参本身也算是一种变量，所以形参的 Arg 可以命名为其他合法的变量名。习惯上，T（Type）及其后面的字母 U、V 用得较多，类似于循环遍历常用的 i、j、k 差不多，算是一种约定俗成的写法吧。

使用更广泛的 T 替换 Arg，是不是很眼熟：

function id(arg: T): T {
  return arg
}

得益于 TS 强大的自动类型推断，这个例子中不显式指定返回值类型也是 OK 的，它可以自动识别返回类型就是 T。

function id(arg: T) {
  return arg
}

函数调用，这样传递类型参数：

id('abc')
id(1)

同样地，利用 TS 的类型推断，可以省略调用时 <> 类型：

id('abc')
id(1)

以上就是泛型在函数中的应用。

基础语法

前面我们将泛型“函数化”，实际上它也是支持定义多个类型参数、以及类型参数默认值的。

多个泛型参数：

function fn(x: T, y: U) {
  // do something...
}

泛型参数默认值：

function fn(x: T, y: U) {
  // do something...
}

有默认值意味着它是可选参数，它必须放在必选参数之后声明，因此是错误写法。

泛型参数约束：

function getLength(arg: T) {
  return arg.length
}

getLength('abc')
getLength([])

未完待续...

体操演练场

为什么函数返回布尔类型不会触发类型收窄？

Sun, 07 Sep 2025 17:36:11 GMT

假设有一个判断字符串的函数：

function isStr(value: unknown) {
  return typeof value === 'string'
}

TS 会自动推断返回类型为 boolean。

let value: number | string = Math.random() > 0.5 ? 'hello' : 1

if (isStr(value)) {
  // ❌ Property 'length' does not exist on type 'string | number'.
  value.length
}

但使用时会有问题，可见 TS 并没有做类型收窄。

解决方法也简单，使用类型谓词（Type Predicates）即可：

function isStr(value: unknown): value is string {
  return typeof value === 'string'
}

[!NOTE] 注意，自 TypeScript 5.5 起支持推断类型谓词，无需显式指定。

类型谓词用于描述函数的返回值类型。这里 value is string 并不是返回类型，而是告诉 TS 如果函数返回 true，那么参数 value 一定是 string 类型。换句话说，当函数返回 true 时，告诉 TS 编译器参数 value 的类型应该被收窄为 string。

为什么函数返回布尔类型不会触发类型收窄？

因为 TS 的类型系统是静态的，编译时它不会去分析函数的实现，只是根据签名（返回类型）来决定能不能做收窄。只告诉 TS 返回真假，不会带来额外的类型信息，所以不会收窄。

类型收窄必须依赖签名（类型谓词）信息，而不是依赖函数实现。

附上类型收窄的方式：

typeof
instanceof
in 操作符
判别联合（字面量字段）
真值收窄（if 语句）
等式收窄（===、!== 等）
类型谓词
控制流分析（如赋值收窄等）
Exhaustive check + never

TypeScript 中 Object、object、{} 之间的区别

Thu, 04 Sep 2025 10:12:25 GMT

写在前面

在 JS 中，构造函数 Object、空对象字面量 {} 可以作为值使用，因此它俩在 TS 中也可以作为值使用。

在 TS 中，Object、object、{} 还可以作为类型使用。注意 Object 和 object 是两种不同的类型。还有 object 是 TS 特有的类型，只能用于类型，不能作为值。

迷之写法 🤯

请问这几种写法有什么不同？它们可以接收哪些值？

// 1️⃣
const obj = {}

// 2️⃣
const obj: {} = {}

// 3️⃣
const obj: {}

// 4️⃣
const obj: Object

// 5️⃣
const obj: object

object（小 o）

回顾一下，在 JS 中有「基本数据类型」和「引用数据类型」两种数据类型：

基本数据类型
- Number
- String
- Boolean
- Symbol
- BigInt
- Undefined
- Null
引用数据类型
- Object（包括对象、数组、函数、Map、Set、Date 等）

注意，以上用大写字母开头的表述形式与 TS 无关，把它换成中文（如字符串类型）也行，别混淆了。

这些数据类型对应的 TS 类型如下：

基本数据类型：
- number
- string
- boolean
- symbol
- bigint
- undefined
- null
引用数据类型
- object

到这里应该理解了，object 表示一个引用值的类型。

// 所有基本数据类型的类型
type Primitive = number | string | boolean | symbol | bigint | null | undefined

// 所有引用数据类型的类型
type NonPrimitive = object // 相当于 Exclude

示例：只要值是引用值便可以赋值给 object 类型的变量。

let obj: object

obj = 1 // ❌ Type 'number' is not assignable to type 'object'.
obj = 'abc' // ❌ Type 'string' is not assignable to type 'object'.
obj = true // ❌ Type 'boolean' is not assignable to type 'object'.
obj = Symbol('abc') // ❌ Type 'symbol' is not assignable to type 'object'.
obj = 1n // ❌ Type 'bigint' is not assignable to type 'object'.
obj = null // ❌ Type 'null' is not assignable to type 'object'.
obj = undefined // ❌ Type 'undefined' is not assignable to type 'object'.

obj = {} // ✅
obj = Object // ✅
obj = { foo: 123 } // ✅
obj = [1, 2] // ✅
obj = (a: number, b: number) => a + b // ✅

虽说可以把任意的引用值赋值给 obj 变量，但是其访问属性时，TS 为了确保安全访问，只能访问其包含的类型中都存在的属性，否则要做类型收窄。

let a: object

a = [] // ✅
a = {} // ✅

a.join(',') // ❌ 像普通对象就没有 join 属性，因此抛出错误 Property 'join' does not exist on type 'object'.
a.toString() // ✅ 共有属性

if (Array.isArray(a)) {
  a.join(',') // ✅ 数组独有的方法
}

Object（大 O）

先从 JS 讲起。我们知道 JS 的原始值是没有任何属性和方法的。

const foo = 'abc'
foo.length // 3

那为什么 foo.length 不报错呢？原因是内部相当于这样，首先将其转为引用类型，实际读取的是 String 实例对象的 length 属性。

const foo = 'abc'
Object(3).length // 3

但 undefined、null 这两个家伙无法转为引用类型，因此类似 undefined.length 这种会抛出 TypeError。

前面铺垫完之后，再看看示例：

let obj: Object

obj = 1 // ✅
obj = 1n // ✅
obj = 'abc' // ✅
obj = true // ✅
obj = null // ❌ Type 'null' is not assignable to type 'Object'.
obj = undefined // ❌ Type 'undefined' is not assignable to type 'Object'.
obj = Symbol('abc') // ✅

obj = {} // ✅
obj = Object // ✅
obj = { foo: 123 } // ✅
obj = [1, 2] // ✅
obj = (a: number, b: number) => a + b // ✅

任意非 undefined、null 的值，都可以赋值给 Object 类型（指 TS 类型）的变量。

Object 表示的类型范围太宽了，实际中应该少用。

空对象 {}

在 TS 中，空对象 {} 既是一个值，也是一个特殊的类型。

以下两种写法是等价的：

const obj = {}
const obj: {} = {}

TS 自动推导出 obj 的类型是 {}，即 Object，

以下两种写法是等价的：

const obj: {}
const obj: Object

所以使用 {} 作为类型时，它实际上是 Object 类型的简写形式。

要注意下，虽然两者形式上有点像，第一个本质上是 Object 类型，所以它不会触发对象的严格字面量检查。

let obj: {} = { a: 1 } // ✅

let obj2: { x: number } = { x: 1, y: 2 } // ❌ Object literal may only specify known properties, and 'y' does not exist in type '{ x: number; }'.

总结

object 类型的变量仅接受任意引用值。
Object 类型的变量接受除 undefined 和 null 之外的任意值。
将 {} 作为类型时，它实际上是 Object 类型的简写。即 const obj: {} 等价于 const obj: Object。

回到文章开头令人抓狂的示例：

// 1️⃣
const obj = {}

// 2️⃣
const obj: {}

// 3️⃣
const obj: {} = {}

// 4️⃣
const obj: Object

// 5️⃣
const obj: object

1️⃣、2️⃣、3️⃣、4️⃣ 为同一类，都是 Object 类型，5️⃣ 则是 object 类型。

TypeScript 类型关系图

Wed, 03 Sep 2025 16:32:11 GMT

类型分类

flowchart TD
    TypeScript[TypeScript 类型系统]
    
    TypeScript --> PrimitiveTypes[基本类型]
    TypeScript --> ObjectTypes[对象类型]
    TypeScript --> SpecialTypes[特殊类型]
    TypeScript --> CompoundTypes[复合类型]

基本类型

flowchart TD
    PrimitiveTypes[基本类型] --> String[string]
    PrimitiveTypes --> Number[number]
    PrimitiveTypes --> Boolean[boolean]
    PrimitiveTypes --> BigInt[bigint]
    PrimitiveTypes --> Symbol[symbol]
    PrimitiveTypes --> Null[null]
    PrimitiveTypes --> Undefined[undefined]

对象类型

flowchart TD
    ObjectTypes[对象类型] --> Object[Object]
    ObjectTypes --> Function[Function]
    ObjectTypes --> Array[Array]
    ObjectTypes --> Promise[Promise]
    ObjectTypes --> Date[Date]
    ObjectTypes --> RegExp[RegExp]
    ObjectTypes --> Error[Error]
    ObjectTypes --> Map[Map]
    ObjectTypes --> Set[Set]
    ObjectTypes --> WeakMap[WeakMap]
    ObjectTypes --> WeakSet[WeakSet]
    ObjectTypes --> Iterator[Iterator]
    ObjectTypes --> Generator[Generator]
    
    Function --> Object
    Array --> Object
    Promise --> Object
    Date --> Object
    RegExp --> Object
    Error --> Object
    Map --> Object
    Set --> Object
    WeakMap --> Object
    WeakSet --> Object
    Iterator --> Object
    Generator --> Object

特殊类型

flowchart TD
    SpecialTypes[特殊类型] --> Never[never]
    SpecialTypes --> Unknown[unknown]
    SpecialTypes --> Any[any]
    SpecialTypes --> Void[void]

复合类型

flowchart TD
    CompoundTypes[复合类型] --> UnionType[联合类型]
    CompoundTypes --> IntersectionType[交叉类型]
    CompoundTypes --> TupleType[元组类型]
    CompoundTypes --> LiteralType[字面量类型]

所有类型

flowchart TD
    TypeScript[TypeScript 类型系统]
    
    TypeScript --> PrimitiveTypes[基本类型]
    TypeScript --> ObjectTypes[对象类型]
    TypeScript --> SpecialTypes[特殊类型]
    TypeScript --> CompoundTypes[复合类型]
    
    PrimitiveTypes --> String[string]
    PrimitiveTypes --> Number[number]
    PrimitiveTypes --> Boolean[boolean]
    PrimitiveTypes --> BigInt[bigint]
    PrimitiveTypes --> Symbol[symbol]
    PrimitiveTypes --> Null[null]
    PrimitiveTypes --> Undefined[undefined]
    
    ObjectTypes --> Object[Object]
    ObjectTypes --> Function[Function]
    ObjectTypes --> Array[Array]
    ObjectTypes --> Promise[Promise]
    ObjectTypes --> Date[Date]
    ObjectTypes --> RegExp[RegExp]
    ObjectTypes --> Error[Error]
    ObjectTypes --> Map[Map]
    ObjectTypes --> Set[Set]
    ObjectTypes --> WeakMap[WeakMap]
    ObjectTypes --> WeakSet[WeakSet]
    ObjectTypes --> Iterator[Iterator]
    ObjectTypes --> Generator[Generator]
    
    SpecialTypes --> Never[never]
    SpecialTypes --> Unknown[unknown]
    SpecialTypes --> Any[any]
    SpecialTypes --> Void[void]
    
    CompoundTypes --> UnionType[联合类型]
    CompoundTypes --> IntersectionType[交叉类型]
    CompoundTypes --> TupleType[元组类型]
    CompoundTypes --> LiteralType[字面量类型]
    
    Function --> Object
    Array --> Object
    Promise --> Object
    Date --> Object
    RegExp --> Object
    Error --> Object
    Map --> Object
    Set --> Object
    WeakMap --> Object
    WeakSet --> Object
    Iterator --> Object
    Generator --> Object

类型赋值关系

严格模式

flowchart TD
    %% 底层类型
    Never[never - 底层类型]
    
    %% 第四层 - 特殊值类型
    Null[null]
    Undefined[undefined]
    Void[void]
    
    %% 第三层 - 基本类型
    String[string]
    Number[number]
    Boolean[boolean]
    BigInt[bigint]
    Symbol[symbol]
    
    %% 第二层 - 对象类型
    Object[Object - 对象基类]
    
    %% 顶层类型
    Any[any - 顶层类型]
    Unknown[unknown - 类型安全顶层]
    
    %% 正确的赋值关系
    Never --> Any
    Never --> Unknown
    Never --> Object
    Never --> String
    Never --> Number
    Never --> Boolean
    Never --> BigInt
    Never --> Symbol
    Never --> Null
    Never --> Undefined
    Never --> Void
    
    %% 基本类型和对象类型可以赋值给 unknown 和 any
    String --> Any
    String --> Unknown
    Number --> Any
    Number --> Unknown
    Boolean --> Any
    Boolean --> Unknown
    BigInt --> Any
    BigInt --> Unknown
    Symbol --> Any
    Symbol --> Unknown
    
    Object --> Any
    Object --> Unknown
    
    %% 特殊值类型只能赋值给 unknown 和 any
    Null --> Any
    Null --> Unknown
    Undefined --> Any
    Undefined --> Unknown
    Void --> Any
    Void --> Unknown
    
    %% unknown 可以赋值给 any
    Unknown --> Any
    
    %% 分组
    subgraph BottomLevel[底层类型层]
        Never
    end
    
    subgraph SpecialLevel[特殊值类型层]
        Null
        Undefined
        Void
    end
    
    subgraph PrimitiveLevel[基本类型层]
        String
        Number
        Boolean
        BigInt
        Symbol
    end
    
    subgraph ObjectLevel[对象类型层]
        Object
    end
    
    subgraph TopLevel[顶层类型层]
        Any
        Unknown
    end

非严格模式

flowchart TD
    %% 底层类型
    Never[never - 底层类型]
    
    %% 第四层 - 特殊值类型
    Null[null]
    Undefined[undefined]
    Void[void]
    
    %% 第三层 - 基本类型
    String[string]
    Number[number]
    Boolean[boolean]
    BigInt[bigint]
    Symbol[symbol]
    
    %% 第二层 - 对象类型
    Object[Object - 对象基类]
    
    %% 顶层类型
    Any[any - 顶层类型]
    Unknown[unknown - 类型安全顶层]
    
    %% 正确的赋值关系
    Never --> Any
    Never --> Unknown
    Never --> Object
    Never --> String
    Never --> Number
    Never --> Boolean
    Never --> BigInt
    Never --> Symbol
    Never --> Null
    Never --> Undefined
    Never --> Void
    
    %% 基本类型和对象类型可以赋值给 unknown 和 any
    String --> Any
    String --> Unknown
    Number --> Any
    Number --> Unknown
    Boolean --> Any
    Boolean --> Unknown
    BigInt --> Any
    BigInt --> Unknown
    Symbol --> Any
    Symbol --> Unknown
    
    Object --> Any
    Object --> Unknown
    
    %% 非严格模式下的额外赋值关系 - 只有 null 和 undefined
    Null --> Any
    Null --> Unknown
    Null --> String
    Null --> Number
    Null --> Boolean
    Null --> BigInt
    Null --> Symbol
    
    Undefined --> Any
    Undefined --> Unknown
    Undefined --> String
    Undefined --> Number
    Undefined --> Boolean
    Undefined --> BigInt
    Undefined --> Symbol
    
    %% void 类型始终只能赋值给 unknown 和 any
    Void --> Any
    Void --> Unknown
    
    %% unknown 可以赋值给 any
    Unknown --> Any
    
    %% 分组
    subgraph BottomLevel[底层类型层]
        Never
    end
    
    subgraph SpecialLevel[特殊值类型层]
        Null
        Undefined
        Void
    end
    
    subgraph PrimitiveLevel[基本类型层]
        String
        Number
        Boolean
        BigInt
        Symbol
    end
    
    subgraph ObjectLevel[对象类型层]
        Object
    end
    
    subgraph TopLevel[顶层类型层]
        Any
        Unknown
    end

东风 5C 打击范围覆盖全球

Wed, 03 Sep 2025 15:32:49 GMT

中华人民共和国万岁

人民有信仰，国家有力量，民族有希望

新华社出图

联合类型与交叉类型的反直觉

Fri, 29 Aug 2025 04:01:27 GMT

前言

联合类型：要么 A，要么 B（只要满足任意一个分支）
交叉类型：必须同时满足 A 和 B（必须满足所有分支）

type Union = A | B

type Intersection = A & B

看起来，联合类型像数学上的“并集”，交叉类型像“交集”。

符合直觉

▼ 要么是字符串，要么是数字，这是符合直觉的。

type DataUnion = string | number

let data: DataUnion

data = 'abc' // ✅
data = 123 // ✅

▼ 由于不可能存在同时满足是字符串，也是数字的值，因此 DataIntersection 类型是 never。这也是符合直觉的。

type DataIntersection = string & number

let data: DataIntersection

data = 'abc' // ❌ Type '"abc"' is not assignable to type 'never'.
data = 123 // ❌ Type '123' is not assignable to type 'never'.

▼ 以下为对象类型，Shape 应该保持一致，是符合直觉的。

type Point = { x: number }

let p: Point

p = { x: 1 } // ✅
p = { y: 2 } // ❌ Object literal may only specify known properties, and 'y' does not exist in type 'Point'.
p = { x: 1, y: 2 } // ❌ Object literal may only specify known properties, and 'y' does not exist in type 'Point'.

▼ 以下为对象的交叉类型，要符合「必须同时满足 A 和 B」结论，其结果必须是一个包含 x 和 y 属性新对象类型，是符合直觉的。

type PointIntersection = { x: number } & { y: number }

let p: PointIntersection

p = { x: 1 } // ❌ Property 'y' is missing in type '{ x: number; }' but required in type '{ y: number; }'.
p = { y: 2 } // ❌ Property 'x' is missing in type '{ y: number; }' but required in type '{ x: number; }'.
p = { x: 1, y: 2 } // ✅
p = { x: 1, y: 2, z: 3 } // ❌ Object literal may only specify known properties, and 'z' does not exist in type 'PointIntersection'.

▼ 以下示例访问属性 point.x、point.y 报错是符合直觉的，一个没有 x、一个没有 y。TypeScript 会要求所有成员类型里都保证存在的属性，才允许安全访问。该方法的修正方式是做类型收窄。

type PointUnion = { x: number } | { y: number }

function showPoint(point: PointUnion) {
  const x = point.x ?? 0 // ❌ Property 'x' does not exist on type '{ y: number; }'.
  const y = point.y ?? 0 // ❌ Property 'y' does not exist on type '{ x: number; }'.
  return `(${x}, ${y})`
}

反直觉

▼ 以下示例，按理 p = obj 报错才是符合直觉的。

type Point = { x: number }

let p: Point

let obj = { x: 1, y: 2 }

p = { x: 1, y: 2 } // ❌ Object literal may only specify known properties, and 'y' does not exist in type 'Point'.
p = obj // ✅

原因如下：

如果赋值语句等号右边是一个字面量，会触发对象的严格字面量检查（strict object literal checking）。因此多了未定义的属性 y 会报错。
如果赋值语句等号右边是一个变量，则不会触发对象的严格字面量检查，所以多了属性没报错（但不能少）。尽管赋值的 obj 是包含 y 属性的，但通过 p.y 访问属性仍然会报错，因为 p 的类型 Point 并不包含 y 属性。

对于 p = obj 这类不触发严格字面量检查，是有实际意义的。比如接口的返回数据有 N 多字段，但业务上实际用到可能只有其中一部分，这种情况下只需声明用到的字段即可。

▼ 以下示例，为什么 p = { x: 1, y: 2 } 又不报错？

type PointUnion = { x: number } | { y: number }

let p: PointUnion

p = { x: 1 } // ✅
p = { y: 2 } // ✅
p = { x: 1, y: 2 } // ✅ 明明是字面量，又不报错了？？？

原因是触发对象的严格字面量检查，有两个要求：

赋值语句等号右边是一个字面量
被赋值对象的类型是单一的对象类型（非联合、非索引签名）

▼ 再看示例，原因跟前面一样，就是看起来有点奇怪。

type PointUnion = { x: number } | { y: number }
type PointIntersection = { x: number } & { y: number }

let point1: PointUnion
let point2: PointIntersection

point1 = { x: 1, y: 2 } // ✅
point2 = { x: 1, y: 2 } // ✅

微信公众号是如何加载、处理图片的？

Fri, 11 Jul 2025 09:55:19 GMT

作个记录。

下载网页

$ wget -r -np -k -L -p https://mp.weixin.qq.com/s/Ks8LG7bjmmCpfKp-jkANrg

似乎不太行的样子

开始时

查找所有包含背景的元素 dom.querySelectorAll('[style*="background-image"]')。
将背景图替换为本地占位图 bgPlaceholder（1 像素的 base64 图片）。
将原来的背景图添加到 data-lazy-bgimg 属性上。

if (!window.__second_open__ && !isCareMode && !isCartoonCopyright) {
  containers.forEach(function (dom) {
    var containsBackground = dom.querySelectorAll('[style*="background-image"]')
    _toConsumableArray(containsBackground).forEach(function (node) {
      if (
        node &&
        node.style &&
        typeof node.getAttribute === 'function' &&
        !node.getAttribute('data-lazy-bgimg') &&
        !window.__lazyload_detected
      ) {
        var bgImg = node.style.backgroundImage
        var bgImgUrl = bgImg && bgImg.match(/url\(['"]?(.*?)['"]?\)/)
        if (bgImgUrl && bgImgUrl[1]) {
          node.style.backgroundImage = bgImg.replace(/url\(['"]?.*?['"]?\)/, bgPlaceholder)
          node.setAttribute('data-lazy-bgimg', bgImgUrl[1])
          node.classList.add('wx_imgbc_placeholder')
        }
      }
    })
  })
}

未完待续...

如何开发一个 Raycast 扩展？

Mon, 07 Jul 2025 13:29:52 GMT

前言

是的，我已经将 Alfred 换为 Raycast 了，后者的免费功能足够好用。

但也没有完全丢掉 Alfred，还在用它的剪贴板历史功能。

此前看到一个帖子说：Alfred 用户一定要试试 Raycast。当时我不以为意。

用了七、八年的 Alfred 几乎没怎么“变过”，有种不思进取的感觉。特别是近几年 AI 的发展，它好像还没反应过来一样。

对比

在使用 Alfred 时，用得最多的功能是：

Web Search - 快速跳转，通常用于搜索文档等。
Clipboard History - 剪贴板历史，没什么好说的，用过都说好用。
Workflow - 工作流，比如翻译、打开项目等，写过一两个插件，开发体验不好，能做的有限。

这些在 Raycast 都有替代方案，甚至更好。除此之外，Raycast 的界面更现代一些，跟最新的 macOS 风格更加契合。并且可以完全通过键盘完成一系列操作。

Raycast 官方博文：Raycast vs Alfred

最重要的是，Raycast Extension 的开发体验比 Alfred 好太多了。官方有提供很多了 API，统一的 UI 风格，有统一的分发 Store，不用网上到处搜索。活跃度很高，目前扩展数量 2200+。

比较麻烦的是，在 Raycast 发布扩展，需要经过官方审核，通过后才会上传到 Store，审核周期较慢！

开始之前

技术栈

Node.js + TypeScript + React

虽然使用 React 构建，但只能使用官方提供的内置组件，不能过多地自定义（可能是 React to macOS Native 的缘故吧），好处是 UI 风格统一。

安装扩展

键入 Store 搜索安装
键入 Import Extension 在本地导入

键入 Manage Extensions 可以管理本地扩展。

卸载扩展

键入关键词，选中要卸载的扩展，在 Action Panel 选择 Uninstall Extension。
键入 Manage Extension 可管理本地扩展。

在 Raycast 中卸载本地扩展（即非通过 Store 安装的扩展）时，本地扩展文件不会被删除。

扩展路径 ~/Library/Application Support/com.raycast.macos/extensions。

创建扩展

键入 Create Extension 回车输入必要信息，便创建好了。

官方提供了多个模板，可以选择简单的 Show Detail 模板。

接着：

$ cd 
$ npm install
$ npm run dev

调试扩展

当我们执行 npm run dev（即 ray develop）时，它会自动安装扩展，并以开发模式启动 Raycast 应用。

为了方便调试，在 Preferences - Advanced - Developer Tools 下勾选几个选项：

Auto-reload on Save
Open Raycast in development mode
Keep window always visible during development

这对开发体验尤为重要。一是开发过程中文件修改可以自动重载，二是使 Raycast 始终显示，以避免切换其他应用时窗口关闭。

在开发模式下，使用 console.log() 可以在终端上显示打印信息。

如果没有正确使用 API、组件或快捷键冲突，此处也会有 Warning 显示。

发布扩展

如果想要将你的扩展发布到 Store 上，是需要官方审核的。

为避免审核不通过，你的扩展应满足 Prepare an Extension for Store 要求。

二选一：

Fork 官方仓库，将你的扩展放在仓库 extensions 目录下，提交 PR。
创建独立仓库，然后通过 ray publish 提交。

提交 PR 时，建议附上视频，或许可以更快地审核。我之前写了一个微信开发工具的扩展，由于他们没有小程序项目，流程上它们跑不通，可能会要求附上视频辅助审核，例如这个。

If you add a new extension or command, include a screencast (or screenshot for straightforward changes). A good screencast will make the review much faster - especially if your extension requires registration in other services.

提交 PR 之后，机器人 greptile-apps 可能会提一些 Review 意见，按需调整即可。

想要吐槽的是，审核很慢，看 commit 记录一天只处理几个。

开发

Raycast Extension 官方开发文档

命名规范

遵循 Apple Style Guide，详见这里。

示例：

扩展标题：尽量使用名词，而不是动词，比如 WeChat DevTool。
扩展描述：一句话准确、简洁地描述扩展程序的功能。
命令标题：动名词组合，尽可能具体地描述命令的作用，比如 Open Project。
命令副标题：为标题提供上下文信息。如果副标题几乎与命令标题重复，那么你可能不需要它。不指定时，该位置会显示扩展标题。
- 示例：命令标题 Search Package，命令副标题 NPM，
- 示例：命令标题 Search NPM Package，无命名副标题。
- 以上示例，对于使用者来说，都是非常清晰明确的。
命令描述：一句话准确、简洁地描述命令的功能。

本地化

很遗憾，目前 Raycast 扩展仅支持美式英文，不支持本地化语言，更多请看这里。

不上传到 Store 可忽略。

扩展信息

基本上都在 package.json 声明，列举一些基本字段:

{
  "name": "wechat-devtool", // 包名
  "title": "WeChat DevTool", // 扩展标题
  "description": "Quickly open WeChat Mini Program projects via official CLI.", // 扩展描述
  "icon": "icon.png", // 扩展图标 512 × 512 的 PNG 图片
  "author": "tofrankie", // Raycast 账户用户名
  "contributors": ["someone"], // 贡献者 Raycast 用户名
  "license": "MIT", // 协议
  "platforms": ["macOS", "Windows"], // 平台
  "categories": ["Developer Tools"], // 扩展分类
  "commands": [ // 命令列表
    {
      "name": "open-project", // 名称，跟入口文件同名
      "title": "Open Project", // 标题
      "description": "Open Mini Program projects via WeChat DevTool.", // 描述
      "mode": "view" // 模式
    },
    {
      "name": "configure-projects",
      "title": "Configure Projects",
      "description": "Configure Mini Program projects.",
      "mode": "view"
    }
  ],
  "preferences": [ // 扩展偏好设置
    {
      "name": "wechat-devtool-path", // 名称
      "type": "textfield", // 类型
      "title": "WeChat DevTool Path", // 标题
      "description": "The path to the WeChat DevTool executable.", // 描述
      "required": false // 是否必需
    }
  ],
  "keywords": [ // 关键词，可供 Store 搜索使用
    "Developer Tools",
    "WeChat",
    "WeChat DevTool",
    "WeChat Mini Program"
  ],
  // ...
}

目录结构：

.
├── assets                      # 静态资源目录
│   └── icon.png
├── CHANGELOG.md                # 变更日志
├── metadata                    # 扩展截图
│   ├── wechat-devtool-1.png
│   └── wechat-devtool-2.png
├── package.json                # 扩展信息等
├── README.md                   # About This Extension 会显示这个
├── src
│   ├── configure-projects.tsx  # 入口文件（跟 commands name 同名）
│   └── open-project.tsx        # 入口文件
└── tsconfig.json

一些注意点：

name：不能与 Store 已有扩展重复，可以在这里搜索一下。将用于发布后的扩展链接，比如： https://www.raycast.com/tofrankie/wechat-devtool。
icon：图标放在 /assets 目录。其他需要跟扩展一同打包的静态资源都要放在此目录下。
author：是 Raycast 用户名，不是 GitHub 用户名。
license：若要发布到 Store，只能是 MIT 协议。
categories：至少选择一个，可选分类看这里。
commands：
- mode：可选值 view、no-view、menu-bar。比如，打开链接等不需要界面的命令操作，可以选择 no-view。
preferences：偏好设置时可以同步的。
- required：当设为 true 时，用户设置后才能使用其他命令。

更多请看 Extension Properties 或 Extension Schemas。

命令入口文件

入口文件放在 /src 目录下，文件名要与 commands[].name 保持一致。

命令为 view 模式，可以用官方提供的组件来构建界面，详见 User Interface。

List 列表类型
Grid 网格类型
Detail 渲染 Markdown 内容、展示图片
Form 表单类型

虽然是用 React 编写的界面，但不能自由使用类似 div 或第三方组件库来构建复杂界面。

Action Panel

当我们使用 List、Detail、Form 等构建命令界面时，通常需要声明 Action Panel 来提供更多选项。


       {
          // do something...
        }}
      />
      }
      />
      
       {
          // do something...
        }}
      />
    
  }
/>

Raycast 提供了 Action.Open、 Action.Push、Action.CopyToClipboard、Action.OpenInBrowser 等一系列内置命令以轻松完成常用操作，更多请看这里。

对于危险操作，可以声明为 Action.Style.Destructive 以高亮显示，可以配合 confirmAlert 二次确认。

Action 快捷键

在 Action Panel 中，将第一、第二个操作称作 Primary Action 和 Secondary Action，它们会自动分配快捷键。

在 List、Grid、Detail 页面分别 Enter、⌘ + Enter
在 Form 页面分别是 ⌘ + Enter、⌘ + ⇧ + Enter

设定 Action 快捷键时，可以参考 Raycast 官方推荐的常用快捷键，以便使用各插件有一致的用户体验，更多请看这里。

Name	macOS	Windows
Copy	⌘ + ⇧ + C	`ctrl` + `shift` + C
CopyDeeplink	⌘ + ⇧ + C	`ctrl` + `shift` + C
CopyName	⌘ + ⇧ + .	`ctrl` + `alt` + C
CopyPath	⌘ + ⇧ + ,	`alt` + `shift` + C
Save	⌘ + S	`ctrl` + S
Duplicate	⌘ + D	`ctrl` + `shift` + S
Edit	⌘ + E	`ctrl` + E
MoveDown	⌘ + ⇧ + ↓	`ctrl` + `shift` + ↓
MoveUp	⌘ + ⇧ + ↑	`ctrl` + `shift` + ↑
New	⌘ + N	`ctrl` + N
Open	⌘ + O	`ctrl` + O
OpenWith	⌘ + ⇧ + O	`ctrl` + `shift` + O
Pin	⌘ + ⇧ + P	`ctrl` + .
Refresh	⌘ + R	`ctrl` + R
Remove	⌃ + X	`ctrl` + D
RemoveAll	⌃ + ⇧ + X	`ctrl` + `shift` + D
ToggleQuickLook	⌘ + Y	`ctrl` + Y

图标、图片

开发扩展免不了使用图片，Raycast 已经内置了很多图标可直接使用，详见这里。

还可以指定远程图片、本地文件等。

type ImageLike = URL | Asset | Icon | FileIcon | Image

type ImageSource = URL | Asset | Icon | { light: URL | Asset; dark: URL | Asset }

URL：如 HTTP 链接
Asset：assets 目录的图片文件
Icon：Raycast 内置的图标
FileIcon：该文件/目录在 Finder 所显示的图标
Image：类型如 ImageSource，还可以指定浅色、深色主题的图片，命名形式 icon.png 和 icon@dark.png。

图片着色：

import { Color, Icon, List } from "@raycast/api"

const tintedIcon = { source: Icon.RaycastLogoPos, tintColor: Color.Blue }

export default function Example() {
  return (
    
      
    
  )
}

本地 svg 图片同样也是可以着色的。

搜索

使用 List 构建的页面带有一个搜索栏用于筛选，来源是 List.Item 的 title 和 keywords 字段。

我发现，它没有根页面输入框那么智能，对筛选中文或拼音不太灵光的样子。

这种情况下，有两种解决方法：

自定义搜索规则：searchText + onSearchTextChange
丰富 keywords 内容

List Props

以后者为例，可以将项目名称、项目路径、项目名称拼音（若有中文）添加到 keywords 字段，参考 pinyin.ts。

图片展示

若要展示一张图片，似乎只有 Detail + Markdown 的方式了。

export default function ImageView({ url }: { url: string }) {
  // 可通过 example.png?raycast-width=250&raycast-height=250 指定宽高
  const markdown = `![](${url})`;
  return ;
}

表单

没什么好说的，文档很详尽了，请看这里。

Toast、Loading、Alert

提供的 API 有：

showToast：有 Success、Failure、Animated 三种，后者为 Loading 圈圈。如果 Raycast 窗口关闭了，会回退到 showHUD
showFailureToast：显示错误信息优先选择这个
showHUD：Raycast 窗口关闭时在屏幕下方显示一条信息
confirmAlert：用于危险操作的二次确认弹窗

环境信息

可以在 environment 获取：

import { environment } from "@raycast/api";

environment.raycastVersion // 1.102.5
environment.ownerOrAuthorName // tofrankie
environment.extensionName // wechat-devtool
environment.commandName // open-project
environment.commandMode // view
environment.assetsPath // /Users/frankie/.config/raycast/extensions/wechat-devtool/assets
environment.supportPath // /Users/frankie/Library/Application Support/com.raycast.macos/extensions/wechat-devtool
environment.isDevelopment // true
environment.appearance // light
environment.textSize // medium
environment.launchType // userInitiated

▼ Raycast for Windows 如下

import { environment } from "@raycast/api";

environment.raycastVersion // 0.34.0.0
environment.ownerOrAuthorName // tofrankie
environment.extensionName // wechat-devtool
environment.commandName // open-project
environment.commandMode // view
environment.assetsPath // C:\Users\frankie\.config\raycast-x\extensions\wechat-devtool\assets
environment.supportPath // C:\Users\frankie\AppData\Local\Raycast\extensions\wechat-devtool
environment.isDevelopment // true
environment.appearance // light
environment.textSize // medium
environment.launchType // userInitiated

扩展相关文件

assetsPath 扩展安装到 Raycast 的产物路径
supportPath 扩展相关文件，比如扩展记录一个配置文件，可以放在该目录下

需要注意的是，Raycast 不会同步 supportPath 目录的文件。

之前我想着把一些配置写入 supportPath 的文件，使其在 Raycast 中进行同步。但这是不行的，对扩展来说，只同步 preferences 的配置，而 preferences 又没办法动态更新。

Shell 环境

有时我们要在 Raycast 扩展中执行一些 Shell 命令。

下面是默认情况下的一些变量值。

$ echo $SHELL
/bin/zsh

$ echo $PATH
/usr/gnu/bin:/usr/local/bin:/bin:/usr/bin:.

$ printenv
SUPPORT_PATH=/Users/frankie/Library/Application Support/com.raycast.macos/extensions/wechat-devtool
TMPDIR=/var/folders/z4/nxcp1z415jgff4rwrrf8v3y00000gn/T
ASSETS_PATH=/Users/frankie/.config/raycast/extensions/wechat-devtool/assets
LC_ALL=en_CN-u-hc-h23-u-ca-gregory-u-nu-latn
__CF_USER_TEXT_ENCODING=0x1F5:0x19:0x34
EXTENSION_NAME=wechat-devtool
RAYCAST_VERSION=1.102.5
PWD=/
FAVICON_PROVIDER=legacy
NODE_PATH=/Applications/Raycast.app/Contents/Resources/RaycastNodeExtensions_RaycastNodeExtensions.bundle/Contents/Resources/api/node_modules
NODE_ENV=development
SHLVL=1
HOME=/Users/frankie
COMMAND_NAME=open-project
RAYCAST_BUNDLE_ID=com.raycast.macos
_=/usr/bin/printenv

通常我们会在 ~/.zshrc 中配置 export PATH="/opt/homebrew/bin:/opt/homebrew/sbin:$PATH" 以使用 Homebrew 安装的命令，但 Raycast 扩展执行 Shell 不会加载 ~/.zshrc 因此无法直接使用里面的命令。

可以这样处理（仅供参考）：

import { exec } from "child_process";
import { promisify } from "util";

const execAsync = promisify(exec);

function execCommand(command: string, cwd?: sting) {
  const env = getEnv();
  await execAsync(command, { cwd, env });
  // do something...
}

function getEnv() {
  return { ...process.env, PATH: joinHomebrewPath() };
}

function joinHomebrewPath() {
  return [process.env.PATH, "/usr/local/bin", "/opt/homebrew/bin", "/opt/homebrew/sbin"].filter(Boolean).join(":");
}

Change Log

开发完成后，需要在 CHANGELOG.md 补充一条变更记录。

遵循 Keep a Changelog 写法，要求如下：

格式必须是 ## [xxx] - {PR_MERGE_DATE}
[] 内的为本次变更的标题
{PR_MERGE_DATE} 为合并日期。因为从提交 PR 到审核通过可能要好几天，被合并时会自动替换

更多请看这里

# WeChat DevTool Changelog

## [New Version] - {PR_MERGE_DATE}

- Add something
- Improve something
- Fix something

## [First Release] - 2025-07-11

- **Open Project** - Open configured mini program project via WeChat DevTool CLI.
- **Graphical Configuration** - Complete graphical interface for dynamic project management.

截图

存放在 metadata 目录下，可提供 1 ~ 6 张截图。

Raycast 内置了截屏功能，在 Raycast Settings - Advanced - Window Capture 中设置快捷键（如 ⌥ + ⇧ + ⌘ + M）。

在 npm run dev 模式下启动扩展，按下快捷键，便可调出截屏窗口，并勾选上「Save to Metadata」，就会自动保存到扩展的 metadata 目录，更多请看这里。

Raycast 提供了一些高清壁纸，请看这里。

贡献

如果想对已发布的扩展作出贡献：

fork raycast/extensions
功能调整...
将你的 Raycast 用户名添加到 package.json 的 contributors 字段
提交 PR，等待审核发布

由于审核较慢，如果同时多个扩展做出贡献，可以创建不同的分支去处理，如 ext/extension-a、ext/extension-b。

毕业快乐 🎓

Sun, 22 Jun 2025 15:54:53 GMT

未完待续...

CSS 中 display、opacity 、visibility 的区别

Sat, 14 Jun 2025 06:12:51 GMT

用 CSS 使元素在视觉上不可见，我们通常会想到以下几种属性：

display: none
opacity: 0
visibility: hidden

尽管这些属性都能使元素不可见，但它们之间仍存在明显差异！

基本概念

display: none：元素完全从文档流中移除，不占据任何空间，不可见且不响应事件。
opacity: 0：元素在视觉上不可见，但仍占据原有空间，可以响应事件。
visibility: hidden：元素在视觉上不可见，占据原有空间，但不响应事件。

直观对比

是否占据布局空间

属性	占据空间	说明
`display: none`	❌	元素从文档流中完全移除
`opacity: 0`	✅	元素仍占据原有位置和尺寸
`visibility: hidden`	✅	元素仍占据原有位置和尺寸

是否响应事件

属性	元素本身	子元素	说明
`display: none`	❌	❌	元素及其后代均不响应事件
`opacity: 0`	✅	✅	无论是否可见，均可响应事件
`visibility: hidden`	❌	取决于子元素设置	子元素可设置为 `visible` 来响应事件

CodePen 示例（元素本身）

CodePen 示例（子元素）

是否支持过渡动画

属性	支持过渡动画	说明
`display`	❌	无法在 `none` 和 `block` 之间平滑过渡
`opacity`	✅	可以在 0 ~ 1 之间平滑过渡
`visibility`	❌	无法在 `visible` 和 `hidden` 之间平滑过渡

CodePen 示例

外设访问性

属性	屏幕阅读器	键盘导航	说明
`display: none`	❌	❌	元素完全从可访问性树中移除
`opacity: 0`	✅	✅	元素仍存在于可访问性树中
`visibility: hidden`	✅	✅	元素仍存在于可访问性树中

原因分析

为了理解为什么会有这些差异，我们需要了解浏览器的渲染流程。

页面生成过程

解析 HTML 构建 DOM Tree
解析 CSS 构建 CSSOM Tree
将 DOM 和 CSSOM 合并生成渲染树（Render Tree）
Layout 阶段，根据渲染树计算每个节点的位置和尺寸
Painting 阶段，将各个节点绘制到屏幕上

渲染树生成过程

从根节点开始，遍历每个可见节点。
1. 某些不可见节点（如 head、script、link、meta 等标签），它们会被忽略。
2. 一些使用 CSS 属性隐藏（display: none）的节点，也会被忽略。
对于每个可见节点，找到其匹配的 CSSOM 规则并应用。
最终形成带有内容及计算样式的可见节点。

注意，虽然 display: none 的元素不会进入渲染树，但仍然可以使用 JS 操作该元素。原因是 JS 操作的是 DOM 树，而不是渲染树。

关键差异：

display: none 的元素不会进入渲染树，因此不参与后续的布局和绘制
opacity: 0 和 visibility: hidden 的元素会进入渲染树，参与布局计算

Layout 和 Painting 阶段

Layout 阶段：计算元素的确切位置和大小，回流发生在此阶段。
Painting 阶段：将元素转换为屏幕像素，重绘发生在此阶段。

回流与重绘的关系

有回流一定伴随着重绘
发生重绘不一定伴随着回流

为什么会产生不同表现？

基于渲染流程：

display: none 产生回流的原因： 元素不进入渲染树，导致其他元素重新计算位置和尺寸
opacity: 0 和 visibility: hidden 不产生回流的原因： 元素仍占据原有空间，不影响其他元素的布局

继承性与子元素表现

CSS 继承性

属性	是否为继承属性	初始值	说明
display	❌	`inline` 或 `block`	取决于元素类型
opacity	❌	`1`	子元素默认不透明
visibility	✅	`visible`	子元素默认继承父元素的值

子元素可见性分析

当父元素设置不同属性时，子元素的表现：

情况一：子元素使用默认值

父元素设置	子元素默认值	子元素最终表现	结果
`display: none`	`display: block`	`display: block`	❌ 父元素不在渲染树中，均不可见
`opacity: 0`	`opacity: 1`	`opacity: 1`	❌ 受父元素影响，均不可见
`visibility: hidden`	`visibility: hidden`	`visibility: hidden`	❌ 受父元素影响，均不可见

情况二：子元素主动设置

父元素设置	子元素设置	结果
`display: none`	`display: block`	❌ 父元素不在渲染树中，均不可见
`opacity: 0`	`opacity: 1`	❌ 受父元素影响，均不可见
`visibility: hidden`	`visibility: visible`	✅ 不受父元素影响，父元素不可见，子元素可见

visibility 的特殊性：子元素可以设置为 visibility: visible 来摆脱父元素的影响。

子元素事件响应分析

父元素设置	子元素设置	子元素可见性	子元素事件响应	说明
`display: none`	任何值	❌	❌	父元素不在渲染树中
`opacity: 0`	任何值	❌	✅	仅视觉上不可见
`visibility: hidden`	`visibility: visible`	✅	✅	子元素摆脱父元素影响

实际应用建议

何时使用 display: none

适用场景：

需要完全移除元素，不占用任何空间
元素及其后代都不需要响应事件
不需要考虑可访问性

注意事项：

会产生回流，影响性能
无法通过过渡动画实现平滑效果

何时使用 opacity: 0

适用场景：

需要平滑的淡入淡出效果
元素需要响应事件（如悬停效果）
需要保持布局稳定

注意事项：

元素仍占据空间
子元素也会不可见

何时使用 visibility: hidden

适用场景：

需要保持布局稳定
子元素需要可见或响应事件
需要良好的可访问性支持

注意事项：

元素仍占据空间
不支持过渡动画
子元素可以通过设置 visibility: visible 来摆脱影响

选择指南总结

需求	推荐属性	原因
完全隐藏元素，不占空间	`display: none`	元素不进入渲染树，不参与布局计算
平滑的淡入淡出效果	`opacity: 0`	支持过渡动画
保持布局，子元素可见	`visibility: hidden`	子元素可设置为 `visible`
隐藏但保持事件响应	`opacity: 0`	元素仍存在于 DOM 中
性能优先，避免回流	`opacity: 0` 或 `visibility: hidden`	不产生回流

总结

对比之下：

display: none 适合完全移除元素的场景，但会产生回流
opacity: 0 适合需要平滑动画和事件响应的场景
visibility: hidden 适合需要保持布局和灵活控制子元素的场景

生日快乐

Fri, 13 Jun 2025 15:58:30 GMT

听说，小媛同学今年有三个生日。

今天是第一个，生日快乐呀~ 🎂

另外，发现了一个款式非常非常好看的蛋糕（橙路蛋糕）👇

【冰岛小屋】世人皆孤岛，凭爱意丰饶

07.06

今天是跟小媛同学过的第二个生日，还有弟弟、妹妹一起，逛逛吃吃...

还有凯琪小朋友很帅哦

Folo Verification

Fri, 06 Jun 2025 16:57:49 GMT

使用 RSSHub 可以为 GitHub Issues 快速创建订阅源。

/github/issue/:user/:repo/:state?/:labels?

你可以创建一个包含以下认证信息的 Issue（右键认证处可复制），用于证明你是此订阅源的所有者。

This message is used to verify that this feed (feedId:154574662305076224) belongs to me (userId:150343881723676672). Join me in enjoying the next generation information browser https://follow.is.

微信小程序开发记录

Wed, 14 May 2025 03:45:14 GMT

[!NOTE] 众所周知，微信的文档写得很烂...

关于跳转路径

老是忘记路径是否需要前导 /，作个记录吧。😑

page/index/index
/page/index/index

场景：

小程序内的页面跳转：wx.navigateTo 这类 API 的 url 参数「必须」要有前导 /。
小程序之间跳转：wx.navigateToMiniProgram 的 path 参数前导 / 是「可选」的。
分享/转发：onShareAppMessage 的 path 参数「必须」要有前导 /。
订阅消息：订阅消息的 page 参数前导 / 是「可选」的（亲测均可正常跳转）。

结论：建议都带上前导 /（可以少用点脑子）。

相关链接：

页面底部 margin-bottom 失效

这个现象开发过小程序的同学应该都遇到过，它仅发生在 iOS 下，Android 和开发工具是符合预期的。

page {
  margin-bottom: 30rpx;
}

在 iOS 下，实际表现是底部下外边距“相当于”未设置，会被吞掉。

解决方法很多，也很简单。比如，页面底部整体设置一个下内边距，然后再内层通过 view 等设置下外边距撑开。

page {
  padding-bottom: 1px;
}

原因分析（⚠️ 源自 ChatGPT，不一定准确）

记五月：汕头 - 潮州两日

Wed, 07 May 2025 01:19:40 GMT

提前攻略

假期不可避免的，一是人从众，二是车票难抢 😶

由于平时没有长假期，于是决定体验一番人挤人吧。

清明过后，就开始打算五一计划了，奈何时间过得太快太快了...

来到假期前两周，好像广东或周边都显示五一要下雨 🌧

粗略扫了一遍贵州、福建、两湖，由于高铁 🚄 买不着，飞机 ✈️ 偏贵，且要往返，加之天气也没特别好，就放弃它们了。

又看了一周，一番纠结下基本锁定了：

珠海：伶仃岛、情人路、日月贝、海滩、长隆。
潮汕：一个字“吃”，还有南澳岛。

它们离广州不算太远，玩 2 ~ 3 天足矣。这样便可以在广州休息一天，同时避开假期第一天高峰。恰好 5 月 2 日高铁也还有很多选择，兜底还有大巴、打车等选择，回程也是。

出发之前

假期第一天，去吃了顿乳鸽（百利鸽王聚龙店），这家店是小媛同学强烈推荐。吃完，我的评价是：

没有想象好吃，不如大鸽饭（体育西店）。盐焗乳鸽略咸~

吃完离开还落下了黄皮冰茶（好喝），可惜，浪费了 😭

一顿收拾，准备了一些东西：

证件类：身份证、学生证
洗护类：毛巾、牙刷、防晒、洁面、护发、护肤等化妆物品 💅
衣物类：那些好看衣服，换洗袜子 🧦 等
药品类：感冒、发烧、肠胃、创可贴 🩹 等基础药品，以防万一
其他：伞、充电宝、少量现金 💵 等

对了，我不是学生了，如果你出行，可以带上哦~

行程安排：

Day1 汕头
Day2 潮州
Day3 回广

出发了...

Day1

次日，早早起来赶高铁：新塘站 → 汕头站，时长 3h 17min，略长~

出发前的攻略路线是：汕头小公园 → 汕头旅社 → 西堤公园 → 广场轮渡。然而，我们到达汕头已经是下午 1 点了，我们并没有按这个路线去逛，来汕头主要任务是“吃”，也就没有太大关系了，也深知这些景点都是千篇一律。

我们提前订了靠近汕头站的一个公寓，环境很一般...

办理入住，放下行李，马上赶往汕头小公园，肚子也有点小饿了...

接下来，就是吃吃吃...

我是极其挑吃的，小媛同学则相反，除了茼蒿都可以爱吃。在这方面总是你迁就我，太委屈你了。

没有特别说非要吃哪家网红店、必打卡之类的，就沿途遇到爱吃、想试的就尝尝。

黄皮柠檬茶（名字忘了）：没有广州茶救星球的黄皮冰茶好喝，基本上都是柠檬味...
碗翅：小媛爱吃，我嘛喝了一口汤就吃不下去了...
绿豆饼：中规中矩
冰糖草莓：🍓 颗粒大，划算~
腐乳鸡翅：小媛同学强烈推荐，就是可能吃多了容易上火
反沙芋头：我只能说“反沙 xxx”都不建议买...
绿豆莲子：噢，这糖水好喝
三姐妹肠粉：排长龙，份量足，价格便宜（相比广州来说，不清楚当地物价）。我的评价是：不太好吃。
甘草水果：满街都是，水果刺客，不好吃
發發牛牛肉火锅：价格实惠、好吃，推荐~（主要跟潮州阿彬牛肉火锅对比得出的结论）

Day2

第三天，高铁：汕头站 → 潮汕站，时长 23min。

到达潮州，高铁站就有古城专线大巴到达古城，在南桥市场站下车。

下车点到住宿点，有几百米距离，因为有点热，加上行李箱提手断了，感觉好远好远。

在美团上订了「意达雅居」，就在潮州二字打卡点对面，距离广济桥很近，约 3 ~ 5min 的距离。

由于五一假期的原因，各大平台，住宿基本翻倍，但参考汕头站的住宿条件，这个真的很好很好了，房间很干净，隔音不错很安静。古城商铺会打烊，所以不用太担心会吵。

我们到达时，由于房间还没准备好，寄存行李后，我们出去逛了逛，在成川茶店点了杯春江水暖（没啥特别，也不算好喝），买了一顶帽子。就近在「阿彬火锅店」吃了一顿牛肉火锅，饭后吃感是贵且没那么好吃（对比汕头的發發牛牛肉火锅）。

办理入住...

潮州的景点较为集中：

▲ 图片源自小红书

广济桥

准备前往广济桥，确实很近，但古城到处都是人从众...

在古城城楼一顿拍，然后过马路去广济桥，没想到要排队上桥（人也很多），在湖边看过去，好像没有很大的欲望上桥，就草草离开了。

主要是天气不太好。

潮州西湖

后来，叫了个摩托车前往湖州西湖（可以讲个价，司机很多，选择很多，最后找了个 18R 的成交）。

司机大叔人挺好，路上还不忘给我们做介绍，把五一假期一天拉了多少客都和盘托出，哈哈。

到达后，在湖里划船 🚣🏻，划 30min，手动挡（脚踏版本，哈哈），船不太好控制方向，有点老旧吧。

未完待续...

Jira 使用记录

Wed, 30 Apr 2025 08:58:47 GMT

推荐一个用于搜索 Jira issues 的 Raycast 扩展：Atlassian Data Center

过滤器（筛选器）是 Jira 核心功能之一，利用它可以实现很多的需求。

开始之前

作一些简单的了解。

JQL：Jira Query Language

JQL Functions

一些基本函数，更多请看这里。

函数	说明
currentUser()	当前登录用户
startOfWeek()	本周开始
endOfWeek()	本周结束
startOfMonth()	本月开始
endOfMonth()	本月结束
...

JQL Keywords

利用 AND、OR、NOT 等将多个条件连接在一起，实现更多复杂的查询，更多请看这里。

查询

利用函数可以快速做一些筛选。

本周工作：

worklogAuthor = currentUser() AND worklogDate >= startOfWeek() AND worklogDate < endOfWeek()

本月工作：

worklogAuthor = currentUser() AND worklogDate >= startOfMonth() AND worklogDate < endOfMonth()

指定时间范围：

worklogAuthor = currentUser() AND worklogDate >= "2025/04/21" AND worklogDate <= "2025/04/25"

周报/月报

请注意，函数是动态的。

如果将上述查询条件直接应用在汇报里面是有问题的。

worklogAuthor = currentUser() 谁登录了就是谁的。
startOfWeek() 是动态的，如果这周访问了上周的周报，会显示这周的内容。

你想一下，如果领导访问你的周报，但他看到了自己本周的任务，惊呆了！😲

我是这样做的（仅供参考）：

指定时间范围
跟我有关的
- 有记录工时的任务
- 指派给我，但未记录工时。比如像 WON'T FIX 的任务

组合查询如下：

(worklogAuthor = "frankie" AND worklogDate >= "2025/04/21" AND worklogDate <= "2025/04/25")
OR
(assignee = "frankie" AND worklogAuthor is EMPTY AND created >= "2025/04/21" AND created <= "2025/04/25")

也可以在 .zshrc 中放入这个小脚本自动生成。

function genReportJQL() {
  local username="your_jira_username" # TODO: 你的用户名
  local mode=${1:-weekly} # 默认 weekly

  local start end

  if [[ "$mode" == "monthly" ]]; then
    start=$(date '+%Y/%m/01')
    end=$(date -v+1m -v1d -v-1d '+%Y/%m/%d')
  else
    local dow=$(date +%u)
    start=$(date -v -"$(($dow - 1))"d '+%Y/%m/%d')
    end=$(date -v +"$((5 - $dow))"d '+%Y/%m/%d')
  fi

  local jql="(worklogAuthor = \"$username\" AND worklogDate >= \"$start\" AND worklogDate <= \"$end\") OR (assignee = \"$username\" AND worklogAuthor is EMPTY AND created >= \"$start\" AND created <= \"$end\")"

  printf "%s" "$jql" | pbcopy
  echo "$jql"
  echo "✅ Copied to clipboard"
}

参考链接

与食物的有限交集

Tue, 08 Apr 2025 15:47:08 GMT

📍 坐标广州

记录一些吃过的店～

对吃的没有特别感兴趣，属于「很挑也不挑」的那种类型 🤷‍♀️

纯粹以个人口味做个备忘 📝

踩过的坑、留恋的味道、新奇的组合，一起记下来 ✅

有时候同一个品牌，不同分店的口味也能天差地别，真的无语了 🙃

🌇 天河区

🛍 美林天地

💡 新奇榜

豆浆汤圆 🫘🍡
没想到豆浆跟甜汤圆这么配！意外好喝，推荐尝试 🎉
黄皮冰茶 🍋🧊
茶救星球家的黄皮系列，味道很惊艳，记得选「咸」的版本！

🥢 好吃榜

鱼粉王 🐟🍜
已歇业了，真的太可惜 😢
当每天纠结吃什么的时候，它是个不错的选择。
探鱼 🔥🐠
偶尔想吃烤鱼的时候，探鱼是个稳定选项，味道在线！
九毛九 🥩🍚
西北菜里比较喜欢的一家，酱骨架做得不错，米饭也好吃。
龙井湖 🥢🏞
家常味道蛮对我口味，环境也挺舒服的，适合安静吃饭。

🙅‍♀️ 不好吃榜

兰州 xxx 馆 🍜🚫
忘了名字，总之吃完没有任何回头欲望。
克茗冰室 🧊🥪
吃的是一种「为啥会开在这儿」的困惑感 😬
师烤 🍢💸
味道普通、价格跟探鱼差不多。

📦 外卖榜

金牌筒骨粉 🦴🍲
肉给得实在，汤浓味正，冬天吃特别舒服 ❄️
金牌烧鹅（东圃雅怡店） 🍗🍚
包装讲究，鹅肉不柴，配饭一绝，回购过几次 ✅
益禾堂（珠村店） 🍹🧋
茶味够，甜度好调，属于茶饮里不会出错的牌子。

🏙 越秀区

🧭 北京路区域

达扬原味炖品 🍲🐔
点了炖竹丝鸡（招牌），汤味浓郁，天冷来一碗很疗愈 🧣
百花甜品店 🍧🌸
名气挺大，但实话说感觉一般，可能是我口味不太对 🧐

那些纠结过的英文词汇

Tue, 18 Feb 2025 09:43:35 GMT

实时

参赛选手：

realtime
real-time
real time

更新/升级

参赛选手：

update
upgrade

清空

参赛选手：

clean
clear

性别

参赛选手：

gender - 指社会建构的、由女孩、女人、男孩、男人以及性别多元化人群的角色、行为、表达和身份。它影响着人们如何看待自己和他人，如何行动和互动，以及社会中权力和资源的分配。性别认同并非局限于二元对立（女孩/女人，男孩/男人），也并非一成不变；它是一个连续体，会随着时间而变化。个人和群体对性别的理解、体验和表达方式存在着相当大的多样性，这体现在他们所承担的角色、对他们的期望、与他人的关系以及性别在社会中制度化的复杂方式上。
sex - 指人类和动物的一组生物学属性。它主要与生理特征相关，包括染色体、基因表达、激素水平和功能以及生殖/性解剖结构。性别通常分为女性和男性，但构成性别的生物学属性及其表达方式存在差异。

What is gender? What is sex?

黑/白名单

参赛选手：

blacklist vs blocklist
whitelist vs allowlist

因为众所周知的原因，Git 的 master/main 也是同理。

状态

参赛选手：

state
status

分类/策略

category
strategy

关于进制

Sun, 22 Dec 2024 13:54:48 GMT

简介

进制（进位制）是一种记数方式，可以用有限的“数字符号”表示所有的数值。

进位表示在一个位值的数字达到基数后，将其重置为零并使高一位的数字加一。

比如，十进制只有 0 ~ 9 这十个数字符号，表示第十一个数（从 0 起），就要进一位，变成 10。其他进制同理。

进制数转换

以 35 为例：

二进制：100011
八进制：43
十进制：35
十六进制：23

十进制 → 二进制、八进制、十六进制

整数部分和小数部分的转换规则不太一样。

简单来说：整数部分取余逆序，小数部分乘法取整正序。

以 35.125 为例。

整数部分转二进制：

35 / 2：商 17，余数 1
17 / 2：商 8，余数 1
8 / 2：商 4，余数 0
4 / 2：商 2，余数 0
2 / 2：商 1，余数 0
1 / 2：商 0，余数 1

不断除以 2，直至商为 0。从最后一个余数读起（逆序），便是其二进制数 100011。其他进制同理，除以 8、16。

小数部分转二进制：

0.125 * 2：积 0.25，取整数部分 0，剩 0.25
0.25 * 2：积 0.5，取整数部分 0，剩 0.5
0.5 * 2：积 1，取整数部分 1，剩 0

不断乘以 2，取出结果的整数部分，再余下的小数部分重复计算，直到积的小数部分为 0。从第一个积读起（正序）取其整数部分，便是其二进制数 001。其他进制同理，乘以 8、16。

最后，将整数和小数合起来，十进制数 35.125 对应的二进制数为 100011.001。

小数部分的误差：

有时，不断乘以 2 得到的积的小数部分永远不为 0，但精度要求，因此也会有舍入的操作。

以 0.8 为例：

0.8 * 2：积 1.6，取整数部分 1，剩 0.6
0.6 * 2：积 1.2，取整数部分 1，剩 0.2
0.2 * 2：积 0.4，取整数部分 0，剩 0.4
0.4 * 2：积 0.8，取整数部分 0，剩 0.8
0.8 * 2：积 1.6，取整数部分 1，剩 0.6
无限循环...

对应的二进制为 1100 1100 1100 1100...

二进制、八进制、十六进制 → 十进制

35 用十进制的表示法如下：

35 = 3 * 10^1 + 5 * 10^0

以从左到右的书写习惯为例，左侧为高位，右侧为低位。

其中 3、5 为位值，10^1、10^0 为权值。

从低位起（从右往左），其权值分别为 10^0、10^1、...、10^n-1（10 表示为对应进制，n 表示位数）。

将每位的位值乘以权值，再求和就是对应的十进制值。

二进制 100011

35 = 1 * 2^5 + 0 * 2^4 + 0 * 2^3 + 0 * 2^2 + 1 * 2^1 + 1 * 2^0

八进制 43

35 = 4 * 8^1 + 3 * 8^0

十六进制 23

35 = 2 * 16^1 + 3 * 16^0

二进制、八进制、十六进制互转

一位八进制用三位二进制表示，一位十六进制用四位二进制表示。位数不够，高位补零。

二进制 100011
八进制 100 011 → 43
十六进制 0010 0011 → 23

十六进制转八进制，可以先转为二进制，再转为八进制。

位运算

未完待续...

uni-app 开发记录

Tue, 10 Dec 2024 01:52:31 GMT

有些东西隔一段时间不用就容易忘记，在此作下记录。

自定义组件选项配置

诸如 styleIsolation、virtualHost 等自定义组件配置，声明方式如下：

▼ Composition API

若是 Vue 3.3+，可使用 defineOptions()。

若是 Vue 3.3 以下，需要独立的

▼ Options API

判断是否安装微信

利用 HTML5 Plus API：

function checkWechatInstalled() {
  return plus.runtime.isApplicationExist({pname: 'com.tencent.mm', action: 'weixin://'})
}

Android 平台通过 pname 属性（包名）进行查询。
iOS 平台通过 action 属性（Scheme）进行查询。iOS9 以后需要添加白名单才可查询，在 manifest.json 配置 urlschemewhitelist: ["weixin"]（参考）。其他 App 同理。

相关链接：

App 热更新

我们要知道，应用平台对 App 提供热更新服务其实是持排斥态度的，送审期间最好不要弹出热更新弹窗。

前端部分：

通过 plus.runtime.getProperty() 获取当前 wgt 包的版本名称 versionName 和版本号 versionCode
请求服务端检查是有更新的 wgt 包
通过 uni.downloadFile() 下载 wgt 包
通过 plus.runtime.install() 安装 wgt 包
通过 plus.runtime.restart() 重启

完整流程参考示例

打包部分：

打包新版 wgt 时要更新 versionName 和 versionCode，且 versionCode 要比上一次大，否则安装完新包后退出，冷启动应用可能会重新加载旧包。
- versionName 应用版本名称，如 1.2.3
- versionCode 应用版本号，必须是整数，取值范围 1~2147483647，升级时必须高于上一次设置的值。

相关链接：

获取 getApp().globalData

在原生小程序 + uni-app 小程序混合的场景下，当二者需要通信的时候，需要借助 getApp() 获取全局唯一的应用实例，在实例上注册相关属性或方法（比如 globalData）。

在 uni-app 中获取 globalData 的方式：

相关链接：

各端差异

主要讨论微信小程序端与 App、H5 等非小程序端的差异。

后代选择器

比如，在父组件查询子组件内的某个元素。

在微信小程序端有两种做法：

拿到子组件实例，然后再父组件内使用 uni.createSelectorQuery.in(subComponentInstance).select('.descendant') 获取元素。
使用 >>>（跨自定义组件的后代选择器），在父元素内使用 uni.createSelectorQuery().select('.ancestor >>> .descendant') 获取其子（子子...）组件内的元素。

在 App 端，编译后的 HTML 结构跟小程序不一样，小程序带有一个 ShadowRoot 节点隔离，而 App 端则没有，因此 App 端使用 uni.createSelectorQuery().select('.ancestor .descendant') 可以直接查询到后代的元素。注意 App 端不支持 >>> 语法，它是小程序特有的。

布尔 dataset

在 HTML 中有一种布尔类型的属性。

如果要将某个属性变为 false，只能 removeAttribute('attr')。对于 setAttribute('attr', undefined) 等均是无效的，内部会有 toString() 的处理，因为 HTML 的属性值只能是字符串。data-* 同理。

但使用 uniapp 时，不同端表现不一样。

对于 dataset.attr 微信小程序是布尔值 true，而 App 端则是字符串 ''，后者表现是符合 HTML 规范的。猜测是微信小程序内部做了 dataset.attr !== undefined 的处理。如果要用于条件判断，要注意各端值是不一样的。

未完待续...

常用 CSS Media Query 记录

Sun, 24 Nov 2024 16:56:17 GMT

@media 用于基于一个或多个媒体查询的结果来应用样式表中的一部分。
@supports 指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。

深色模式

@media (prefers-color-scheme: dark) {
  /* some rules */
}

prefers-color-scheme

Safari

Safari for Mac 和 Safari for Mobile（包括 iOS 端的 Chrome 等使用 Webkit 内核的浏览器）。

@supports (-webkit-hyphens: none) {
  /* some rules */
}

-webkit-hyphens

Safari for Mobile

移动端 Safari 浏览器（包括 iOS 端的 Chrome 等使用 Webkit 内核的浏览器），但不包括 Safari for Mac。

@supports (-webkit-touch-callout: none) {
  /* some rules */
}

-webkit-touch-callout

小程序图标变色

Tue, 19 Nov 2024 09:11:27 GMT

图标变色是一个常见需求，比如根据用户心情自动切换皮肤。🐶

本文以微信小程序为例。

使用 svg 标签

第一反应是用 svg + currentColor。比如：

.box {
  color: #0066cc;
}

.box svg {
  fill: currentColor;
}

CodePen

动态修改父元素的颜色就能变色。

然，微信小程序不支持标签。

使用 image 标签 + base64

小程序 image 标签是支持 svg 格式图片的（一些限制）。

注意，将 fill="currentColor" 的 svg 图片放到 image 标签，该图片是无法读取其本身或父级颜色的，因此呈现会默认的黑色。

要做一些转换处理：

下载 svg 图片
读取 svg 图片文件源码
替换 svg fill 属性为指定颜色
将替换后的 svg 文件转化为 base64

function genColorfulSvg(url, color) {
  const localFilePath = await downloadSvgFile(url)
  const svgSourceStr = await readSvgFile(localFilePath)
  const colorfulSvgSourceStr = replaceSvgFillColor(svgSourceStr, color)
  const colorfulSvgBase64 = genSvgBase64(colorfulSvgSourceStr)
  return colorfulSvgBase64
}

// 下载图片
async function downloadSvgFile(url) {
  return new Promise((resolve, reject) => {
    wx.downloadFile({
      url,
      success: res => {
        if (res.statusCode === 200) return resolve(res.tempFilePath)
        reject(new Error('download file fail'))
      },
      fail: err => reject(err),
    })
  })
}

// 读取 svg 文件
async function readSvgFile(localFilePath) {
  return new Promise((resolve, reject) => {
    const fs = wx.getFileSystemManager()
    fs.readFile({
      filePath: localFilePath,
      encoding: 'utf-8',
      position: 0,
      success: res => {
        const sourceFile = res.data
        resolve(sourceFile)
      },
      fail: err => reject(err),
    })
  })
}

// 替换 fill 属性
function replaceSvgFillColor(svgSourceStr, newFillColor) {
  // 匹配 fill="..." 中的非 none 值（按需调整）
  return svgSourceStr.replace(/fill="(?!none)[^"]*"/g, `fill="${newFillColor}"`)
}

// 生成 base64
function genSvgBase64(svgSourceStr) {
  return `data:image/svg+xml;base64,${base64Encode(svgSourceStr)}`
}

示例中 base64Encode() 来自掘金社区（原文），找其他也行。

将以上封装成一个自定义组件，比如：

可以在 Component 的 lifetimes.attached() 时机执行，为了避免重复下载转换，可以用 Map 将 base64 存起来。

（具体实现就不写了）

这个方案的缺点是要额外的读取、替换、转换，性能不太好。

使用 image 标签 + CSS Filter

这种方案使用 CSS Filter 函数 drop-shadow，它通常用于生成阴影效果。

常规阴影是位于图片下方的，借助 transform 进行一些位移操作，思路如下：

隐藏原图：
1. 将图片水平方向位移足够大的距离
2. 将图片父级设置为 overflow: hidden
让阴影显示在原图本来的位置
1. 将 filter: drop-shadow 水平相反方向位移同样的距离

过程中遇到了一些坑，先以 Web 为例：

.icon {
  width: 100rpx;
  height: 100rpx;
  filter: drop-shadow(200rpx 0 0 #1f883d);
  transform: translateX(-200rpx);
}

▲ 黄色为原图，绿色为投影

接着，添加一个父级元素，并设为 overflow: hidden。

但是 drop-shadow 有一个表现特性：

在 Chrome 浏览器下，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其 drop-shadow 是不可见的；实体部分哪怕有 1px 可见，则 drop-shadow 完全可见。(源自张鑫旭大佬的博客)

亲测 Safari 18.1 也有相同表现，不显示阴影，而 Firefox 132 是符合预期的。

文章里提到一个解决方案是用透明边框，使元素总在屏幕可视区域内。

调整下代码：

+ 
    
+

+ .icon-box {
+   width: 100rpx;
+   height: 100rpx;
+   overflow: hidden;
+ }

  .icon {
    width: 100rpx;
    height: 100rpx;
    filter: drop-shadow(200rpx 0 0 #1f883d);
    transform: translateX(-200rpx);
+   border-right: 1000px solid transparent;
  }

这样的话，在 Chrome 下是符合预期了（黄色隐藏，绿色显示），然而 Safari 下阴影并没有显示出来。

看起来有点类似这个《深究 Safari 下 border-radius & overflow 不生效的问题》，给 icon 添加 transform: translateZ(0) 或 will-change: transform 等解决，但 Chrome 又不能加，可用 CSS Media Query 区分（小程序亲测有用）。

如果使用 wx.getSystemInfo().platform 来区分设备，要注意开发工具、PC 端、Android 端与 Chrome 表现一致，不能加 will-change: transform 等处理，否则不显示。

比如：

@supports (-webkit-hyphens: none) {
  /* Safari for macOS or iOS browsers */
  .icon {
    will-change: transform;
  }
}

测试结果，Chrome、Safari、Firefox 和 iOS 浏览器都符合预期了。

⚠️ 注意，本打算给 border-right 给一个足够大的边框宽度，以兼容各种尺寸的图标，但发现过大时在 Safari 下不会呈现阴影，暂未发现有啥规律。但通常图标不会很大，如小程序端可以设置一屏大小 750rpx 的边框宽度。

小程序组件：

image-class 用于指定图片宽高等
color 颜色
src 图片链接（注意，相对路径是相对于 colorful-image 组件所在的目录）

Component({
  externalClasses: ['image-class'],

  properties: {
    // Required
    src: {
      type: String,
      value: '',
    },

    color: {
      type: String,
      value: 'transparent',
    },
  },
})

{
  "component": true,
  "usingComponents": {}
}

.inner-image-box {
  overflow: hidden;
}

.inner-image {
  box-sizing: content-box;
  display: block;
  width: 100%;
  height: 100%;
  border-right: 100000px solid transparent;
  transform: translateX(-760rpx);
}

@supports (-webkit-hyphens: none) {
  .inner-image {
    will-change: transform;
  }
}

小程序代码片段

注意：Skyline 渲染模式暂不支持。

小程序迷惑行为大赏

Tue, 19 Nov 2024 07:15:12 GMT

你开发小程序有遇到过哪些奇葩表现？

自定义组件默认是块级元素还是行内元素？

2024.11.19

起因，给两个相邻的自定义组件设置 margin 值，发现没有 margin collapsing 效果。

由于自定义组件一直表现为「换行」特性，让我以为默认是块级元素，然而开发工具 Computed 显示为 display: inline。😮

有网友发现，它可能是“随机”的，有 block、有 inline，也有 flex 的。🙄

GitHub Blogger + GitHub Action

Mon, 12 Aug 2024 15:47:51 GMT

前言

去年二月，我将简书所有文章搬到 GitHub 上，终于不用被审核了！

README 为主页
Issues 为文章列表

📢 这是我的博客，你也可以试试用 Github Blogger 写一个属于自己的。

入门速看

备份

数据在手才最让人安心的。

如果你是用 Github Blogger 来管理文章（Issue），文章、配图会自动存档到 archives、images 目录。

如果你未使用 GitHub Blogger 或在此之前有一些历史 Issue，可以在本地使用脚本调用 GitHub API 拉取所有 issue，然后重新推到远程仓库。

可参考 fetch-all-issues.ts

此前试过用 hub-mirror-action 进行同步到 Gitee，但遇到些问题没解决。后来发现官方就有提供，参考《Gitee 仓库镜像管理》。

访问统计

在仓库 Insights - Traffic 处可以看到近两周的数据。由于 GitHub 只提供近 14 天的数据，可以创建定时任务 Workflow 将数据保存到仓库，用于统计总量。

可参考 update-traffic-data.ts

如果想将访问量展示到 README，可以用这个数据生成一个 SVG 图片，并引用该图片即可。

可参考 update-traffic-views.ts

我还看过另一个方案 Hints，当在 README 引入其图片后，每访问 README 一次（也就是 Get 一次图片），访问量 +1。缺点也明显，只有访问 README 才会被统计，访问 issue 等流量无法统计，也无法去重。

RSS

使用 GitHub Issue 作为博客，可以使用以下两种方案来创建 RSS：

RSSHub
使用 GitHub Action 生成 RSS

如果使用 Folo 订阅，都可以参考这篇文章认领你的 RSS。

如果是第二种方式，可参考 generate-rss.ts，并在 README 中引入 Badge，比如：

[![RSS](https://img.shields.io/badge/rss-subscribe-orange?logo=rss&style=flat)](https://raw.githubusercontent.com/tofrankie/blog/refs/heads/main/rss.xml)

文章统计

可以做些什么呢？

比如：

字数统计
每年文章数
近期热门文章
近期创建/更新的文章

字数统计我暂时没做，思路很简单，获取所有 issues，统计 issue.body 渲染成 Markdown 格式后的字数，打算参考 ByteMd。

每年文章数，遍历所有 issues，根据 issue.created_at 判断年份，可得出数据。我个人的话，更喜欢添加一个年份 Label，并利用 GitHub Issue 筛选功能，以便于快速查看每年所写文章，而且我有一些往年在简书写的文章，也是从去年从迁到 GitHub 上，所以创建时间也对不上。

近期热门文章，其实跟上一章节 Traffic 是相关的，它可以获取近两周排名前 10 的内容，但不单指 issue 内容，还有其他的。只能根据返回的 path 过滤得到对应的 issue。

近期创建/更新的文章，可以设置一个 Workflow，每当 issue 被创建或编辑时触发，然后也是通过 List repository issues 接口获取近 10 篇，加个排序 sort = updated 即可。可参考我的。

配置 issue 模板

对于博客型仓库，每个 Issue 表示一篇文章。

通常不希望他人创建 Issue，可以对此作出一些限制，创建 .github/ISSUE_TEMPLATE/config.yml 文件，比如：

blank_issues_enabled: true
contact_links:
  - name: ❗️ 请勿新开 Issue
    url: https://github.com/tofrankie/blog/discussions/342
    about: 阅读文章时，如有任何想法、建议，欢迎底下评论（或在 Discussions 发起讨论），而不是新开 Issue。

当他人 New Issue 时，会提示：

如果想要彻底关掉，可将 blank_issues_enabled 设为 false，更多请看配置模板选择器。

通过两个例子再探 Event Loop

Sun, 11 Aug 2024 08:42:16 GMT

提问

▼ 请问点击哪个按钮会导致页面卡死？


  蒹葭
  蒹葭苍苍，白露为霜。所谓伊人，在水一方。溯洄从之，道阻且长。溯游从之，宛在水中央。
  蒹葭萋萋，白露未晞。所谓伊人，在水之湄。溯洄从之，道阻且跻。溯游从之，宛在水中坻。
  蒹葭采采，白露未已。所谓伊人，在水之涘。溯洄从之，道阻且右。溯游从之，宛在水中沚。

▼ 请问点击按钮红色 div 会闪吗？

题目比较简单，相信大家都有答案了。

我们继续往下。

开始之前

对于 Event Loop，相信大家都有这样一张图：

接下来，将会更深入地了解 Event Loop，真的如上图所示吗？

没错，我也是从以下链接受益，并结合自己的理解，将其写下来而已。

为什么 JavaScript 设计成单线程？

最初 JavaScript 是为浏览器而设计的，旨在增强可交互性。

单线程，意味着同一时间只能做一件事情。

设想一下，有两个线程同时作用于某个元素，一个是修改样式，另一个是删除元素，如何响应呢？引入锁机制？

当时网页不如现在复杂，选择单线程是明智、合理、够用的，操作变得有序可控，且大大降低复杂度。

随着时代的发展，计算越来越复杂，单线程有点捉襟见肘，后来 HTML5 提供了 Web Worker 等 API 可主动创建新的线程运行一些复杂的运算。

什么是 Event Loop?

规范是这样定义的：

To coordinate events, user interaction, scripts, rendering, networking, and so forth. 协调事件、用户交互、脚本、渲染、网络等。

个人理解：它是让各种任务执行变得有序可控的一种机制。

用伪代码表示：

while (true) {
  task = taskQueue.pop()
  execute(task)
}

当然，实际没有这么简单，只是从简单说起，请继续往下。

它是无限循环的，7 × 24h 随时待命（比 996 还惨 😭），直至浏览器 Tab 被关闭。

只要有任务，它就会不停地从队列中取出任务，执行任务。

在浏览器中，Event Loop 有 Window Event Loop、Worker Event Loop、Worklet Event Loop 三种，第一种是本文主要讨论的对象。当然 Node.js 也有 Event Loop 机制，但不太一样。

什么是 Task？

规范是这样定义的：

Formally, a task is a struct which has: steps, a source, a document, a script evaluation environment settings object set. 形式上，任务是一种 struct 结构体，包含 Steps、Source、Document、Script evaluation environment settings object set。

简单来说，任务就是一个包含 steps 等属性的对象，里面记录了任务的来源、所属 Document 对象、上下文等，以供后续调度。

常见的任务有：

与用户发生交互而产生的所有事件回调（比如单击、文本选择、页面滚动、键盘输入等）
setTimeout、setInterval
执行 script 块
I/O 操作

什么是 Task Queue？

常规意义的队列

队列（Queue）是一种基本的数据结构，遵循先进先出（FIFO, First In First Out）的原则。在队列中，最先插入的元素最先被移除，类似于排队等候的场景。

入队（Enqueue）：将一个元素添加到队列的尾部。
出队（Dequeue）：从队列的头部移除一个元素，并返回该元素。

Event Loop 中的任务队列

规范中提到：

An event loop has one or more task queues. 事件循环有一个或多个任务队列。

Task queues are sets, not queues, because the event loop processing model grabs the first runnable task from the chosen queue, instead of dequeuing the first task.' 任务队列是集合，而不是队列，因为事件循环处理模型从所选队列中获取第一个可运行的任务，而不是使第一个任务出队。

The microtask queue is not a task queue. 微任务队列不是任务队列。

前面提到，task 是有 source 的，比如来自鼠标点击等。排队时，同 source 的 task 会被放入与该 source 相关的 task queue 里。假设鼠标事件的任务要优于其他任务，Event Loop 就可以在对应 source 的 task queue 中取出任务优先执行。规范里 Event Loop 执行步骤并没有明确定义“出队”的规则，它取决于浏览器的实现。

Let taskQueue be one such task queue, chosen in an implementation-defined manner.

现在 Event Loop 用伪代码表示是这样的：

while (true) {
  queue = getNextQueue()
  task = queue.getFirstRunnableTask()
  execute(task)
}

😲 在此之前，我的认知是：一个 Event Loop 里有且只有一个任务队列，且它是一个常规意义的队列。虽说如此，如果只想了解 Event Loop 主要执行顺序，不深入浏览器究竟维护了多少个任务队列、浏览器如何决定下一任务，按原来的理解也问题不大。

什么时候重绘页面？

总不能只执行任务，不更新 DOM 吧。

本质上，网页就是给人看的，与人交互的，所以用户体验非常重要。假设任务队列有源源不断的任务产生，如果 Event Loop 只会一直循环执行队列里的任务，而不去更新页面，用户体验是非常糟糕的。

请问浏览器什么时候会更新页面？

浏览器是非常聪明的，没必要的工作它不会做。以 60Hz 屏幕为例，每秒刷新 60 次，约 16.7ms 刷新一次。只要满足该刷新频率的，显示就算是流畅的，因为再快的刷新频率对肉眼来说也不会有明显的感知。也就是说每 16.7ms 可获得一次渲染机会（rendering opportunity），这样浏览器就知道要更新 DOM 了。

假设一个任务耗时 3 ~ 5ms，远没到 16.7ms，对于浏览器来说，此时更新 DOM 是没有必要的，因此也不会获得一个渲染机会。相反地，如果一个任务执行超过 16.7ms，呈现出来的效果有可能是卡顿的。

注意，规范中不强制要求使用任何特定模型来选择渲染机会。但例如，如果浏览器尝试实现 60Hz 刷新率，则渲染机会最多每 60 秒出现一次（约 16.7ms）。如果浏览器发现 navigable 无法维持此速率，则该 navigable 可能会下降到更可持续的每秒 30 个渲染机会，而不是偶尔丢帧。类似地，如果 navigable 不可见，浏览器可能会决定将该页面降低到每秒 4 个渲染机会，甚至更少。

React 16 可中断的调度机制，就是为了可以执行优先级更高的任务（比如更新 DOM），以解决某些场景下页面卡顿的问题。

因此，一个任务执行完，如果有渲染机会先更新 DOM，接着才执行下一个任务。

现在 Event Loop 用伪代码表示是这样的：

while (true) {
  queue = getNextQueue()
  task = queue.getFirstRunnableTask()
  execute(task)
  
  if (hasRendringOpportunity()) repaint()
}

什么是 Microtask？

还没完，还没完...

规范中提到：

Each event loop has a microtask queue, which is a queue of microtasks, initially empty.

A microtask is a colloquial way of referring to a task that was created via the queue a microtask algorithm.

The microtask queue is not a task queue.

好，我们重新捋一下：

一个 Event Loop 有一个或多个 task queue。
一个 Event Loop 有且仅有一个 microtask queue。
task 是一个由特定属性的对象（规范中称为 struct）。
microtask 只是一种通俗的说法，它是通过特定算法创建的 task。
task queue 是一组 task 的集合，并不是队列。
microtask 是常规意义的队列，遵循先进先出。
microtask queue 不是 task queue，前者是队列，后者是集合。

为便于区分理解，本文暂且将以下规范术语口语化（但注意，这种说法不一定准确）。

task：（宏）任务
task queue：（宏）任务队列
microtask：微任务
microtask queue：微任务队列

有哪些微任务？

在 JavaScript 里会产生微任务的大概有：

queueMicrotask（Window 或 Web Worker）
Promise 回调
MutationObserver 回调
Object.observe（Deprecated）

什么时候执行微任务？

从规范（Processing model）可知，只要 Event Loop 存在，就必须不断执行以下步骤：

从（宏）任务队列取出一个 task
执行该 task
执行微任务检查点（microtask checkpoint）
1. 如果检查点标志为真（初始值为 false），则返回（跳出微任务执行）。
2. 将检查点标志设为 true
3. 如果当前 Event Loop 里的微任务队列不为空，将一直循环直至微队列为空：
  1. 在微任务队列里取出的第一个微任务
  2. 执行微任务
4. 将检查点标志设为 false
重复上述步骤

以上为简化后的步骤。

至此，文章开头的提问之一就有答案。由于它在执行微任务的过程中不停地产生新的微任务，因此将会在 3.iii 陷入死循环，自然页面就“卡死”了。

跟 task 的一些区别

请注意，无论是（宏）任务，还是微任务，执行过程中都可能产生“新”的（宏）任务或微任务。它们的执行顺序是有区别的：

（宏）任务执行时产生的新的（宏）任务，在下一轮或以后执行。
（宏）任务执行时产生的新的微任务，在当前（宏）任务执行完之后、更新 DOM 或下一轮（宏）任务之前执行。
微任务执行时产生的新的（宏）任务，在下一轮或以后执行。
微任务执行时产生的新的微任务，马上放入微任务队列，直到所有微任务队列执行完，才到更新 DOM 或执行下一轮（宏）任务。

现在 Event Loop 用伪代码表示是这样的：

while (true) {
  queue = getNextQueue()
  task = queue.getFirstRunnableTask()
  execute(task)
  
  while (microtaskQueue.hasTask()) {
    microtask = microtaskQueue.pop()
    excute(microtask)
  }
  
  if (hasRendringOpportunity()) repaint()
}

什么是 requestAnimationFrame？

噢，还没完，还有一个 requestAnimationFrame，其回调函数会在页面重绘之前调用。

当浏览器检测到有渲染机会，会更新 DOM，具体执行顺序如下：

执行 requestAnimationFrame 回调
合成：计算样式，将 DOM Tree 和 CSSOM Tree 合成一个 Render Tree（Attachment）
重排：以确定每个节点所占空间、所在位置等（Layout）
重绘：以设置颜色等（Paint）

比较坑的是，Edge 和 Safari 将 requestAnimationFrame 回调放到 Paint 后面执行，这是非标准做法。也就是说，如果回调中涉及样式，用户要在下一帧才能看到变化。

Safari 是否已修复，待验证。

除了有 task queue（集合）、microtask queue（队列），还有一个 animation frame callbacks，它是一个 ordered map（映射）。

将 animation frame callbacks 简单理解为“队列”也不是不行，因为根据 run the animation frame callbacks 可以看到，也是从第一个开始遍历执行。

同样地，执行 callbacks 的过程中产生新的 callback，它们会放到下一次 Loop 执行，这点跟微任务是不一样的。

现在 Event Loop 用伪代码表示是这样的：

while (true) {
  queue = getNextQueue()
  task = queue.getFirstRunnableTask()
  execute(task)
  
  while (microtaskQueue.hasTask()) {
    microtask = microtaskQueue.pop()
    excute(microtask)
  }
  
  if (hasRendringOpportunity()) {
    callbacks = animationFrameCallbacks.spliceAll()
    for (callback in callbacks) {
      execute(callback)
    }
    
    repaint()
  }
}

Node.js Event Loop 是怎样的呢？

相比之下，Node.js 里没有以下这些：

没有
答案：whileLoop、promiseLoop 会导致页面卡死，timerLoop 则不会。

whileLoop 分析：点击按钮，产生一个 task，进入 task queue 排队。轮到它的时候，执行 whileLoop() 方法，里面是一个无线循环的 while 语句，因此这个 task 会一直执行下去，且致使后面的 task、更新 DOM 等永远无法执行。页面就卡死了。

timerLoop 分析：点击按钮，产生一个 task，进入 task queue 排队。轮到它的时候，执行 timerLoop() 方法，又产生一个 task 并放入 task queue。执行完之后，如果有 rendering opportunity 会先更新 DOM，完了执行进行下一轮。尽管 timerLoop 里不停地产生新的 task，但用户仍然通过文本选择、页面滚动等产生其他 task 进入到 task queue 进行排队。因此页面是不会呈现卡死状态的。

promiseLoop 分析：点击按钮，产生一个 task，进入 task queue 排队。轮到它的时候，执行 promiseLoop() 方法，其中 Promise.resolve() 产生一个 microtask 并放入 microtask queue。当 task 执行完，接着从 microtask queue 里取出 microtask 执行，即执行 then(promiseLoop)，它有又产生新的 microtask，所以 microtask queue 就一直有任务存在，因此会陷入死循环，致使后面的 task、更新 DOM 等永远无法执行。

它们会闪烁吗？

你有没有担心过这些代码会“闪”一下？
```
document.body.appendChild(element)
element.style.display = 'none'
```
当然，实际中更多是先设置样式再 appendChild，但效果是一样的。

请问点击按钮红色块会闪烁吗？
CodePen

答案：都不会。

分析：上述点击事件产生一个 task（事件回调），只有执行完 task 里面的代码，才会执行后面的微任务或更新 DOM。也就是说渲染之前，实际只有最后一行的样式设置是起作用的，不管中间设了多少遍，浏览器只关心最后的样式如何。

它们的执行顺序是？

以下示例，一个按钮绑定了两个 click 事件：
现触发 click 事件的方式有两种：一个是通过鼠标点击触发，另一个是通过 btn.click() 触发。这两种方式的执行顺序一样吗？

通过鼠标点击的结果是：
```
listener 1
microtask 1
listener 2
microtask 2
```
通过 btn.click() 的结果是：
```
listener 1
listener 2
microtask 1
microtask 2
```
原因分析：通过与用户交互而触发的事件，其监听器是异步调用的，而通过 btn.click() 触发，会同步派发事件，并以合适的顺序同步地调用监听器。

对于“鼠标”点击：由于 btn 注册了两个 click 监听器，鼠标点击一次，产生两个 task 进入 task queue，先后执行，因此得到前面的结果。

对于 btn.click() 模拟点击：当执行到 btn.click() 时，按顺序同步执行两个监听器。

The dispatchEvent() method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().
1. 执行到第一个监听器 Promise.resolve() 时产生一个 microtask 入队到 microtask queue。
2. 接着打印 listener 1。
3. 注意，此时调用栈里还没执行完，所以接着并不是立马执行 microtask queue 里的任务。而是接着执行第二个监听器。同样地，它又产生一个 microtask 入队到 microtask queue。
4. 接着打印 listener 2。
5. 此时调用栈空了，接着从 microtask queue 取出任务，逐个执行，因此先后打印 microtask 1、microtask 2。
可以通过 event.isTrusted 来区分两种触发方式，用户与浏览器交互而产生的事件 isTrusted 为 true，使用 JavaScript 来模拟点击等事件触发的 isTrusted 为 false。

参考链接

Photoshop 操作记录

Sat, 10 Aug 2024 04:43:33 GMT

好长时间没用 Photoshop 了，有些操作忘得很快，在此记录一下。

将 PNG 非透明部分填充为前景色

步骤：

打开 PNG 图片
新建图层
将新建的图层填充为前景色（⌥ + ⌫）
选择新健的图层创建剪贴蒙版（⌥ + ⌘ + G）
选择所有图层，合并可见图层（⇧ + ⌘ + E）
保存。

快捷键：填充前景色为 ⌥ + ⌫，填充背景色为 ⌘ + ⌫。

批处理：

打开「窗口 - 动作 - 创建新动作」，将上述步骤录一遍。
打开「文件 - 自动 - 批处理」，选择上一步的动作和要处理的图片目录，点击确定即可。

老是记不住 isEmpty

Wed, 07 Aug 2024 08:48:22 GMT

背景

经常需要判断一个值是否为“空”，包括空对象、空数组、空字符串、null、undefined 等。

用到较多的库是 licia 或 lodash，它们都提供了一个 isEmpty() 方法，但有一点区别。

纠结 isEmpty 的主要原因是：没完全区分好什么值算作“空”？

有时候，不确定某个值算不算空，为避免项目出错可能要跑 Playground 确认。

比如 isEmpty(1) 结果是 true 还是 false？

起初我以为 isEmpty(0) 结果为 false， isEmpty(1) 结果为 true。出现这种直觉性的错误，是因为在 JavaScript 中 1 属于真值（Truth Value），0 属于虚值（Falsy Value），所以理所当然了...

然，实际测试结果：对于 Number 类型的值，isEmpty 均返回 true。

于是就有了这篇文章，彻底扫清纠结。

哪些值算作“空”？

在 licia 和 lodash 中，以下值都视为空：

空对象：本身可枚举的 key length 为 0 的对象（不含原型上的）
空数组：长度为 0 的数组（类数组同理）
字符串：长度为 0 的字符串
数值：均视为空
布尔值：均视为空
undefined
null

对于 Map/Set 类型，licia 和 lodash 会有差异：

在 licia 中不支持这两种类型，无论 size 是多少，均视为空。
在 lodash 中，当 size 为 0 的 Map/Set 对象视为空。

其实像数组、字符串这些类型，对“空”的定义是毫无疑问的，长度为 0 就是空。主要是数值、布尔值这类，刚开始不清楚。

示例

虚值：

// licia.isEmpty() 与 lodash.isEmpty() 结果一致

isEmpty(null) // true
isEmpty(undefined) // true
isEmpty(false) // true
isEmpty('') // true
isEmpty(0) // true
isEmpty(0n) // true
isEmpty(NaN) // true

部分真值：

// licia.isEmpty() 与 lodash.isEmpty() 结果一致

isEmpty(1) // true
isEmpty(1n) // true
isEmpty(true) // true

对于 Number、Boolean、BigInt 类型的原始值，isEmpty() 均返回 true。

Map/Set：

const licia = require('licia')
const lodash = require('lodash')

const map = new Map([[1, 'one']])
const set = new Set([1])

licia.isEmpty(map) // true
licia.isEmpty(set) // true

lodash.isEmpty(map) // false
lodash.isEmpty(set) // false

源码

// https://github.com/liriliri/licia/blob/master/src/isEmpty.js

_('isArrLike isArr isStr isArgs keys');

exports = function(val) {
    if (val == null) return true;

    if (isArrLike(val) && (isArr(val) || isStr(val) || isArgs(val))) {
        return val.length === 0;
    }

    return keys(val).length === 0;
};

// https://github.com/liriliri/licia/blob/master/src/keys.js

_('has');

if (Object.keys && !LICIA_TEST) {
    exports = Object.keys;
} else {
    exports = function(obj) {
        const ret = [];

        for (const key in obj) {
            if (has(obj, key)) ret.push(key);
        }

        return ret;
    };
}

// https://github.com/liriliri/licia/blob/master/src/has.js

const hasOwnProp = Object.prototype.hasOwnProperty;

exports = function(obj, key) {
    return hasOwnProp.call(obj, key);
};

非常简单：

判断 null、undefined
判断数组、类数组
使用 in 操作符，获取其自身可枚举的属性，再判断 key length

对于原始值，in 操作会隐式转换为包装对象 Object(val)，由于它本身没有可枚举属性，所以 Number、Boolean、BigInt 等类型的值 isEmpty() 会返回 true。

lodash 差不多，其支持的类型更丰富一下，比如 ArrayBuffer、TypedArray，但项目一般很少判断这类的，不多说了。https://github.com/lodash/lodash/blob/4.17.15/lodash.js#L11479

iCloud 云盘同步卡住的解决方法

Sat, 03 Aug 2024 08:56:44 GMT

在一定程度上来说，Apple 生态确实做得很不错。

但是 iCloud Drive 就是一坨屎，经常性同步卡死...

比如这样，它可以卡到天荒地老... :anger:

一搜，全是这类问题：

先到 Apple 官网（戳我），确认 iCloud 云盘服务有没崩。

然后官方客服可能会让你关掉 iCloud 云盘同步，重新打开，但如果是 iCloud 云盘重度用户，文件容量特别多的话，你得想想重新下载的痛苦，而且 iCloud 下载的速度还...

[!NOTE] 以下提供一些「可能」有效的方法，实际全凭天意。

杀掉进程

终端下先后执行以下命令，然后重新打开 Finder。

$ killall bird
$ killall cloudd

bird 是什么？

$ man bird
BIRD(8)                                       System Manager's Manual                                       BIRD(8)

NAME
     bird – Documents in the Cloud

SYNOPSIS
     bird

DESCRIPTION
     bird is one of the system daemons backing the Documents in the Cloud feature.

     There are no configuration options to bird, and users should not run bird manually.

SEE ALSO
     brctl(1)

Mac OS X                                              22/04/14

调整进程优先级

执行 ps aux | grep bird，会看到类似的输出。其中 4137 为进程 ID（PID）。

$ ps aux | grep bird
frankie           4137   0.0  0.1 33705140  10160   ??  S     4:01下午   0:06.68 /System/Library/PrivateFrameworks/CloudDocsDaemon.framework/Versions/A/Support/bird

执行 ps -fl -C 查看某进程优先级。其中 NI 是指 nice 值，表示一个进程的优先级。

$ ps -fl -C 4137
  UID   PID  PPID   C STIME   TTY           TIME CMD                     F PRI NI       SZ    RSS WCHAN     S             ADDR
  501  4137     1   0  4:01下午 ??         0:06.68 /System/Library/  1004004  31  0 33704616  10244 -      S                   0

执行 sudo renice -n -10 -p 调整某个进程优先级。

$ sudo renice -n -10 -p 4137

负数优先级更高，据说 -20 最高，但不建议，这里使用 -10（参考这里）。

根据以上自定义两个 alias，可添加到 .bash_profile 或 .zshrc 里。

alias renice_bird_process='BIRDPID=$(ps aux | grep -i bird | awk '\''{print $2}'\'' | head -1); sudo renice -n -10 -p $BIRDPID'

alias show_bird_process_priority='BIRDPID=$(ps aux | grep -i bird | grep -v grep | awk '\''{print $2}'\'' | head -1); ps -o pid,ni -p $BIRDPID'

删除 CloudDocs（慎重）

这个我未亲测，仅供参考。

$ killall bird

$ rm -rf ~/Library/Application\ Support/CloudDocs

删掉 CloudDocs 目录下所有文件，相当于把 iCloud 云盘的数据库清空，然后它会自动重启 iCloud 任务，重新上传或下载。

记七月：福州平潭 & 林奕匡

Sat, 27 Jul 2024 05:27:16 GMT

时间过得飞快，马上七月就要结束了。

上个月想着，没那么忙了就出去玩几天，无奈六月都在下雨，就推到了七月。

恰好家里那几位少爷也放暑假（好吧，家里只有我没寒暑假了，实名羡慕）。

接着，简单做下攻略，订好民宿、往返车票，就出发了...

平潭

🗺️ 福州平潭

▲ 北港村附近的海边小路

▲ 将军山

▲ 龙王头沙滩（我哥和我的小弟们）

出发前的准备

防晒：物理防晒 + 化学防晒，比如防晒衣、防晒手套、防晒霜、防晒喷雾、冰袖、帽子...
学生证：平潭收费景区不多，如果有还是带上。
身份证：这个不用说了。
天气：平潭一定是晴天才好看。

千万千万千万不要小看平潭的紫外线，可以去小红书搜一下，看到那些晒出个围脖、手套、袜子的，还有一年还没完全白回来的帖子，笑死。

骑小电驴的不要忽略手，特意提到「防晒手套」。

不怕晒伤、晒到蜕皮、晒黑的，可忽略。

行程

福州一天
平潭两天

13 日，高铁广州南 → 福州南。

14 日，下午高铁福州南 → 平潭。

15 日，早晨日出 + 平潭北线。

16 日，平潭南线。

17 日，自然醒，下午的高铁回广州。

13 日到福州南已是 15:30，在福州呆了一晚。逛了下三坊七巷，那啥鱼燕真不喜欢吃，几位少爷们走一下就喊累，一行几人对吃的不大感冒，下次一定不带你们去什么步行街、美食街了。

福州 → 平潭，除了高铁，也可以在闽运易行小程序上面提前订票（找约巴），听说挺实惠的。

夏天日出时间 05:00 左右。15 日早上天气不好，被一朵云挡住了，看了个寂寞。

住宿

福州：福州南站附近，说实话很差。
平潭：距离龙王头约 2km，三室一厅，可住 6 人，约 260 一晚，住宿条件很好。

平潭民宿是玫瑰小区扣子客栈（步梯七楼），给老板打个广告，虽然可能没什么用，哈哈。

如果要走南北两条线的，推荐住平潭县城，龙王头附近。

租车

电动车：优点随停随拍，不用担心停车问题，缺点晒。
小车：跟电动车相反，特别是周末、节假日堵车停车问题尤为明显。

根据行程安排选择，比如一天走完南北线，那肯定选小车。

如果时间充足，个人更推荐电动车。比如，北线很多海边小路，风景远比大路好，这是小车不能带来的快乐。

租车提前订，美团、小红书、抖音都可以，找一个下榻附近的，开车去哪都方便。

电动车，以 24h 为例，价格 30 ~ 60 不等。挑个车况好的，有没电免费救援服务的，我们租了两天，跑满南北线完全没问题，还嘎嘎快，但要注意安全，全岛都是电动车。

[!NOTE] 关于傍晚骑小电驴返回县城，导航请选择「驾车线路」，避免走偏僻、漆黑的道路。

[!IMPORTANT] 开车一定要遵守交通规则，安全第一，生命至上。无论什么时候，在哪，开什么车，宁可等一分钟，也不抢一秒。

[!CAUTION] 返程那天刷到一个电动车事故的视频，一辆电动车撞上了环卫车，好像其中一个女生不幸......所以一定一定一定要注意安全。还听说最近平潭严抓电动车，我猜跟这起事故多少有点关系。

美食

个人非常非常非常挑食，无论去到哪，对（当地特色）美食基本上提不起兴趣，就不说了。

景点

▲ 源自小红书

大致有这些，我没做什么攻略，了解路线之后，骑上小电驴就出发，也没有严格按景点走。

北线：

仙人井，非常一般吧，门票 42 一人，学生票半票。
镜沙没去，长江澳全是人，感觉一点也不好，不知道日落会怎样。
北部湾，那天下午快 6 点才赶到，天气不好，完全感受不到最美风景，有点失望。
北线，反而是海边小路风景才好看，特别是北港村 ~ 最美环岛路这一带的。

南线：

猴研岛：门票 38 一人，赶上大中午了特别晒，没啥感觉。
海坛古城：没去，听说就一个纯商业街。
坛南湾：有三个沙滩：崎沙澳、田美澳、远当澳，我们只去了一个，非常非常非常普通。沙滩上的懒人沙发都是收费的。
将军山：门票 20 一人，反而觉得南线最值得去的地方，风景看起来最美，但景区部分未开放，在维修？
象鼻湾：去到才发现没开，那个游客大厅都长草，荒废一段时间了，我的天。

总的来说，还算满意。

就是少爷们骑车太快了，就像为了赶路，像镜沙其实是错过的，虽然我网上看了并不觉得好看。那「懒惰三人组」更是...差不多是换个地方玩手机的感觉，一逮到机会就看手机，服了。

放个「暑假带娃有多辛苦」的视频链接，虽然少爷们不是娃了，但那感觉是一样的。

跟扫兴的人出去玩，真的很扫兴。

林奕匡

平潭之行结束之后，少爷们回家过暑假，社畜的我继续上班...

7 月 20 日周六，去了 #林奕匡高山低谷十周年演唱会（广州站），这是我为数不多想去看的演唱会之一，好正（粤语音），下次还去...

高山低谷
难得一遇
有人共鸣
查无此字
一世同学
...

或许只得你共鸣，可歌可泣的感性...

可惜，没有唱「献丑」，等了一晚，下次一定 @林奕匡。

The end.

解决 macOS 照片不同步问题

Sat, 20 Jul 2024 05:12:48 GMT

有时，macOS 下「照片 App」不会同步最新的图片，原因不详。试过重启 App、电脑没用，又不想登出 iCloud 帐号。

现提供另外一个方法：

按下 ⌘ + ⌥ 键，然后点击打开照片 App，会出现如下修复提示，点击修复，等待完成即可。

试图丢掉鼠标

Thu, 20 Jun 2024 15:15:11 GMT

指法练习：TypingClud Vim 游戏：VIM Adventures

基础

三种模式

普通模式：执行命令
插入模式：编辑文本
视图模式：高亮文本等

i    # 进入插入模式
v    # 进入视图模式
esc  # 从其他模式返回普通模式

光标移动

基础：

h    # 左
j    # 下
k    # 上
l    # 右

未完待续...

References

开发一个简单的 Chrome Extension

Sun, 16 Jun 2024 06:32:09 GMT

在此作一个记录，第一次开发 Chrome Extension 的同学也可以看看。

背景

我现在使用 GitHub Blogger 作为个人博客工具，在翻阅文章时，有个体验痛点：无法快速定位到某个章节。

比如，这篇文章涉及的二级、三级标题多达 25+，篇幅也很长。

目前 GitHub 只有仓库 Markdown 文件支持目录能力，但是 Issue 还不支持，所以开发一个 Chrome 扩展程序来解决。

github-issue-toc

支持 h1 ~ h6 标题。
支持滚动高亮。
支持粘性布局，滚动时始终在可视区域内。
样式风格与 GitHub 契合，支持深色模式。

开始之前

项目没必要一步一步去搭，选择社区流行方案即可，我选 Plasmo，开发体验还不错。目录样式参考了 Github、ByteMD。

可粗略看看，了解一些基础概念：

第一篇作者总结得挺好，但里面一些东西在 Manifest V3 发生了变化，可以看看第二篇文章。

基础概念

manifest.json（清单文件）
Actions（动作）
Content Scripts（内容脚本）
Extension Service Worker（原 V2 的 Background Scripts）

清单文件是每个扩展程序必须的，它会列出扩展程序的结构和行为等信息。

Actions 是点击扩展程序图标时发生的动作，可以是打开一个弹出式窗口、打开侧边栏面板、右键菜单等。

内容脚本主要用于修改网页内容。

Extension Service Worker 是运行在浏览器里的后台脚本。

它们之间可以相互传递消息，详见消息传递。

开发

创建项目：

$ pnpm create plasmo --with-src --entry=contents/inline,popup,background

似乎 --entry 指定入口目录有点问题，我只用到弹出式窗口、内容脚本以及 Service Worker，但生成的模板包括了 newtab，需手动删掉。

Content Scripts

前面提到，内容脚本是用来修改网页内容的，但它跟网页的 JavaScript 环境是隔离的。

导出配置

主要用于定义脚本作用的网页地址、执行时机等。

// tos.tsx
import type { PlasmoCSConfig } from 'plasmo'

export const config: PlasmoCSConfig = {
  matches: ['https://github.com/*'],
  run_at: 'document_end'
}

其中配置项详见 Inject with static declarations。

如果你的脚本要修改网页的 window 对象，要指定 world 配置项为 'MAIN'。

指定插入锚点

也就是我们的 UI 脚本要挂载到网页的哪个地方。

// tos.tsx
import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from 'plasmo'

export const config: PlasmoCSConfig = {
  matches: ['https://github.com/*'],
  run_at: 'document_end'
}

// 🆕
export const getInlineAnchor: PlasmoGetInlineAnchor = async () => ({
  element: document.querySelector('#partial-discussion-sidebar'),
  insertPosition: 'afterend'
})

export default function Toc() {
  return Toc 组件
}

如果需要挂载多个，导出 getInlineAnchorList，详见 Inline Anchor。

引入样式文件

假设引入 toc.tsx 同级目录下的 toc.css 文件。

/* toc.css */
.toc {
  color: #0969da;
}

// tos.tsx
import type { PlasmoCSConfig, PlasmoGetStyle } from 'plasmo'
import styleText from 'data-text:./toc.css'

// 🆕
export const config: PlasmoCSConfig = {
  matches: ['https://github.com/*'],
  css: ['./toc.css'],
  run_at: 'document_end'
}

export const getStyle: PlasmoGetStyle = () => {
  const style = document.createElement('style')
  style.textContent = styleText
  return style
}

export default function Toc() {
  return Toc 组件
}

导出一个 getStyle 方法，读取文件的内容，然后往网页插入一个

效果可看下 👉 CodeSandbox。

帧动画回调函数的执行次数取决于「屏幕刷新率」，以 60Hz（表示每秒钟图像刷新的次数）的屏幕来说，约 16.7ms 会刷新一次，也就是说 requestAnimationFrame() 的回调函数约 16.7ms 就会执行一次。

而且，在多数浏览器中，当 requestAnimationFrame() 处于后台标签页或者被隐藏的元素里，它会被暂停调用以提升性能和电池寿命。

未完待续...

HTML 表单元素的自动填充与聚焦样式

Sun, 26 Feb 2023 13:01:10 GMT

今天来看一下与表单元素相关的两个东西：

outline：绘制轮廓样式
autocomplete：表单自动填充功能

outline

在绝大多数浏览器中，如果一个元素是可交互的，它一般都有一个可见的聚焦提示。比如 Chrome 浏览器下当聚焦时，默认会有一个蓝色的边框。

从用户交互体验上讲，浏览器这种提示是好的，比如，一个良好的按钮交互，应该要包括被按下那一刻的样式。

但可能默认样式与你的页面风格不相符，然后就需要先移除默认样式，然后再自定义。

比如有一个元素聚焦时，在不添加任何样式情况下，Chrome 浏览器表现如下图：

想要移除这种默认聚焦样式，非常地简单，只要添加以下样式即可：

input {
  outline: none;
}

将 outline 设置为 0 或 none 会移除浏览器的默认聚焦样式。

outline 是 outline-style、outline-width、outline-color 的简写，用于绘制元素轮廓的样式。

它跟 boder 很类似，区别在于 outline 不占据空间，绘制于元素内容周围。

对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式的默认值是 none。但元素是例外，其样式默认值由浏览器决定。

语法如下：

/* 样式 */
outline: solid;

/* 颜色 | 样式 */
outline: #f66 dashed;

/* 样式 | 宽度 */
outline: inset thick;

/* 颜色 | 样式 | 宽度 */
outline: green solid 3px;

在实际场景中，我还真只见过移除默认样式，还没有遇到主动设置样式的。因此取值不做详细介绍，更多请看MDN。

autocomplete

我们可以观察到一个现象，当我们聚焦某个输入框的时，浏览器会有一个历史输入的提示，比如：

Chrome 浏览器可能会出现如图类似「建议值」提示：

这是什么回事呢？原来是浏览器会记录我们的文本输入历史，当的 name 或 id 属性匹配的时候，就会有此提示（前提是启用了 autocomplete 属性）。上一个示例，由于并未设置 name 或 id 属性，因此是没有提示的。

你可以试下改为 name="email"，那么文本提示就可能会出现你常输入的邮箱地址。

autocomplete 是什么？

MDN 描述如下：

HTML autocomplete 属性可用于以文本或数字值作为输入的元素， </code></a> 元素，<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/select"><code><select></code></a> 元素，和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form"><code><form></code></a> 元素。 <code>autocomplete</code> 允许 web 开发人员指定，如果有任何权限 <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/User_agent">user agent</a> 必须提供填写表单字段值的自动帮助，并为浏览器提供关于字段中所期望的信息类型的指导。</p> </blockquote> <p>一般来说，<code><input></code>、<code><select></code>、<code><textarea></code> 这些元素具备以下条件才会有自动填充功能：</p> <ol> <li>具有 <code>name</code> 或 <code>id</code> 属性。</li> <li>成为 <code><form> </code> 的后代。</li> <li>具有 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/submit">submit</a> 按钮的表单。</li> </ol> <p>自动填充的建议值来源通常取决于浏览器。一般是来自用户输入的过去值，但它们也可能来自预先配置的值。</p> <p>自动填充功能通常是默认启用的，如果想要关闭，可以为整个表单设置或为表单中某个输入元素单独设置：</p> <pre><code class="language-html"><form id="form1" autocomplete="off">  <input name="nickname" type="text" placeholder="请输入昵称" /> </form> </code></pre> <pre><code class="language-html"><form id="form2">  <input name="nickname" type="text" placeholder="请输入昵称" autocomplete="off" /> </form> </code></pre> <pre><code class="language-html"><form id="form3" autocomplete="off">  <input name="nickname" type="text" placeholder="请输入昵称" autocomplete="on" /> </form> </code></pre> <p>设置 <code>autocomplete="off"</code> 会有两种效果：</p> <ul> <li>这会告诉浏览器，不要为了以后在类似表单上自动填充而保存用户输入的数据。<strong>但浏览器不一定遵守</strong>。</li> <li>这会阻止浏览器缓存会话历史记录中的数据。若表单数据缓存于会话历史记录，用户提交表单后，再点击返回按钮返回之前的表单页面，则会显示用户之前输入的数据。</li> </ul> <p>如果即使在 <code>autocomplete</code> 已经设置为 <code>off</code> 时，浏览器仍继续提供输入建议，那么你需要更改输入元素的 <code>name</code> 属性。</p> <h3>其他</h3> <p>许多现代浏览器，不支持在登录字段中设置 <code>autocomplete="off"</code>（即使设置了也会有提示），因为浏览器内置了密码管理，它们认为对安全是有益无害的。更多请看<a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields">这里</a>。</p> <blockquote> <p><strong>注意：</strong> 在大多数现代浏览器中， <code>autocomplete</code> 设置为 <code>"off"</code> 不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在网站的登录表单中填写这些值。请参阅 <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields">the autocomplete attribute and login fields</a>。</p> </blockquote> <p>如果我们希望在密码字段阻止自动填充，可以添加 <code>autocomplete="new-password"</code> 来避免意外填写现有密码：</p> <pre><code class="language-html"><input name="password" type="password" placeholder="请输入密码" autocomplete="new-password" /> </code></pre> <p>除了常见的 <code>"on"</code>、<code>"off"</code> 之外，更多 <code>autocomplete</code> 取值请看<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values">这里</a>。</p> <h3>小结</h3> <p>按照规范，当指定 <code>autocomplete="on"</code> 或 <code>autocomplete="off"</code> 时，会启用或关闭自动填充功能。但是实际情况是，浏览器不一定遵循标准实现。</p> <p>所以，规范只是弟弟，浏览器厂商才是大爷啊。</p> <h2>参考链接</h2> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete">HTML attribute: autocomplete</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion">How to turn off form autocompletion</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-autocomplete">The Form element</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#autocomplete">The Input (Form Input) element</a></li> </ul> </article> <article> <h1>为什么用 void 0 代替 undefined？</h1> <p>Sun, 26 Feb 2023 13:00:19 GMT</p> <p></p> <p>众所周知，<code>void</code> 运算符总会返回一个 <code>undefined</code> 的结果。</p> <p>那么，为什么要用 <code>void 0</code> 代替 <code>undefined</code> 呢？这不是多此一举了吗？</p> <h2>void 运算符</h2> <p>语法非常简单：</p> <pre><code class="language-js">void expression </code></pre> <p>它将会对表达式进行求值，然后返回 <code>undefined</code> 的「原始值」。那么，<code>void 0</code> 不就是得到 <code>undefined</code> 最简单的写法嘛！</p> <blockquote> <p>写法上 <code>void 0</code> 相当于 <code>void(0)</code>。</p> </blockquote> <p>我们知道，立即函数执行表达式（IIFE）有非常多的写法，使用 <code>void</code> 关键字也是可以的，比如：</p> <pre><code class="language-js">void (function () { // some statements })() // 相当于 void function () { /* some statements */ }() </code></pre> <p>另外，你应该看过以下类似的写法：</p> <pre><code class="language-html"><a href="javascript:0;">Link</a> </code></pre> <p>我们知道 <code>javascript:</code> 是 JavaScript 中的伪协议，表示将会使用 JS 解析器执行其后的所有语句，若其最后一个JavaScript 语句返回值不为 <code>undefined</code>，那么其返回值将会替换为页面内容。</p> <p>就以上 HTML 标签，在不同浏览器下点击，会有不同的结果。其中 Chrome、Safari 中点击无任何反馈，而 Firefox 中页面内容将会被替换为 <code>0</code>。</p> <p>为了解决以上差异表现，通常的做法就是使用 <code>void</code> 关键字，比如：</p> <pre><code class="language-html"><a href="javascript:void(0);">Link</a> </code></pre> <p>这也是处理 <code><a></code> 标签默认行为的方式之一。</p> <p>这种伪协议除了在事件处理程序中使用，也可在浏览器地址栏、书签地址中使用。</p> <p>除此之外，还有一种常用的用法：当箭头函数中只有一行语句，且不需要返回值时，则可以：</p> <pre><code class="language-js">element.onclick = () => void doSomething() </code></pre> <h2>undefined</h2> <p>你有可能不知道，我们天天写的 <code>undefined</code>，它其实是一个「全局对象」中的一个「属性」。</p> <pre><code class="language-js">// 浏览器宿主环境 window.undefined === undefined // true // Node 宿主环境 global.undefined === undefined // true </code></pre> <blockquote> <p>除了 <code>undefined</code> 之外，类似的还有 <code>NaN</code>、<code>Infinity</code>、<code>globalThis</code> 也是全局对象的属性。它们的属性描述对象都是：不可写、不可枚举、不可配置（详见 <a href="https://262.ecma-international.org/#sec-value-properties-of-the-global-object">ECMAScript 19.1 Value Properties of the Global Object</a>）。</p> </blockquote> <pre><code class="language-js">{ [[writable]]: false, [[enumerable]]: false [[configurable]]: false } </code></pre> <p>当然，这个在 ES5 之前是可以被改写的，下面可以对比一下：</p> <p>▼ IE 8 </p> <p>▼ Chrome 100 </p> <p>从这个角度看是不是可以理解为什么用 <code>void 0</code> 而不是 <code>undefined</code> 这个全局属性了。</p> <p>还有，需要特别注意的是：</p> <blockquote> <p><code>undefined</code> 并不是 ECMAScript 标准中的一个<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords">保留字</a>，因此它是可以被作为变量标识符而使用的（但项目中千万别这么用），就像 <code>window</code> 一样。</p> </blockquote> <p>在 ECMAScript 标准中，保留字有以下这些（<a href="https://262.ecma-international.org/#sec-keywords-and-reserved-words">详见 12.6.2 Keywords and Reserved Words</a>）：</p> <p></p> <p>在现代浏览器下，请对比以下三种示例：</p> <pre><code class="language-js">// 示例一 !(function () { var undefined = 1 console.log(undefined) // 结果是？ })() </code></pre> <pre><code class="language-js">// 示例二 !(function () { undefined = 2 console.log(undefined) // 结果是？ })() </code></pre> <pre><code class="language-js">// 示例三 var undefined = 3 console.log(undefined) // 结果是？ </code></pre> <pre><code class="language-js">// 示例四 let undefined = 4 console.log(undefined) // 结果是？ </code></pre> <p>前三个打印结果分别是：<code>1</code>、<code>undefined</code>、<code>undefined</code>，最后一个则在 <code>let undefined = 4</code> 处抛出 SyntaxError。</p> <p>原因分析：</p> <ul> <li>示例一的 <code>undefined</code> 被声明为一个变量标识符，并赋值为 <code>1</code>，因此打印结果为 <code>1</code>；</li> <li>示例二中 <code>undefined = 2</code> 表示修改全局变量的 <code>undefined</code> 属性（<code>window.undefined</code>），由于它是 <code>non-writable</code> 的，因此不会被重写，打印结果还是其默认值 <code>undefined</code>；</li> <li>示例三与示例二同理，只是它们所处的作用域不同罢了；</li> <li>示例四原意是为了说明 <code>var</code> 和 <code>let/const</code> 的区别，在全局作用域下，前者声明的变量会被添加至全局对象上，而后者则不会。但是实际执行下来，会抛出语法：<code>Uncaught SyntaxError: Identifier 'undefined' has already been declared</code>（目测是默认情况下就有一个 <code>var undefined</code> 的声明的语句了，因此使用 <code>let undefined</code> 重复声明会抛出错误，这种猜测暂未在标准中找到佐证）。</li> </ul> <p>不知道有没有人会分不清：<code>undefined</code> 什么时候作为原始值？什么时候是作为变量（属性）？</p> <pre><code class="language-js">var foo // 此处 foo 的值是原始值 undefined； function bar() {} bar() // 此处函数 bar 的返回值是原始值 undefined； void 0 // 此处 void 操作的返回值是原始值 undefined； foo == undefined // 此处相等运算符右侧的 undefined 是全局对象的 undefined 属性。 </code></pre> <p>到这里，你应该对于 <code>undefined</code> 有了一个比较全面的认识了。</p> <p>我猜你应该看过类似以下的「小心机」代码：</p> <pre><code class="language-js">;(function ($, window, undefined) { // some statements })(jQuery, window) </code></pre> <p>如果在 IIFE 中使用 <code>undefined</code>，它其实是引用了形参 <code>undefined</code>。但形参 <code>undefined</code> 的值就是 <code>undefined</code> 的原始值，因为在调用函数时并未传入实参。除了能确保 <code>undefined</code> 的值是原始值之外，还能加速变量 <code>undefined</code> 的查找，由于它在函数作用域内就能找到该变量，就不会继续往作用域链上查找。</p> <h2>用 void 0 代替 undefined？</h2> <p><code>void 0</code> 总是返回原始值 <code>undefined</code>，无论全局属性 <code>undefined</code> 是否被改写，它都能确保其值是 <code>undefined</code>（原始值）。</p> <p>比如著名的工具库 <a href="https://github.com/jashkenas/underscore/blob/da06656712e023ed40198310bab29634a7170ec2/modules/sortBy.js#L19">underscore</a> 大量使用了 <code>void 0</code> 来代替 <code>undefined</code>，再者 UglifyJS、Terser 等代码压缩工具也会将 <code>undefined</code> 转换为 <code>void 0</code>，这样可以节省一些字节：</p> <pre><code class="language-js">function isUndefined(x) { return x === undefined } // Minified function isUndefined(n){return void 0===n} </code></pre> <p>但我们在编写代码的时候，直接使用 <code>undefined</code> 也是没有太大问题的，注意下前面提到的一些点就好了，其余的就交由工具来处理即可。</p> </article> <article> <h1>啊，似乎没有真正理解 try...catch...finally！</h1> <p>Sun, 26 Feb 2023 12:54:04 GMT</p> <p></p> <p>写了那么久的 JavaScript，似乎真的没有很认真地去了解 <code>try...catch...finally</code> 的各种用法，真是惭愧了！Anyway，不懂就学...</p> <h2>一、错误与异常</h2> <p>错误，在程序中是很常见的。它可以是 JS 引擎在执行代码时内部抛出的，也可以是代码开发人员针对一些不合法的输入而主动抛出的，或者是网络断开连接导致的错误等等...</p> <p><strong>可能很多人会认为，「错误」和「异常」是同一回事，其实不然，一个错误对象只有在被抛出时才成为异常。</strong></p> <h3>1.1 错误</h3> <p>在 JavaScript 中，错误通常是指 Error 实例对象或 Error 的派生类实例对象（比如 <code>TypeError</code>、<code>ReferenceError</code>、<code>SyntaxError</code> <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error#error_types">等等</a>）。创建 <code>Error</code> 实例对象很简单，如下：</p> <pre><code class="language-js">const error = new Error('oops') // 等价于 Error('oops') const typeError = new TypeError('oops') // ... </code></pre> <p>虽然 <code>Error</code> 及其派生类是构造函数，但是当作函数调用也是允许的（即省略 <code>new</code> 关键字），同样会返回一个错误实例对象。</p> <p>一个错误实例对象，包含以下属性和方法：</p> <pre><code class="language-js">const errorInstance = { name: String, // 标准属性，所有浏览器均支持（默认值为构造方法名称） message: String, // 标准属性，所有浏览器均支持（默认值为空字符串，实例化时传入的第一个参数可修改其属性值） stack: String, // 非标准属性，但所有浏览器均支持（栈属性，可以追踪发生错误的具体信息） columnNumber: Number, // 非标准属性，仅 Firefox 浏览器支持（列号） lineNumber: Number, // 非标准属性，仅 Firefox 浏览器支持（行号） fileName: String, // 非标准属性，仅 Firefox 浏览器支持（文件路径） column: Number, // 非标准属性，仅 Safari 浏览器支持（同上述三个属性） line: Number, // 非标准属性，仅 Safari 浏览器支持 sourceURL: String, // 非标准属性，仅 Safari 浏览器支持 toString: Function, // 标准方法（其返回值是 name 和 message 属性的字符串表示） } </code></pre> <p>我们写个最简单的示例，打印看下各大浏览器的情况：</p> <pre><code class="language-js">try { throw new TypeError('oops') } catch (e) { console.log(e.toString()) console.dir(e) } </code></pre> <p></p> <p>插个题外话：</p> <p>不知道有人没有对此有疑惑的，为什么 <code>console.log()</code> 一个 <code>Error</code> 对象，打印出来的是字符串，而不是一个对象呢？</p> <pre><code class="language-js">const err = new Error('wrong') console.log(err) // "Error: wrong" console.log(typeof err) // "object" </code></pre> <p>那么，如果想打印出 <code>Error</code> 对象，使用 <code>console.dir()</code> 即可。</p> <p>前面 <code>console.log()</code> 打印结果为字符串的原因其实很简单，那就是 <code>console.log()</code> 内部「偷偷地」做了一件事，当传入的实参为 <code>Error</code> 对象（或其派生类错误对象），它会先调用 <code>Error</code> 对象的 <code>Error.prototype.toString()</code> 方法，然后将其结果输出到控制台，所以我们看到的打印结果为字符串。</p> <p>其实现如下：</p> <pre><code class="language-js">// polyfill Error.prototype.toString = function () { 'use strict' var obj = Object(this) if (obj !== this) throw new TypeError() var name = this.name name = name === undefined ? 'Error' : String(name) var msg = this.message msg = msg === undefined ? '' : String(msg) if (name === '') return msg if (msg === '') return name return name + ': ' + msg } </code></pre> <p>细心的同学会发现，在不同浏览器下，其打印结果可能会不相同（但不重要）。原因也非常简单，<code>console</code> 并不是 ECMAScript 标准，而是浏览器 BOM 对象提供的一个接口，其<a href="https://console.spec.whatwg.org/">标准</a>由 WHATWG 机构制定，虽然标准是统一的，但实现的是各浏览器厂商大爷们，它们有可能不会严格遵守规范去实现，因而产生差异化。比如，此前写过一篇<a href="https://github.com/tofrankie/blog/issues/260">文章</a>是关于不同宿主环境下 async/await 和 promise 执行顺序的差异，就因为 JS 引擎实现差异导致的。</p> <h3>1.2 异常</h3> <p>前面提到，当错误被抛出时就会成为异常。</p> <p>假设我们编写的代码存在语法错误，那么在编译阶段的语法分析过程就会被聪明的 JS 引擎发现，因而在编译阶段便会抛出 SyntaxError。</p> <p>假设我们代码没有语法错误，但错误地引用了一个不存在的变量，那么在执行阶段的执行上下文过程（代码执行之前的一个过程），聪明的 JS 引擎发现在其作用域链上找不到该变量，那么就会抛出 ReferenceError。</p> <p>假设既不存在语法错误，也没有引用错误，但我们对一个变量做了“不合法”的操作，比如 <code>null.name</code>、<code>'str'.push('ing')</code>，那么 JS 引擎就会抛出 TypeError。</p> <p>还有很多很多，就不举例了。</p> <p>前面都是 JS 引擎主动抛出的错误，那么，我们开发者则可通过 <code>throw</code> 关键字来抛出错误，语法很简单：</p> <pre><code class="language-js">// throw expression throw 123 throw 'abc' throw { name: 'Frankie' } // ... </code></pre> <p>请注意，在 JavaScript 中 <code>throw</code> 关键字和 <code>return</code>、<code>break</code>、<code>continue</code> 等关键字一样，会受到 ASI（<a href="http%3A%2F%2Fwww.ecma-international.org%2Fecma-262%2F6.0%2Findex.html%23sec-automatic-semicolon-insertion">Automatic Semicolon Insertion</a>）规则的影响，它不能在 <code>throw</code> 与 <code>expression</code> 之间插入任意换行符，否则可能得不到预期结果。</p> <p>语法很简单，但通常项目中「不建议」直接抛出一个字面量，而是抛出 <code>Error</code> 对象或其派生类对象，应该这样：</p> <pre><code class="language-js">throw new Error('oops') throw new TypeError('arguments must be a number.') // ... </code></pre> <p>原因是 <code>Error</code> 对象会记录引发此错误的文件的路径、行号、列号等信息，这应该是排除错误最有效的信息。在 ESLint 中的 <a href="https://eslint.org/docs/rules/no-throw-literal">no-throw-literal</a> 规则，正是用来约束上述直接抛出字面量的写法的。</p> <p>除了 <code>throw</code> 关键字之外，ES6 中强大的 Generator 函数也提供了一个可抛出异常的方法：<code>Generator.prototype.throw()</code>。它可以在函数体外抛出异常，然后在函数体内捕获异常。</p> <pre><code class="language-js">function* genFn() { try { yield 1 } catch (e) { console.log('inner -->', e) } } try { const gen = genFn() gen.next() gen.throw(new Error('oops')) } catch (e) { console.log('outer -->', e) } </code></pre> <p>打印结果是 <code>inner --> Error: oops</code>。如果生成器函数体内没有 <code>try...catch</code> 去捕获异常，那么它所抛出的异常可以被外部的 <code>try...catch</code> 语句捕获到。</p> <p>当生成器「未开始执行之前」或者「执行结束之后」，调用生成器的 <code>throw()</code> 方法。它的异常只会被生成器函数外部的 <code>try...catch</code> 捕获到。若外部没有 <code>try...catch</code> 语句，则会报错且代码就会停止执行。<a href="https://github.com/tofrankie/blog/issues/258">详看</a></p> <blockquote> <p>需要注意的是，生成器函数虽然是一个很强大的异步编程的解决方案，但它本身是同步的，而且执行生成器函数并不会立刻执行函数体的逻辑，它需要主动调用生成器实例对象的 <code>next()</code>、<code>return()</code>、<code>throw()</code> 方法去执行函数体内的代码。当然，你也可以通过 <code>for...of</code>、解构等语法去遍历它，因为生成器本身就是一个可迭代对象。</p> </blockquote> <h2>二、try...catch</h2> <p>对于可能存在异常的代码，我们通常会使用 <code>try...catch...finally</code> 去处理一些可预见或不可预见的错误。语法有以下三种形式：</p> <ul> <li><code>try...catch</code></li> <li><code>try...finally</code></li> <li><code>try...catch...finally</code></li> </ul> <p><strong>且必须至少存在一个 <code>catch</code> 块或 <code>finally</code> 块。</strong></p> <pre><code class="language-js">try { throw new Error('oops') } catch (e) { // some statements... } </code></pre> <p>以上这些语法，写过 JavaScript 相信都懂。</p> <p>曾经 Firefox 59 及以下版本的浏览器，有一种 Conditional catch-blocks 的「条件 <code>catch</code> 子句」的语法（请注意，其他浏览器并不支持该语法，即便是远古神器 IE5，因此知道有这回事就行了）。它的语法如下：</p> <pre><code class="language-js">try { // may throw three types of exceptions willThrowError() } catch (e if e instanceof TypeError) { // statements to handle TypeError exceptions } catch (e if e instanceof RangeError) { // statements to handle RangeError exceptions } catch (e if e instanceof EvalError) { // statements to handle EvalError exceptions } catch (e) { // statements to handle any unspecified exceptions } </code></pre> <p>那么符合 ECMAScript 标准的「条件 <code>catch</code> 子句」应该这样写：</p> <pre><code class="language-js">try { // may throw three types of exceptions willThrowError() } catch (e) { if (e instanceof TypeError) { // statements to handle TypeError exceptions } else if (e instanceof RangeError) { // statements to handle RangeError exceptions } else if (e instanceof EvalError) { // statements to handle EvalError exceptions } else { // statements to handle any unspecified exceptions } } </code></pre> <p>请注意，<code>try...catch</code> 只能以「同步」的形式处理异常，因此对于 XHR、Fetch API、Promise 等异步处理是无法捕获其错误的，究其原因就是 Event Loop 嘛。当然实际中可能结合 <code>async/await</code> 来控制会更多一些。</p> <h3>2.1 catch子句</h3> <p>我们知道，若 <code>try</code> 块中抛出异常时，会立即转至 <code>catch</code> 子句执行。若 <code>try</code> 块中没有异常抛出，会跳过 <code>catch</code> 子句。</p> <pre><code class="language-js">try { // try statements } catch (exception_var) { // catch statements } </code></pre> <p>其中 <code>exception_var</code> 表示异常标识符（如 <code>catch(e)</code> 中的 <code>e</code>），它是「可选」的，因此可以这样编写 <code>try { ... } catch { ... }</code>。通过该标识符我们可以获取关于被抛出异常的信息。</p> <blockquote> <p><strong>请注意，该标识符的「作用域」仅在 <code>catch</code> 块中有效</strong>。当进入 <code>catch</code> 子句时，它被创建，当 <code>catch</code> 子句执行完毕，此标识符将不可再用。也可以理解为（在 ES6 以前）异常标识符是 JavaScript 中含有“块级作用域”的变量。</p> </blockquote> <h3>2.2 finally 子句</h3> <p>而 <code>finally</code> 子句在 <code>try</code> 块和 <code>catch</code> 块之后执行，但在下一个 <code>try</code> 声明之前执行。无论是否异常抛出，<code>finally</code> 子句总是会执行。</p> <blockquote> <p>如果从 <code>finally</code> 块中返回一个值，那么这个值将成为整个 <code>try...catch...finally</code> 的返回值，无论是否有 <code>return</code> 语句在 <code>try</code> 和 <code>catch</code> 块中（即使 <code>catch</code> 块中抛出了异常）。</p> </blockquote> <p>对于这个我表示很无语，可能整个前端圈子就我还不知道吧，原来 <code>finally</code> 还能 <code>return</code> 一个值，在做项目的过程中，确实没写过和见过在 <code>finally</code> 中 <code>return</code> 某个值的，让您见笑了，实在惭愧。</p> <p><strong>但请注意，若要在 <code>try...catch...finally</code> 中使用 <code>return</code>，它只能在函数中运行，否则是不允许的，会抛出语法错误。</strong></p> <pre><code class="language-js">try { doSomething() } catch (e) { console.warn(e) throw e } finally { return 'completed' // SyntaxError: Illegal return statement } </code></pre> <h3>2.3 执行顺序</h3> <p>在平常的项目中，一般的 <code>try...catch</code> 写法是在 <code>try</code> 块中 <code>return</code>，<code>catch</code> 块则作相应的异常处理，少数情况也会在 <code>catch</code> 块中 <code>return</code>。因此，大家对这种常规写法的执行顺序应该没什么问题。</p> <p>先来个谁都会的示例：</p> <pre><code class="language-js">function foo() { try { console.log('try statement') throw new Error('oops') } catch (e) { console.log('catch statement') return 'fail' } } foo() // 以上，先后打印 "try statement"、"catch statement"，foo 函数返回一个 "fail" 值 </code></pre> <p>接着再看，它打印什么，函数又返回什么呢？</p> <pre><code class="language-js">function foo() { try { console.log('try statement') throw new Error('oops') } catch (e) { console.log('catch statement') return 'fail' } finally { console.log('finally statement') return 'complete' } } foo() // 先后打印："try statement"、"catch statement"、"finally statement" // foo 函数返回值是 "complete" </code></pre> <p>前面提到，如果 <code>finally</code> 块中含有 <code>return</code> 语句，那么它的 <code>return</code> 值将作为当前函数的返回值，因此 <code>foo()</code> 结果为 <code>"complete"</code>。</p> <p>然后我们再稍微改动一下，在 <code>try</code> 块中 <code>return</code> 一个值，看下结果又有什么不同？</p> <pre><code class="language-js">function foo() { try { console.log('try statement') return 'success' } catch (e) { console.log('catch statement') return 'fail' } finally { console.log('finally statement') return 'complete' } } foo() // 先后打印："try statement"、"finally statement" // foo 函数返回值是 "complete" </code></pre> <p>由于 <code>try</code> 块中没有抛出异常，因此 <code>catch</code> 块会被跳过，不执行，但是 <code>finally</code> 块还是会执行的，而且它里面返回了 <code>"complete"</code>，因此这个值也就作为 <code>foo</code> 函数的返回值了。</p> <blockquote> <p>因此，我们大致可以得出一个结论，<code>finally</code> 块的代码总会在 <code>return</code> <strong>之前</strong>执行，不管 <code>return</code> 是存在于 <code>try</code>、<code>catch</code> 还是 <code>finally</code> 块中。</p> </blockquote> <p>但是，这就完了吗？</p> <p>还没有，我们再看一个示例，看看里面这个 <code>bar()</code> 函数是惰性求值？还是怎样？</p> <pre><code class="language-js">function foo() { try { console.log('try statement') throw new Error('oops') } catch (e) { console.log('catch statement') return bar() } finally { console.log('finally statement') return 'complete' } } function bar() { console.log('bar statement') return 'something' } foo() </code></pre> <p>以上示例，打印顺序和结果是什么呢？</p> <pre><code class="language-js">// 打印顺序，依次是： "try statement" "catch statement" "bar statement" "finally statement" // 结果是 "complete" </code></pre> <p>假设 <code>catch</code> 块中的 <code>return bar()</code> 换成 <code>throw bar()</code> 呢，结果又有什么变化呢？如果换成这个你就犹豫了，说明你理解得不够深刻，因此这里我不给出答案，你自己去试试，效果更佳！</p> <p>综上所述，<code>finally</code> 块的执行时机如下：</p> <blockquote> <p>在所有 <code>try</code> 块和 <code>catch</code> 块（如果有，且触发进入的话）执行完<strong>之后</strong>，即便此时 <code>try</code> 块或 <code>catch</code> 块中存在 <code>return</code> 或 <code>throw</code> 语句，它们将会被 Hold 住先不返回或抛出异常，继续执行 <code>finally</code> 块中的代码：</p> <ul> <li>如果 <code>finally</code> 中存在 <code>return</code> 语句，其返回值将作为整个函数的返回值（前面 <code>try</code> 块或 <code>catch</code> 中的 <code>return</code> 或 <code>throw</code> 都会被忽略，可以理解为没有了 <code>return</code> 或 <code>throw</code> 关键字一样）。</li> <li>如果 <code>finally</code> 中存在 <code>throw</code> 语句，前面 <code>try</code> 块或 <code>catch</code> 中的 <code>return</code> 或 <code>throw</code> 同样会被忽略，最后整个函数将会抛出 <code>finally</code> 块中的异常。</li> </ul> </blockquote> <h3>2.4 嵌套使用</h3> <p>它是可以嵌套使用的，当内部的 <code>try...catch...finally</code> 中抛出异常，它会被离它最近的 <code>catch</code> 块捕获到。</p> <pre><code class="language-js">function foo() { try { try { return 'success' } finally { throw new Error('inner oops') // 它将会被外层的 catch 块所捕获到 } } catch (e) { console.log(e) // Error: inner oops } } foo() </code></pre> <p>注意，本节内容所述都是同步代码，而不存在任何异步代码。</p> <p>到此，已彻底弄懂 <code>try...catch...finally</code> 语句了，再也不慌了！</p> <h2>三、异常有哪些？</h2> <p>在 Web 中，主要有以下几种异常类型：</p> <ul> <li>JavaScript 异常</li> <li>DOM 和 BOM 异常</li> <li>网络资源加载异常</li> <li>Script Error</li> <li>网页异常</li> </ul> <h3>3.1 JavaScript 异常</h3> <p><code>try...catch</code> 可以捕获同步任务导致的异常，也可以捕获 <code>async/await</code> 中的异常。</p> <p><code>Promise</code> 中抛出的异常，则可通过 <code>Promise.prototype.catch()</code> 或 <code>Promise.prototype.then(onResolved, onRejected)</code> 捕获。</p> <h3>3.2 DOM Exception</h3> <p>在调用 DOM API 时发生的，都属于 DOM Exception。比如：</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <script> window.onload = function () { const video = document.querySelector('#video') video.play() // Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. } </script> </body> </html> </code></pre> <p>未完待续...</p>  </article> <article> <h1>细读 ES6 | 模板字符串进阶用法</h1> <p>Sun, 26 Feb 2023 12:52:38 GMT</p> <p></p> <p>模板字符串（template string）是 ECMAScript 2015 规范中的一种新特性，在平常开发中使用频率非常高。也可称作模板字面量（template literal）。</p> <h2>常规用法</h2> <p>模板字符串使用反引号（` `）来代替普通字符串中的用双引号和单引号。</p> <pre><code class="language-js">// 单行字符串 `single line text` // 多行字符串 `multiline text 1 multiline text 2` // 嵌入表达式 function sayHi(name) { console.log(`Hi, ${name}~`) } // 模板字符串内使用反引号，需在前面添加转义符 (\) `\`` === '`' // true </code></pre> <p>需要注意的是，模板字符串内的「任意字符」都是它的一部分，包括很容易被视觉忽略的前导尾随空格、换行符等「空白符」。比如：</p> <pre><code class="language-js">String.raw`multiline text 1 multiline text 2` // "multiline text 1\n multiline text 2" </code></pre> <p>以上 <code>String.raw()</code> 是模板字符串的标签函数（下面会介绍），它返回指定模板字符串的原始字符串，可以看到它是包含 <code>\n </code>（换行符和空格）的。</p> <p>它也支持嵌套语法，比如：</p> <pre><code class="language-js">const className = `flex-center ${isShow ? `display ${isLarge ? 'big' : 'normal'}` : ''}` </code></pre> <p>以上这些内容，相信看到这篇文章的你都懂，没什么问题。</p> <h2>进阶用法</h2> <p>如果你在项目中使用过 <a href="https://www.wikiwand.com/en/CSS-in-JS">CSS-in-JS</a>，可以经常看到类似这样的语法：</p> <pre><code class="language-js">import styled from 'styled-components' const Button = styled.button` color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; ` </code></pre> <p>以上是 <a href="https://styled-components.com/">styled-components</a> 的基础用法。</p> <p>这看起来有点“奇怪”的语法，正是模板字符串中的<strong>标签模板</strong>（tagged template）。看个例子：</p> <pre><code class="language-js">alert`Hey` </code></pre> <p>以上等同于 <code>alert('Hey')</code>，在这里 <code>alert</code> 被称作「标签函数」。</p> <p><strong>因此「标签模板」实际上只是函数调用的一种特殊形式</strong>。标签指的是函数（即 <code>alert()</code> 方法），而函数后面的模板字符串就是它的参数。</p> <p>如果标签模板中的模板字符串是包含变量的，就不是简单的调用了。比如：</p> <pre><code class="language-js">const name = 'Frankie' // 标签模板 tag`Hey, ${name}~` // 等同于这样调用函数 tag(['Hey, ', '~'], 'Frankie') </code></pre> <p>标签函数的第一个参数，是模板字符串中由不包含 <code>${expression}</code> 部分的字符串拆分而成的数组。即 `Hey, ${name}~` 中的剔除掉 <code>${name}</code> 后拆分组成的数组。而后面的参数则为模板字符串中的所有变量。注意，标签函数并不是只能返回字符串，它也是一个普通函数，可以返回任何值。</p> <p>形式如：</p> <pre><code class="language-js">function tagFunction(strArr, ...values) { // some statements... } </code></pre> <p>其中标签函数第一个参数中，存在一个特殊的属性 <code>raw</code>，通过它可以访问模板字符串的「原始字符串」，而不经过特殊字符的转换。</p> <pre><code class="language-js">function tagFunction(strArr) { console.log(strArr.raw[0]) } tagFunction`multiline text 1 multiline text 2` // "multiline text 1\n multiline text 2" </code></pre> <h2>应用场景</h2> <ol> <li>写 GraphQL 应用常用的 <a href="https://github.com/apollographql/graphql-tag">graphql-tag</a> 库，就是应用了标签函数的语法，写法很简洁。</li> </ol> <pre><code class="language-js">import gql from 'graphql-tag'; const query = gql` { user(id: 5) { firstName lastName } } ` </code></pre> <p>未完待续...</p>  </article> <article> <h1>面试题：['1', '2', '3'].map(parseInt) 输出什么？</h1> <p>Sun, 26 Feb 2023 12:51:47 GMT</p> <p></p> <h2>一、背景</h2> <p>事情经过是这样的，前几天上班路上，跟往常一样拿起手机看头条、逛知乎、刷掘金嘛。</p> <p>过程中，看到以下这个面试题：</p> <blockquote> <p><code>['1', '2', '3'].map(parseInt)</code> 输出什么？</p> </blockquote> <p>其实，这题很简单，不就是类似 <code>[0, 1, 2].filter(Boolean)</code> 这种变形题目嘛，但我却没能马上说出答案。</p> <p>我知道 <code>parseInt()</code> 的第二个参数跟进制数相关，但由于平常多数是缺省第二个参数，平常写项目也会启用 ESLint 的 <a href="https://eslint.org/docs/rules/radix">radix</a> 规则，但规则启用时也几乎是填写 <code>10</code> 作为实参，因为涉及其他进制数的情况确实很少很少...</p> <p>所以，趁机再熟悉下 <code>parseInt(string, radix)</code> 这个函数，也是挺不错的。</p> <p>回到上面的题目，分解一下，就是返回以下三个运算结果组成的数组嘛：</p> <pre><code class="language-js">parseInt('1', 0, ['1', '2', '3']) parseInt('2', 1, ['1', '2', '3']) parseInt('3', 2, ['1', '2', '3']) </code></pre> <p>对于 <code>parseInt()</code> 函数，仅接收两个参数，所以第三个参数实际上没有任何作用，因此 <code>['1', '2', '3'].map(parseInt)</code> 结果就是：</p> <pre><code class="language-js">[ parseInt('1', 0), parseInt('2', 1), parseInt('3', 2) ] </code></pre> <p>但这篇文章的重点并非是答案，我们应该关注 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt">parseInt(string, radix)</a> 函数本身。</p> <h2>二、八进制数表示法的前世今生</h2> <p>如果常用 ESLint 的同学，应该知道它有一个规则 <a href="https://eslint.org/docs/rules/radix">radix</a> 是跟 <code>parseInt()</code> 相关的。</p> <p>看个例子，它们分别打印什么结果？</p> <pre><code class="language-js">parseInt('071') // 57 parseInt('071', 10) // 71 </code></pre> <blockquote> <p>有些本着求真的同学，将 <code>parseInt('071')</code> 拷到控制台发现，无论是 Chrome、Firefox 还是 Safari 都是打印出 <code>71</code> 而不是 <code>57</code>。</p> </blockquote> <p><strong>我为什么写成 <code>57</code> 呢？是写错了吗？明明在浏览器中 <code>parseInt('071')</code> 都是打印出 <code>71</code> 呢！</strong></p> <p>先别急，我们知道在「严格模式」下，是不允许使用以 <code>0</code> 开头的八进制语法的。</p> <pre><code class="language-js">"use strict" var n = 071 // SyntaxError: Octal literals are not allowed in strict mode. </code></pre> <p><strong>你有可能不知道，其实在 ES6 标准发布之前，ECMAScript 是没有八进制语法的，至于类似 <code>071</code> 这种八进制表示法它只是被所有浏览器厂商支持罢了</strong>。比如 <code>Object.prototype.__proto__</code> 从来就不是 ECMAScript 的标准语法一样，但所有浏览器都支持罢了，标准语法是 <code>Object.getPrototypeOf()</code>。</p> <blockquote> <p><strong>在 ES6 中提供了八进制数的标准规范：在数字前加上 <code>0o</code> 来表示八进制数，比如八进制的 <code>71</code> 用 <code>0o71</code> 表示。</strong></p> </blockquote> <p>回到 <code>parseInt(string, radix)</code> 与八进制的话题上，</p> <p>当没有指定 <code>radix</code> 参数时，看看各家是如何解析八进制数的？</p> <ul> <li> <p>ES3「不提倡」将带有 <code>0</code> 开头的数值字符串解析为一个八进制。<strong>（不赞成，但没禁止）</strong></p> </li> <li> <p>ES5 规范中「不允许」<code>parseInt</code> 函数的实现环境把带有 <code>0</code> 开头的数值字符串解析为八进制数值，而是以 <code>10</code> 为基数（即十进制）进行解析。<strong>（规范禁止了，但浏览器没有按标准实现）</strong></p> </li> <li> <p>各浏览器厂商大爷们：我偏不按你规范去实现，仍要把带有 <code>0</code> 开头的数值字符串解析成八进制数值。<strong>（我行我素）</strong></p> </li> </ul> <p>本着求真的态度，拿出了上古神器去验证并得出结果：在 IE8 及以下浏览器 <code>parseInt('071')</code> 打印结果为 <code>57</code>（下图），而 IE9 及以上则为 <code>71</code>。</p> <p>▼ Internet Explorer 8 </p> <p>随着 JavaScript 的飞速发展，浏览器厂商们都向标准靠近了，不再肆意我行我素了。至于浏览器 <code>parseInt('071')</code> 打印结果是 <code>71</code>，原因正是现在的浏览器 JS 引擎是以 <code>10</code> 为基数进行解析了。</p> <p>尽管 2022 年了，但仍要兼容旧版（远古）浏览器，所以显式指定 <code>radix</code> 参数是非常有必要的。本节用一个比较典型的案例来说明，使用 <code>parseInt</code> 函数时，应当指定 <code>radix</code> 参数。</p> <p>在 JavaScript 中，有四种进制数的表示语法：</p> <ul> <li>十进制：没有「前导零」的数值。</li> <li>二进制：以 <code>0b</code> 或 <code>0B</code> 开头的数值。</li> <li>八进制：以 <code>0o</code> 或 <code>0O</code> 开头的数值。浏览器等宿主环境也支持以「前导零」开头，且只有 <code>0 ~ 7</code> 的数字表示八进制数。</li> <li>十六进制：以 <code>0x</code> 或 <code>0X</code> 开头的数值。</li> </ul> <h2>三、parseInt</h2> <h3>语法</h3> <pre><code class="language-js">parseInt(string, radix) </code></pre> <p>解析一个字符串并返回指定基数的「十进制整数」或者 <code>NaN</code>。</p> <ul> <li> <p><code>string</code> 被解析的值。若参数不是字符串类型，内部先隐式类型转换为字符串类型（即调用相应值的 <code>toString()</code> 方法）</p> </li> <li> <p><code>radix</code>（可选，取值范围 <code>2 ~ 36</code> 的整数）表示字符串的基数。<strong>但请注意，<code>10</code> 不是默认值</strong>！当参数 <code>radix</code> 缺省时，会有几种情况，下面会介绍。</p> </li> </ul> <h3>注意点 1</h3> <p>若 <code>string</code> 参数带有前导或尾随空白符（包括 <code>\n</code>、<code>\r</code>、<code>\f</code>、<code>\t</code>、<code>\v</code> 和空格），它们将会被忽略。换句话说，实际有意义的是第一个非空白符开始。</p> <pre><code class="language-js">parseInt(' \n\r\f\t\v 11', 2) // 3，相当于 parseInt('11', 2) </code></pre> <h3>注意点 2</h3> <p>当 <code>string</code> 参数的「第一个非空格字符」不能转换为数字，或者当 <code>radix < 2 || radix > 36</code> 时，返回值为 <code>NaN</code>。</p> <pre><code class="language-js">parseInt('a11') // NaN parseInt('11', 1) // NaN parseInt('11', 37) // NaN </code></pre> <p>但请注意，并不是所有的字母开头的都返回 <code>NaN</code>。比如 <code>parseInt('a11', 12)</code> 返回值为 <code>1453</code>。因为超过十进制之后，字母也可能用于表示相应的进制数的。</p> <h3>注意点 3</h3> <p>当 <code>radix</code> 参数为 <code>undefined</code>、<code>null</code>、<code>0</code> 或缺省（未显式指定）时，JavaScript 引擎会假定以下情况：</p> <ul> <li> <p>如果 <code>string</code> 是以 <code>0x</code> 或 <code>0X</code> 开头的，那么 <code>radix</code> 将会假定为 <code>16</code>，将其余部分当作十六进制数去解析。比如 <code>parseInt('0xf')</code> 相当于 <code>parseInt('f', 16)</code>，结果为 <code>15</code>。</p> </li> <li> <p>如果 <code>string</code> 是以 <code>0</code> 开头的，那么 <code>radix</code> 在不同的环境下，有可能被假定为 <code>8</code>（八进制）或假定为 <code>10</code>（十进制）。具体选择哪一种作为 <code>radix</code> 的值，视乎运行 JavaScript 的宿主环境（前面提到过了）。<strong>因此，在使用 <code>parseInt</code> 时，一定要显式指定 <code>radix</code> 参数。</strong></p> </li> <li> <p>如何 <code>string</code> 是以任何其他值开头，<code>radix</code> 会被假定为 <code>10</code>（十进制）。</p> </li> </ul> <h3>注意点 4</h3> <p><code>parseInt</code> 对 <code>string</code> 的解析规则是：从第一个非空白符开始，然后一直往后面查找，若有任意一个字符不能被转换为数值就会停止，那么最终被解析的字符串就是从开始到停止的这一截字符串。</p> <pre><code>parseInt('11a', 10) // 结果为 11，被解析的字符串为 '11' parseInt('11a', 11) // 结果为 142，被解析的字符串为 '11a'，因为在十一进制里面，a 是有意义的。 </code></pre> <p>所以，在使用 <code>parseInt</code> 处理 <code>BigInt</code> 类型的时候，最终的返回值总是为 <code>Number</code> 类型（过程中会失去精度），其中 <code>BigInt</code> 类型的拖尾的 <code>n</code> 是会被丢弃的。</p> <pre><code class="language-js">parseInt(1024n, 10) // 1024 parseInt(1024n, 36) // 46732，相当于 parseInt('1024', 36) // 注意，有别于以下这个 parseInt('1024n', 36) // 1682375 </code></pre> <p>原因非常的简单，前面也提到过的。当 <code>parseInt</code> 的第一个参数不是 <code>String</code> 类型时，会调用 <code>BigInt.prototype.toString()</code> 方法先转换为字符串，即 <code>1024n.toString()</code>，结果为 <code>1024</code>。</p> <h2>四、最后</h2> <p>回到文章开头的题目：</p> <pre><code class="language-js">[ parseInt('1', 0), parseInt('2', 1), parseInt('3', 2) ] </code></pre> <p>这时候，是不是就可以快速说出答案了：<code>[1, NaN, NaN]</code>。</p> <p>借机彻底弄懂了 <code>parseInt()</code> 的方法，可以满意地离开了。</p> </article> <article> <h1>浅读 HTTP</h1> <p>Sun, 26 Feb 2023 12:51:01 GMT</p> <p></p>  <p><strong>HTTP</strong> 全称是 Hyper Text Transfer Protocol，译为“超文本传输协议”（超文本转移协议）。</p> <h2>一、前言</h2> <p>在很久很久以前，人们为了在世界范围内轻松知识共享，提出了 Web（World Wide Web）的概念。简单来说，就是在 Web 浏览器的地址栏输入 Web 页面对应的 URL，Web 浏览器从 Web 服务器端获取到文件资源等信息，从而显示出 Web 页面。它使用 HTTP 协议为规范，完成在客户端与服务端一系列的运作流程。</p> <p>最初，HTTP 协议出现是为了解决文本传输的难题。但由于协议本身非常简单，现在 HTTP 协议已经超出了 Web 这个框架，被运用到各种场景里。</p> <p>尽管我们常说，在 Web 中客户端与服务器端是通过 HTTP 协议进行通信的，但不代表这个通信的全过程都由 HTTP 就能完成的。</p> <p>通常使用的的网络是在 TCP/IP 协议簇的基础上运作的，而 HTTP 属于它内部的一个子集。</p> <h2>二、概念</h2> <h4>协议（Protocol）</h4> <p>在计算机与网络设备进行通信，双方需要基于相同的方法。不同的硬件、操作系统之间的通信，所有的这一切都需要一种规则，这种规则被称为“协议”。</p> <h4>TCP/IP 协议（簇）</h4> <p>TCP/IP（Transmission Control Protocol/Internet Protocol，传输控制协议/网际协议）是指能够在多个不同网络间实现信息传输的协议簇（Protocol Suite，也有译作“协议族”）。TCP/IP 协议不仅仅指的是 TCP 和 IP 两个协议，而是指由 FTP、SMTP、TCP、IP 等协议构成的协议簇。<strong>由于在 TCP/IP 协议中 TCP 协议和 IP 协议最具代表性，因此被称为 TCP/IP 协议。</strong></p> <h4>计算机网络体系结构分层</h4> <p>OSI（Open System Interconnect）七层模型：</p> <p></p> <p>OSI 七层模型与 TCP/IP 四层模型的区别：</p> <p></p> <p>OSI 七层模型：</p> <pre><code class="language-text">应用层（Application Layer）网络服务与最终用户的一个接口。协议有：HTTP、FTP、TFTP、SMTP、SNMP、DNS、TELNET、POP3、DHCP 等。表示层（Presentation Layer）数据的表示、安全、压缩。格式有 JPEG、ASCII、EBCDIC、加密格式等。会话层（Session Layer）建立、管理、终止会话。对应主机进程，指本地主机与远程主机正在进行的会话。传输层（Transport Layer）定义传输数据的协议端口号，以及流控和差错校验。协议有：TCP、UDP，数据包一旦离开网卡即进入网络传输层。网络层（Network Layer）进行逻辑地址寻址，实现不同网络之间的路径选择。协议有：ICMP、IGMP、IP（IPv4、IPv6）。数据链路层（Data Link Layer）建立逻辑连接、进行硬件地址寻址、差错校验等功能。（由底层网络定义协议）将比特组合层字节进而组合成帧，用 MAC 地址访问介质，错误发现但不能纠正。物理层（Physical Layer）建立、维护、断开物理连接。（由底层网络定义协议） </code></pre> <p>TCP/IP 四层模型：</p> <p>TCP/IP 协议簇按层次分别分为：应用层、传输层、网络层和数据链路层。</p> <pre><code class="language-text">应用层：应用层决定了向用户提供应用服务时通信的活动。 TCP/IP 协议簇内预设了各类通用的应用服务。比如：FTP、DNS 服务就是其中两类。 HTTP 协议也处于该层。传输层：传输层对应上层应用层，提供处于网络连接中的两台计算机之间的数据传输。在传输层有两个性质不同的协议：TCP 和 UDP。网络层（网络互连层）：网络层用来处理在网络上流动的数据包。数据包是网络传输的最小数据单位。该层规定了通过怎样的路径（所谓的传输路线）到达对方计算机，并把数据包传送给对方。与对方计算机之间通过多台计算机或网络设备进行传输时，网络层所起的作用就是在众多的选项内选择一条传输线路。链路层（数据链路层、网络接口层）用来处理连接网络的硬件部分。包括控制操作系统、硬件的设备驱动、NIC（网络适配器，即网卡）、及光纤等物理可见部分（还包括连接器等一切传输媒介）。硬件上的范畴均在链路层的作用范围之内。 </code></pre> <h2>三、HTTP</h2> <h4>HTTP 状态码</h4> <pre><code class="language-text">2XX（成功） 200 OK：表示请求在服务端被正常处理了。 204 No Content：表示请求已正常处理，但在返回的响应报文中不含实体的主体部分。 206 Partial Content：表示客户端进行了范围请求，而服务器成功执行了这部分的 GET 请求。 3XX（重定向） 301 Moved Permanently：表示永久重定向。它会按照响应报文的 Location 字段重新发起请求。 302 Found：表示临时重定向。与 301 相似，但它只是临时性质的，换句话说，资源对应 URI 未来还有可能发生改变。 303 See Other：表示请求对应的资源存在着另一个 URI，应使用 GET 方法定向获取请求的资源。 304 Not Modified：表示服务器端资源未发生改变，可直接使用客户端未过期的缓存。尽管 304 被划分在 3XX 类别中，但它和重定向没有关系。 307 Temporary Redirect：临时重定向，与 302 Found 有着相同的含义。但它不会从 POST 变成 GET。 4XX（客户端错误） 400 Bad Request：表示请求报文中存在语法错误。 401 Unauthorized：表示用户认证失败，即请求需要有认证信息。 403 Forbidden：表示对请求资源的访问被服务器拒绝了。 404 Not Found：表示服务器上无法找到请求的资源。 5XX（服务器错误） 500 Internal Server Error：表示服务器端在执行请求时发生了错误。 503 Service Unavailable：表示服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。 </code></pre> <h4>HTTP 报文</h4> <pre><code class="language-text">报文首部空行报文主体报文首部分为：请求报文首部、响应报文首部请求报文包括：请求行、首部字段（请求首部字段、通用首部字段、实体首部字段）、其他响应报文包括：状态行、首部字段（响应首部字段、通用首部字段、实体首部字段）、其他请求行：由方法、URI、HTTP 版本组成状态行：由HTTP 版本、状态码（数字和原因短语）组成 </code></pre> <p>未完待续...</p>  </article> <article> <h1>初试 Yarn Workspaces</h1> <p>Sun, 26 Feb 2023 12:50:04 GMT</p> <p></p> <p>示例 👉 <strong><a href="https://github.com/tofrankie/yarn-workspaces-demo">tofrankie/yarn-workspaces-demo</a></strong></p> <h2>Usage</h2> <p>查看 workspaces</p> <pre><code class="language-shell"># 查看 Workspace 信息 $ yarn workspaces info </code></pre> <p>执行脚本命令</p> <pre><code class="language-shell"># 在某个 workspace 中执行脚本命令 $ yarn workspace <workspace-name> <command> # 在所有 workspace 中执行脚本命令 $ yarn workspaces run <command> </code></pre> <p>添加依赖</p> <pre><code class="language-shell"># 在某个 workspace 中添加依赖 $ yarn workspace <workspace-name> add <package> </code></pre> <blockquote> <p>以上为 yarn classic 命令，而 2.x 部分有调整，<a href="https://yarnpkg.com/features/workspaces">更多</a>。</p> </blockquote> <h2>软链接查找</h2> <p>假设我们项目的 Workspaces 如下，</p> <pre><code class="language-json">{ "@workspace/project-1": { "location": "packages/project-1", "workspaceDependencies": ["@workspace/common"], "mismatchedWorkspaceDependencies": [] }, "@workspace/project-2": { "location": "packages/project-2", "workspaceDependencies": [], "mismatchedWorkspaceDependencies": [] }, "@workspace/common": { "location": "packages/common", "workspaceDependencies": [], "mismatchedWorkspaceDependencies": [] } } </code></pre> <p>可以看到，其中 <code>@workspace/project-1</code> 依赖了 <code>@workspace/common</code>，所以 <code>workspaceDependencies</code> 不为空。反之，没有引用的话就为空数组。</p> <p>假设，我们在 <code>project-1</code> 中引用了 <code>common</code> 中的导出模块，如下：</p> <pre><code class="language-js">// packages/common/index.js export const config = { name: 'Frankie', age: 20 } </code></pre> <pre><code class="language-js">// packages/project-1/index.js import { config } from '@workspace/common' console.log(config) </code></pre> <p>当 <code>project-1</code> 中查找 <code>@workspace/common</code> 时：</p> <ol> <li>先查找 <code>project-1</code> 是否存在对应版本的 <code>@workspace/common</code>，若找不到继续往下；</li> <li>查找 workspace-root 是否存在对应版本的 <code>@workspace/common</code>，若找不到继续往下；</li> <li>查找 NPM 平台是否存在对应版本的 <code>@workspace/common</code>，若找到会拉取下来，若找不到继续往下；</li> <li>抛出错误 Not Found。</li> </ol> <h2>参考链接</h2> <ul> <li><a href="https://classic.yarnpkg.com/lang/en/docs/workspaces/">Yarn Workspace 1.x</a></li> <li><a href="https://yarnpkg.com/features/workspaces">Yarn Workspace 2.x</a></li> <li><a href="https://juejin.cn/post/7011024137707585544">Monorepo 最佳实践之 Yarn Workspaces</a></li> </ul> </article> <article> <h1>细读 JS | JavaScript 模块化之路</h1> <p>Sun, 26 Feb 2023 12:47:42 GMT</p> <p></p> <p>学习不能停，都给我卷起来...</p> <h2>一、前世今生</h2> <p>在 ES6 之前，JavaScript 一直没有官方的模块（Module）体系，对于开发大型、复杂的项目形成了巨大的障碍。幸好社区上有一些模块加载方案，最主要的有 CommonJS（CommonJS Modules）和 AMD（Asynchronous Module Definition）两种模块规范，前者用于服务器，后者用于浏览器。</p> <p>随着 ES6 的正式发布，全新的模块将逐步取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。</p> <p>ES6 模块的设计思想尽量的静态化，是的编译时就能确定模块的依赖关系，以及输入和输出的变量。</p> <blockquote> <p>在 <a href="https://rollupjs.org/guide/en/#tree-shaking">rollup</a>、 <a href="https://webpack.docschina.org/guides/tree-shaking/#root">webpack</a> 等构建工具中常见的 <strong>Tree Shaking</strong> 能力，就是依赖于 ES6 模块的<a href="https://exploringjs.com/es6/ch_modules.html#static-module-structure">静态特性</a>实现的。</p> </blockquote> <p>而 CommonJS 和 AMD 模块都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。</p> <pre><code class="language-js">// CommonJS 模块 const { stat, exists, readFile } = require('fs') // 相当于 const _fs = require('fs') const stat = _fs.stat const exists = _fs.exists const readFile = _fs.readFile </code></pre> <p>以上示例，实际上是整体加载了 <code>fs</code> 模块（即加载 <code>fs</code> 的所有方法），生成了一个对象 <code>_fs</code>，然后再从这个对象上读取了 3 个方法。这种方式称为“<strong>运行时加载</strong>”，原因是只有运行时才能得到这个对象，导致完全没有办法在编译时做“静态优化”。</p> <p>ES6 模块不是对象，而是通过 <code>export</code> 命令显式指定输出的代码，再通过 <code>import</code> 命令输入。</p> <pre><code class="language-js">import { stat, exists, readFile } from 'fs' </code></pre> <p>以上示例，实际上是从 <code>fs</code> 模块中加载了 3 个方法，其他方法不加载。这种方式称为“<strong>编译时加载</strong>”或“<strong>静态加载</strong>”，即 ES6 模块可以在编译时就完成模块加载，效率要高于 CommonJS 模块的加载方式。这也导致了没法引用 ES6 模块本身，因为它不是对象。</p> <p>由于 ES6 模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。</p> <p>除了静态加载带来的各种好处，ES6 模块还有以下好处：</p> <ul> <li>不再需要 UMD 模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。</li> <li>将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者 navigator 对象的属性。</li> <li>不再需要对象作为命名空间（比如 Math 对象），未来这些功能可以通过模块提供。</li> </ul> <h2>二、为什么需要模块化？</h2> <p>举个 🌰</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <body> <script src="module-a.js"></script> <script src="module-b.js"></script> </body> </html> </code></pre> <pre><code class="language-js">// module-a.js var person = { name: 'Frankie', age: 20 } </code></pre> <pre><code class="language-js">// module-b.js console.log(person.name) // 将会打印什么呢？ </code></pre> <p>我们可以轻而易举就知道 <code>module-b.js</code> 里将会打印出 <code>Frankie</code>，原因很简单，它们都是处于全局作用域下，因此 <code>module-b.js</code> 中的 <code>person.name</code> 就能读取到在 <code>module-a.js</code> 中定义的 person 变量。</p> <p>如果将 <code>module-a.js</code> 和 <code>module-b.js</code> 在 HTML 中的顺序换过来，就会抛出错误。原因是<code><script></code> 是按块加载的，包括下载、（预）编译和执行。唯有当前块执行完毕，或者抛出错误，才会接着加载下一个 <code><script></code>。</p> <blockquote> <p>注意，这里提到的按顺序加载，是指没有 <code>defer</code> 和 <code>async</code> 属性的哈。它俩对外部脚本的加载方式是有影响的。但非本文话题，因此不展开讲述。</p> </blockquote> <p>那问题就来了，这很容易造成<strong>全局污染</strong>，对于大型、复杂的项目来说会非常棘手。</p> <p>假设没有 CommonJS 等模块化解决方案，要怎样解决这种问题呢？</p> <h3>1. 对象字面量（Object Literal）</h3> <pre><code class="language-js">// 声明 var namespace = { prop: 123, method: function () {}, // ... } // 调用 namespace.prop namespace.method() </code></pre> <p>缺点：</p> <p>作为一个单一的、有时很长的句法结构，它对其内容施加了限制。内容必须在 <code>{}</code> 之间，并且属性或方法之间必须添加逗号。当模块内容复杂起来之后，维护成本高，移动内容变得更加困难。</p> <p>在多个文件中使用相同的命名空间：可以将模块定义分散到多个文件中，并按如下方式创建命名空间变量，则可忽视加载文件的顺序。</p> <pre><code class="language-js">var namespace = namespace || {} </code></pre> <p>使用多个模块，可以通过创建单个全局命名空间并向其添加子模块来避免全局名称的扩散。不建议进一步嵌套，如果名称冲突是一个问题，您可以使用更长的名称。这种方式称为：嵌套命名空间。</p> <pre><code class="language-js">// 全局命名空间 var globalns = globalns || {} // 添加 A 子模块 globalns.moduleA = { // module content } // 添加 B 子模块 globalns.moduleB = { // module content } </code></pre> <p>尽管使用命名空间可以在一定程度上解决了命名冲突的问题，但是存在一个问题：在 <code>moduleB</code> 中可以修改 <code>moduleA</code> 的内容，而且 <code>moduleA</code> 可能还蒙在鼓里，不知情。</p> <blockquote> <p>以上命名空间内的所有成员和方法，无论是否私有，对外都是可访问的。这是一个明显的缺点，模块化不应该如此设计。</p> </blockquote> <p>Yahoo 公司的 <a href="https://clarle.github.io/yui2/">YUI 2</a> 就是采用了这种方案。</p> <h3>2. 立即执行函数表达式（Immediately-Invoked Function Expression，简称 IIFE）</h3> <p>在模块模式中，我们使用 IIFE 将环境附加到模块数据。可以从模块访问该环境内的绑定，但不能从外部访问。另一个优点是 IIFE 为我们提供了执行初始化的地方。</p> <pre><code class="language-js">var namespace = (function () { // private data var _prop = 123 var _method = function () {} return { // read-only get prop() { return _prop }, get method() { return _method } } })() </code></pre> <p>这样的话，我们就不用担心，在外部直接修改 <code>namespace</code> 内部的成员或者方法了。</p> <pre><code class="language-js">// 读取 namespace.prop // 123 namespace.method() // 写入 namespace.prop = 456 // 无效 namespace.method = function foo() {} // 无效 </code></pre> <p>因此，结合前面的内容，就可以这样去处理：</p> <pre><code class="language-js">// 全局命名空间 var globalns = globalns || {} // 添加 A 子模块 globalns.moduleA = (function () { // ... return { // ... } })() // 添加 B 子模块 globalns.moduleB = (function () { // ... return { // ... } })() </code></pre> <p>到现在，有了命名空间解决了命名冲突问题，同时使用 IIFE 来维护各模块的私有成员和方法，导出对外的开放接口即可。这似乎有了模块化该有的样子。</p> <p>但是，还有一个问题。前面提到过 <code><script></code> 是按书写顺序加载的（即使下载顺序可能并行的），主要包括：</p> <ul> <li>脚本下载</li> <li>脚本解析（编译和执行）</li> </ul> <p>假设我们的脚本如下：</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <body> <script src="module-a.js"></script> <script src="module-b.js"></script> </body> </html> </code></pre> <p>那么我们的 <code>modueA</code> 在（首次）解析的时候，就没办法调用 <code>moduleB</code> 的内容，因为它压根还没解析执行。一旦项目复杂度、模块数量上来之后，模块之间的依赖关系就很难维护了。</p> <h2>三、社区模块化方案</h2> <p>在 ES2015 之前，社区上已经有了很多模块化方案，流行的主要有以下几个：：</p> <ul> <li><strong>CommonJS</strong></li> <li><strong>AMD</strong>（Asynchronous Module Definition）</li> <li><strong>CMD</strong>（Common Module Definition）</li> <li><strong>UMD</strong>（Universal Module Definition）</li> </ul> <p>其中 CommonJS 规范在 Node.js 环境下取得了很不错的实践，它只能应用于服务器端，而不支持浏览器环境。CommonJS 规范的模块是同步加载的，由于服务器的模块文件存在于本地硬盘，只有磁盘 I/O 的，因此同步加载机制没什么问题。</p> <p>但在浏览器环境，一是会产生开销更大的网络 I/O，二是天然异步，就会产生时序上的错误。后来社区上推出了异步加载、可在浏览器环境运行的 RequireJS 模块加载器，不久之后，起草并发布了 AMD 模块化标准规范。</p> <p>由于 AMD 会提前加载，很多开发者担心有性能问题。假设一个模块依赖了另外 5 个模块，不管这些模块是否马上被用到，都会执行一遍，这些性能消耗是不容忽视的。为了避免这个问题，有部分人试图保留 CommonJS 书写方式和延迟加载、就近声明（就近依赖）等特性，并引入异步加载机制，以适配浏览器特性。比如，已经凉凉的 BravoJS、FlyScript 等方案。</p> <p>在 2011 年，国内的前端大佬玉伯提出了 SeaJS，它借鉴了 CommonJS、AMD，并提出了 CMD 模块化标准规范。但并没有大范围的推广和使用。</p> <p>在 2014 年，美籍华裔 Homa Wong 提出了 UMD 方案：将 CommonJS 和 AMD 相结合。本质上这不算是一种模块化方案。</p> <p>到了 2015 年 6 月，随着 ECMAScript 2015 的正式发布，JavaScript 终于原生支持模块化，被称为 ES Module。同时支持服务器端和浏览器端。</p> <p>尽管到了 2022 年，现状仍然是多种模块化方案共存，但未来肯定是 ES Module 一统江湖...</p> <blockquote> <p>关于 JavaScript 模块化历史线，可看这篇<a href="https://segmentfault.com/a/1190000023017398">文章</a>。</p> </blockquote> <h2>四、CommonJS</h2> <p>Node.js 的模块系统是基于 <a href="http://www.commonjs.org/specs/modules/1.0/">CommonJS</a> 规范的实现的。除此之外，像 <a href="https://couchdb.apache.org/">CouchDB</a> 等也是 CommonJS 的一种实现。而且它们有一些是没有完全按照 CommonJS 规范去实现的，甚至额外添加了特有的功能。</p> <p>由于我们接触到的 CommonJS 通常指 Node.js 中的模块化解决方法，因此，接下来提到的 CommonJS 均指 Node.js 的模块系统。</p> <p>先瞅一下，一个 CommonJS 模块里面都包括一些什么信息：</p> <p></p> <p>如果有一些看不懂或不了解其用处的，先不急，下面娓娓道来。</p> <p>CommonJS 的模块特点：</p> <blockquote> <ul> <li>每一个 JavaScript 文件就是一个独立模块，其作用域仅在模块内，不会污染全局作用域。</li> <li>一个模块包括 <code>require</code>、<code>module</code>、<code>exports</code> 三个核心变量。</li> <li>其中 <code>module.exports</code>、<code>exports</code> 负责模块的内容导出。后者只是前者的“别名”，若使用不当，还可能会导致无法导出预期内容。其中 <code>require</code> 负责其他模块内容的导入，而且其导入的是其他模块的 <code>module.exports</code> 对象。</li> <li>模块可以加载多次，但只会在第一次加载时运行一次，然后运行结果就会被缓存起来。下次再加载是直接读取缓存结果。模块缓存是可以被清除的。</li> <li>模块的加载是同步的，而且是按编写顺序进行加载。</li> </ul> </blockquote> <h3>4.1 Module 对象</h3> <p>前面打印的 <code>module</code> 就是 <code>Module</code> 的实例对象。每个模块内部，都有一个 <code>module</code> 对象，表示当前模块。它有以下属性：</p> <pre><code class="language-js">// Module 构造函数 function Module(id = '', parent) { this.id = id this.path = path.dirname(id) this.exports = {} moduleParentCache.set(this, parent) updateChildren(parent, this, false) this.filename = null this.loaded = false this.children = [] } </code></pre> <p>源码 👉 <a href="https://github.com/nodejs/node/blob/34be1af5e17195dd9ce127e1daa7ab2bafd2df84/lib/internal/modules/cjs/loader.js#L172-L181">node/lib/internal/modules/cjs/loader.js（Node.js v17.x）</a></p> <ul> <li><code>module.id</code>：返回字符串，表示模块的标识符，通常这是完全解析的文件名。</li> <li><code>module.path</code>：返回字符串，表示模块的目录名称，通常与 <code>module.id</code> 的 <code>path.dirname()</code> 相同。</li> <li><code>module.exports</code>：模块对外输出的接口，默认值为 <code>{}</code>。默认情况下，<code>module.exports</code> 与 <code>exports</code> 是相等的。</li> <li><code>module.filename</code>：返回字符串，表示模块的完全解析文件名（含绝对路径）。</li> <li><code>module.loaded</code>：返回布尔值，表示模块是否已完成加载或正在加载。</li> <li><code>module.children</code>：返回数组，表示当前模块引用的其他模块的实例对象。</li> <li><code>module.parent</code>：返回 <code>null</code> 或数组。若返回值为数组时，表示当前模块被其他模块引用了，而且每个数组元素表示被引用模块对应的实例对象。</li> <li><code>module.paths</code>：返回数组，表示模块的搜索路径（含绝对路径）。</li> <li><code>module.isPreloading</code>：返回布尔值，如果模块在 Node.js 预加载阶段运行，则为 true。</li> </ul> <p><strong>注意点</strong></p> <ul> <li>赋值给 <code>module.exports</code> 必须立即完成，不能在任何回调中完成（应在同步任务中完成）。比如，在 <code>setTimeout</code> 回调中对 <code>module.exports</code> 进行赋值是“不起作用”的，原因是 CommonJS 模块化是同步加载的。</li> </ul> <p>请看示例：</p> <pre><code class="language-js">// module-a.js setTimeout(() => { module.exports = { welcome: 'Hello World' } }, 0) // module-b.js const a = require('./a') console.log(a.welcome) // undefined // ❌ 错误示例 </code></pre> <p>再看个示例：</p> <pre><code class="language-js">// module-a.js const EventEmitter = require('events') module.exports = new EventEmitter() // 同步任务中完成对 module.exports 的赋值 setTimeout(() => { module.exports.emit('ready') // ❓ 这个会生效吗？ }, 1000) // module-b.js const a = require('./module-a') a.on('ready', () => { console.log('module a is ready') }) // ⚠️ 执行 `node module-b.js` 命令运行脚本，以上 ready 事件可以正常响应， // 原因 require() 会对模块输出值进行“浅拷贝”，因此 module-a.js 中的 setTimeout 是可以更新 EventEmitter 实例对象的。 </code></pre> <p>当 <code>module.exports</code> 属性被新对象完全替换时，通常也会“自动”重新分配 <code>exports</code>（自动是指不显式分配新对象给 <code>exports</code> 变量的前提下）。但是，如果使用 <code>exports</code> 变量导出新对象，则必须“手动”关联 <code>module.exprots</code> 和 <code>exports</code>，否则无法按预期输出模块值。</p> <p>请看示例：</p> <pre><code class="language-js">// 1️⃣ 以这种方式进行模块的输出，module.exports 与 exports 会自动分配，即 module.exports === exports module.exports = { // ... } // 2️⃣ 以这种方式导出的值，将会是空对象 {}，而不是 { sayHi: <Function> } // 此时 module.exports !== exports exports = { sayHi: function () {} } // ❌ // 3️⃣ 解决以上问题，需要手动关联 module.exprots 和 exports，使得二者相等 module.exports = exports = { sayHi: function () {} } // ✅ </code></pre> <ul> <li>由以上示例也可以看出，<code>require()</code> 方法引用的是 <code>module.exports</code> 对象，而不是 <code>exports</code> 变量。</li> <li>利用 <code>module.parent</code> 返回 <code>null</code> 或数值的特性，可以判断当前模块是否为入口脚本。另外，也可以通过 <code>require.main</code> 来获取入口脚本的实例对象。</li> </ul> <p><strong>module.exports 与 exports 的注意点</strong></p> <p>此前已写过一篇<a href="https://github.com/toFrankie/blog/issues/218">文章</a>去介绍它俩的区别了。</p> <blockquote> <p>一句话总结：<strong><code>exports</code> 变量只是 <code>module.exports</code> 属性的一个别名，仅此而已。</strong></p> </blockquote> <p>我们可以这样对模块进行输出：</p> <pre><code class="language-js">module.exports = { name: 'Frankie', age: 20, sayHi: () => console.log('Hi~') } // 相当于 exports.name = 'Frankie' exports.age = 20 exports.sayHi = () => console.log('Hi~') </code></pre> <p>但请注意，若模块只对外输出一个接口，使用不当，可能会无法按预期工作。比如：</p> <pre><code class="language-js">// ❌ 以下模块的输出是“无效”的，最终输出值仍是 {} exports = function () { console.log('Hi~') } </code></pre> <p>原因很简单，在默认情况下 <code>module.exports</code> 属性和 <code>exports</code> 变量都是同一个空对象 <code>{}</code>（默认值）的<strong>引用</strong>（reference），即 <code>module.exports === exports</code>。</p> <p>当对 <code>exports</code> 变量重新赋予一个基本值或引用值的时候， <code>module.exports</code> 和 <code>exports</code> 之间的联系被切断了，此时 <code>module.exports !== exports</code>，在当前模块下 <code>module.exports</code> 的值仍为 <code>{}</code>，而 <code>exports</code> 变量的值变为函数。而 <code>require()</code> 方法的返回值是所引用模块的 <code>module.exports</code> 的浅拷贝结果。</p> <p>正确姿势应该是：</p> <pre><code class="language-js">module.exports = export = function () { console.log('Hi~') } // ✅ </code></pre> <p>使用类似处理，使得 <code>module.exports</code> 与 <code>exports</code> 重新建立关联关系。</p> <p>这里并不存在任何难点，仅仅是 JavaScript 基本数据类型和引用数据类型的特性罢了。如果你还是分不清楚的话，建议只使用 <code>module.exports</code> 进行导出，这样的话，就不会有问题了。</p> <h3>4.2 require 查找算法</h3> <p><code>require()</code> 参数很简单，那么 <code>require()</code> 内部是如何查找模块的呢？</p> <p>简单可以分为几类：</p> <ul> <li> <p>加载 Node 内置模块形式如：<code>require('fs')</code>、<code>require('http')</code> 等。</p> </li> <li> <p>相对路径、绝对路径加载模块形式如：<code>require('./file')</code>、<code>require('../file')</code>、<code>require('/file')</code>。</p> </li> <li> <p>加载第三方模块（即非内置模块）形式如：<code>require('react')</code>、<code>require('lodash/debounce')</code>、<code>require('some-library')</code>、<code>require('#some-library')</code> 等。</p> </li> </ul> <p>其中，绝对路径形式在实际项目中几乎不会使用（反正我是没用过）、而 <code>require('#some-library')</code> 形式目前仍在试验阶段...</p> <p>以下基于 <a href="https://nodejs.org/api/modules.html#all-together">Node.js 官网</a> 相关内容翻译并整理的版本（<a href="https://codesandbox.io/s/interesting-agnesi-46jjzl?file=/README.md">存档</a>）</p> <pre><code class="language-txt">场景：在 `Y.js` 文件下，`require(X)`，Node.js 内部模块查找算法： 1. 如果 `X` 为内置模块的话，立即返回该模块；因此，往 NPM 平台上发包的话，`package.json` 中的 `name` 字段不能与 Node.js 内置模块同名。 2. 如果 `X` 是以绝对路径或相对路径形式，根据 `Y` 所在目录以及 `X` 的值以确定所要查找的模块路径（称为 `Z`）。 a. 将 `Z` 当作「文件」，按 `Z`、`Z.js`、`Z.json`、`Z.node` 顺序查找文件，若找到立即返回文件，否则继续往下查找； b. 将 `Z` 当作「目录」， 1）查找 `Z/package.json` 是否存在，若 `package.json` 存在且其 `main` 字段值不为虚值，将会按照其值确定模块位置，否则继续往下； 2）按 `Z/index.js`、`Z/index.json`、`Z/index.node` 顺序查找文件，若找到立即返回文件，否则会抛出异常 "not found"。 3. 若 `X` 是以 `#` 号开头的，将会查找最靠近 `Y` 的 `package.json` 中的 `imports` 字段中 `node`、`require` 字段的值确认模块的具体位置。（这一类现阶段用得比较少，后面再展开介绍一下） // https://github.com/nodejs/node/pull/34117 4. 加载自身引用 `LOAD_PACKAGE_SELF(X, dirname(Y))` a. 如果当前所在目录存在 `package.json` 文件，而且 `package.json` 中存在 `exports` 字段，其中 `name` 字段的值还要是 `X` 开头一部分，满足前置条件下，就会匹配 subpath 对应的模块（无匹配项会抛出异常）。（这里提到的 subpath 与 5.b.1).1.1 类似） b. 若不满足 a 中任意一个条件均不满足，步骤 4 执行完毕，继续往下查找。 5. 加载 node_modules `LOAD_NODE_MODULES(X, dirname(Y))` a. 从当前模块所在目录（即 `dirname(Y)`）开始，逐层查找是否 `node_modules/X` 是否存在，若找到就返回，否则继续往父级目录查找 `node_modules/X` ，依次类推，直到文件系统根目录。 b. 从全局目录（指 `NODE_PATH` 环境变量相关的目录）继续查找。若 `LOAD_NODE_MODULES` 过程查找到模块 X（可得到 X 对应的绝对路径，假定为 M），将按以下步骤查找查找： 1) 若 Node.js 版本支持 `exports` 字段（Node.js 12+）， 1.1 尝试将 `M` 拆分为 name 和 subpath 形式（下称 name 为 `NAME`）比如 `my-pkg` 拆分后，name 为 `my-pkg`，subpath 则为空（为空的话，对应 `exports` 的 "." 导出）。比如 `my-pkg/sub-module` 拆分后，name 为 `my-pkg`，subpath 为 `sub-module`。请注意带 Scope 的包，比如 `@myorg/my-pkg/sub-module` 拆分后 name 应为 `@myorg/my-pkg`，subpath 为 `sub-module`。 1.2 如果在 M 目录下存在 `NAME/package.json` 文件，而且 `package.json` 的 `exports` 字段是真值，然后根据 subpath 匹配 `exports` 字段配置，找到对应的模块（若 subpath 匹配不上的将会抛出异常）。请注意，由于 `exports` 支持条件导出，而且这里查找的是 CommonJS 模块，因此 `exports` 的 `node`、`require`、`default` 字段都是支持的，键顺序更早定义的优先级更高。 1.3 如果以上任意一个条件不满足的话，将继续执行 2) 步骤 2) 将 X 以绝对路径的形式查找模块（即前面的步骤 2），若找不到步骤 5 执行完毕，将会跑到步骤 6。 6. 抛出异常 "not found" </code></pre> <p>如果不是开发 NPM 包，在实际使用中的话，并没有以上那么多复杂的步骤，很容易理解。但深入了解之后有助于平常遇到问题更快排查出原因并处理掉。如果你是发包的话，可以利用 <code>exports</code> 等做条件导出模块。</p> <p>想了解 Node.js package.json 的两个字段的意义，请看：</p> <ul> <li><a href="http://nodejs.cn/api/packages.html#exports">exports</a>（Node.js 12 起支持）</li> <li><a href="http://nodejs.cn/api/packages.html#imports">imports</a></li> </ul> <h3>4.3 require 源码</h3> <p>源码 👉 <a href="https://github.com/nodejs/node/blob/34be1af5e17195dd9ce127e1daa7ab2bafd2df84/lib/internal/modules/cjs/loader.js#L989-L1003">node/lib/internal/modules/cjs/loader.js（Node.js v17.x）</a></p> <pre><code class="language-js">// Loads a module at the given file path. Returns that module's `exports` property. Module.prototype.require = function (id) { validateString(id, 'id') if (id === '') { throw new ERR_INVALID_ARG_VALUE('id', id, 'must be a non-empty string') } requireDepth++ try { return Module._load(id, this, /* isMain */ false) } finally { requireDepth-- } } </code></pre> <p>源码 👉 <a href="https://github.com/nodejs/node/blob/34be1af5e17195dd9ce127e1daa7ab2bafd2df84/lib/internal/modules/cjs/loader.js#L750-L846">node/lib/internal/modules/cjs/loader.js（Node.js v17.x）</a></p> <pre><code class="language-js">/** * 检查所请求文件的缓存 * 1. 如果缓存中已存在请求的文件，返回其导出对象（module.exports） * 2. 如果请求的是原生模块，调用 `NativeModule.prototype.compileForPublicLoader()` 并返回其导出对象 * 3. 否则，为该文件创建一个新模块并将其保存到缓存中。然后让它在返回其导出对象之前加载文件内容。 */ Module._load = function (request, parent, isMain) { let relResolveCacheIdentifier if (parent) { debug('Module._load REQUEST %s parent: %s', request, parent.id) // Fast path for (lazy loaded) modules in the same directory. The indirect // caching is required to allow cache invalidation without changing the old // cache key names. relResolveCacheIdentifier = `${parent.path}\x00${request}` const filename = relativeResolveCache[relResolveCacheIdentifier] if (filename !== undefined) { const cachedModule = Module._cache[filename] if (cachedModule !== undefined) { updateChildren(parent, cachedModule, true) if (!cachedModule.loaded) return getExportsForCircularRequire(cachedModule) return cachedModule.exports } delete relativeResolveCache[relResolveCacheIdentifier] } } // 1️⃣ 获取 require(id) 中 id 的绝对路径（filename 作为模块的标识符） const filename = Module._resolveFilename(request, parent, isMain) if (StringPrototypeStartsWith(filename, 'node:')) { // Slice 'node:' prefix const id = StringPrototypeSlice(filename, 5) const module = loadNativeModule(id, request) if (!module?.canBeRequiredByUsers) { throw new ERR_UNKNOWN_BUILTIN_MODULE(filename) } return module.exports } // 2️⃣ 缓动是否存在缓存 // 所有加载过的模块都缓存于 Module._cache 中，以模块的绝对路径作为键值（cache key） const cachedModule = Module._cache[filename] if (cachedModule !== undefined) { updateChildren(parent, cachedModule, true) if (!cachedModule.loaded) { const parseCachedModule = cjsParseCache.get(cachedModule) if (!parseCachedModule || parseCachedModule.loaded) return getExportsForCircularRequire(cachedModule) parseCachedModule.loaded = true } else { // 若该模块缓存过，则直接返回该模块的 module.exports 属性 return cachedModule.exports } } // 3️⃣ 加载 Node.js 原生模块（内置模块） const mod = loadNativeModule(filename, request) if (mod?.canBeRequiredByUsers) return mod.exports // 4️⃣ 若请求模块无缓存，调用 Module 构造函数生成模块实例 module const module = cachedModule || new Module(filename, parent) // 如果是入口脚本，将入口模块的 id 置为 "." if (isMain) { process.mainModule = module module.id = '.' } // 5️⃣ 将模块存入缓存中 // ⚠️⚠️⚠️ 在模块执行之前，提前放入缓存，以处理「循环引用」的问题 // See, http://nodejs.cn/api/modules.html#cycles Module._cache[filename] = module if (parent !== undefined) { relativeResolveCache[relResolveCacheIdentifier] = filename } let threw = true try { // 6️⃣ 执行模块 module.load(filename) threw = false } finally { if (threw) { delete Module._cache[filename] if (parent !== undefined) { delete relativeResolveCache[relResolveCacheIdentifier] const children = parent?.children if (ArrayIsArray(children)) { const index = ArrayPrototypeIndexOf(children, module) if (index !== -1) { ArrayPrototypeSplice(children, index, 1) } } } } else if ( module.exports && !isProxy(module.exports) && ObjectGetPrototypeOf(module.exports) === CircularRequirePrototypeWarningProxy ) { ObjectSetPrototypeOf(module.exports, ObjectPrototype) } } // 7️⃣ 返回模块的输出接口 return module.exports } </code></pre> <h3>4.4 require 中几个常见的问题</h3> <p>Q: Node.js 是如何实现同步加载机制的？ A:</p>  <p>未完待续...</p> <h2>参考链接</h2> <ul> <li><a href="https://exploringjs.com/es6/ch_modules.html#ch_modules">ECMAScript 6 Modules</a></li> <li><a href="https://addyosmani.com/writing-modular-js/">Writing Modular JavaScript With AMD, CommonJS & ES Harmony</a></li> <li><a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s02.html">Learning JavaScript Design Patterns by Addy Osmani</a></li> <li><a href="https://2ality.com/2011/04/modules-and-namespaces-in-javascript.html">Patterns for modules and namespaces in JavaScript</a></li> </ul> </article> <article> <h1>细读 JS | XSS、CSRF 浅谈</h1> <p>Sun, 26 Feb 2023 12:46:58 GMT</p> <p></p> <h2>一、前提</h2> <ul> <li>Cookie 常用于会话状态管理、个性化设置等。</li> <li>在浏览器可以通过 <code>document.cookie</code> 来访问 Cookie</li> <li>document.cookie 只能获取当前作用域下的 Cookie，这个作用域受 <code>Domain</code> 和 <code>Path</code> 共同影响。</li> </ul> <h2>二、CSRF 攻击</h2> <p>它与 Cookie 相关</p> <h3>1. 什么是 CSRF？</h3> <p>CSRF 是 Cross-Site Request Forgery 的简称，译为“跨站请求伪造”。</p> <p>我们知道，假设有两个网站 A 和 B：</p> <ul> <li>只要在 B 网站发起了 A 网站的 HTTP(S) 请求，这个就算是跨站请求（至于算不算攻击就另说）。</li> <li>当你访问并登录网站 A，服务器返回了一些 Set-Cookie 字段。若前往 B 网站，并在 B 网站发起了 A 网站的请求，这时候在 HTTP 请求头是会自动带上 A 网站的 Cookie 的（这里假定没有 Cookie 的 SameSite 限制）。</li> </ul> <p>关于第二点，可能会有人疑惑。</p> <p>先明确一下，通过 JS 脚本（<code>document.cookie</code>）只能获取本站下的 Cookie，换句话说，在 B 网站里只能获取 B 网站的 Cookie，是永远没有办法获取到网站 A 的 Cookie 的。这是脚本的行为。</p> <p>其次，在发起 HTTP 请求时，会有一种自动携带 Cookie 的行为。它会自动带上所请求 URL 对应站点的相关 Cookie。</p> <blockquote> <p>CSRF 攻击只是利用了 HTTP 请求自动携带 Cookie 的特性进行攻击，攻击者还是无法获取到被攻击网站的 Cookie 的。这与 XSS 不同，它是直接拿到被攻击网站的 Cookie，然后进行攻击。</p> </blockquote> <h3>2. 如何应当 CSRF？</h3> <h4>方案一：放弃 Cookie，使用 Token</h4> <p>既然 CSRF 是利用了 HTTP 请求自动携带 Cookie 的特性，伪造请求以达到欺骗服务器的目的。那么只要我们不使用 Cookie 的方式来验证用户身份，转用 Token 策略，就能完全避免 CSRF 攻击。</p> <h4>方案二：SameSite</h4> <p>这是 Chrome 51 引入的新特性，它有三个值：<code>None</code>、<code>Lax</code>、<code>Strict</code>。自 Chrome 80 起，Cookie 的 SameSite 默认值为 <code>Lax</code>（在不设置 SameSite 时，其默认值取决于浏览器的默认值）。亦可主动设置为 <code>None</code>，但与此同时，Cookie 必须设置为 <code>Secure</code>。</p> <p>这个特性可以解决 CSRF 攻击的问题，表示当前页面与请求的 URL 是相同的，才会携带上这个 Cookie。</p> <p>还是前面的例子，攻击者 B 网站与被攻击者 A 网站是不同域的，当在 B 网站内发起 A 网站的请求时，对应 Cookie 就不会携带上。</p> <blockquote> <p>但 SameSite 较新，在兼容性上可能不太好。</p> </blockquote> <h4>方案三：服务端 Referer 验证</h4> <p>在发起 HTTP 请求时，在请求头中会有 <code>Referer</code> 字段，它表示当前域的域名。服务端可以通过这个字段来判断请求是否来自“真正”的用户请求。</p> <p>但是 Referer 是可以伪造的，因此并不可靠。</p> <p>虽然 Referer 并不可靠，但用来防止图片盗链还是足够的，毕竟不是每个人都会修改客户端的配置。（一般只允许站内访问）</p> <blockquote> <p>需要注意的是，<code>Referer</code> 的正确英语拼法是 <strong>referrer</strong>。由于早期 HTTP 规范的拼写错误，为保持<a href="https://www.wikiwand.com/zh/%E5%90%91%E4%B8%8B%E5%85%BC%E5%AE%B9%22">向下兼容</a>就将错就错了。例如 <a href="https://www.w3.org/TR/DOM-Level-2-Core/">DOM Level 2</a>、<a href="https://w3c.github.io/webappsec-referrer-policy/#directive-referrer">Referrer Policy</a> 等其他网络技术的规范曾试图修正此问题，使用正确拼法，导致目前拼法并不统一。</p> </blockquote> <h2>三、XSS 攻击</h2> <p>XSS，是 Cross-Site Scripting 的简称，译为“跨站脚本攻击”。命名应该是为了与 CSS 进行区分。</p> <h3>1. 什么是 XSS？</h3> <p>XSS 是由于不安全的数据引起的，可能是提交表单数据，有可能是页面路径的参数问题。</p> <blockquote> <p>与 CSRF 不同的是，CSRF 是利用了 HTTP 自动携带 Cookie 的特性来达到攻击的目的，攻击者无法通过 JS 脚本获取到被攻击者的 Cookie 等信息的。而 XSS 则是利用一些不安全的数据，例如是一个 <code><script></code> 标签，然后获取到用户的一些信息，对其发起攻击。</p> </blockquote> <p>未完待续...</p> <h2>参考链接</h2> <ul> <li><a href="https://juejin.cn/post/6844904102544031757">彻底理解 Cookie 以及 Cookie 安全</a></li> </ul> </article> <article> <h1>细读 JS | 浅谈内存泄露、内存溢出</h1> <p>Sun, 26 Feb 2023 12:46:15 GMT</p> <p></p> <p>讲真，这两个概念很容易被混为一谈。</p> <h2>一、内存</h2> <p>在 JavaScript 中，没有像 C 语言等提供有内存管理接口，JavaScript 是在创建变量时自动进行分配内存，并且在不使用它们时“<strong>自动</strong>”释放。释放的过程被称为“<strong>垃圾回收</strong>”。</p> <blockquote> <p>这个“自动”就是混乱的根源，并让 JavaScript 开发者错误地认为他们可以不用关心内存管理。</p> </blockquote> <h3>内存的生命周期</h3> <p>不管什么程序语言，内存的生命周期基本是一致的：</p> <ol> <li>分配你所需要的内存</li> <li>使用分配到的内存（读、写）</li> <li>不需要时，将其释放/归还</li> </ol> <p>所有语言第二部分都是明确的。第一和第三部分在底层语言中是明确的，但在像 JavaScript 这些高级语言中，大部分都是隐含的。</p> <h3>内存管理的难题</h3> <p>大多数内存管理的问题都在“<strong>当内存不需要使用时释放</strong>”这个阶段。最困难的就是如何界定并找到“<strong>哪些被分配的内存确实不再需要了</strong>”。它往往要求开发人员来确定在程序中哪一块内存不再需要并且释放它。</p> <blockquote> <p>高级语言解释器嵌入了“垃圾回收器”，它的主要工作是跟踪内存的分配和使用，以便当分配的内存不再使用时，自动释放它。<strong>这只能是一个近似的过程，因为要知道是否仍然需要某块内存是<a href="http://en.wikipedia.org/wiki/Decidability_%28logic%29">无法判定的</a>（无法通过某种算法解决）</strong>。</p> </blockquote> <h3>垃圾回收（Garbage Collection，GC）</h3> <p>由于一些内存“不再需要”的问题无法判定，因此，垃圾回收实现只能有限制的解决一般问题。</p> <ul> <li> <p><strong>引用计数算法</strong> 最初的垃圾回收算法，它把“对象是否不再需要”简化为“对象有没有其他对象引用到它”。如果没有引用指向改对象（零引用），对象将被垃圾回收机制回收。但是这个算法有个限制，无法处理循环引用的情况。</p> <p>关于“引用”的概念，一个对象如果有访问另一个对象的权限（显式或隐式），叫做一个对象引用另一个对象。</p> </li> <li> <p><strong>标记清除算法</strong> 这个算法把“对象是否不再需要”简化定义为“对象是否可以获得”。</p> <p>这个算法假定设置一个叫做根对象（在 Javascript 里是 <code>globalThis</code> 对象）。垃圾回收器将定期从根开始，找所有从根开始引用的对象，然后找这些对象引用的对象……从根开始，垃圾回收器将找到所有可以获得的对象和收集所有不能获得的对象。</p> <p>它解决了早期算法无法处理循环引用的问题，但还是有一个限制：那些无法从根对象查询到的对象都将被清除（实际中很少会碰到这种情况）。</p> <p><strong>从 2012 年起，所有现代浏览器都使用了标记清除垃圾回收算法</strong>。所有对 JavaScript 垃圾回收算法的改进都是基于标记-清除算法的改进，并没有改进标记-清除算法本身和它对“对象是否不再需要”的简化定义。</p> </li> </ul> <p>所以，通常我们不会在全局作用域下进行过多的变量或函数声明，更推荐将它们放在立即执行函数表达式（IIFE）内进行声明。否则它们将无法被垃圾回收，即在程序的生命周期内一直存在。</p> <blockquote> <p>这一小节提到的“对象”，不仅特指 JavaScript 对象，还包括函数作用域、全局作用域。</p> </blockquote> <h2>二、内存泄露、溢出</h2> <h3>区别</h3> <p>这两个概念是存在区别的。</p> <ul> <li> <p><strong>内存溢出</strong>（Out of Memory）当系统无法提供应用程序所需内存时，会导致应用程序抛出内存溢出的错误。</p> </li> <li> <p><strong>内存泄露</strong>（Memory Leak）应用程序中一些被分配的内存，在使用完之后，没有及时被垃圾回收器进行回收（释放），导致一部分无效的内存被占用着。</p> </li> </ul> <blockquote> <p>当内存泄露积累到一定程度，就会发生内存溢出。而内存溢出导致的结果是应用程序被杀死。</p> </blockquote> <h3>场景</h3> <ol> <li>内存溢出</li> </ol> <pre><code class="language-js">const obj = {} for (let i = 0; i < 10000; i++) { obj[i] = new Array(1000000) } // 将会崩溃 </code></pre> <ol start="2"> <li>内存泄露</li> </ol> <ul> <li>意外的全局变量</li> <li>闭包</li> <li>setInterval 没有及时清除</li> <li>DOM 引用未移除</li> <li>...</li> </ul> <p>未完待续...</p>  </article> <article> <h1>细读 JS | Cookie 详解</h1> <p>Sun, 26 Feb 2023 12:41:15 GMT</p> <p></p> <h2>Cookie 简述</h2> <h3>Cookie 是什么？</h3> <p>“Cookie” 这个词没有太多的含义，在计算机学科中很早就出现了，用来表示少量文本数据。</p> <p>在前端领域，我认为 Cookie 的概念是很模糊的。有的时候，可以将它理解为一个小型文本，也可以理解为一种客户端（下称“浏览器”）与服务端（下称“服务器”）交互的一种存储机制。比如，同事 A 说让我看看那个 XXX Cookie 是多少，它具体指浏览器中存储的一小块文本。如果将 Cookie 与服务器 Session 放一起描述的时候，它指的是一种交互机制。</p> <p>Cookie 是不安全的，原因是它本身没有采用任何加密机制。通过 HTTPS 来传输 Cookie 数据是安全的，它与 Cookie 本身无关，与 HTTPS 协议相关。</p> <p>在 Web 中，Cookie 可被服务器、浏览器进行读写操作。在浏览器与服务器进行交互的过程中，浏览器会将任意 Cookie 写入 HTTP 头部，传输给服务端。随着 Web 的飞速发展，出于安全性的考虑，标准与浏览器都在往前走，因而并不是所有 Cookie 都会出现在 HTTP 头部。具体行为下文再谈。</p> <blockquote> <p>Cookie 是一个小型文本文件，用于浏览器与服务器的数据传输。</p> </blockquote> <h3>为什么需要 Cookie？</h3> <p>我们都知道 HTTP 是无状态的。通俗地讲，同一浏览器连续发送 HTTP 请求两次，服务器也无法识别到两个请求是来自同一客户端的。</p> <p>但并不意味着，HTTP 协议的无状态是不好的。只是一些场景下，我们需要来维护“状态”（指的是客户端与服务端会话的状态，而不是说给 HTTP 协议加个状态，这是不对的，也无法做到）。</p> <p>比如，网上购物、网络聊天、发布评论等场景，是需要维护状态的。试想一下，如果没有状态，你添加至购物车的商品，刷新下页面就不见了，那还不得急......解决方案也很多，比如给请求打上一个“<strong>标记</strong>”即可，在添加至购物车的请求上带上 <code>userId</code> 和 <code>goodsId</code> 并发送服务端，服务端拿到这些信息就可以区分来自哪个用户的了，并存储到相应的表。这里提到的 <code>userId</code>、<code>goodsId</code> 都是标记。</p> <p>那一系列的问题来了，标记来自哪里、如何存储、发送请求如何带上、服务端如何接受？</p> <ul> <li>标记一般来自服务端</li> <li>客户端存储标记的方式有很多，比如常见的有：全局变量、<code>Cookie</code>、<code>sessionStorage</code>、<code>localStorage</code>，再有更新的 <code>IndexedDB</code>、<code>Cache API</code> 等接口。</li> </ul> <p><code>Cookie</code> 仅仅只是其中一种存储方式而已，但它可以做到在服务端写、客户端读，然后发起请求时，自动携带在 HTTP 头部，服务端可以接收到。是一种可以做到无感的读写方案。同时，正是因为这种请求时自动带上的机制，被一些别有用心的人利用它来做一些坏事，比如 XSS、CSRF 等。</p> <blockquote> <p>在这些存储方案里，<code>Cookie</code> 是最早出现的，所有浏览器都支持。随着 Web Storage 的发展，又出现了诸如 <code>sessionStorage</code>、<code>localStorage</code> 等方案。如果还不够用，还有可存储大量结构化数据的解决方案 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API">IndexedDB</a>。</p> <p>随着 Web Storage 的普及，Cookie 将会回到最初的形态，作为一种被服务端脚本使用的客户端存储机制。</p> </blockquote> <h2>Cookie 属性</h2> <blockquote> <p>往下之前，可以先看下这篇文章：<a href="https://github.com/tofrankie/blog/issues/275">Cookie 和 Storage API 区别与详解</a>。</p> </blockquote> <p>Cookie 主要是用来服务服务器的，在浏览器里，每个域 Cookie 的空间限制不超过 <code>4K</code>，因而不适宜用于存储与服务器无关的数据。</p> <p>以下这些元数据，用来表示 Cookie 的文本数据、有效期、作用域、可访问性。</p> <ul> <li><strong><code>Name</code>、<code>Value</code></strong> - 对应 Cookie 的名称和真实数据。</li> <li><strong><code>Domain</code>、<code>Path</code></strong> - 决定谁可以读写这个 Cookie，类似于作用域。</li> <li><strong><code>Expires</code>、<code>Max-Age</code></strong> - 决定了这个 Cookie 的寿命（有效期）。</li> <li><strong><code>Secure</code>、<code>HttpOnly</code></strong> - 用来应对 XSS（跨站脚本攻击）。</li> <li><strong><code>SameSite</code></strong> - 用来应对 CSRF（跨站请求伪造）。</li> </ul> <p>先看看一个真实的 Cookie 吧，如下：</p> <p></p> <h3>Name、Value</h3> <p>没什么好说的，对应 Cookie 的名称和数据，属于 <code>Key-Value</code> 键值对形式。Cookie 一旦创建，名称就不能更改了。Value 通常要进行编码处理。</p> <h3>Domain、Path</h3> <p>Domain 决定了浏览器发出 HTTP 请求时，哪些域名会携带这个 Cookie。Path 则在 Domain 的基础上，进一步约束了该 Cookie 的可访问路径。</p> <p>注意点：</p> <ul> <li>若没有指定 Domain 属性，则默认设为当前 URL 的域名，即对应 <code>window.location.host</code> 或 <code>document.domain</code> 的值。</li> <li>若没有指定 Path 的话，默认为 <code>/</code>。</li> <li>另外，在百度的页面下，不能将 Domain 设置成阿里的。即使不会报错，但它无效的，浏览器会自动忽略。</li> </ul> <p>举个例子：</p> <p>假设 Cookie 的 Domain 是 <code>.example.com</code>，那么发起 <code>a.example.com</code> 或 <code>b.example.com</code> 域名下的 HTTP 请求，都会携带该 Cookie，反之不行。</p> <p>假设 Cookie 的 Path 为 <code>/user</code>，那么请求路径为 <code>/user/1</code> 会带上；若请求路径为 <code>/</code> 或 <code>/config</code> 则不会带上。</p> <p>通俗地讲，</p> <blockquote> <p>Domain：你是 A 公司的员工，那么 B 公司就不能使唤你。 Path：你是 C 部门的人，那么 D 部门就不能使唤你干活。</p> </blockquote> <h3>Expires、Max-Age</h3> <ul> <li>若没有指定 Expires 和 Max-Age 时，这个 Cookie 属于 Session Cookie，退出浏览器就会被清除。</li> <li>Expires 用于设置 Cookie 的过期时间，它的值是 UTC 格式。</li> <li>Max-Age 用于指定从现在开始 Cookie 存在的秒数，比如：<code>60 * 60 * 24 * 7</code> 表示一周。</li> <li>若同时指定 Expires 和 Max-Age，那么 Max-Age 优先生效。</li> <li>若到了失效时间，浏览器会自动清除相应的 Cookie。</li> </ul> <p>注意点：</p> <ul> <li>Session Cookie 退出浏览器时，有些浏览器不一定会清除，原因请看<a href="https://github.com/tofrankie/blog/issues/275">这里</a>。</li> <li>Expires 依赖于本地系统时间，因此是不可靠的。而 Max-Age 则与本地时间无关，它总会在设置完的多少秒之后失效。</li> <li>若想通过脚本去删除某个 Cookie，可以将 Expires 设为过去的时间，比如 <code>new Date(0)</code>。也可将 Max-Age 设为 <code>0</code>。</li> <li>将 Max-Age 设为负数，也相当于会话级 Cookie。</li> <li>在 HTTP/1.0 是通过 Expires 来判断的，而 HTTP/1.1 则通过 Max-Age 来判断，若无此参数，则降级使用 Expires 判断。</li> </ul> <h3>Secure、HttpOnly</h3> <p>Secure：</p> <ul> <li>若 Cookie 指定了 Secure，它只会在 HTTPS 请求中携带上。</li> <li>若当前协议是 HTTP，那么浏览器会自动忽略服务器发来的 Secure 属性。</li> <li>Secure 只是一个开关，不需要指定值。如果通信协议是 HTTPS 协议，通过服务器写入的方式，将会自动打开。</li> </ul> <p>HttpOnly：</p> <p>若 Cookie 指定了 HttpOnly 属性，那么这个 Cookie 将无法通过 JavaScript 脚本获取。只有在浏览器发出 HTTP 请求时才会携带上该 Cookie。这个主要是用来解决 XSS 攻击的。</p> <h3>SameSite</h3> <p>在 Chrome 51 中引入这个 SameSite 属性，那时默认值为 None。<strong>从 Chrome 80 开始，默认值改为 Lax</strong>。</p> <p>Cookie 的 SameSite 属性用来限制第三方 Cookie，从而减少安全风险。它可以设置三个值：</p> <ul> <li><code>Strict</code> - 最为严格，完全禁止第三方 Cookie，跨站请求时，任何情况都不会发送 Cookie。只有当前页面 URL 与请求 URL 一致，才会带上 Cookie。</li> <li><code>Lax</code> - 规则稍稍放宽，大多数情况下，也是不发送第三方 Cookie，但是导航到目标网站的 GET 请求除外，只包括三种情况：链接，预加载请求，GET 表单（详见下表）。</li> <li><code>None</code> - 若浏览器的 SameSite 不为 None 时，网站可以显式关闭 SameSite 属性，将其设为 None。不过前提是必须同时设置 Secure 属性（Cookie 只能通过 HTTPS 协议发送），否则无法显式关闭，即设置无效。</li> </ul> <table> <thead> <tr> <th>请求类型</th> <th>示例</th> <th>None</th> <th>Lax</th> </tr> </thead> <tbody> <tr> <td>链接</td> <td><code><a href="..."></a></code></td> <td>发送 Cookie</td> <td>发送 Cookie</td> </tr> <tr> <td>预加载</td> <td><code><link rel="prerender" href="..."/></code></td> <td>发送 Cookie</td> <td>发送 Cookie</td> </tr> <tr> <td>GET 表单</td> <td><code><form method="GET" action="..."></code></td> <td>发送 Cookie</td> <td>发送 Cookie</td> </tr> <tr> <td>POST 表单</td> <td><code><form method="POST" action="..."></code></td> <td>发送 Cookie</td> <td>不发送</td> </tr> <tr> <td>iframe</td> <td><code></code></td> <td>发送 Cookie</td> <td>不发送</td> </tr> <tr> <td>AJAX</td> <td><code>$.get("...")</code></td> <td>发送 Cookie</td> <td>不发送</td> </tr> <tr> <td>Image</td> <td><code></code></td> <td>发送 Cookie</td> <td>不发送</td> </tr> </tbody> </table> <p>设置了 <code>Strict</code> 或 <code>Lax</code> 以后，基本就杜绝了 CSRF 攻击。当然，前提是用户浏览器支持 <code>SameSite</code> 属性。</p> <p>设置为 Strict</p> <pre><code>Set-Cookie: CookieName=CookieValue; SameSite=Strict; </code></pre> <p>设置为 Lax</p> <pre><code>Set-Cookie: CookieName=CookieValue; SameSite=Lax; </code></pre> <p>设置为 None</p> <pre><code>// ❌ 无效 Set-Cookie: widget_session=abc123; SameSite=None // ✅ 有效 Set-Cookie: widget_session=abc123; SameSite=None; Secure </code></pre> <p><strong>额外地，Cookie 和 CSRF 的关系是什么？</strong></p> <p>CSRF 攻击，仅仅是利用了 HTTP 携带 Cookie 的特性进行攻击的，但是攻击站点还是无法得到被攻击站点的 Cookie。这个和 XSS 不同，XSS 是直接通过拿到 Cookie 等信息进行攻击的。</p> <h3>Priority</h3> <p>优先级，这是 Chrome 的提案，定义了三种优先级，Low/Medium/High，当 cookie 数量超出时，低优先级的 cookie 会被优先清除。在 Safari 和 FireFox 中，不存在 Priority 属性。</p> <p>不同浏览器有不同的清除策略：一些是替换掉最先（老）的 Cookie，有些则是随机替换。</p> <h3>SameParty</h3> <p>前面不是提到 SameSite 会禁用第三方 Cookie 嘛，这个 SameParty 就是为了合法地使 Cookie 在一些第三方站点下也可使用（指的是发起 HTTP 请求时会带上）。它需要配合 First-Party Sets 策略使用。</p> <pre><code class="language-text">Set-Cookie: name=frankie; Secure; SameSite=Lax; SameParty </code></pre> <blockquote> <p>这个是新特性，更多请看<a href="https://cloud.tencent.com/developer/article/1874999">这里</a>。</p> </blockquote> <h2>Cookie 读写</h2> <p>我们知道，Cookie 的读写是有差异的，读取的时候可以一次性获取当前作用域下的所用 Cookie，而写入的时候只能一条一条地进行写入操作。这跟浏览器与服务器之间 Cookie 的通信格式有关。浏览器向服务器发送 Cookie 的时候，是一行将所有 Cookie 全部发送。</p> <blockquote> <p>关于 <code>document.cookie</code> 的读写差异，就是对象的 <code>set/get</code> 的原因。</p> </blockquote> <p>通过以下方式，可以窥探一二，可以知道它们都是函数。但由于是原生的内置方法，因此无法打印出具体的函数内容。</p> <pre><code class="language-js">// 这种方式已废弃 document.__lookupSetter__('cookie') // ƒ cookie() { [native code] } document.__lookupGetter__('cookie') // ƒ cookie() { [native code] } // 现在标准推荐用这个，但注意要 Document.prototype 上面找，因为它不会往原型上找的。 const descriptor = Object.getOwnPropertyDescriptor(Document.prototype, 'cookie') descriptor.set // ƒ cookie() { [native code] } descriptor.get // ƒ cookie() { [native code] } // 若要覆盖，可以这样写（实际项目中千万别重写，除非另起名称） Object.defineProperty(document, 'cookie', { set: function () { console.log('custom setter method...') // do something... }, get: function () { console.log('custom getter method...') // do something and return some value } }) </code></pre> <h3>浏览器禁用 Cookie</h3> <p>通过以下语句，可判断浏览器是否打开了 Cookie 功能，返回一个布尔值。</p> <pre><code>window.navigator.cookieEnabled // true 开启 </code></pre> <p>若关闭了 Cookie 功能，无论是服务器 Set-Cookie，还是客户端通过 JS 脚本，都无法写入 Cookie。同样地，发起 HTTP 请求也将无法携带。</p> <h3>写入 Cookie</h3> <p>在服务端，各种后端语言或框架林立，写入 Cookie 的方式也各不相同。下面以 <a href="http://expressjs.com/en/4x/api.html#res.cookie">express</a> 为例：</p> <pre><code class="language-js">import express from 'express' const app = express() const port = 8080 app.get('/', (req, res) => { // 通常 name 和 value 会经过编码处理的，像 express 默认采用 encodeURIComponent 进行编码处理，亦可在以下可选项中传入 encode 属性，它接受一个函数。 res.cookie('cookie-name', 'cookie-value', { // 以下为可选项 // domain, // 默认为 URL 对应域名（注意是服务器 URL） // path, // 默认为 / // expires, // 默认不设置，即会话级 Cookie // maxAge, // 默认不设置，即会话级 Cookie // secure, // 默认，根据请求协议决定是否开启。若 HTTP 请求，设置了 true，将无法写入浏览器 // httpOnly, // 默认为 false // sameSite // 默认不设置，此时它的值取决于浏览器的默认值。比如 Chrome 80 之后，即使你在浏览器看到的是空的，但它的默认值为 Lax。 }) // 可写入多个 res.cookie('other', '123') // other statements... }) app.listen(port) </code></pre> <p>在客户端写入，只能通过 <code>document.cookie</code> 进行设置。注意，它只能为当前域写入 Cookie。假设你在个人网站设置：<code>name=Frankie; Domain=github.com</code> 是无效的。</p> <pre><code class="language-js">document.cookie = 'name=Frankie; domain=*.example.com; path=/user; expires=Fri, 31 Dec 9999 23:59:59 GMT; max-age=3600; sameSite=Lax; secure; HttpOnly' </code></pre> <blockquote> <p>在浏览器里，通过 JS 脚本的方式，似乎无法写入 <code>HttpOnly</code> 的 Cookie。（待进一步验证）</p> </blockquote> <p>这样设置太麻烦了，我们通常会封装一个方法来添加、修改、删除、检查 Cookie，请看：<a href="https://github.com/tofrankie/utils/blob/main/src/cookie.js">cookie.js</a>。</p> <p>未完待续...</p> </article> <article> <h1>Promise 不能被取消，真的算是缺点吗？</h1> <p>Sun, 26 Feb 2023 12:40:39 GMT</p> <p></p> <p>前两天面试的时候，面试官问到 Promise 有哪些缺点？</p> <p>我的回答是，在处理多个异步操作时，需要编写多个 <code>then()</code> 或 <code>catch()</code> 方法来处理结果，尽管可以有效解决回调地狱（Callback Hell），但也会有纵向发展的趋势，不够优雅。</p> <p>就没想起以下这几点：</p> <ol> <li>无法取消 Promise，一旦创建它就会立即执行，无法中途取消；</li> <li>在不设置回调函数情况下，Promise 内部抛出错误，不会反馈到外部；</li> <li>当处于 pending 状态，无法得知目前进展到哪个阶段。</li> </ol> <p>哦，原来上面这些是它的缺点啊，当时就没往这方面想。</p> <p>但是细想一下，第一点真的算是它的缺点吗？</p> <p>有兴趣的话，请看以下两个问答：</p> <ul> <li><a href="https://www.zhihu.com/question/495412354">Promise 不能被取消，真的算是它的缺点吗？</a></li> <li><a href="https://segmentfault.com/q/1010000009781257">为什么说 Promise 不能取消是一个缺点？</a></li> </ul> </article> <article> <h1>0.1 + 0.2 为什么不等于 0.3？</h1> <p>Sun, 26 Feb 2023 12:40:05 GMT</p> <p></p> <p><code>0.1</code> 和 <code>0.2</code> 在转换成二进制后会无限循环，由于标准位数的限制后面多余的位数会被截掉，此时就已经出现了精度的损失，相加后因浮点数小数位的限制而截断的二进制数字在转换为十进制就会变成 <code>0.30000000000000004</code>。</p> <p>众所周知，JavaScript 中表示数值类型为 Number，而 Number 采用的是 IEEE 754 64 位双精度浮点数编码。</p> <p>也就是说，不仅是 JavaScript 会产生这种问题，只要是采用 IEEE 754 Floating-point 的浮点数编码方式来表示浮点数时，则会产生这类问题。</p> <p>相关链接：</p> <ul> <li><a href="https://0.30000000000000004.com/">https://0.30000000000000004.com/</a></li> <li><a href="https://www.cnblogs.com/fsjohnhuang/p/5115672.html">JS魔法堂：彻底理解 0.1 + 0.2 === 0.30000000000000004 的背后</a></li> <li><a href="https://segmentfault.com/a/1190000011913127">如何解决 0.1 +0.2 === 0.30000000000000004 类问题</a></li> <li><a href="https://github.com/camsong/blog/issues/9">JavaScript 浮点数陷阱及解法</a></li> </ul> </article> <article> <h1>Cookie 和 Storage API 区别与详解</h1> <p>Sun, 26 Feb 2023 12:38:59 GMT</p> <p></p> <p>它们都是浏览器数据存储的方案，是用于解决<strong>数据持久化</strong>的问题。除此之外，数据也可以存储在内存中（比如挂载到 <code>window</code> 等全局对象下），但这种方式每当页面刷新就会丢失。</p> <p>下面分别从几个方面，详细地介绍 <code>Cookie</code>、<code>sessionStorage</code>、<code>localStorage</code> 的区别。</p> <h2>空间限制</h2> <ul> <li><code>Cookie</code> - 大小约为 <code>4K</code>。</li> <li><code>sessionStorage</code> 和 <code>localStorage</code> - 大小约为 <code>5M</code>。</li> </ul> <p>请注意，其中 Cookie 的空间大小指的是 <code>name</code>、<code>value</code> 以及 <code>=</code> 号。</p> <p>另外，这三个不同浏览器下可能会有细微的差异，可忽略。</p> <blockquote> <p>在所有浏览器中，若 Cookie 大小已超出空间限制，后续设置的新 Cookie 就会被忽略。</p> </blockquote> <h2>数量限制</h2> <ul> <li><code>sessionStorage</code> 和 <code>localStorage</code> 无数量限制一说。</li> <li><code>Cookie</code> 是有数量限制的。</li> </ul> <p>下表为网上收集（非当前实测结论），看一眼知道有限制这回事就好。</p> <table> <thead> <tr> <th>浏览器</th> <th>大小</th> <th>数量</th> </tr> </thead> <tbody> <tr> <td>IE6</td> <td>4095 个字节</td> <td>每个域 20 个</td> </tr> <tr> <td>IE7/8</td> <td>4095 个字节</td> <td>每个域 50 个</td> </tr> <tr> <td>Opera</td> <td>4096 个字节</td> <td>每个域 30 个</td> </tr> <tr> <td>FireFox</td> <td>4097 个字节</td> <td>每个域 50 个</td> </tr> <tr> <td>Safari</td> <td>4097 个字节</td> <td>没有数量限制</td> </tr> <tr> <td>Chrome</td> <td>4097 个字节</td> <td>每个域 53 个</td> </tr> </tbody> </table> <blockquote> <p>若有兴趣，实测可以看这个网站：<a href="http://browsercookielimits.iain.guru/">Browser Cookie Limits</a>。作者简单跑了下，Chrome 每个域是 180 个；Firefox 很快卡住了，风扇嗡嗡响...... 测试结果 Firefox 和 Safari 都 N/A（没数据），应该是没数量限制吧。</p> </blockquote> <p>鉴于各浏览器对 <code>Cookie</code> 的空间、数量限制不完全相同，为了较好地兼容，建议如下：</p> <ul> <li>总共 300 个 Cookie</li> <li>每个 Cookie 大小为 4096 个字节</li> <li>每个域 20 个 Cookie</li> <li>每个域 81920 个字节（20 × 4096）。</li> </ul> <p>没错，面试官问到这么说吧，应该就 OK 了。</p> <p>另外，与超出空间限制不同的是，超出数量限制之后，是可以继续添加 <code>Cookie</code> 的，但不同浏览器有不同的策略：一些是替换掉最先（老）的 <code>Cookie</code>，有些则是随机替换。作简单了解就好，一般项目不会设那么多的，而且 <code>Cookie</code> 过期浏览器是会自动清除的。</p> <h2>有效期</h2> <ul> <li><code>Cookie</code> - 有效期是由 Max-Age 或 Expires 决定的。当 <code>Cookie</code> 过期或失效，由浏览器自动删除。 <ul> <li>若在设置 <code>Cookie</code> 时不写入这两个属性，那么它的就是会话级别的，即退出浏览器会被销毁。</li> <li>若同时存在时，<code>Max-Age</code> 优先级更高。</li> </ul> </li> <li><code>SessionStorage</code> - 在浏览器标签（或窗口）关闭之前均有效。刷新页面不影响。</li> <li><code>localStorage</code> - 若不主动清除，永久有效（“主动”是指由浏览器或脚本清除）。</li> </ul> <blockquote> <p>请注意：</p> <p>讲道理的话，会话级的 <code>Cookie</code> 在浏览器退出时就会被删除。但是有些浏览器不讲武德，比如 Chrome。在某些情况下，关闭浏览器重新进入，会话级别的 Cookie 并不会删除，在 Application 选项的 Cookie 栏还能看到。</p> <p>原因可能是：<strong>Chrome - 设置 - 启动时</strong> 选择了 <strong>打开新标签</strong> 之外的选项。切换过来就好了...</p> </blockquote> <h2>作用域</h2> <h3>同源与同站</h3> <p>同源和同站的区别：</p> <ul> <li><strong>同源</strong>（Same-Origin）：协议（protocol）+ 主机名（hostname）+ 端口（port）完全一致。</li> <li><strong>同站</strong>（Same-Site）：<code>eTLD + 1</code> 完全一致。</li> </ul> <p>顶级域名和二级域名：</p> <ul> <li><strong>顶级域名</strong>：也称为“一级域名”，常见的有 <code>.com</code>、<code>.cn</code>、<code>.org</code>、<code>.net</code> 等等，需要注意的是像 <code>.com.cn</code>、<code>.com.hk</code> 也属于顶级域名。</li> <li><strong>二级域名</strong>：就是顶级域名的下一级域名。</li> </ul> <blockquote> <p>在国内，很多资料认为，顶级域和一级域是分开的。比如 <code>.baidu.com</code>，如果按照这种方式划分，那么<code>.com</code> 是顶级域名，<code>.baidu.com</code> 就是一级域名。好像阿里云就是这样定义的。</p> </blockquote> <blockquote> <p>而我更偏向于认为，<code>.baidu.com</code> 属于二级域名。不用过分纠结，在团队内统一即可。</p> </blockquote> <p><a href="https://publicsuffix.org/list/public_suffix_list.dat"><code>eTLD</code></a>（Top-Level Domains）表示有效顶级域名，那么 <code>eTLD + 1</code> 就表示二级域名。例如：</p> <pre><code class="language-text">https://www.example.com.cn </code></pre> <p>其中 <code>eTLD</code> 是 <code>.com.cn</code>，那么 <code>eTLD + 1</code> 就是 <code>.example.com.cn</code>。</p> <blockquote> <p>关于 eTLD 更多请看<a href="https://juejin.cn/post/6877496781505200142">这里</a>。</p> </blockquote> <p>完整的 URL（网址）构成如下：</p> <p></p> <p>简单来说，只要二级域名相同，就属于同站。同源则要求更严格。因此同源一定同站，反之则不一定。</p> <p>以下例子，同站，但不同源。</p> <pre><code class="language-text">http://a.example.com:80 http://b.example.com:80 </code></pre> <h3>三者的作用域</h3> <ul> <li><code>localStorage</code> - 这个最简单，必须<strong>同源</strong>才能访问，在不同标签（或窗口）之间可共享。</li> <li><code>sessionStorage</code> - <strong>必须同源，且不同标签（或窗口）之间是不能共享的</strong>（这点上盲猜挺多人会理解错的，我当初也理解错了）。</li> <li><code>Cookie</code> - <strong>同站</strong>是前提，它还受限于具体的 <code>Domain</code> 和 <code>Path</code>。</li> </ul> <p>理解这些很重要，为什么这么说呢？</p> <h3>作用域引发的问题</h3> <p>很多公司，不是每个 Web 项目对应一个三级域名。</p> <pre><code class="language-text">// 主营业务、较为重要的业务，可能会这样去区分： https://project-a.company.com https://project-b.company.com // 但一些非业务性、或者一些小项目，很可能是这样的： https://sub.company.com/project-a/index.html https://sub.company.com/project-b/index.html </code></pre> <p>这些都很常见，那么问题来了。它们很多都是同源、同站的。假设按小项目划分场景，我在 <code>a</code> 项目中设置了一个 <code>sessionStorage</code> 会话级缓存，那么当前从 <code>a</code> 项目跳转至 <code>b</code> 项目时，<code>b</code> 是可以获取到 <code>a</code> 项目的所有 <code>sessionStorage</code> 的，反之也成立。如果 <code>a</code> 和 <code>b</code> 项目中某个 <code>sessionStorage</code> 的 <code>key</code> 不小心设置成相同的话，那很可能就会影响到对方。<code>localStorage</code> 同理。至于 <code>Cookie</code> 的话，由于它的空间限制最大只允许 4K，因此不适宜存过多数据，一般会存一些像鉴权信息等比较多。同个公司，业务的用户鉴权等是相似的，所以 <code>Cookie</code> 的访问机制也不会有太大的影响。</p> <p>针对这些问题，建议是非必要的话，将数据存在内存中，比如用 Vuex、Redux、MobX 等状态管理工具来维护应用的状态。一是信息更不容易暴露，而是可以减少 IO 的读写。但是，这样的话，就要解决数据持久化的问题，因为在内存中的话，只要刷新页面就会丢失。怎么解决？</p> <p>以 Redux 为例，在创建 Store 时，是可以传入一个初始状态的，它的值取下面这个会话缓存即可。只要监听到状态发生变化变化，并设置或更新 <code>sessionStorage</code> 级别的缓存，将状态缓存起来即可。比如：</p> <pre><code class="language-js">import { createStore } from 'redux' // 定义一个可按项目划分的 key const { host, pathname } = window.location const stateCacheKey = `cache_state_${host}_${pathname}` // 设置 store 的初始值，取 stateCacheKey 缓存的值，首次为空对象 const initialState = JSON.parse(sessionStorage.getItem(stateCacheKey)) || {} // 创建 Store（reducers、middlewares 非本文讨论重点省略...） const reducers = (state = {}, action) => { /* some reducers... */ } const store = createStore(reducers, initialState) // 这里省略了中间件 // 监听状态，每次状态变化 stateCacheKey 都得以更新 const unsubscribe = store.subscribe(() => { const currentStateStr = JSON.stringify(store.getState()) window.sessionStorage.setItem(stateCacheKey, currentStateStr) }) // 解除监听，这样 store.unsubscribe() 调用即可 store.unsubscribe = unsubscribe // 个人习惯，也将 store 挂载全局，以备特殊情况调用 window.store = store // 作为模块导出，并传入 react-redux 的 Provider 组件 export default store </code></pre> <h3>sessionStorage 鲜为人知的点（冷门）</h3> <blockquote> <p>下面例子，均在同源情况下。</p> </blockquote> <p>假设有两个同源页面： A 页面、B 页面对应 URL 为 <code>page_a_url</code>、<code>page_b_url</code>。</p> <p>示例一：</p> <pre><code class="language-js">// 1. 在 A 页面，设置一个会话缓存：keyA sessionStorage.setItem('keyA', '123') // 2. 若 A 有一个链接，可跳转至 B 页面（将会以新窗口的形式打开 B 页面） <a target="_blank" href="page_b_url">To Page B</a> // 3. 点击链接，跳转到 B 页面 sessionStorage.getItem('keyA') // ❓ 打印结果是什么？ // 4. 接着，在 B 页面中，设置另一个会话缓存：keyB sessionStorage.setItem('keyB', '456') // 5. 切换至 A 页面，打印一下： sessionStorage.getItem('keyB') // ❓ 打印结果又是什么？ // 6. 在 A 页面中再次设置一个缓存：keyB sessionStorage.setItem('keyB', '789') // 7. 再次切换至 B 页面的窗口， sessionStorage.getItem('keyB') // ❓ 打印结果是 "456" 还是 "789" 呢？ </code></pre> <p>示例二：将上述第二步改成下面这样：</p> <pre><code class="language-html"><a onclick="window.open('page_b_url', 'DescriptiveWindowName')">To Page B</a> </code></pre> <p>结果又是什么呢？直接看下结果：</p> <pre><code class="language-text">示例一，依次打印出：null、null、"456" 示例二，依次打印出："123"、null、"456" </code></pre> <p>结论：</p> <ul> <li> <p>同一标签（或窗口）下，所有同源页面将共享 <code>sessionStorage</code>，同样地，在某个页面修改，将影响其他页面。</p> </li> <li> <p>通过 <code><a target="_blank" href="page_b_url"></a></code> 或 <code>window.open('page_b_url', 'windowName')</code> 方式打开其他同源页面，有以下特点：</p> <ul> <li>两个 Tab 之间的 <code>sessionStorage</code> 是独立的，互不影响。</li> <li>区别点在于，打开新窗口时，初始缓存不一样：前者的初始 <code>sessionStorage</code> 缓存为空。后者基于原 Tab 的 <code>sessionStorage</code> 拷贝一份，作为新窗口的初始 <code>sessionStorage</code> 缓存。</li> <li>前者表现与手动创建新窗口是一致的。</li> </ul> </li> <li> <p>需要另外一种情况，当在某页面内嵌套了一个同源的 <code>iframe</code>，它们之间 <code>sessionStorage</code> 是共享的。若非同源页面则不共享。（这一点不完全严谨，具体原因请往下看）</p> </li> </ul> <h3>总结</h3> <ul> <li><code>Cookie</code> 作用域前提是同站，同时还受限于 <code>Domain</code> 和 <code>Path</code>。若两者一致，即可理解为同站共享。</li> <li><code>sessionStorage</code> 和 <code>localStorage</code> 前提必须是同源，其次前者在不同标签（或窗口）相互独立；后者在所有标签之间共享。</li> <li>除此之外，以不同方式创建新标签（或窗口），它的 <code>sessionStorage</code> 初始值会有所差异。通过 <code>window.open()</code> 方式，会将原来先的 <code>sessionStorage</code> 值拷贝过来，作为其初始值；其他方式初始缓存为空。但注意，后续的 <code>sessionStorage</code> 读写操作都是独立对。</li> </ul> <h2>与服务器通信的差异</h2> <p><code>sessionStorage</code> 和 <code>localStorage</code> 不会主动参与与服务器的通信。</p> <p>Cookie 是保存在浏览器上的一小型文本文件。在每次与服务器的通信中都会携带在 HTTP 请求头之中。</p> <blockquote> <p>但是会有一些限制，另起一文，请稍等...</p> </blockquote> <h2>其他</h2> <h3>storage 事件的迷惑行为</h3> <p>首先，注册 <code>storage</code> 事件监听器，它<strong>只能</strong>监听<strong>其他同源页面</strong>的缓存<strong>发生改变</strong>时，它才会被触发。</p> <p>得出几个结论：</p> <ul> <li>用于监听其他页面的缓存变化，而同一页面内的缓存变化，都不起作用。（奇葩吧）</li> <li>由于不同 Tab 之间 <code>sessionStorage</code> 是独立的，因此无法监听 <code>sessionStorage</code> 的变化，即只能监听 <code>localStorage</code> 的变化。</li> <li>“发生改变”包括：创建、更新、删除。但重复设置相同的 key-value 不会触发该事件，它至多在首次创建时触发。</li> </ul> <pre><code class="language-js">const listener = function (e) { // key: 对应缓存 key // newValue: 该 key 新设置的缓存值 // oldValue: 该 key 对应的旧缓存值 // storageArea: 对应为 window.localStorage 对象 // storageArea: 触发该事件所对应的 URL } window.addEventListener('storage', listener) </code></pre> <h3>当 localStorage 超过 5M 的空间限制之后，若再次 setItem 会怎样？</h3> <p>答案显而易见，这次 <code>setItem()</code> 将会失败，且会抛出错误。针对这种情况，可以做一些处理，比如清空再重新记录等...</p> <pre><code class="language-js">for (let i = 0; i < 2; i++) { try { localStorage.setItem('key', 'value') break } catch (e) { // 清空，并重试 // QuotaExceededError: The quota has been exceeded. localStorage缓存超出限制 localStorage.clear() } } </code></pre> <h3>在 Safari 无痕模式下，对 sessionStorage 操作可能会抛出异常</h3> <p>请看：<a href="https://stackoverflow.com/questions/14555347/html5-localstorage-error-with-safari-quota-exceeded-err-dom-exception-22-an">html5 localStorage error with Safari: "QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota."</a></p> <h3>sessionStorage 在 iframe 的问题</h3> <blockquote> <p>建议少用 <code>iframe</code>，尽管目前很多大网站仍然使用它。</p> </blockquote> <p>前面提到顶级窗口和 iframe 窗口的页面都是同源的情况下，sessionStorage 是可共享的。但不完全是，比如受 <code>iframe</code> 的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe">sandbox</a> 属性影响，分为两种情况：</p> <pre><code class="language-html">// 1️⃣ // 2️⃣ </code></pre> <p>假设两个页面同源；情况一 <code>sessionStorage</code> 不共享，在 <code>iframe</code> 中是一个全新的 <code>sessionStorage</code> 对象。情况二则共享 <code>sessionStorage</code>。</p> <h2>参考链接</h2> <ul> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Storage">Web Storage API</a></li> <li><a href="http://caibaojian.com/web-storage.html">Web Storage 的使用和进阶知识</a></li> </ul> </article> <article> <h1>HTTP 状态码</h1> <p>Sun, 26 Feb 2023 12:38:00 GMT</p> <p>STATUS_CODES 如下：</p> <pre><code class="language-js">{ '100': 'Continue', '101': 'Switching Protocols', '102': 'Processing', '103': 'Early Hints', '200': 'OK', '201': 'Created', '202': 'Accepted', '203': 'Non-Authoritative Information', '204': 'No Content', '205': 'Reset Content', '206': 'Partial Content', '207': 'Multi-Status', '208': 'Already Reported', '226': 'IM Used', '300': 'Multiple Choices', '301': 'Moved Permanently', '302': 'Found', '303': 'See Other', '304': 'Not Modified', '305': 'Use Proxy', '307': 'Temporary Redirect', '308': 'Permanent Redirect', '400': 'Bad Request', '401': 'Unauthorized', '402': 'Payment Required', '403': 'Forbidden', '404': 'Not Found', '405': 'Method Not Allowed', '406': 'Not Acceptable', '407': 'Proxy Authentication Required', '408': 'Request Timeout', '409': 'Conflict', '410': 'Gone', '411': 'Length Required', '412': 'Precondition Failed', '413': 'Payload Too Large', '414': 'URI Too Long', '415': 'Unsupported Media Type', '416': 'Range Not Satisfiable', '417': 'Expectation Failed', '418': "I'm a Teapot", '421': 'Misdirected Request', '422': 'Unprocessable Entity', '423': 'Locked', '424': 'Failed Dependency', '425': 'Unordered Collection', '426': 'Upgrade Required', '428': 'Precondition Required', '429': 'Too Many Requests', '431': 'Request Header Fields Too Large', '451': 'Unavailable For Legal Reasons', '500': 'Internal Server Error', '501': 'Not Implemented', '502': 'Bad Gateway', '503': 'Service Unavailable', '504': 'Gateway Timeout', '505': 'HTTP Version Not Supported', '506': 'Variant Also Negotiates', '507': 'Insufficient Storage', '508': 'Loop Detected', '509': 'Bandwidth Limit Exceeded', '510': 'Not Extended', '511': 'Network Authentication Required' } </code></pre> </article> <article> <h1>History 对象及事件监听详解</h1> <p>Sun, 26 Feb 2023 12:36:17 GMT</p> <p></p> <h2>一、前言</h2> <p>理论上说，每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像等。在地址栏键入完整的 URL 地址，浏览器就会将对应资源展示出来。</p> <p>为了在多个 URL 之间往返，浏览器厂商定义了一种可存储浏览器会话历史（下称“历史记录”）的机制，每访问新的 URL 就会在历史记录中增加一个新的历史记录条目。当前“历史条目”可通过 History 对象（即 <code>window.history</code>）获取，该对象包括了 <code>back()</code>、<code>forward()</code>、<code>go()</code> 等方法。</p> <p>在很早以前，不同 URL 之间进行切换，都是需要重新加载资源的。直到 Ajax 的出现，打破了这种限制。Ajax 技术允许通过 JavaScript 脚本向服务器发起请求，服务器接收到请求，将数据返回客户端（浏览器），然后根据响应数据按需操作 DOM 以实现局部刷新。这个过程页面并不会重新加载，只会更新 DOM 的局部，因此 URL 并没有发生变化。但是 Ajax 局部刷新的能力，似乎与一个 URL 对应一个资源相悖。于是......就出现了一种解决方案，既可以实现页面局部刷新，也会修改 URL。</p> <p>那就是 URL 中的 <code>#</code> 模式，例如：</p> <pre><code class="language-text">http://www.example.com/index.html#user </code></pre> <p><code>#</code> 号表示网页的一个位置，跟在 <code>#</code> 号后面的字符串称为“锚”。当锚发生变化，若页面中存在这样一个位置（可通过锚点或标签元素 <code>id</code> 属性设置），浏览器会使页面自动滚动至对应位置。这种机制的好处是，仅用于指导浏览器的动作，而对服务器是完全无用的。例如，请求上述网址，HTTP 请求的服务器地址是：<code>http://www.example.com/index.html</code>（不会包含 <code>#user</code>）。</p> <p>相比 <code>http://www.example.com/index.html/user</code> 这种形式，URL 上带 <code>#</code> 号除了看着不顺眼之外，对于分享 URL 或 SEO 来说也是一个问题（对此 Google 还提出了一种优化 SEO 的方案，即 URL 中带上 <code>"#!"</code>，<a href="http://www.ruanyifeng.com/blog/2011/03/url_hash.html">详见</a>）。后来 HTML5 中提供了另外一种解决方案。它同样是可以修改 URL 且不触发页面重载，而且可以修改 URL 中 <code>Origin</code> 后面的任意路径（即 <code>/index.html/user</code>），这点 <code>#</code> 模式是做不到的。他们将这种能力内置在 History 对象下，包含 <code>history.pushState()</code>、<code>history.replaceState()</code> 方法。</p> <p>上面提到了一些词语，有必要说明一下：</p> <ul> <li> <p><strong>历史记录</strong></p> <p>是指在浏览器中<strong>每个标签</strong>（窗口）的会话历史（下称“<strong>历史记录</strong>”）。它由浏览器某个线程维护着，而且标签之间的历史记录是相互独立的，且无法通过 JavaScript 脚本读取。</p> <p>当标签关闭或者退出浏览器，会话结束，历史记录也随之被销毁（没错，这里的“历史记录”，并不是指浏览器应用的“历史记录”功能）。</p> </li> <li> <p><strong>历史条目</strong> 浏览器每访问一个<strong>新的 URL</strong>，就会产生一条<strong>记录</strong>（下称“<strong>记录</strong>”），并保存至“历史记录”。这条记录，仅能在当前页面的 <code>window.history</code> 对象读取到。</p> <p>举个例子，假设当前历史记录里有 3 条不同页面的记录（假设用数组 <code>[A, B, C]</code> 表示，真正如何表示不去深究，非本文讨论范围），若当前处于 <code>C</code> 页面，那么通过 <code>window.history</code> 读取到数据，是指 <code>C</code> 页面的记录信息。而 <code>A</code>、<code>B</code> 页面的信息是获取不对的，除非后退并在对应页面内执行脚本。</p> </li> <li> <p><strong>新的 URL</strong> 请注意，<strong>这个“新”是相对的</strong>。由于下文经常提到，因此有必要说明一下。</p> <p>假设在 <code>A</code> 页面跳转到 <code>B</code> 页面，这个 <code>B</code> 就是“新的 URL”。若在 <code>B</code> 中也有一个链接指向 <code>A</code> 页面，点击的时候，这个 <code>A</code> 也是“新的 URL”，因为它是相较于当前页面 URL 所得出来的结论。因此，这个过程会产生 3 条记录，所以历史记录将会是 <code>[A, B, A]</code>。</p> </li> </ul> <p>下面将按历史顺序一一介绍...</p> <h2>二、URL 的 # 号</h2> <p>其实前面刚提到，<code>#</code> 表示页面中的一个位置。比如：</p> <pre><code class="language-text">https://github.com/tofrankie/csscomb-mini#usage </code></pre> <p>上述 URL 中，<code>#usage</code> 表示 <a href="https://github.com/tofrankie/csscomb-mini"><code>https://github.com/tofrankie/csscomb-mini</code></a> 页面的 <code>usage</code> 位置。</p> <p>URL 上跟在 <code>#</code> 后面的所有字符串，被称为 <strong>Fragment</strong>（<strong>锚</strong>，或<strong>片段标识符</strong>），所以此 URL 的锚为 <code>usage</code>。</p> <h3>1. location.hash 属性</h3> <p>打印 <code>window.location</code> 结果如下：</p> <pre><code class="language-js">{ hash: '#usage' host: 'github.com' hostname: 'github.com' href: 'https://github.com/tofrankie/csscomb-mini#usage' origin: 'https://github.com' pathname: '/tofrankie/csscomb-mini' port: '' protocol: 'https:' search: '' } </code></pre> <p>其中 <code>location.hash</code> 值为 <code>#usage</code>，它是由 <code># + Fragment</code> 组成的字符串。</p> <blockquote> <p>如果 URL 中不存在 Fragment，<code>location.hash</code> 会返回一个空字符串（<code>''</code>）。</p> </blockquote> <pre><code class="language-js">// 1. https://github.com/tofrankie/csscomb-mini window.location.hash // "" // 2. https://github.com/tofrankie/csscomb-mini# window.location.hash // "" // 3. https://github.com/tofrankie/csscomb-mini#/ window.location.hash // "#/" // 4. https://github.com/tofrankie/csscomb-mini#usage window.location.hash // "#usage" </code></pre> <h3>2. 修改 URL hash 值</h3> <p>修改 <code>hash</code> 值就会直接体现在地址栏上，并且在历史记录中会产生一条新记录。比如，执行 <code>history.length</code> 可以看到 <code>length</code> 的变化。<code>history.length</code> 表示历史记录中的记录个数。</p> <p>可以通过以下几种方式去修改：</p> <pre><code class="language-js">// 1. 直接给该属性赋值 window.location.hash = '#usage' // # 号可省略 // 2. 给 window.location 赋值，请注意 # 是不能省略，否则不仅是修改 Fragment 了 window.location = '#usage' window.location.href = '#usage' // 3. 请注意，只修改 Fragment 部分，否则会重新加载页面。类似 history.replaceState 作用 window.location.replace('https://github.com/tofrankie/csscomb-mini#/usage') // 4. 通过 <a> 标签设置 href 属性，且不能省略 # 号 <a href="#usage"></a> </code></pre> <blockquote> <p>请注意，多次设置同一个 Fragment 时，仅首次有效，重复的部分可以理解为是无效的。</p> </blockquote> <h3>3. location.hash、location.href 与 location.replace()</h3> <p>前面两个方法都<strong>可读可写</strong>，其中 <code>location.hash</code> 绝对不会重载页面。这跟它的设计初衷有关，前面提过了，不再赘述。而 <code>location.href</code> 和 <code>location.replace()</code> 若只是 URL 的 Fragment 部分发生，也不会重载页面，而其他情况总会重载页面。</p> <p>通过 <code>location.href</code>、<code>location.hash</code> 方式去“修改” URL，历史记录都会新增一条新记录。由于 <code>history.length</code> 是历史记录数量的体现，因此也会随之改变。而 <code>location.replace()</code> 则是用新记录覆盖当前记录，因此 <code>history.length</code> 不会发生变化。</p> <p>注意点：</p> <ul> <li> <p>以上三种方式（包括 <code><a></code> 标签形式）去修改 URL，<strong>只有</strong>在新旧 URL 不相同的情况下，才会新增一条记录。</p> </li> <li> <p>其中 <code>location.href</code> 与 <code>location.replace()</code> 方法，若 URL 中包含 Fragment 部分，且新旧 URL 之间仅 Fragment 部分发生变化，也不会重载页面。</p> </li> <li> <p>不管新旧 URL 是否一致（URL 不含 Fragment 时），<code>location.href</code> 总会重载页面。</p> </li> <li> <p>当新旧 URL 相同时，<code>location.href</code> 作用等同于 <code>location.reload()</code>、<code>history.go(0)</code>。虽说是重新加载页面，但多数是从浏览器缓存中加载，除非页面缓存失效或过期了。</p> </li> <li> <p>对于 <code>location.href</code> 我们通常会赋予一个完整的 URL 地址，但它是支持“相对路径”形式的 URL 的。（详见：<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_URL#%E7%BB%9D%E5%AF%B9url%E5%92%8C%E7%9B%B8%E5%AF%B9url">绝对 URL 和相对 URL</a>）</p> </li> <li> <p>上面是指写操作，并不是读操作哈。</p> </li> </ul> <p>一句话总结：<strong>若新旧 URL 之间仅仅 Fragment 部分发生改变，以上几种方法都会在历史记录新增一条记录，且不会重载页面。</strong></p> <h3>4. Fragment 的位置</h3> <p>前面提到，<code># + Fragment</code> 表示网页的一个位置，用于指导浏览器的行为。当 Fragment 的值发生改变，页面会滚动至对应位置。当然，前提是这个位置存在于页面中，否则也是不会发生滚动的。</p> <p><strong>那么这个“位置”，如何设置呢？</strong></p> <p>讲真的，天天用框架写页面，最原始的反而忘了。有两种方式：</p> <ul> <li>使用锚点，即利用 <code><a></code> 标签的 <code>name</code> 属性（不推荐）</li> <li>使用标签 <code>id</code> 属性（推荐）</li> </ul> <p><strong>请注意，<code><a></code> 标签的 <code>name</code> 属性在 HTML5 中<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attr-name">已废弃</a>，请使用 HTML 全局属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes"><code>id</code></a> 来代替</strong>。后者在整个 DOM 中必须是唯一的。常用于查询节点、样式选择器、作为页面 Fragment 的位置。</p> <pre><code class="language-html"> <a name="usage"></a>  <div id="usage"></div>  <a id="usage"></a> </code></pre> <p>再看一例子：</p> <pre><code class="language-html"> <a href="#usage"></a>  <a name="usage" href="#usage"></a> <a id="usage" href="#usage"></a> </code></pre> <p>上述示例，作者本人会经常混淆（希望你们不会），顺道提一下。简单来说，<code>href="usage"</code> 是为了修改 URL，当 URL 的 <code>hash</code> 变成 <code>#usage</code>，浏览器就会滚动至对应位置（即锚点为 <code>usage</code> 或 <code>id</code> 属性为 <code>usage</code> 的元素所在位置）。</p> <h3>5. hashchange 事件</h3> <p>若在全局注册了 <code>hashchange</code> 事件监听器，只要 URL 的 Fragment 发生变化，将会被事件处理程序捕获到，事件对象包含了 <code>newURL</code> 和 <code>oldURL</code> 等该事件特有的属性。其余的，在下文对比 <code>popstate</code> 事件时再详细介绍。</p> <h2>三、History 对象</h2> <p>前面提到，每个标签都有一个独立的历史记录，里面维护着一条或多条记录。每条记录保存了对应 URL 的一些状态，仅能在当前页面的 <code>window.history</code> 对象读取到。（这里不再赘述，若概念有混淆的，请回到开头再看一遍）</p> <p>在 HTML5 之前，History 对象主要包含以下属性和方法：</p> <ul> <li><code>history.length</code></li> <li><code>history.back()</code></li> <li><code>history.forward()</code></li> <li><code>history.go()</code></li> </ul> <h3>1. history.length</h3> <p><strong>只读</strong>，该属性返回当前会话的历史记录个数。由于 <code>history.length</code> 是历史记录数量的体现，那么当历史记录发生变化时，它才会随之改变。</p> <p>注意以下几点：</p> <ul> <li> <p>若“主动”打开浏览器的新标签，就会产生一条记录，尽管它可能是一个空标签页，即 <code>history.length</code> 为 <code>1</code>。当键入新 URL 并回车，此时 <code>history.length</code> 就会变为 <code>2</code>。</p> </li> <li> <p>若浏览器的标签是通过类似 <code><a target="_blank"></code> 形式自动创建的话，新标签的 <code>history.length</code> 是 <code>1</code>（不是 <code>2</code> 哦）。此时原标签的历史记录不会受到影响，它们是相互独立的。这种情况就类似于在微信里打开一个链接，进入页面的 <code>history.length</code> 为 <code>1</code>。</p> </li> <li> <p>不管以任何方式刷新页面，历史记录和 <code>history.length</code> 都不会改变。</p> </li> <li> <p>在地址栏键入新的 URL，历史记录会增加 <code>1</code>。</p> </li> <li> <p>一般情况下，若新旧 URL 相同，此时历史记录不会发生变化，<code>history.length</code> 也不会。特殊情况是，<code>history.pushState()</code> 和 <code>history.replaceState()</code> 方法总会产生一条新记录，即使新旧 URL 相同也会。</p> </li> <li> <p>点击浏览器前进/后退/刷新按钮，或者调用 <code>history.back()</code>、<code>history.forward()</code>、<code>history.go()</code> 方法，不会使历史记录和 <code>history.length</code> 值发生变化。这些操作只会退回/前往历史记录中某个具体的页面。但会触发 <code>popstate</code> 或 <code>hashchange</code> 事件（若有注册的话）。</p> </li> </ul> <p>这里描述的场景很多，原因是此前对某些场景没有完全弄清楚（如果你没有这个困扰，简单略过即可）。</p> <p>既然 <code>history.length</code> 是只读的，换句话说，就是我们无法“直接”操作历史记录（比如删除某个历史记录），事实上我们也访问不到。</p> <h3>2. history.back()</h3> <p>它的作用同浏览器的<strong>后退</strong>按钮，通俗地讲就是后退至上一页。等价于 <code>history.go(-1)</code>。</p> <blockquote> <p>若当前页面是历史记录的第一个页时，调用此方法不执行任何操作。此时浏览器后退按钮也是置灰的，是不可操作的。换句话说，此方法仅在 <code>history.length > 1</code> 时有效。</p> </blockquote> <h3>3. history.forward()</h3> <p>它的作用同浏览器的<strong>前进</strong>按钮，通俗地讲就是前往下一页。等价于 <code>history.go(1)</code>。</p> <blockquote> <p>若当前页面是历史记录里最顶端的页面时，调用此方法不执行任何操作。此时浏览器前进按钮也是置灰的，是不可操作的。</p> </blockquote> <h3>4. history.go()</h3> <p>该方法接受一个 <code>delta</code> 参数（可选），通过当前页面的相对位置加载某个页面。</p> <pre><code class="language-js">window.history.go(delta) </code></pre> <p>一般来说，参数可缺省、为 <code>0</code>、为负整数（表示后退）、正整数（表示前进）。</p> <ul> <li> <p>比如说，<code>history.go(-2)</code> 会历史记录里后退两个页面。相应地，<code>history.go(2)</code> 会前进两个页面。</p> </li> <li> <p>其中 <code>history.go(1)</code> 作用同 <code>history.forward()</code>，<code>history.go(-1)</code> 作用同 <code>history.back()</code>。</p> </li> <li> <p>若缺省 <code>delta</code> 或者 <code>delta</code> 为 <code>0</code>，会<strong>重新加载</strong>当前页面。此时作用同 <code>location.reload()</code> 或者浏览器的刷新按钮。</p> </li> <li> <p>若 <code>delta</code> 数值部分超出了历史记录的范围，不会执行任何操作。既不会后退至历史记录的第一个页面，也不会前往历史记录里最顶端的页面。它会默默地失败，且不会报错。假设历史记录只有 5 条，然后你试图后退/前进 10 个页面，这就属于超出范围。</p> </li> <li> <p>若 <code>delta</code> 不是 <code>Number</code> 类型，内部先进行隐式类型转换成对应的 <code>Number</code> 值，再执行 <code>go()</code> 方法。比如，<code>history.go(true)</code> 相当于 <code>history.go(1)</code>，<code>history.go(NaN)</code> 相当于 <code>history.go(0)</code>。</p> </li> </ul> <h3>5. 小结</h3> <p>就 <code>back()</code>、<code>forward()</code>、<code>go()</code> 三个方法，简单总结一下：</p> <ul> <li> <p>仅调用以上三个方法，不会使得历史记录或 <code>history.length</code> 发生改变。</p> </li> <li> <p>调用以上三个方法，通常是从浏览器缓存中加载页面。在 Network 选项卡中往往可以看到类似 <code>from disk cache</code> 的字样。</p> </li> <li> <p>当超出了当前标签的历史记录范围，调用以上三个方法都不会执行任何操作，默默地失败且不报错。</p> </li> <li> <p>请注意，若后退/前进时，只是锚点发生变化，是不会重新加载页面。</p> </li> </ul> <h2>四、HTML5 History API</h2> <p>History API 作为 HTML5 的新特性之一，解决了 Fragment 的一些痛点，包括 URL 分享，SEO 优化等都得到了很好的解决。这些新特性都内置于 History 对象之中：</p> <ul> <li><code>history.state</code></li> <li><code>history.scrollRestoration</code></li> <li><code>history.pushState()</code></li> <li><code>history.replaceState()</code></li> </ul> <h3>1. history.state</h3> <p><strong>只读</strong>，该属性返回当前页面的状态值。</p> <pre><code class="language-js">const currentState = history.state </code></pre> <p>只有通过 <code>pushState()</code> 和 <code>replaceState()</code> 方法产生的历史记录，这个属性才会有相应的值，否则为 <code>null</code>。</p> <blockquote> <p>请注意，<code>history.state</code> 的返回值是一份<strong>拷贝值</strong>。</p> </blockquote> <h3>2. history.scrollRestoration</h3> <p><strong>可读写</strong>，该属性允许 Web 应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（<code>auto</code>）或者手动的（<code>manual</code>）。</p> <h3>3. history.pushState()</h3> <p>在当前位置，<strong>总会</strong>产生一条新的记录，并保存在历史记录里面，而且 <code>history.length</code> 也会增加。若新旧 URL 不相同的情况下，也伴随着 URL 的变化。</p> <blockquote> <p>请注意，它并不会重载页面。同样的还有 <code>history.pushState()</code> 方法。</p> </blockquote> <p>伪代码：</p> <pre><code class="language-js">// 假设历史记录（称为 histories）有 5 个页面，当前处于最后一个页面，即 5 位置。 const histories = [1, 2, 3, 4, 5] // 若后退 2 页 history.go(-2) // 此时，我们的页面处于历史记录中的 3 位置。 // 插入一个新记录，假设新记录称为 6 history.pushState( { state: 'new' }, // 通常是对象，可通过 history.state 获取 'custom title', // 几乎所有浏览器都会忽略此参数，所以是没用的 'https://xxx.com' // 该 URL 必须跟当前网页是同源的，否则会报错。 ) // 执行 pushState() 方法后，不会加载页面 window.location.href // "https://xxx.com" window.document.URL // "https://xxx.com" window.document.title // 这还是原来的标题，而不是 "custom title" window.history.state // { state: 'new' } window.history.length // 4 histories // [1, 2, 3, 6] </code></pre> <p><strong>语法</strong></p> <pre><code class="language-js">history.pushState(state, title[, url]) </code></pre> <ul> <li> <p><code>state</code> - 可以是任意值，通常为（可序列化）对象。它可以通过 <code>history.state</code> 获取到，或者在 <code>popstate</code> 事件的事件对象中体现。</p> </li> <li> <p><code>title</code> - 请忽视该参数的作用，它几乎被所有浏览器所忽略，但不得不传。通常，会传递 <code>''</code>、<code>null</code> 或 <code>undefined</code>。</p> </li> <li> <p><code>url</code> - （可选）新 URL，它最终体现在地址栏的 URL 上。请注意，新 URL 与当前页面 URL 必须是同源的（即 <code>location.origin</code> 相同），否则将会抛出错误。</p> </li> </ul> <p><strong>注意点</strong></p> <p>参数 <code>state</code> 是可序列化对象，怎么理解？</p> <p>个人猜测是那些可作用域 <code>JSON.stringify()</code> 方法的原始值或引用值，具体没去深究。举个例子，下面这个将会抛出错误：</p> <pre><code class="language-js">history.pushState( { fn: function () {} }, '', location.href + 'abc' ) // DOMException: Failed to execute 'pushState' on 'History': // function() {} could not be cloned. </code></pre> <p>较为冷门的东西，参数 <code>url</code> 也支持 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_URL#%E7%BB%9D%E5%AF%B9url%E5%92%8C%E7%9B%B8%E5%AF%B9url">绝对 URL 和相对 URL</a>。举些例子：</p> <pre><code class="language-js">// 假设当前 URL 如下，它的 Origin 是 https://developer.mozilla.org // https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState // 1️⃣ 完整网站，可理解为绝对路径，将会变成：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript history.pushState({}, '', 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript') // 2️⃣ 含 / 可理解为相对路径，相对于当前 Origin，将会变成 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript history.pushState({}, '', '/zh-CN/docs/Web/JavaScript') // 3️⃣ 若为 ../xxx 形式，相对于当前 URL，将会变成 https://developer.mozilla.org/zh-CN/docs/Web/API/History/go history.pushState({}, '', '../History/go') // 4️⃣ 若为字符串，将会变成 https://developer.mozilla.org/zh-CN/docs/Web/API/History/hhh history.pushState({}, '', 'hhh') </code></pre> <p>另外，使用 <code>history.pushState()</code> 可以改变 <code>referrer</code>。</p> <h3>4. history.replaceState()</h3> <p>参数约定与 <code>pushState()</code> 完全一致，语法如下：</p> <pre><code class="language-js">history.replaceState(stateObj, title[, url]) </code></pre> <p><code>replaceState()</code> 也总会产生一条新记录，并用新记录<strong>替换</strong>掉当前页面对应的历史记录。</p> <p>伪代码...</p> <pre><code class="language-js">const histories = [1, 2, 3, 4, 5] // 当前处于 5 位置 history.replaceState({}, '', 'new-url') // 创建一个新记录，假设称为 6 // 新记录 6 会替换记录 5 histories // 历史记录，将会变为 [1, 2, 3, 4, 6] history.length // 5，未发生变化 </code></pre> <h3>5. pushState 与 replaceState 区别</h3> <p>还是伪代码哈：</p> <pre><code class="language-js">// 假设历史记录里，有 5 条记录，并处于历史记录的顶端，即第五个位置 const histories = [1, 2, 3, 4, 5] // 后退 2 个页面，即当前处于第三个位置 history.go(-2) // 使用 replaceState 产生一条新记录（假设称为 6）， // 它的作用是用新记录替换当前记录，因此记录 3 被新记录 6 所替换 // 但仍处于历史记录的第三个位置 history.replace('6', '', 'new-url-6') histories // [1, 2, 6, 4, 5] history.length // 5 // 使用 pushState 产生一条新记录（假设称为 7）， // 它的作用是在当前记录后面添加一条新记录， // 它会删除当前记录后面的所有记录，然后再往后追加一条， // 同时，它的位置也会前往至历史记录顶端，即第四个位置。 history.replace('7', '', 'new-url-7') histories // [1, 2, 6, 7] history.length // 4 </code></pre> <p>如果用 <code>Array.prototype.splice()</code> 来类比的话，可以这样：</p> <pre><code class="language-js">const arr = [1, 2, 3, 4, 5] // pushState 类似于 arr.splice(curIndex + 1, 1000, newItem) // replaceState 类似于 arr.splice(curIndex, 1, newItem) // 注释： // arr 表示历史记录 // curIndex 表示当前记录的位置， // 1000 只是为了表达删除完 curIndex + 1 后面的所有项，可用 arr.length 等替代 // newItem 表示新记录 </code></pre> <p>简单来说，<code>pushState()</code> 和 <code>replaceState()</code> 区别如下：</p> <ul> <li>两者都会产生新的记录。</li> <li>前者会先移除当前记录后面的所有记录，并将新记录追加到历史记录顶端。而后者仅会用新记录替换当前记录，后面的记录并不受影响（若有）。</li> <li>两者都会使得历史记录发生变化。后者不会使得 <code>history.length</code> 发生改变。</li> </ul> <p>另外，对于历史记录及其数量，<code>history.replaceState()</code> 与 <code>location.replace()</code> 表现是一致的，只是后者有可能会重载页面。</p> <h3>6. popstate 事件</h3> <p>调用 <code>pushState()</code>、<code>replaceState()</code> 方法的话，既不会触发 <code>popstate</code> 事件监听器，也不会触发 <code>hashchange</code> 事件监听器（即使新旧 URL 只是 Fragment 部分不同）。这个也是 History API 的优点之一。</p> <p>其余的下一节介绍...</p> <h2>五、hashchange 和 popstate 事件</h2> <h3>1. hashchange 事件</h3> <p>IE8 及以上浏览器都支持 <code>hashchange</code> 事件。注册事件监听器，如下：</p> <pre><code class="language-js">function listener(e) { // 可通过 e.newURL 和 e.oldURL 获取完整的新旧 URL 值（只读） // do something... } // 通过 DOM2 注册（更推荐） window.addEventListener('hashchange', listener) // 通过 DOM0 注册 window.onhashchange = listener </code></pre> <blockquote> <p>对于事件监听器的兼容性，可看 <a href="https://github.com/tofrankie/blog/issues/264">JavaScript 事件详解</a>。</p> </blockquote> <p>除了通过调用 <code>pushState()</code>、<code>replaceState()</code> 使 URL 的 Fragment 部分发生变化，不会触发 <code>hashchange</code> 事件之外，其他任何方式致使 Fragment 发生改变，都会触发该事件，包括 <code>history.forward()</code>、<code>history.back()</code>、<code>location.hash</code>、<code><a href="#anchor"></code>、操作浏览器后退/前进按钮、修改地址栏 Fragment 值等方式。</p> <blockquote> <p>本文提到的 Fragment 均指 URL 上跟在 <code>#</code> 后面的所有字符串。</p> </blockquote> <h3>2. popstate 事件</h3> <blockquote> <p>需要注意的是，调用 <code>history.pushState()</code> 或 <code>history.replaceState()</code> 不会触发 <code>popstate</code> 事件。</p> </blockquote> <p><strong>只有通过点击浏览器后退/前进按钮，或者通过脚本调用 <code>history.back()</code>、<code>history.forward()</code>、<code>history.go()</code> （<code>go(0)</code> 除外）方法，<code>popstate</code> 事件才会被触发。</strong></p> <pre><code class="language-js">function listener(e) { // 通过 e.state 可以获取当前记录的状态对象对应的拷贝值。 // 非 pushState、replaceState 产生的记录，该属性值都为 null。 } // 通过 DOM2 注册（更推荐） window.addEventListener('popstate', listener) // 通过 DOM0 注册 window.onpopstate = listener </code></pre> <p>另外，不同浏览器在加载页面时处理 <code>popstate</code> 事件的形式可能存在差异。</p> <h3>3. 小结</h3> <p>下面总结了很多条，很大可能会记不住，没关系：</p> <ul> <li> <p>通过 <code>back()</code>、<code>forward()</code>、<code>go()</code> 或浏览器后退/前进按钮切换的过程，一定会触发 <code>popstate</code> 事件。若伴随着 Fragment 的变化，也会触发 <code>hashchange</code> 事件。（与记录产生的方式无关）</p> </li> <li> <p>在调用 <code>pushState()</code>、<code>replaceState()</code> 时，既不会触发 <code>popstate</code> 事件，也不会触发 <code>hashchange</code> 事件（即使包括 Fragment 发生改变）。</p> </li> <li> <p>除了 <code>pushState()</code>、<code>replaceState()</code>，其他任何方式致使 Fragment 发生改变，都会触发 <code>hashchange</code> 事件。</p> </li> <li> <p>通过 <code>location.hash = 'foo'</code> 方式致使 Fragment 发生改变，会触发 <code>hashchange</code> 事件，而不会触发 <code>popstate</code> 事件。</p> </li> <li> <p>而通过 <code>window.location = '#foo'</code> 或 <code><a href="#foo"></code> 形式致使 Fragment 发生改变，同时触发 <code>hashchange</code> 和 <code>popstate</code> 事件。</p> </li> </ul> <p><strong>简化记忆：</strong></p> <p>其实常用的方法只有三个：<code>history.pushState()</code>、<code>history.replaceState()</code>、<code>location.hash</code>。最重要的是，通常一个项目不会两者混用，不然得多乱啊。例如 React 、Vue 提供的路由系统只能二选一：</p> <ul> <li><strong>History 模式</strong>：使用 HTML5 History API，更符合未来发展的方向</li> <li><strong>Hash 模式</strong>：利用 <code>location.hash</code> 和 <code>hashchange</code> 事件实现，兼容性较好，且服务端无需额外的配置。</li> </ul> <p>所以，就简化成两条：</p> <ul> <li>调用 <code>pushState()</code>、<code>replaceState()</code> 时，不会触发 <code>popstate</code> 事件。其他 URL 的变化都会触发此事件。</li> <li>当 URL 的 Fragment 部分发生改变，都会触发 <code>hashchange</code> 事件。</li> </ul> <h2>六、比较</h2> <p>History 模式和 Hash 模式，在不重载页面的前提下，实现了局部刷新的能力。</p> <p>从某种程度来说, 调用 <code>pushState()</code> 和 <code>window.location= "#foo"</code> 基本上一样, 他们都会在当前的历史记录中创建和激活一个新的历史条目。但是 <code>pushState()</code> 有以下优势：</p> <ul> <li> <p>新的 URL 可以是任何和当前 URL 同源的 URL。但是设置 <code>window.location</code> 只会在你只设置 Fragment 的时候才会使当前的 URL。</p> </li> <li> <p>非强制修改 URL。相反，设置 <code>window.location = '#foo'</code> 仅仅会在锚的值不是 <code>#foo</code> 情况下创建一条新的历史记录。</p> </li> <li> <p>可以在新的历史记录中关联任何数据。<code>window.location = "#foo"</code> 形式的操作，你只可以将所需数据写入锚的字符串中。</p> </li> </ul> <p>注意： <code>pushState()</code> 不会造成 <code>hashchange</code> 事件调用，即使新旧 URL 只是 Fragment 不同。</p> <blockquote> <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState#%E6%8F%8F%E8%BF%B0" title="Permalink to 描述">更多...</a></p> </blockquote> <h2>七、React Router</h2> <p>在 React 的路由系统中，修改路由、监听路由实际上是由 <a href="https://github.com/ReactTraining/react-history">ReactTraining/react-history</a> 库中 <code>createBrowserHistory()</code> 或 <code>createHashHistory()</code> 方法所构造的 <code>history</code> 对象（有别于 <code>window.history</code> 对象）去操作的。</p> <p>在 React 中，路由操作有这几种方法。</p> <ul> <li><code>props.history.push()</code> - 新增一条历史记录</li> <li><code>props.history.replace()</code> - 新增一条记录，并替换当前记录</li> <li><code>props.history.go()</code> - 后退/前进</li> <li><code>props.history.goBack()</code> - 即 <code>props.history.go(-1)</code></li> <li><code>props.history.goForward()</code> - 即 <code>props.history.go(1)</code></li> </ul> <p>其中，<code>props.history.go()</code> 实际上就是调用了 <code>window.history.go()</code> 方法。前面两个方法，在不同路由模式下，调用的能力是不一样的。</p> <blockquote> <p>在 <code>BrowserRouter</code> 模式下，对应 <code>window.history.pushState()</code> 和 <code>window.history.replaceState()</code> 方法。</p> </blockquote> <blockquote> <p>在 <code>HashRouter</code> 模式下，对应 <code>window.location.hash</code> 和 <code>window.location.replace()</code> 方法。</p> </blockquote> <p>在 React Router 中，路由更新以加载不同的组件，是通过 React <code>Context</code> 实现的，即 <code>Provider/Consumer</code> 的模式。当路由更新时，<code>Provider</code> 的 <code>value</code> 属性会发生变化，使得对应消费 <code>Consumer</code> 的组件得以更新。</p> <p>前面我们提到过，调用 <code>history.pushState()</code> 或 <code>history.replaceState()</code> 并不会触发 popstate 事件监听函数。那么 React Router 是怎么知道 URL 发生变化的呢？</p> <p>首先在选择使用 <code><BrowserRouter></code> 或 <code><HashHistory></code> 组件时，它内部设置了一个监听器，这个监听器的回调函数里面有一个 <code>setState()</code> 方法。当我们在 React 组件中使用 <code>props.history.push()</code> 方法去跳转页面时，它除了会执行 <code>window.history.pushState()</code> 使得 URL 发生改变之外，还会执行前面提到的监听器，那么监听器的回调函数也会被执行，既然里面有 <code>setState()</code> 操作，就会使得 <code><BrowserRouter></code> 或 <code><HashHistory></code> 组件执行一次更新，那么该组件的 <code>Provider</code> 就会更新，React Router 的 <code>Consumer</code> 们根据 URL 来匹配对应的路由，以加载相应的组件。因此，我们就能在浏览器中看到 URL 的变化以及页面的跳转。</p> </article> <article> <h1>关于 slice、splice 记忆和区分</h1> <p>Sun, 26 Feb 2023 12:35:20 GMT</p> <p></p> <p>你们会不会有这些困扰，记不住 <code>slice()</code> 和 <code>splice()</code> 的用法，隔一段时间，再用时就得翻文档。比如说：</p> <ul> <li>哪个会改变原数组，哪个不会？</li> <li>对数组进行操作，包不包括要修改的最后一项呢？</li> <li>怎样区分会更容易记忆？</li> </ul> <h2>Array.prototype.slice</h2> <blockquote> <p><code>slice()</code> 不会“改变”原数组。</p> </blockquote> <h3>语法</h3> <pre><code class="language-js">array.slice([begin[, end]) </code></pre> <p><code>begin</code> 和 <code>end</code> 都是可选的。返回一个新的数组，是由 <code>begin</code> 和 <code>end</code> 决定的原数组的浅拷贝（包括 <code>begin</code>，不包括 <code>end</code> ）。<strong>通俗地讲，就是截取原数组的一部分，并返回截取部分，且“不改变”原数组</strong>。</p> <h3>总结</h3> <ul> <li> <p>返回新数组，且不改变原始值，但注意引用值的问题。</p> </li> <li> <p>返回结果为 <code>[begin, end)</code>，用数学话术就是左闭右开区间，即含 <code>begin</code>，但不包括 <code>end</code>。</p> </li> <li> <p><code>begin</code>、<code>end</code> 的值可为 <code>负数</code>、<code>0</code>、<code>正数</code>。其中 <code>0</code> 和正数不多说，若为负数，从数组末尾开始确定索引值，其中 <code>-1</code> 为数组最后一个元素，以此类推。若负数小于 <code>-length</code>，则索引值为 <code>0</code>（可在内心转换为正向索引值）。</p> </li> <li> <p>若 <code>begin ≥ arr.length</code>（超出数组范围）或 <code>begin ≥ end</code>（两者翻译成正向索引后再比较），不会报错，会返回空数组（<code>[]</code>）。</p> </li> <li> <p>若参数 <code>begin</code> 或 <code>end</code> 不为数值，会自动隐式类型转换为 <code>Number</code> 类型，再截取。</p> </li> <li> <p><code>Array.prototype.slice()</code> 可用来将一个类数组（array-like）转换为新数组。</p> </li> </ul> <h3>示例</h3> <pre><code class="language-js">const arr = [1, 2, 3, 4, 5] const arr2 = [1, 2, { num: 3 }, 4, 5] // 1️⃣ 当 begin 和 end 同时缺省时，会“浅拷贝”一个完整的数组 // 1）适合拷贝一个完整无引用值的数组 // 2）将类数组转换为数组，如 arguments -> array arr !== arr.slice() // true，浅拷贝效果 function foo() { // 类数组不具有数组的任何方法，转换后 arr 就变成了真正的数组 // Tips: 但现在用得更多的可能是 rest 参数 const arr = Array.prototype.slice.call(arguments) // 或 [].slice.call(arguments) } // 2️⃣ 返回数组的一部分 arr.slice(4) // [5] arr.slice(1, 3) // [2, 3] arr.slice(-2, -1) // [4] // 3️⃣ 返回空数组 arr.slice(1, 1) // []，属于 begin = end，但不包含 end arr.slice(3, -4) // []，属于 begin ≥ end 的情况 arr.slice(5) // []，属于超出数组范围的情况 // 4️⃣ 浅拷贝引用值的问题，其实非常简单，顺便提一下而已 const newArr = arr2.slice(2) // [{ num: 3 }, 4, 5] newArr[0].num = 6 // 修改新数组的引用值 arr2[2] // { num: 6 }，会影响原数组 // 5️⃣ 若参数不为数值，将会发生隐式类型转换，再截取 arr.slice(true) // [2, 3, 4, 5]，true 会转换为 Number 类型为 1 arr.slice(false) // [1, 2, 3, 4, 5]，同理 arr.slice('str') // [1, 2, 3, 4, 5]，字符串 'str' 会被转换为 NaN，效果同 arr.slice(NaN) // 6️⃣ 若参数为小数，应该是采用 parseInt() 取整数部分 arr.slice(1, 3.6) // [2, 3] arr.slice(-2.3) // [4, 5] </code></pre> <h3>其他</h3> <p>字符串也有一个类似的方法：<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/slice"><code>String.prototype.slice()</code></a>，它用来提取字符串的某一部分，并返回一个新的字符串，且不会改变原字符串。</p> <p>语法：</p> <pre><code class="language-js">// 从原字符串中，截取 [beginIndex, endIndex) 的字符串 string.slice(beginIndex, endIndex) </code></pre> <p>应用场景：</p> <pre><code class="language-js">const str = 'string' // 1️⃣ 截取字符串 str.slice(1, 3) // "tr" // 2️⃣ 相信你也见过以下用法，常用来生成随机字符串 const randomKey = Math.random().toString(36).slice(2) </code></pre> <h2>Array.prototype.splice</h2> <p>讲真的，它跟 <code>slice()</code> 长得像不说，还容易混淆，隔一段时间不用，都得翻一下文档确认一下。</p> <blockquote> <p>与 <code>slice()</code> 不同，<code>splice()</code> 会改变原数组。</p> </blockquote> <h3>语法</h3> <pre><code class="language-js">array.splice([start[, deleteCount[, item1[, item2[, ...]]]]]) </code></pre> <p>所有参数都是可选的。从 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice#%E8%AF%AD%E6%B3%95">MDN</a> 上的表述看，参数 <code>start</code> 应该不能缺省的，但实际并不会报错，因此可认为是全可选的。<code>splice()</code> 返回被删除的元素所组成的一个新数组，若没有删除，则返回空数组（<code>[]</code>）</p> <ul> <li> <p><code>start</code> - 开始位置（从 <code>0</code> 计数）</p> <ul> <li>若 <code>start ≥ length</code>，即超出数组长度，则从数组末尾添加内容；</li> <li>若 <code>start ＜ 0</code>，即为负数，则从数组末尾开始的第几位开始，负数小于 <code>-length</code> 时，从 <code>0</code> 开始。计数方式与 <code>slice()</code> 相同。</li> </ul> </li> <li> <p><code>deleteCount</code> - 整数，表示要移除的数组元素的个数。</p> <ul> <li>若缺省 <code>deleteCount</code> 或者 <code>deleteCount</code> 大于 <code>start</code> 之后所有元素数量，则删除 <code>start</code> 后面的所有元素，含 <code>start</code>。</li> <li>若 <code>deleteCount ≤ 0</code>，此时不移除元素。这种情况下，常用来插入新元素。</li> </ul> </li> <li> <p><code>item1, item2, ...</code> - 要添加进数组的元素，从 <code>start</code> 位置开始。若不指定，则 <code>splice()</code> 将只删除数组元素。</p> </li> </ul> <h3>总结</h3> <ul> <li> <p><code>splice()</code> 会改变原数组，并返回一个被删除元素组成的数组。</p> </li> <li> <p><code>splice()</code> 参数 start 接受负数、<code>0</code>、正数，计算起始位置与 <code>slice()</code> 方法一致。</p> </li> <li> <p>当 <code>deleteCount</code> 为正数时，<code>splice(start, deleteCount)</code> 所删除的元素包含 <code>[start, start + deleteCount)</code>，这里的 <code>start</code> 是指转换后正向索引值。</p> </li> <li> <p>当 <code>deleteCount</code> 为负数或零，则不删除元素。常用于不删除原数组元素，并插入新元素的场景。</p> </li> <li> <p>请注意，<code>deleteCount</code> 是指删除的个数，而非索引值。我想这也就是 <code>slice()</code> 与 <code>splice()</code> 容易混淆的原因所在。</p> </li> <li> <p><code>splice()</code> 中的 <code>start</code> 和 <code>delectCount</code> 也是会发生隐式类型转换的。</p> </li> </ul> <h3>示例</h3> <pre><code class="language-js">const arr = [1, 2, 3, 4, 5] // 1️⃣ 允许缺省所有参数，但没有真正的意义 arr.splice() // []，原数组也没有改变 // 2️⃣ 删除，并插入新元素 arr.splice(1, 2, 6) // [2, 3]，此时 arr 被修改为 [1, 6, 4, 5] arr.splice(-2, 3, 6) // [4, 5]，此时 arr 被修改为 [1, 2, 3, 6] // 3️⃣ 删除 start 后面所有元素 arr.splice(1) // [2, 3, 4, 5]，此时 arr 被修改为 [1] arr.splice(-100) // [1, 2, 3, 4, 5]，此时 arr 被修改为 [] // 4️⃣ 不删除原数组元素，并插入一个或多个新元素 // 这个应该就是 splice() 用得最多的场景吧！ arr.splice(1, 0, 6) // []，此时 arr 被修改为 [1, 6, 2, 3, 4, 5] arr.splice(1, 0, 6, true) // []，此时 arr 被修改为 [1, 6, true, 2, 3, 4, 5] // 5️⃣ 隐式类型转换 arr.splice(true, true) // [2]，相当于 arr.splice(1, 1) // ⚠️ 请注意，以上每条语句是基于 arr 为 [1, 2, 3, 4, 5] 得出的结果， // 并不是按顺序执行得出的结果，就怕有人误解。因为 splice() 方法是会修改原数组的。 </code></pre> <h2>String.prototype.split</h2> <p>顺道提一下，其实 <code>split()</code> 这个就很简单了，常用于字符串转为数组、解析 URL 参数等场景。</p> <p>在字符串与数字切换，常用到 <code>String.prototype.split()</code>、<code>Array.prototype.join()</code>、<code>Array.prototype.reverse()</code> 方法。</p> <h3>语法</h3> <pre><code class="language-js">str.split([separator[, limit]]) </code></pre> <p>参数 <code>separator</code> 和 <code>limit</code> 都是可选的。若缺省 <code>separator</code> 时，返回的数组包含一个由整个字符串组成的元素。而 <code>limit</code> 的作用是返回分割片段的数量。</p> <pre><code class="language-js">const str = 'hello' // 字符串分割 str.split() // ["hello"] str.split('') // ["h", "e", "l", "l", "o"] str.split('', 2) // ["h", "e"] // 字符串与数字转换 str.split('').join(',') // "h,e,l,l,o" // 也常用来反转字符串 str.split('').reverse().join('') // "olleh" </code></pre> <p><code>separator</code> 可以是字符串，也可以为正则表达式，它适合提取一些不太规则的字符串。</p> <p>假设有以下两个字符串，我们要把月份提取出来，并返回数组：</p> <pre><code class="language-js">const str1 = 'Jan; March; April; June' const str2 = 'Jan ;March ; April; June' // 对于 str1 是相对比较规律的，我们可以直接 str1.split('; ') // ["Jan", "March", "April", "June"] // 而 str2 就不能通过上述方式去提取了，可以使用正则表达式作为 separator 参数 const re = /\s*;\s*/g str2.split(re) // ["Jan", "March", "April", "June"] </code></pre> <h2>结论</h2> <p>本文，主要是讲解 <code>slice()</code> 和 <code>splice()</code> 方法及其区别。好吧，面试官也喜欢问这俩货。</p> <ol> <li> <p>从参数上区分：<code>slice(begin, end)</code> 和 <code>splice(start, deleteCount, ...item)</code> 两个方法：</p> <ul> <li> <p>在 <code>slice()</code> 中 <code>begin</code> 和 <code>end</code> 都指原数组对应的索引值。</p> </li> <li> <p>在 <code>splice()</code> 中只有 <code>start</code> 是指原数组对应的索引值，<code>deleteCount</code> 是要删除的数量。如果要转化为 <code>[begin, end)</code> 的形式，先将 <code>start</code> 转为正向索引值（如 <code>-1</code> 转为原始值最后一项的索引值），然后要删除的区间自然就是 <code>[start, start + deleteCount)</code>。</p> </li> <li> <p>当 <code>slice()</code> 缺省 <code>end</code> 和 <code>splice()</code> 缺省 <code>deleteCount</code>，它们都是会截取或删除 <code>start</code> 之后的所有元素，且包含 <code>begin</code> 或 <code>start</code>。</p> </li> </ul> </li> <li> <p>从是否改变原数组来区分：<code>slice()</code> 不会改变原数组，而 <code>splice()</code> 会改变原数组。从这点上看，它们适合应用以下场景：</p> <ul> <li><code>slice()</code> 适合用于浅拷贝数组，在不改变原数组的前提下，拷贝原数组的一部分或整个数组。</li> <li><code>splice()</code> 适合在数组中插入新元素。</li> </ul> </li> <li> <p>是否截取（或删除）起始项、终止项的问题，换个角度起始很容易区分。</p> <p>在实际场景中，起始项或终止项设为 <code>负数</code>，也是很常见的。我们只要在内心将其翻译为“正向”的索引值即可，比如 <code>-1</code> 表示数组最后一个元素，那它的索引值就是 <code>length - 1</code>，以此类推。</p> <p>当 <code>负数</code> 值超出 <code>-length</code> 或 <code>正数</code> 值超出 <code>length</code> 时，要么从 <code>0</code> 开始或 <code>数值末尾</code> 开始。</p> <ul> <li><code>slice()</code> 会截取 <code>[begin, end)</code> 区间的元素。</li> <li><code>splice()</code> 会删除 <code>[start, start + deleteCount)</code> 区间的元素。</li> </ul> <p>从数学的区间角度去看，这个就很容易区分了。</p> </li> </ol> <h2>参考链接</h2> <ul> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice">Array.prototype.slice()</a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">Array.prototype.splice()</a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/slice">String.prototype.slice()</a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/split">String.prototype.split()</a></li> </ul> </article> <article> <h1>Node 节点常用 API 详解</h1> <p>Sun, 26 Feb 2023 12:34:30 GMT</p> <p></p> <h2>Node 与 Element 的关系</h2> <p><code>Node</code> 是一个接口（基类），本身继承自 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget">EventTargent</a> 接口，有许多接口都从 <code>Node</code> 继承方法和属性：<code>Document</code>、<code>Element</code>、<code>Attr</code>、<code>CharacterData</code>（which <code>Text</code>、<code>Comment</code> and <code>CDATASection</code> inherit）<code>ProcessingInstruction</code>、<code>DocumentFragment</code>、<code>DocumentType</code>、<code>Notation</code>、<code>Entity</code>、<code>EntityReference</code>。</p> <blockquote> <p><code>Element</code> 继承于 <code>Node</code>，具有 <code>Node</code> 的方法，同时又拓展了很多自己的特有方法。</p> </blockquote> <p>比如以下这些方法，都明显区分了 <code>Node</code> 和 <code>Element</code>。</p> <table> <thead> <tr> <th>Node</th> <th>Element</th> </tr> </thead> <tbody> <tr> <td><code>childNodes</code></td> <td><code>children</code></td> </tr> <tr> <td><code>parentNode</code>、<code>parentElement</code></td> <td></td> </tr> <tr> <td><code>nextSibling</code></td> <td><code>nextElementSibling</code></td> </tr> <tr> <td><code>previousSibling</code></td> <td><code>previousElementSibling</code></td> </tr> <tr> <td>...</td> <td>...</td> </tr> </tbody> </table> <p>我们常说的「DOM 节点」就是指 <code>Node</code>，而「DOM 元素」是指 <code>Element</code>。DOM 节点包括了 <code>Element</code>、<code>Document</code>、<code>Comment</code>、<code>Text</code> 等。</p> <p>它们都有一个特定的节点类型（<code>nodeType</code>）来表示：</p> <table> <thead> <tr> <th>常量</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>Node.ELEMENT_NODE</code></td> <td><code>1</code></td> <td>一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Element" title="元素">元素</a>节点，例如 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p"><code><p></code></a> 和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/div"><code><div></code></a>。</td> </tr> <tr> <td><code>Node.TEXT_NODE</code></td> <td><code>3</code></td> <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Element"><code>Element</code></a> 或者 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Attr"><code>Attr</code></a> 中实际的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Text" title="文字"><code>文字</code></a></td> </tr> <tr> <td><code>Node.COMMENT_NODE</code></td> <td><code>8</code></td> <td>一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Comment"><code>Comment</code></a> 节点。</td> </tr> <tr> <td><code>Node.DOCUMENT_NODE</code></td> <td><code>9</code></td> <td>一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document"><code>Document</code></a> 节点。</td> </tr> <tr> <td><code>Node.DOCUMENT_TYPE_NODE</code></td> <td><code>10</code></td> <td>描述文档类型的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentType"><code>DocumentType</code></a> 节点。例如 <code><!DOCTYPE html></code> 就是用于 HTML5 的。</td> </tr> <tr> <td><code>Node.DOCUMENT_FRAGMENT_NODE</code></td> <td><code>11</code></td> <td>一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment"><code>DocumentFragment</code></a> 节点</td> </tr> </tbody> </table> <blockquote> <p>部分不常用或者已废弃的，此处未列举，详见 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType#%E5%B8%B8%E9%87%8F">Node.nodeType</a>。</p> </blockquote> <pre><code class="language-html"><div id="root">Root</div> </code></pre> <pre><code class="language-js">const element = document.getElementById('root') element.nodeType // 1，一个 Element 节点 element.children // HTMLCollection [] element.childNodes // NodeList [text] element.childNodes[0].nodeType // 3，一个 Text 节点 element.parentElement // Element body element.parentNode // Element body </code></pre> <p>总结：</p> <ul> <li><code>Node</code> 节点有很多种，比如 <code>Element</code>、<code>Document</code>、<code>Text</code>、<code>Comment</code> 等，而 <code>Element</code> 节点只是其中一种而已。</li> <li><code>Element</code> 是 <code>Node</code> 的派生类，因此 <code>Element</code> 节点可以访问 <code>Node</code> 的属性和方法，反之不可。</li> <li><code>Element</code> 节点常被称为“元素”。</li> <li>注意，常见的 <code>document</code> 对象是与 <code>Element</code> 不是同一类型的节点，因此称为 <code>Document</code> 节点比较合适。</li> </ul> <h2>Node 常见属性</h2> <table> <thead> <tr> <th>属性</th> <th>读写</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>Node.nodeType</code></td> <td>只读</td> <td>返回节点类型，如上表。</td> </tr> <tr> <td><code>Node.nodeName</code></td> <td>只读</td> <td>返回节点名字的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString">DOMString</a>。若是 <code>Element</code> 节点跟它管理的标签对应，如 <code>'DIV'</code>、<code>'SPAN'</code>（一般都是大写的）。若是 <code>Text</code> 节点对应的是 <code>'#text'</code>。若是 <code>Document</code> 节点对应是 <code>'#document'</code>。（若是 <code>Element</code> 节点，有个类似的 <code>Element.tagName</code> 属性返回）</td> </tr> <tr> <td><code>Node.nodeValue</code></td> <td>可读写</td> <td>返回或设置当前节点的值。一般用于 <code>Text</code>、<code>Comment</code> 节点的文本内容。而像 <code>Element</code>、<code>Document</code> 节点其返回值为 <code>null</code>。若 <code>nodeValue</code> 的值为 <code>null</code>，则对它赋值也不会有任何效果。</td> </tr> <tr> <td><code>Node.parentNode</code></td> <td>只读</td> <td>返回一个当前节点 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Node"><code>Node</code></a>的父节点。如果没有这样的节点，比如说像这个节点是树结构的顶端或者没有插入一棵树中，这个属性返回 <code>null</code>。</td> </tr> <tr> <td><code>Node.childNodes</code></td> <td>只读</td> <td>返回一个包含了该节点所有子节点的实时的<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList"><code>NodeList</code></a>。<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList"><code>NodeList</code></a> 是动态变化的。如果该节点的子节点发生了变化，<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList"><code>NodeList</code></a>对象就会自动更新。</td> </tr> </tbody> </table> <h2>添加节点</h2> <p>一般情况，往 DOM 中添加节点，会使用 <code>Node.appendChild()</code> 方法和 <code>Element.append()</code> 方法。它们的作用都是：<strong>将节点附加到指定父节点的子节点列表的末尾处</strong>。</p> <p>但有些差异，如下：</p> <ul> <li> <p><code>Element.append()</code> 方法接受 <code>Node</code> 对象和 <code>DOMString</code> 对象，而 <code>Node.appendChild()</code> 只接受 <code>Node</code> 对象。</p> </li> <li> <p><code>Element.append()</code> 没有返回值，而 <code>Node.appendChild()</code> 返回追加的 Node 对象。</p> </li> <li> <p><code>Element.append()</code> 可以追加多个节点和字符串，而 <code>Node.appendChild()</code> 只能追加一个节点。</p> </li> </ul> <blockquote> <p><code>Element.append()</code> 接受字符串作为参数，其实是将字符串转化为 <code>Text</code> 节点再附加。</p> </blockquote> <p>举个例子：</p> <pre><code class="language-html"><div id="root">Root</div> </code></pre> <pre><code class="language-js">const root = document.getElementById('root') const p = document.createElement('p') // 创建 p 元素 p.append('paragraph') // 往 p 元素添加 Text 节点 root.appendChild(p) // appendChild 每次只能添加一个 root.append('123', 'abc') // append 可以每次可添加多个 </code></pre> <p>这时 DOM 变成了：</p> <pre><code class="language-html"><div id="root"> "Root" <p>paragraph</p> "123" "abc" </div> </code></pre> <h3>注意点</h3> <ol> <li><code>Element.append()</code> 参数若是非字符串的原始值，会先转换为字符串的。</li> </ol> <pre><code class="language-js">root.append(true) // 成功添加一个值为 "true" 的文本节点 root.append(Symbol('desc')) // 将会抛出 TypeError，因为 Symbol 值无法转换为字符串 </code></pre> <blockquote> <p>需要注意的是，<code>Symbol</code> 原始值不能转换为字符串，只能将其转换成对应的包装对象，再调用 <code>Symbol.prototype.toString()</code> 方法。</p> </blockquote> <ol start="2"> <li>如果将被插入的节点已经存在于 DOM 中，那么 <code>appendChild()</code> 和 <code>append()</code> 只会将它从原先的位置移动到新的位置。</li> </ol> <pre><code class="language-html"><div id="modal">Modal</div> <div id="root">Root</div> </code></pre> <pre><code class="language-js">const root = document.getElementById('root') const modal = document.getElementById('modal') root.appendChild(modal) // 会发生什么呢？ </code></pre> <p>DOM 将会变成这样：</p> <pre><code class="language-html"><div id="root"> "Root" <div id="modal">Modal</div> </div> </code></pre> <blockquote> <p>注意，这种情况下原有节点的事件监听器也会随之移动。</p> </blockquote> <ol start="3"> <li><code>Node.appendChild()</code> 传入多个 <code>Node</code> 节点不会报错，但仅第一个有效。</li> </ol> <pre><code class="language-js">const root = document.getElementById('root') const span1 = document.createElement('span') span1.append('span1') const span2 = document.createElement('span') span2.append('span2') root.appendChild(span1, span2) // 仅 span1 节点添加成功 root.appendChild('string') // 但是这样会报错，TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. </code></pre> <h2>移除节点</h2> <p>移除节点，对应的方法是 <code>Node.removeChild()</code> 和 <code>Element.remove()</code>。</p> <ul> <li><code>Node.removeChild()</code> 方法是从 DOM 中移除一个子节点，并返回删除的节点。该方法接受一个 Node 节点。</li> <li><code>Element.remove()</code> 是移除一个节点，无返回值。</li> </ul> <blockquote> <p>由于 <code>Node.removeChild()</code> 会返回被移除的子节点，所以该子节点仍存在于内存中，因此你可以把这个节点重新添加回 DOM 中。若没有对被移除节点保持引用，则认为它已经没有用了，短时间内将会被垃圾回收。</p> </blockquote> <p>举个例子：</p> <pre><code class="language-html"><div id="root"> <p id="p"> p 元素节点</p> <span id="span">span 元素节点</span> 文本节点 </div> </code></pre> <pre><code class="language-js">const root = document.getElementById('root') const p = document.getElementById('p') const span = document.getElementById('span') p.remove() // <p> 节点从 DOM 中删除 root.removeChild(span) // <div> 的子节点 <span> 被移除，不存在引用，因此很快 span 对象将会被回收掉。 // ️ 此时 root.childNodes 可不只有一个 Node 子节点，前面 HTML 的写法，会产生一些空白符的文本节点。 root.childNodes // NodeList(3) [text, text, text]，而且最后一个才是 "\n 文本节点\n " 对应的文本节点 </code></pre> <h2>替换节点</h2> <p><code>Node.replaceChild()</code> 方法用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。语法如下：</p> <pre><code class="language-js">parentNode.replaceChild(newChild, oldChild) </code></pre> <p>请注意，第二个参数 oldChild 必须是 parentNode 节点下的子节点，否则会抛出异常：<code>DOMException: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.</code></p> <p>举个例子：</p> <pre><code class="language-html"><div id="modal">Modal</div> <div id="root">Root</div> </code></pre> <pre><code class="language-js">const root = document.getElementById('root') const modal = document.getElementById('modal') root.replaceChild(modal, root.childNodes[0]) // 将 modal 节点替换了 root 节点的第一个子节点（当然本示例中也只有一个子节点） </code></pre> <p>因此，DOM 变成了：</p> <pre><code class="language-html"><div id="root"> <div id="modal">Modal</div> </div> </code></pre> <h2>插入节点</h2> <p>插入节点，这里使用的时 Node.insertBefore() 方法。语法如下：</p> <pre><code class="language-js">var insertedNode = parentNode.insertBefore(newNode, referenceNode) </code></pre> <blockquote> <p>请注意，若第一个参数 <code>newNode</code> 是 DOM 中某个节点的引用，使用 <code>Node.insertBefore()</code> 会将其从原来的位置移动到新位置。这点也 <code>Node.appendChild()</code> 一致。</p> </blockquote> <p>举个例子：</p> <pre><code class="language-html"><div id="root">Root</div> </code></pre> <pre><code class="language-js">const root = document.getElementById('root') // 新节点 const p = document.createElement('p') p.append('paragraph') // 将新节点插入到 root 第一个子节点的前面 root.insertBefore(p, root.childNodes[0]) </code></pre> <p>因此，DOM 变成了：</p> <pre><code class="language-html"><div id="root"> <p>paragraph</p> "Root" </div> </code></pre> <p>注意两种情况：</p> <pre><code class="language-js">root.insertBefore(p) // 不会报错，也不会往 root 内插入任何节点 root.insertBefore(p, null) // 当引用节点为 null，p 将会被插入到 root 子节点列表末尾（类似 appendChild 的作用） </code></pre> <p>还记得以前项目里面，动态加载脚本，就是使用 <code>insertBefore</code> 插入到 DOM 中的。</p> <pre><code class="language-js">const script = document.createElement('script') script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js' script.onload = () => { /* do something, such as event listener */ } script.onerror = err => { /* handle error */ } const s0 = document.getElementsByTagName('script')[0] if (s0 && s0.parentNode) { s0.parentNode.insertBefore(script, s0) } </code></pre> <p>比如，动态加载微信 JSSDK，然后在脚本加载完成调用 <code>wx.config({ ... })</code> 接口注入权限验证配置。</p> <p>The end.</p> <blockquote> <p>发现一篇文章：<a href="https://juejin.cn/post/6844903604445249543">JavaScript 操作 DOM 常用的 API</a>，里面非常全面，可移步前往。</p> </blockquote> </article> <article> <h1>细读 ES6 | let 真的不会提升吗？</h1> <p>Sun, 26 Feb 2023 12:33:37 GMT</p> <p></p> <p>本将会从 ES5 中一些怪诞的行为出发，然后再到 ES6 中的 <code>let</code>、<code>const</code> 是否会「提升」的讨论。</p> <h2>前菜</h2> <p>先上个前菜，如下：</p> <pre><code class="language-js">{ var a = 2 function b() { } let c = 1 } console.log(a) // 2 console.log(b) // ƒ b() console.log(c) // ReferenceError: c is not defined </code></pre> <p>上述示例，相信这个谁都懂。再看下面这个示例：</p> <pre><code class="language-js">console.log(foo) { function foo() { } console.log(foo) } console.log(foo) // 这三个 foo 将会打印什么呢？ </code></pre> <blockquote> <p>请不要犹疑，快速给出脑海中“第一感觉”的答案。</p> </blockquote> <p>我想很多人的答案都是打印出三个 <code>ƒ foo()</code>，对吧。讲实话，在写下文章之前，我的答案也是这个。因为使用 <code>var</code>、<code>function</code> 关键字的声明语句会提升啊，因而有此答案...</p> <p>先不论答案对与错，我们看看各大浏览器的结果是什么：</p> <pre><code>1. Safari 14 依次打印出（JavaScriptCore 引擎） ƒ foo() ƒ foo() ƒ foo() 2. Chrome 92、Edge 92 (Chromium)、Node 14.16.0 依次打印出（V8 引擎） undefined ƒ foo() ƒ foo() 3. Firefox 92 依次打印出（SpiderMonkey 引擎） undefined ƒ foo() ƒ foo() </code></pre> <p>从结果看，主要区别在于第一个 <code>foo</code> 打印的是 <code>undefined</code> 或 <code>ƒ foo()</code>。可能 Safari 浏览器的结果更符合多数人的认知。</p> <p>为什么会有这样的结果，留个悬念，原因下面会介绍...</p> <h2>ES5 的提升</h2> <p>先明确一点：</p> <blockquote> <p>ES5（或更早）规定，函数只能在顶层作用域或函数作用域顶层声明，不能在代码块中声明。</p> </blockquote> <p>原来，上面示例在 ES5 规范中是不合法的。但由于浏览器厂商都支持这个不合法的语法，只不过各 JS 引擎的实现细节上存在差异，因此才出现了前面的差异。</p> <p>就比如 <code>__proto__</code> 从来就不是 ECMAScript 规范的一部分，但所有浏览器都支持，庆幸的是 <code>__proto__</code> 在各引擎表现是一致的。之前文章《<a href="https://github.com/tofrankie/blog/issues/260">关于 Await、Promise 执行顺序差异问题</a>》提到的情况，也是 JS 引擎实现差异所致。</p> <p><strong>请在不要在块级作用域下声明函数，可用函数表达式替代。</strong></p> <pre><code class="language-js">function foo() { } // 合法 { function bar() { } // 不合法，且不被推荐 var fn = function () { } // 合法 & 合理 } function baz() { function fn() { } // 合法 } </code></pre> <p>在 ESLint 中规则 <a href="https://alloyteam.github.io/eslint-config-alloy/?language=zh-CN#no-inner-declarations">no-inner-declarations</a> 就是专门检查这种情况的，若启用函数声明处会发出警告：<code>Move function declaration to program root.</code></p> <p>在 ES5 <a href="https://github.com/tofrankie/blog/issues/232">严格模式</a>下，对函数声明的某些行为做了限制。</p> <ol> <li>在早些版本中，在严格模式下含函数声明语句，会直接抛出 <code>SyntaxError </code>。而在当前版本（如 Chrome 92）是不会抛出语法错误的。</li> </ol> <pre><code class="language-js">'use strict' { function fn() { } // SyntaxError: in strict mode code, functions may be declared only at top level or immediately within another function console.log(fn) } // ⚠️ 而当前最新版本浏览器中，以上代码是不会抛出错误的。 </code></pre> <ol start="2"> <li>在代码块内函数声明，不能在代码块外部使用，否则会抛出 <code>ReferenceError</code>。原因是在严格模式下，<code>fn</code> 被提升至代码块的顶层，而不是全局作用域顶层。这点各浏览器表现是一致的。</li> </ol> <pre><code class="language-js">'use strict' console.log(fn) // ReferenceError: fn is not defined { function fn() { } } </code></pre> <blockquote> <p><a href="https://github.com/tofrankie/blog/issues/232">JavaScript 严格模式详解</a></p> </blockquote> <p>回到前面的示例（非严格模式下）：</p> <pre><code class="language-js">console.log(foo) { function foo() { } console.log(foo) } console.log(foo) </code></pre> <p>为什么行为那么怪，我们打个断点吧（以 Firefox 为例，由于 Chrome 那个 <code>window</code> 对象展开太多属性了，截图太影响篇幅了）：</p> <p></p> <p>看到没有，代码块中 <code>foo</code> 的变量是有提升至全局作用域顶层的，可......初始值是 <code>undefined</code> 而不是 <code>ƒ foo()</code>，Chrome 是一样的。</p> <p>当代码往下执行到 <code>function foo() { }</code> 会更新 <code>window.foo</code>，因而结果就是 <code>undefined</code>、<code>ƒ foo()</code>、<code>ƒ foo()</code>。</p> <p>而 Safari 中，一开始 <code>function foo() {}</code> 提升至全局顶层时就是一个函数，所以与 Chrome、Firefox 结果不同。</p> <blockquote> <p>不妨用 <a href="https://www.babeljs.cn/repl#?browsers=&build=&builtIns=false&corejs=3.6&spec=false&loose=false&code_lz=MYewdgziA2CmB00QHMAUAzEICUAoA3rgARHoCuYwALgJbilarZH5EC-xRokMCSamHLg7cocRCgxZsQA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-0&prettier=true&targets=&version=7.15.3&externalPlugins=">Babel</a> 转换一下。</p> </blockquote> <p>留两个示例，你们可以去看看都打印些什么，是否跟你们预期中的一致。尤其是第二个示例。</p> <pre><code class="language-js">if (true) { function foo() { console.log(1) } } else { function foo() { console.log(2) } } foo() </code></pre> <pre><code class="language-js">var a = 0 if (true) { console.log(a) a = 1 function a() { } a = 21 console.log(a) } console.log(a) </code></pre> <p>若第二个示例看不懂，请看<a href="https://stackoverflow.com/questions/61191014/why-does-block-assigned-value-change-global-variable">分析</a>。</p> <h2>ES6 会提升？</h2> <p>我们知道 ES6 中引入了块级作用域，自此 JavaScript 就拥有了全局作用域、函数作用域和块级作用域。</p> <p><strong>只要通过 <code>let</code>、<code>const</code>、<code>class</code> 关键字声明的变量或类，都具有块级作用域</strong>。而且使用之前必须先声明，否则会抛出 <code>ReferenceError</code>，这个错误与“暂时性死区”（Temporal Dead Zone，TDZ）有关。</p> <pre><code class="language-js">let foo = true if (true) { // enter new scope, TDZ starts // Uninitialized binding for `foo` is created console.log(foo) // ReferenceError let foo // TDZ ends, `foo` is initialized with `undefined` console.log(foo) // undefined foo = 1 console.log(foo) // 1 } console.log(foo) // true </code></pre> <p>即在 TDZ starts 与 TDZ ends 的时间跨度，称为“暂时性死区”。这种机制也使得 <code>typeof</code> 变得不再安全，在此区间内引用变量会抛出 <code>ReferenceError</code>。关于更多 TDZ，请看：</p> <ul> <li><a href="https://2ality.com/2015/10/why-tdz.html">Why is there a “temporal dead zone” in ES6?</a></li> <li><a href="https://exploringjs.com/es6/ch_variables.html#sec_temporal-dead-zone">The temporal dead zone </a></li> </ul> <h3>let/const 会提升吗？</h3> <p>其实，民间对于 <code>let</code> 等是否提升的问题，分为两派：</p> <ul> <li>一派认为 <code>let</code> 没有提升行为</li> <li>另一派则认为 <code>let</code> 还是有提升行为的</li> </ul> <p>无论提升与否，但我认为在实际编写代码中，大家对 <code>let/const</code> 的使用是毫无疑问的。因为大家对“<strong>使用前先声明</strong>”的认知是统一的。也相信很多人早就开始用 <code>let/const</code> 全面代替 <code>var</code> 了。</p> <blockquote> <p>也建议在项目 ESLint 中启用 <code>no-var</code> 规则。</p> </blockquote> <p>无论 <code>let/const</code> 提升与否，几乎不会影响大家在项目中的使用，而且不会造成混乱，它们比 <code>var/function</code> 的“提升”行为更容易区分。</p> <h3>什么是提升？</h3> <p>关于“提升”行为是什么，我就不多说了，大家都知道。</p> <p>但我想说，在 ECMAScript 规范中，尽管文档中不乏类似 <code>hoisting</code> 的单词，但就是没有对 “Hoisting” 一词作专门定义。</p> <p>但在前端社区中，<code>Hoisting</code> 的说法确实很多。我想可能是因为，ECMAScript 就 <code>var</code>、<code>function</code> 声明语句将会前置到所在作用域顶层的行为或现象，使用了 <code>hoisting</code>、<code>hoisted</code> 等词去描述，然后在坊间互传时，在语言表述或认知理解上总会存在偏差，久而久之形成了 <code>Hoisting</code> 的说法。</p> <p>综上：<strong>Hoisting 不是一个 ECMAScript 规范的术语，它只是描述了一种行为或现象。</strong></p> <h3>坊间对提升的理解</h3> <p>举个例子，在我们眼里它只是一个再简单不过的声明语句而已。</p> <pre><code class="language-js">var a = 1 </code></pre> <p>那么 JS 引擎是怎么理解的呢。就这条简单的语句，大概会经历这些步骤：</p> <pre><code class="language-text">编译阶段词法分析拆分成一个个有意义的 token 语法分析检查能否构成合法的语句，如无语法错误，将 tokens 形成 AST 代码生成生成 JS 引擎看得懂的代码执行阶段创建全局上下文在此之前 JS 引擎还会创建一个执行上下文栈去管理各种上下文。（非重点不展开）进入全局上下文主要是执行上下文初始化的一些工作： JS 引擎识别到`var a` 知道这是一个声明操作。首先以 a 作为标识符，在内存中创建一个空间（将用于存实际的值）。然后根据 ECMAScript 实现要求，这个 a 将会作为执行上下文（可理解为一个 JS 对象）中变量对象（VO）的一个属性名，并默认存值为 undefined。就是说，在前面分配的内存空间中存入 undefined 值。初始化还有其他一些工作，如确定作用域链等。执行全局上下文前面初始化工作完成之后，接下来就是，按顺序逐条执行代码（这里说的顺序，不一样与源代码编写顺序一致，你懂的）当执行到 `var a = 1` 这行的时候，JS 引擎眼里其实是 `a = 1` 赋值操作。于是根据标识符 a 找到它在内存中的位置，并将真实值 1 存入到该空间下，以覆盖原先的 undefined 值。还有一些如当前执行上下文 this 指向也是在这过程确定的。当代码都执行完之后，执行栈就会空闲下来，摸会鱼。等待后面有执行任务再进入工作状态。 </code></pre> <p>为什么又重新提一遍这个过程，原因是：</p> <ul> <li>一派人，将分配内存空间的过程，称为提升。</li> <li>另一派人，将分配内存后会默认存值的过程，称为提升。</li> </ul> <p>根据社区上的普遍说法，<code>let</code> 与 <code>var</code> 的区别在于分配内存空间后是否默认存值，若使用 <code>let</code> 不会默认存一个 <code>undefined</code> 值。<strong>但我对这句话是有所保留的。</strong></p> <p>原因如下：</p> <p>在 ECMAScript 规范中关于 <a href="http://262.ecma-international.org/#sec-let-and-const-declarations">#14.3.1 Let and Const Declarations</a> 有一段话是这么说的（原文略长，这里分成两段）：</p> <blockquote> <p><code>let</code> and <code>const</code> declarations define variables that are scoped to the running execution context's LexicalEnvironment. The variables are created when their containing Environment Record is instantiated but may not be accessed in any way until the variable's <em>LexicalBinding</em> is evaluated.</p> <p>A variable defined by a <em>LexicalBinding</em> with an <em>Initializer</em> is assigned the value of its <em>Initializer's</em> <em>AssignmentExpression</em> when the <em>LexicalBinding</em> is evaluated, not when the variable is created. If a <em>LexicalBinding</em> in a <code>let</code> declaration does not have an <em>Initializer</em> the variable is assigned the value <code>undefined</code> when the <em>LexicalBinding</em> is evaluated.</p> </blockquote> <p>以 <code>let a = 1</code> 为例，简单说明一下：</p> <p>第一部分大致意思：通过 <code>let/const</code> 声明的变量，它会记录当前词法环境信息，且在 <a href="http://262.ecma-international.org/#prod-LexicalBinding">LexicalBinding</a> 之前，不能以访问任何方式访问。<code>LexicalBinding</code> 是规则描述中的一个抽象操作，用 JS 代码比喻就是 <code>let a = 1</code> 中赋值操作。</p> <p>第二部分，其实就是当执行代码 <code>let a = 1</code> 时，将赋值操作符右边的表达式的值 <code>1</code> 绑定到变量 <code>a</code> 上。若是 <code>let a</code> 这种形式的，那么将 <code>undefined</code> 值（是一个二进制的真实值）绑定到变量 <code>a</code> 上。这就是前一部分提到的 <code>LexicalBinding</code> 过程。</p> <p>这段话里，由始至终没有提及执行上下文初始化时，要不要为变量默认存一个 <code>undefined</code> 的值。这就是我说有所保留的原因。</p> <h3>JS 引擎眼中的 TDZ</h3> <p>很多人都知道 TDZ 是什么回事。</p> <p>但我还是那句话：TDZ 是 ECMAScript 规范中的一个术语吗？</p> <p>按关键词通篇搜索 ECMAScript 文档可知，TDZ 并不是 ECMAScript 规范的术语。据说 TDZ 的说法最早出现在 ES Discussion 的讨论帖。因而，我认为 TDZ 跟 Hoisting 一样，它只是描述了一种行为或现象。这种现象就是：</p> <blockquote> <p>通过 <code>let</code>、<code>const</code>、<code>class</code> 关键字声明的变量或类，它不能在声明之前调用，否则会抛出 <code>ReferenceError</code>。</p> </blockquote> <p>前面提到 <code>LexicalBinding</code> 之前不允许访问，那么 JS 引擎总要告诉我们不能访问吧，于是就抛出一个 <code>ReferenceError</code> 来提醒我们：小伙子你不能这么使用。</p> <h3>从浏览器的角度看是否会提升？</h3> <p>先看个示例：</p> <pre><code class="language-js">console.log(a) // ReferenceError: a is not defined let a = 1 </code></pre> <p>上面这两行代码，问谁都知道将会抛出 <code>ReferenceError</code>。但我发现这个报错的 Message 是不同的：</p> <ul> <li>某旧版 Chrome：<code>ReferenceError: Cannot access 'a' before initialization</code></li> <li>最新 Chrome 92：<code>ReferenceError: a is not defined</code></li> <li>最新 Safari 14: <code>ReferenceError: Cannot access 'a' before initialization</code></li> </ul> <p>自从 ES6 发布 <code>let</code>、<code>const</code> 相关标准后，后续这块内容应该没有调整过了。从提示信息来看，<strong>我偏向认为 JS 引擎在实现时还是会存在“提升”行为的。</strong></p> <p>再看另一示例：</p> <pre><code class="language-js">function foo() { console.log('') let a = 1 } foo() </code></pre> <p>我们分别从 Chrome、Firefox、Safari 中观察以上示例：</p> <p>▼ Chrome 92 </p> <p>▼ Firefox 92 </p> <p>▼ Safari 14 </p> <p>我在 <code>let a = 1</code> 前一行语句添加了断点，从结果上看不完全相同。Chrome、Safari 中 <code>a</code> 的值是 <code>undefined</code>，而 FireFox 中 <code>a</code> 为 <code>uninitialized</code>。但是它们都在 <code>let a = 1</code> 之前就存在了变量 <code>a</code>，即使在下一行中都将会报错。</p> <p>也再次佐证了 <code>let/const/class</code> 声明语句是会产生提升行为。</p> <blockquote> <p><strong>尽管如此，还是必须在使用之前进行定义，否则会报错。</strong></p> </blockquote> <h3>若提升，它被提升到哪？</h3> <p>请看示例</p> <pre><code class="language-js">if (true) { let a = 1 console.log(a) // 1 } console.log(a) // ReferenceError: a is not defined </code></pre> <p>尽管会提升，它只会提升至当前代码块的顶层，所以在 <code>if</code> 语句外部无法访问 <code>a</code> 变量，因而报错。</p> <h2>总结</h2> <p>就本文内容，总结一下：</p> <p>跟 let/const 无关，跟是否严格模式相关。</p> <blockquote> <p>鉴于各浏览器实现差异，无论是否为严格模式，请不要在块级作用域中声明函数。</p> </blockquote> <p>let/const 会提升吗？</p> <ul> <li>从浏览器角度看，<code>let/const/class</code> 确实是存在提升行为的。</li> <li>从使用角度看，不需要关心 <code>let/const/class</code> 是否会提升，它必须在使用前进行定义。</li> <li>从面试官角度，我认为他想听到的答案是：<code>let/const/class</code> 是会提升的”。若你简单从 ECMAScript 规范、浏览器调试结果去回答，这题就基本能拿满分。</li> <li>如果本文所说的“提升”会让你感到困惑的话，请坚定不移地相信 <code>let/const/class</code> 是不存在提升行为的。</li> </ul> <p>还是那句话，不必过分关注 <code>let/const/class</code> 等声明的变量或类是否存在“提升”现象。但如果作为基础拓展，还是有必要了解一下的...</p> <p><strong>建议</strong></p> <p>在遇到一些不太理解的 ES6 语法的时候，不妨使用 <a href="https://www.babeljs.cn/repl#?browsers=&build=&builtIns=false&corejs=3.6&spec=false&loose=false&code_lz=MYewdgziA2CmB00QHMAUAzEICUAoA3rgARHoCuYwALgJbilarZH5EC-xRokMCSamHLg7cocRCgxZsQA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-0&prettier=true&targets=&version=7.15.3&externalPlugins=">Babel</a> 转换一下，看看它们是怎么实现的，说不定会有灵光一现的感觉。</p> <p>比如开头的示例 Babel 转换之后，就变成下面这样，然后结合自己的理解，想想为什么它要这么做。</p> <pre><code class="language-js">"use strict"; console.log(foo); { var _foo = function _foo() {}; console.log(_foo); } console.log(foo); </code></pre> <p>这一招是我看某篇文章的时候学到的...</p> <p>The end.</p> </article> <article> <h1>Arguments 对象与简易柯里化</h1> <p>Sun, 26 Feb 2023 12:31:58 GMT</p> <p></p> <h2>简述</h2> <p><code>arguments</code> 是函数实参对象，常被称为“类数组”（array-like）。形如：</p> <pre><code class="language-js">arguments = { 0: xx, 1: xx, ..., n - 1: xx, length: n // n 取决于实参的数量 } </code></pre> <p><code>arguments</code> 的一些特性：</p> <pre><code class="language-js">function foo() { // 1. arguments 不是数组，自然也不具备数组 forEach 等方法 Object.prototype.toString.call(arguments) // "[object Arguments]" arguments instanceof Array // false // 2. arguments 对象具有数字索引属性 arguments[0] // "a" arguments[1] // "b" // 3. arguments 对象有 length 属性，反映实参个数。 // 但与函数的 length 属性不同，foo.length 反映形参个数。可在 ES6 之后由于参数默认值、REST 参数等新特性，使 foo.length 变得不可靠 arguments.length // 2 foo.length // 0 } foo('a', 'b') </code></pre> <p>类数组对象的特征：含有 <code>length</code> 属性、索引元素属性，但不包含数组任何方法。</p> <p>常见的类数组，除了 <code>arguments</code> 之外，还有 <code>HTMLCollection</code>（通过 <code>getElementsByName()</code> 等返回的 DOM 列表）、<code>NodeList</code>（通过 <code>querySelectorAll()</code> 返回的节点列表）。</p> <h2>arguments 使用</h2> <p><code>arguments</code> 通常用于不能确定实参个数的应用场景，例如函数柯里化等。</p> <p>它还经常被转换为数组使用。</p> <pre><code class="language-js">// ES5 function foo() { // 方法一：会阻止某些 JS 引擎的优化，如 V8 // 请看：https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments var args = Array.prototype.slice.call(arguments) // var args = [].slice.call(arguments) // 方法二（推荐，尽管丑了点） var args = arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments) } // ES6 function foo() { // 利用 arguments 的 Iterator 接口，可以快速转化为数组 const args = [...arguments] // const args = Array.from(arguments) } function foo(...args) { // 直接使用 REST 参数，args 天生就是数组，可以直接使用 Array 的方法 } </code></pre> <p>像 <code>Function.prototype.apply()</code>、<code>Array.prototype.slice()</code> 等方法也可接受类数组，无需转换为数组再进行操作。举个例子：</p> <pre><code class="language-js">// 求最大数 function getMax() { return Math.max.apply(null, arguments) } getMax(1, 2, 3) // 3 </code></pre> <p>都 2021 年了，更被推荐按 ES6 的写法。</p> <h2>注意点</h2> <p>关于 <code>arguments</code> 只能在所有（非箭头）函数内部可用的局部变量。</p> <blockquote> <ul> <li> <p>存在于所有（非箭头）函数内部。函数上下文的 <code>AO</code> 对象就包括 <code>arguments</code> 属性。</p> </li> <li> <p>箭头函数不存在 <code>arguments</code> 对象。有时候箭头函数内可以使用 <code>arguments</code> 是“视觉”认知错误。</p> </li> <li> <p>ES6 的箭头函数中，要获取实参对象，可通过 REST 参数获得。</p> </li> <li> <p>非严格模式下，<code>arguments</code> 允许重新赋值。而且形参的更新，也会伴随着 <code>arguments</code> 对象相应属性值的更新。</p> </li> <li> <p>严格模式下，则不允许对 <code>arguments</code> 对象赋值，且不会最终参数的变化。也不允许使用 <code>arguments.callee</code> 方法（关于严格模式对 arguments 对象的限制，可看这篇<a href="https://github.com/toFrankie/blog/issues/232">文章</a>）。</p> </li> </ul> </blockquote> <p>在函数外使用会抛出 <code>ReferenceError</code>。此时它就是一个标识符而已。</p> <pre><code class="language-js">// 1. 相当于一个变量 arguments，因此会抛出引用错误 console.log(arguments) // ReferenceError: arguments is not defined // 2. 非严格模式下，可将其作为变量 let arguments = 1 // or arguments = 'any' console.log(arguments) // 1 // 3. 严格模式下，还是将其声明变量或对其进行赋值操作 'use strict' arguments = 1 // Wrong, SyntaxError: 'arguments' can't be defined or assigned to in strict mode code </code></pre> <p>在箭头函数内，没有 <code>arguments</code> 变量。例如以下这样使用同样会报错。</p> <pre><code class="language-js">const foo = () => { console.log(arguments) // ReferenceError: arguments is not defined } foo() </code></pre> <p>但这样用不会报错，这就是前面提到的“视觉认知”错误。</p> <pre><code class="language-js">function foo() { const bar = () => { console.log(arguments) // 由于箭头函数 bar 没有 arguments， // 这里引用的 arguments 对象其实是函数 foo 的实参对象。 } bar('b') } foo('a') // { 0: 'a', length: 1 } </code></pre> <p>非严格模式与严格模式，对 <code>arguments</code> 对象的操作。</p> <pre><code class="language-js">function foo(x) { x = 10 console.log(x) // 10 console.log(arguments[0]) // 10 } function bar(x) { 'use strict' x = 10 console.log(x) // 10 console.log(arguments[0]) // 1 // 以下这样将会直接抛出语法错误：SyntaxError: Unexpected eval or arguments in strict mode // arguments = {} } foo(1) bar(1) </code></pre> <h2>求和函数（柯里化）</h2> <p>假设我们有一个求和函数 <code>sum()</code>，要实现下面的需求：</p> <pre><code class="language-js">sum(1, 2, 3) // 6 sum(1, 2)(3)(4) // 10 sum(1)(2, 3)(4, 5, 6) // 21 // ... </code></pre> <p>其实上面的需求是有问题的，它没有出口，导致不知道什么时候求和。我们可以稍微改下需求：</p> <pre><code class="language-js">sum(1, 2, 3).value() // 6 sum(1, 2)(3)(4).value() // 10 sum(1)(2, 3)(4, 5, 6).value() // 21 // ... </code></pre> <p>就是说 <code>sum()</code> 函数的结束时机（出口）是调用 <code>value()</code> 方法的时候。</p> <pre><code class="language-js">function sum(...args) { const arr = [...args] function repeat(...nextArgs) { ;[].push.apply(arr, nextArgs) return repeat } repeat.value = () => { if (!arr.length) return 0 return arr.reduce((a, b) => a + b) } return repeat } </code></pre> <p>也可以改成调用 <code>sum(1, 2)(3)(4)()</code> 时进行求和，我们修改一下：</p> <pre><code class="language-js">function sum(...args) { if (!args.length) return 0 const arr = [...args] function repeat(...nextArgs) { if (!nextArgs.length) { return arr.reduce((a, b) => a + b) } ;[].push.apply(arr, nextArgs) return repeat } return repeat } sum() // 0 sum(1, 2, 3)() // 6 sum(1, 2)(3)(4)() // 10 sum(1)(2, 3)(4, 5, 6)() // 21 </code></pre> <p>The end.</p> </article> <article> <h1>JavaScript 作用域链简述</h1> <p>Sun, 26 Feb 2023 12:29:33 GMT</p> <p></p> <h2>前言</h2> <p>继上一篇文章 <a href="https://github.com/tofrankie/blog/issues/266">JavaScript 脚本编译与执行过程简述</a>，再来介绍一下 JavaScript 中的作用域链（Scope Chain）。</p> <p>函数的 <code>[[scope]]</code> 也是与闭包直接相关。并推荐专题：</p> <ul> <li><a href="https://github.com/mqyqingfeng/Blog/issues/17">JavaScript 深入系列 15 篇（冴羽）</a></li> <li><a href="https://github.com/tofrankie/blog/blob/main/docs/js/00-%E5%AF%BC%E8%AF%BB.md">JavaScript 专题（Veda）</a></li> </ul> <h2>作用域链的形成</h2> <p>作用域链（以下简称 <code>Scope</code>）与执行上下文相关。</p> <pre><code class="language-js">全局上下文：其 Scope 就是 GlobalContext.VO，即 window 对象。函数上下文：函数被调用时，函数上下文的 Scope 被创建，包括 AO 和这个函数内部的 [[scope]] 属性。 </code></pre> <p>因此，我们可以大致当前上下文的作用域链：<code>Scope = AO + function.[[scope]]</code>。</p> <h2>函数内部 [[scope]] 属性的形成</h2> <p>当函数被创建的时候，属性 <code>[[scope]]</code> 会保存所有的父级变量对象。</p> <p>举个例子：</p> <pre><code class="language-js">function foo() { // some statements... } </code></pre> <p>上述例子，函数 <code>foo</code> 处于全局上下文。而全局上下文中所声明的函数，它们的 <code>[[scope]]</code> 是 <code>GlobalContext.VO</code>，即 <code>window</code> 对象。因此 <code>foo.[[scope]] = [ GlobalContext.VO ]</code>。</p> <p>再看：</p> <pre><code class="language-js">function foo() { function bar() { // some statements... } } </code></pre> <p>同样地，函数 <code>foo</code> 的 <code>[[scope]]</code> 属性为 <code>GlobalContext.VO</code>。然后调用 <code>foo</code> 函数，进入 <code>foo</code> 函数上下文并进行初始化，包括以下过程：</p> <ol> <li>以当前函数 <code>foo.[[scope]]</code> 为基础初始化函数上下文的 <code>Scope</code>。</li> <li>初始化上下文的 <code>AO</code> 对象，包括 <code>Arguments</code>、形参、函数声明、变量声明。该过程若有函数声明，对应函数的 <code>[[scope]]</code> 也将会被确定，其值就是 <code>Scope</code>。</li> <li>当 <code>AO</code> 初始化完成后，将 <code>AO</code> 插入上下文的 <code>Scope</code> 中。</li> </ol> <p>因此有两个结论：</p> <ul> <li>当前上下文的作用域链 <code>Scope = AO + foo.[[scope]]</code>。</li> <li>当前上下文内定义的函数 <code>bar</code>，其 <code>[[scope]]</code> 属性值为上下文的 <code>Scope</code>，即 <code>AO + foo.[[scope]]</code>。</li> </ul> <p>注意，即便是函数表达式，它在代码执行的时候，才会确定其 <code>[[scope]]</code>，由于执行过程中 <code>AO</code> 也会跟着更新，且它们是引用关系，因此总能确保，当前作用域内的函数（函数声明或函数表达式）的 <code>[[scope]]</code> 总是 <code>AO + 各父级上下文的 AO/VO</code>。</p> <p>但是使用 <code>Function</code> 构造器来创建一个新的函数，该函数的 <code>[[scope]]</code> 只有 <code>GlobalContext.VO</code>。下面的示例中，执行 <code>bar</code> 函数会去作用域链上查找 <code>a</code> 变量，可它的作用域链只含全局对象，导致找不到 <code>a</code> 变量而抛出 <code>ReferenceError</code>。</p> <pre><code class="language-js">function foo() { var a = 1 var bar = new Function('console.log(a)') bar() // ReferenceError: a is not defined } foo() </code></pre> <p>因此，尽量不要使用构造函数的方式来创建函数。</p> <h2>影响作用域链的一些例子</h2> <p>一般情况下，一个作用域链 <code>Scope</code> 包括父级变量对象、函数上下文的活动对象 <code>AO</code>，并从当前上下文逐级往上查询。</p> <blockquote> <p>提醒一下：当我们从对象上查询某个属性，首先从对象自身属性上查找，当找不到的时候，才会往原型上查找......直至原型链的顶端 <code>Object.prototype</code> 再查询不到就返回 <code>undefined</code>。</p> </blockquote> <p>其实作用域链的原理跟原型链很类似，当前如果这个变量在自己的作用域中没有，那么它会往父级查找，直至最顶层（全局对象），再查找不到就会抛出 <code>ReferenceError</code>。</p> <p>前面讲过，当前上下文（作用域）内声明的变量或函数，是以属性的形式，放到一个变量对象（Variable Object）上的。但由于 <code>VO</code> 是无法通过代码访问的，因此在函数调用的时候 <code>VO</code> 被激活形成一个活动对象（Activation Object），它是可以被访问到的（可以简单的理解为 <code>AO</code> 是 <code>VO</code> 浅拷贝的一个引用）。</p> <p><strong>但是，AO 是没有原型的</strong>。假设我们在当前作用域下查找一个变量 <code>a</code>，相当于从 <code>AO</code> 上查找 <code>a</code> 属性。假设 <code>AO</code> 本身没有该属性，自然会往 <code>AO</code> 原型上查找，但很遗憾 <code>AO</code> 没有原型，即当前作用域下查找不到该变量（或称为属性）。然后往作用域链的上一级 <code>AO</code> 中查找......查找规律同理......直到全局作用域（其 <code>VO</code> 就是 <code>window</code> 对象）下的 <code>window</code> 对象查找。由于 <code>window</code> 对象是有原型的，如果自身找不到 <code>a</code> 属性，就会往 <code>window</code> 的原型上查找，查到就返回，查不到就抛出 <code>ReferenceError</code>。</p> <p>说那么多，还不如看个例子更清晰：</p> <pre><code class="language-js">Object.prototype.a = 'proto' function foo() { console.log(a) } foo() // "proto" </code></pre> <p>从例子可以看出 <code>foo</code> 函数上下文下并没有声明 <code>a</code> 变量，于是往上一级查找（即全局上下文），那么从 <code>window</code> 自身查找，是没有的。但是 <code>window</code> 是基于 <code>Object</code> 创建的（<code>window instanceof Object</code> 结果为 <code>true</code>），于是从 <code>Object.prototype</code> 上查找，并找到 <code>a</code> 属性，属性值为 <code>"proto"</code>。</p> <h3>如何证明 AO 是没有原型的？</h3> <pre><code class="language-js">Object.prototype.a = 'proto' function foo() { var a = 'inner' function bar() { console.log(a) } bar() } foo() // "inner" </code></pre> <p>过程就不在赘述了，假设 <code>AO</code> 是有原型的，那么 <code>bar</code> 函数上下文中查找 <code>a</code> 变量是，应该会取到 <code>AO</code> 对象原型上的 <code>a</code> 属性 <code>"proto"</code>，但实际情况 <code>a</code> 取到的结果是 <code>"inner"</code>。因此可以证明：活动对象 AO 是没有原型的。</p> <h3>全局和 eval 上下文中的作用域链</h3> <p>全局上下文的作用域链仅包含全局对象。而 eval 上下文与当前的调用上下文（calling context）拥有同样的作用域链。</p> <pre><code>GlobalContext.Scope = [ window ] EvalContext.Scope === CallingContext.Scope; </code></pre> <h3>代码执行时对作用域链的影响</h3> <p>有些情况下也会包含其他对象，例如执行期间，动态加入作用域链中的，例如 <code>with</code> 语句或者 <code>catch</code> 语句。此时作用域链如下：</p> <pre><code>Scope = (withObject | catchObject) + (AO | VO) + [[Scope]] withObject 表示 with 语句产生的临时作用域对象。如 with({ name }) 中的 { name } 对象； catchObject 表示 catch 从句产生的异常对象。如 catch(e) 中的 e 对象。 </code></pre> <p>举个例子：</p> <pre><code class="language-js">var foo = { x: 1, y: 2 } with (foo) { console.log(x) // 1 console.log(y) // 2 } </code></pre> <p>它的作用域链变成了：<code>Scope = foo + (AO | VO) + [[Scope]]</code>。上面这个例子可能没有体现出来，我们修改一下：</p> <pre><code class="language-js">var x = 1, y = 2 var foo = { x: 2 } with (foo) { var x = 3, y = 4 console.log(x) // 3 console.log(y) // 4 } console.log(x) // 1 console.log(y) // 4 console.log(foo) // { x: 3 } </code></pre> <p>我们来分析一下：</p> <ol> <li>进入全局上下文的时候，会创建声明 <code>x</code>、<code>y</code>、<code>foo</code> 变量。</li> <li>执行到 <code>with</code> 语句，会将 <code>foo</code> 对象添加至作用域链顶端。</li> <li><code>with</code> 内部的 <code>x</code>、<code>y</code> 前面已被解析添加，因此它只是一个赋值语句，并不会重新赋值语句。</li> <li>关键在于 <code>with</code> 内部，给 x、y 赋值，究竟是对应哪个变量。前面提到遇到 <code>with</code> 语句会往作用域链顶端插入该对象 <code>foo</code>（注意不会创建一个全新的作用域上下文，只是修改了作用域链而已）。</li> <li>因此，当 <code>console.log(x)</code> 查找 <code>x</code> 变量时，从 <code>foo</code> 对象上查找 <code>x</code> 属性，并找到，因此 <code>foo.x</code> 被修改为 <code>3</code>。</li> <li>接着，查找 y 变量，而 <code>foo</code> 对象上没有（其原型也没有），因此往上一级作用域查找（即全局作用域），因此全局作用域下的 <code>y</code> 被修改为 <code>4</code>。</li> <li>因此 <code>with</code> 内部的 <code>x</code>、<code>y</code> 分别打印出：<code>3</code> 和 <code>4</code>。</li> <li>当 <code>with</code> 执行完，作用域链上的 <code>foo</code> 对象会被移除。即作用域链上只剩下 <code>window</code> 对象。</li> <li>后面查找 <code>x</code>、<code>y</code>、<code>foo</code> 变量都是从全局作用域下查找的，因此会分别打印出 <code>1</code> 和 <code>4</code>。</li> <li>最后我们也可以看到 <code>foo</code> 对象是更新变为：<code>{ x: 3 }</code>。</li> </ol> <blockquote> <p>结合前面的原型的内容，假设将 <code>foo</code> 对象的原型上添加 <code>y</code> 属性，那么 <code>y = 4</code> 被修改的是 <code>foo.__proto__</code> 上的属性，而不是全局作用域下的 <code>y</code> 变量。（有兴趣的自行尝试一下）</p> </blockquote> <p>The end.</p> </article> <article> <h1>JavaScript 闭包详解</h1> <p>Sun, 26 Feb 2023 12:26:58 GMT</p> <p></p> <p>继上一篇文章 <a href="https://github.com/tofrankie/blog/issues/266">JavaScript 脚本编译与执行过程简述</a>，再来介绍一下 JavaScript 中神奇的“闭包”（Closure）。</p> <blockquote> <p><strong>闭包是基于词法作用域书写代码时所产生的自然结果。</strong></p> </blockquote> <p>JavaScript 语言是采用了词法作用域。一般情况下，函数、变量的作用域在编写的时候已经确定且不可改变的。除了 <code>eval</code>、<code>with</code> 之外，它们会在运行的时候“修改”词法作用域，但实际项目中，几乎很少用到它们，欺骗词法作用域会有性能问题，我们可以忽略。</p> <p>还有，千万别把 <code>this</code> 跟作用域混淆在一起，<code>this</code> 与函数调用有关，可以说是“动态”的。而作用域是静态的，跟函数怎样调用没关系。词法作用域也被叫做“静态作用域”。</p> <p>若对词法作用域、执行上下文、变量对象、作用域链等内容不熟悉的话，建议先学习相关知识。到时回来再看闭包的时候，就非常容易理解了。</p> <ul> <li><a href="https://github.com/mqyqingfeng/Blog/issues/17">JavaScript 深入系列 15 篇（冴羽）</a></li> <li><a href="https://github.com/tofrankie/blog/blob/main/docs/js/00-%E5%AF%BC%E8%AF%BB.md">JavaScript 系列专题（goddyZhao）</a></li> </ul> <h2>概念</h2> <p>无论网上文章，还是各类书籍，对闭包的定义都不尽相同。列举几个：</p> <ul> <li>MDN：闭包是指那些能够访问自由变量的函数。</li> <li>JavaScript 高级程序设计：闭包指的是那些引用了另一个函数作用域中变量的函数。</li> <li>你不知道的 JavaScript：闭包是代码块和创建该代码块的上下文中数据的结合。</li> </ul> <p>讲实话，我也不知道以上哪个说法更贴切、更符合。当了解<a href="https://github.com/tofrankie/blog/issues/268">作用域链</a>之后，就很容易理解闭包了。</p> <p>上面提到了<strong>自由变量</strong>一词，</p> <blockquote> <p>自由变量（Free Variable）：是指在函数中使用的，但既不是函数参数，也不是函数的局部变量的变量。</p> </blockquote> <pre><code class="language-js">var a = 1 function foo() { var b = 2 // b 不是自由变量 console.log(a) // a 是自由变量 } foo() </code></pre> <p>在 ECMAScript 中，闭包指的是：</p> <ul> <li> <p>从理论角度：所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就相当于是在访问自由变量，这个时候使用最外层的作用域。</p> </li> <li> <p>从实践角度：以下函数才算是闭包：</p> <ul> <li>即使创建它的上下文已经销毁，它仍然存在（比如，内部函数从父函数中返回）。</li> <li>在代码中引用了自由变量。</li> </ul> </li> </ul> <p>就我个人认为，闭包不是一个函数，它是一种机制，用于访问自由变量。闭包不是 JavaScript 中专有术语，在上世纪很早就被提出来了，在其他语言（如 Ruby 语言）中，闭包可以是一个过程对象，一个 Lambda 表达式或者是代码块。</p> <h2>Chrome 眼中的闭包</h2> <p>其实上面概念可能很多人都不理解，但问题不大，我们先看看 Chrome 眼中的闭包是长怎么样的。</p> <p>举个例子：</p> <pre><code class="language-js">function foo() { var a = 1 function bar() { console.log(a) } return bar } var f = foo() f() // 1 </code></pre> <p>相信很多人都知道，函数 <code>foo</code> 就是一个闭包，通过 Chrome 断点调试可以从视角感知。</p> <p></p> <p>但是我们稍微修改一下，</p> <pre><code class="language-js">var a = 1 function foo() { function bar() { console.log(a) } return bar } var f = foo() f() </code></pre> <p>此时 <code>a</code> 是全局上下文的变量，尽管对于函数 <code>bar</code> 来说 <code>a</code> 属于自由变量，但它不是 <code>foo</code> 函数上下文内声明的变量，因此 <code>foo</code> 就不是闭包。</p> <blockquote> <p><a href="https://www.zhihu.com/question/653156035/answer/3469481157">函数内访问全局变量算是闭包吗?</a></p> </blockquote> <p></p> <p><strong>总结：在函数 <code>A</code>（如 <code>foo</code>）中存在某个函数 <code>B</code>（如 <code>bar</code>，且必须是在 <code>A</code> 中定义的），且 <code>B</code> 内至少引用了 <code>A</code> 中的一个“变量”，那么函数 <code>A</code> 就是一个闭包。</strong></p> <p>请注意，与函数 <code>B</code> 的调用方式没关系。无论 <code>B</code> 是在 <code>foo</code> 内部被调用，还是作为返回值返回，然后在别处调用。</p> <p>再看一个例子：</p> <pre><code class="language-js">function foo() { var b = () => { // 由于 b 是箭头函数，内部没有 arguments 对象， // 所以这个 arguments 对象是 foo 中变量对象的一员， // 因此 foo 也是一个闭包。 console.log(arguments) } return b } var f = foo('foo') f() // { 0: 'foo', length: 1 } </code></pre> <p>上述这个示例，是为了提醒 <code>B</code> 对 <code>A</code> 中的某个“变量”（指变量、函数、<code>arguments</code>、形参等）的引用，不仅仅是通过 <code>var</code>、<code>function</code>、<code>let</code>、<code>const</code>、<code>class</code> 等关键字显式声明的，还可以是 <code>arguments</code> 对象、形参。换句话说，就是 AO 中的所有变量。</p> <p>再看，下面示例中 <code>foo</code> 是闭包吗？</p> <pre><code class="language-js">function foo(fn) { var a = 'local' fn() } function bar() { console.log(a) } var a = 'global' foo(bar) // "global" </code></pre> <p>答案是 NO。前面总结过一个函数要成为闭包，该函数（<code>foo</code>）内部必须存在另外一个函数（<code>fn</code>），且 <code>fn</code> 内需要 <code>foo</code> 中的某个变量。那不正好引用了 <code>foo</code> 中的变量 <code>a</code> 吗？显然，这理解是错误的。</p> <p>根据词法作用域可知，函数 <code>bar</code> 的作用域链 <code>[[scope]]</code> 在声明时就已确定且不可变，只含 <code>GlobalContext.VO</code>，因此当查找自由变量 <code>a</code> 时，当 <code>bar</code> 的 AO 内查不到，下一步是前往全局对象下查找，于是就找到了 <code>a</code> 其值为 <code>"global"</code>。所以 <code>fn</code> 内部对 <code>foo</code> 构成不了引用，因此 <code>foo</code> 就不是闭包。</p> <blockquote> <p>若到这里，对闭包还是懵懵懂懂的，这块引用的内容，请跳过。</p> <p>突然间，我好像明白了为什么函数内部缺省声明关键字的变量（如 <code>a = 1</code>），在执行时才将其视为全局变量。</p> <p>假设将其作为函数上下文的变量，要怎么做：</p> <ul> <li>假设将其视为当前函数执行上下文的一个变量，那么 JS 引擎在进入执行上下文时，初始化工作量实在太多了，要通篇扫描当前上下文的声明语句和赋值语句，还要判别赋值语句是单纯地给已有变量赋值，还是上面提到的缺省声明情况。显然很影响效率和性能。</li> <li>如果不通篇扫描，在执行代码的时候再更新到 AO 上，那么又会破坏 JavaScript 的词法作用域。似乎就变成了“动态作用域”。</li> </ul> <p>但如果将其视为全局上下文的一个变量，上面的额外的工作都省了。但注意，它与全局声明的变量有些区别，前者可以被删除，而后者无法删除（原因可看<a href="https://github.com/tofrankie/blog/issues/265">这里</a>）。在严格模式下对这种“隐式”声明全局变量的行为作为禁止，并抛出 <code>SyntaxError</code>。不确定是不是因为这个原因而被禁的。</p> <p>这个是突然灵光一闪的，所以也 Mark 下来了。</p> </blockquote> <p>综上所述，Chrome 浏览器眼中的闭包应该是这样的：</p> <p><strong>在某个函数 <code>A</code> 中存在另一个函数 <code>B</code>（函数 <code>B</code> 必须是在函数 <code>A</code> 中定义的），而且 <code>B</code> 内至少引用了 <code>A</code> 中的一个变量，那么当 <code>B</code> 在任意地方被调用时，函数 <code>A</code> 就是一个闭包。</strong></p> <p>其实，我认为概念不是很重要的...</p> <h2>更多示例</h2> <p>前面的示例，都相对比较简单和清晰的。再看多几个吧。</p> <p>关于 Chrome 浏览器调试，在 Source 选项卡进行断点调试时，可以看到作用域、闭包的变化。</p> <pre><code class="language-js">CallStack: 调用栈 Scope: 当前执行上下文的作用域链 Local // 当前 AO/VO 对象，但不完全是，我们也可以看到 this 指向 Block // 包含块级作用域 let、const、class 的变量 Closure // 闭包 modules // ESM 模块 Script // <script> 内所有 let、const、class 声明的变量 Global // 即 window，通过 var function 声明的全局变量，会放在这里 </code></pre> <h3>示例一</h3> <p>请问以下示例会不会产生闭包?（这道题不是考你 <code>this</code> 指向哈，别搞错了）</p> <pre><code class="language-js">var name = 'Frankie' var obj = { name: 'Mandy', sayHi: function () { return function () { console.log(this.name) } } } obj.sayHi()() </code></pre> <p>答案是 NO。我们可以在控制台看到。</p> <p></p> <p>然后再修改下，当 <code>obj.sayHi()</code> 返回的匿名函数被调用时，存在对 <code>obj.sayHi</code> 方法的引用。因此 <code>obj.sayHi</code> 就是一个闭包。</p> <pre><code class="language-js">var name = 'Frankie' var obj = { name: 'Mandy', sayHi: function () { var _this = this return function () { console.log(_this.name) } } } obj.sayHi()() </code></pre> <p></p> <p>我们知道箭头函数内部不存在 <code>this</code>，因此无论 <code>obj.sayHi()</code> 返回的匿名箭头函数怎样调用，最终 <code>this</code> 都指向 <code>obj</code> 对象。但我的疑问在于，以下示例会不会产生闭包？</p> <pre><code class="language-js">var name = 'Frankie' var obj = { name: 'Mandy', sayHi: function () { return () => { console.log(this.name) // console.log(arguments) // arguments 会产生闭包，而 this 是不会的 } } } obj.sayHi()() </code></pre> <p></p> <p>答案还是 NO。其实我这里是有个疑问的，按道理箭头函数不存在 <code>arguments</code> 和 <code>this</code> 对象，若在监听函数内访问这两个对象，都应该产生闭包。<strong>但事实是，<code>this</code> 引用不会使得 <code>sayHi</code> 称为闭包。但是若箭头函数内引用了 <code>arguments</code> 对象，则会产生闭包</strong>。这一点要注意下！</p> <h3>示例二</h3> <p>经典面试题，哈哈！</p> <pre><code class="language-js">for (var i = 1; i <= 3; i++) { setTimeout(function timer() { console.log(i) }, i * 1000) } </code></pre> <p>上述示例打印结果是：<code>3、3、3</code>（时间间隔一秒）。如果要每间隔一秒分别输出：<code>1、2、3</code>，怎么处理？解决方案很简单。</p> <p>解决方法一：</p> <p>给 <code>setTimeout</code> 披一个函数，即多一层作用域。</p> <pre><code class="language-js">for (var i = 1; i <= 3; i++) { (function fn(i) { setTimeout(function timer() { console.log(i) }, i * 1000) })(i) } </code></pre> <p>我就不打断点了，直接从执行过程分析：</p> <pre><code>1. 全局代码开始执行 ECStack = [ GlobalContext.VO ] 2. 开始执行 for 循环，fn 的函数上下文初始化如下， FunctionalContext<fn> = { AO: { arguments: { 0: 1, length: 1 } i: 1, timer: ƒ timer() }, Scope: [ GlobalContext.VO, AO ], this: undefined } 当 timer 声明的时候，它的 [[scope]] 就确定了，即 FunctionalContext<fn>.Scope 由于 fn 内部存在一个函数 timer，且 timer 中的 i 引用了 fn 中的 AO 变量，因此 fn 形成闭包。 3. 后面两次循环同理... 4. 一秒后，会调用 timer 函数，然后进入 timer 函数执行上下文，并初始化： FunctionalContext<timer> = { AO: { arguments: { length: 0 } }, Scope: [ GlobalContext.VO, FunctionalContext<fn>.AO, AO ], this: undefined } 执行 timer 内部代码时，要查找 a 变量，首先当前 AO 没有，接着往 FunctionalContext<fn>.AO 上面找，于是就找到了 a 为 1。然后 timer 执行完毕。 5. 又过了一秒，又会触发 timer 函数，过程同上。 6. 但注意每次循环执行的 fn 函数都不是同一个函数哦，它们原先执行上下文的 AO 对象被保存至 timer 函数 [[scope]] 里面了。因此，每次执行 timer 函数的时候，i 都是不一样的。 7. 所以按照这样去改造的话，就能每间隔一秒分别输出：1、2、3 </code></pre> <p>解决方法二：使用 <code>let</code> 来声明变量 <code>i</code>。</p> <p>首先请注意 <code>for</code> 语句两种方式的区别，如下：</p> <pre><code class="language-js">/* 全局作用域 */ for (let i = 1; ;/* 块级作用域 1 */) { /* 块级作用域 2 */ } /* 全局作用域 */ for (var j = 1; ;/* 全局作用域 */) { /* 全局作用域 */ } </code></pre> <pre><code class="language-js">for (let i = 1; i <= 3; i++) { setTimeout(function timer() { console.log(i) }, i * 1000) } </code></pre> <p></p> <p>三个作用域的体现：</p> <p></p> <h2>我认为的闭包</h2> <blockquote> <p>在我的理解里，每个 JavaScript 函数都是闭包。或者说某个函数引用了其作用域外的变量，那么这个函数可以被认为是闭包。</p> </blockquote> <p>尽管 Chrome 浏览器不认同我的说法，也不会影响我理解和使用闭包，因为我已经知道了作用域链与闭包直接相关。</p> <blockquote> <p>插一段废话，不想看的话直接跳到下一节。</p> </blockquote> <p>我在学习闭包的之前，先整体了 JS 整个加载、编译和执行过程。其实学习还是其他，都应该从宏观和微观的角度分析。它们的过程是循序渐进的。</p> <p>我猜，可能还有挺多有一定经验的 JSer 不知道 JS 脚本是按块加载的。按块加载什么意思？比如我们的网页有两个 JS 脚本（即两对 <code><script></code> 标签）。JS 引擎会先对其中一块进行编译与执行的过程，完成之后，才开始对下一个脚本进行编译与执行。假设你不了解，可能误以为 JS 引擎会通篇扫描所有脚本的语法，然后再按顺序（或不按顺序）执行。这是不对的。</p> <p>因此学习闭包也是一样的道理，请先了解 JavaScript 代码从编译到执行的过程。</p> <pre><code class="language-text">编译阶段：词法分析语法分析代码生成执行阶段：执行上下文栈出栈/入栈创建执行上下文初始化执行上下文：变量对象/活动对象（VO/AO）：创建时就确定函数的 [[scope]]（要学好闭包，这玩意要弄明白）作用域链（Scope Chain） This 代码执行：闭包词法作用域：什么是词法作用域？什么是动态作用域？ </code></pre> <p>等这些内容都属性之后，再结合本文或其他大佬的文章，闭包就自然而然就懂了。如果跳过以上内容，直接看闭包，我认为是很难理解的，即使好像当时看懂了，但很快就会忘了。</p> <p>The end.</p> </article> <article> <h1>JavaScript 脚本编译与执行过程简述</h1> <p>Sun, 26 Feb 2023 12:23:29 GMT</p> <p></p> <p>由于<a href="https://github.com/tofrankie/blog/issues/263">上一篇文章</a>对作用域、执行上下文等写得过于详细，而且参杂了很多内容，看起来并不好理解，因此就简化一下。</p> <p>在网页里，JavaScript 脚本是插入在 <code><script></code> 标签内的（内联或外部引入）。</p> <pre><code class="language-html"><script> // some JavaScript code... </script> <script> // some JavaScript code... </script> <script src="xxx"></script> </code></pre> <p>一般情况下，脚本是按顺序一块一块地执行的（一个 <code><script></code> 标签为一块）。只有执行完一块，才会执行下一块的。如果当前块有语法错误或其他错误导致当前块终止执行，不会影响下一块的执行。</p> <blockquote> <p>对于外部引入的 JavaScript 脚本，若设置 <code><script></code> 标签的 <code>defer</code>、<code>async</code> 属性会影响脚本的加载顺序，不会按着编写顺序执行。而这些属性对于内联脚本是没有作用的。</p> </blockquote> <p>要让 JavaScript 代码运行起来，包括<strong>编译阶段</strong>和<strong>执行阶段</strong>。每一块脚本的运行都包含这两个过程。请注意，不是将“所有块”编译完再执行的。</p> <pre><code>编译阶段：词法分析：将源码分解成很多个有意义的 token 语法分析：通篇检查当前块的语法是否有误，若无，将 tokens 转换为 AST 代码生成：将 AST 转换为 JS 引擎可执行代码执行阶段：创建执行上下文初始化执行上下文代码执行 </code></pre> <p>JS 引擎的优化工作是在编译阶段完成的，例如 V8 引擎。若编译阶段检查出语法有误，将会终止当前块的后续阶段。</p> <p>待编译阶段完成后，接着进入执行阶段。而执行阶段可以分为两个步骤：</p> <ol> <li>进入执行上下文</li> <li>代码执行</li> </ol> <p>进入执行上下文步骤，可以理解为，真正一行一行执行代码的前期准备工作：</p> <ol> <li>JS 引擎创建一个叫做：执行上下文栈（Execution Context Stack，ECS）的东西。顾名思义，就是用了维护执行上下文的。</li> <li>最先进入的肯定是全局代码，这个执行上下文被称为：全局上下文。首先插入 ECS，因此 ECS 栈底永远是全局上下文。后面调用函数时，会进入函数上下文，该上下文也会插入 ECS。</li> <li>每进入一个执行上下文，都会做一些初始化工作。</li> </ol> <p>待准备工作完成后，就会进入代码执行步骤，即一行一行地去执行代码。</p> <p>大家可能疑惑的地方，应该是“前期准备工作”的具体过程是怎样的？</p> <h2>执行上下文栈</h2> <p>进入全局代码，ECS 插入 GlobalContext，后面每调用一个函数就往 ECS 栈顶插入 FunctionalContext，函数执行完 FunctionalContext 又会从栈顶删除......周而复始的过程。ESC 栈底永远保留着 GlobalContext。直到页面销毁，它才会被删除，ESC 的使命也就结束了，被 JS 引擎清空。</p> <pre><code class="language-js">ECS = [ FunctionalContext // 栈顶 ... FunctionalContext GlobalContext // 栈底 ] </code></pre> <p>前面提到上下文：GlobalContext（全局上下文）、FunctionalContext（函数上下文）。</p> <h2>执行上下文</h2> <p>其实 JavaScript 中有三种执行上下文：</p> <pre><code>全局上下文：全局下都是属于全局上下文。函数上下文：顾名思义，就是 JavaScript 函数内的执行上下文 eval 上下文：就是 eval('some code...')，尽可能不要用，会影响性能、欺骗词法作用域 </code></pre> <p>每个执行上下文，可以看作是一个 JavaScript 对象，它有三个重要属性：</p> <pre><code>Variable Object: 即变量对象，简称 VO。我们声明的变量、函数就是放在 VO 中的。 Scope Chain: 即作用域链，简称 Scope。它包含了当前上下文 VO，以及各父级的 VO。查找变量就是根据这链条去查询的。 This: 即 this 对象，这是一个很灵活的对象，跟函数调用相关。 } </code></pre> <p>执行上下文的初始化工作，就是确定这些属性的一些值。这个“初始化”的过程也常被称为“预编译”，网上很多文章都有这个说法。</p> <h2>举例</h2> <p>上面的执行阶段的过程，举例会更好地说明。</p> <pre><code class="language-js">var a = 'global' function foo() { var a = 'local' function bar() { console.log(a) } bar() } foo() // "local" </code></pre> <p>当编译过程之后，进入执行阶段。JS 创建一个执行上下文栈 ECStack，总是先进入全局上下文，全局上下文被插入到执行上下文栈：</p> <pre><code class="language-js">ECStack = [ GlobalContext ] </code></pre> <p>接着对 GlobalContext 进行初始化：</p> <pre><code class="language-js">GlobalContext = { VO: window, Scope: [ GlobalContext.VO ], this: GlobalContext.VO } // 注意，不同宿主环境顶层对象是不一样的。 // 浏览器下为 window 对象，Node 中为 global 对象。 // 本文以浏览器为例，因此直接写了 window 对象。 </code></pre> <p>初始化的同时 <code>foo</code> 函数也被创建，会保存当前上下文的作用域链到函数内部的 <code>[[scope]]</code> 属性中。该属性可以通过 <code>console.dir(foo)</code> 查看。</p> <pre><code class="language-js">foo.[[scope]] = [ GlobalContext.VO ] </code></pre> <p>当全局上下文初始化完成之后，开始执行全局代码，当进行到 <code>foo()</code> 时，JS 引擎又会创建 <code>foo</code> 函数执行上下文，并插入 ECStack 栈顶。</p> <pre><code class="language-ts">ECStack = [ GlobalContext, FunctionalContext<foo> ] </code></pre> <p>跟着，会进入 <code>foo</code> 函数上下文，该上下文也会进行初始化工作：</p> <blockquote> <ol> <li>复制 <code>foo</code> 函数 <code>[[scope]]</code> 属性创建作用域链。</li> <li>用 <code>arguments</code> 创建活动对象 AO。</li> <li>初始化活动对象，即 AO 按顺序加入：形参、函数声明、变量声明。若存在同名情况，函数声明会覆盖形参，变量声明会被忽略。</li> <li>将 AO 对象加入 <code>foo</code> 作用域链顶端。</li> </ol> </blockquote> <pre><code class="language-js">FunctionalContext<foo> = { AO: { arguments: { length: 0 }, a: undefined, bar: ƒ bar() }, Scope: [ GlobalContext.VO, AO ], this: undefined // this 是在函数执行的时候才确定下来的，foo 函数的 this 的值跟作用域链没有关系 } </code></pre> <p>初始化完成，开始执行 <code>foo</code> 函数体代码，AO 对象也会更新。当执行到 <code>bar()</code> 函数时，又将会进入 <code>bar</code> 函数上下文，并进行初始化工作：</p> <pre><code class="language-ts">ECStack = [ GlobalContext, FunctionalContext<foo>, FunctionalContext<bar> ] </code></pre> <pre><code class="language-js">FunctionalContext<bar> = { AO: { arguments: { length: 0 } }, Scope: [ GlobalContext.VO, FunctionalContext<foo>.VO, AO ], this: undefined } </code></pre> <p>初始化完成，开始执行 <code>bar</code> 函数代码，在 <code>console.log(a)</code> 中，会查找 <code>a</code> 变量。</p> <blockquote> <p>按作用域链顺序查找，先从当前上下文的 AO 中查找，若查找不到再往上一层 AO 中查找...直到全局上下文的 VO 中查找，若再查找不到就会抛出引用错误（ReferenceError）。</p> </blockquote> <pre><code class="language-js">AO -> FunctionContext<foo>.AO -> GlobalContext.VO </code></pre> <p>很明显，<code>a</code> 变量将会在 <code>FunctionContext<foo>.AO</code> 中查找到，其值为 <code>"local"</code>，因此打印结果就是 <code>"local"</code>。</p> <p>待 <code>bar()</code> 执行完毕，<code>bar</code> 函数上下文会被从栈顶删除。</p> <pre><code class="language-js">ECStack.pop(FunctionalContext<bar>) </code></pre> <p>又将执行权交还给 <code>foo</code> 函数上下文，它也将会执行完毕，也会从栈顶移除。</p> <pre><code class="language-js">ECStack.pop(FunctionalContext<foo>) </code></pre> <p>然后又交还给全局上下文</p> <pre><code class="language-js">ECStack = [ GlobalContext ] </code></pre> <p>至此，这个程序执行完毕。当页面销毁时，ECStack 才会被清空。</p> </article> <article> <h1>JavaScript 变量不能被 delete 的原因</h1> <p>Sun, 26 Feb 2023 12:22:26 GMT</p> <p></p> <p>请记住：</p> <blockquote> <p>任何时候，变量只能通过使用 <code>var</code>、<code>let</code>、<code>const</code> 关键字才能被声明。</p> </blockquote> <p>我们都知道，无论在全局上下文，还是其他任何上下文中，都可以通过省略变量声明关键字的形式（类似 <code>a = 1</code> ）给全局对象添加一个新“<strong>属性</strong>”。请注意，严格来说这个 <code>a</code> 不能称作“变量”，原因是它不符合 ECMAScript 规范中变量的概念。</p> <p>举个例子：</p> <pre><code class="language-js">var a = 1 b = 2 delete a delete b console.log(a) // 1 console.log(b) // ReferenceError: b is not defined </code></pre> <blockquote> <p>严格来说，示例中 <code>b</code> 不能被称为变量。它只是全局对象下的一个属性。</p> </blockquote> <p>示例中，变量 <code>a</code> 并没有被删除掉，而 <code>b</code> 却被删除了，为什么呢？问题先放一放</p> <h2>delete 操作符</h2> <p>我们先看看 <code>delete</code> 操作符是怎样工作的，语法如下：</p> <pre><code class="language-js">delete object.property delete object['property'] </code></pre> <p>它的作用是删除对象的某个属性。一般情况下它的返回值都是 <code>true</code>，表示对象某个属性被移除成功。若该属性是一个<strong>自身的不可配置</strong>的属性，这时非严格模式下返回 <code>false</code>（即属性移除失败），而严格模式下会抛出 <code>TypeError</code>。</p> <p>上面这句话有两个关键词：“自身”、“不可配置”。</p> <ul> <li><strong>自身</strong>：是指对象本身的属性，而非原型上的。可通过 <code>Object.prototype.hasOwnProperty()</code> 判断。</li> <li><strong>不可配置</strong>：其实对象属性都有一个属性描述对象，属性描述对象其中包含一个 <code>configurable</code> 属性，若为 <code>false</code>，则表示该属性不可配置。可通过 <code>Object.getOwnPropertyDescriptor()</code> 获取。</li> </ul> <pre><code class="language-js">var a = 1 b = 2 window.hasOwnProperty('a') // true window.hasOwnProperty('b') // true Object.getOwnPropertyDescriptor(window, 'a') // { configurable: false, ... } Object.getOwnPropertyDescriptor(window, 'b') // { configurable: true, ... } </code></pre> <pre><code class="language-js">var obj = {} obj.__proto__.prop = 'proto' delete obj.prop // true，尽管 obj 本身没有 prop 属性，仍会返回 true obj.prop // "proto"，delete 不会删除原型上的属性 </code></pre> <h2>区别</h2> <p>回到文中开头的问题：变量 <code>a</code> 为什么没有被删除掉？</p> <p>尽管 <code>var a = 1</code> 和 <code>b = 2</code> 都会往 <code>window</code> 对象下添加对应属性，但是变量相比于简单属性来说，变量有一个特性：<code>DontDelete</code>，这个特性的含义就是不能通过 <code>delete</code> 操作符直接删除变量属性。</p> <h2>eval</h2> <p>另外还要注意，<code>eval</code> 上下文中的变量声明和函数声明没有 <code>DontDelete</code> 特性，因此是可以删除的。</p> <pre><code class="language-js">eval('var a = 1; function foo() {}') delete a // true delete foo // true </code></pre> <p>但是 <code>eval</code> 上下文内的函数体内部的变量或函数是不能删除的。</p> <pre><code class="language-js">eval('function foo() { var inner = 2; console.log(delete inner); console.log(inner) }') foo() // false </code></pre> <h2>总结</h2> <ul> <li>全局上下文或函数上下文中，变量声明或函数声明总含有 DontDelete 特性。</li> <li>eval 上下文的变量声明或函数声明不含 DontDelete 特性，因此可以被 delete 删除。</li> <li>不要相信全局对象下的 <code>delete</code> 操作。</li> <li><strong>编写代码时，不要写出类似 <code>a = 1</code> 省略声明关键字的语句。</strong></li> </ul> </article> <article> <h1>细读 JS | 事件详解</h1> <p>Sun, 26 Feb 2023 12:19:06 GMT</p> <p></p> <p>本文将会介绍事件、事件流、事件对象、事件处理程序、事件委托、以及兼容 IE 浏览器等内容。</p> <h2>一、概念</h2> <p>就本文一些“术语”作简单介绍，后续章节再详述。</p> <h3>1. 事件</h3> <p>事件，可以理解为用户与浏览器（网页）交互产生的一个动作。比如点击（click）、双击（dblclick）、聚焦（focus）、鼠标悬停（mouseover）、松开键盘（keyup）等动作。浏览器内部包含了非常复杂的事件系统，事件种类非常多，JavaScript 与 HTML 的交互就是通过事件实现的。前面列举这些仅仅是冰山一角。</p> <h3>2. 事件对象</h3> <p>在产生事件之后，浏览器会生成一个对象并存储起来，它包含了当前事件的所有信息，比如发生事件的类型、导致事件的元素以及其他与事件相关的数据。例如鼠标操作，该对象还会记录事件产生时鼠标的位置等信息。待事件完成使命（即事件完结）之后，它将会被销毁。这个对象，被称为“<strong>事件流</strong>”。</p> <h3>3. 事件流</h3> <p>事件对象在 DOM 中的传播过程，被称为“<strong>事件流</strong>”。</p> <p>经常能看到类似 IE 事件流、标准事件流（DOM 事件流）的说法，主要原因是早期浏览器厂商各干各的，没有一个“中间人”去进行统一。随着 Web 的飞速发展，相关标准就由特定机构制定，浏览器厂商负责按照标准去实现。例如 W3C、WHATWG、ECMAScript 等。但由于历史遗留原因，不得不写出一大堆的兼容方法以适配所有的浏览器。</p> <p>说到事件流，就不得不提“事件冒泡”和“事件捕获”了。它们分别由微软、网景团队提出，是两种几乎完全相反的事件流方案。前者被所有浏览器支持，后者则是被所有的现代浏览器所支持（包括 IE9 及以上）。</p> <p>由于事件捕获不被旧版本浏览器（IE8 及以下）支持，因此实际中通常在冒泡阶段触发事件处理程序。</p> <p><strong>综上，我们可以简单地，将 IE8 及以下浏览器的事件流处理方案称为“IE 事件流”，其余的称为标准事件流（或 DOM 事件流）。</strong></p> <h3>4. 事件处理程序</h3> <p>为响应事件而调用的函数被称为**“事件处理程序”**（也可称为事件处理函数、事件监听器、监听器）。通常我们会在发生事件之前，需提前为某个 DOM 元素编写事件处理监听器并进行绑定。待用户与浏览器产生交互后，事件对象会通过事件流机制在 DOM 中进行传播，一旦命中目标，事件监听器就被调用，并接收事件对象作为其唯一的参数。（注意，IE8 需要通过 <code>window.event</code> 全局对象来获取事件对象）</p> <h3>5. 事件委托</h3> <p>事件委托，它是利用事件流机制来提高页面性能的一种解决方案，也被称为事件代理。</p> <h3>6. 其他</h3> <p>文中还会提到<strong>事件目标</strong>一词，是指触发事件的 DOM 元素，但不一定是事件处理程序所在的 DOM 元素。当生成事件对象之后，事件目标（在 JavaScript 就是一个对象）将会被存储在事件对象的 <code>target</code> 属性（只读，IE8 则是 <code>srcElement</code> 属性）。</p> <p>还有，本文将大量使用到“现代浏览器”、“主流浏览器”、“标准浏览器”、“IE 浏览器”等词语。若无特殊说明，前三个指的是包括 IE9 ~ IE11 及其他常见的浏览器。而“IE 浏览器”通常指 IE8 及更低版本的浏览器。</p> <h2>二、事件流</h2> <p>前面提到，事件流就是事件对象在 DOM 中的传播过程。标准事件流过程，如下：</p> <pre><code class="language-text">捕获阶段 -> 目标阶段 -> 冒泡阶段 Captruing Phase -> Target Phase -> Bubbling Phase </code></pre> <blockquote> <p>其中 IE8 及以下浏览器，不支持事件捕获。即 IE8 事件流则不含捕获阶段。</p> </blockquote> <p>举个例子：</p> <pre><code class="language-html"><div id="div"> Division <p id="p">Paragraph</p> </div> </code></pre> <p>结合事件流，当我们点击 <code><p></code> 元素，产生一个点击事件。事件对象的捕获阶段的过程，如下：</p> <pre><code class="language-text">window -> document -> html -> body -> div -> p 注：到达 p 之前是捕获阶段的所有过程，到达 p 处于目标阶段。 </code></pre> <p>目标阶段过后，是冒泡阶段的过程，如下：</p> <pre><code class="language-text">p -> div -> body -> html -> document -> window </code></pre> <p>因此，事件流过程可以简单绘成如下表格：</p> <p></p>  <h3>1. 事件捕获、事件冒泡</h3> <p>上面提到的捕获阶段和冒泡阶段，所对应的就是事件捕获、事件冒泡。</p> <p>事件冒泡和事件捕获，分别由微软和网景团队提出，这是几乎完全相反的两个概念，是为了解决页面中事件流而提出的。</p> <ul> <li><strong>事件冒泡（Event Bubbling）</strong></li> </ul> <p>想象一下：气泡从水中冒出水面的过程，它是从里（底）到外的。事件冒泡跟这个过程很相似，事件对象会从最内层的元素开始，一直向上传播，直到 <code>window</code> 对象。因此冒泡过程如下：</p> <pre><code class="language-text">p -> div -> body -> html -> document -> window </code></pre> <p>注意，并非所有事件都支持冒泡行为，比如 <code>onblur</code>、<code>onfocus</code> 等事件。</p> <ul> <li><strong>事件捕获（Event Capture）</strong></li> </ul> <p>既然事件捕获与事件冒泡是相反的，捕获过程如下：</p> <pre><code class="language-text">window -> document -> html -> body -> div -> p </code></pre> <p>总的来说，可以简单概括为：冒泡过程是由里到外，而捕获过程则是由外到里。两者刚好相反。</p> <blockquote> <p>注意，现代浏览器都是从 <code>window</code> 对象开始捕获事件的，冒泡最后一站也是 <code>window</code> 对象。而 IE8 及以下浏览器，只会冒泡到 <code>document</code> 对象。</p> </blockquote> <h3>2. 示例</h3> <p>我们分别给 <code>div</code> 和 <code>p</code> 元素添加了两个事件处理程序，如下：</p> <pre><code class="language-js">const elem1 = document.getElementById('div') const elem2 = document.getElementById('p') // 捕获阶段触发事件处理程序 elem1.addEventListener('click', () => console.log('div capturing'), true) elem2.addEventListener('click', () => console.log('p capturing'), true) // 冒泡阶段触发事件处理程序 elem1.addEventListener('click', () => console.log('div bubbling'), false) elem2.addEventListener('click', () => console.log('p bubbling'), false) // 注意，本示例在现代浏览器中可正常执行。 </code></pre> <pre><code class="language-text">1. 点击 div 元素区域（不包含 p 元素区域），先后打印： div capturing div bubbling 2. 点击 p 元素区域，先后打印： div capturing p capturing p bubbling div bubbling </code></pre> <h3>3. 注意点</h3> <p>通过 DOM2 Event 提供的 <code>addEventListener()</code> 方法，可以在捕获阶段触发事件监听器。在事件监听器中，除了可以写业务逻辑外，还经常做阻止事件冒泡、取消元素默认行为等处理。</p> <p>如果不支持某个阶段，或事件对象已停止传播，则将跳过该阶段。例如，将 <code>addEventListener()</code> 方法的第三个参数 <code>useCapture</code> 设为 <code>true</code>，则将跳过冒泡阶段（但注意它是会到达目标阶段的）。如果事件监听器中调用了 <code>stopPropagation()</code>，则将跳过后续的所有阶段。</p> <p>还有，我们给某个 DOM 元素注册一个点击事件监听器，假设其后代元素未阻止冒泡行为，只要点击该元素本身或其后代任意子元素，最后都会触发该事件监听器。因此，我们可以得出一个结论：<strong>事件监听函数的作用范围，包含元素本身所占空间及其后代元素所占空间</strong>。不论后代元素是否溢出当前元素范围（长宽），或者是否脱离文档流（指绝对布局等）。</p> <h2>四、事件对象</h2> <p>前面提到，当用户与浏览器发生交互会产生一个事件，接着会创建生成一个事件对象。</p> <h3>1. 获取事件对象</h3> <p>在标准浏览器中，无论是以哪种方式（DOM0 或 DOM2）注册事件处理程序，事件对象都是传给事件处理程序的唯一参数。但是在 IE8 及以下浏览器下事件对象只能通过 <code>window.event</code> 获取。</p> <pre><code class="language-js">target.onclick = function (e) { // 以下方式可兼容所有浏览器 var ev = e || window.event } // ⚠️ 以下这块内容，纯属满足个人强迫症，建议跳过！！！ // // 关于 e 和 window.event 的异同（亲测）： // // 1. 在标准浏览器, 可能是为了兼容处理，同样支持 window.event 对象，实际中我们从事件监听函数参数 e 取值即可。 // 事件发生过程中 e === window.event。当事件结束后，window.event 的值变为 undefined。 // 这点 IE11 与标准浏览器表现是一致的。 // // 2. 在 IE9、IE10 中，e 可能是 MouseEvent 等实例对象， // 而 window.event 是 MSEventObj 实例对象， // 因此，e !== window.event，但问题不大。 // // 3. 在 IE8 及以下，DOM0 事件处理程序中将不会接收到事件对象，即 e 为 undefined。 // 此时要获取事件对象，只能通过全局 window.event 获取。 // 而且 window.event 是 Object 的实例，IE8 下并没有 MSEventObj 对象，与 IE9 ~ 10 有细微差别。 // 同样地，window.event 只在事件发生过程有效，其他时候取到的值为 null。 // 还有偶然发现，在 IE8 下竟然 Object.prototype.toString.call(null) === '[object Object]'，无语！ // // 4. 综上，想要在事件监听函数中取到事件对象，只需通过： // var ev = e || window.event // 以上这条语句，可以兼容所有浏览器，并正确获取到事件对象。 // 至于 IE9 ~ 10 中 e 与 window.event 的细微差异，实际中无需关心，没有影响。 // // 5. That's all. </code></pre> <blockquote> <p>需要注意的是，<strong>事件对象仅在事件发生过程有效，一旦事件完毕，就会被销毁</strong>。这一点所有浏览器表现一致。</p> </blockquote> <p>在标准浏览器里，可以通过 <code>window.event</code> 或者事件对象的 <code>eventPhase</code> 属性来验证，如下：</p> <pre><code class="language-js">target.onclick = function (e) { console.log(e === window.event) // true setTimeout(() => { console.log(e.eventPhase) // 0 console.log(window.event) // undefined }) } // ⚠️ 解释： // 1. 在标准浏览器，事件发生过程中监听器参数 e 与全局对象 window.event 是一致的 // 2. 事件对象 eventPhase 属性为 0 表示目前没有事件正在执行。 </code></pre> <h3>2. 内置事件类型</h3> <p>在现代浏览器中，内置了很多事件类型：</p> <ul> <li>用户界面事件（UIEvent）</li> <li>鼠标事件（MouseEvent）</li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Event#%E5%9F%BA%E4%BA%8E_event_%E7%9A%84%E6%8E%A5%E5%8F%A3">还有很多内置事件类型，请看...</a></li> </ul> <p>以上这些都是基于 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Event">Event</a> 接口的派生类，而事件对象一般是派生类的实例化对象。比如：</p> <pre><code class="language-js">target.onclick = function (e) { var ev = e || window.event console.log(ev instanceof Event) // true console.log(ev instanceof MouseEvent) // true } // ⚠️ // 注意 IE8 不含 MouseEvent 等派生类，只有 Event 基类， // 因此 IE8 中第 4 行会抛出错误。 </code></pre> <blockquote> <p>再啰嗦一句，<code>window.event</code> 最初是由 IE 引入的全局属性，且只有事件发生过程有效。现代浏览器为了兼容，也实现了这个全局属性。</p> </blockquote> <h3>3. Event 对象</h3> <p>前面提到，所有事件对象都源自 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Event">Event</a> 基类，意味着 Event 基类（对象）本身包含适用于所有事件类型实例的属性和方法。主要是为了兼容性。</p> <ul> <li>标准浏览器中 Event 对象常用属性：</li> </ul> <pre><code class="language-js">Event = { bubbles // （只读，布尔值）表示当前事件是否会冒泡。 eventPhase // （只读，数值范围 0 ~ 3）表示事件流正被处理到了哪个阶段。 // 0 表示当前没有事件正在被处理， // 1 ~ 3 分别表示事件对象处于捕获、目标、冒泡阶段。 cancelable // （只读，布尔值）表示事件是否可以取消元素的默认行为。 // 若为 true 可以使用 preventDefault() 来取消元素的默认行为。 // 若为 false 调用 preventDefault() 没有任何效果。 cancelBubble // （布尔值）如果设为 true，相当于执行 stopPropagation()，事件对象将会停止传播。 // 标准浏览器中，请使用 stopPropagation()； // IE8 浏览器中，只能使用 cancelBubble = true 来阻止传播； currentTarget // （只读）返回当前事件处理程序所绑定的节点（不一定是事件触发节点）。 // 标准浏览器，this === currentTarget 总为 true。 // IE8 及以下浏览器不支持该属性。 target // （只读）返回事件触发节点（即事件目标）。 // 当事件触发节点与事件处理程序所绑定节点相同时，target === currentTarget 结果为 true。 // IE8 及以下浏览器中不支持该属性，请使用 srcElement 属性（相当于 target 属性）。 type // （只读，字符串）表示事件类型 isTrusted // （只读，布尔值）true 表示事件是由浏览器生成的。 // false 表示由 JavaScript 创建，一般指自定义事件。 detail // 数值。该属性只有浏览器的 UI 事件才具有，表示事件的某种信息。 // 例如，单击为 1，双击为 2，三击为 3。 composed // （只读，布尔值）表示事件是否可以穿过 Shadow DOM 和常规 DOM 之间的隔阂进行冒泡。 // 替代已废弃的是 scoped 属性。 } </code></pre> <ul> <li>标准浏览器中 Event 对象常用方法：</li> </ul> <pre><code class="language-js">Event = { preventDefault() // 取消元素默认行为 // 仅当 cancelable 为 true 时，调用 preventDefault() 才有效。 // IE8 及以下浏览器，请设置 returnValue = false 来取消元素默认行为 stopPropagation() // 停止事件对象的传播，后续事件流其他阶段将会被取消。 // IE8 及以下浏览器，请设置 cancelBubble = true，来阻止冒泡行为 // 注意 IE8 及以下浏览器“有且仅有”事件冒泡过程。 stopImmediatePropagation() // 用来阻止同一时间的其他监听函数被调用。 // 当同一节点同一事件指定多个监听函数时，这些函数 // 会根据添加次序依次调用。但只要其中一个监听函数调用了 // stopImmediatePropagation() 方法，其他监听函数就不会执行了。 // DOM3 Event 新增方法 } </code></pre> <ul> <li>IE8 及以下浏览器中 Event 对象常用属性：</li> </ul> <pre><code class="language-js">Event = { cancelBubble // （可读写，布尔值）设置为 true 可以阻止冒泡行为。 // 作用同标准浏览器中的 stopPropagation() 方法。 returnValue // （可读写，布尔值）默认为 true。 // 设置为 false 可以取消元素的默认行为 // 作用同标准浏览器中的 preventDefault() 方法。 srcElement // （只读）返回事件触发节点（即事件目标）。 // 作用同标准浏览器中的 target 属性。 type // （只读，字符串）表示事件类型（同标准浏览器的 type 属性）。 } </code></pre> <p>以上这些方法（包括标准浏览器、IE 浏览器）列举出来是为了方便下文封装方法时，注意兼容处理。</p> <h2>五、事件冒泡与默认行为</h2> <p>前面提到，并非所有事件都支持冒泡行为。因此，若给不支持冒泡行为的事件去 <code>stopPropagation()</code> 是多次一举，且没有意义。取消元素默认行为同理。</p> <p>阻止事件冒泡和元素默认行为经常放在一起讨论。上一章节已经清楚介绍了标准浏览器与 IE 浏览器的兼容性。如下：</p> <pre><code class="language-js">// 阻止冒泡 ev.stopPropagation() // 标准浏览器 ev.cancelBubble = true // IE8 及以下浏览器 // 取消默认行为 ev.preventDefault() // 标准浏览器 ev.returnValue = false // IE8 及以下浏览器 // ⚠️ ev 表示事件发生过程中的事件对象 </code></pre> <p>还有，在事件处理程序中慎用 <code>return false</code> 语句，不同环境下会发生非预期行为。例如：</p> <pre><code class="language-js">// 原生 JS，只会取消元素默认行为，不会阻止事件冒泡行为 target.onclick = function (e) { return false } // JQuery，既会取消元素默认行为，也会阻止事件冒泡行为 $(target).on('click', function (e) { return false }) </code></pre> <blockquote> <p>因此，无论使用 JQuery 库或其他库，还是原生 JS 去编写事件处理程序，都尽量避免使用 <code>return</code> 语句。</p> <p>其实 JQuery 已经给我们封装了 <code>stopPropagation()</code> 和 <code>preventDefault()</code> 方法，它是兼容所有浏览器的，因此按照标准浏览器的方式来去阻止冒泡或取消默认行为即可。可参考<a href="https://www.cnblogs.com/mizzle/archive/2012/09/13/2683377.html">文章</a>。</p> </blockquote> <h2>六、事件处理程序</h2> <p>事件处理程序，也常称为事件监听器或监听器。可通过以下几种方式给 DOM 元素注册事件处理程序：</p> <ul> <li>HTML 事件处理程序（不推荐）</li> <li>DOM0 事件处理程序（也不太推荐）</li> <li>DOM2 事件处理程序</li> <li>IE 事件处理程序</li> </ul> <p>前两种方式不推荐，后两种就能覆盖 99.9% 的浏览器了。如果不用兼容 IE，那么 DOM2 就更香了，至少可以减少 70% 的代码量...</p> <h3>1. HTML 事件处理（不推荐使用）</h3> <p>这是最早的事件处理方式，说实话在项目中没见过这种写法。简单了解下即可，不推荐使用。</p> <pre><code class="language-html"><div> Division <p onclick="inner()">Paragraph</p> <p onclick="inner(event)">Paragraph</p> <p onclick="console.log('inner')">Paragraph</p> </div> <script> function inner() { // 事件处理程序中 this 指向 window 对象 console.log('inner') } </script>  </code></pre> <h3>2. DOM0 事件处理程序</h3> <p>使用方法简单，也很常见。就是将一个函数赋值给一个 DOM 元素的事件属性。其中元素的事件属性通常是 <code>on + type</code>（事件类型），比如 <code>onclick</code>、<code>ondblclick</code>、<code>onfocus</code>、<code>onload</code> 等。</p> <p>举个例子：</p> <pre><code class="language-js">// 注册事件处理程序 target.onclick = function (e) { // this 将会指向事件处理程序所绑定的元素 // do something... } // 移除事件处理程序 target.onclick = null </code></pre> <blockquote> <p>这种方式只能够注册一个事件处理程序。若多次绑定，后者会覆盖前者。</p> </blockquote> <h3>3. DOM2 事件处理程序</h3> <p>在 DOM2 Event 标准中，新增了 <code>addEventListener()</code> 和 <code>removeEventListener()</code> 方法来注册或移除事件处理程序。它的优势有两点：</p> <ul> <li>可以为同一元素同一事件注册多个事件处理程序。</li> <li>事件处理程序可以在“捕获阶段”被触发。这也是目前<strong>唯一</strong>可以在捕获阶段命中事件处理程序的方法。</li> </ul> <blockquote> <p>该特性仅在现代浏览器中被支持，IE8 及以下不支持。</p> </blockquote> <p><strong>语法：</strong></p> <pre><code class="language-js">target.addEventListener(type, listener, useCapture) target.removeEventListener(type, listener, useCapture) </code></pre> <ul> <li><code>type</code>：表示事件类型（字符串）。比如 <code>click</code>。</li> <li><code>listener</code>：通常是一个函数，即事件处理程序。被触发时将会接收到一个事件对象作为参数。</li> <li><code>useCapture</code>：布尔值，默认为 <code>false</code>。该参数决定了 <code>listener</code> 是否在“捕获阶段”被触发。</li> </ul> <p>举个例子：</p> <pre><code class="language-js">function handler(e) { // this 将会指向事件处理程序所绑定的元素 // do something... } // 注册事件处理程序 target.addEventListener('click', handler, false) // 移除事件处理程序 target.removeEventListener('click', handler, false) // ⚠️ 注意点： // 1. 保留事件处理程序的引用，是移除监听事件的唯一方法。 // 2. 换句话说，若使用匿名函数作为事件处理程序，将无法移除监听事件。 // 3. 若多次注册事件处理程序，对应地需要多次移除事件。 // 4. addEventListener() 是目前唯一一个可在“捕获阶段”触发事件监听的方法。 // 5. 在注册事件处理程序时，即使 listener 引用相同，若 useCapture 参数不同， // 也会被注册多个。 // 6. 多次重复（指三个参数都完全相等时）注册事件处理程序，仅第一次有效。 // 这点与 DOM0 事件处理程序的方式是不同的。 // 7. 除了 DOM 元素，其他对象也有这个接口，比如 window、XMLHttpRequest 等。 // 8. IE8 及以下浏览器不支持，对应的解决方法是 attachEvent() 和 detachEvent() 方法， // 这是 IE 浏览器特有的。 </code></pre> <h3>4. IE 事件处理程序</h3> <p>尽管 IE8 及以下浏览器不支持 <code>addEventListener()</code> 和 <code>removeEventListener()</code> 方法，但它有两个类似的方法来注册或移除事件处理程序，那就是 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#compatibility"><code>attachEvent()</code></a> 和 <code>detachEvent()</code>。区别是不支持在事件捕获阶段触发，因为 IE8 事件流只含事件冒泡。</p> <p><strong>语法如下：</strong></p> <pre><code class="language-js">// 只接受两个参数 target.attachEvent(ontype, listener) target.detachEvent(ontype, listener) </code></pre> <ul> <li><code>ontype</code>：表示事件属性（字符串），即 <code>on + type</code>，比如 <code>onclick</code>。这点与 <code>addEventListener()</code> 中的 <code>type</code> 参数是不同的。</li> <li><code>listener</code>：同样接受一个函数作为事件处理程序。请注意 <code>listener</code> 函数内部 <code>this</code> 将指向 <code>window</code> 对象。</li> </ul> <p>举个例子：</p> <pre><code class="language-js">function handler(e) { // this 将会指向 window 对象 // 要处理 this 指向问题很简单，例如 Function.prototype.bind() 等 // do something... } // 注册事件处理程序 target.attachEvent('onclick', handler) // 移除事件处理程序 target.detachEvent('onclick', handler) // ⚠️ 注意点： // 1. 注意第一个参数是 on + type 的形式，这点与 DOM2 是不同的。 // 2. 若无特殊处理，事件处理程序内 this 指向 window 对象，这点与 DOM0、DOM2 是不同的。 // 3. 若 Function.prototype.bind() 去处理 this 问题，注意保持事件处理程序引用问题。 // 4. attachEvent() 不支持在捕获阶段触发事件处理程序。 </code></pre> <h3>5. 跨浏览器事件处理程序</h3> <p>跨浏览器，就是说要同时兼容 IE 浏览器和现代浏览器。其实上面已经将所有方式都介绍了一遍，写起来就很简单了。</p> <pre><code class="language-js">// 注册 function addHandler(el, type, fn) { if (el.addEventListener) { el.addEventListener(type, fn, false) } else if (el.attachEvent) { el.attachEvent('on' + type, fn) } else { el['on' + type] = listener } } // 移除 function removeHandler(el, type, fn) { if (el.removeEventListener) { el.removeEventListener(type, fn, false) } else if (el.detachEvent) { el.detachEvent('on' + type, fn) } else { el['on' + type] = null } } </code></pre> <h3>6. DOM3 自定义事件（扩展内容）</h3> <p>前面介绍的，全都是浏览器内置事件，当用户与浏览器发生交互时，事件（对象）就诞生了，它接着会在 DOM 中进行传播，命中目标后会触发相应的时间处理函数。</p> <p>在 DOM3 Event 标准上，除了在 DOM2 Event 的基础上，新增了很多事件类型，而且它还允许自定义事件。但是自定义事件，需要“手动”触发，即主动调用 <code>dispatchEvent()</code> 方法才可以。</p> <p>至于用处嘛，假设动态加载脚本，需在加载完成后才能做一些事情，例如配置什么的。那么我们需要监听脚本什么时候加载完，这时候自定义事件就能发挥其作用了。举个例子：</p> <pre><code class="language-js">// 创建自定义事件 const customEvent = new CustomEvent('ready') // 创建元素 const el = document.createElement('script') el.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js' el.onload = () => el.dispatchEvent(customEvent) // 派发事件 el.onerror = err => { /* 脚本加载失败... */ } // 注册事件处理程序 el.addEventListener('ready', e => { // 脚本加载完成后，可以做些配置什么的... }) // 插入 document const s = document.getElementsByTagName('script')[0] if (s && s.parentNode) s.parentNode.insertBefore(el, s) </code></pre> <p>关于 <code>CustomEvent</code> 的一些语法注意点：</p> <pre><code class="language-js">// 1. 为 watch 事件添加监听事件函数 target.addEventListener('watch', function () { /* ... */ }, false) // 2. 创建 watch 事件，若无需传入指定数据，可直接使用 new Event('watch') var watchEvent = new CustomEvent('watch', detail: { /* ... */ }, // 可以是任意值，通常是与本事件相关的一些信息 bubbles: false, // 是否冒泡 cancelable: false // 是否取消默认行为 ) // 3. 手动触发事件 target.dispatchEvent(watchEvent) // ⚠️ 注意点： // 1. 前面 1 和 2 的顺序可以调换过来，没关系的。 // 2. 上述我们给事件目标 target（DOM 元素）注册了 watch 事件监听函数， // 是无法通过鼠标点击或触控等形式去触发事件监听函数的， // 需要主动触发，即调用 dispatchEvent() 方法。 // 3. 还有 CustomEvent 是有兼容性的，IE 是不支持的， // 4. 至于兼容性如何处理，暂时不展开讲述。后面有空再另起一文吧。 </code></pre> <h3>7. 小结</h3> <ul> <li> <p>可能有人会好奇为什么不介绍 DOM1，原因是 DOM1 没有关于事件的新增或改动，因而没提及。</p> </li> <li> <p>若同时存在 HTML 事件处理程序和 DOM0 处理函数，后者会覆盖掉前者。 DOM2 不会覆盖 HTML 事件处理程序或 DOM0 事件处理程序。</p> </li> <li> <p>为同一事件目标注册多个事件处理程序时，执行次序为：<strong>HTML 事件处理程序或 DOM0 > DOM2 或 IE 事件处理程序</strong>。跟事件注册先后顺序无关。</p> </li> </ul> <p>若有兴趣想了解 DOM0 ~ DOM3 新增了哪些内容，可看<a href="http://c.biancheng.net/view/5887.html">文章</a>。另外附上 WHATWG 的 DOM 标准：<a href="https://dom.spec.whatwg.org/">DOM Living Standard</a>。</p> <h2>七、总结（上半部分）</h2> <p>就前面关于事件处理程序所有兼容性问题，我们来进一步封装下。</p> <blockquote> <p>由于要兼容 IE8 的原因，这里并没有使用 <code>class</code> 类的写法。因为经过 Babel 处理，类似 <code>Object.assgin()</code>、<code>Object.defindProperty()</code> 等 ES5 方法在 IE8 及更低版本浏览器压根不支持。</p> </blockquote> <p>先写个构造函数吧：</p> <pre><code class="language-js">function CreateMyEvent({ type, el, fn }) { this.el = el this.type = type this.fn = fn this.listener = function (e) { // IE8 DOM0 需要从 window.event 获取事件对象 const ev = e || window.event // 为 IE8 的事件对象添加以下属性和方法： // target、currentTarget、stopPropagation()、preventDefault() if (!ev.stopPropagation) { ev.target = ev.srcElement ev.currentTarget = el ev.stopPropagation = () => { ev.cancelBubble = true } ev.preventDefault = () => { ev.returnValue = false } } // 统一 this 指向 fn.call(el, ev) } } CreateMyEvent.prototype.addEventListener = function () { const { type, el, listener } = this if (el.addEventListener) { // 为了兼容所有浏览器，这里将 useCapture 设为 false el.addEventListener(type, listener, false) } else if (el.attachEvent) { el.attachEvent('on' + type, listener) } else { el['on' + type] = listener } } CreateMyEvent.prototype.removeEventListener = function () { const { type, el, listener } = this if (el.removeEventListener) { el.removeEventListener(type, listener, false) } else if (el.detachEvent) { el.detachEvent('on' + type, listener) } else { el['on' + type] = null } } </code></pre> <p>一些注意点在注释有标注体现，然后进行实例化并调用，如下：</p> <pre><code class="language-js">// 创建实例对象 const myEvent = new CreateMyEvent({ el: document.getElementById('directory'), type: 'click', fn: e => { // 解决以下痛点： // 1. this 总指向监听事件函数所绑定节点 // 2. e 总会得到事件对象 // 3. IE8 也可以轻松使用 target、currentTarget、stopPropagation()、preventDefault() // do something... } }) // 注册/移除监听器 myEvent.addEventListener() setTimeout(() => { myEvent.removeEventListener() }, 5000) </code></pre> <blockquote> <p>以上示例部分使用了 ES6 的语法，都 2021 年了，如需兼容 ES5 请放心交给 Babel 吧。（亲测 IE8 下可正常运行）</p> </blockquote> <h2>八、事件委托</h2> <p>除了面试中常被问及，实际应用场景里也是优化性能的一种手段。</p> <p>前面提到，事件流的传播路径：<strong>捕获阶段 -> 目标阶段 -> 冒泡阶段</strong>。我们都知道，所有浏览器都支持事件冒泡，但事件捕获并不是都支持的，例如 IE8。</p> <blockquote> <p>需要注意的是，多数情况下利用事件冒泡行为实现“事件委托”（或称为事件代理）。<strong>但其实，捕获阶段也是可以实现事件委托的</strong>。可能为了兼容，选择前者居多。</p> </blockquote> <p>为什么要事件委托？</p> <p>想象一个生活场景：一本书的目录包含大章节、小章节，每个小章节都会对应一个页码，然后根据页码就可以翻到对应的内容。</p> <p>如果用程序实现的话，“最笨”的做法是：给每个小章节注册一个点击监听器并实现跳转。似乎也没太大问题，是吗？如果这本书有 1000 个小章节，意味着要注册 1000 个事件监听函数。先不说性能问题，写代码的是不是得疯掉。假设还没疯，哪天产品经理又新增 500 章节，是不是又得改，总有一天会逼疯你的！</p> <p>如果用“事件委托”怎么做呢？我把监听器注册到目录上。当点击某章节时，利用点击事件的冒泡行为，事件会被传递到目录并命中来触发监听器。而且，这是一劳永逸的事情，无论产品经理如何增删章节，都无需再改动了。这不就有时间摸鱼了对吧。</p> <blockquote> <p>在 JavaScript 中，页面中事件处理程序的数量与页面整体性能直接相关。原因有很多。首先每个函数都是对象，都占用内存空间，对象越多，性能越差。其次，为指定事件处理程序所需访问 DOM 的次数会先期造成整个页面交互的延迟。只要在事件处理程序时多注意一些方法，就可以改善页面性能。(这段话摘自《JavaScript 高级程序设计》)</p> </blockquote> <p>举个例子：</p> <pre><code class="language-html"> <div id="directory"> Directory <ol> <div class="chapter">Chapter1</div> <li data-page="10">section1</li> <li data-page="20">section2</li> </ol> <ol> <div class="chapter">Chapter2</div> <li data-page="30">section1</li> <li data-page="40">section2</li> </ol> </div> </code></pre> <p>以上示例中，有多组 <code><ol></code>、<code><li></code> 的目录，想要点击 <code><li></code>（即 <code>section</code> 部分）的时候，打开书本对应页面。</p> <p>根据上述给出的 HTML 示例，事件委托最粗糙、最不灵活、最简单的实现如下：</p> <pre><code class="language-js">function delegate() { const el = document.getElementById('directory') el.addEventListener('click', e => { const { page } = e.target.dataset if (page === undefined) return // do something... // 处理业务逻辑，比如： console.log(`Please turn to page ${page} of the book.`) }) } </code></pre> <p>上述示例，只要点击 <code><div id="directory"></code> 及其后代元素都会命中事件处理程序，按需求是点击 <code><li></code> 才要执行业务逻辑。像点击 <code><div class="chapter"></code> 其实是没有实际意义的。而且明显上面的方法并不灵活。</p> <p>我们再改一下：</p> <pre><code class="language-js">/** * 事件委托 * * @param {Element} el 事件委托的目标元素 * @param {string} type 事件类型 * @param {Function} fn 监听器 * @param {string} selectors CSS 选择器 */ function delegate({ el, type, fn, selectors }) { el.addEventListener(type, e => { if (!selectors) { fn.call(el, e) return // 请注意不要 return false 避免取消默认行为 } // myClosest() 作用：向上查找最近的 selectors 元素。 // 1. 内置 closest() 方法兼容性较差，不支持 IE 浏览器； // 2. 内置 closest() 方法内部从 Document 开始检索的，若结合事件委托场景， // 如果从事件绑定元素（含）开始检索，效果更优。 // 3. 因而，基于 Element.closest() 稍作修改，并添加到 Element 原型上。 if (!Element.prototype.myClosest) { ;(() => { Element.prototype.myClosest = function (s, root) { let el = this let i // 其实改成 root.querySelectorAll(s) 也行， // 目前这种写法是为了让 root === el 也正常匹配到， // 但是回头想一下，这种情况还有必要事件委托吗，对吧！自个看着办吧，问题也不大 const matches = root.parentElement.querySelectorAll(s) do { i = matches.length // eslint-disable-next-line no-empty while (--i >= 0 && matches.item(i) !== el) {} } while (i < 0 && (el = el.parentElement)) return el } })() } // 若匹配不到 selectors 则返回 null const matchEl = e.target.myClosest(selectors, el) matchEl && fn.call(matchEl, e) // 如果像这样绑定 this，请注意： // 1. fn 的 this 指向 selectors 对应的元素 // 2. e.target 仍指向事件目标 // 3. e.currentTarget 仍指向监听器绑定元素。 // 4. 由于事件对象的 target、currentTarget 属性只读，唯有改变 this 来指向引用 selectors 元素 }) } </code></pre> <p>按上述方式封装的好处是方便灵活，一些实现思路或注意事项，在相应位置的注释已标注。</p> <pre><code class="language-js">delegate({ el: document.getElementById('directory'), type: 'click', selectors: 'li', fn: e => { const { page } = e.target.dataset console.log(`Please turn to page ${page} of the book.`) // other statements... } }) </code></pre> <p>思路就这样，其实很简单，麻烦在于兼容各浏览器而已。若不需要兼容 IE 浏览器，那简直不能太爽了，后面会给出一个简化版。</p> <blockquote> <p>当然上面还不支持 IE8 浏览器。因为 <code>e.target</code>、<code>el.addEventListener</code> 还没兼容处理。请稍等，下一章节结合前面的内容再整合一下。</p> </blockquote> <h2>九、最终总结</h2> <p>这里会将本文所有的内容都封装在一起，包括 <code>addEventListener()</code>、<code>attachEvent()</code>、事件委托以及兼容问题等等。</p> <h3>1. 兼容所有浏览器的版本（包括 IE8）</h3> <p>先给一个<strong>可兼容 IE8 的版本</strong>。可以轻松地按现代浏览器的方式去注册、移除事件监听器，以及方便处理冒泡、默认行为等。</p> <blockquote> <p>但前提是，使用 Babel 转换一下以兼容 ES5。</p> </blockquote> <pre><code class="language-js">function CreateMyEvent({ el, type, fn }) { this.el = el this.type = type this.fn = fn this.listener = function (e) { // 使得 IE8 中，正常用上 target、stopPropagation() 等属性或方法 const ev = CreateMyEvent.eventPolyfill(e, el) // 统一 this 指向 fn.call(el, ev) } this.added = false // 是否已添加监听器 } CreateMyEvent.eventPolyfill = function (e, currentTarget) { // 处理 IE8 兼容性问题 const ev = e || window.event if (!ev.stopPropagation) { ev.target = ev.srcElement ev.currentTarget = currentTarget ev.stopPropagation = () => { ev.cancelBubble = true } ev.preventDefault = () => { ev.returnValue = false } } return ev } CreateMyEvent.closestPolyfill = function () { Element.prototype.myClosest = function (s, root) { let el = this let i const matches = root.parentElement.querySelectorAll(s) do { i = matches.length // eslint-disable-next-line no-empty while (--i >= 0 && matches.item(i) !== el) {} } while (i < 0 && (el = el.parentElement)) return el } } CreateMyEvent.prototype.addEventListener = function () { if (this.added) { console.warn('Please note that you have added event handler before and will not be added again.') return } const { type, el, listener } = this if (el.addEventListener) { // 为了兼容所有浏览器，这里将 useCapture 设为 false el.addEventListener(type, listener, false) } else if (el.attachEvent) { el.attachEvent('on' + type, listener) } else { el['on' + type] = listener } this.added = true } CreateMyEvent.prototype.removeEventListener = function () { const { type, el, listener } = this if (el.removeEventListener) { el.removeEventListener(type, listener, false) } else if (el.detachEvent) { el.detachEvent('on' + type, listener) } else { el['on' + type] = null } this.added = false } CreateMyEvent.prototype.delegate = function (selectors) { const { el, fn } = this if (!selectors) { this.addEventListener() return } // 在重写 listener 监听器之前，确保移除此前的监听器 if (this.added) console.warn('Please note that the previously registered event handler will be deleted and a new event handler will be added.') this.removeEventListener() // 重写监听器 this.listener = function (e) { const ev = CreateMyEvent.eventPolyfill(e) // 在 Element 原型上添加 myClosest 方法 if (!Element.prototype.myClosest) CreateMyEvent.closestPolyfill() const matchEl = ev.target.myClosest(selectors, el) matchEl && fn.call(matchEl, ev) } // 重新注册监听器 this.addEventListener() } </code></pre> <p>使用方式如下：</p> <pre><code class="language-js">// 创建实例对象 const myEvent = new CreateMyEvent({ type: 'click', el: document.getElementById('directory'), fn: e => { // 1. e 总是能获取到事件对象。 // 2. 阻止冒泡：e.stopPropagation() // 3. 取消默认行为：e.preventDefault() // 4. 唯一要注意的是： // 当使用事件委托时，this 指向 selectors 对应元素； // 其他的均指向事件监听器所绑定的元素，即 e.currentTarget。 } }) // 注册事件监听器 myEvent.addEventListener() // 有效 // 重复注册事件监听器，会被阻止（实际上注册同一个也是无效的）。 myEvent.addEventListener() // 无效 // 移除事件监听器 myEvent.removeEventListener() // 有效 // 移除后，重新注册事件处理程序 myEvent.addEventListener() // 有效 // 事件委托，可传入 selectors 作为参数（实质上也就是注册事件处理程序） // 不传入 selectors 参数时，相当于 myEvent.addEventListener() 所以无效 myEvent.delegate() // 无效 // 事件委托：内部会先移除上一个事件监听器，在重新注册 myEvent.delegate('li') // 有效 // 事件委托，这将会注册全新的一个事件监听器（同样的上一个会被移除） myEvent.delegate('li') // 有效 </code></pre> <p>哎，丑陋的代码......由于 IE8 不支持类似 <code>Object.assgin()</code>、<code>Object.defindProperty()</code> 等 ES5 方法，上面只能使用最原始的构造函数去写了。</p> <blockquote> <p>⚠️ 暂不支持添加多个事件监听器，实际中我暂时想不到需要添加多个事件监听器的场景。实现倒是不难，处理起来也很简单，但我感觉没必要。</p> </blockquote> <p>另外，前面示例是将页面数据定义在 <code>data-*</code> 上的，但由于 IE10 及更低版本浏览器并不支持 <code>Element.prototype.dataset</code> 属性，因此也要处理一下。例如：</p> <pre><code class="language-js">// 也要用 Babel 转换一下 function getDataset(el) { if (el.dataset) return el.dataset const attrs = el.attributes const dataset = {} for (let i = 0, re1 = /^data-(.+)/, re2 = /-([a-z\d])/gi, len = attrs.length; i < len; i++) { // data-camel-case to camel-case const matchName = re1.exec(attrs[i].name) if (!matchName) continue // camel-case to camelCase const name = matchName[1].replace(re2, (...args) => { return args[1].toUpperCase() }) // add to dataset dataset[name] = attrs[i].value } return dataset } </code></pre> <p>不需要兼容 IE8 的版本如下，将会使用 <code>class</code> 写法，会简洁很多。辣鸡 IE...</p> <h3>2. 兼容现代浏览器版本（包括 IE9 ~ IE11）</h3> <pre><code class="language-js">class CreateMyEvent { constructor({ el, type, fn }) { this.el = el this.type = type this.fn = fn this.listener = fn.bind(el) this.added = false // 是否已添加监听器 } static closestPolyfill() { Element.prototype.myClosest = function (s, root) { let el = this let i const matches = root.parentElement.querySelectorAll(s) do { i = matches.length // eslint-disable-next-line no-empty while (--i >= 0 && matches.item(i) !== el) {} } while (i < 0 && (el = el.parentElement)) return el } } addEventListener() { if (this.added) { console.warn('Please note that you have added event handler before and will not be added again.') return } const { type, el, listener } = this el.addEventListener(type, listener, false) this.added = true } removeEventListener() { const { type, el, listener } = this el.removeEventListener(type, listener, false) this.added = false } delegate(selectors) { const { el, fn } = this if (!selectors) { this.addEventListener() return } // 在重写 listener 监听器之前，确保移除此前的监听器 if (this.added) console.warn('Please note that the previously registered event handler will be deleted and a new event handler will be added.') this.removeEventListener() // 重写监听器 this.listener = function (e) { // 在 Element 原型上添加 myClosest 方法 if (!Element.prototype.myClosest) CreateMyEvent.closestPolyfill() const matchEl = e.target.myClosest(selectors, el) matchEl && fn.call(matchEl, e) } // 重新注册监听器 this.addEventListener() } } </code></pre> <p>到这里，好像就完了，改了好几版，想吐血...</p> <p>The end.</p> </article> <article> <h1>细读 JS | 执行上下文、作用域</h1> <p>Sun, 26 Feb 2023 12:17:32 GMT</p> <p></p> <p>本文主要是深入 JavaScript 执行过程，覆盖了执行上下文、变量对象、作用域链、This、闭包等内容。</p> <p>但文中可能参杂了很多其他内容，看起来没有那么地清晰。内容主要整合了：《JavaScript 高级程序设计（第四版）》、冴羽大佬的 JavaScript 专题系列、Veda 专题、以及本人此前写过的一些文章。</p> <p>其实我建议你们以下专题会更好：</p> <ul> <li><a href="https://github.com/mqyqingfeng/Blog/issues/17">JavaScript 深入系列 15 篇（冴羽）</a></li> <li><a href="https://github.com/tofrankie/blog/blob/main/docs/js/00-%E5%AF%BC%E8%AF%BB.md">JavaScript 专题（Veda）</a></li> </ul> <h2>一、JavaScript</h2> <blockquote> <p>先讲一些不是很重要的“废话”，可直接跳到第二节。</p> </blockquote> <p>就个人而言，自从喜欢上写文章之后，我经常会在一些概念性上的东西纠结，本着认真负责任的态度，理应如此。举个例子，JavaScript 是什么类型的语言？</p> <ul> <li>JavaScript 是解析型语言？</li> <li>还是编译型语言？</li> </ul> <p><strong>说实话，虽然作为一个 JSer，我至今也没弄明白 JavaScript 是什么语言</strong>。我不知道你们会不会有这些纠结点，反正我会，我想要一个官方且权威的解释，并将它作为我此后的观点。假设将来某一天有人问我：JavaScript 是什么？我可以只字不差地跟他说道。</p> <h3>JavaScript 与 ECMAScript 的历史关系</h3> <p>我们知道，JavaScript 语言的创造者是 Brendan Eich，也被称为 JavaScript 之父。1995 年任职于 Netscape 公司的 Brendan Eich 接到一项任务：负责开发一个在浏览器上运行的编程语言。没错，那就是“后来”的 JavaScript 语言。</p> <p>其实，起初 JavaScript 语言的名称是 “LiveScript”。由于当时 Java 语言如日中天，为了蹭热度而更名为 JavaScript。原本 JavaScript 这个项目就是 Netscape 公司和 Sun 公司合作开发，用这个名字也无可厚非。</p> <p>在 1996 年 Netscape 公司决定将 JavaScript 提交给行业标准组织 ECMA，希望这种语言能够成为国际标准。次年 6 月发布第一版，即 ECMA-262 号标准。其中 ECMA-262 是一个编号，对应的标准名称为 ECMAScript，换句话说 ECMA-262 和 ECMAScript 是同一个东西的两种不同表达方式。就好比如身份证号码和姓名的关系，只是 EMCA 组织的标准名称不会重名罢了。</p> <p>请注意，ECMAScript 是一种规范和标准，而不是一门编程语言。只是我们习惯将符合 ECMAScript 标准的语言统称为 “JavaScript” 罢了。严谨地的说法应该是：JavaScript 是 ECMAScript 的一种实现。</p> <h3>那 JavaScript 究竟是什么类型的语言？</h3> <p>由于 JavaScript 编程语言并没有严格意义上的官网，因此并没有一个明确的说法。相对来说，由 Mozilla 基金会维护的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript">MDN Web Docs</a> 相对权威一些。</p> <blockquote> <ul> <li> <p>JavaScript (JS) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。（源自 MDN）</p> </li> <li> <p>通常将 JavaScript 归类为“动态”或“解释执行”语言，但事实上它是一门编译语言。（源自《你不知道的 JavaScript》书本）</p> </li> </ul> </blockquote> <p>因此，我将会理解为：<strong>JavaScript 是一门编译型的语言</strong>。当你对 JavaScript 有基础的认知之后，自然就想着深入地了解这门语言，于是第一站来到了 JavaScript 引擎。</p> <h3>JavaScript 是怎样解析代码的呢？</h3> <p>由于蹩脚的英语水平，没办法直接去看类似 V8 引擎等官网，有点吃力。于是全网搜索各类文章，于是又出现了很多名词/术语，比如：解析器、编译器、预编译、词法分析等等等...</p> <p>由于各类文章参差不齐，而且从英文翻译成中文，可能语义上也会有偏差。加之每个人对 JavaScript 相关术语的理解或认知水平又不一样，有时候真的很难去考究谁对谁错，唯有更相信一些大佬的文章。<strong>从这个心路历程来看，学好英文真的很重要。</strong></p> <p>举个例子，我看到很多文章描述 JS 引擎去执行代码的过程，有的说是解析器、有的又称为编译器。当初看到这些真的好烦，究竟谁对谁错呢？谁更严谨呢？由于我又是强迫症，又特想搞清楚。</p> <p>于是我不停地找答案......终于找到了这篇文章：<a href="http://www.nowamagic.net/librarys/veda/detail/1579">我们应该如何去了解 JavaScript 引擎的工作原理</a>，并截取文中一段话：</p> <p></p> <p>因此，我也会开始认同：<strong>不需要过分去强调 JavaScript 解析引擎到底是什么，了解它究竟做了什么事情就可以了</strong>。由于前面把 JavaScript 更倾向于定义为编译型语言，因此，下文将涉及的相关内容称为“编译”、“编译器”、“编译过程”等。当然用“解析”也不能说它错。</p> <h2>二、JavaScript 编译与执行</h2> <p>举个例子，再简单不过了。</p> <pre><code class="language-js">var a = 1; </code></pre> <p>通常情况下，我们习惯将 <code>var a = 1;</code> 看作一个声明，而实际上 JS 引擎并不这么认为。它将 <code>var a</code> 和 <code>a = 1</code> 当作两个单独的声明，第一个是编译阶段的任务，而第二个则是执行阶段的任务。</p> <p>在 JavaScript 中，编译阶段和执行阶段包括以下过程：</p> <pre><code class="language-text">词法分析 -> 语法分析 -> 代码生成 -> 解释执行 </code></pre> <h3>1. 编译阶段</h3> <p>简单地说，编译阶段就是将源代码转换成可执行代码。大致包括以下过程：</p> <pre><code class="language-text">词法分析 -> 语法分析 -> 代码生成 </code></pre> <ul> <li> <p><strong>词法分析</strong>：将源代码（字符串形式）拆分成有意义的代码块，这些代码块被称为词法单元（token）。例如 <code>var a = 1;</code> 被分解成：<code>var</code>、<code>a</code>、<code>=</code>、<code>1</code>、<code>;</code> 。</p> </li> <li> <p><strong>语法分析</strong>：将词法单元流（数组形式）转换成一个表示程序结构的树，称为“抽象语法树”（Abstract Syntax Tree，AST）。上述示例经过转换之后的抽象语法树如下：</p> </li> <li> <p><strong>代码生成</strong>：将 AST 转换为可执行代码（一组机器指令）的过程。简单来说，就是创建一个叫作 <code>a</code> 的变量（包括分配内存），并将值 <code>1</code> 存储在 <code>a</code> 中。</p> </li> </ul> <p>首先，在词法分析阶段将源代码 <code>var a = 1;</code> 转换为 <code>tokens</code> 如下：</p> <pre><code class="language-json">[ { "type": "Keyword", "value": "var" }, { "type": "Identifier", "value": "a" }, { "type": "Punctuator", "value": "=" }, { "type": "Numeric", "value": "1" }, { "type": "Punctuator", "value": ";" } ] </code></pre> <p>接着语法分析阶段，将 <code>tokens</code> 转换为 AST（<a href="https://esprima.org/demo/parse.html?code=var%20a%20%3D%201%3B%0A">Esprima Parser</a>），结构如下：</p> <pre><code class="language-json">{ "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "a" }, "init": { "type": "Literal", "value": 1, "raw": "1" } } ], "kind": "var" } ], "sourceType": "script" } </code></pre> <p>假设在语法分析阶段，若 tokens 无法构成合法的语句时，将会抛出语法错误（SyntaxError），例如：</p> <pre><code class="language-js">var a = () // SyntaxError: Unexpected token ')' </code></pre> <p>然后，如果前面的过程都没有问题，将会代码生成阶段，来生成可执行代码。</p> <p>上述三个过程是传统编译语言在执行源代码之前经历的三个步骤，统称为“编译”。而 JS 引擎要复杂得多，例如在语法分析和代码生成阶段有特定的步骤来对运行性能进行优化。对此，就本文讨论范围有个大致的认知就行。如有兴趣另行搜索 V8 性能优化的策略。</p> <blockquote> <p>JavaScript 的编译过程，它发生在代码运行之前，它主要做的事情有这些：</p> <ul> <li>确定函数、变量的词法作用域（由编写的位置来决定）。除了 eval、with 会欺骗词法作用域之外，其他情况词法分析器会保持其作用域不变。</li> <li>检查语法是否有误</li> <li>为变量声明、函数声明分配内存空间。</li> </ul> </blockquote> <p>说那么多，大家更关心的可能是这句话：<strong>包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理</strong>。</p> <p>另外，JavaScript 是按块（<code><script></code>）编译的，其中<strong>语法分析是对当前块进行通篇的语法检查</strong>，若有误则抛出语法错误（SyntaxError），因此也不会执行当前块的任何代码了。接着再对下一个 <code><script></code> 进行编译执行。</p> <pre><code class="language-html"><script> console.log('script1') if (true) else false // 这里语法有误 </script> <script> console.log('script2') </script> </code></pre> <p>最终的打印结果是 <code>"script2"</code>。但编译器对第一个 <code><script></code> 块语法分析阶段就抛出错误：<code>SyntaxError: Unexpected token 'else'</code>。接着执行下一个块，于是打印出 <code>"script2"</code>。</p> <pre><code class="language-html"><script> function fn1() { console.log('fn1') } fn2() // ReferenceError: fn2 is not defined </script> <script> function fn2() { console.log('fn2') } fn1() // "fn1" </script> </code></pre> <p>上述这个例子，也可以证明 <code><script></code> 是按块编译执行的。</p> <h3>2. 执行阶段</h3> <p>编译阶段完成之后，接着就到代码执行阶段。这个阶段主要涉及到执行上下文的内容。下午再详说...</p> <h2>三、JavaScript 作用域</h2> <h3>1. 作用域是什么？</h3> <p>在编写 JavaScript 程序时，例如一个简单的声明语句：</p> <pre><code class="language-js">var a = 1 </code></pre> <p>我们可能会问这些问题：</p> <ul> <li>JS 引擎如何声明一个标识符名称为 <code>a</code> 的变量？</li> <li>变量 <code>a</code> 将会被存储在哪里？</li> <li>假设对变量 <code>a</code> 进行赋值操作，JS 引擎又是怎样根据标识符 <code>a</code> 找到对应变量的？</li> </ul> <p>疑问先保留着，再看个例子：</p> <pre><code class="language-js">var a = 1 function foo() { var a = 'local' consol.log(a) } foo() </code></pre> <p>如果函数 <code>foo</code> 内部有一个同名变量 <code>a</code>，那么调用 <code>foo()</code> 时，语句 <code>console.log(a)</code> 中的标识符 <code>a</code> 是指哪一个？</p> <p>上述示例非常简单，但往往在写项目的时候，我们会定义很多变量和函数，以及嵌套使用等场景。那么这一连串的复杂问题，JS 引擎是怎么去处理它们的呢？它肯定需要约定好一套规则，开发者在编写代码的时候，唯有老老实实地按照这套规则去编写程序，才会得到预期结果。</p> <p>这套规则被称为**“作用域”**，它约定了如何存储变量以及查找变量。然后各家 JS 引擎将会按照这套规则去实现，所以同一份代码在各浏览器下都可以得到相同的效果。</p> <h3>2. 了解作用域</h3> <p>我们将“作用域”定义为一套规则，这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。</p> <p>作用域的概念，不是 JavaScript 语言特有的，每一门编程语言都存在的，只是规则不一样而已。作用域有两种工作模型：一是“词法作用域”，二是“动态作用域”。前者也称为“静态作用域”，被大多数编程语言（包括 JavaScript）所采用。<strong>词法作用域是在编写代码或者说定义时确定的，而动态作用域是在运行时确定的。</strong></p> <blockquote> <p>需要明确的是，JavaScript 只有词法作用域，并不具有动态作用域。请注意 <code>this</code> 机制只是“像”动态作用域而已。</p> </blockquote> <p>词法作用域关注函数在何处声明，而动态作用域关注函数从何处调用。<code>this</code> 也是关注函数如何调用的，所以说它像动态作用域。</p> <p>举个例子：</p> <pre><code class="language-js">var a = 1 function foo() { console.log(a) } function bar() { var a = 2 foo() } bar() // 打印 1 </code></pre> <p>因此，无论函数 <code>foo</code> 在哪里被调用，都会打印出 <code>1</code>。执行 <code>foo()</code> 时，首先在函数内部查找是否存在（局部）变量 <code>a</code>，如无，再往上一层作用域查找，结果找到了且值为 <code>1</code>，因此会打印出 <code>1</code>。假设一层一层往上查找，直至全局作用域也找不到变量时，就会抛出 <code>ReferenceType</code> 错误。</p> <blockquote> <p>无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定。</p> </blockquote> <h2>四、执行上下文栈</h2> <p>我们书写的（源）代码会被编译器进行处理，并生成“可执行代码”，接着去执行它们。整个 JavaScript 程序的编译及执行过程，都由 JS 引擎来协调处理。</p> <p>前面提到，函数的作用域是由其声明的位置决定的。那么我们一个项目中编写的函数会非常多，那么 JS 引擎如何管理它们呢？</p> <blockquote> <p>JS 引擎在执行代码之前，会创建一个执行上下文栈，将用于管理执行上下文。</p> <p>名词说明：</p> <ul> <li>执行上下文栈，英文 Execution Context Stack，ECS。有些文章称为“调用栈”。</li> <li>执行上下文（Execution Context，EC），简称上下文。执行上下文主要分为两类，一个是全局执行上下文（简称全局上下文），一个是函数执行上下文（简称函数上下文）。</li> </ul> </blockquote> <p>我们知道，栈的特点是先进后出、后进先出，而且栈只能在栈顶进行插入（push）、删除（pop）操作。</p> <p>在 JavaScript 中，代码执行及执行上下文栈的变化过程，大致如下：</p> <blockquote> <p>（1）当 JS 引擎开始执行代码的时候，总会最先遇到全局代码，并产生一个全局上下文（GlobalContext，浏览器环境为 <code>window</code> 对象），并在执行上下文栈的栈顶插入。</p> <p>（2）接着，每执行一个函数时，就会创建一个函数上下文（FunctionalContext），并插入栈顶。</p> <p>（3）当一个函数执行完毕，该函数上下文就会从栈顶删除。</p> <p>（4）往后代码执行就是 2、3 步骤周而复始的过程...</p> <p>（5）请注意，在页面销毁之前，执行上下文栈栈底永远会保留着一个 GlobalContext。直至页面销毁（关闭页面或退出浏览器）才会被删除，自然执行上下文栈也消失了。</p> </blockquote> <p>举个例子 🌰：</p> <pre><code class="language-js">function baz() { console.log('baz') } function bar() { console.log('bar') baz() } function foo() { console.log('foo') bar() } foo() </code></pre> <p>然后代码执行过程，执行上下文栈变化如下：</p> <pre><code class="language-js">// 请注意，如下是伪代码，栈跟数组是两种不同的结构。 // 假设用一个数组来模拟执行上下文栈，数组的第一项为栈底，最后一项为栈顶。 // 恰好数组的 push()、pop() 方法分别是在末尾添加一项、删除最后一项。刚好符合栈操作特点。 // 1. 代码执行之前，JS 引擎创建一个执行上下文栈（用 ECStack 表示） ECStack = [] // 2. 执行全局代码，在 ECStack 插入全局上下文 ECStack.push({ <GlobalContext>: window }) // 3. 当调用函数 foo()，往 ECStack 插入 foo 函数上下文 ECStack.push({ <FunctionalContext>: foo }) // 4. 执行 foo() 函数，里面又会调用函数 bar()，又插入 bar 函数上下文 ECStack.push({ <FunctionalContext>: bar }) // 5. 执行 bar() 函数，里面又调用了函数 baz()，又插入 baz 函数上下文 ECStack.push({ <FunctionalContext>: baz }) // 6. 由于 baz 内没有调用其他函数了，当它执行完后，它的函数上下文会被从栈顶删除 ECStack.pop({ <FunctionalContext>: baz }) // 7. 同上 ECStack.pop({ <FunctionalContext>: bar }) // 8. 同上 ECStack.pop({ <FunctionalContext>: foo }) // 9. 当函数 foo 也执行完之后，全局上下文并不会被删除，ECStack 永远保留着全局上下文 ECStack = [{ <GlobalContext>: window }] // 10. 直到将来某个时刻页面销毁，全局上下文从栈顶删除，ECStack 也会被 JS 引擎回收。 </code></pre> <p>相信以上过程大家理解起来都应该很轻松。让大家困惑的可能是这些 ECStack 栈有什么用？不急，一步一步来...</p> <h2>三、执行上下文</h2> <p>前面提到，代码执行的时候会在执行上下文栈中插入执行上下文，那么这个执行上下文具体做了什么工作呢？</p> <p>执行上下文，分为全局上下文和函数上下文两类。</p> <p>我们可以将每个执行上下文，简单地理解为一个 JavaScript 对象，该对象有一系列的属性（称为上下文状态），主要有三个属性：</p> <ul> <li>变量对象（Variable Object，VO）</li> <li>作用域链（Scope Chain）</li> <li>this</li> </ul> <h3>1. 变量对象</h3> <p>在变量对象上，存储了当前上下文中声明的变量或函数。全局上下文与函数上下文的变量对象，稍有不同。</p> <p><strong>全局上下文</strong></p> <p>全局上下文的变量对象，就是宿主环境的顶层对象 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis">globalThis</a>。比如，浏览器中为 <code>window</code> 对象，Node.js 中是 <code>global</code> 对象。</p> <p>需要注意的是，一是全局上下文的变量对象不含 <code>arguments</code> 属性。二是通过 <code>var</code>、<code>function</code> 关键字声明的变量或函数，都会成为 <code>globalThis</code> 对象的属性，而 <code>let</code> 或 <code>const</code> 则不会。</p> <p>由于 <code>let</code> 或 <code>const</code> 全局下的特性，我对“全局的变量对象等于顶层对象”这句话有所保留。但我们只要知道，无论通过 <code>var</code>、<code>let</code> 还是 <code>const</code> 声明的变量，都包含在其变量对象中即可。</p> <p><strong>函数上下文</strong></p> <p>在函数上下文中，我们使用活动对象（Activation Object，AO）来表示变量对象。其实变量对象是无法通过代码来访问的，当进入一个执行上下文中，这个执行上下文的变量对象才会被激活，也只有活动对象上的各种属性才能被访问。可以理解为 AO 就是 VO 的一个别名。</p> <p>活动对象是在进入函数上下文的时候才会被创建的，它通过函数的 <code>arguments</code> 属性进行初始化，<code>arguments</code> 属性值是 <code>Arguments</code> 对象。</p> <p><strong>执行过程</strong></p> <p>执行上下文分成两个阶段进行处理：</p> <blockquote> <ol> <li>进入执行上下文</li> <li>代码执行</li> </ol> </blockquote> <p>当进入执行上下文时，这时还没执行代码。内部会创建一个活动对象，它包括：</p> <pre><code>AO = { 1. 函数的所有形参（函数上下文）： * 由形参名称和对应值组成的一个变量对象的属性被创建 * 若没有实参，对应属性值设为 undefined 2. 函数声明 * 由函数名称和对应值组成一个变量对象的属性被创建 * 若函数名称与形参名称重名，那么函数声明创建的属性将会覆盖形参所创建的属性 3. 变量声明 * 由变量名称与对应值（undefined）组成的一个变量对象的属性被创建 * 若变量名称与形参名称或函数名称存在重名，那么此变量声明将会被忽略。 } </code></pre> <p>举个例子：</p> <pre><code class="language-js">function foo(a) { var b = 2 function c() { } var d = 3 } foo(1) </code></pre> <p>进入 <code>foo()</code> 的执行上下文后，这时 AO 如下：</p> <pre><code class="language-js">AO = { arguments: { 0: 1, length: 1 }, a: 1, b: undefined, c: ƒ c(), d: undefined } </code></pre> <p>“进入执行上下文”的过程完成之后，接着开始按顺序执行代码，并执行对应的操作。当函数 <code>foo()</code> 执行完之后，这时 AO 如下：</p> <pre><code class="language-js">AO = { arguments: { 0: 1, length: 1 }, a: 1, b: 2, c: ƒ c(), d: 3 } </code></pre> <p>请注意，在非严格模式下，<code>arguments</code> 会追踪变量的变化，而严格模式下则不会。例如：</p> <pre><code class="language-js">function foo(a) { a = 2 } foo(1) // 当 foo 执行完之后，arguments 为 { 0: 2, length: 1 } // 假设 foo 处于严格模式下，arguments 始终为 { 0: 1, length: 1 } </code></pre> <p><strong>变量对象小结</strong></p> <ol> <li>进入全局上下文的变量对象是顶层对象。</li> <li>进入函数上下文的变量对象（或活动对象）初始化只包括 <code>Arguments</code> 对象。</li> <li>在进入执行上下文时，会给活动对象添加形参、函数声明、变量声明等初始的属性。</li> <li>在代码执行阶段，会再次修改活动对象的属性值。</li> </ol> <h3>2. 作用域链</h3>   <p>未完待续...</p> </article> <article> <h1>JavaScript 获取 URL 参数</h1> <p>Sun, 26 Feb 2023 12:09:31 GMT</p> <p></p> <p>前面会介绍一些乱七八糟的东西，请忍耐一下。</p> <h2>URI、URL、URN</h2> <p>提到这三个货，循例丢一张表出来，麻烦用余光一扫而过就算了。</p> <table> <thead> <tr> <th>简称</th> <th>全称</th> <th>中文名称</th> </tr> </thead> <tbody> <tr> <td>URI</td> <td>Universal Resource Identifier</td> <td>统一资源标志符</td> </tr> <tr> <td>URL</td> <td>Universal Resource Locator</td> <td>统一资源定位符</td> </tr> <tr> <td>URN</td> <td>Universal Resource Name</td> <td>统一资源名称</td> </tr> </tbody> </table> <p>网上充斥着类似上面表格中的名词解释，还有诸如以下的言论：</p> <ul> <li>URI 包括 URL 和 URN。</li> <li>URL 可以是 URI，但 URI 不一定是 URL，它可能是 URN。</li> </ul> <p>说真的，这些解释说了跟没说一样，我相信 99% 的人都知道但没用。还记得此前写过一篇<a href="https://github.com/tofrankie/blog/issues/229">文章</a>介绍三者的定义及区别，现在再回头看感觉简直是浪费时间了。</p> <p>以下这句话，从某乎看到的，我觉得简单明了：</p> <blockquote> <p>原来 URI 包括 URL 和 URN ，后来 URN 没流行起来，导致几乎目前所有的 URI 都是 URL。</p> </blockquote> <p>因此，在 99.9% 的情况下，我们看到的 URI 全都是 URL，没必要理会 URN 了。<strong>而我们在浏览器中输入的 Web 地址，指的就是 URL</strong>（<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a>）。</p> <h2>URL</h2> <blockquote> <p>由于本节部分内容节选自 <a href="https://github.com/nodejs/node/blob/master/doc/api/url.md">Node.js API 之 URL</a>，因此会多了一些额外的内容。</p> </blockquote> <p>网址字符串是包含多个有意义组件的结构化字符串。下面提供了 WHATWG 和旧版 API 之间的比较。在网址 <code>'https://user:pass@sub.example.com:8080/p/a/t/h?query=string#hash'</code> 上方显示的是由旧版 <code>url.parse()</code> 返回的对象的属性。下方则是 WHATWG <code>URL</code> 对象的属性。</p> <p></p> <blockquote> <p>图中 <code>""</code> 行中的所有空格都应被忽略。它们纯粹是为了格式化。</p> </blockquote> <p>对于浏览器（前端）而言，注意几点：</p> <ul> <li>在 Web 浏览器中应以 WHATWG 网站标准为准。</li> <li>WHATWG 网址的 <code>origin</code> 属性包括 <code>protocol</code> 和 <code>host</code>，但不包括 <code>username</code> 或 <code>password</code>。</li> <li>关于 <code>username</code> 或 <code>password</code> 虽然一些浏览器可能仍然支持它，但它可能已经从相关的 Web 标准中删除，可能正在被删除，或者可能只是为了兼容性目的而保留。</li> </ul> <p>因此，我们来简化一下：</p> <p></p>  <h2>三、获取 URL 参数</h2> <p>前面铺垫了那么多，其实本文的话题是获取 URL 上的参数，不废话了。</p> <p>参数通常存在于 <code>window.location.search</code> 和 <code>window.location.hash</code> 上，考虑一些特殊情况就好了：</p> <pre><code class="language-js">const queryUrlValue = key => { if (!key) return '' // 考虑到 URL 上存在中文编码问题， // 例如：http%3A%2F%2Fui.cn%3F%E4%BD%9C%E8%80%85%3D%E8%B6%8A%E5%89%8D%E5%90%9B const url = decodeURIComponent(window.location.href) // 匹配正则表达式 const re = new RegExp(`[?|&]${key}=([^&]+)`, 'g') const matchResult = re.exec(url) if (!matchResult) return '' let value = matchResult[1] if (value.includes('#')) { // 考虑到匹配结果可能含 hash 值，比如： // http://ui.cn?state=1#/mine // http://ui.cn?state=1/#/mine const separator = value.includes('/#') ? '/#' : '#' value = value.split(separator)[0] } return value } </code></pre> <p>删掉注释部分，如下：</p> <pre><code class="language-js">const queryUrlValue = key => { if (!key) return '' const url = decodeURIComponent(window.location.href) const re = new RegExp(`[?|&]${key}=([^&]+)`, 'g') const matchResult = re.exec(url) if (!matchResult) return '' let value = matchResult[1] if (value.includes('#')) { const separator = value.includes('/#') ? '/#' : '#' value = value.split(separator)[0] } return value } </code></pre> <p>已收录在 <a href="https://github.com/tofrankie/utils">tofrankie/utils</a>，里面还有一些实用的方法哦！</p> <h2>更新（2023.02.26）</h2> <p>都 2023 年了，可以考虑使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams">URLSearchParams</a> 了。</p> <pre><code class="language-js">// https://example.com/?name=Jonathan&age=18 const params = new URLSearchParams(document.location.search.substring(1)) const name = params.get('name') // is the string "Jonathan" const age = parseInt(params.get('age'), 10) // is the number 18 </code></pre> <p>The end.</p> </article> <article> <h1>Thunk 函数与 Generator 函数</h1> <p>Sun, 26 Feb 2023 12:04:20 GMT</p> <p></p> <p>关于 Thunk 这个词，其实第一次看到是 <a href="https://github.com/reduxjs/redux-thunk">redux-thunk</a> 库。还长时间内都没有理解 “Thunk” 是什么意思，当初想可能只是类似 Foo、Bar 等，就一个名称罢了。</p> <h2>一、Thunk</h2> <p>早在上世纪 60 年代 Thunk 函数就诞生了。那时候，编程语言刚起步，计算机学家还在研究，编译器怎么写比较好。其中一个争论的焦点是“<strong>求值策略</strong>”，即函数的参数到底应何时求值？</p> <p>存在两派意见：</p> <ul> <li><strong>传值调用</strong>（call by value）</li> <li><strong>传名调用</strong>（call by name）</li> </ul> <p>比如，以下示例：</p> <pre><code class="language-js">var x = 1 function fn(m) { return m * 2 } fn(x + 4) </code></pre> <p>对于传值调用的话，在进入函数体之前，计算 <code>x + 4</code> 的值（等于 <code>5</code>），再将这个值传入函数 <code>fn</code>。JavaScript、C 语言就是采用这种策略。</p> <p>若对于传名调用的话，直接将表达式 <code>x + 4</code> 传入函数体，只在用到它的时候求值。Haskell 语言采用这种策略。</p> <p><strong>至于“传值调用”和“传名调用”，哪一种比较好？</strong></p> <p>回答是各有利弊。传值调用比较简单，但是对参数求值的时候，实际上没用到这个参数，有可能造成性能损失。</p> <pre><code class="language-js">var x = 5 function fn(m, n) { return n } fn(8 * x * x - 3 * x -1, x) </code></pre> <p>上面示例中，如果采用“传值调用”的策略，函数 <code>fn</code> 的第一个参数是一个复杂的表达式，但是函数体内根本没用到，对这个参数求值，实际上是没必要的。因此，有些计算机科学家倾向于“传名调用”。</p> <h2>二、Thunk 函数的含义</h2> <p>编译器的“传名调用”实现，往往是将参数放到一个临时函数中，再将这个临时函数传入函数体。这个临时函数就被叫做 <strong>Thunk 函数</strong>。</p> <pre><code class="language-js">var x = 1 function fn(m) { return m * 2 } fn(x + 4) // 相当于 var thunk = function() { return x + 4 } function fn(thunk) { return thunk() * 2 } </code></pre> <p>上面的示例中，函数 <code>fn</code> 的参数 <code>x + 4</code> 被一个函数替换了。凡是用到原参数的地方，对于 Thunk 函数求值即可。</p> <p><strong>以下这个是我的疑问？</strong></p> <p>其实我认为，“传名调用”也是有性能影响的，例如：</p> <pre><code class="language-js">var x = 1 function fn(m) { return m * m * 2 // 这里我们调整一下，调用两次参数 m } fn(x + 4) // 按前面的定义，自然就变成如下这样 var thunk = function() { return x + 4 } function fn(thunk) { return thunk() * thunk() * 2 // 执行了两遍 thunk 函数 } </code></pre> <p>上面示例中，<code>fn</code> 函数的参数 <code>m</code> 被不止一次地使用，那不是会执行多次 <code>thunk</code> 函数吗？如果这样同样会有性能问题吧。还是说，使用“传名调用”的策略的时候，编译器内部在第一次计算得到结果后，会记录起来。若再有引用，直接取上一次的计算结果，而不是重复执行 Thunk 函数？求解，谢谢！！！</p> <h2>三、JavaScript 语言的 Thunk 函数</h2> <p><strong>JavaScript 是传值调用，它的 Thunk 函数含义有所不同。</strong></p> <p>在 JavaScript 语言中，Thunk 函数替换的不是表达式，而是多参数函数，将其替换成一个只接受回调函数作为参数的单参数函数。</p> <p>以下是 Node.js 中 <code>fs</code> 模块的 <code>readFile</code> 方法，它是一个多参数函数。</p> <pre><code class="language-js">fs.readFile('data.json', {}, (err, data) => { // do something... }) </code></pre> <p>那么 <code>Thunk</code> 版的 <code>readFile</code> 如下：</p> <pre><code class="language-js">function thunk(path, options) { return function (callback) { return fs.readFile(path, options, callback) } } var readFileThunk = thunk('data.json', {}) readFileThunk((err, data) => { // do something... }) </code></pre> <p>上面的示例中，经过 <code>thunk</code> 函数转换处理，它变成了单一参数函数，只接受回调函数作为参数。这个 <code>thunk</code> 函数就被叫做 Thunk 函数。</p> <p>任何函数，只要参数有回调函数，就能写成 Thunk 函数的形式。</p> <pre><code class="language-js">const thunk = function(fn) { return function(...args) { return function(callback) { fn.apply(this, ...args, callback) } } } </code></pre> <p>使用上面的转换器，生成 <code>fs.readFile</code> 的 Thunk 函数。</p> <pre><code class="language-js">const readFileThunk = thunk(fs.readFile) readFileThunk('data.json', {})((err, data) => { // do something... }) </code></pre> <blockquote> <p>看到这里，还是没懂这么做意义在哪，感觉多此一举对吧。应用场景后面会讲到。</p> </blockquote> <h2>四、Thunkify 模块</h2> <p><a href="https://github.com/tj/node-thunkify"><code>thunkify</code></a> 模块，将常规 Node 函数转换为返回 Thunk 的函数，这对于基于生成器的流程控制非常有用，例如将其应用于 <code>co</code>。</p> <p>使用方式非常地简单，如下：</p> <pre><code class="language-shell">$ npm i thunkify </code></pre> <pre><code class="language-js">var thunkify = require('thunkify') var fs = require('fs') var read = thunkify(fs.readFile) read('data.json', {})((err, data) => { // do something... }) </code></pre> <p>同样 <code>thunkify</code> 的<a href="https://github.com/tj/node-thunkify/blob/master/index.js">源码</a>也很简单，如下：</p> <pre><code class="language-js">/** * Wrap a regular callback `fn` as a thunk. * * @param {Function} fn * @return {Function} * @api public */ function thunkify(fn) { return function () { var args = new Array(arguments.length); var ctx = this; for (var i = 0; i < args.length; ++i) { args[i] = arguments[i]; } return function (done) { var called; args.push(function () { if (called) return; // 确保回调函数 done 只会执行一遍 called = true; done.apply(null, arguments); }); try { fn.apply(ctx, args); } catch (err) { done(err); } } } }; </code></pre> <p>思路跟前面的大致相同，区别在于它针对回调函数多了一个检查机制，确保回调函数（即源码中的 <code>done</code>）最多只会执行一遍。比如：</p> <pre><code class="language-js">function fn(x, y, cb) { const sum = x + y cb(sum) cb(sum) } const testThunk = thunkify(fn) testThunk(1, 2)(sum => { console.log(sum) // 3，且只会打印一次 }) </code></pre> <blockquote> <p>这个检查机制，像给前面提出的关于“传名调用”可能存在性能损耗问题，提供了一种思路。但在 JavaScript 中 Thunk 的理解，跟开头提到的 Thunk 函数是有区别的，所以疑问点还在！</p> </blockquote> <h2>五、Generator 与 Thunk</h2> <p>我们都知道 Generator 函数，需要自己实现执行器，自动去执行生成器。</p> <p>在我认为 Generator 函数，主要用途是自定义迭代器、异步编程。在我印象中，实际项目里几乎没遇到需要自定义迭代器的。跟多的是异步编程中用到 Generator 函数去控制。</p> <blockquote> <p>但后面 ES2017 标准中，又引入了语法、语义更好的 Async/Await，但尽管如此，也不影响 Generator 的强大和重要性。因为 Async 函数本质上就是 Generator 函数的语法糖而已。</p> </blockquote> <p>举个例子，</p> <pre><code class="language-js">const thunkify = require('thunkify') const fs = require('fs') const readFileThunk = thunkify(fs.readFile) function* generatorFn() { const data1 = yield readFileThunk('./js/data.json', 'utf-8') console.log('data1', data1) const data2 = yield readFileThunk('./js/data.json', 'utf-8') console.log('data2', data2) } </code></pre> <p>利用 Thunk 函数，我们就可以实现一个 Generator 执行器了，如下：</p> <pre><code class="language-js">function runAuto(genFn) { const gen = genFn() const step = iteratorResult => { const { done, value } = iteratorResult if (done) return // iteratorResult.value 就是 Thunk 函数， // 即 readFileThunk('data.json', 'utf-8') 返回值，它返回一个 Thunk 函数。 value((err, data) => { // 只要在其回调中，执行下一步操作，就能达到按“顺序”执行的效果， // 为了使 yield 得到对应的值，需要在 next 方法中传入 data。 step(gen.next(data)) }) } step(gen.next()) // 注意，若 Generator 函数中存在异步操作是不能使用类似 while 等语句去迭代其实例的， // 例如本实例中，若使用 while 语句就会不断地调用 fs.readFile 读取文件，导致报错！ } </code></pre> <p>调用方式如下：</p> <pre><code class="language-js">runAuto(generatorFn) // 依次打印出 // data1 "data.json's value" // data2 "data.json's value" </code></pre> <p>一般函数内含有 <code>yield</code> 关键字表示含有异步操作，示例中 <code>readFileThunk</code> 就是异步操作。若一个函数内没有异步操作，没必要用 <code>yield</code> 表达式，更没必要使用 Generator 函数（自定义迭代器除外）。</p> <p>Thunk 函数与 Generator 能联系在一起的挈机，就是因为 Thunk 函数接受一个回调函数作为参数。刚好 Generator 函数某个异步操作的结果与往后的代码有关联，需要在异步操作的回调函数中执行生成器的 <code>next()</code> 方法，那么 <code>yield</code> 关键字后面跟着一个 Thunk 函数，就能达到按编写“顺序”去执行代码的效果了。</p> <p>前面的 <code>runAuto</code> 方法还有再简化一下：</p> <pre><code class="language-js">function runAuto(genFn) { const gen = genFn() const step = (err, data) => { const { done, value } = gen.next(data) if (done) return // 怕有人不理解，说明一下： // 注意 value 就是一个 Thunk 函数，即前面的 readFileThunk()， // 它接受一个回调函数，那么我们把 step 传进去就好了。 value(step) } step() } // 这里没有去捕获 Generator 内部的异常哈， // 若有需要在 step 内部使用 try...catch 捕获， // 并使用 gen.throw() 抛出对应原因即可。 </code></pre> <blockquote> <p>⚠️ 请注意，如果按照上述 <code>runAuto</code> 去迭代 Generator 函数，其函数体内的 <code>yield</code> 关键字后面必须是 Thunk 函数。否则将可能会报错。</p> </blockquote> <p><code>thunkify</code> 模块的作者 TJ Holowaychuk 开源了另一模块： <a href="https://github.com/tj/co#readme"><code>co</code></a>。它允许 <code>yield</code> 后面跟着一个 Thunk 函数或者是 <code>Promise</code> 对象。因为两种思路是相似的，Thunk 是利用其回到，而 <code>Promise</code> 对象则是利用了当状态发生变化，会触发 <code>then</code> 或 <code>catch</code> 方法的机制。</p> <p>如果使用 <code>co</code> 模块，可以这样用：</p> <pre><code class="language-shell">$ npm i co </code></pre> <pre><code class="language-js">const fs = require('fs') const co = require('co') const thunkify = require('thunkify') const readFileThunk = thunkify(fs.readFile) function* generatorFn() { const data1 = yield readFileThunk('./js/data.json', 'utf-8') console.log('data1', data1) const data2 = yield readFileThunk('./js/data.json', 'utf-8') console.log('data2', data2) } co(generatorFn) // 依次打印出 // data1 "data.json's value" // data2 "data.json's value" </code></pre> <p>注意，使用 <code>co</code> 包装的 Generator 函数的 yield 表达式接受 <strong>Thunk 函数</strong>或 <strong><code>Promise</code> 对象</strong>。当使用 <code>Promise</code> 对象的形式，<code>co</code> 就充当了类似 Async 函数内部执行器的角色。</p> <p>反正自从 Async/Await 面世之后，我接触到的项目，几乎没有人使用 Generator 函数去封装异步流程了，都是全面拥护 Async 了。我猜这个是不是 <code>co</code> 不再更新的原因，是不是它的使命完成了，哈哈。</p> <p>至于 Async 函数内部执行器是怎么实现的，结合上面的 <code>runAuto</code> 方法，再动下脑子就应该能大致想到了，具体可以看下我的另外一篇<a href="https://github.com/tofrankie/blog/issues/259">文章</a>，文中末尾有介绍。</p> <p>本文到这里，好像就要完了。</p> <p>The end.</p> </article> <article> <h1>关于 Await、Promise 执行顺序差异问题</h1> <p>Sun, 26 Feb 2023 12:02:42 GMT</p> <p></p> <h2>背景</h2> <p>缘起《<a href="https://segmentfault.com/a/1190000017224799">8 张图帮你一步步看清 async/await 和 promise 的执行顺序</a>》一文所抛出的话题，本质上就是考察是否完全掌握了 JavaScript 的事件循环机制罢了。</p> <blockquote> <p>不同宿主环境（比如浏览器、Node），JS 的事件循环会稍有不同。本文基于浏览器环境展开讨论。</p> </blockquote> <p>前面文章末尾或评论区提到的，同样一段代码在不同浏览器、或同一浏览器的不同版本，执行顺序存在差异（代码就不贴上来了）。</p> <p>本人亲测结果，在 <strong>Chrome 92</strong> 和 <strong>Safari 14.1.2</strong> 执行顺序仍有差异（2021.08）。</p> <p>这种差异会带来什么影响呢？</p> <ul> <li>实际应用场景几乎没有影响。如果有人在项目中写出这样的代码，你可以去干他了。请不要过分依赖异步操作的顺序。</li> <li><strong>一般来说，若再遇到 JavaScript 运行方面的差异，应以最新 Chrome 浏览器的行为为准</strong>（跟 Chrome 浏览器的 V8 引擎更新策略有关）。</li> </ul> <h2>找原因</h2> <p>本着寻根问底去找答案。</p> <p>阅读 ECMAScript 标准是最直接、最权威的（<a href="https://262.ecma-international.org/#await">Await</a>）。但由于功力不够，没办法完全看懂。于是搜了好久，终于找到了一个相关的问题：</p> <ul> <li><a href="https://www.zhihu.com/question/268007969">async/await 在 Chrome 环境和 Node 环境的执行结果不一致，求解？</a></li> <li><a href="https://www.zhihu.com/question/268007969/answer/339811998">贺老回答</a></li> </ul> <p>该问题中的示例（略微修改）如下：</p> <pre><code class="language-js">async function foo() { console.log('a') await bar() console.log('b') } async function bar() { console.log('c') } foo() new Promise(resolve => { console.log('d') resolve() }).then(() => { console.log('e') }) </code></pre> <p>相信很多同学一下就写出了“<strong>正确</strong>”的打印顺序：<code>a、c、d、b、e</code>。</p> <p>我们执行代码并打印出来看下：</p> <p>▼ Chrome 92 </p> <p>▼ Safari 14.1.2 </p> <p><strong>对比发现，不同浏览器下运行结果竟然不一样，Why?</strong></p> <ul> <li>当下最新版 Chrome 92 浏览器打印结果为 <code>a、c、d、b、e</code></li> <li>当下最新版 Safari 14.1.2 浏览器打印结果为 <code>a、c、d、e、b</code></li> <li>在 Node 14.16.0 环境下，运行结果同 Chrome 浏览器</li> </ul> <blockquote> <p>2026.01.12 使用 Safari 26.1 测试，运行结果同 Chrome 浏览器</p> </blockquote> <p>造成以上差异的根本原因是，ECMAScript 就 Await 标准有所调整，最新规定是 <code>await</code> 将直接使用 <code>Promise.resolve()</code> 相同的语义。正是因为此次调整，导致了不同 JS 引擎或者同一 JS 引擎的不同版本，在解析同一脚本会出现结果的差异。</p> <p>上面示例中 <code>await bar()</code> 的计算结果（指 <code>bar()</code> 返回值）就是一个 <code>Promise</code> 对象。根据 <code>Promise.resolve()</code> 的语法，若参数是一个 <code>Promise</code> 实例对象，将会不做任何修改、原封不动地返回该实例。</p> <pre><code class="language-js">const p1 = new Promise(resolve => resolve(1)) const p2 = Promise.resolve(p1) console.log(p1 === p2) // true // ⚠️ 注意，关于 Promise.resolve() 在 Chrome 与 Safari 表现是一致的。 </code></pre> <blockquote> <p>其实无需过分担心这种差异，对平时写项目有什么影响，如果在真正项目写出类似的逻辑，确实该反思一下。但是......面试官可能会问哦，前面文章提到的那道题好像就是头条的面试题。</p> </blockquote> <h2>原因剖析</h2> <p>这种差异，是 JavaScript 引擎在实现时没有严格遵循 ECMAScript 标准导致的。</p> <p>先明确几点：</p> <ul> <li><code>Promise</code> 对象的构造方法内属于同步任务，而 <code>Promise.prototype.then()</code> 才属于异步任务（微任务，它的执行顺序后于同步任务）</li> <li><code>Promise.resolve()</code> 方法，若参数为 <code>Promise</code> 对象，将会直接返回该对象，而不是返回一个全新的 <code>Promise</code> 对象。</li> <li>只有当 <code>Promise</code> 对象的状态发生变化，才会被放入微任务队列。</li> </ul> <p>上面的示例中 <code>a</code>、<code>c</code>、<code>d</code> 的顺序都没有争议，因此我们简化一下示例：</p> <pre><code class="language-js">// 其中 p1、p2 都是状态为 fulfilled 的 Promise 对象 async function foo() { await p1 console.log('b') } foo() p2.then(() => { console.log('e') }) </code></pre> <p>关键点在于 <code>await p1</code> 的语义是什么？一般而言，我们可以把：</p> <pre><code class="language-js">async function foo() { await p1 console.log('b') } </code></pre> <p>理解为：</p> <pre><code class="language-js">function foo() { return RESOLVE(p1).then(() => { console.log('b') }) } </code></pre> <p>按目前的标准定义 <code>RESOLVE(p1)</code> 等同于 <code>Promise.resolve(p1)</code>，因此 <code>RESOLVE(p1)</code> 结果就是 <code>p1</code>。根据代码逻辑可知 <code>p1</code> 比 <code>p2</code> 更早地放入微任务队列。本着先进先出的原则，会先执行微任务 <code>p1</code>，后执行微任务 <code>p2</code>，因此先后打印出 <code>b</code>、<code>e</code>。</p> <p>但是旧版的 JS 引擎在实现 <code>RESOLVE(p1)</code> 的问题上，与当前标准有微妙而重要的区别。区别在于，即使 <code>p1</code> 是一个 <code>Promise</code> 对象，<code>RESOLVE(p1)</code> 仍会返回一个<strong>全新</strong>的 <code>Promise</code> 对象（假设为 <code>p3</code>）。</p> <p>换句话说，就是执行 <code>p1.then()</code> 时，又产生了一个微任务 <code>p3</code>，并放入微任务队列。还是本着先进先出的原则，接着执行微任务 <code>p2</code> 并打印 <code>e</code>。等 <code>p2</code> 执行完毕，接着执行微任务 <code>p3</code>，然后打印出 <code>b</code>。因此先后顺序是 <code>e</code>、<code>b</code>。</p> <pre><code class="language-js">function foo() { return RESOLVE(p1).then(() => { console.log('b') }) } // 相当于 function foo() { return new Promise(resolve => resolve(p1)) // 相当于微任务 p1 .then(() => { // 相当于微任务 p3 console.log('b') }) } </code></pre> <blockquote> <p>虽然我认为自己懂 Async 内部执行器的执行过程，但是我自认为对本案例解释得不够好。就是那种“懂但不知道怎么表达出来”的感觉。如果看懵了的话，建议直接看贺老的<a href="https://www.zhihu.com/question/268007969/answer/339811998">回答</a>。</p> </blockquote> <h2>结论</h2> <p>综上，不同浏览器下执行顺序不一样，应该就是 JS 引擎（其中 Chrome、Node 是 V8 引擎，而 Safari 是 JavaScriptCore 引擎。）底层实现 <code>await</code> 语法的方式略有不同。若严格遵循 ECMAScript 标准的话，执行结果与最新的 Chrome 浏览器应该是一致的。</p> <p>前面提到若有差异，一般以最新版本的 Chrome 为准，原因是：Chrome 浏览器每次升级都会同时更新到 V8 的最新版。而 Node 更新小版本时，V8 也只更新小版本，只有 Node 更新大版本时才会更新 V8 大版本。所以，绝大部分时候 Node 的 V8 会比同时期的 Chrome 的 V8 要落后。</p> <h2>参考链接</h2> <ul> <li><a href="https://segmentfault.com/q/1010000016147496">async await 和 promise 微任务执行顺序问题</a></li> <li><a href="https://www.zhihu.com/question/268007969/answer/339811998">async/await 在 Chrome 环境和 Node 环境的执行结果不一致，求解？</a></li> <li><a href="https://v8.dev/blog/fast-async">Faster async functions and promises</a></li> </ul> </article> <article> <h1>细读 ES6 | async/await</h1> <p>Sun, 26 Feb 2023 11:59:49 GMT</p> <p></p> <p>在<a href="https://github.com/tofrankie/blog/issues/258">前一篇文章</a>中，最后提到 Generator 的应用，很实际场景可能需要自实现一个 Generator 函数执行器。因此，用起来还是很麻烦的。</p> <p>现在有另外一个替代方法，那就是 ES7 标准中引入的 async 函数，它使得异步操作变得更加方便。</p> <p>Async 函数，其实就是 Generator 函数的语法糖。</p> <h2>一、语法</h2> <p>定义一个 Async 函数语法非常简单，在函数名称之前加上 <code>async</code> 关键字即可。</p> <pre><code class="language-js">async function foo { // 内部的 await 语句是可选的 } // ⚠️ Async 函数注意点： // 1. 函数体内部的 await 语句是可选的； // 2. 当内部含有 await 语句时，表示有异步操作； // 3. 针对类似 let a = await 1 的语句，语法上是允许的，但这里使用 await 是无意义的； // 4. 针对同步代码，只要类似 let a = 1 这样写即可，无需使用 await 关键字。 </code></pre> <p>也可以按以下方式去定义：</p> <pre><code class="language-js">// 函数声明形式 async function foo {} // 函数表达式形式（匿名或具名均可） const bar = async function () {} // 箭头函数形式 const baz = async () => {} // Class 的方法 class Foo { async sayHi() {} getName = async () => {} // 语法没问题，但两者的区别是： // sayHi 方法挂载到 Foo 原型上，而 getName 方法则是挂载到实例对象上 } </code></pre> <blockquote> <p>Async 函数总返回给一个 <code>Promise</code> 对象。</p> </blockquote> <p>因此，调用方式也很忒简单。相比 Generator 函数，简直不要太爽了。</p> <pre><code class="language-js">foo() .then(res => { /* res 为 foo 函数的 return 值 */ }) .catch(err => { /* err 为 foo 函数的异常原因 */ }) </code></pre> <p><code>async</code> 函数内部 <code>return</code> 语句返回的值，会成为 <code>then()</code> 方法回调函数的参数，即 <code>Promise</code> 对象的状态变为 <code>fulfilled</code>。若无显式的 return 语句，相当于 <code>return undefined</code>，自然 <code>then()</code> 方法接收到的参数也就是 <code>undefined</code>。</p> <p>若内部抛出错误，会导致返回的 <code>Promise</code> 对象变为 <code>rejected</code> 状态，从而被 <code>Promise</code> 对象的 <code>catch()</code> 方法捕获到。</p> <h2>二、特点</h2> <p>Async 函数是 Generator 函数的语法糖，它对 Generator 函数的改进，体现在以下四点：</p> <ul> <li><strong>内置执行器</strong></li> </ul> <p>我们都知道，Generator 函数的执行必须依赖执行器，执行器内部就是不断执行生成器的 <code>next()</code> 方法的过程。所以才有了 <a href="https://github.com/tj/co#readme"><code>co</code></a> 模块。而 <code>async</code> 函数则内置了执行器。调用方法也只需要跟普通函数那样，一行就行。</p> <pre><code class="language-js">// Async 函数 async function foo() { /* do something... */ } foo() // Generator 函数 function* bar() { /* do something... */ } const gen = bar() gen.next() // 这才开始执行 Generator 函数体内的代码 // ... </code></pre> <ul> <li><strong>更好的语义</strong></li> </ul> <p><code>async</code> 和 <code>await</code>，比起星号 <code>*</code> 和 <code>yield</code>，语义更清晰。<code>async</code> 表示函数里有异步操作，<code>await</code> 表示紧跟在后面的表达式需要等待结果。</p> <pre><code class="language-js">// Async 函数 async function foo() { let a = await 1 let b = await 2 return b // 直接调用 foo() 且 a、b 的值对应为 1、2 } foo() // Promise { <fulfilled>: 2 } // Generator 函数 function* bar() { let a = yield 1 let b = yield 2 return b // 若按如下方式调用，a、b 的值均为 undefined，而非对应为 1、2 } const gen = bar() gen.next() // { done: false, value: 1 } gen.next() // { done: false, value: 2 } gen.next() // { done: true, value: undefined } </code></pre> <ul> <li><strong>更广的适用性</strong></li> </ul> <p><code>co</code> 模块约定，<code>yield</code> 命令后面只能是 Thunk 函数或 <code>Promise</code> 对象，而 <code>async</code> 函数的 <code>await</code> 命令后面，可以是 <code>Promise</code> 对象或非 <code>Promise</code> 的值（原始值或引用值均可，但这时内部会自动使用 <code>Promise.resolve()</code> 转换为 <code>Promise</code> 对象）。</p> <ul> <li><strong>返回值是 Promise 对象</strong></li> </ul> <p><code>async</code> 函数的返回值总是 <code>Promise</code> 对象，这比 Generator 函数的返回值是 Iterator（迭代器）对象方便多了。你可以用 <code>Promise.prototype.then()</code> 方法指定下一步的操作。</p> <h2>三、基本用法</h2> <p><code>async</code> 函数返回的 <code>Promise</code> 对象，必须等到内部<strong>所有</strong>的 <code>await</code> 命令后面的 <code>Promise</code> 对象执行完（即状态变为 <code>fullfilled</code>），且内部不发生错误的情况下，最终 <code>async</code> 函数返回的 <code>Promise</code> 对象才会变成 <code>fulfilled</code> 状态，从而触发 <code>Promise</code> 对象的 <code>then()</code> 方法的回调函数。</p> <p>若函数内部 <code>await</code> 后面的某个 <code>Promise</code> 对象变为 <code>rejected</code> 状态（且函数内未使用 <code>try...catch</code> 捕获处理），或者函数内部出现抛出错误，将会停止执行函数体内后面的代码，并使得最终 <code>async</code> 函数返回的 <code>Promise</code> 对象会变成 <code>rejected</code> 状态，从而触发 <code>catch()</code> 的回调函数。</p> <blockquote> <p>看着有点像 <code>Promise.all()</code> 方法，但两者是有区别的，这里先不展开，下文再详说。</p> </blockquote> <p>看一个简单的例子：</p> <pre><code class="language-js">async function request() { const response = await fetch('/user/1') const res = await response.json() return res } // 如果使用 Promise 是这样的，无论在语义和写法上都不如 async 函数清晰、简洁。 // 而且这例子只有一个异步操作，若存在多个，那 then 方法真的不忍直视。 // function request() { // return fetch('/user/1') // .then(response => response.json()) // .then(res => res) // } </code></pre> <p>然后按照下面那样去调用即可。</p> <pre><code class="language-js">request() .then(res => { console.log(res) // do something... }) .catch(err => { console.warn(err) // 处理异常 // 例如网络问题，导致 fetch 请求出错了，自然 response （它是一个 Promise 对象）的结果 // 就不是一个 JSON 数据，那么调用 response.json() 解析就会出错。（这时可使用 response.text() 进行解析） // 使得 request 函数停止往下执行，且返回的 Promise 状态变为 rejected， // 自然就会被这里的 catch 捕获到。错误信息可能是：SyntaxError: Unexpected token < in JSON at position 0 }) </code></pre> <h3>1. await 命令</h3> <blockquote> <p>其中 <code>await</code> 关键字，目前只能在 <code>async</code> 函数内部使用。</p> <p>但未来就不一定了。现在有一个<a href="https://github.com/tc39/proposal-top-level-await">语法提案</a>，允许在模块顶层独立使用 <code>await</code> 命令，目前以进入 Stage-4 阶段，相信在不久的将来就能正式纳入 ECMAScript 标准了。关于它的用法可看：<a href="https://es6.ruanyifeng.com/#docs/async#%E9%A1%B6%E5%B1%82-await">Top-level await</a>。</p> </blockquote> <p>正常情况下，<code>await</code> 关键字后面应该接着一个 <code>Promise</code> 对象，并返回该对象的结果。如果不是 <code>Promise</code> 对象，就直接返回对应的值。</p> <pre><code class="language-js">async function foo() { return await 1 // 相当于 return 1 // // 对于 `await 1` 函数内部的执行器，其实做的事情是 Promise.resolve(1)， // 而 Promise.resolve() 的作用就是将某个值转化为 Promise 对象。 // 关于 Promise.resolve() 可看文章：https://github.com/tofrankie/blog/issues/256 } // ⚠️ 对于非 `Promise` 对象，没必要使用 `await` 关键字。 </code></pre> <p>还有一种情况，就是 <code>await</code> 关键字后面接了一个 <code>thenable</code> 对象，那么 <code>await</code> 会将其当做是 <code>Promise</code> 对象。<code>thenable</code> 对象是指该对象上实现了 <code>then()</code> 方法（本身或原型上均可）。</p> <pre><code>const thenable = { then(resolve, reject) { resolve('abc') // 注意，then 方法中要使用 resolve 或 reject 去改变状态， // 否则 await thenable 的状态一直会是 pending， // 由于 await 一直未等到 thenable 对象的状态发生变化， // 因此 foo() 返回的 Promise 对象也将永远停留在 pending 状态， // 它只能苦苦地等待有朝一日 thenable 状态能发生改变 } } async function foo() { return await thenable // await 会把 thenable 当作一个 Promise 对象去处理 } foo().then(res => { console.log(res) // "abc" }) </code></pre> <p>一旦遇到 <code>await</code> 后面的 <code>Promise</code> 对象为 <code>rejected</code> 状态的情况，会终止后面代码的执行。例如：</p> <pre><code class="language-js">async function foo() { await Promise.reject('some errors...') let a = 'any' // 这一行及后面的代码，并不会被执行 return a } foo().catch(err => { console.warn(err) // "some errors..." }) </code></pre> <p>这些异常都可以使用 <code>try...catch</code> 去捕获，下面会讲到。</p> <h3>2. 错误处理</h3> <p><code>async</code> 函数的语法规则总体上比较简单，难点是错误处理机制。</p> <p>前面也提到过，一旦 <code>async</code> 函数内部某个 <code>Promise</code> 对象状态变为 <code>rejected</code>，或者存在语法错误，或者主动抛出错误，会停止执行函数体内部的余下代码，并使得 <code>async</code> 函数返回的 <code>Promise</code> 对象改变状态 <code>rejected</code>。</p> <p>举个例子：</p> <pre><code class="language-js">async function foo() { await Promise.reject('error') // 表示一个异步操作 let a = 'any' return a } // 如何使其正常调用 then 方法 foo().then(res => { console.log(res) // "any" }) </code></pre> <p>假设异步操作的结果成功与否，不影响函数最终的结果，使其正常执行到最后并返回结果，有几种处理方式：</p> <pre><code class="language-js">// 方式一：利用 try...catch 语句 async function foo() { try { await Promise.reject('error') } catch (e) { console.warn(e) // "error" // 错误处理... } let a = 'any' return a } </code></pre> <pre><code class="language-js">// 方式二：如果是 Promise 对象，可以用 catch 方法捕获 async function foo() { await Promise.reject('error').catch(err => { console.warn(err) // "error" // 错误处理... // 只要这里面不再抛出错误，await 拿到的 Promise 对象状态为 fulfilled }) let a = 'any' return a } </code></pre> <p>以上示例中，只有一个异步操作，这种情况下也可以直接采用 <code>Promise</code> 的写法去处理。一般情况下，使用到 <code>async/await</code> 的写法，表示函数体内部会存在多个异步操作，通常的错误处理方式是：利用一个 <code>try...catch</code> 语句将整个函数体包裹起来。</p> <pre><code class="language-js">async function request() { try { await fetch('/user/1') await fetch('/user/2') await fetch('/user/3') } catch (e) { // 捕获异常，并做错误处理 } } </code></pre> <h2>四、Async 函数应用</h2> <h3>1. 实现重复请求</h3> <p>此前<a href="https://github.com/tofrankie/blog/issues/253">另一篇文章</a>提到过，可以 <code>async</code> 函数结合 <code>for</code> 循环、<code>try...catch</code> 可以实现多次重复尝试的效果。</p> <pre><code class="language-js">async function request(url) { let res let err const MAX_NUM_RETRIES = 3 for (let i = 0; i < MAX_NUM_RETRIES; i++) { try { res = await fetch(url).then(response => response.json()) break } catch (e) { err = e // Do nothing and make it continue. } } if (res) return res throw err } request('/user/1') .then(res => { console.log('success') }) .catch(err => { console.log('fail') }) </code></pre> <h3>2. 不要在 forEach 中使用 async/await</h3> <p>它可能得不到预期结果，在<a href="https://github.com/tofrankie/blog/issues/254">另一篇文章</a>也详细地分析过了。</p> <blockquote> <p>如果使用 <code>promise</code> 或 <code>async</code> 函数作为 <code>forEach()</code> 等类似方法的 <code>callback</code> 参数，最好对造成的执行顺序影响多加考虑，否则容易出现错误。</p> </blockquote> <p>举个例子，打印 <code>sum</code> 并不会得到预期的结果 <code>6</code>，而是 <code>3</code>。</p> <pre><code class="language-js">// PS：实际场景肯定不会这样去求和，这里只是为了举例而举例 function foo() { let sum = 0 const arr = [1, 2, 3] const sumFn = (a, b) => a + b arr.forEach(async item => { sum = await sumFn(sum, item) }) setTimeout(() => { console.log(sum) // 3 // 注意，这里打印不能去掉 setTimeout，否则打印结果永远是 0。 }) } foo() </code></pre> <p>由于 <code>await anything</code> 表达式（这里 <code>anything</code> 表示任意值）相当于使用了 <code>Promise.resolve()</code> 将 <code>anything</code> 包裹起来，其中 <code>Promise</code> 属于异步任务（微任务），它会在同步任务执行完之后才会去执行。</p> <p>当执行第一次循环，先执行 <code>forEach</code> 的回调函数，遇到 <code>await sumFn(sum, 1)</code>，会执行 <code>sumFn</code> 函数计算结果，所以变成了 <code>sum = await 1</code>。由于是异步，会暂时 Hold 将其放入微任务队列，因此 <code>sum</code> 暂时不会被重新赋值，它仍是 <code>0</code>；接着执行下一次循环，同理变成 <code>sum = await 2</code>，又被 Hold 住；再下一次循环同理变成 <code>sum = await 3</code>。至此 <code>forEach</code> 的三次回调函数执行完毕，接着继续往下走，遇到 <code>setTimeout</code>（属于异步任务中的宏任务），由于延迟时间为 <code>0</code> 会直接放入任务队列，它将会在下一次宏任务中执行。</p> <p>至此，同步任务已执行完毕，紧接着，会依次执行刚刚被 Hold 住的三个微任务（分别是 <code>sum = 1</code>、<code>sum = 2</code>、<code>sum = 3</code>），因此 <code>sum</code> 变成了 <code>3</code>。微任务执行完毕之后，（由于本示例中没有 UI Render）立刻会执行下一次宏任务，即 <code>console.log(sum)</code>，因此打印结果为 <code>3</code>。</p> <p>其实理解原理之后，分析这道题就很简单了。那么替代方案就是使用 <code>for...of</code> 语句：</p> <pre><code class="language-js">async function foo() { let sum = 0 const arr = [1, 2, 3] const sumFn = (a, b) => a + b for (let item of arr) { sum = await sumFn(sum, item) } setTimeout(() => { console.log(sum) // 6 // 改成 for...of 之后，这里可以去掉 setTimeout 了， // 直接将 console 语句放到外面，也可以按顺序执行了 }) } foo() </code></pre> <p>那为什么 <code>for...of</code> 就可以，因为它本质上就是一个 <code>while</code> 循环。</p> <pre><code class="language-js">async function foo() { let sum = 0 const arr = [1, 2, 3] const sumFn = (a, b) => a + b // for (let item of arr) { // sum = await sumFn(sum, item) // } // 相当于 const iterator = arr[Symbol.iterator]() let iteratorResult = iterator.next() while (!iteratorResult.done) { sum = await sumFn(sum, iteratorResult.value) iteratorResult = iterator.next() } setTimeout(() => { console.log(sum) // 6 }) } foo() </code></pre> <h3>3. 继发关系</h3> <p>文章前面部分提到过 Async 函数中使用 <code>await</code> 去控制异步操作，看起来像 <code>Promise.all()</code>，但又有区别。</p> <p>如下示例：</p> <pre><code class="language-js">async function request() { // 假设 fetchUser1、fetchUser2、fetchUser3 表示异步请求 let user1 = await fetchUser1() let user2 = await fetchUser2() let user3 = await fetchUser3() return 'abc' } </code></pre> <p>上面示例中，<code>request()</code> 函数的返回值不依赖于 <code>fetchUser</code> 的结果，而且三个 <code>fetchUser</code> 请求是相互独立的。如果按上面的写法，直接影响程序的执行时间。</p> <p>因为目前继发式写法，<code>fetchUser2</code> 请求只有在 <code>fetchUser1</code> 请求完成并返回数据后才会被发出（<code>fetchUser3</code> 同理）。但根据代码逻辑来看，它们是没有关联关系的，为什么不一次性连续发出三个请求以减少整个程序的执行时间呢？</p> <p>因此，我们可以优化一下。</p> <pre><code class="language-js">// 写法一（推荐） async function request() { // 这样 fetchUser1、fetchUser2、fetchUser3 将会同时发出请求 // 这也是文中所说 await 与 Promise.all() 的不同点。 let [user1, user2, user3] = await Promise.all([ fetchUser1(), fetchUser2(), fetchUser3() ]) return 'abc' } // 写法二 async function request() { let p1 = fetchUser1() let p2 = fetchUser2() let p3 = fetchUser3() let user1 = await p1 let user2 = await p2 let user3 = await p3 return 'abc' } </code></pre> <h2>五、Async 函数的实现原理</h2> <p>Async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里面。</p> <blockquote> <p>如果对 Generator 函数不熟悉的话，建议先看下这篇文章：<a href="https://github.com/tofrankie/blog/issues/258">细读 ES6 之 Generator 生成器</a>，再回来看本节内容。</p> </blockquote> <p>举个例子，下面 <code>request</code> 是 <code>async</code> 函数。</p> <pre><code class="language-js">function delay(time) { return new Promise(resolve => setTimeout(resolve, time)) } async function request() { let response = await fetch('http://192.168.1.117:7701/config') let result = await response.json() await delay(1000) await delay(2000) await delay(3000) return result } </code></pre> <p>既然 Async 函数是 Generator 函数和自动执行器的结合，那么相当于将上面 Async 函数中的 <code>async</code> 和 <code>await</code> 关键字，就替换成 Generator 函数的 <code>*</code> 和 <code>yield</code>，外加一个自动执行器。</p> <p>于是变成了这样：</p> <pre><code class="language-js">function* request() { let response = yield fetch('http://192.168.1.117:7701/config') let result = yield response.json() yield delay(1000) yield delay(2000) yield delay(3000) return result } </code></pre> <p>那么怎样实现执行器，才能达到 Async 函数的语义呢？</p> <p>其实没那么难，只要弄清楚 <code>Generator.prototype.next()</code> 和 <code>Generator.prototype.throw()</code> 两个方法就没太大问题了。当然前提还是要知道生成器的执行过程。</p> <p>实现如下：</p> <pre><code class="language-js">function executor(genFn, ...args) { return new Promise((resolve, reject) => { if (Object.prototype.toString.call(genFn) !== '[object GeneratorFunction]') { return reject(new Error('Must be a generator function!')) } const gen = genFn(...args) const step = iteratorResult => { console.count('次数') const { done, value } = iteratorResult if (done) { return resolve(value) } Promise .resolve(value) .then(res => { // 关于捕获异常，怕有人不懂，这里解释一下： // 假设调用 next 方法后，Generator 内部报错，且内部未进行捕获错误时， // 内部的错将会被 Generator 外部的 try...catch 捕获到（即这里的 then 回调函数）， // 但是这里不进行捕获的原因是：使其传递出去，让后面的 Promise.prototype.catch() 方法捕获， // 进而在 catch() 的回调函数内调用 Generator.prototype.throw() 主动使得生成器结束，并 reject 错误。 step(gen.next(res)) }) .catch(err => { try { gen.throw(err) } catch (e) { reject(e) } }) } step(gen.next()) }) } </code></pre> <p>调用方式如下：</p> <pre><code class="language-js">function* request() { let response = yield fetch('http://192.168.1.117:7701/config') let result = yield response.json() yield delay(1000) yield delay(2000) yield delay(3000) return result } // 语法：executor(generatorFunction[, param[, ... param]]) // 其中第一个参数必须是生成器函数，若生成器函数需要传递参数，往后面添加即可 executor(request) .then(res => { console.log(res) }) .catch(err => { console.warn(err) }) </code></pre> <blockquote> <p>大致实现如上。如果还是不太懂的，应该是 Generator 函数这块知识点还不够熟悉。</p> <p>如果这样，还是先要看下这篇<a href="https://github.com/tofrankie/blog/issues/258">文章</a>熟悉相关知识，而且文章末尾很相似的自动执行器的实现示例。</p> </blockquote> <h2>六、总结</h2> <p>前面写过关于 <a href="https://github.com/tofrankie/blog/issues/257">Iterator</a> 、<a href="https://github.com/tofrankie/blog/issues/255">Promise</a>、<a href="https://github.com/tofrankie/blog/issues/258">Generator</a> 相关内容的文章，再到本文的 Async 函数，其实都是环环相扣的，因此应按顺序来学习，才能事半功倍。</p> <p>其中 Promise 虽然解决了“横向”回调地狱（Callback Hell）的问题，但是又出现了“纵向”不断 <code>then</code>、<code>catch</code> 的处理。</p> <p>而 Generator 函数提出了一种全新的异步控制的方案，调用 Generator 函数不会自动执行其函数体内部的代码，仅返回一个生成器对象，需要我们手动去调用生成器的 next() 方法以执行内部的代码。尽管生成器对象实现了 Iterator 接口，因而可供 for...of 等使用，但是往往结合网络请求等异步操作时，用 for...of 等语句几乎是不能满足我们需求的。这种前提下，需要我们自实现一个执行器来自动调用 Generator 函数实例。但要我们自个实现？？？这就是最大的问题了（手动狗头）。</p> <p>基于这种状况下，著名的 <code>co</code> 模块就实现了 Generator 执行器，以供我们使用。但要另外引入第三方库，这本身也是个问题，哈哈...😄</p> <p>基于以上种种不尽人意，于是 TC39 被开发者各种骂，说能不能原生实现一个 Generator 的执行器啊，现在用得很不爽啊！TC39 委员会那波人终究承受不住各方压力，于是只能加班帮我们实现了...</p> <p>千呼万唤始出来，终于在 ES2017 标准中引入了 Async 函数，它就是实打实的 Generator 语法糖啊。除了将 Generator 中的 <code>*</code> 和 <code>yield</code> 换成了 <code>async</code> 和 <code>await</code> 之外，还结合了 Promise。既解决了 Generator 的执行问题，Promise 的“纵向发展”问题。皆大欢喜了，TC39 委员会大佬们心想，终于可以消停了，又可以日常摸鱼了。</p> <p>The end.</p> </article> <article> <h1>细读 ES6 | Generator 生成器</h1> <p>Sun, 26 Feb 2023 11:57:48 GMT</p> <p></p> <p>在 ES6 标准中，提供了 Generator 函数（即“生成器函数”），它是一种异步编程的解决方案。在前面一篇<a href="https://github.com/tofrankie/blog/issues/257">文章</a>中也提到一二。</p> <h2>一、Generator 简述</h2> <p>避免有人混淆概念，先说明一下：</p> <blockquote> <p>生成器对象常被我们称为“<strong>生成器</strong>”（Generator），而 Generator 函数常称为“<strong>生成器函数</strong>”（Generator Function）。</p> <p>由于生成器对象是实现了<strong>可迭代协议</strong>和<strong>迭代器协议</strong>的，<strong>因此生成器也是一个迭代器，生成器也是一个可迭代对象</strong>。所以，本文有时候直接称为迭代器，其实指的就是生成器对象。</p> </blockquote> <pre><code class="language-js">// 生成器函数 function* genFn() {} // 生成器对象 const gen = genFn() // 生成器对象包含 @@iterator 方法，因此满足可迭代协议 gen[Symbol.iterator] // ƒ [Symbol.iterator]() { [native code] } // 生成器对象含 next 方法，因此也是满足迭代器协议的 gen.next // ƒ next() { [native code] } // 生成器对象的 @@iterator 方法返回自身（即迭代器） gen === gen[Symbol.iterator]() // true </code></pre> <p><strong>怎样理解 Generator 函数？</strong></p> <ul> <li> <p>Generator 函数是一个状态机，封装了多个内部状态。</p> </li> <li> <p>Generator 函数返回一个<strong>生成器对象</strong>，该对象也实现了 Iterator 接口（也可供 <code>for...of</code> 等消费使用），所以具有了 <code>next()</code> 方法。因此，使得生成器对象拥有了开始、暂停和恢复代码执行的能力。</p> </li> <li> <p>生成器对象可以用于自定义迭代器和实现协程（coroutine）。</p> </li> <li> <p>Generator 函数从字面理解，形式与普通函数很相似。在函数名称前面加一个星号（<code>*</code>），表示它是一个生成器函数。尽管语法上与普通函数相似，但语法行为却完全不同。</p> </li> <li> <p>Generator 函数强大之处，感觉很多人没 GET 到。它可以在不同阶段从外部直接向内部注入不同的值来调整函数的行为。</p> </li> </ul> <p>生成器对象，是由 Generator 函数返回的，并且它返回可迭代协议和迭代器协议，因此生成器对象是一个可迭代对象。</p> <blockquote> <p>倘若对迭代器 Iterator 不熟悉的话，建议先看下这篇文章：<a href="https://github.com/tofrankie/blog/issues/257">细读 ES6 之 Iterator 迭代器</a>，以熟悉相关内容。</p> </blockquote> <h2>二、Generator 函数语法</h2> <h3>1. Generator 函数</h3> <p>与普通函数声明类似，但有两个特有特征：</p> <ul> <li>一个是 <code>function</code> 关键字与函数名称之间有一个星号 <code>*</code>；</li> <li>二是函数体内使用 <code>yield</code> 表达式，以定义不同的内部状态。</li> </ul> <blockquote> <p>星号 <code>*</code> 位置没有明确限制，只要处于关键字与函数名之间即可，空格可有可无，不影响。还有，这里 <code>yield</code> 是“产出”的意思。</p> </blockquote> <p>实际中，基本上使用字面量形式去声明一个 Generator 函数，很少用到构造函数 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction">GeneratorFunction</a> 来声明的。</p> <p>例如，先来一个最简单的示例。</p> <pre><code class="language-js">// generatorFn 是一个生成器函数 function* generatorFn() { console.log('do something...') // other statements } // 调用生成器函数，返回一个生成器对象。 const gen = generatorFn() // 注意，上面像平常一样调用函数，并不会执行函数体内部的逻辑/语句。 // 需要（不断地）调用生成器对象的 next() 方法，才会开始（继续）执行内部的语句。 // 具体如何执行，请看下一个示例。 gen.next() // 执行到这里，才会打印出："do something..." // 且 gen.next() 的返回值是：{ value: undefined, done: true } </code></pre> <p>上述示例中，调用生成器函数被调用，并不会立即立即执行函数体内部的语句。另外，<strong>函数体内的 <code>yield</code> 表达式是可选的，可以不写</strong>，但这就失去了生成器函数本身的意义了。</p> <p>再看示例：</p> <pre><code class="language-js">function* generatorFn() { console.log(1) yield '100' console.log(2) yield '200' console.log(3) return '300' } const gen = generatorFn() </code></pre> <p>前面提到，Generator 函数返回一个生成器，它也是一个迭代器。因此生成器内部存在一个指针对象，指向每次遍历结束的位置。每调用生成器的 <code>next()</code> 方法，指针对象会从函数头部（首次调用时）或上一次停下来的地方开始执行，直到遇到下一个 <code>yield</code> 表达式（或 <code>return</code> 语句）为止。</p> <p></p> <p>上面一共调用了四次 <code>next()</code> 方法，从结果分析：</p> <p>当首次调用 <code>gen.next()</code> 方法，代码执行到 <code>yield '100'</code> 会停下来（指针对象指向此处），并返回一个 <code>IteratorResult</code> 对象：<code>{ value: '100', done: false }</code>，包含 <code>done</code> 和 <code>value</code> 属性。其中 <code>value</code> 属性值就是 <code>yield</code> 表达式的返回值 <code>'100'</code>，<code>done</code> 为 <code>false</code> 表示遍历还没结束。</p> <p>第二次调用 <code>next()</code> 方法，它会从上次 <code>yield</code> 表达式停下的地方开始执行，直到下一个 <code>yield</code> 表达式（指针对象也会指向此处），并返回 <code>IteratorResult</code> 对象：<code>{ value: '200', done: false }</code></p> <p>第三次调用 <code>next()</code> 方法，执行过程同理。它遇到 <code>return</code> 语句遍历就结束了。返回 <code>IteratorResult</code> 对象为：<code>{ value: '300', done: true }</code>，其中 <code>value</code> 对应 <code>return</code> 表达式的返回值。如果 Generator 函数内没有 <code>return</code> 语句，那么 <code>value</code> 属性值为 <code>undefined</code>，因此返回 <code>{ value: undefined, done: true }</code>。</p> <p>第四次调用 next() 方法，返回 <code>{ value: undefined, done: true }</code>，原因是生成器对象 <code>gen</code> 已遍历结束。当迭代器已遍历结束，无论你再调用多少次 <code>next()</code> 方法，都是返回这个值。</p> <h3>2. yield 表达式</h3> <p>生成器函数返回的迭代器对象，只有调用 <code>next()</code> 方法才会遍历下一个内部状态，所以它提供了一种可以暂停执行的函数。而 <code>yield</code> 表达式就是暂停标志。</p> <p>遍历器对象的 <code>next()</code> 方法的运行逻辑如下：</p> <ol> <li> <p><code>yield</code> 表达式，就暂停执行后面的操作，并将紧跟在 <code>yield</code> 后面的那个表达式的值，作为返回的对象的 <code>value</code> 属性值。</p> </li> <li> <p>次调用<code>next()</code>方法时，再继续往下执行，直到遇到下一个 <code>yield</code> 表达式。</p> </li> <li> <p>没有再遇到新的 <code>yield</code> 表达式，就一直运行到函数结束，直到 <code>return</code> 语句为止，并将 <code>return</code> 语句后面的表达式的值，作为返回的对象的 <code>value</code> 属性值。</p> </li> <li> <p>该函数没有 <code>return</code> 语句，则返回的对象的 <code>value</code> 属性值为 <code>undefined</code>。</p> </li> </ol> <p>需要注意的是，<code>yield</code> 表达式后面的表达式，只有在调用 <code>next()</code> 方法，且内部指针指向该语句时才会执行，因此相当于为 JavaScript 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。</p> <pre><code class="language-js">function* generatorFn() { // 请注意 yield 关键字后面的表达式，是惰性求值的！ // 为了更明显地说明问题，这里使用 IIFE。 yield (function () { console.log('here here') return 1 })() } const gen = generatorFn() gen.next() // 调用 next 方法才会打印出："here here" </code></pre> <p>上面的示例中，<code>yield</code> 后面的立即执行函数表达式，不会在调用 <code>generatorFn()</code> 后立即求值，只会在调用 <code>gen.next()</code> 方法才会进行求值。</p> <h3>3. yield 与 return 的特点及异同点</h3> <ul> <li> <p>无论普通函数还是 Generator 函数，最多只能有一个 <code>return</code> 语句，表示该函数的终止。若没有显式声明，相当于在函数体最后 <code>return undefined</code>。</p> </li> <li> <p><code>yield</code> 表达式，只能在 Generator 函数内使用，否则会报错。</p> </li> <li> <p>一个 Generator 函数中，可以有多个 <code>yield</code> 语句。每个 <code>yield</code> 语句对应生成器的一个状态。</p> </li> <li> <p><code>yield</code> 表达式具备“记忆”功能，而 <code>return</code> 是不具备的。每当遇到 <code>yield</code>，函数暂停执行，下一次再从该位置继续向后执行。它是由迭代器内部由一个（指针）对象去维护的，我们无需关心。</p> </li> <li> <p>Generator 函数内部可以不用 <code>yield</code> 表达式。但如果这样使用 Generator 函数就没意义了，不如考虑使用普通函数。</p> </li> <li> <p>理论上，<code>yield</code> 表达式可以返回任何值。若语句仅有 <code>yield;</code>，相当于 <code>yield undefined;</code>。</p> </li> </ul> <h3>4. yield 注意点</h3> <p>请注意以下几点，否则可能会出现语法错误。</p> <pre><code class="language-js">// ️ 1. yield 只能用在 Generator 函数里面 function* foo() { [1].map(item => { yield item // SyntaxError // 这里 Array.prototype.map() 的回调函数，并不是一个生成器函数 }) } // ️ 2. 当 yield 表达式作用于另外一个表达式，必须放入圆括号里面 function* foo() { // Wrong // console.log('Hello' + yield) // SyntaxError // console.log('Hello' + yield 'World') // SyntaxError // Correct console.log('Hello ' + (yield)) console.log('Hello ' + (yield 'World')) // 不过要注意的是，（多次）调用生成器实例的 next() 方法 // 以上两个都会打印出 "Hello undefined"，并不是想象中的 "Hello World"。 // yield 表达式本身没有返回值，或者说总是返回 undefined， // yield 关键字后面的表达式结果，只会作为 IteratorResult 对象的 value 值。 } // ️ yield 表达式可以用作函数参数，或放在表达式的右边，可以不加括号 function* foo() { const bar = (a, b) => { console.log('paramA:', a) console.log('paramB:', b) } bar(yield 'AAA', yield 'BBB') let input = yield return input // 多次调用 next 方法，bar 函数中，只会打印出："paramA: undefined"、"paramB: undefined" // 原因第 2 点提到过了 } </code></pre> <p>Generator 函数还可以这样用：</p> <pre><code class="language-js">// 函数声明形式 function* generatorFn() {} // 函数表达式形式 const generatorFn = function* () {} // 作为对象属性 const obj = { * generatorFn() {} // or // generatorFn: function* () {} } // 作为类的实例方法，或类的静态方法 class Foo { static * generatorFn() {} * generatorFn() {} } </code></pre> <h2>三、Generator 应用详解</h2> <p>前面提到的只是生成器函数的语法与简单用法，并没有体现其强大之处。</p> <h3>1. Generator 与 Iterator</h3> <p>生成器里面是部署了 Iterator 接口，因此可以把它当做迭代器供 <code>for...of</code> 等使用。前面一篇<a href="https://github.com/tofrankie/blog/issues/257">文章</a>提到，使用生成器函数来实现自定义迭代器。</p> <p>看示例：</p> <pre><code class="language-js">class Counter { constructor([min = 0, max = 10]) { this.min = min this.max = max } *[Symbol.iterator]() { let point = this.min const end = this.max while (point <= end) { yield point++ } } } const counter = new Counter([0, 3]) const gen = counter[Symbol.iterator]() // gen 既是生成器，又是迭代器 for (const x of gen) { console.log(x) } // 依次打印：0、1、2、3 </code></pre> <h3>2. next 方法传参</h3> <p><code>yield</code> 表达式本身没有返回值，或者说总是返回 <code>undefined</code>。<code>next()</code> 方法可以带一个参数，该参数被作为上一个 <code>yield</code> 表达式的返回值。</p> <pre><code class="language-js">function* generatorFn() { let str = 'Hello ' + (yield 'World') console.log(str) return str } const gen1 = generatorFn() const gen2 = generatorFn() </code></pre> <p>不传递参数时，执行结果如下：</p> <pre><code class="language-js">// 第一次调用 next() console.log(gen1.next()) // 打印出：{ done: false, value: 'World' } // 第二次调用 next() console.log(gen1.next()) // "Hello undefined" // { done: true, value: 'Hello undefined' } </code></pre> <p>相信刚开始学 Generator 的童鞋，会认为在第二次调用 <code>gen1.next()</code> 方法时，<code>str</code> 变量的值会变成 <code>'Hello World'</code>，当初我也是这么认为的，但这是错误的，<code>str</code> 的值 <code>'Hello undefined'</code>。</p> <p><code>yield</code> 关键字后面的表达式结果，仅作为 <code>next()</code> 方法的返回对象 <code>IteratorResult</code> 的 <code>value</code> 属性值，即：<code>{ done: false, value: 'World' }</code>。</p> <p><strong>但如果我们在 <code>next()</code> 方法进行传参呢？</strong></p> <pre><code class="language-js">// 第一次调用 next() console.log(gen2.next('Invalid')) // 打印出：{ done: false, value: 'World' } // 第二次调用 next() console.log(gen2.next('JavaScript')) // "Hello JavaScript" // { done: true, value: 'Hello JavaScript' } </code></pre> <blockquote> <p>需要注意的是，由于 <code>next()</code> 方法表示上一个 <code>yield</code> 表达式的返回值，因此在第一次使用 <code>next()</code> 方法时，传递的参数是无效的。<strong>只有第二次（起）调用 <code>next()</code> 方法，参数才有效</strong>。从语义上讲，第一个 <code>next()</code> 方法用于启动遍历器对象，所以不用带有参数。</p> </blockquote> <p>第一次调用 <code>gen2.next('Invalid')</code> 时，参数 <code>'Invalid'</code> 是无效的，所以结果还是 <code>{ done: false, value: 'World' }</code>。</p> <p>当第二次调用 <code>gen2.next('JavaScript')</code> 时，由于该参数将作为上一次 <code>yield</code> 表达式的返回值。所以 <code>let str = 'Hello ' + (yield 'World')</code> 就相当于 <code>let str = 'Hello ' + 'JavaScript'</code>，因此 <code>str</code> 就变成了 <code>'Hello JavaScript'</code>，自然 <code>gen2.next()</code> 的返回值就是 <code>{ done: true, value: 'Hello JavaScript' }</code>。</p> <blockquote> <p>这个功能有很重要的语法意义。Generator 函数从暂停状态到恢复运行，它的上下文状态（context）是不变的。通过给 <code>next()</code> 方法传递参数，就有办法在 Generator 函数开始运行之后，继续向函数体内部注入值。也就是说，可以在 Generator 函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。</p> </blockquote> <p>如果还没弄懂，再看一个示例：</p> <pre><code class="language-js">function* foo(x) { const y = 2 * (yield (x + 1)) const z = yield (y / 3) return (x + y + z) } const f1 = foo(5) f1.next() // { done: false, value: 6 } f1.next() // { done: false, value: NaN } f1.next() // { done: true, value: NaN } const f2 = foo(5) f2.next() // { done: false, value: 6 } f2.next(12) // { done: false, value: 8 } f2.next(13) // { done: true, value: 42 } // 若结果跟你内心预期的一样，那说明你弄明白了！ </code></pre> <p>如果想在第一次调用 <code>next()</code> 方法时传入参数并使其有效。换个思路就行：在 Generator 函数外面包裹一个函数，在此函数内部调用第一次，并返回生成器即可。</p> <pre><code class="language-js">function genWrapper(genFn) { return function (...args) { const g = genFn(...args) g.next() // 其实是在内部调用了真正意义上的第一次 next 方法。 return g } } function* generatorFn() { let str = 'Hello ' + (yield 'World') console.log(str) return str } const gen = genWrapper(generatorFn)(5) // 这样在外部调用 next() 就算是“第一次” gen.next('JavaScript') // { done: true, value: 'Hello JavaScript' } </code></pre> <h3>3. for...of 语句</h3> <p><code>for...of</code> 语句是 ES6 标准新增的一种循环遍历的的方式，为了 Iterator 而生的。只有任何部署了 Iterator 接口的对象，都可以使用它来遍历。</p> <p><strong>那 for...of 什么时候会停止循环呢？</strong></p> <p>我们知道 <code>for...of</code> 内部其实是不断调用迭代器 <code>next()</code> 的过程，当 <code>next()</code> 方法返回的 <code>IteratorResult</code> 对象的 <code>done</code> 属性为 <code>true</code> 时，循环就会中止，<strong>且不包含返回对象</strong>。</p> <p>请看示例和注释：</p> <pre><code class="language-js">function* generatorFn() { yield 1 yield 2 yield 3 yield 4 yield 5 return 6 // 一般不指定 return 语句 } const gen = generatorFn() for (const x of gen) { console.log(x) } // 依次打印：1、2、3、4、5 console.log([...gen]) // 打印结果为：[] // ️ // 一般情况下，迭代器是不指定 return 语句的，即返回 return undefined， // 因为遇到 return 时，调用 next 会返回：{ done: true, value: '对应return的结果' } // 这时无论使用 for...of，还是数组解构或其他，它们看到状态 done 为 true（表示遍历结束）， // 它们就停止往下遍历了，而且不会遍历 { done: true } 的这一次哦！ // 所以，示例中 for...of 只会打印出 0 ~ 5，而不包括 6。 // 同理，执行到 [...gen] 时，由于此前迭代器已经是 done: true 结束状态， // 因此解构结果就是一个空数组：[] </code></pre> <p>此前的<a href="https://github.com/tofrankie/blog/issues/257">文章</a>提到过，迭代器是一次性对象，而且不应该重用生成器。例如上面示例中，已经使用 <code>for...of</code> 去遍历完 <code>gen</code> 对象了，然后还使用解构去遍历 <code>gen</code> 对象，由于解构之前 <code>gen</code> 对象已结束，再去使用就没意义了。</p> <p>再看示例，你就明白了：</p> <pre><code class="language-js">function* foo() { yield 1 yield 2 return 3 yield 4 } [...foo()] // [1, 2] Array.from(foo()) // [1, 2] const [x, y] = foo() // x 为 1, y 为 2 for (const x of foo()) { console.log(x) } // 依次打印：1、2 </code></pre> <p>所以，无论是 <code>for...of</code> 或是解构操作，遇到状态 <code>done</code> 为 <code>true</code> 就会中止，<strong>且不包含返回对象</strong>。</p> <p><code>for...of</code> 本质上就是一个 <code>while</code> 循环。</p> <pre><code class="language-js">const arr = [1, 2, 3] for (const x of arr) { console.log(x) } // 相当于 const iter = arr[Symbol.iterator]() // 迭代器 let iterRes = iter.next() // IteratorResult while (!iterRes.done) { // 当 done 为 true 时退出循环 console.log(iterRes.value) iterRes = iter.next() } </code></pre> <blockquote> <p>建议：同一个迭代器最好不要重复使用。</p> </blockquote> <h3>4. Generator.prototype.return()</h3> <p>此前的<a href="https://github.com/tofrankie/blog/issues/257">文章</a>提到过，迭代器要提前退出，并“关闭”迭代器（即状态 <code>done</code> 变为 <code>true</code>），需要实现迭代器协议的 <code>return()</code> 方法。</p> <p>也提到过，生成器对象本身实现了 <code>return()</code> 方法。因此，因应不同场景，使用 <code>break</code>、<code>continue</code>、<code>return</code>、<code>throw</code> 或数组解构未消费所有值时，都会提前关闭状态。</p> <pre><code class="language-js">function* foo() { yield 1 yield 2 console.log('here') yield 3 } // 情况一：属于未消费所有值，也会提前关闭。其中 x 为 1, y 为 2。 const [x, y] = foo() // 情况二：使用 break 提前退出，因此不会执行到 console.log('here') 这条语句。 for (const x of foo()) { console.log(x) if (x === 2) break } // 依次打印：1、2 // 情况三：属于从开始到结尾，迭代完全 for (const x of foo()) { console.log(x) } // 依次打印：1、2、"here"、3 </code></pre> <p>对于生成器对象，除了通过以上方式“提前关闭”之外，还提供了一个 <code>Generator.prototype.return()</code> 方法供我们使用。</p> <pre><code class="language-js">function* foo() { yield 1 yield 2 yield 3 } const gen = foo() gen.next() // { done: false, value: 1 } gen.return('closed') // { done: true, value: 'closed' } // 若 return 不传参时，value 为 undefined。 gen.next() // { done: true, value: undefined } </code></pre> <p>注意，<code>return()</code> 方法的参数是可选的。当传递某个参数时，它将作为 <code>{ done: true, value: '参数对应的值' }</code>。若不传参，那么 <code>value</code> 的值为 <code>undefined</code>。</p> <p>但如果 Generator 函数体内，包含 <code>try...finally</code> 代码块，且正在执行 <code>try</code> 代码块，那么 <code>return()</code> 方法会导致立即进入 <code>finally</code> 代码块，执行完以后，整个函数才会结束。</p> <pre><code class="language-js">function* foo() { yield 1 try { yield 2 yield 3 } finally { yield 4 yield 5 } yield 6 } // ️ 注意执行顺序及结果 const gen = foo() gen.next() // { done: false, value: 1 } gen.next() // { done: false, value: 2 } gen.return('closed') // { done: false, value: 4 } gen.next() // { done: false, value: 5 } gen.next() // { done: true, value: 'closed' } </code></pre> <p>上面代码中，调用 <code>return()</code> 方法后，就开始执行 <code>finally</code> 代码块，不执行 <code>try</code> 里面剩下的代码了，然后等到 <code>finally</code> 代码块执行完，再返回 <code>return()</code> 方法指定的返回值。</p> <h3>5. Generator.prototype.throw()</h3> <p>生成器对象都有一个 <code>throw()</code> 方法（注意，它跟全局的 <code>throw</code> 关键字是两回事），可以在函数体外抛出错误，然后在 Generator 函数体内捕获。</p> <blockquote> <p>当生成器<strong>未开始之前</strong>或者<strong>已结束（已关闭）之后</strong>，调用生成器的 <code>throw()</code> 方法。它的错误信息会被生成器函数外部的 <code>try...catch</code> 捕获到。若外部没有 <code>try...catch</code> 语句，则会报错且代码就会停止执行。</p> <ul> <li> <p><strong>未开始</strong>，是指调用 Generator 函数返回生成器对象之后，第一次就调用了 <code>throw()</code> 方法。此时由于 Generator 函数还没开始执行，<code>throw()</code> 方法抛出的错误只能抛出到 Generator 函数外。</p> </li> <li> <p><strong>已结束</strong>，是指生成器对象的状态是 <code>{ done: true }</code>。此后再调用生成器对象 <code>throw()</code> 方法，错误只能在 Generator 函数外被捕获。</p> </li> </ul> <p>以上两种情况均不会被 Generator 函数内部的 <code>try...catch</code> 捕获到。</p> </blockquote> <p>看示例：</p> <pre><code class="language-js">function* generatorFn() { try { yield } catch (e) { console.log('Generator Inner:', e) } } const gen = generatorFn() gen.next() try { console.log(gen.throw('a')) console.log(gen.throw('b')) } catch (e) { console.log('Generator Outer:', e) } // 依次打印出： // "Generator Inner: a" // { value: undefined, done: true } // "Generator Outer: b" </code></pre> <p>上面示例中，当代码执行到 <code>gen.throw('a')</code> 时（此前已调用过一次 <code>gen.next()</code> 了），由于 Generator 函数体内部署了 <code>try...catch</code> 语句块，因此在外部的 <code>gen.throw('a')</code> 会被内部的 <code>catch</code> 捕获到，而且参数 <code>'a'</code> 将作为 <code>catch</code> 语句块的参数，所以打印出 <code>'Generator Inner: a'</code>。</p> <p><strong>请注意，当 <code>throw()</code> 方法被捕获到之后，会“自动”执行下一条 <code>yield</code> 表达式，相当于调用一次 <code>next()</code> 方法</strong>。由于 Generator 函数体内在执行 <code>catch</code> 之后，已经没有其他语句，相当于有一个隐式的 <code>return undefined</code>，即 <code>gen</code> 对象会变成 <code>done</code> 为 <code>true</code> 而关闭。所以 <code>console.log(gen.throw('a'))</code> 就会打印出 <code>{ value: undefined, done: true }</code>。</p> <p>完了继续执行 <code>gen.throw('b')</code> 方法，由于 <code>gen</code> 已经是“结束状态”，所以 <code>throw()</code> 方法抛出的错误将会在 Generator 函数外部被捕获到。所以就是打印出：<code>'Generator Outer: b'</code>。</p> <p>怕有人还没完全理解，再给出一个示例：</p> <pre><code class="language-js">function* generatorFn() { try { yield 1 } catch (e) { console.log('Generator Inner:', e) } yield 2 } const gen = generatorFn() console.log(gen.next()) console.log(gen.throw(new Error('Oops'))) console.log(gen.next()) // 依次打印出： // { value: 1, done: false } // "Generator Inner: Error: Oops" // { value: 2, done: false } // { value: undefined, done: true } </code></pre> <p>以上示例中，<code>gen.throw()</code> 之后，内部会自动执行一次 <code>next()</code> 方法，即执行到 <code>yield 2</code>，因此返回的 <code>IteratorResult</code> 对象为：<code>{ value: 2, done: false }</code>。接着再执行一次 <code>gen.next()</code> 方法生成器就会变成关闭状态。</p> <blockquote> <p>这种函数体内捕获错误的机制，大大方便了对错误的处理。多个 <code>yield</code> 表达式，可以只用一个 <code>try...catch</code> 代码块来捕获错误。如果使用回调函数的写法，想要捕获多个错误，就不得不为每个函数内部写一个错误处理语句，现在只在 Generator 函数内部写一次 <code>try...catch</code> 语句就可以了。</p> </blockquote> <p>还有，当 Generator 函数内报错，且未被捕获，生成器就会变成“关闭”状态。若后续再次调用此生成器的 <code>next()</code> 方法，只会返回 <code>{ done: true, value: undefined }</code> 结果。</p> <h3>6. next、return、throw 的共同点</h3> <p>其实 <code>next()</code>、<code>return()</code>、<code>throw()</code> 三个方法本质上都是同一事件，可以放在一起理解。它们的作用都是让 Generator 函数恢复执行，兵器使用不同的语句替换 <code>yield</code> 表达式。</p> <pre><code class="language-js">const gen = function* (x, y) { const result = yield x + y return result }(1, 2) gen.next() // { done: false, value: 3 } </code></pre> <p><code>next()</code> 方法是将 <code>yield</code> 表达式替换成一个值。注意，首次调用 <code>next()</code> 方法进行传参是无效的，从第二次起才有效。</p> <pre><code class="language-js">gen.next(10) // { done: true, value: 10 } // 如果第二次调用 next 方法，且不传参时，yield 表达式返回值为 undefined。因此， // gen.next() // { done: true, value: undefined } </code></pre> <p><code>return()</code> 方法是将 <code>yield</code> 表达式替换成一个 <code>return</code> 语句</p> <pre><code class="language-js">gen.return('closed') // { done: true, value: 'closed' } // 这样的话 `let result = yield x + y` 相当于变成 `let result = return 'closed'` </code></pre> <p><code>throw()</code> 方法是将 <code>yield</code> 表达式替换成一个 <code>throw</code> 语句，以主动抛出错误。</p> <pre><code class="language-js">gen.throw(new Error('exception')) // 报错：Uncaught Error: exception // 这样的话 `let result = yield x + y` 相当于变成 `let result = throw new Error('exception')` </code></pre> <h3>7. yield* 表达式</h3> <p>如果在 Generator 函数内部调用另外一个 Generator 函数，需要前者的函数体内部“手动”完成遍历。</p> <pre><code class="language-js">function* foo() { yield 'foo1' yield 'foo2' // return 'something' // 假设指定一个 return 语句， // 使用 yield* foo() 迭代时将不会被迭代到， // 因此可以理解成 yield* 内部执行了一遍 for...of 循环。 // 返回值 something，仅当 let result = yield* foo() 使用时，作为 result 的结果。 } function* bar() { yield 'bar1' for (let x of foo()) { console.log(x) } yield 'bar2' } for (let x of bar()) { console.log(x) } // 依次打印出： // "foo1" // "bar1" // "bar2" // "foo2" </code></pre> <p>上面示例中，<code>foo</code> 和 <code>bar</code> 都是Generator 函数，在 <code>bar</code> 内部调用 <code>foo</code>，需要“手动”迭代 <code>foo</code> 的生成器实例。如果存在多个 Generator 函数嵌套时，写起来就会非常麻烦。</p> <p>针对这种情况，ES6 提供了 <code>yield*</code> 表达式，用于在一个 Generator 函数里面执行另外一个 Generator 函数。</p> <p>因此，上面的示例可以利用 <code>yield*</code> 改写成：</p> <pre><code class="language-js">function* foo() { yield 'foo1' yield 'foo2' } function* bar() { yield 'bar1' yield* foo() yield 'bar2' } for (let x of bar()) { console.log(x) } </code></pre> <blockquote> <p>关于 <code>yield</code> 与 <code>yield*</code> 的区别：</p> <ul> <li> <p><code>yield</code> 关键字后面，可以跟着一个值或表达式，其结果将作为 <code>next()</code> 方法返回值的 <code>value</code> 属性值。</p> </li> <li> <p><code>yield*</code> 后面，只能跟着一个<strong>可迭代对象</strong>（即具有 Iterator 接口的任意对象），否则会报错。生成器本身就是迭代器，也是可迭代对象。</p> </li> </ul> </blockquote> <p>因此，<code>yield*</code> 后面除了生成器对象，还可以是以下这些可迭代对象等等。</p> <pre><code class="language-js">function* foo() { yield 'foo1' yield* [1, 2] // 数组、字符串均属于可迭代对象 yield [3, 4] // 未使用星号时，将会返回数组 yield 'foo2' yield* 'Hi' yield 'JSer' // 同理，未使用星号将会返回整个字符串 // yield 100 // 若 yield* 后面跟一个不可迭代对象，将会报错：TypeError: undefined is not a function } for (const x of foo()) { console.log(x) } // 依次打印出："foo1"、1、2、[3, 4]、"foo2"、"H"、"i"、"JSer" </code></pre> <h3>8. Generator 函数中的 this</h3> <p>在普通函数中 <code>this</code> 指向当前的执行上下文环境，而箭头函数则不存在 <code>this</code>，那么 Generator 函数中 <code>this</code> 是怎样的呢？</p> <pre><code class="language-js">function* foo() {} const gen = foo() foo.prototype.sayHi = function () { console.log('Hi~') } console.log(gen instanceof foo) // true gen.sayHi() // "Hi~" </code></pre> <p>上面的示例中，实例 <code>gen</code> 继承了 <code>foo.prototype</code>。Generator 函数算是构造函数，但它是“特殊”的构造函数，它不返回 <code>this</code> 实例，而是生成器实例。</p> <pre><code class="language-js">function* foo() { this.a = 1 } const gen = foo() gen.next() console.log(gen.a) // undefined // 其实我们通过打印 this 可知，this 仍指向当前执行上下文环境。 // 此处执行上下文环境是全局，因此 this 是 window 对象。 // 如果执行 gen.next() 时所处的上下文是某个对象（假设为 obj）， // 那么 this 就会指向 obj，而不是 gen 对象。 // 看着是不是有点像以下这个： // function Bar() { // this.a = 1 // return {} // 不返回 this，返回另一个对象 // } // const bar = new Bar() // console.log(bar.a) // undefined </code></pre> <p>上面的示例中，当我们调用 <code>gen.next()</code> 方法，会给 <code>this.a</code> 赋值为 <code>1</code>，接着打印 <code>gen.a</code> 的结果却是 <code>undefined</code>，说明 <code>this</code> 并不是指向 <code>gen</code> 生成器实例。所以，Generator 函数跟平常的构造函数是不一样的。</p> <p>而且，不能使用 <code>new</code> 关键字进行实例化，会报错。</p> <pre><code class="language-js">const gen2 = new foo() // TypeError: foo is not a constructor </code></pre> <h3>9. Generator 与上下文</h3> <p>JavaScript 代码运行时，会产生一个全局的上下文环境（context，又称运行环境），包含了当前所有的变量和对象。然后，执行函数（或块级代码）的时候，又会在当前上下文环境的上层，产生一个函数运行的上下文，变成当前（active）的上下文，由此形成一个上下文环境的堆栈（context stack）。</p> <p>这个堆栈是“<strong>后进先出</strong>”的数据结构，最后产生的上下文环境首先执行完成，退出堆栈，然后再执行完成它下层的上下文，直至所有代码执行完成，堆栈清空。</p> <p>Generator 函数不是这样，它执行产生的上下文环境，一旦遇到 <code>yield</code> 命令，就会暂时退出堆栈，但是并不消失，里面的所有变量和对象会冻结在当前状态。等到对它执行 <code>next</code> 命令时，这个上下文环境又会重新加入调用栈，冻结的变量和对象恢复执行。</p> <pre><code class="language-js">function* foo() { yield 1 return 2 } let gen = foo() console.log( gen.next().value, gen.next().value ) </code></pre> <p>上面代码中，第一次执行 <code>gen.next()</code>时，Generator 函数 <code>foo </code> 的上下文会加入堆栈，即开始运行 <code>foo</code> 内部的代码。等遇到 <code>yield 1</code>时，<code>foo</code> 上下文退出堆栈，内部状态冻结。第二次执行 <code>gen.next()</code> 时，<code>foo</code> 上下文重新加入堆栈，变成当前的上下文，重新恢复执行。</p> <h2>四、Generator 的应用</h2> <p>Generator 与 Promise 都是 ES6 通过的异步编程的解决方案。尽管 Promise 有效解决了 ES6 之前的“回调地狱”（Callback Hell），但它仍然需要写一堆的 <code>then()</code> 或 <code>catch()</code> 的处理。</p> <p>如示例：</p> <pre><code class="language-js">// 这里 delay 表示各种异步操作，比如网络请求等等 // 一下子想不到要列举哪些异步操作，就用 setTimeout 表示吧 // 问题不大，举例而已 function delay(time) { return new Promise(resolve => setTimeout(resolve, time)) } function requestByPromise(url) { let result = null window.fetch(url) .then(respone => respone.json()) .then(res => { result = res }) .then(() => { return delay(1000) }) .then(() => { return delay(2000) }) .then(() => { return delay(3000) }) .then(() => { console.log('Done', result) // do something... }) .catch(err => { console.warn('Exception', err) }) } requestByPromise('/config/user') </code></pre> <p>上述示例中，当我们存在多个异步操作，想利用 Promise 封装的话，避免不了要写一系列的 <code>then()</code> 或 <code>catch()</code> 方法，假设 <code>requestByPromise()</code> 方法，进行网络请求之后，还有很多个异步操作要执行，等它们完成之后，这里封装的 <code>requestPromise</code>（请求操作）才会完结。整个代码的实现起来代码里还是很长。</p> <blockquote> <p>虽然利用 <code>async...await</code> 可以写出很简洁的结构，但是本文的主角不是它。</p> </blockquote> <p>当然，利用 <code>Promise.all()</code> 等方法也可以简化以上流程。如果利用 Generator 要怎么做呢？</p> <p>如果我们想写出如下这样更直观的“同步”方式：</p> <pre><code class="language-js">function* requestByGenerator(url) { let response = yield window.fetch(url) let result = yield response.json() yield delay(1000) yield delay(2000) yield delay(3000) return result } </code></pre> <p>如果像下面那样，直接去（多次）调用 <code>next()</code> 方法，显然不会得到我们预期结果，且会报错。</p> <pre><code class="language-js">const gen = requestByGenerator('/config/user') gen.next() gen.next() // 这一步就会报错，TypeError: Cannot read property 'json' of undefined // ... </code></pre> <p>原因很简单，<code>yield</code> 表达式的返回值总是 <code>undefined</code>。如果 <code>response</code> 要得到预期值，在调用 <code>gen.next()</code> 方法时，应传入 <code>window.fetch(url)</code> 的结果，在下一个 <code>yield</code> 表达式才会正确解析。而且还有一个最大的问题，由于实例化 <code>gen</code> 对象，以及调用 <code>gen.next()</code> 都是同步的，当我们如上述示例调用第二次 <code>next()</code> 方法时，Fetch 请求还没有得到结果。即使已经请求到数据，但由于 Event Loop 机制，它的处理也后于 <code>next()</code> 方法。</p> <blockquote> <p>请注意，尽管 Generator 函数是异步编程的解决方案，但它并不是异步的，而是同步的。只是 Generator 函数在调用之后，不会立即执行函数体内的代码，而是提供了 <code>next()</code> 等方法，方便我们去控制异步流程罢了。</p> </blockquote> <p>因此，像前一个示例的 <code>requestByGenerator</code> 函数，它并不会按编写顺序“同步”地处理这些异步操作，还需要我们进一步去封装，才能按照预期的“同步”执行多个异步操作。</p> <p>Generator 还有一个很蛋疼的问题，需要主动调用 <code>next()</code> 才会去执行 Generator 函数体内的代码。如果利用 <code>for...of</code> 等语句去遍历，遇到 <code>done</code> 为 <code>true</code> 的又不执行。</p> <p>所以，我们要做的就是实现一个 Generator 执行器。</p> <pre><code class="language-js">/** * 思路： * 1. 封装方法并返回一个 Promise 对象； * 2. Promise 对象的返回值就是 Generator 函数的 return 结果； * 3. 封装的方法内部，要自动调用生成器的 next() 方法，在生成器结束时，将结果返回 Promise 对象（fulfilled）； * 4. 这里将 Generator 内部的异常情况，在 Generator 外部使用 try...catch 补换，并返回 Promise 对象（rejected）； * 5. 针对 Generator 函数内 yield 关键字后的异步操作，若非 Promise 的话，请使用 Promise 包装一层； * 6. 由于封装方法会自动调用 next() 方法，在 Generator 函数内若不是异步操作，没必要使用 yield 关键字去创建一个状态，直接同步写法即可。 * * @param {GeneratorFunction} genFn 生成器函数 * @param {...any} args 传递给生成器函数的参数 * @returns {Promise} */ function generatorExecutor(genFn, ...args) { const getType = obj => { const type = Object.prototype.toString.call(obj) return /^\[object (.*)\]$/.exec(type)[1] } if (getType(genFn) !== 'GeneratorFunction') { throw new TypeError('The first parameter of generatorExecutor must be a generator function!') } // 下面就是不断调用 next() 方法的过程，直至结束或报错 return new Promise((resolve, reject) => { const gen = genFn(...args) let iterRes = gen.next() const goNext = iteratorResult => { const { done, value } = iteratorResult // Generator 结束时退出 if (done) return resolve(value) if (getType(value) !== 'Promise') { const nextRes = gen.next(value) goNext(nextRes) return } // 处理 yield 为 Promise 的情况 value.then(res => { const nextRes = gen.next(res) goNext(nextRes) }).catch(err => { try { // 利用 Generator.prototype.throw() 抛出异常，同时使得 gen 结束 gen.throw(err) } catch (e) { reject(e) } }) } goNext(iterRes) }) } </code></pre> <p>然后，像下面那样去调用即可。</p> <pre><code class="language-js">function* requestByGenerator(url) { let response = yield window.fetch(url) let result = yield response.json() yield delay(1000) yield delay(2000) yield delay(3000) return result } generatorExecutor(requestByGenerator, '/config/user') .then(res => { // do something... // res 将会预期地得到 fetch 的响应结果 }) .catch(err => { // do something... // 处理异常情况 }) </code></pre> <p>尽管 Generator 函数提出了一种全新的异步编程的解决方案，可以在函数外部注入值取干预函数内部的行为，这种思想提供了极大的创造性，强大之处不是 Promise 能比的。但是在结合实际场景时，很大可能需要自实现一个 Generator 执行器，使其自动执行生成器。</p> <p>例如，著名的 <a href="https://github.com/tj/co#readme">co</a> 函数库就是去做了这件事情。如果想了解，可以看一下这篇<a href="http://www.ruanyifeng.com/blog/2015/05/co.html">文章</a>，或直接看<a href="https://github.com/tj/co#readme">官方文档</a>。但看了下 GitHub 上最新一次提交已经是 5 年前，大概都去用 <code>async/await</code> 了吧。</p> <p>接下来就介绍 <code>async/await</code> 了。</p>  </article> <article> <h1>细读 ES6 | Iterator 迭代器</h1> <p>Sun, 26 Feb 2023 11:56:13 GMT</p> <p></p> <p>迭代的英文是 “iteration”，源自拉丁文 “itero”，是“重复”或“再来”的意思。在软件开发领域，“迭代”的意思是按照顺序反复多次执行一段程序，通常会有明确的终止条件。ES6 规范新增了两个高级特性：<strong>迭代器</strong>和<strong>生成器</strong>。使用这两个特性，能够更清晰、高效、方便地实现迭代。</p> <h2>一、迭代器简述</h2> <p>迭代器（Iterator）是一种机制，是一种接口。为各种不同的数据结构提供了统一的访问机制。</p> <blockquote> <p>有些书籍或文章译为“遍历器”，其他语言多称为“迭代器”。</p> </blockquote> <h3>1. 为什么 ECMAScript 要引入“迭代器”？</h3> <p>在 ES6 之前，最常见的数据结构有数组和对象。</p> <p>遍历这些数据结构通常使用 <code>for</code> 语句。例如数组，除了最原始的 <code>for</code> 循环，还有 <code>Array.prototype.forEach()</code> 等方法。而普通对象则使用 <code>for...in</code> 语句。<strong>那么，我们决定使用哪一种方法之前，是不是要提前知道它们内部结构是怎样的，才能正确地写出迭代的程序，对吧。</strong></p> <p>而在 ES6 标准中，新增了 <code>Map</code> 和 <code>Set</code> 两种不同的数据结构。它们的内部结构与原本就存在的 <code>Array</code> 和 <code>Object</code> 又不一样。假设我们要去遍历它们，是不是要实现一个类似 <code>Array.prototype.forEach()</code> 的方法，例如，遍历以上两种结构的方法叫 <code>Map.prototype.forEach()</code> 和 <code>Set.prototype.forEach()</code>（当然这两个是我瞎编了）。那么这样是不是又多了两种迭代方式，无论对负责制定标准的 TC39 委员会，还是 JavaScript 开发者来说，都增加了工作量。委员会要负责实现，开发者要了解学习，都需要成本。</p> <p>看到这种苗头，TC39 委员会那些大佬就内心开始骂街了。每增加一种数据结构，就要实现一种全新的方法去遍历它，那劳资不干了，都不能好好摸鱼了。</p> <p>于是它们就想出一个“偷懒”的方法：<strong>实现一种通用的迭代机制，并制定相关标准。它一定要支持原有的数据结构，而且未来新增的数据结构，也要满足这种模式（机制）才行。因此，在 ECMAScript 中就出现了“迭代器”（Iterator）的概念。</strong></p> <p>这样的话，对于我们开发者来说，无需知道某种对象的内部数据结构，就可以利用 <code>for...of</code> 等语句，方便、快速、安全地写出迭代程序。假设在未来的 ES2050 标准中，新增了一种名为 <code>Record</code> 的数据结构，只要符合迭代器机制的，我们仍然可以使用 <code>for...of</code> 去遍历它们。</p> <h3>2. JavaScript 内置的可迭代对象</h3> <p>如果一个对象具有 Iterator 接口，我们将它称为“可迭代对象”（Iterable）。</p> <p>在 JavaScript 中，目前内置的可迭代对象有：<code>String</code>、<code>Array</code>、<code>TypedArray</code>、<code>Map</code>、 <code>Set</code>、<code>Arguments</code> 和 <code>NodeList</code>。它们的原型对象（<code>prototype</code>）都实现了 <code>@@iterator </code>方法。（即对象含有 <code>Symbol.iterator</code> 属性）。</p> <p>除了内置的可迭代对象，我们可以实现自己的可迭代对象。例如：</p> <pre><code class="language-js">const myIterable = { [Symbol.iterator]: function* () { yield 1 yield 2 yield 3 // 生成器函数，返回一个可迭代对象 } } console.log([...myIterable]) // [1, 2, 3] </code></pre> <h3>3. Iterator 接口</h3> <p>迭代器是一个对象，带有特殊的接口。一个具有 Iterator 接口的对象，分为两部分：<strong>可迭代协议</strong>和<strong>迭代器协议</strong>。</p> <p>简单来说：</p> <ul> <li> <p>可迭代协议，是指对象实现了 <code>@@iterator</code> 方法（不管是本身属性，还是对象原型链上的属性都可以），并返回一个迭代器。可通过常量 <code>Symbol.iterator</code> 访问该属性。</p> </li> <li> <p>迭代器协议，是指 <code>@@iterator</code> 方法返回的迭代器实现了 <code>next</code> 方法。调用 <code>next</code> 方法返回一个 <code>IteratorResult</code> 对象，包括两个属性：<code>{ done: true/false, value: '...' }</code>，其中 <code>done</code> 是一个布尔值，表示遍历是否结束；<code>value</code> 表示当前成员的值。</p> </li> </ul> <p>某个对象只有实现了以上两个协议，才算是一个完整、合格的迭代器。</p> <h2>二、生成器简述</h2> <p>说到生成器，你们一定知道 Generator 函数（即“生成器函数”），它是 ES6 中提供的一种异步编程的解决方案。</p> <p>生成器的形式是一个函数，在函数名称前面加一个星号（<code>*</code>），表示它是一个生成器。尽管语法上与普通函数相似，但语法行为却完全不同。</p> <blockquote> <p>注意，箭头函数不能用来定义生成器函数。</p> </blockquote> <p>如示例：</p> <pre><code class="language-js">function* generatorFn() {} // generatorFn 表示一个生成器 const gen = generatorFn() // 调用生成器函数，会返回一个“生成器对象” console.log(gen) // generatorFn {<suspended>} console.log(gen.next()) // {value: undefined, done: true} // 生成器对象，一开始会处于暂停执行（suspended）的状态 // 调用 next() 方法会让生成器开始或恢复执行 // 由于生成器函数体为空，因此调用一次 next() 方法就会让生成器到达 done: true 的状态 </code></pre> <p>本文不会详细介绍生成器函数相关语法，后面另起<a href="https://github.com/toFrankie/blog/issues/258">一文</a>。本文提到它的缘由是：<strong>Generator 函数会产生一个“生成器对象”，该对象也实现了 Iterator 接口。</strong></p> <p>因此，生成器格外合适作为默认迭代器。在实现自定义可迭代对象时，也是最简单的一种实现。例如：</p> <pre><code class="language-js">class Foo { constructor(value) { this.value = value } *[Symbol.iterator]() { yield* this.value } } // foo 实例对象是一个可迭代对象，因为它的原型上实现了 @@iterator 方法 const foo = new Foo([1, 2, 3]) // 访问迭代器 for (const x of foo) { console.log(x) } // 依次打印：1、2、3 </code></pre> <h2>三、Iterator 详解</h2> <blockquote> <p>迭代器是按需创建的一次性对象。每个迭代器都会关联一个可迭代对象。</p> </blockquote> <p>这句话怎么理解，看示例：</p> <pre><code class="language-js">const num = 1 const obj = {} const arr = [1, 2, 3] // 通过访问 Symbol.iterator 属性可判断对象是否实现了可迭代协议， // 返回值为函数，则表示实现了，否则未实现， // 因此 num、obj 不可迭代，arr 是可迭代的。 console.log(num[Symbol.iterator]) // undefined console.log(obj[Symbol.iterator]) // undefined console.log(arr[Symbol.iterator]) // ƒ values() { [native code] } // 调用 @@iterator 方法，会生成一个迭代器， // iter1、iter2 表示两个不同的迭代器， // 但它们相关联的可迭代对象都是 arr const iter1 = arr[Symbol.iterator]() const iter2 = arr[Symbol.iterator]() console.log(iter1 === iter2) // false for (const x of iter1) { console.log(x) } // for...of 语句依次打印：1、2、3 </code></pre> <p>在上面的实例中，结论与分析请看注释部分。</p> <p>如何理解“一次性”对象，看示例：</p> <pre><code class="language-js">// 示例一： const gen = (function* () { yield 1 yield 2 yield 3 })() for (let x of gen) { console.log(x) break // 关闭生成器 } // 生成器不应该重用，以下没有意义！ for (let x of gen) { console.log(x) } // 由始至终，仅打印出 1 </code></pre> <p>上面的示例一中，使用了一个生成器函数返回一个生成器（也是迭代器，它实现了 Iterator 接口）。当我们使用 <code>for...of</code> 循环遍历它，并使用了 <code>break</code> 关键字提前终止。在退出循环后，生成器关闭。若尝试再次迭代，不会产生任何进一步的结果。因此，我们不应该重用生成器。</p> <p>再看以下示例：</p> <pre><code class="language-js">// 示例二 const arr = [1, 2, 3, 4, 5] const iter = arr[Symbol.iterator]() // 第一次迭代 for (const x of iter) { console.log(x) if (x > 2) break } // 依次打印出：1、2、3 // 再次迭代 for (const x of iter) { console.log(x) } // 依次打印出：4、5 </code></pre> <p>观察示例二，数组的迭代器跟生成器函数返回的迭代器又稍有不同。尽管我们在第一次迭代的时候，提前跳出循环了，但是迭代器 <code>iter</code> 并没有关闭。因此，我们可以尝试继续从上一次离开的地方继续迭代，这个离开的地方由迭代器内部维护。因此，数组的迭代器是不能主动关闭的，当它迭代至最后一个成员才会关闭。</p> <blockquote> <p>结合两个示例，同一个迭代器最好不要重复使用，因此才说是一次性对象。</p> </blockquote> <p>迭代器的概念很容易混淆，所以要注意了。</p> <p>例如，数组不是一个迭代器（Iterator），但它是一个可迭代对象（Iterable）。在调用数组实例的 <code>@@iteator</code> 方法，才会生成一个与数组实例相关联的迭代器。</p> <blockquote> <p>还需要注意的是，由于迭代器维护着一个执行可迭代对象的引用，因此迭代器会阻止垃圾回收程序回收可迭代对象。</p> </blockquote> <h3>Iterator 遍历过程</h3> <p>过程如下：</p> <p>（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，迭代器对象本质上，就是一个指针对象。（2）第一次调用指针对象的 <code>next()</code> 方法，可以将指针对象指向数据结构的第一个成员。（3）第二次调用指针对象的 <code>next()</code> 方法，可以将指针对象指向数据结构的第二个成员。（4）不断调用指针对象的 <code>next()</code> 方法，直到它指向数据结构的结束位置。</p> <p>每一次调用迭代器的 <code>next()</code> 方法，都会返回数据结构的当前成员的信息，即前面提到的 <code>IteratorResult</code> 对象。它有包含 <code>done</code> 和 <code>value</code> 两个属性，其中 <code>done</code> 是一个布尔值，表示遍历是否结束；<code>value</code> 表示当前成员的值。</p> <p>我们基于数组的结构特点，模拟一个简单的 <code>next()</code> 方法（迭代器协议）：</p> <pre><code class="language-js">function createIterator(array) { let nextIndex = 0 return { next: function () { return nextIndex < array.length ? { done: false, value: array[nextIndex++] } : { done: true, value: undefined } // 对迭代器对象来说，`done: false` 和 `value: undefined` 都是可以省略的， // 因此可以简写成： // return nextIndex < array.length // ? { value: array[nextIndex++] } // : { done: true } } } } const iter = createIterator([1, 2, 3]) </code></pre> <p>上面示例中，定义了一个 <code>createIterator</code> 函数，作用是返回一个迭代器。当我们对数组 <code>[1, 2, 3]</code> 执行 <code>createIterator()</code>，就会返回与该数组相关联的遍历器对象 <code>iter</code>（即上文提到的指针对象）。</p> <p>第一次调用指针对象 <code>iter</code> 的 <code>next()</code> 方法，指针指向数组的开始位置，并返回一个 <code>IteratorResult</code> 对象 <code>{done: false, value: 1}</code>，它包含了当前数据成员的信息。若 <code>done</code> 为 <code>false</code> 表示遍历未结束，即可继续调用 <code>next()</code> 方法访问下一个成员信息......直到 <code>done</code> 为 <code>true</code> 遍历结束。</p> <p></p> <p>其实迭代器（Iterator）与可迭代对象（Iterable）是分开的，迭代器无需了解与其关联的可迭代对象，只需要知道如何取得连续的值。</p> <h2>四、默认迭代器</h2> <p>迭代器的目的就是提供一种统一的访问机制。可供给 JavaScript 所有接收可迭代对象的语句或方法使用。</p> <pre><code class="language-text">目前支持以下这些： for...of 语句数组解构扩展运算符 Array.from() new Set() new Map() Promise.all() Promise.race() Promise.allSettled() Promise.any() yield* 操作符 </code></pre> <p>前面提到，只要某种数据结构（对象）部署了 Iterator 接口，那么我们就称这种数据结构是“可迭代的”。</p> <p>ES6 规定，默认的 Iterator 接口部署在对象的 <code>Symbol.iterator</code> 属性上。该属性本身就是一个函数，就是当前对象的迭代器生成函数。调用此方法就会返回一个迭代器。</p> <blockquote> <p>插个话：</p> <p>千万不要被 <code>Symbol.iterator</code> 属性吓到了，标准规定用它指向对象的默认遍历器方法而已，你完全可以在内心把它当成名称为 <code>iterator</code> 的属性。那么 <code>arr[Symbol.iterator]()</code>，就相当于 <code>arr.iterator()</code> 或 <code>arr['iterator']()</code>。它就是一个键名，仅此而已。</p> <p>我们知道使用 Symbol 类型去表示独一无二的值。同样的，当使用 Symbol 值作为对象的键名，就能保证不会出现同名属性。假设我们的默认迭代器部署在一个名称为 <code>iterator</code>（或其他）的属性上，那么是不是很容易被我们改写或覆盖掉。因此指定标准的那帮家伙才会使用 Symbol 值作为键名，并规定它的特殊含义，这样开发者就不会随意覆盖它了。</p> <p>由于 Symbol 值是唯一的，因此不能使用点运算符（<code>.</code>）去访问，需通过方括号（<code>[]</code>）的形式才能访问。</p> <p>除了 <code>Symbol.iterator</code>，还有很多内置的 Symbol 值。例如 <code>Symbol. hasInstance</code>、<code>Symbol.toPrimitive</code>、<code>Symbol.toStringTag</code> 等等，它们都有特定的含义。有时候也会对应称作 <code>@@iterator</code>、<code>@@toPrimitive</code> 等。</p> </blockquote> <p>在 JavaScript 中，有以下这些数据结构原生具备 Iterator 接口：</p> <pre><code class="language-text">String、Array、TypedArray、Map、 Set、Arguments 和 NodeList。 </code></pre> <p>因此我们不用任何处理，无需自己编写迭代器生成函数，就可以使用如 <code>for...of</code> 语句去遍历它们。<code>for...of</code> 内部会自动访问默认 Iterator 接口 <code>Symbol.iterator</code>。</p> <p>而普通对象并没有默认部署 Iterator 接口，因此我们不能使用 for...of 去迭代普通对象。但我们可以为它实现自定义迭代器接口。</p> <blockquote> <p>实现迭代器接口，最简单的方法应该是使用 Generator 函数。</p> </blockquote> <p>如何判断某种数据结构是否实现了 Iterator 接口，可以这样：</p> <pre><code class="language-js">// Symbol.iterator 属性值为 undefined，表示未实现 Iterator 接口 console.log(1[Symbol.iterator]) // undefined console.log({}[Symbol.iterator]) // undefined console.log('abc'[Symbol.iterator]) // ƒ [Symbol.iterator]() { [native code] } console.log([][Symbol.iterator]) // ƒ values() { [native code] } </code></pre> <h2>五、自定义迭代器</h2> <p>普通对象，为什么不实现默认 Iterator 接口。主要是因为对象的属性是无序的，先遍历哪个属性，后遍历哪个属性是不确定的。若需要有序的对象结构，那不就 <code>Map</code> 对象嘛。因此，普通对象好像没必要默认部署迭代器接口了。</p> <p>尽管原生未部署 Iterator 接口，我们可以自定义啊，标准又没有限制我们不能自定义对吧。</p> <p>我们来定义一个 <code>Counter</code> 类，并实现 Iterator 接口。</p> <h3>1. 粗略版本</h3> <p>如下：</p> <pre><code class="language-js">class Counter { constructor([min = 0, max = 10]) { this.min = min this.max = max } // 实现迭代器协议 next() { const isDone = this.min > this.max return { done: isDone, value: isDone ? undefined : this.min++ } // 迭代器的 next() 方法，需要返回一个对象， // 对象包括 { done, value } 属性， // 其中 done 为 false，或 value 为 undefined 时，返回值可省略该属性。 // 这里返回 this（即实例对象），它的原型上实现了 next() 方法 } // 实现可迭代协议 [Symbol.iterator]() { return this // @@iterator 方法返回一个迭代器，它是一个对象。 // 不能返回类似 return 1 等无意义的值，否则进行迭代操作时会报错。 } } </code></pre> <p>以上 <code>Counter</code> 类实现了可迭代协议和迭代器协议，因此其实例对象就具备了 Iterator 接口，可使用 <code>for...of</code> 进行迭代。</p> <pre><code class="language-js">const counter = new Counter([0, 3]) // { min: 0, max: 3 } for (const x of counter) { console.log(x) } // 依次打印出：0、1、2、3 </code></pre> <p>尽管实现了 Iterator 接口，但不理想。原因是每个实例只能被迭代一次，而且实例的 <code>min</code> 属性值会发生变化。</p> <pre><code class="language-js">// 上一个代码块里面，counter 实例对象已迭代过一次 // 现在尝试再迭代一次，以下代码并不会打印出什么 for (const x of counter) { console.log(x) } // 原因很简单： // 当我们再次使用 for...of 之前，counter 实例已经变成：{ mix: 4, max: 3 } // 然后执行到 for...of 的时候，内部做了以下这些步骤： // 1) 首先创建一个迭代器，即访问实例的 @@iterator 方法， // 返回的迭代器就是 this，值为 { mix: 4, max: 3 }。 // 2) 接着循环，其实就是不停调用迭代器的 next() 方法，即 this.next() // 那么循环什么时候终止呢，那就是 done 为 true 时，表示遍历结束。 // 此时，第一次调用 next() 方法，返回值 done 就是为 true，即结束了。 // 因此，压根不会执行 for...of 的循环体，也就不会打印相关值了。 // // 可通过以下示例去验证： // for (const x of counter) { // console.log(x) // if (x === 1) break // } // 依次打印：0、1 // for (const x of counter) { // console.log(x) // } // 依次打印：2、3 </code></pre> <h3>2. 改进版本</h3> <p>鉴于以上原因，我们还需要改进一下。</p> <p>为了让一个实例对象能够创建多个迭代器，必须每创建一个迭代器就对应一个新计算器。因此，我们可以把计算器变量放到闭包里，然后通过闭包返回迭代器。</p> <pre><code class="language-js">class Counter { constructor([min = 0, max = 10]) { this.min = min this.max = max } [Symbol.iterator]() { let point = this.min const end = this.max return { next: () => { const isDone = point > end return { done: isDone, value: isDone ? undefined : point++ } } } } } const counter = new Counter([0, 3]) for (const x of counter) { console.log(x) } // 依次打印出：0、1、2、3 for (const x of counter) { console.log(x) } // 依次打印出：0、1、2、3 </code></pre> <p>以上这种改进写法，与数组迭代的表现是相似的。</p> <h3>3. 完善版本</h3> <p>但目前跟数组，还存在一点区别。例如：</p> <pre><code>// ✅ 数组可以这样使用 const arr = [0, 1, 2, 3] const iter = arr[Symbol.iterator]() for (const x of iter) { console.log(x) } // 依次打印：0、1、2、3 // ❌ 但是如果 Counter 这样去使用 const counter = new Counter([0, 3]) const iter = counter[Symbol.iterator]() // 当代码执行到 for...of 这行的时候，发现就会报错：TypeError: iter is not iterable for (const x of iter) { console.log(x) } // 原因分析： // 其实很简单，使用 for...of 的时候，内部会自动访问 iter[Symbol.iterator]， // 但 iter 是仅含有 next 属性（不计原型）的普通对象，并没有 Symbol.iterator 属性， // 因此判断 iter 不是一个可迭代对象，所以报错：TypeError: iter is not iterable </code></pre> <p>解决方法也很简单，只要我们给 <code>iter</code> 添加一个 <code>Symbol.iterator</code> 属性，并返回其本身即可。</p> <pre><code class="language-js">class Counter { constructor([min = 0, max = 10]) { this.min = min this.max = max } [Symbol.iterator]() { let point = this.min const end = this.max return { [Symbol.iterator]() { // 不能使用箭头函数，否则 this 指向就不对了 // 因此，我也把下面 next 方法，将原来的箭头函数改回普通函数 return this }, next() { const isDone = point > end return { done: isDone, value: isDone ? undefined : point++ } } } } } </code></pre> <p>再次执行，就可以了。</p> <pre><code class="language-js">const counter = new Counter([0, 3]) const iter = counter[Symbol.iterator]() for (const x of iter) { console.log(x) } // 依次打印出：0、1、2、3 </code></pre> <h3>4. 更完善版本</h3> <blockquote> <p>假设我们在 <code>for...of</code> 循环使用 <code>break</code>、<code>continue</code>、<code>return</code> 或 <code>throw</code> 提前退出，或者使用解构操作未消费所有值时，我们希望就此“关闭”迭代器（即 <code>done</code> 变为 <code>true</code>）。例如，生成器对象若提前退出，它的状态就会关闭。</p> </blockquote> <p><strong>怎么实现呢？</strong></p> <p>ECMAScript 标准为我们提供了一个“可选”的 <code>return()</code> 方法，它属于迭代器协议的一部分。</p> <p>由于 <code>return()</code> 方法是可选的，因此并非所有数据结构的默认迭代器都是可关闭的。比如，数组的迭代器就是不可关闭的。而生成器对象就是可关闭的。</p> <p>数组迭代器示例：</p> <pre><code class="language-js">const arr = [1, 2, 3, 4, 5] const iter = arr[Symbol.iterator]() for (const x of iter) { console.log(x) if (x > 3) break } // 依次打印：1、2、3 for (const x of iter) { console.log(x) } // 依次打印：4、5 // 需要注意的是： // `for (const x of arr) {}` 与 `for (const x of iter) {}` 是有区别的， // 前者每次调用，内部都会产生一个全新的迭代器，因此每次迭代，都会输出 0 ~ 5； // 而后者则同一个迭代器，因此再次迭代时，会接着遍历下一个成员。 // 所以，不用误以为数组的迭代器是“可关闭的”。 </code></pre> <p>生成器对象示例：</p> <pre><code class="language-js">function* generatorFn() { yield 0 yield 1 yield 2 yield 3 } // 生成器对象，也是一个迭代器。 const gen = generatorFn() // generatorFn {<suspended>} for (const x of gen) { console.log(x) if (x === 1) break } console.log(gen) // generatorFn {<closed>} // 迭代器“关闭”之后，再次去迭代的话就没意义了，它不会打印任何东西。 for (const x of gen) { // do something... } </code></pre> <p>其实 <code>return()</code> 的实现要求也很简单，它必须返回一个有效的 <code>IteratorResult</code> 对象。一般情况，可以只返回 <code>{ done: true }</code>。因为这个返回值只会用在生成器的上下文中。</p> <p>我们基于前面的 <code>Counter</code> 类，修改一下：</p> <pre><code class="language-js">class Counter { constructor([min = 0, max = 10]) { this.min = min this.max = max } [Symbol.iterator]() { let point = this.min const end = this.max let isDone return { [Symbol.iterator]() { return this }, next() { isDone = isDone || (point > end) return { done: isDone, value: isDone ? undefined : point++ } }, return() { console.log('Exiting early') isDone = true return { done: true } // 只会在“提前退出”才会触发此方法， // 正常遍历结束，是不会执行此方法的。 } } } } </code></pre> <p>上面除了实现了 <code>return()</code> 方法，且在触发 <code>return()</code> 方法时，迭代器也会“关闭”，只要将原先表示是否结束的 <code>isDone</code> 变量提到外面一层，利用闭包即可实现。</p> <p>以下为“提前退出”的情况，可以看到都触发了此方法。</p> <pre><code class="language-js">const counter = new Counter([0, 3]) for (const x of counter) { console.log(x) if ( x === 1 ) break // 或 throw 'xxx' 或 return 都行 } // 依次打印出：0、1、"Exiting early" const [a, b] = counter // "Exiting early" </code></pre> <p>利用迭代器实例的 <code>return</code> 属性，就可以判断一个可迭代对象是否具备可关闭的 Iterator 接口。但注意，我们不能给一个不可关闭的迭代器仅增加 <code>return()</code> 方法，使其变成可关闭的。除非自定义 Iterator 接口去覆盖原生的 <code>Symbol.iterator</code> 方法。</p> <h3>5. 最终版本</h3> <p>既然又要提前关闭，为什么不直接利用 Generator 函数呢，简单又快捷。</p> <pre><code class="language-js">class Counter { constructor([min = 0, max = 10]) { this.min = min this.max = max } *[Symbol.iterator]() { let point = this.min const end = this.max while (point <= end) { yield point++ } } } </code></pre> <p>一般情况下，Generator 函数是实现自定义迭代器的一种选择。它非常强大，语法上更为简练。但如果要实现类似数组默认迭代器那样的话，就不能用它了。</p> <blockquote> <p>若对 Generator 函数不太熟悉，可看这篇<a href="https://github.com/tofrankie/blog/issues/258">文章</a>。</p> </blockquote> <h2>六、Iterator 应用场景</h2> <p>无论是默认的迭代器接口，还是自定义迭代器接口，它们主要供以语法或方法消费。目前有以下这些方法：</p> <ul> <li><code>for...of</code> 循环</li> <li>数组解构</li> <li>扩展运算符</li> <li><code>Array.from()</code></li> <li><code>new Set()</code></li> <li><code>new Map()</code></li> <li><code>Promise.all()</code></li> <li><code>Promise.race()</code></li> <li><code>Promise.allSettled()</code></li> <li><code>Promise.any()</code></li> <li><code>yield*</code> 操作符</li> </ul> <p>这些语法（方法）内部都会去访问（可迭代）对象的 <code>@@iterator</code> 方法，或叫作 <code>Symbol.iterator</code> 方法。</p> <p>The end.</p>  </article> <article> <h1>细读 ES6 | Promise 下篇</h1> <p>Sun, 26 Feb 2023 11:52:31 GMT</p> <p></p> <p>接<a href="https://github.com/tofrankie/blog/issues/255">上一篇</a>，继续介绍了 Promise 相关 API。</p> <h2>一、Promise.resolve()</h2> <p><code>Promise.resolve()</code> 方法的作用就是将某个值（非 <code>Promise</code> 对象实例）转换为 <code>Promise</code> 对象实例。</p> <pre><code class="language-js">const promise = Promise.resolve('foo') // 相当于 const promise = new Promise(resolve => resolve('foo')) </code></pre> <blockquote> <p>需要注意的是，它仍然会遵循 Event Loop 机制，包括后面介绍的其他 API。具体执行顺序本文不展开讨论。</p> </blockquote> <p><code>Promise.resolve()</code> 方法的参数分为四种情况：</p> <h3>1. 不带任何参数</h3> <p>它返回一个状态为 <code>fulfilled</code>，值为 <code>undefined</code> 的 <code>Promise</code> 实例对象。</p> <pre><code class="language-js">const promise = Promise.resolve() // promise 结果： // { // [[Prototype]]: Promise, // [[PromiseState]]: "fulfilled", // [[PromiseResult]]: undefined // } </code></pre> <h3>2. 参数是一个 Promise 实例对象</h3> <p>这时，<code>Promise.resolve()</code> 将会不做任何修改、原封不动地返回该实例。</p> <p>请注意，即使参数是一个 <code>rejected</code> 状态的 <code>Promise</code> 实例，返回的实例也不会变成 <code>fulfilled</code> 状态，不要被这个 <code>resolve</code> 字面意思误解了。</p> <pre><code class="language-js">const p1 = new Promise(resolve => resolve({ name: 'Frankie' })) // "fulfilled" const p2 = new Promise((resolve, reject) => reject({ name: 'Frankie' })) // "rejected" const p3 = Promise.resolve(p1) const p4 = Promise.resolve(p2) console.log(p1 === p3) // true console.log(p2 === p4) // true // p3 结果： // { // [[Prototype]]: Promise, // [[PromiseState]]: "fulfilled", // [[PromiseResult]]: { name: 'Frankie' } // } // p4 结果： // { // [[Prototype]]: Promise, // [[PromiseState]]: "rejected", // [[PromiseResult]]: { name: 'Frankie' } // } </code></pre> <p>其实这种情况，就是<a href="https://github.com/tofrankie/blog/issues/255">上一篇</a>提到过的。</p> <pre><code class="language-js">const p5 = new Promise(resolve => resovle(1)) const p6 = new Promise(resolve => { reslove(p5) // 注意，不要尝试在此处调用 Promise.resolve()，会导致无限递归。 }) </code></pre> <p>上面示例中，<code>p6</code> 的状态取决于 <code>p5</code> 的状态。</p> <h3>3. 参数是一个 thenable 对象</h3> <p><code>thenable</code> 对象，是指具有 <code>then</code> 方法的对象。例如：</p> <pre><code class="language-js">const obj = { then: function(resolve, reject) { resolve('foo') } } </code></pre> <p>上面示例中，<code>obj</code> 对象就是一个 <code>thenable</code> 对象。<code>Promise.resolve()</code> 方法会将这个 <code>thenable</code> 对象转为 <code>Promise</code> 对象，然后就立即执行 <code>thenable</code> 对象的 <code>then()</code> 方法。</p> <pre><code class="language-js">const obj = { then: function (resolve, reject) { console.log(2) resolve('foo') // reject('foo') // 如果是这样，最终 promise 对象将会变成了 rejected 状态。 } } const promise = Promise.resolve(obj) promise.then(res => { console.log(3) console.log(res) // "foo" }) console.log(1) // 打印结果分别是 1、2、3、"foo" // promise 结果： // { // [[Prototype]]: Promise, // [[PromiseState]]: "fulfilled", // [[PromiseResult]]: "foo" // } </code></pre> <p>上述示例中，<code>obj</code> 对象的 <code>then()</code> 方法执行后，对象 <code>promise</code> 的状态变成了 <code>fulfilled</code>，接着执行最后的那个 <code>promise.then()</code> 方法，打印出 <code>"foo"</code>。</p> <h3>4. 参数是一个不具有 then() 方法的对象，或者压根不是一个对象，而是原始值。</h3> <p>如果是这种情况，<code>Promise.resolve()</code> 方法返回一个新的 <code>Promise</code> 对象，状态为 <code>fulfilled</code>，且该实例对象的值，就是该参数值。</p> <pre><code class="language-js">const p1 = Promise.resolve('foo') const p2 = Promise.resolve({}) // p1 结果： // { // [[Prototype]]: Promise, // [[PromiseState]]: "fulfilled", // [[PromiseResult]]: "foo" // } // p2 结果： // { // [[Prototype]]: Promise, // [[PromiseState]]: "fulfilled", // [[PromiseResult]]: {} // } </code></pre> <p>在实际项目中，一般是第 4 种情况居多，我似乎真的没见过前三种情况的。</p> <h2>二、Promise.reject()</h2> <p><code>Promise.reject()</code> 方法会返回一个新的 <code>Promise</code> 实例对象，该实例的状态总是为 <code>rejected</code>。</p> <pre><code class="language-js">const promise = Promise.reject('foo') // 相当于 const promise = new Promise((resolve, reject) => reject('foo')) </code></pre> <p>跟 <code>Promise.resolve()</code> 不同的是，<code>Promise.reject()</code> 方法的参数（无论是原始值、普通对象、还是 <code>Promise</code> 实例对象），将会原封不动地作为返回实例对象的值。</p> <pre><code class="language-js">Promise.reject('Oops').catch(err => { console.log(err === 'Oops') // true // do something... }) </code></pre> <h2>三、Promise.all()</h2> <p><code>Promise.all()</code> 方法用于将多个 <code>Promise</code> 实例，包装成一个新的 <code>Promise</code> 实例。</p> <pre><code class="language-js">const promise = Promise.all([p1, p2, p3]) </code></pre> <p>上面代码中，<code>Promise.all()</code> 方法接受一个数组作为参数，其中 <code>p1</code>、<code>p2</code>、<code>p3</code> 都是 <code>Promise</code> 实例。如果数组中包含非 <code>Promise</code> 实例，它们会使用 <code>Promise.resolve()</code> 的方法，将参数转为 <code>Promise</code> 实例，再进一步处理。另外，<code>Promise.all()</code> 方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 <code>Promise</code> 实例。</p> <p>其中 <code>promise</code> 的状态由 <code>p1</code>、<code>p2</code>、<code>p3</code> 决定，分为两种情况。</p> <ul> <li> <p>只有当 <code>p1</code>、<code>p2</code>、<code>p3</code> 的状态都变成 <code>fulfilled</code>，<code>promise</code> 的状态才会变成 <code>fulfilled</code>，此时 <code>p1</code>、<code>p2</code>、<code>p3</code> 实例的值，会组成一个数组，并传递给 <code>promise</code>。</p> </li> <li> <p>只要 <code>p1</code>、<code>p2</code>、<code>p3</code> 之中有一个被 <code>rejected</code>，<code>promise</code> 的状态就会变成 <code>rejected</code>。此时第一个 <code>rejected</code> 实例的值（注意，不会像上面一样组成数组哦），会传递给 <code>promise</code>。</p> </li> </ul> <p>看个例子：</p> <pre><code class="language-js">const userIds = [1, 3, 5] const promiseArr = userIds.map(id => { return window.fetch(`/config/user/${id}`) // 假设是请求用户配置 }) Promise .all(promiseArr) .then(res => { // res 是一个数组，每一项对应每个实例的值，即 [[PromiseResult]] // 常见做法是将 res 进行解构，即 Promise.all(promiseArr).then(([a, b, c]) => { /* do something... */ }) // 假设 promiseArr 是一个空的可迭代对象，例如空数组，Promise.all([]) 实例状态为 fulfilled，值为 []。 // do something... }) .catch(err => { // err 为 Promise.all() 被 rejected 的原因（reason） }) </code></pre> <p>上面的示例中，<code>promiseArr</code> 是包含 3 个 <code>Promise</code> 实例的数组，只有这 3 个实例的状态都变成 <code>fulfilled</code>，或其中一个变为 <code>rejected</code>，才会调用 <code>Promise.all()</code> 方法的回调函数。</p> <h2>四、Promise.race()</h2> <p><code>Promise.race()</code> 方法同样是将多个 <code>Promise</code> 实例，包装成一个新的 <code>Promise</code> 实例。</p> <pre><code class="language-js">const promise = Promise.race([p1, p2, p3]) </code></pre> <p><code>Promise.race()</code> 方法同样接受一个可迭代对象，只要 <code>p1</code>、<code>p2</code>、<code>p3</code> 中有一个实例率先改变状态（<code>fulfiled</code> 或 <code>rejected</code>），<code>promise</code> 的状态就会跟着改变，而且 <code>promise</code> 实例的值就是率先改变的实例的返回值。若可迭代对象中的某一项不是 <code>Promise</code> 实例，仍会使用 <code>Promise.resolve()</code> 进行转换。</p> <p>当传递一个空的可迭代对象，那么 <code>Promise.race()</code> 实例的状态将会一直停留在 <code>pending</code>。这点跟 <code>Promise.all()</code> 是不同的。</p> <pre><code class="language-js">const p1 = Promise.all([]) const p2 = Promise.race([]) setTimeout(() => { console.log(p1) // Promise {<fulfilled>: Array(0)} console.log(p2) // Promise {<pending>} }) </code></pre> <h2>五、Promise.allSettled()</h2> <p><code>Promise.allSettled()</code> 是 ES11 标准引入的一个方法，同样还是将多个 <code>Promise</code> 实例包装成一个新的 <code>Promise</code> 实例。只有等所有实例都返回结果（无论是 <code>fulfilled</code> 还 <code>rejected</code>），包装实例的状态才会发生变化。</p> <p>我认为，这算是对 <code>Promise.all()</code> 存在 <code>rejected</code> 实例情况的一种补全吧。</p> <blockquote> <p>注意，<code>Promise.allSettled()</code> 的状态，只可能是 <code>pending</code> 或 <code>fulfilled</code> 状态，不可能存在 <code>rejected</code> 状态。即只会从 <code>pending -> fulfilled</code> 的变化。</p> </blockquote> <p>我们来看看以下示例，各种情况的结果吧：</p> <pre><code class="language-js">const p1 = Promise.reject(1) const p2 = Promise.resolve(2) const p3 = new Promise((resolve, reject) => { setTimeout(() => { reject(3) }, 1000) }) const p4 = new Promise(() => { }) // p4 状态将会一直停留在 pending const p5 = Promise.allSettled([]) // 参数为空迭代对象 const p6 = Promise.allSettled([p4]) const p7 = Promise.allSettled([p1, p2, p3]) setTimeout(() => { console.log('p1:', p1) console.log('p2:', p2) console.log('p3:', p3) console.log('p4:', p4) console.log('p5:', p5) console.log('p6:', p6) console.log('p7:', p7) p5.then(res => { console.log('p5 then:', res) }) p6.then(res => { // 这里将不会执行，因为 p6 一直处于 pending 状态 console.log('p6 then:', res) }) p7.then(res => { console.log('p7 then:', res) }) }, 2000) </code></pre> <p></p> <p><strong>列举以上示例，是为了得出以下结论：</strong></p> <ul> <li> <p><code>Promise.allSettled()</code> 一定要等到参数中每一个 <code>Promise</code> 状态定型后，它返回的实例对象才会定型为 <code>fulfilled</code> 状态。否则只会是 <code>pending</code> 状态。</p> </li> <li> <p>类似 <code>Promise.allSettled([])</code> 把一个空数组（空的迭代对象）作为参数，最后实例的状态为 <code>fulfilled</code>，且实例的值为空数组 <code>[]</code>。</p> </li> <li> <p>注意 <code>Promise.allSettled()</code> 返回的实例的值，首先它是一个数组，而数组每项都是一个对象，该对象的属性取决于对应参数 <code>Promise</code> 实例的状态。</p> <p>例如 <code>p1</code> 的状态为 <code>rejected</code>，<code>p2</code> 的状态为 <code>fulfilled</code>。因此包装实例的前两项的对象分别为 <code>{ status: "rejected", reason: 1 }</code>、<code>{ status: "fulfilled", value: 2 }</code>，其他项同理。其中 <code>status</code> 属性只会是 <code>fulfilled</code> 或 <code>rejected</code> 两个字符串值。主要区别在于 <code>value</code> 属性和 <code>reason</code> 属性，即 <code>fulfilled</code> 状态对应 <code>value</code> 属性，而 <code>rejected</code> 状态对应 <code>reason</code> 属性。</p> </li> </ul> <p>有时候，我们不关心异步操作的结果，只关心这些操作有没有结束。这时，使用 <code>Promise.allSettled()</code> 方法就很有用了。而 <code>Promise.all()</code> 是没办法确保这一点的。</p> <h2>六、Promise.any()</h2> <p>在 ES12 标准中，引入了 <code>Promise.any()</code> 方法，它用于将多个 <code>Promise</code> 实例，包装成一个新的 <code>Promise</code> 实例。</p> <p><code>Promise.any()</code> 接受一个 <code>Promise</code> 可迭代对象，只要参数实例中有一个变成 <code>fulfilled</code> 状态，包装实例就会变成 <code>fulfilled</code> 状态，其值就是参数实例的值。</p> <p><code>Promise.any()</code> 与 <code>Promise.race()</code> 很像，只有一个不同点，就是 <code>Promise.any()</code> 不会因为某个参数 <code>Promise</code> 实例变成 <code>rejected</code> 状态而接受，必须要等到所有参数实例的状态都变为 <code>rejected</code>，包装实例的状态才会是 <code>rejected</code>。</p> <pre><code class="language-js">const p1 = Promise.reject(1) const p2 = Promise.resolve(2) const p3 = new Promise((resolve, reject) => { setTimeout(() => { reject(3) }, 1000) }) const p4 = new Promise(() => { }) // p4 状态将会一直停留在 pending const p5 = Promise.any([]) // p5 会变成 rejected 状态 const p6 = Promise.any([p4]) const p7 = Promise.any([p1, p2, p3]) const p8 = Promise.any([p1, p3]) setTimeout(() => { console.log('p1:', p1) console.log('p2:', p2) console.log('p3:', p3) console.log('p4:', p4) console.log('p5:', p5) console.log('p6:', p6) console.log('p7:', p7) p5.then(res => { console.log('p5 then:', res) }).catch(err => { // p5 的状态会变成 rejected，因此会执行到这里。 console.log('p5 catch:', err) }) p6.then(res => { // p6 的状态一直会是 pending，因此不会执行回调。 console.log('p6 then:', res) }) p7.then(res => { console.log('p7 then:', res) }) p8.then(res => { console.log('p8 then:', res) }).catch(err => { // 注意 err 是一个对象 console.log('p8 catch:', err) console.dir(err) }) }, 2000) </code></pre> <p></p> <p>当 <code>Promise.any()</code> 返回的实例变成 <code>rejected</code> 时，其实例的值是 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/AggregateError">AggregateError</a> 实例。但传递一个空的迭代对象，<code>Promise.any()</code> 包装实例也会变成 <code>rejected</code> 状态，如 <code>p5</code>。</p> <h2>七、总结</h2> <p>关于 <code>Promise.all()</code>、<code>Promise.race()</code>、<code>Promise.allSettled()</code>、<code>Promise.any()</code> 方法，总结以下特点。</p> <ul> <li> <p>它们的用处都是将多个 <code>Promise</code> 实例，包装成一个新的 <code>Promise</code> 实例。</p> </li> <li> <p>它们都接受一个具有 Iterator 接口的可迭代对象，通常为数组。且会返回一个新的 <code>Promise</code> 实例对象。</p> </li> <li> <p>它们处理参数为空的可迭代对象的方式不一样，本来就是要处理多个 <code>Promise</code> 对象，才会用到它们，所以这种情况无需理会。真遇到再回来翻阅文档即可，现在我写到这里都记不太清楚其中的区别了，但问题不大。</p> </li> <li> <p><code>Promise.all()</code> 当所有实例均为 <code>fulfilled</code> 状态，最终的包装实例才会是 <code>fulfilled</code>，其值是一个数组。否则将会是 <code>rejected</code> 状态；</p> </li> <li> <p><code>Promise.race()</code> 则是某个实例的状态发生变化，最终包装实例将对应率先变化实例所对应的值和状态。“发生变化”是指 <code>pending -> fulfilled</code> 或 <code>pending -> rejected</code>。</p> </li> <li> <p><code>Promise.allSettled()</code> 单从命名上来猜测，就知道它需要等所有参数实例确定状态后，包装实例的状态才会变成 <code>fulfilled</code> 状态，注意它不存在 <code>rejected</code> 状态的情况。包装实例的返回值是一个数组，数组每项可能是 <code>{ status: "fulfilled", value: /* 对应 fulfilled 的值 */ }</code> 或 <code>{ status: "rejected", reason: /* 对应 rejected 的原因 */ }</code>，取决于每个参数实例的状态。</p> </li> <li> <p><code>Promise.any()</code> 当某个参数实例的状态变为 <code>fulfilled</code>，那么包装实例就定型了，对应该参数实例的状态和值。否则它必须等到所有参数实例变为 <code>rejected</code> 状态，包装实例的状态才会发生改变，变为 <code>rejected</code>，其值是一个 <code>AggregateError</code> 实例。</p> </li> </ul> </article> <article> <h1>细读 ES6 | Promise 上篇</h1> <p>Sun, 26 Feb 2023 11:52:17 GMT</p> <p></p> <p>我认为 Promise 应该算是 ES6 标准最大的亮点，它提供了异步编程的一种解决方案。比传统的回调函数和事件解决方案，它更合理、更强大。</p> <h2>一、简介</h2> <p>Promise 是一个容器，里面保存着某个未来才会结束的事件（一般为异步操作）的结果。从语法上来说，<code>Promise</code> 是一个对象，它可以获取异步操作的消息。</p> <p><strong><code>Promise</code> 对象的特点：</strong></p> <ul> <li> <p><code>Promise</code> 对象有且只有三种状态：<code>pending</code>、<code>fulfilled</code>、<code>rejected</code>，分别表示进行中、已成功、已失败。</p> </li> <li> <p>一旦状态发生改变，就不会再变。状态的改变只有两种可能：<code>pending -> fulfilled</code> 或 <code>pending -> rejected</code>。若发生了其中一种情况，状态就会一直保存这个结果，这时就成为 <code>resolved</code>（已定型）。</p> </li> </ul> <p>这种以“同步的方式”去表达异步流程，可以避免层层嵌套的回调函数，避免出现“回调地狱”（Callback Hell）。</p> <blockquote> <p>BTW，网上有些文章把 <code>fulfilled</code> 状态，叫成 <code>resolved</code>，尽管我们可能知道他想表达的意思，但其实是不对的。</p> </blockquote> <p><strong><code>Promise</code> 对象的缺点：</strong></p> <p>一是无法取消 <code>Promise</code>，一旦创建它就会立即执行，无法中途取消；二是若不设置回调函数情况下，<code>Promise</code> 内部抛出错误，不会反馈到外部；三是当处于 <code>pending</code> 状态，无法得知目前进展到哪个阶段。</p> <h2>二、Promise 用法</h2> <p>根据规定，<code>Promise</code> 是一个构造函数，用来生成 <code>Promise</code> 实例对象。</p> <h3>1. 创建 Promise 对象</h3> <p>示例：</p> <pre><code class="language-js">const handler = (resolve, reject) => { // some statements... // 根据异步操作的结果，通过 resolve 或 reject 函数去改变 Promise 对象的状态 if (true) { // pending -> fulfilled resolve(...) } else { // pending -> rejected reject(...) } // 需要注意的是： // 1. 在上面 Promise 状态已经定型（fulfilled 或 rejected）， // 因此，我们再使用 resolve() 或 reject() 或主动/被动抛出错误的方式， // 试图再次修改状态，是没用的，状态不会再发生改变。 // 2. 当 Promise 对象的状态“已定型”后，若未使用 return 终止代码往下执行， // 后面代码出现的错误（主动抛出或语法错误等），在外部都不可见，无法捕获到。 // 3. hander 函数的返回值是没意义的。怎么理解？ // 假设内部不包括 resolve() 或 reject() 或内部不出现语法错误， // 或不主动抛出错误，仅有类似 `return 'anything'` 语句， // 那么 promise 对象永远都是 pending 状态。 } const promise = new Promise(handler) </code></pre> <p><code>Promie</code> 构造函数接受一个函数作为参数，该函数的两个参数分别是 <code>resolve</code> 和 <code>reject</code>。而 <code>resolve</code> 和 <code>rejeact</code> 也是函数，其作用是改变 <code>Promise</code> 对象的状态，分别是 <code>pending -> fulfilled</code> 和 <code>pending -> rejected</code>。</p> <p>假设构造函数内不指定 <code>resolve</code> 或 <code>reject</code> 函数，那么 <code>Promise</code> 的对象会一直保持着 <code>pending</code> 待定的状态。</p> <h3>2. Promise 实例</h3> <p><code>Promise</code> 实例生成以后，当 <code>Promise</code> 内部状态发生变化，可以使用 <code>Promise.prototype.then()</code> 方法获取到。</p> <pre><code class="language-js">const success = res => { // 当状态从 pending 到 fulfilled 时，执行此函数 // some statements... } const fail = err => { // 当状态从 pending 到 rejected 时，执行此函数 // some statements... } promise.then(success, fail) </code></pre> <p><code>then()</code> 方法接受两个回调函数作为参数，第一个回调函数在 <code>Promise</code> 对象状态变为 <code>fulfilled</code> 时被调用。第二回调函数在状态变为 <code>rejected</code> 时被调用。<code>then()</code> 方法的两个参数都是可选的。</p> <blockquote> <p>注意，由于 <code>Promise</code> 实例对象的 <code>Promise.prototype.then()</code>、<code>Promise.prototype.catch()</code>、<code>Promise.prototype.finally()</code> 方法属于异步任务中的微任务。注意它们的执行时机，会在当前同步任务执行完之后，且在下一次宏任务执行之前，被执行。</p> <p>还有，<code>Promise</code> 构造函数（即上述示例的 <code>handler</code> 函数）内部，仍属于同步任务，而非异步任务。</p> <p>所以，那个经典的面试题就是，包括 <code>setTimeout</code>、<code>Promise</code> 等，然后问输出顺序是什么？本质就是考察 JavaScript 的事件循环机制（Event Loop）嘛。可以看下这篇文章：<a href="https://github.com/tofrankie/blog/issues/348">通过两个例子再探 Event Loop</a>。</p> </blockquote> <p>插了个话题，回来</p> <p><code>then()</code> 方法的两个参数 <code>success()</code>、<code>fail()</code>，它们接收的实参就是传递给 <code>resolve()</code> 和 <code>reject()</code> 的值。</p> <p>例如：</p> <pre><code class="language-js">function timeout(delay, status = true) { const promise = new Promise((resolve, reject) => { setTimeout(() => { // 一般 reject 应返回一个 Error 实例对象，如：new Error('Oops') status ? resolve('Success') : reject('Oops') }) }, delay) return promise } // 创建两个 Promise 实例对象 const p1 = timeout(1000) const p2 = timeout(1000, false) // pending -> fulfilled p1.then(res => { console.log(res) // "Success" }) // pending -> rejected p2.then(null, err => { console.warn(err) // "Oops" }) </code></pre> <p>上面示例中，根据 <code>timeout</code> 函数的逻辑，<code>p1</code> 实例的 <code>Promise</code> 状态会从 <code>pending -> fulfilled</code>，而 <code>p2</code> 实例则是从 <code>pending -> rejected</code>。因此会分别打印出 <code>"Success"</code>、<code>"Oops"</code>。</p> <p>例如，异步加载图片的例子。</p> <pre><code class="language-js">function loadImage(url) { return new Promise((resolve, reject) => { const image = new Image() image.onload = function () { resolve(image) } image.onerror = function () { reject(new Error(`Could not load image at ${url}.`)) } image.src = url }) } loadImage('https://jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery@2x.png') .then( res => { console.log('Image loaded successfully:', res) }, err => { console.warn(err) } ) </code></pre> <p>因此，<code>Promise</code> 的用法还是很简单的，是预期结果的话，使用 <code>resolve()</code> 修改状态为 <code>fulfilled</code>，非预期结果使用 <code>reject()</code> 修改状态为 <code>rejected</code>。具体返回值根据实际场景返回就好。</p> <h3>3. Promise 注意事项</h3> <p>在构建 <code>Promise</code> 对象的内部，使用 <code>resolve()</code> 或 <code>reject()</code> 去改变 <code>Promise</code> 的状态，并不会终止 <code>resolve</code> 或 <code>reject</code> 后面代码的执行。</p> <p>例如：</p> <pre><code class="language-js">const promise = new Promise((resolve, reject) => { resolve(1) // 以下代码仍会执行，且会在 then 之前执行。 // reject() 同理。 console.log(2) }) promise.then(res => { console.log(res) }) // 先后打印出 2、1 </code></pre> <p>若要终止后面的执行，只要使用 <code>return</code> 关键字即可，类似 <code>return resolve(1)</code> 或 <code>return reject(1)</code>。但如果这样，其实后面的代码就没意义，因此也就没必要写了。千万别在工作中写出这样的代码，我怕你被打。这里只是为了说明 <code>resolve</code> 或 <code>reject</code> 不会终止后面的代码执行而已。</p> <blockquote> <p>一般来说，调用 <code>resolve()</code> 或 <code>reject()</code> 说明异步操作有了结果，那么 <code>Promise</code> 的使命就完成了，后续的操作应该是放到 <code>then()</code> 方法里面，而不是放在 <code>resolve()</code> 或 <code>reject()</code> 后面。</p> </blockquote> <p>在前面的示例中，<code>resolve()</code> 或 <code>reject()</code> 都是返回一个“普通值”。<strong>如果我们返回一个 <code>Promise</code> 对象，会怎样呢？</strong></p> <p>首先，它是允许返回一个 <code>Promise</code> 对象的，但是有些区别。</p> <pre><code class="language-js">const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p1 success') // reject('p1 fail') }, 3000) }) const p2 = new Promise((resolve, reject) => { // 这时返回一个 Promise 对象 // ⚠️ 注意，这里 resolve(p1) 或 reject(p1) 执行的逻辑会有所不同。 resolve(p1) // reject(p1) }) p2.then( res => { console.log('p2 then:', res) }, err => { console.log('p2 catch:', err) } ) </code></pre> <p>分析如下：</p> <pre><code class="language-md">1. 若 p2 内里面 `resolve(p1)` 时：当代码执行到 `resolve(p1)` 时，由于 p1 的状态仍是 pending，这时 p1 的状态会传递给 p2，也就是说 p1 的状态决定了 p2 的状态，因此 `p2.then()` 需要等 p1 的状态发生变化，才会被调用，且 `p2.then()` 获取到的状态就是 p1 的状态假设代码执行到 `resolve(p1)` 时，若 p1 的状态已定型，即 fulfilled 或 rejected，会立即调用 `p2.then()` 方法。 PS：这里“立即”是指，当前同步任务已执行完毕的前提下。第 2 点也是如此。 2. 若 p2 内是 `reject(p1)` 时，情况会有所不同：当代码执行到 `reject(p1)` 时，由于 p2 的状态会变更为 rejected，接着会立即调用 `p2.then()` 方法，由于是 rejected 状态，因此，会触发 `p2.then()` 的第二个参数，此时 err 的值就是 p1（一个 Promise 对象）。假设 p1 的状态最终变成了 rejected，那么 err 还要捕获异常，例如 `err.catch(err => { /* do something... */ })`，否则的话，在控制台会报错，类似："Uncaught (in promise) p1 fail"，原因就是 Promise 对象的 rejected 状态未处理，导致的。假设 p1 的状态最终变成 fulfilled，那么不需要做上一步类似的处理。 </code></pre> <p>上面两种情况，其实相当于 <code>Promise.resolve(p1)</code>、<code>Promise.reject(p1)</code>。我们来打印一下两种结果：</p> <p>当 <code>p1</code> 状态为 <code>fulfilled</code> 时，<code>p2</code> 状态如图：</p> <p></p> <p>当 <code>p1</code> 状态为 <code>rejected</code> 时，<code>p2</code> 状态如图：</p> <p></p> <h2>三、Promise.prototype.then()</h2> <p><code>Promise</code> 的实例具有 <code>then()</code> 方法，它是定义在原型对象 <code>Promise.prototype</code> 上的。当 <code>Promise</code> 实例对象的状态发生变化，此方法就会被触发调用。</p> <p>前面提到 <code>Promise.prototype.then()</code> 接受两个参数，两者均可选，这里不再赘述。</p> <p><code>then()</code> 方法返回一个新的 <code>Promise</code> 实例对象（注意，不是原来那个 <code>Promise</code> 实例），也因此可以采用链式写法，即 <code>then()</code> 方法后面可以再调用另一个 <code>then()</code> 方法。</p> <p>例如，以下示例使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API">Fetch API</a> 进行网络请求：</p> <pre><code class="language-js">window.fetch('/config') .then(response => response.json()) .then( res => { // do something... }, err => { // do something... } ) // .then() // ... </code></pre> <p>以上链式调用，会按照顺序调用回调函数，后一个 <code>then()</code> 的执行，需等到前一个 <code>Promise</code> 对象的状态定型。</p> <h2>四、Promise.prototype.catch()</h2> <p><code>Promise.prototype.catch()</code> 方法是 <code>then(null, rejection)</code> 或 <code>then(undefined, rejection)</code> 的别名，用于指定发生错误时的回调函数。</p> <p>同样地，它会返回一个新的 <code>Promise</code> 实例对象。</p> <pre><code class="language-js">const promise = new Promise((resolve, reject) => { reject('Oops') // 或通过 throw 方式主动抛出错误，使其变成 rejected 状态 // 但注意的是，前面状态“定型”之后，状态是不会再变的。 // 这后面试图改变状态，或主动抛出错误，或出现其他语法错误， // 不会被外部捕获到，即无意义。 }) promise.catch(err => { console.log(err) // "Oops" }) // 相当于 promise.then( null, err => { console.log(err) // "Oops" } ) </code></pre> <p>通过 <code>throw</code> 等方式使其变成 <code>rejected</code> 状态，相当于：</p> <pre><code class="language-js">const promise = new Promise((resolve, reject) => { try { throw 'Oops' // 一般地，是抛出一个 Error（或派生）实例对象，如 throw new Error('Oops') } catch (e) { reject(e) } }) </code></pre> <h2>五、捕获 rejected 状态的两种方式比较</h2> <p>前面提到有两种方式，可以捕获 <code>Promise</code> 对象的 <code>rejected</code> 状态。那么孰优孰劣呢？</p> <p>建议如下：</p> <blockquote> <p>尽量不要在 <code>Promise.prototype.then()</code> 方法里面定义 <code>onRejection</code> 回调函数（即 <code>then()</code> 的第二个参数），总使用 <code>Promise.prototype.catch()</code> 方法。</p> </blockquote> <pre><code class="language-js">const promise = new Promise((resolve, reject) => { // some statements }) // bad promise.then( res => { /* some statements */ }, err => { /* some statements */ } ) // good promise .then(res => { /* some statements */ }) .catch(err => { /* some statements */ }) </code></pre> <p>上面示例中，第二种写法要好于第一种写法。理由是第二种写法可以捕获前面 <code>then()</code> 方法中的异常或错误，也更接近同步写法（<code>try...catch</code>）。因此，建议总是使用 <code>Promise.prototype.catch()</code> 方法。</p> <p>与传统的 <code>try...catch</code> 代码块不同的是，即使 Promise 内部出现错误，也不会影响 Promise 外部代码的执行。</p> <pre><code class="language-js">const promise = new Promise((resolve, reject) => { say() // 这行会报错：ReferenceError: say is not defined }) promise.then(res => { /* some statements */ }) setTimeout(() => { console.log(promise) // 这里仍会执行，打印出 promise 实例对象 }) </code></pre> <p></p> <p>上面的示例中，在 Promise 内部就会发生引用错误，因为 <code>say</code> 函数并没有定义，但并未终止脚本的执行。接着还会输出 <code>promise</code> 对象。也就是说，Promise 内部的错误并不会影响到 Promise 外部代码，通俗的说法就是“Promise 会吃掉错误”。</p> <p>但是，如果脚本放在服务器上执行，退出码就是 <code>0</code>（表示执行成功）。不过 Node.js 有一个 <code>unhandledRejection</code> 事件，它专门监听未捕获的 <code>reject</code> 错误，脚本会触发这个事件的监听函数，可以在监听函数里面抛出错误。如下：</p> <p></p> <p>注意，Node.js 有计划在未来废除 <code>unhandledRejection</code> 事件。如果 Promise 内部由未捕获的错误，会直接终止进程，并且进程的退出码不为 <code>0</code>。</p> <p>在 <code>catch()</code> 方法中，也可以抛出错误。而且由于 <code>then()</code> 和 <code>catch()</code> 方法均返回一个新的 <code>Promise</code> 实例对象，因此可以采用链式写法，写出一系列的...</p> <pre><code>const promise = new Promise((resolve, reject) => { reject('Oops') }) promise .then(res => { /* some statements */ }) .catch(err => { throw new Error('Oh...') }) .catch(err => { /* 这里可以捕获上一个 rejected 状态 */ }) // ... 还可以写一系列的 then、catch 方法 </code></pre> <h2>六、Promise.prototype.finally()</h2> <p>在 ES9 标准中，引入了 <code>Promise.prototype.finally()</code> 方法，用于指定 <code>Promise</code> 对象状态发生改变（不管 <code>fulfilled</code> 还是 <code>rejected</code>）后，都会触发此方法。</p> <pre><code class="language-js">const promise = new Promise((resolve, reject) => { // some statements }) promise .then(res => { /* some statements */ }) .catch(err => { /* some statements */ }) .finally(() => { // do something... // 注意，finally 不接受任何参数，自然也无法得知 Promise 对象的状态。 }) </code></pre> <blockquote> <p>若 Promise 内部不写任何 <code>resovle()</code>、或 <code>rejected()</code>、或无任何语法错误（如上述示例），<code>Promise</code> 实例对象的状态并不会发生变化，即一直都是 <code>pending</code> 状态，它都不会触发 <code>then()</code>、<code>catch()</code>、<code>finally()</code> 方法。这点就怕有人会误解，状态不发生变化时也会触发 <code>finally()</code> 方法，这是错的。</p> </blockquote> <p><code>Promise.prototype.finally()</code> 也是返回一个新的 <code>Promise</code> 实例对象，而且该实例对象的值，就是前面一个 <code>Promise</code> 实例对象的值。</p> <pre><code class="language-js">const p1 = new Promise(resolve => resolve(1)) const p2 = p1.then().finally() const p3 = p1.then(() => { }).finally() const p4 = p1.then(() => { return true }).finally() const p5 = p1.then(() => { throw 'Oops' /* 当然这里没处理 rejected 状态 */ }).finally() const p6 = p1.then(() => { throw 'Oh...' }).catch(err => { return 'abc' }).finally() const p7 = p1.finally(() => { return 'finally' }) const p8 = p1.finally(() => { throw 'error' }) setTimeout(() => { console.log('p1:', p1) console.log('p2:', p2) console.log('p3:', p3) console.log('p4:', p4) console.log('p5:', p5) console.log('p6:', p6) console.log('p7:', p7) console.log('p8:', p8) }) // 解释一下 `p1` 和 `p1.then()`： // 当 `then()` 方法中不写回调函数时，会发生值的穿透， // 即 `p1.then()` 返回的新实例对象（假设为 `x`）的值跟 p1 实例的值是一样的， // 但注意 `p1` 和 `x` 是两个不同的 Promise 实例对象。 // 关于值穿透的问题，后面会给出示例。 </code></pre> <p></p> <p>根据打印结果可以验证： <code>finally()</code> 方法返回的 <code>Promise</code> 实例对象的值与前一个 <code>Promise</code> 实例对象的值是相等的，但尽管如此，两者是两个不同的 <code>Promise</code> 实例对象。可以打印一下 <code>p1 === p7</code>，比较结果为 <code>false</code>。</p> <p>关于 <code>Promise.prototype.finally()</code> 的实现，如下：</p> <pre><code class="language-js">Promise.prototype.finally = function (callback) { let P = this.constructor return this.then( value => P.resolve(callback && callback()).then(() => value), reason => P.resolve(callback && callback()).then(() => { throw reason }) ) } </code></pre> <h2>七、总结</h2> <p>关于 <code>Promise.prototype.then()</code>、<code>Promise.prototype.catch()</code>、<code>Promise.prototype.finally()</code> 方法，总结以下特点：</p> <ul> <li> <p>三者均返回一个全新的 <code>Promise</code> 实例对象。</p> </li> <li> <p>即使 <code>then()</code>、<code>catch()</code>、<code>finally()</code> 方法在不指定回调函数的情况下，仍会返回一个全新的 <code>Promise</code> 实例对象，但此时会出现“<strong>值穿透</strong>”的情况，即实例值为前一个实例的值。</p> </li> <li> <p>假设三者的回调函数中无语法错误（包括不使用 <code>throw</code> 关键字）时，<code>then()</code> 和 <code>catch()</code> 方法返回的实例对象的值，依靠 <code>return</code> 关键字来指定，否则为 <code>undefined</code>。</p> <p>而 <code>finally()</code> 方法稍有不同，即使使用了 <code>return</code> 也是无意义的，因为它返回的 <code>Promise</code> 实例对象的值总是前一个 <code>Promise</code> 实例的值。</p> <p>三个方法的返回操作 <code>return any</code>，相当于 <code>Promise.resolve(any)</code>（这里 <code>any</code> 是指任何值）。</p> </li> <li> <p>当 <code>then()</code>、<code>catch()</code>、<code>finally()</code> 方法中出现语法错误或者利用 <code>throw</code> 关键字主动抛出错误，它们返回的 <code>Promise</code> 实例对象的状态会变成 <code>rejected</code>，而且实例对象的值就是所抛出的错误原因。</p> </li> <li> <p><code>Promise</code> 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个 <code>catch()</code> 方法捕获。</p> </li> </ul> <p>关于值的<strong>穿透</strong>，请看示例：</p> <pre><code class="language-js">const person = { name: 'Frankie' } // 使用引用值更能说明问题 const p1 = new Promise(resolve => resolve(person)) const p2 = new Promise((resolve, reject) => reject(person)) // 情况一：fulfilled p1.then(res => { console.log(res === person) // true }) // 情况二：fulfilled p1 .then() .then(res => { console.log(res === person) // true }) // 情况三：rejected p2 .catch() .then(res => { /* 不会触发 then */ }) .catch(err => { console.log(err === person) // true }) // 情况四：fulfilled p1 .finally() .then(res => { console.log(res === person) // true }) </code></pre> <p>从结果上看，尽管三者在不指定回调函数的情形下，“似乎”是不影响结果的。但前面提到 <code>p1</code> 跟 <code>p1.then()</code>、<code>p1.catch()</code>、<code>p1.finally()</code> 都是两个不同的 <code>Promise</code> 实例对象，尽管这些实例对象的值是相等的。</p> <p>在实际应用场景中，我们应该避免写出这些“无意义”的代码。但是我们在去学习它们的时候，应该要知道。就是“用不用”和“会不会”是两回事。</p> <p><a href="https://github.com/tofrankie/blog/issues/256">下一篇</a>接着介绍 <code>Promise.all()</code>、<code>Promise.race()</code> 等。</p> </article> <article> <h1>在 forEach 使用 async/await 的问题</h1> <p>Sun, 26 Feb 2023 11:50:18 GMT</p> <p></p> <p>在上一篇文章《<a href="https://github.com/tofrankie/blog/issues/253">for 语句详解</a>》提到了在循环中应用 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await">async/await</a> 的例子。</p> <p>于是，顺道提一下在 <code>Array.prototype.forEach()</code> 使用 <code>async/await</code> 的问题。其实，在 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#%E9%92%88%E5%AF%B9_promise_%E6%88%96_async_%E5%87%BD%E6%95%B0%E7%9A%84%E4%BD%BF%E7%94%A8%E5%A4%87%E6%B3%A8">MDN</a> 上就有提醒：</p> <blockquote> <p>如果使用 <code>promise</code> 或 <code>async</code> 函数作为 <code>forEach()</code> 等类似方法的 <code>callback</code> 参数，最好对造成的执行顺序影响多加考虑，否则容易出现错误。</p> </blockquote> <p>示例：</p> <pre><code class="language-js">let sum = 0 const arr = [1, 2, 3] async function sumFn(a, b) { return a + b } // 为了方便后续修正改造，将 forEach 逻辑放到函数 main 中执行了。 function main(array) { array.forEach(async item => { sum = await sumFn(sum, item) }) console.log(sum) // 0, Why? } main(arr) </code></pre> <p><strong>为什么 <code>sum</code> 打印结果是 <code>0</code>，而不是预期的 <code>6</code> 呢？</strong></p> <blockquote> <p>首先，我们要理解 <code>async</code> 函数的语义，它表示函数中有异步操作，<code>await</code> 则表示其后面的表达式需要等待结果，函数最终返回一个 <code>Promise</code> 对象。</p> </blockquote> <p>当代码执行到 <code>forEach</code> 时：</p> <pre><code class="language-text">1. 首先遇到 `sum = await sumFn(sum, item)` 语句（注意，它是从右往左执行的）因此，它会执行 `sumFn(0, 1)`，那么该函数 `return 1`，由于 async 函数始终会返回一个 Promise 对象，即 `return Promise.resolve(1)`。 2. 由于 await 的原因，它其实相当于执行 `Promise.resolve(1).then()` 方法，它属于微任务，会暂时 Hold 住，被放入微任务的队列，待本次同步任务执行完之后，才会被执行，因此并不会立即赋值给 sum（所以 sum 仍为 0）。 3. 那 JS 引擎主线程不会闲着的，它会继续执行“同步任务”，即下一次循环。同理，又将 `return Promise.resolve(2)` 放入微任务队列。直到最后一次循环，同样的的还是 `return Promise.resolve(3)`。其实到这里，forEach 其实算是执行完了。以上示例，forEach 的真正意义是创建了 3 个微任务。 4. 由于主线程会一直执行同步任务，待同步任务执行完之后，才会执行任务队列里面的微任务。待 forEach 循环结束之后，自然会执行 `console.log(sum)`，但注意，由于 await 的原因，sum 一直未被重新赋值，因此 sum 还是为 0 ，所以控制台输出了 0。 5. 等 `console.log(sum)` 执行完毕，才开始执行队列中的微任务，其中 `await Promise.resolve(0)` 的结果，相当于 `Promise.resolve(0)` 的 then 方法的返回值，所以此前的三个微任务，相当于： `sum = 1` `sum = 2` `sum = 3` 它们被依次执行。 6. 因此 sum 最终的值变成了 3（注意不是 6 哦）。 </code></pre> <p>所以，在 <code>forEach</code> 中使用 <code>async/await</code> 可能没办法到达预期目的哦。</p> <p><strong>如何解决以上问题呢？</strong></p> <p>我们可以使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> 来替代：</p> <pre><code class="language-js">let sum = 0 const arr = [1, 2, 3] async function sumFn(a, b) { return a + b } // await 要放在 async 函数中 async function main(array) { for (let item of array) { sum = await sumFn(sum, item) } console.log(sum) // 6 } main(arr) </code></pre> <p>这样就能输出预期结果 <code>6</code> 了。</p> <p>那为什么 <code>for...of</code> 就可以呢？因为它本质上就是一个 <code>while</code> 循环。</p> <pre><code class="language-js">let sum = 0 const arr = [1, 2, 3] async function sumFn(a, b) { return a + b } // await 要放在 async 函数中 async function main(array) { // for (let item of array) { // sum = await sumFn(sum, item) // } // 相当于 const iterator = array[Symbol.iterator]() let iteratorResult = iterator.next() while (!iteratorResult.done) { sum = await sumFn(sum, iteratorResult.value) iteratorResult = iterator.next() } console.log(sum) // 6 } main(arr) </code></pre> <p>只要了解了 <code>async/await</code> 和 <code>for...of</code> 的内部运行机制，分析起来就不难了。</p> <p>The end.</p> </article> <article> <h1>细读 JS | for 语句详解</h1> <p>Sun, 26 Feb 2023 11:48:04 GMT</p> <p></p> <p>今天看看一个最基础的 <code>for</code> 语句吧！</p> <h2>一、语法</h2> <p><code>for</code> 语句用于创建一个循环，它包含了三个<strong>可选</strong>的表达式（包围在圆括号之中，使用分号 <code>;</code> 分隔），后跟一个用于在循环中执行的语句（通常为<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/block">块语句</a>）。</p> <pre><code class="language-js">for ([initialization]; [condition]; [final-expression]) statement </code></pre> <ul> <li> <p><code>initialization</code> 一个表达式（包含赋值语句）或变量声明。可使用 <code>var</code> 或 <code>let</code> 声明变量（但不能使用 <code>const</code> 关键字声明）。但两者声明的变量作用域不同，前者 <code>var</code> 与 <code>for</code> 循环处于同样的作用域中，而后者 <code>let</code> 则是语句的局部变量。该表达式的结果无意义。</p> </li> <li> <p><code>condition</code> 一个表达式被用于确定每一次循环是否能被执行。如果表达式结果为 <code>true</code>，<code>statement</code> 将被执行。该表达式是可选的，如果被忽略，那么被认为永远为证。如果表达式结果为 <code>false</code>，那么执行流程将被跳到 <code>for</code> 语句结构后面的第一条语句。</p> </li> <li> <p><code>final-expression</code> 每次循环的最后都要执行的表达式。执行时机是在下一次 <code>condition</code> 的计算之前。通常被用于更新或递增计数器变量。</p> </li> <li> <p><code>statement</code> 只要 <code>condition</code> 的结果为 <code>true</code>，就会被执行的语句。要在循环体内执行多条语句，使用一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/block">块语句</a>来包括要执行的语句。没有任何语句要执行，使用一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/Empty">空语句</a>（<code>;</code>）</p> </li> </ul> <p>类似下面的循环语句，再熟悉再常见不过了。</p> <pre><code class="language-js">for (var i = 0; i < 10; i++) { // statements } </code></pre> <h2>二、示例</h2> <p>由于 <code>for</code> 语句头部圆括号中的所有三个表达式都是可选的，因此下面列举一些相对没那么“常见”的示例。</p> <p>例如，省略 <code>initialization</code> 初始化块中的表达式：</p> <pre><code class="language-js">var i = 0 for (; i < 10; i++) { console.log(i) // more statements } </code></pre> <p>例如，省略 <code>condition</code> 表达式，但必须在 <code>statement</code> 循环体内跳出循环，避免死循环。</p> <pre><code class="language-js">for (var i = 0; ; i++) { console.log(i) if (i > 3) break // more statements } </code></pre> <p>甚至，你可以忽略所有的表达式。同样的，要确保使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/break"><code>break</code></a> 语句来跳出循环，并且还要修改（增加）一个变量，使得 <code>break</code> 语句的条件在某个时候为真。</p> <pre><code class="language-js">var i = 0 for (; ;) { if (i > 3) break console.log(i) i++ } </code></pre> <p>但有一个需要特别注意的是，当循环体 <code>statement</code> 不执行任何语句时，必须使用一个空语句（即 <code>;</code>，且分号是不能省略的）。</p> <pre><code class="language-js">for (var i = 0; i < 10; i++)/* empty statement */; </code></pre> <blockquote> <p>注意，这里的分号 <code>;</code> 是强制性的，是 JavaScript 中的少数几种强制分号的情况。若没有分号，循环声明之后的行将被视为循环语句。</p> </blockquote> <p>例如：</p> <pre><code class="language-js">for (var i = 0; i < 10; i++) console.log('loop') // 这个被当作 for 语句的 statement 循环体 console.log('no loop') // 但这个不属于循环体哦 </code></pre> <h2>三、BTW</h2> <p>关于能否省略分号的问题，顺便一下。</p> <ol> <li>在 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a> 语句中，根据 ASI 机制，由于 <code>)</code> 和 <code>else</code> 无法构成合法的语句，且 JavaScript 解析器不会在 <code>else</code> 之前自动插入分号 <code>; </code>，导致词法分析阶段就出错了。</li> </ol> <pre><code class="language-js">// SyntaxError: Unexpected token 'else' if (true) else console.log('...') // Correct, but this "if" does nothing! if (true); else console.log('...') </code></pre> <p>正确做法是，需主动在 <code>else</code> 之前键入分号 <code>;</code>（不可省略），表示 <code>if</code> 条件为真时，执行了一个空语句。</p> <ol start="2"> <li>在 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> 语句中，以下形式是允许的哦，语法不会出错。</li> </ol> <pre><code class="language-js">do statement while(condition) out-of-loop-statement // 根据 ASI 机制，JavaScript 解析器看到的其实是长这样的： do statement; while(condition); out-of-loop-statement; </code></pre> <ol start="3"> <li>在 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for">for</a> 语句中，即使把 <code>initialization</code>、<code>condition</code>、<code>final-expression</code> 表达式都省略了，但是分号 <code>;</code> 却一个都不能省略。当循环体不执行任何语句时，分号 <code>;</code> 也不能省略。</li> </ol> <pre><code class="language-js">// Correct for (; ;); // 当然这样是没意义，而且会陷入死循环。但语法是正确的，为了举例罢了。 // SyntaxError for (;); // Bad, 容易产生非预期结果 for (;;) </code></pre> <blockquote> <p>关于<strong>自动分号插入</strong>（ASI，Automatic Semicolon Insertion），请看文章 <a href="https://github.com/tofrankie/blog/issues/223">JavaScript ASI 机制详解</a>，包括上述示例都有详细描述。</p> </blockquote> <h2>四、被忽略的地方</h2> <ol> <li><code>for</code> 语句的 <code>initialization</code>、<code>condition</code>、<code>final-expression</code> 除了表达式形式，还可以是函数形式。若 <code>initialization</code>、 <code>final-expression</code> 以函数形式存在，它们的返回值是无实际意义的。但是 <code>condition</code> 则必须返回一个布尔值。</li> </ol> <pre><code class="language-js">for (var i = 0; i < 10; i++) { console.log(i) } // 相当于 function compare(number) { // 若 condition 是一个较为复杂的表达式，使用函数形式或许可以使得代码更清晰。 return number < 10 } for (var i = 0; compare(i); i++) { console.log(i) } </code></pre> <h2>五、经典面试题</h2> <p>在 <code>initialization</code> 表达式中使用 <code>var</code> 和 <code>let</code> 声明变量是有区别的。</p> <p>上面提到使用 <code>var</code> 声明的变量，其作用域与 <code>for</code> 循环处于同样的作用域中，而使用 <code>let</code> 则是 <code>for</code> 循环内部的块级作用域。</p> <p>看看以下两个示例的异同，不同点在于 <code>var</code> 和 <code>let</code>：</p> <pre><code class="language-js">// 示例一 var arr = [] for (var i = 0; i < 10; i++) { arr[i] = function () { console.log(i) } } arr[6]() // 10 </code></pre> <pre><code class="language-js">// 示例二 var arr = [] for (let i = 0; i < 10; i++) { arr[i] = function () { console.log(i) } } arr[6]() // 6 </code></pre> <p>上面的示例中，为什么结果会有差异呢？我们来分析一下：</p> <blockquote> <p>示例一分析：</p> <p>在 ES6 之前，JavaScript 的变量是没有块级作用域的，只有函数作用域和全局作用域。所以，在示例一中，变量 <code>i</code> 与变量 <code>arr</code> 同属全局作用域。当循环执行完毕，<code>i</code> 已经增加到 <code>10</code>。接着执行 <code>arr[6]()</code>，由于匿名函数 <code>function () { console.log(i) }</code> 内部并没有声明 <code>i</code> 变量，于是从上一级作用域（这里的上一级作用域是全局作用域）中查找 <code>i</code>，并找到其值为 <code>10</code>，因此打印结果为 <code>10</code>。</p> <p>注意，在示例一中，由始至终只有一个全局作用域。</p> </blockquote> <blockquote> <p>示例二分析：</p> <p>在示例二中，使用了 <code>let</code> 来声明变量 <code>i</code>，此时 <code>i</code> 不再与 <code>arr</code> 同属全局作用域了。</p> <p>此时，其实存在三个作用域：包括 <code>arr</code> 所在的全局作用域、<code>i</code> 所在的块级作用域、以及 <code>for</code> 语句循环体内的块级作用域。为什么有三个不同的作用域？看示例：</p> </blockquote> <pre><code class="language-js">/* 全局作用域 */ for (let i = 0 /* 块级作用域 1 */; i < 10; i++) { /* 块级作用域 2 */ let i = 'abc' console.log(i) // 结果是打印了 10 遍 "abc"，而不是 0 ~ 10 哦 } // 理由： // 假设 1 和 2 是同级作用域下，我们重复使用 let 关键字来声明 i 变量， // 理应抛出语法错误，如：SyntaxError: Identifier 'i' has already been declared // 但事实上运行是没问题的，说明通过了词法分析。 // 再者，假设我们在循环体内声明 let j = 'temp'，然后在 final-expression 表达式内是无法访问变量 j 的。 // 综上，可知它俩作用域是不一样的。 // 基于以上反证结论，我们有理由认为： // 若在 for 语句的圆括号和循环体内使用了 let 来声明变量，它们所处的作用域是不一样的。 // 而在 for 循环的圆括号的三个表达式，其作用域是同一个。 // 注意，只能在循环体内部访问圆括号内的变量，反之不行。 </code></pre> <p>我们打个断点看下就清楚了：</p> <p></p> <blockquote> <p>接着分析示例二，当我们使用 <code>let</code> 时，每次循环 JavaScript 引擎会重新创建环境，大致是拷贝上一次的变量及其值到本次循环中（详情看标准：<a href="https://262.ecma-international.org/#sec-createperiterationenvironment">CreatePerIterationEnvironment</a>），这也是为什么重新创建环境，<code>i</code> 还能取到上一次值的原因。需要注意的是，<code>initialization</code> 表达式仅在首次执行 <code>for</code> 循环的时候进行初始化，下一次创建环境的时候并不会执行它，因此 <code>i</code> 不会重置为 <code>0</code>。</p> <p>而每次循环，循环体 <code>statement</code> 内都会产生一个块级作用域，对应作用域内的 <code>i</code> 值就是本次循环的 <code>i</code> 的值。而且，由于我们循环体内含有 <code>arr[i] = function () { console.log(i) }</code>，会形成闭包。</p> <p>所以，最后执行 <code>arr[6]()</code> 时，先从块级作用域下查找，并查找到为 <code>6</code>，因此它不会继续往上一级块级作用域下查找，自然也不会再往全局作用域下查找了。</p> </blockquote> <p>可以断点调试看下：</p> <p></p> <p>而示例一断点调试可知，由始至终就一个全局作用域。（不贴图了）</p> <p>关于示例二，相当于以下这样，那作用域就更加地清晰了：</p> <pre><code class="language-js">var arr = [] { let i for (i = 0; i < 10; i++) { let _i = i arr[_i] = function () { console.log(_i) } } } arr[6]() // 6 </code></pre> <p>我们再看下，<a href="https://www.babeljs.cn/repl#?browsers=&build=&builtIns=false&corejs=3.6&spec=false&loose=false&code_lz=G4QwTgBOkLwQ2gXQFADMD2kAUAbApgC4QCWEcADANwkQA8EAjFSQNQsCUEA3shFGGHjFEZCKgCuAOwDGBYukkQsnHnz7SFAZ3T4AdDnQBzLMXa8IAX2RXo8AGyJlQA&debug=false&forceAllTransforms=false&modules=false&shippedProposals=false&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Cstage-0&prettier=true&targets=&version=7.25.5&externalPlugins=&assumptions=%7B%7D">Babel</a> 是如何转换的：</p> <p></p> <p>看到这个，那不就想起那个经典面试题：如何修改代码使其打印出 0 ~ 9 吗？</p> <h2>六、为什么 for...of 里可以用 const 声明变量</h2> <p>前面提到，<code>for</code> 语句里的 <code>initialization</code> 部分不能用 <code>const</code> 声明变量。</p> <p>举个例子：</p> <pre><code class="language-js">for (const i = 0; i < 10; i++) { console.log(i) } </code></pre> <p>执行会抛出 Uncaught TypeError: Assignment to constant variable 异常。</p> <p>原因很简单，<code>(const i = 0; i < 10; i++)</code> 这部分有一个作用域，每次循环体执行完之后，执行 <code>i++</code> 是对此作用域里的 <code>i</code> 变量重新赋值，因此会报错。</p> <p>但我们可以经常看到这样的代码，是可以正常工作的：</p> <pre><code class="language-js">const arr = [0, 1, 2] for (const i of arr) { console.log(i) } </code></pre> <p>它相当于</p> <pre><code class="language-js">const arr = [0, 1, 2] const iterator = arr[Symbol.iterator]() let result while (result = iterator.next() && !result.done) { console.log(result.value) } </code></pre> <h2>七、async 在 for 语句中的应用</h2> <p>例如，实现休眠效果。</p> <pre><code class="language-js">function sleep(delay) { return new Promise(resolve => setTimeout(resolve, delay)) } async function traverse() { for (let i = 1; i <= 5; i++) { console.log(i) await sleep(1000) } } traverse() // 间隔 1 秒，依次输出 1 ~ 5 </code></pre> <p>例如，在网络请求中，可以实现多次重复尝试。</p> <pre><code class="language-js">async function request(url) { let res let err const MAX_NUM_RETRIES = 3 for (let i = 0; i < MAX_NUM_RETRIES; i++) { try { res = await fetch(url).then(res => res.json()) break } catch (e) { err = e // Do nothing and make it continue. } } if (res) return res throw err } request('http://192.168.1.102:7701/config') .then(res => { console.log('success') }) .catch(err => { console.log('fail') }) </code></pre> <blockquote> <p>另外，在 <code>Array.prototype.forEach()</code> 使用 <code>async/await</code> 可能得不到预期结果哦，详情看<a href="https://github.com/tofrankie/blog/issues/254">文章</a>分析。</p> </blockquote> <h2>八、参考链接</h2> <ul> <li><a href="https://262.ecma-international.org/#sec-for-statement">The for Statement（ECMAScript）</a></li> <li><a href="https://github.com/tofrankie/blog/issues/223">JavaScript ASI 机制详解</a></li> <li><a href="https://es6.ruanyifeng.com/#docs/let">let 和 const 命令</a></li> <li><a href="https://stackoverflow.com/questions/31987465/ecmascript-2015-const-in-for-loops">ECMAScript 2015: const in for loops</a></li> </ul>  </article> <article> <h1>细读 ES6 | Class 下篇</h1> <p>Sun, 26 Feb 2023 11:45:29 GMT</p> <p></p> <p>继<a href="https://github.com/tofrankie/blog/issues/251">上一篇</a>介绍了 Class 的语法，今天来看看 ES6 中的继承。</p> <p>在 ES5 大概有 6 种继承方式：类式继承、构造函数继承、组合式继承、原型继承、寄生式继承、寄生组合式继承，而这些方式都有一些各自的缺点，可看文章：<a href="https://github.com/tofrankie/blog/issues/213">深入继承原理</a>。</p> <p>而 ES6 标准提供了 Class（类）的语法来定义类，语法很像传统的面向对象写法。本质上仍然是通过原型实现继承的，可以理解为 <code>class</code> 只是一个语法糖，跟传统面向对象的类又不一样。废话说完了，入正题...</p> <p>那 Class 是怎样实现继承的呢？</p> <h2>一、简介</h2> <p>通过 <code>extends</code> 关键字实现继承，比 ES5 写一长串的原型链，方便清晰很多，对吧。</p> <pre><code class="language-js">class Person {} class Student extends Person {} // 没错，这样就实现了继承 </code></pre> <p>上面的示例中，定义了一个 <code>Student</code>（子）类，该类通过 <code>extends</code> 关键字继承了 <code>Person</code>（父）类的所有属性和方法。但由于两个类中并没有实现什么功能，相当于 <code>Student</code> 复制了一个 <code>Person</code> 类而已。</p> <blockquote> <p>需要注意的是，若子类自实现了 <code>constructor</code> 方法，需在其内部使用 <code>super</code> 关键字来调用父类的构造方法，否则当子类进行实例化时会报错。</p> </blockquote> <pre><code class="language-js">class Person {} class Student extends Person { constructor() { super() // 相当于调用父类 Person 的构造方法， // 相当于 Person.prototype.constructor.call(this)， // 而且，若 constructor 内使用了 this 关键字， // super() 一定要在 this 之前进行调用，否则会报错。 } } const stu = new Student() // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor // 至于为什么上一个示例，实例化时并不会报错，原因如下： // 当 constructor 缺省时，JS 引擎会默认添加一个 constructor 方法，相当于： // // class Person {} // class Student extends Person { // constructor(...args) { // super(...args) // } // } </code></pre> <p><strong>原因是，ES5 的继承实质是先创建子类的实例对象（即 <code>this</code>），然后再将父类的方法添加到实例对象 <code>this</code> 上（类似 <code>Parent.apply(this)</code>）。而 ES6 继承机制完全不同，它先将父类的实例对象的属性和方法，放到 <code>this</code> 上，然后再用子类的构造函数修改 <code>this</code>。因此，在子类使用 <code>this</code> 之前，需要调用 <code>super()</code> 方法执行父类的 <code>constructor()</code> 方法来创建实例对象 <code>this</code>。</strong></p> <p>我们来改下：</p> <pre><code class="language-js">class Person { constructor(name, age) { this.name = name this.age = age } sayHi() { console.log(`Hi, my name is ${this.name}.`) } } class Student extends Person { constructor(name, age, stuNo) { super(name, age) this.stuNo = stuNo // this 只能在调用 super() 后使用 } } const stu = new Student('Frankie', 20, 2021001) stu.sayHi() // "Hi, my name is Frankie." </code></pre> <p>实例对象 <code>stu</code> 同时是 <code>Student</code>、<code>Person</code> 类的实例，这点与 ES5 表现一致。</p> <pre><code class="language-js">stu instanceof Student // true stu instanceof Person // true </code></pre> <h2>二、Object.getPrototypeOf()</h2> <p>使用 <code>Object.getPrototypeOf()</code> 可以通过子类获取其直接父类。</p> <pre><code class="language-js">Object.getPrototypeOf(stu) === Student // true Object.getPrototypeOf(Student) === Person // true // 也可以使用非标准的 __proto__ 访问原型 stu.__proto__.constructor === Student // true stu.__proto__ === Student.prototype // true </code></pre> <p>提一下，我们一直使用的 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto"><code>Object.prototype.__proto__</code></a> 并不是 ECMAScript 标准，只是被各大浏览器厂商支持，因此我们才可以使用。现在被推荐使用的是，标准支持的 <code>Objec.getPrototypeOf()</code>、<code>Object.setPrototypeOf()</code> 方法。</p> <h2>三、super 关键字</h2> <p>关键字 <code>super</code> 可以作为<strong>函数</strong>使用，也可以作为<strong>对象</strong>使用，两种是有区别的。</p> <h3>1. super 作为函数</h3> <p>当 <code>super</code> 作为函数，只能在（子类）构造方法中使用，若在非子类或类的其他方法中调用，是会报错的。</p> <pre><code class="language-js">class Person { constructor(name, age) { this.name = name this.age = age console.log(new.target.name) // super() // 若在此调用，会报错：SyntaxError: 'super' keyword unexpected here } sayHi() { console.log(`Hi, my name is ${this.name}.`) } } class Student extends Person { constructor(name, age, stuNo) { // super(name, age) console.log(super(name, age) === this) // true this.stuNo = stuNo // this 只能在调用 super() 后使用 } getStuNo() { // super() // 若在此调用，会报错：SyntaxError: 'super' keyword unexpected here return this.stuNo } } const stu = new Student('Frankie', 20, 2021001) // 打印："Student" const person = new Person('Mandy', 18) // 打印："Person" </code></pre> <p>在构造方法当作函数调用 <code>super()</code>，它代表了父类的构造方法。根据 ES6 规定，子类的构造函数必须执行一次 <code>super</code> 函数。当缺省 <code>constructor()</code> 方法时，JS 引擎会帮我们添加一个默认构造方法，里面也包括 <code>super()</code> 的调用。</p> <p><strong>小结：</strong></p> <ul> <li> <p><code>super()</code> 只能在子类的 <code>constructor()</code> 方法内调用，在 <code>getStuNo()</code> 方法内调用会报错。例如，示例中父类 <code>Person</code> 并没有继承自其他类，因此在父类 <code>Person</code> 的 <code>constructor()</code> 方法内调用是会报错的。</p> </li> <li> <p>调用 <code>super()</code> 返回当前实例化对象，即 <code>this</code>。</p> </li> <li> <p><code>new.target</code> 指向直接被 <code>new</code> 执行的类。因此通过 <code>new Student()</code> 和 <code>new Person()</code> 进行实例化时，<code>new.target</code> 分别指向 <code>Student</code> 类和 <code>Person</code> 类。</p> </li> </ul> <h3>2. super 作为对象</h3> <p>当 <code>super</code> 作为对象使用时，在普通方法内（包括 <code>constructor()</code> 在内的非静态方法），它指向父类的原型对象（即 <code>Parent.prototype</code>）；而在静态方法内，它指向父类（即 <code>Parent</code>）。</p> <pre><code class="language-js">// 父类 class Person { constructor(name, age) { this.name = name this.age = age } sayHi() { console.log(`Hi, my name is ${this.name}.`) } printAge() { console.log(this.age) } static classMethodParent() { console.log(Person.name) } } Object.assign(Person.prototype, { prop: 'hhh' }) // 子类 class Student extends Person { constructor(name, age, stuNo) { super(name, age) this.stuNo = stuNo // 作为对象 super 相当于 Person.prototype super.sayHi() // "Hi, my name is Frankie." console.log(super.name) // undefined console.log(super.prop) // "hhh" // 另外，要注意： super.tmp = 'temporary' // 相当于 this.tmp = 'temporary' console.log(super.tmp) // undefined console.log(this.tmp) // "temporary" } getStuNo() { return this.stuNo } getAge() { // 普通方法内，super 指向父类的原型对象， // 即相当于 Person.prototype.printAge.call(this) super.printAge() } static classMethod() { // 静态方法内，super 指向父类 // 相当于 Person.classMethodParent() super.classMethodParent() } } const stu = new Student('Frankie', 20, 2021001) stu.getAge() // 20 Student.classMethod() // "Person" </code></pre> <p><strong>小结：</strong></p> <ul> <li> <p>在普通方法内，类似 <code>super.xxx</code> 等<strong>取值</strong>操作，<code>super</code> 均指向父类的原型对象。例如，上述子类构造方法内 <code>super.name</code> 打印结果为 <code>undefined</code>，原因是属性 <code>name</code> 是挂载到实例对象上的，而不是实例的原型对象上的。即 <code>super.name</code> 相当于 <code>Person.prototype.name</code>。</p> </li> <li> <p>在普通方法内，类似 <code>super.xxx = 'xxx'</code> 等<strong>赋值</strong>操作，相当于 <code>this.xxx = 'xxx'</code>，因此属性 <code>xxx</code> 会被挂载到实例对象上，而不是父类原型对象。</p> </li> <li> <p>普通方法内，通过 <code>super.xxx()</code> 调用父类方法，相当于 <code>Person.prototype.xxx.call(this)</code>。</p> </li> <li> <p>在静态方法内，<code>super</code> 指向父类，因此 <code>super.xxx()</code> 相当于 <code>Person.classMethodParent()</code>。</p> </li> </ul> <blockquote> <p>以上提到的普通方法，是指非静态方法。</p> </blockquote> <h3>3. 注意事项</h3> <p>无论 super 是作为函数，还是对象使用，必须明确指定，否则会报错。</p> <pre><code class="language-js">class Person {} class Student extends Person { constructor() { super() console.log(super) // SyntaxError: 'super' keyword unexpected here } } </code></pre> <h3>4. 关于 super 总结</h3> <ul> <li> <p>作为函数时，仅可在<strong>子类</strong>的 <code>constructor()</code> 内使用。若 <code>constructor()</code> 内包括 <code>this</code> 的使用，则 <code>super()</code> 必须在 <code>this</code> 之前进行调用。</p> </li> <li> <p>作为对象时，若在<strong>非静态方法</strong>内使用，<code>super.xxx</code>（<code>super.xxx()</code>）相当于 <code>Parent.prototype.xxx</code>（<code>Parent.prototype.xxx.call(this)</code>）。</p> </li> <li> <p>作为对象时，若在<strong>静态方法</strong>内使用，<code>super.xxx</code>（<code>super.xxx()</code>）相当于 <code>Parent.xxx</code>（<code>Parent.xxx()</code>）。</p> </li> <li> <p>我们都知道在 JavaScript 访问对象的某个属性（或方法），先从对象本身去查找是否有此属性，再从原型上一层一层的查找，若最终查找不到会返回 <code>undefined</code>（或抛出 TypeError 错误）。</p> <p>同样地，在 Class 继承中，若子类、父类存在同名方法，使用实例对象进行调用该方法，若子类查找到了，自然不会再去父类中查找。但我们在设计类的时候，可能仍需要执行父类的同名方法，那么怎么调用呢？</p> <p>显然通过 <code>父类名.方法名()</code> 的方式调用是不合理、不灵活的，道理就跟 JavaScript 要设计 <code>this</code> 关键字一样。于是 <code>super</code> 就诞生了（最后这句是我猜的，哈哈）。</p> </li> </ul> <h2>四、类的 prototype 属性和 __proto__ 属性</h2> <p>在 ES5 之中，每个对象都有 <code>__proto__</code> 属性，它指向对象的构造函数的 <code>prototype</code> 属性。</p> <p>关于对象可分为：普通对象和函数对象，区别如下：</p> <table> <thead> <tr> <th>对象类型</th> <th>prototype（原型对象）</th> <th>__proto__（原型）</th> </tr> </thead> <tbody> <tr> <td>普通对象</td> <td>❌</td> <td>✅</td> </tr> <tr> <td>函数对象</td> <td>✅</td> <td>✅</td> </tr> </tbody> </table> <blockquote> <p>所有对象都有 <code>__proto__</code> 属性，而只有函数对象才具有 <code>prototype</code> 属性。其中构造函数属于函数对象，而实例对象则属于普通对象，因此实例对象是没有 <code>prototype</code> 属性的。</p> </blockquote> <p>而 ES6 的 <code>class</code> 作为构造函数的语法糖，同时有 <code>prototype</code> 属性和 <code>__proto__</code>，因此同时存在两条继承链。</p> <ul> <li>子类的 <code>__proto__</code> 属性，表示构造函数的继承，总是指向父类。</li> <li>子类的 <code>prototype</code> 属性的 <code>__proto__</code> 属性，表示方法的继承，总是指向父类的 <code>prototype</code> 属性。</li> </ul> <pre><code class="language-js">class Person { } class Student extends Person { } Student.__proto__ === Person // true Student.prototype.__proto__ === Student.prototype // true </code></pre> <p>上面的示例中，子类 <code>Student</code> 的 <code>__proto__</code> 指向父类 <code>Person</code>，子类的 <code>Student</code> 的 <code>prototype</code> 属性的 <code>__proto__</code> 属性指向父类 <code>Person</code> 的 <code>prototype</code> 属性。</p> <p>因为类的继承，是按照以下模式实现的：</p> <pre><code class="language-js">class Person { } class Student extends Person { } // 相当于 class Person { } class Student { } Object.setPrototypeOf(Student, Person) Object.setPrototypeOf(Student.prototype, Person.prototype) // ------------------------------------------------------- // 关于 Object.setPrototypeOf() 内部是这样实现的： // Object.setPrototypeOf = functon(obj, proto) { // obj.__proto__ = proto // return obj // } // // 因此，相当于： // Student.__proto__ = Person // Student.prototype.__proto__ = Person.prototype // ------------------------------------------------------- </code></pre> <p>这样去理解：</p> <ul> <li>作为一个对象，子类 <code>Student</code> 的原型（<code>__proto__</code>）是父类 <code>Person</code>；</li> <li>作为一个构造函数，子类 <code>Student</code> 的原型对象（<code>prototype</code>）是父类 <code>Person</code> 的原型对象（<code>prototype</code>）的实例。</li> </ul> <p>因此，理论上 <code>extends</code> 关键字后面的（函数）对象，只要含有 <code>prototype</code> 属性就可以了，但 <code>Function.prototype</code> 除外。但在做项目的时候应该从实际应用场景考虑，这样去做是否有意义。</p>  <pre><code class="language-js">// 1. Student 类继承 Object 类 class Student extends Object { } Student.__proto__ === Object // true Student.prototype.__proto__ === Object.prototype // true // 2. Student 不继承 class Student { } Student.__proto__ === Function.prototype Student.prototype.__proto__ === Object.prototype // 因此，相当于： // Object.setPrototypeOf(Student, Function.prototype) // Object.setPrototypeOf(Student.prototype, Object.prototype) </code></pre>  <h2>五、Mixin 模式的实现</h2> <p>Mixin 指的是多个对象合成一个新的对象，新对象具备各个组成成员的接口。它的最简单实现如下：</p> <pre><code class="language-js">const a = { a: 1 } const b = { b: 2 } const c = { ...a, ...b } </code></pre> <p>上面的示例，对象 <code>c</code> 是对象 <code>a</code> 和对象 <code>b</code> 的合成，具备两者的接口。</p> <p>下面是一个更完备的实现，将多个类的接口“混入”另一个类。</p> <pre><code class="language-js">function mix(...mixins) { class Mix { constructor() { for (let mixin of mixins) { copyProperties(this, new mixin()) // 拷贝实例属性 } } } for (let mixin of mixins) { copyProperties(Mix, mixin) // 拷贝静态属性 copyProperties(Mix.prototype, mixin.prototype) // 拷贝原型属性 } return Mix } function copyProperties(target, source) { for (let key of Reflect.ownKeys(source)) { if ( key !== 'constructor' && key !== 'prototype' && key !== 'name' ) { let desc = Object.getOwnPropertyDescriptor(source, key) Object.defineProperty(target, key, desc) } } } </code></pre> <p>上面示例中的的 <code>mix</code> 函数，可以将多个对象合成为一个类。使用的时候，只要继承这个类即可。</p> <pre><code class="language-js">class DistributedEdit extends mix(Loggable, Serializable) { // ... } </code></pre> <p>The end.</p> </article> <article> <h1>细读 ES6 | Class 上篇</h1> <p>Sun, 26 Feb 2023 11:41:50 GMT</p> <p></p> <p>此前写了两篇关于 JavaScript 原型以及继承的文章（源自 <a href="https://juejin.cn/user/1609340751972941/posts">ULIVZ</a>）。</p> <ul> <li><a href="https://github.com/tofrankie/blog/issues/212">原型详解</a></li> <li><a href="https://github.com/tofrankie/blog/issues/213">深入继承原理</a></li> </ul> <p>来持续学习吧！今天来看下 ES6 中的 Class 语法。</p> <h2>一、简介</h2> <p>在 JavaScript 中，生成实例对象的传统方法是通过构造函数。</p> <pre><code class="language-js">function Point(x, y) { this.x = x this.y = y } Point.prototype.toString = function() { return '(' + this.x + ', ' + this.y + ')' } var p = new Point(1, 2) </code></pre> <p>上面这种写法，跟传统的面向对象语言（比如 C++、Java）差异很大，很容易让新学习这门语言的程序员感到困惑。</p> <p>在 ES6 提供了更接近传统语言的写法，引入了 <strong>Class</strong>（类）这个概念，作为对象的模板。通过 <code>class</code> 关键字，可以定义类。</p> <p><strong>基本上，ES6 的 <code>class</code> 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，全新的 <code>class</code> 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。</strong></p> <p>上面示例，可以使用 ES6 的 <code>class</code> 改写为：</p> <pre><code class="language-js">class Point { constructor(x, y) { this.x = x this.y = y } toString() { return '(' + this.x + ', ' + this.y + ')' } } </code></pre> <p>上面的示例定义了一个“类”，可以看到里面有一个 <code>constructor()</code> 方法，这就是构造方法，而 <code>this</code> 关键字则代表实例对象。这种全新的 Class 写法，本质上与开头的 ES5 的构造函数 <code>Point</code> 是一致的。</p> <p><code>Point</code> 类除了构造方法，还定义了一个 <code>toString()</code> 方法。注意，定义了 <code>toString()</code> 方法的时候，前面不需要加上 <code>function</code> 这个关键字，直接把函数定义放进去就可以了。另外，方法与方法之间不需要逗号 <code>,</code> 分隔，加了会报错。</p> <p>ES6 的类，完全可以看作构造函数的另一种写法。</p> <pre><code class="language-js">class Point { // ... } console.log(typeof Point) // "function" Point.prototype.constructor === Point // true // 上面代码表明，类的数据类型就是函数，类本身就指向构造函数。 </code></pre> <p>使用的时候，也是直接对类使用 <code>new</code> 关键字，跟构造函数的用法完全一致。还有，当实例化不指定参数列表时，<code>new Point()</code> 等同于 <code>new Point</code>。</p> <blockquote> <p>与 ES5 有一点区别的是，类不能直接当作函数一样调用，即 <code>Point()</code> 是会抛出错误的：<code>TypeError: Class constructor Point cannot be invoked without 'new'</code>。而 ES5 中，若构造函数不使用 <code>new</code> 关键字进行实例化，而是直接当作函数调用是没问题的。</p> </blockquote> <pre><code class="language-js">class Bar { doStuff() { console.log('stuff') } } const b = new Bar() b.doStuff() // "stuff" </code></pre> <p>构造函数的 <code>prototype</code> 属性，在 ES6 的“类”上依然存在。事实上，类的所有方法都定义在类的 <code>prototype</code> 属性上面。我们在控制台打印下 <code>point</code> 实例对象：</p> <pre><code class="language-js">class Point { constructor() {} toString() {} toValue() {} } const point = new Point() </code></pre> <p>上面的示例中，<code>constructor()</code>、<code>toString()</code>、<code>toValue()</code> 这三个方法，其实都是定义在 <code>Point.prototype</code> 上面。</p> <p></p> <pre><code class="language-js">point.constructor === Point.prototype.constructor // true </code></pre> <p>上面的示例中，<code>point</code> 是 <code>Point</code> 类的实例，它的 <code>constructor()</code> 方法就是 <code>Point</code> 类原型的 <code>constructor()</code> 方法。</p> <p><strong>小结：</strong></p> <ul> <li>在 Class 内部定义的<strong>方法</strong>，尽管与 ES5 一样最终都是挂载在 <code>prototype</code> 上的，但这些方法是不可枚举的。这一点与 ES5 的行为不一致。</li> <li>在 Class 内部定义的<strong>属性</strong>，则是挂载在实例对象上的。</li> </ul> <h2>二、constructor</h2> <p><code>constructor()</code> 方法是类的默认方法，通过 <code>new</code> 关键字实例化对象是，内部会自动调用该方法。一个类必须有 <code>constructor()</code> 方法。当你定义一个类时，若无显式定义，会自动添加一个空的默认 <code>constructor()</code> 方法（由 JS 引擎自动添加），即：</p> <pre><code class="language-js">class Point {} // 相当于 class Point { constructor() {} } </code></pre> <p><code>constructor()</code> 方法默认返回实例对象（即 <code>this</code>），亦可返回任意一个对象（引用类型的值）。</p> <pre><code class="language-js">class Point() { constructor() { return Object.create(null) // 1. 若不显式 return 的话，默认返回 this // 2. 显式返回只能是引用值（即对象），若是原始值是无效的，此时仍然是返回 this。 // 3. 以上两点，跟 ES5 实现构造方法表现是一致的。 // 4. 一般情况，无需定义显式 return。 } } const point = new Point() console.log(point instanceof Point) // false </code></pre> <p>上面示例中，<code>constructor()</code> 返回了一个全新对象，导致了 <code>point</code> 对象并不是 <code>Point</code> 的实例对象。</p> <h2>三、类的实例</h2> <p>上面提到，Class 不能当做函数直接调用，否则会抛出语法错误的。正确地，应使用 <code>new</code> 关键字进行实例化。</p> <pre><code class="language-js">class Point {} // 正确 const p1 = new Point() // 错误 const p2 = Point() // Uncaught TypeError: Class constructor Point cannot be invoked without 'new' </code></pre> <p><strong>在 Class 中，如何定义属性和方法？那它们是挂载到实例对象，还是类的原型上？</strong></p> <p>下面我们来看看吧：</p> <pre><code class="language-js">class Point { // 这样定义属性，也是挂载到实例对象的，并非挂载到 Point.prototype 上的哦 z = 0 constructor(x, y) { // 通过如下 this.xxx 的形式，可以显式地为实例对象增删属性和方法 this.x = x // this.y = y this.show = () => { return `The point is (${this.x}, ${this.y}).` } this.tmp = "It's temporary property." delete this.tmp } // 类似如下 setX、setY、setZ 等定义类的方法，它们最终是挂载到 Point.prototype，并非实例对象 setX(x) { this.x = x } setY(y) { this.y = y } setZ(z) { this.z = z } } // 既然上面的方式定义属性，都挂载到实例对象上， // 那怎样给 Point.prototype 添加“属性”呢？ // 只能利用 Point.prototype.xxx 了，像这样： Object.assign(Point.prototype, { prop: 'haha', method: function () {} }) const point = new Point(1, 10) </code></pre> <p>我们来打印一下 <code>point</code> 实例对象，一目了然：</p> <p></p> <p>与 ES5 一样，类的所有实例共享一个原型对象。</p> <pre><code class="language-js">const p1 = new Point(1, 1) const p2 = new Point(2, 2) Object.getPrototypeOf(p1) === Object.getPrototypeOf(p2) // true </code></pre> <p>因此，不建议在实例中，利用 <code>__proto__</code> 去改写原型，它会改变类的定义，进而影响到该类的所有实例。</p> <pre><code class="language-js">// ❌ 以下做法不被推荐 const p1 = new Point(1, 1) const p2 = new Point(2, 2) p1.__proto__.print = function () { console.log('Oops') } p2.print() // "Oops" </code></pre> <p>请注意，以下这种写法及其结果。</p> <pre><code class="language-js">class Point { fn() { console.log(1) } } // 在执行到这里时 class 内部的 fn 已经完成挂载到 Point.prototype 上， // 因此下面会把原先原型上的 fn 方法覆盖 Point.prototype.fn = function() { console.log(2) } const p = new Point() p.fn() // 2 </code></pre> <h2>四、setter、getter</h2> <p>在 JavaScript 中，我们可以借助 <code>setter</code> 和 <code>getter</code> 语法，以安全的方式来访问对象的属性。使用 <code>getter</code> 可以访问属性值，而 <code>setter</code> 可以修改属性值。</p> <pre><code class="language-js">// 本例的 setter、getter 设计在实际中并无意义， // 这里只是为了举例而举例罢了。 class Point { constructor(x, y) { this.x = x this.y = y } set prop(x) { console.log('setter:', x) this.x = x } get prop() { console.log('getter:', this.x) return this.x } } const point = new Point(1, 10) point.prop = 100 // setter: 100 point.prop // gettter: 100 </code></pre> <p>上面示例中，<code>prop</code> 属性有对应的存值函数和取值函数，因此存取行为都被自定义了。还有 <code>getter</code>、<code>setter</code> 方法是设置在属性的 Descripter 对象上的。</p> <h2>五、属性表达式</h2> <p>类的属性名，可以采用表达式，即计算属性名。</p> <pre><code class="language-js">let methodName = 'getX' class Point { [methodName]() { // ... } } // 访问 const point = new Point() point[methodName] // or point.getX </code></pre> <h2>六、类的表达方式</h2> <blockquote> <p>类内部是在<a href="https://github.com/tofrankie/blog/issues/232">严格模式</a>下运行的。</p> </blockquote> <p>类可以这样定义：</p> <pre><code class="language-js">// 1️⃣ 类声明 class Foo { constructor() {} } // 2️⃣ 匿名类表达式（匿名类，就像匿名函数表达式一样） const Foo = class { constructor() {} } // 3️⃣ 具名类表达式 const Foo = class NamedFoo { constructor() { // 在内部，可以使用 NamedFoo 或 Foo 访问类的属性或（静态）方法。 // 但是，在类的外部只能使用 Foo，不能使用 NamedFoo。 // 若内部无需使用到 NamedFoo，则可以使用匿名的方式。 console.log(NamedFoo.name) // "NamedFoo" console.log(Foo.name) // "NamedFoo" } } Foo.name // "NamedFoo" NamedFoo.name // ReferenceError: NamedFoo is not defined </code></pre> <p>以上三种类的表达方式，可以对应上：函数声明、匿名函数表达式、（具名）函数表达式，这点是相同的。</p> <p>还有，利用“类表达式”的形式，可以写出立即执行的 Class，这点与函数表达式是相同的。</p> <pre><code class="language-js">// 此时 foo 就是类的实例对象 const foo = new class { constructor(name) { this.name = name } }('Frankie') foo.name // "Frankie" </code></pre> <p>以上三种方式都可以定义一个类，但需要注意的是：</p> <pre><code class="language-js">// 1. 重复声明一个类会抛出类型错误。 // 在这点上，class 与 let、const 表现是一致的，均不可重复声明。 class Foo {} class Foo {} // Uncaught TypeError: Identifier 'Foo' has already been declared // 2. class 同样不会“提升”（Hoisting）， // 因此实例化之前，一定要先声明类，否则会抛出引用错误。 const foo = new Foo() // ReferenceError: Cannot access 'Foo' before initialization class Foo {} </code></pre> <h2>七、注意点</h2> <h3>1. 严格模式</h3> <p>在类和模块的内部，默认就是严格模式，无需通过 <code>use strict</code> 来指定，也仅有严格模式可用。</p> <h3>2. 提升问题</h3> <p>刚才提到使用 <code>class</code> 关键字声明的类，不存在“提升” （Hoisting）问题。这种规定的原因与类的继承有关，必须保证子类在父类之后定义。</p> <h3>3. name 属性</h3> <p>本质上，ES6 的类只是 ES5 的构造函数的一层包装，所以函数的许多特性都被 <code>class</code> 继承，包括 <code>name</code> 属性。它总是返回 <code>class</code> 关键字后面的类名，若是匿名类表达式声明，则返回变量名。</p> <pre><code class="language-js">class Foo {} const Bar = class {} const B = class Baz {} console.log(Foo.name) // "Foo" console.log(Bar.name) // "Bar" console.log(B.name) // "Baz" </code></pre> <h3>4. Generator 方法</h3> <p>如果在某个方法之前加上星号（<code>*</code>），则表示该方法是一个 Generator 函数。</p> <p>以下示例中，<code>Foo</code> 类的 <code>Symbol.iterator</code> 方法就是一个 Generator 函数。<code>Symbol.iterator</code> 方法返回一个 <code>Foo</code> 类的默认遍历器，<code>for...of </code>循环会自动调用这个遍历器。</p> <pre><code class="language-js">class Foo { constructor(...args) { this.args = args } *[Symbol.iterator]() { for (let arg of this.args) { yield arg } } } const foo = new Foo('Hello', 'World') for (let x of foo) { console.log(x) } // "Hello" // "World" </code></pre> <h3>5. this 指向</h3> <p>类的方法内部如果含有 <code>this</code>，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能会报错。注意，如果是静态方法内，<code>this</code> 指向类本身。</p> <pre><code class="language-js">class Point { constructor(x, y) { this.x = x this.y = y } // static classMethod() { // return this // this 指向 Point 本身 // } getX() { return this.x } } const point = new Point(1, 10) console.log(point.getX()) // 1 const { getX } = point getX() // TypeError: Cannot read property 'x' of undefined </code></pre> <p>在上述示例中，<code>getX</code> 方法的 <code>this</code> 默认指向 <code>Point</code> 实例对象。但是，如果将这个方法提取出来单独使用，<code>this</code> 会指向该方法运行时所在的环境（由于 <code>class</code> 内部是严格模式，所以 <code>this</code> 实际指向的是 <code>undefined</code>），导致找不到 <code>getX</code> 方法而报错。</p> <p>解决方法如下：</p> <pre><code class="language-js">// 解决方法一 class Point { constructor(x, y) { this.x = x this.y = y this.getX = this.getX.bind(this) // 构造函数中绑定实例对象 } getX() { return this.x } } // 解决方法二 class Point { constructor(x, y) { this.x = x this.y = y } // 这写法，相当于在 constructor 中定义了： // this.getX = () => { /* ... */ } getX = () => { return this.x } } // 注意，两者还是有区别的： // 1. 两种解决方法，都会在 Point 的实例对象上，定义了一个 getX 方法。 // 2. 解决方法一，除了在实例对象上含有 getX 方法，在其实例对象的原型上也有一个 getX 方法。 // 3. 而解决方案二，其实只会将 getX 挂载到实例对象上，而原型上是没有的。 // 4. 以上的区别，其实上面的内容都有提到，如还不太清楚，建议回头再看看。 </code></pre> <h2>八、静态方法</h2> <p>类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上 <code>static</code> 关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这个就被称为**“静态方法”**。</p> <pre><code class="language-js">class Foo { static classMethod() { console.log('Hello World!') } } // Correct Foo.classMethod() // "Hello World!" // Wrong const foo = new Foo() foo.classMethod() // TypeError: foo.classMethod is not a function </code></pre> <p>上述示例中，<code>Foo</code> 类的 <code>classMethod</code> 方法前有 <code>static</code> 关键字，表示该方法是一个静态方法，可以直接在 <code>Foo</code> 类上调用，而不是在 <code>Foo</code> 类的实例对象上调用。若通过实例对象调用静态方法，会抛出错误，因为实例对象上并没有 <code>classMethod</code> 方法。</p> <p>注意，静态方法内 <code>this</code> 指向类本身，而非实例对象。</p> <pre><code class="language-js">class Foo { static bar() { ths.baz() // this 指向 Foo 本身 } static baz() { console.log('baz') } // 这是没问题的，允许静态方法与非静态方法重名 // static qux() { // // ... // } // 该方法只会在实例化时才会挂载到实例对象上 // 而 Foo 类本身是不含此方法的 // 因此，静态方法与非静态方法是可以重名的。 qux() { console.log('qux') } } Foo.bar() // "baz" Foo.qux() // TypeError: Foo.qux is not a function </code></pre> <p>父类的静态方法，可以被子类继承。</p> <pre><code class="language-js">class Foo { static classMethod() { console.log('The static method of the parent class.') } } class Bar extends Foo {} // 可以在子类中调用父类的 classMethod 静态方法 Bar.classMethod() // "The static method of the parent class." </code></pre> <p>若子类也定义了 <code>classMethod</code> 静态方法，可以通过 <code>super</code> 对象调用父类的 <code>classMethod</code> 静态方法。</p> <pre><code class="language-js">class Foo { static classMethod() { console.log('The static method of the parent class.') } } class Bar extends Foo { static classMethod() { super.classMethod() // 调用父类静态方法 console.log('Static method of subclass.') } } Bar.classMethod() // "The static method of the parent class." // "Static method of subclass." </code></pre> <h2>九、静态属性</h2> <p>静态属性指的是 Class 本身的属性，即 <code>Class.propName</code>，而不是定义在实例对象上的属性。</p> <p><strong>目前，根据 ECMAScript 规定，Class 内部只有静态方法，没有静态属性</strong>。静态属性只能通过在 Class 外部定义。</p> <pre><code class="language-js">class Foo {} Foo.prop = 1 // 静态属性 prop const foo = new Foo() console.log(foo.prop) // undefined console.log(Foo.prop) // 1 </code></pre> <p>现在有一个<a href="https://github.com/tc39/proposal-class-fields">提案</a>提供了类的静态属性，写法是在属性签名加上 <code>static</code> 关键字。</p> <pre><code class="language-js">class Foo { static prop = 1 } </code></pre> <p>通过以上方式来定义静态属性，显然要比老式写法更好地组织代码，其语义更好。而老式写法往往很容易让人忽略这个静态属性。</p> <h2>十、私有方法和私有属性</h2> <p>在目前，在 Class 内部定义的属性和方法，在类的外部都是可以访问到的。</p> <p>而私有方法和私有属性的目的在于，它们只允许在 Class 内部访问，而外部是不能访问的。但由于目前 ECMAScript 标准并未提供，只能通过变通的方式模拟实现。</p> <ol> <li>通过命名加以区别</li> </ol> <pre><code class="language-js">class Foo { // 公有方法 bar() { this._baz() } // 私有方法，通过在变量方法名之前添加下划线 "_" 区分 _baz() { // do something... } } </code></pre> <p>但显然这仍然可在 <code>Foo</code> 实例对象中访问到 <code>instance._baz()</code>。</p> <ol start="2"> <li>将私有方法移出类</li> </ol> <pre><code class="language-js">class Foo { // 公有方法 bar(...args) { baz.apply(this, args) } } // 相当于私有方法 function baz() { // do something... } </code></pre> <p>以上示例，间接使得 <code>baz</code> 成了类的“私有方法”，它对类的实例是不可见的。</p> <ol start="3"> <li>利用 <code>Symbol</code> 的唯一性，将私有方法的名称命名为 <code>Symbol</code> 值。</li> </ol> <pre><code class="language-js">const _baz = Symbol('baz') class Foo { // 公有方法 bar(...args) { this[_baz].apply(this, args) } // 私有方法 [_baz]() { // do something... } } </code></pre> <p>以上示例中，<code>_bar</code> 是 <code>Symbol</code> 值，一般在封装类时不让其在获取到，以达到私有方法和私有属性的效果。但是仍然可通过 <code>Reflect.ownKeys()</code> 依然可以获取到。</p> <pre><code class="language-js">Reflect.ownKeys(Foo.prototype) // ["constructor", "bar", Symbol(baz)] </code></pre> <h3>私有属性的提案</h3> <p>目前，有一个<a href="https://github.com/tc39/proposal-private-methods">提案</a>为 Class 添加私有属性。在属性名之前，使用 <code>#</code> 表示。</p> <pre><code class="language-js">class Foo { // 公用属性 prop = 'public property' // 公有方法 bar(...args) { this.#bar.apply(this, args) } // 私有属性 #prop = 'private property' // 私有方法 #bar() { // do something... } } const foo = new Foo() foo.bar('bar') // Correct foo.prop // Correct Reflect.ownKeys(Foo.prototype) // ["constructor", "bar"] // 外部不可访问私有属性和私有方法，会报错。 // foo.#prop // Wrong, SyntaxError: Private field '#prop' must be declared in an enclosing class // foo.#bar() // Wrong </code></pre> <p>在上述示例中，<code>#prop</code>、<code>#bar</code> 就是私有属性和私有属性，且 <code>#</code> 是属性名的一部分，使用时也必须带有 <code>#</code>，因此 <code>#prop</code> 和 <code>prop</code> 是两个不同的属性。</p> <p>另外，私有属性也可以设置 <code>setter</code> 和 <code>getter</code> 方法。</p> <p>还有，私用属性和私有方法，前面也可以加上 <code>static</code> 关键字，使其成为静态的私有属性或方法。</p> <pre><code class="language-js">class Foo { // 静态属性 static prop = 'private property' // 静态私有属性 static #prop = 'static private property' // 静态方法 static bar() { console.log(Foo.prop) console.log(Foo.#prop) } // 静态私有方法 static #bar() { console.log(Foo.prop) console.log(Foo.#prop) } } // 正常访问 Foo.prop // "private property" Foo.bar() // "private property"、"static private property" // 以下报错 Foo.#prop // Private field '#prop' must be declared in an enclosing class Foo.#bar() </code></pre> <p>上面示例中，<code>#prop</code> 是静态私有属性，<code>#bar</code> 是静态私有方法，在 Class 外部是不能访问的，只能在内部使用。</p> <p>还有，静态的私有属性或方法，都是可以被子类继承的。</p> <pre><code class="language-js">class Bar extends Foo {} Bar.prop // Correct Bar.bar() // Correct </code></pre> <h2>十一、new.target 属性</h2> <p><code>new</code> 运算符是从构造函数生成实例对象的关键字。在构造函数是通过 <code>new</code> 或 <code>Reflect.constructor()</code> 调用的，那么 <code>new.target</code> 指向被被调用的构造函数，否则返回 <code>undefined</code>。</p> <p>因此，可以利用它来确保构造函数只能通过 <code>new</code> 关键字来调用。例如：</p> <pre><code class="language-js">function Point(x, y) { // 也可以这样判断：`new.target === Point` if (new.target !== undefined) { this.x = x this.y = y } else { throw new TypeError('Point() must be called with new.') } } const p1 = new Point(1, 2) // 正确使用方式 const p2 = Point(3, 4) // TypeError: Point() must be called with new. </code></pre> <p>而在类的构造方法中，<code>new.target</code> 指向**“直接”**被 <code>new</code> 执行的构造函数。那么，当子类继承父类时，在父类的构造方法中 new.target 指向子类。</p> <pre><code class="language-js">class Point { constructor(x, y) { this.x = x this.y = y // 若子类继承父类时，new.target 指向子类。 console.log(new.target === Point) // if (new.target === Point) { // throw new TypeError('The Point class cannot be instantiated.') // } } } class P extends Point { constructor(x, y, z) { super(x, y) this.z = z } } const point = new Point(1, 2) // 会打印 true const p = new P(1, 2, 3) // 会打印 false </code></pre> <p>利用此特性，可以写出不可独立使用，必须继承后才会使用的父类。如注释部分。</p> <p>若在函数外部使用 <code>new.target</code> 会抛出错误：</p> <pre><code class="language-js">new.target // SyntaxError: new.target expression is not allowed here </code></pre> <p><a href="https://github.com/tofrankie/blog/issues/252">下一篇</a>接着介绍 Class 继承...</p> <h2>十二、参考链接</h2> <ul> <li><a href="https://es6.ruanyifeng.com/#docs/class">Class 语法（阮一峰）</a></li> <li><a href="https://github.com/tofrankie/blog/issues/217">关于 ES6 Class 类</a></li> </ul> </article> <article> <h1>在事件处理函数中的 this</h1> <p>Sun, 26 Feb 2023 11:39:25 GMT</p> <p></p> <p>在 JavaScript 中，<code>this</code> 是一个很重要的关键字。此前写过一篇文章：<a href="https://github.com/tofrankie/blog/issues/236">this 详解</a>。本文内容主要介绍事件处理函数中如何使用 <code>this</code> 的几种方法及区别。</p> <blockquote> <p>注意，本文示例均在<strong>非严格模式</strong>下运作。而严格模式下，某些场景对 this 会有一些约束，具体可看这篇<a href="https://github.com/tofrankie/blog/issues/232">文章</a>。</p> </blockquote> <h2>一、Owner</h2> <p>我们将在本文讨论的问题是：在函数 <code>doSomething()</code> 中 <code>this</code> 指向的是什么？</p> <pre><code class="language-html"><script> function doSomething() { this.style.color = '#c00' } </script> </code></pre> <p>在 JavaScript 中， <code>this</code> 总是指我们正在执行的函数的“owner”，或者更确切地说，是指函数作为其方法的对象。当我们在页面中定义我们函数 <code>doSomething()</code> 时，它的“owner”是页面，或者更确切地说，是 JavaScript 的 <code>window</code> 对象（或全局对象）。但是，<code>onclick</code> 属性归它所属的 HTML 元素所有。</p> <p>这种“ownership”是 JavaScript 面向对象方法的结果。有关更多信息，请参阅<a href="https://www.quirksmode.org/js/associative.html">作为关联数组的对象</a>页面。</p> <pre><code class="language-text">------------ window -------------------------------------- | / \ | | | | | this | | ---------------- | | | | HTML element | <-- this ----------------- | | ---------------- | | doSomething() | | | | | ----------------- | | -------------------- | | | onclick property | | | -------------------- | | | ---------------------------------------------------------- </code></pre> <p>如果我们在没有任何准备的情况下执行 <code>doSomething()</code>，则 <code>this</code> 关键字指向 <code>window</code> 对象，该函数会尝试更改 <code>window</code> 对象的 <code>style.color</code>。由于 <code>window</code> 没有 <code>style</code> 对象，该函数会失败并产生 JavaScript 错误（TypeError）。</p> <h2>二、Copying</h2> <p>如果我们想充分利用 <code>this</code>，我们必须注意使用它的函数是由正确的 HTML 元素“拥有”的。换句话说，我们必须将函数复制到我们的 <code>onclick</code> 属性。<a href="https://www.quirksmode.org/js/events_tradmod.html">传统的事件注册</a>会处理它。</p> <pre><code class="language-js">element.onclick = doSomething </code></pre> <p>该函数被完整地复制到 <code>onclick</code> 属性（现在变成了一个方法）。因此，如果执行事件处理程序，<code>this</code> 会指向 HTML 元素，并且它的 <code>color</code> 会发生变化。</p> <pre><code class="language-text">------------ window -------------------------------------- | | | | | | | ---------------- | | | HTML element | <-- this ----------------- | | ---------------- | | doSomething() | | | | | ----------------- | | ----------------------- | | | |copy of doSomething()| <-- copy function | | ----------------------- | | | ---------------------------------------------------------- </code></pre> <p>当然是我们可以将函数复制到多个事件处理程序。每次 <code>this</code> 将指向正确的 HTML 元素：</p> <pre><code class="language-text">------------ window -------------------------------------- | | | | | | | ---------------- | | | HTML element | <-- this ----------------- | | ---------------- | | doSomething() | | | | | ----------------- | | ----------------------- | | | |copy of doSomething()| <-- copy function | | ----------------------- | | | | | | ----------------------- | | | | another HTML element| <-- this | | | ----------------------- | | | | | | | | | ----------------------- | | | |copy of doSomething()| <-- copy function | | ----------------------- | | | ---------------------------------------------------------- </code></pre> <p>因此，你可以最大程度地使用它。每次调用该函数时， <code>this</code> 指的是当前正在处理事件的 HTML 元素，即“拥有” <code>doSomething()</code> 副本的 HTML 元素。</p> <h2>三、Referring</h2> <p>但是，如果你使用<a href="https://www.quirksmode.org/js/events_early.html">内联事件注册</a>：</p> <pre><code class="language-html"><element onclick="doSomething()">doSomething...</element> </code></pre> <p>你不要复制功能！相反，你指向它，差异至关重要。<code>onclick</code> 属性不包含实际的函数，而只是一个函数调用：</p> <pre><code class="language-js">doSomething() </code></pre> <p>所以这相当于，前往 <code>doSomething()</code> 并执行它。当我们到达 <code>doSomething()</code> 时，<code>this</code> 关键字再次指向全局 <code>window</code> 对象，并且该函数返回错误消息（TypeError）。</p> <pre><code class="language-text">------------ window -------------------------------------- | / \ | | | | | this | | ---------------- | | | | HTML element | <-- this ----------------- | | ---------------- | | doSomething() | | | | | ----------------- | | ----------------------- / \ | | | go to doSomething() | | | | | and execute it | ---- reference to | | ----------------------- function | | | ---------------------------------------------------------- </code></pre> <h2>四、The difference</h2> <p>如果你想使用 <code>this</code> 来访问正在处理事件的 HTML 元素，你必须确保 <code>this</code> 关键字实际上已写入 <code>onclick</code> 属性。只有在这种情况下，<code>this</code> 才指向事件处理程序注册到的 HTML 元素。因此，如果你这样处理：</p> <pre><code class="language-js">element.onclick = doSomething alert(element.onclick) </code></pre> <p>你将会得到：</p> <pre><code class="language-js">function doSomething() { this.style.color = '#c00' } </code></pre> <p>如你所见，<code>this</code> 关键字存在于 <code>onclick</code> 方法中。因此 <code>this</code> 指向 HTML 元素。</p> <p>但是，如果你这样处理：</p> <pre><code class="language-html"><element onclick="doSomething()">doSomething...</element> alert(element.onclick) </code></pre> <p>你得到的是：</p> <pre><code class="language-js">function onclick(event) { doSomething() } </code></pre> <p>这仅仅是对函数 <code>doSomething()</code> 的引用。<code>onclick</code> 方法中不存在 <code>this</code> 关键字，因此 <code>this</code> 不指向 HTML 元素。</p> <h2>五、Examples - copying</h2> <p>以下情况 <code>this</code> 会写入 <code>onclick</code> 方法：</p> <pre><code class="language-js">element.onclick = doSomething element.addEventListener('click', doSomething, false) element.onclick = function () { this.style.color = '#c00' } <element onclick="this.style.color = '#c00'">doSomething...</element> </code></pre> <h2>六、Examples - referring</h2> <p>以下情况 <code>this</code> 指向 <code>window</code> 对象：</p> <pre><code class="language-js">element.onclick = function () { doSomething() } element.attachEvent('onclick', doSomething) <element onclick="doSomething()">doSomething...</element> </code></pre> <p>请注意 <code>attachEvent()</code> 的存在。 <a href="https://www.quirksmode.org/js/events_advanced.html">Microsoft 事件注册模型</a>的主要缺点是 <code>attachEvent()</code> 创建对函数的引用而不复制它。因此，有时无法知道当前是哪个 HTML 处理该事件。</p> <h2>七、Combination</h2> <p>使用内联事件注册时，你还可以将 <code>this</code> 发送到该函数，以便你仍然可以使用它：</p> <pre><code class="language-html"><element onclick="doSomething(this)">doSomething...</element> function doSomething(obj) { // `this` is present in the event handler and is sent to the function // `obj` now refers to the HTML element, so we can do obj.style.color = '#c00' } </code></pre>  <h2>八、References</h2> <ul> <li><a href="https://www.quirksmode.org/js/this.html">The this keyword</a></li> <li><a href="https://www.quirksmode.org/js/introevents.html">Introduction to Events</a></li> <li><a href="https://www.quirksmode.org/js/associative.html">Objects as associative arrays</a></li> <li><a href="https://www.quirksmode.org/js/events_tradmod.html">Traditional event registration model</a></li> <li><a href="https://www.quirksmode.org/js/events_early.html">Early event handlers</a></li> <li><a href="https://www.quirksmode.org/js/events_advanced.html">Advanced event registration models</a></li> </ul> </article> <article> <h1>使用 Nginx 搭建静态网站</h1> <p>Sun, 26 Feb 2023 11:36:21 GMT</p> <p></p> <p>开始建站了，暂时还没想要做些什么东西。</p> <p>Anyway，先搞个云服务器吧，那要怎么搭建呢？先来个最简单的。</p> <blockquote> <p>以阿里云服务器为例，假设公网 IP 为 <code>100.2.3.4</code>（随便乱写的）。</p> </blockquote> <h2>登录云服务</h2> <pre><code class="language-shell">$ ssh root@100.2.3.4 </code></pre> <h2>安装 Nginx 及相关命令</h2> <pre><code class="language-shell"># 安装 $ yum install nginx -y # 启动 $ nginx # 关闭 $ nginx -s stop # 重启 $ nginx -s reload </code></pre> <h2>Nginx 默认配置</h2> <p>Nginx 配置文件目录一般在 <code>/etc/nginx/</code> 下，打开 <code>nginx.conf</code> 文件可以看到配置：</p> <pre><code class="language-nginx">user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf; events { worker_connections 1024; } http { log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; include /etc/nginx/mime.types; default_type application/octet-stream; include /etc/nginx/conf.d/*.conf; server { listen 80 default_server; listen [::]:80 default_server; server_name _; root /usr/share/nginx/html; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } } </code></pre> <p>当外网用户访问服务器 Web 服务由 Nginx 提供，Nginx 需要配置静态资源的路径信息才能通过 URL 正确访问到服务器上的静态资源。</p> <p>当我们在服务器上安装并启动 Nginx 之后，就可以通过 <code>http://<域名或IP></code> 访问我们的网页了。所以，在浏览器中输入 <code>http://100.2.3.4</code> 即可。</p> <p></p> <p>我们观察到浏览器的地址变成了 <code>http://100.2.3.4/index.html</code>，这页面是安装 Nginx 的默认站点，可以在 <code>/usr/share/nginx/html</code> 目录下找到。在 <code>nginx.conf</code> 配置文件中，有一项 <code>root /usr/share/nginx/html</code> 的配置，意思是当外网访问服务器<strong>跟目录</strong>时，Nginx 会将资源指向 <code>/usr/share/nginx/html</code> 的站点。</p> <p>但如果输入地址，无法打开（如下截图）。</p> <p></p> <p>以阿里云为例，需要在云服务器添加<strong>安全组规则</strong>，添加并保存，重新刷新页面就能打开了。</p> <blockquote> <p>关于阿里云服务器安全组规则说明，推荐这篇<a href="https://blog.csdn.net/weixin_46628200/article/details/108918934">文章</a>。</p> </blockquote> <p></p> <h2>修改 Nginx 配置</h2> <p>我习惯将前端静态资源放置到服务器的 <code>/data/www</code> 下，因此将配置修改为 <code>root /data/www</code>。此时访问 <code>http://100.2.3.4</code> 会指向 <code>/data/www/index.html</code>（在不配置 <code>location</code> 的 <code>index</code> 情况下，Nginx 默认配置是 <code>index.html</code>）。</p> <pre><code>server { listen 80; server_name _; root /data/www; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } </code></pre> <blockquote> <p>修改配置后，记得执行 <code>ngnix -s reload</code> 重启 Nginx 服务。</p> </blockquote> <h2>将 Webpack 打包的文件上传服务器</h2> <p>由于我使用的是 Mac 机器，因此可以直接在系统终端使用 <code>scp</code> 命令将本地文件上传到云服务器。</p> <pre><code class="language-shell"># scp [参数] [原路径] [目标路径] $ scp -r /Users/frankie/Desktop/Web/react-demo/dist/* root@100.2.3.4:/data/www </code></pre> <p><code>scp</code>（secure copy）用于在 Linux 下进行远程拷贝文件的命令。类似于 <code>cp</code>，只不过 <code>cp</code> 只能在本机进行拷贝，不能跨服务器。<code>-r</code> 表示递归复制整个目录。</p> <blockquote> <p>关于 scp 更多细节，请看<a href="https://www.cnblogs.com/exmyth/p/9074722.html">文章</a>。</p> </blockquote> <p>需要注意一下，下面两种的区别：</p> <pre><code class="language-shell"># 1️⃣ $ scp -r /xxx/dist /data/www # 2️⃣ $ scp -r /xxx/dist/* /data/www </code></pre> <p>其中 1️⃣ 得到的是 <code>/data/www/dist</code>，而 2️⃣ 得到的是 <code>/data/www</code>。前者表示将 <code>dist</code> 整个目录拷贝至 <code>/data/www</code> 下。后者是把 <code>dist</code> 目录下的所有子文件和子目录都拷贝至 <code>/data/www</code>。</p> <p>换句话说就是，前者配置 <code>root</code> 的路径应该是 <code>/data/www/dist</code>，后者则为 <code>/data/www</code>。</p> <p>效果如下：</p> <pre><code class="language-shell">$ scp -r /Users/frankie/Desktop/Web/react-demo/dist/* root@100.2.3.4:/data/www/ root@100.2.3.4's password: bundle.2b1a17.js 100% 1580 120.1KB/s 00:00 favicon.ico 100% 9662 724.9KB/s 00:00 index.html 100% 2045 149.9KB/s 00:00 vendors.chunk.7fb171.js 100% 625KB 409.8KB/s 00:01 </code></pre> <pre><code>[root@ali-ecs www]# ls bundle.2b1a17.js favicon.ico index.html vendors.chunk.7fb171.js </code></pre> <h2>效果</h2> <p>在浏览器中访问 <code>http://100.2.3.4</code> 即可看到我们配置的网页了。</p> <p></p> <p>最简单的 Nginx 部署静态网页就完了，其他的下次再讲...</p> <p>The end.</p> </article> <article> <h1>JavaScript 之函数防抖、节流</h1> <p>Sun, 26 Feb 2023 11:33:34 GMT</p> <p></p> <p>写在前面，实际项目应使用 Lodash 等主流工具库，它们经过社区的反复验证，肯定比自己写的要完善很多。</p> <h2>前言</h2> <p>相信无论在实际应用场景、亦或是面试，都会经常遇得到函数防抖、函数节流等，下面我们来聊一聊吧。</p> <p>先放出一个示例：</p> <p></p> <pre><code class="language-jsx">import React, { useEffect, useRef } from 'react' import debounce from '../../utils/debounce' import throttle from '../../utils/throttle' import style from './index.scss' export default function Demo(props) { const inputElem1 = useRef() const inputElem2 = useRef() const inputElem3 = useRef() useEffect(() => { inputElem1.current.addEventListener('keyup', request) inputElem2.current.addEventListener('keyup', debounce(request, 1000)) inputElem3.current.addEventListener('keyup', throttle(request, 3000)) }, []) function request(event) { const { value } = event.target console.log(`Http request: ${value}.`) } return ( <div className={style.container}> <div className={style.list}> <label htmlFor="input1">普通输入框：</label> <input name="input1" ref={inputElem1} defaultValue="" /> </div> <div className={style.list}> <label htmlFor="input2">防抖输入框：</label> <input name="input2" ref={inputElem2} defaultValue="" /> </div> <div className={style.list}> <label htmlFor="input3">节流输入框：</label> <input name="input3" ref={inputElem3} defaultValue="" /> </div> </div> ) } </code></pre> <p>以上 Demo 只有三个输入框，很简单。我给每个输入框绑定了一个 <code>keyup</code> 键盘事件，该事件执行会发起网络请求（为了更简洁，这里只是打印一下而已），而对应防抖、节流输入框则经过相应的处理。</p> <h2>函数防抖（debounce）</h2> <p>如果我们在<strong>普通输入框</strong>快速键入 <code>12345</code>，可以从控制台上的打印结果看到，它会发起 5 次网络请求（假设我们这个是一个简单的搜索引擎）。</p> <p></p> <blockquote> <p>还不知道用什么截屏/录屏软件可以生成 GIF 动图，有时间再研究下...</p> </blockquote> <p>从实际场景考虑，如果每键入一个字符就立刻发起网络请求，去检索结果，这是非常影响体验的。假设我们限制为：<strong>用户在停止输入后 1s 后才发起网络请求。</strong></p> <p>要实现这样的需求，我们只有使用函数防抖即可。</p> <h3>什么是函数防抖？</h3> <p>概念：在一定时间间隔内，事件处理函数只会执行一次。若在该时间间隔内（多次）重新触发，则重新计时。</p> <p>怎么理解？</p> <ul> <li>假设用户键入字母 <code>a</code> 后就停止输入了，那么网络请求会在停止键入操作的 1s 后发起。这个很好理解。</li> <li>若用户继续键入字母 <code>b</code> 后，若有所思地停了一会（这个时间在 1s 之内，假设为 800ms 吧），接着键入字母 <code>c</code>，之后就停止键入了。<strong>网络请求会发生在键入字母 <code>c</code> 的 1s 后被发起，而不是键入字母 <code>b</code> 之后的 1s 发起</strong>。因为函数防抖会在键入 <code>c</code> 之后重新计时。</li> </ul> <h3>函数防抖实现</h3> <blockquote> <p>debounce(func, wait)</p> </blockquote> <p>实现思路：</p> <p>首先，接收两个参数 <code>func</code>（要防抖的函数，一般是事件回调函数）和 <code>wait</code>（需要延迟的时间间隔，单位毫秒）。然后 <code>func</code> 在 <code>setTimeout</code> 中执行，而 <code>setTimeout</code> 的延迟时间就是 <code>wait</code>。而重新计时的话，则在每次触发的时候 <code>clearTimeout</code> 即可实现。</p> <blockquote> <p>需要注意下，<code>func</code> 的执行上下文（<code>this</code>）及其入参。</p> </blockquote> <pre><code class="language-js">function debounce(func, wait) { let timerId // 为确保 this 指向正确，此处不能用箭头函数 return function (...args) { // 在 wait 时间内，若重新触发，清除 clearTiemout，以达到重新计时的效果 if (timerId) clearTimeout(timerId) timerId = setTimeout(() => { func.apply(this, args) }, wait) } } </code></pre> <p>依次在对应输入框内键入 <code>12345</code>，对比下防抖前后的结果：</p> <blockquote> <p>两次键入速度差不多，而且每个字符键入时间间隔小于 1s（可调大延迟执行时间，更容易对比）。</p> </blockquote> <pre><code class="language-js">// 普通输入框 inputElem1.current.addEventListener('keyup', request) // 防抖输入框 inputElem2.current.addEventListener('keyup', debounce(request, 1000)) </code></pre> <p>▼ 无防抖处理 </p> <p>▼ 防抖处理 </p> <p>对比以上无防抖处理和防抖处理的结果，可以看到前者每键入一个字符都会执行回调函数，而后者则会在最后一次触发的 N 毫秒（即 <code>wait</code> 延迟时间）之后才会执行一次回调函数。</p> <blockquote> <p>还有一种是“<strong>立即执行</strong>”的函数防抖：区别在于第一次触发时，是否立即执行回调函数。</p> </blockquote> <p>再结合以上的“<strong>非立即执行</strong>”的防抖，完整方法如下：</p> <pre><code class="language-js">function debounce(func, wait, immediate = false) { let timerId return function (...args) { if (timerId) clearTimeout(timerId) if (immediate && !timerId) { func.apply(this, args) } timerId = setTimeout(() => { func.apply(this, args) }, wait) } } </code></pre> <p>当我们修改成：</p> <pre><code class="language-js">inputElem2.current.addEventListener('keyup', debounce(request, 1000, true)) </code></pre> <p>从以下结果可以看到，当我在防抖输入框键入 <code>12345</code> 的时候，它会在键入 <code>1</code> 时立刻发起一次网络请求，由于每个字符键入的时间间隔都在 <code>1s</code> 之内，因此它只会在最后停止键入的 <code>1s</code> 后才会发起网络请求。</p> <p></p> <h2>函数节流（throttle）</h2> <p>概念：在一定时间间隔内只会触发一次函数。若在该时间间隔内触发多次函数，只有第一次生效。</p> <h3>函数节流实现</h3> <pre><code class="language-js">function throttle(func, wait) { // 记录上一次执行 func 的时间 let prev = 0 return function (...args) { // 当前触发的时间（时间戳） const now = Number(new Date()) // +new Date() // 单位时间内只会执行一次 if (now >= prev + wait) { // 符合条件执行 func 时，需要更新 prev 时间 prev = now func.apply(this, args) } } } </code></pre> <h3>函数节流优化</h3> <p>以上节流方法有个问题，假设节流控制间隔时间为 1s，若最后一次触发时间在 1.5s，则最后一次触发并不会执行。因此，需要在节流中嵌入防抖思想，以保证最后一次会被触发。</p> <pre><code class="language-js">function throttle(func, wait) { // 记录上一次执行 func 的时间 let prev = 0 let timerId return function (...args) { // 当前触发的时间（时间戳） const now = Number(new Date()) // +new Date() // 保证最后一次也会触发 // 我看到很多文章，将清除定时器的步骤放到 2️⃣ 里面 // 我认为应该放在这里才对，原因看我下面举例的场景。 if (timerId) clearTimeout(timerId) if (now >= prev + wait) { // 1️⃣ // 符合条件执行 func 时，需要更新 prev 时间 prev = now func.apply(this, args) } else { // 2️⃣ // 单位时间内只会执行一次 // if (timerId) clearTimeout(timerId) // 不应该放在这里 timerId = setTimeout(() => { prev = now func.apply(this, args) }, wait) } } } </code></pre> <p>假设我将 <code>clearTimeout()</code> 放在了 2️⃣ 里面，而不是在外层。基于 <code>throttle(func, 1000)</code> 考虑以下场景：</p> <blockquote> <p>我在 <code>4s</code> 时触发了一次，应该走 1️⃣ 逻辑。然后在 <code>4.9s</code> 时又触发了一次，这会走的 2️⃣ 逻辑并记录了一个定时任务。然后时间到了 <code>5s</code>，我又触发了一次（后面就停止操作了），它会走 1️⃣ 逻辑一次，接着时间来的 <code>5.9s</code>，它还会执行一遍 <code>fn.apply(this, args)</code>，因为在 <code>5s</code> 触发时，没有 <code>clearTimeout()</code>。因此，清除定时器的步骤应该放在外层，以保证每次被触发是都清掉最后一次的定时器，避免在一些边界 Case 触发两次。</p> </blockquote> <p>当然，以上场景是在理想的状态，实际场景可能几乎碰不到这些边界。但从严谨的角度去看问题，应该也要考虑的。</p> <blockquote> <p>写到这里，我又在想刚刚的“立即执行的函数防抖”，跟这个优化版的节流是不是有点像，第一次触发都会执行回调函数。但区别是防抖会重新计时，而节流在第一次触发后面的每个间隔时间点都会触发，非间隔点的最后一次触发也将会被执行。</p> </blockquote> <p>我在节流输入框内，依次键入 <code>1234567890</code>，可以看到：在键入字符 <code>1</code> 时执行了回调；接着键入的 <code>234</code>、<code>67</code> 字符都属在上一个时间间隔内，因此无法执行回调。其中键入的 <code>90</code> 字符应属于 <code>8</code> 之后的 1s 周期之内，由于键入 <code>0</code> 字符属于最后一次的非时间间隔内的触发动作，因此回调会在键入 <code>0</code> 的 1s 后被执行。（可打印时间戳的形式，更精细地对比）</p> <pre><code class="language-js">inputElem3.current.addEventListener('keyup', throttle(request, 1000)) </code></pre> <p>▼ 节流处理 </p> <h2>防抖与节流</h2> <p>其实，函数防抖和函数节流都是为了防止某个时间段频繁触发某个事件。它俩在某个时间间隔内多次重复触发，都只会执行一次回调函数。区别在于函数防抖最后一次触发有效，而函数节流则是第一次触发有效。</p> <p>而在上面，都对函数防抖和函数节流做了“拓展”，例如：</p> <ul> <li>在函数防抖中，增加了 <code>immediate</code> 的参数，用于控制第一次是否执行回调。</li> <li>在函数节流中，允许最后一次在非时间间隔的触发动作有效。</li> </ul> <p>应用场景：</p> <ul> <li> <p>函数防抖（debounce）</p> <ul> <li>搜索场景：防止用户不停地输入，来节约请求资源。</li> <li>window resize：调整浏览器窗口大小时，利用防抖使其只触发一次。</li> </ul> </li> <li> <p>函数节流（throttle）</p> <ul> <li>鼠标事件、mousemove 拖拽</li> <li>监听滚动事件</li> </ul> </li> </ul> <p>如果还是不太明白 debounce 和 throttle 的差异，可以在以下这个<a href="http://demo.nimius.net/debounce_throttle/">页面</a>，可视化体验。</p> <p></p>  <h2>类型标注</h2> <pre><code class="language-ts">function debounce<A extends any[], R>( func: (...args: A) => R, wait: number = 0, immediate: boolean = false ): (...args: A) => void { let timerId: number | undefined return function (this: any, ...args) { if (timerId) clearTimeout(timerId) if (immediate && !timerId) { func.apply(this, args) } timerId = setTimeout(() => { func.apply(this, args) }, wait) } } </code></pre> <pre><code class="language-ts">function throttle<A extends any[], R>(func: (...args: A) => R, wait: number): (...args: A) => void { let prev = 0 let timerId: number | undefined return function (this: any, ...args) { const now = Number(new Date()) if (timerId) clearTimeout(timerId) if (now >= prev + wait) { prev = now func.apply(this, args) } else { timerId = setTimeout(() => { prev = now func.apply(this, args) }, wait) } } } </code></pre> <p>看到有些库像下面这样标注，这里有个问题是 debounce 或 throttle 里 return 的函数是没有返回值的，也就是说，理应返回 <code>(...args: A) => void</code>，但实际返回了 <code>(...args: A) => R</code>，这样做其实不太对。但这样体验上有一个好处：在调用 throttledFn 时可以看到原函数返回值是什么类型。</p> <pre><code class="language-ts">function throttle<T>(func: T, wait: number): T { // ... } const throttledFn = throttle(function doSomething() {}, 100) </code></pre> <p>使用 JSDoc 注释（节流同理）</p> <pre><code class="language-js">/** * 函数防抖 * @template A, R * @param {(...args: A) => R} func 要防抖的函数 * @param {number} wait 防抖时间 * @param {boolean} [immediate=false] 立即执行 * @returns {(...args: A) => void} 返回被防抖处理的函数 */ export const debounce = (func, wait, immediate = false) => { let timerId return function (...args) { if (timerId) clearTimeout(timerId) if (immediate && !timerId) { func.apply(this, args) } timerId = setTimeout(() => { func.apply(this, args) }, wait) } } </code></pre> <h2>参考链接</h2> <ul> <li><a href="https://github.com/lodash/lodash/blob/master/debounce.js">Lodash debounce</a></li> <li><a href="https://zhuanlan.zhihu.com/p/38313717">函数防抖与函数节流（司徒正美大佬）</a></li> </ul> </article> <article> <h1>针对 Chrome 80 和 Chrome 91 对 Cookie SameSite 限制的解决方案</h1> <p>Sun, 26 Feb 2023 11:32:37 GMT</p> <p></p> <h2>背景</h2> <p>由于此前我的 Chrome 浏览器一直都是安装最新 Beta 版本，但是有一天因为该浏览器 Cookie 的 SameSite 属性的限制（Chrome 80 版本以后），导致跨域请求无法携带上 Cookie 了，导致在开发过程中遇阻了。</p> <h2>解决方法</h2> <p>自 Chrome 80 版本起，Chrome 更新了 SameSite 属性的默认值，由 <code>None</code> 改成了 <code>Lax</code>，主要用于限制第三方 Cookie，减少安全风险和用户追踪。基于 Chromium 的 Edge 浏览器，在对应版本也会有此限制哦。</p> <h3><s>方案一（不推荐）</s></h3> <p>安装 Chrome 80 以下版本。</p> <h3>方案二：针对 Chrome 80 以上，Chrome 91 以下的浏览器</h3> <p>浏览器地址输入 <code>chrome://flags/</code> 并前往，搜索 <a href="chrome://flags/#same-site-by-default-cookies"><code>SameSite by default cookies</code></a> 和 <a href="chrome://flags/#cookies-without-same-site-must-be-secure"><code>Cookies without SameSite must be secure</code></a>，将这两项设置为 <code>Disabled</code>，然后重启浏览器。</p> <h3>方案三：针对 Chrome 91 及更新版本</h3> <p>近期将 Google Chrome 升级到 91 版本之后，将上述提到的 <code>SameSite by default cookies</code> 和 <code>Cookies without SameSite must be secure</code> 直接屏蔽并设置为默认值（<code>Default</code>），所以我们原来的配置失效了，且再也无法通过上述方式去修改配置了。</p> <p><s>其中一个解决方法，还是降级到 Chrome 91 以下（仍然不推荐）。</s></p> <p>Windows 平台：</p> <p>在完全关闭 Chrome 浏览器的情况下，打开 Chrome 浏览器快捷方式，在目标后添加 <code>--disable-features=SameSiteByDefaultCookies</code> 保存。</p> <p></p> <blockquote> <p>Win 平台未亲测，方案和配图源自：<a href="https://juejin.cn/post/6967695146322247716">NgZaamPaang</a>。</p> </blockquote> <p>macOS 平台：</p> <p>前提还是完全关闭浏览器，根据不同的浏览器，选择不同的启动命令，在终端执行命令打开。</p> <pre><code class="language-shell"># Google Chrome $ open -a "Google Chrome" --args --disable-features=SameSiteByDefaultCookies # Microsoft Edge by Chromium $ open -a "Microsoft Edge" --args --disable-features=SameSiteByDefaultCookies </code></pre> <h3>方案四：针对未来版本（94 版本）</h3> <p>Chromium 项目官网提到在 94 版本通过命令行禁用设置 SameSite 默认值的方式会被移除，届时方案二和方案三的方式都将无法使用，后续可通过 Nginx 等代理工具或软件将跨域请求转为非跨域请求来解决改问题。</p> <p><a href="https://www.chromium.org/updates/same-site">官方描述如下</a>：</p> <blockquote> <p>The flags <code>#same-site-by-default-cookies</code> and <code>#cookies-without-same-site-must-be-secure</code> have been removed from <code>chrome://flags</code> as of Chrome 91, as the behavior is now enabled by default. In Chrome 94, the command-line flag <code>--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure</code> will be removed.</p> </blockquote> <h2>下载</h2> <p>Chrome 浏览器：</p> <ul> <li><a href="https://www.google.cn/intl/zh-CN/chrome/">正式版</a></li> <li><a href="https://www.google.com/intl/zh-CN/chrome/beta/?standalone=1&extra=betachannel">测试版</a></li> <li><a href="https://www.google.com/intl/zh-CN/chrome/browser/?standalone=1&extra=devchannel">开发版</a></li> <li><a href="https://www.google.com/chrome/canary">Canary 版本</a></li> </ul> <blockquote> <p><s>也可访问 <a href="https://www.chromedownloads.net/">Chrome Downloads</a> 下载其他历史版本，Mac/Win 版都挺全的。</s></p> </blockquote>  <p>Firefox 浏览器：</p> <ul> <li><a href="https://www.mozilla.org/zh-CN/firefox/">稳定版</a></li> <li><a href="https://www.mozilla.org/zh-CN/firefox/developer/">开发者中文版本</a></li> <li><a href="https://www.mozilla.org/zh-CN/firefox/channel/desktop/#beta">Beta 版本、Nightly 版本</a></li> </ul> <h2>参考链接</h2> <ul> <li><a href="https://blog.csdn.net/weixin_46146313/article/details/117707199">Chrome 91 版本 SameSite by default cookies 被移除后的解决方案</a></li> <li><a href="https://juejin.cn/post/6967695146322247716">Chrome 中跨域 POST 请求无法携带 Cookie 的解决方案</a></li> <li><a href="https://gadzan.com/chrome-edge-91hou">Chrome/Edge 91 版本 SameSite by default cookies 被移除后的解决方案</a></li> <li><a href="http://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html">Cookie 的 SameSite 属性（阮一峰）</a></li> <li><a href="https://mp.weixin.qq.com/s?__biz=Mzg2NDAzMjE5NQ%3D%3D&chksm=ce6eccfff91945e990e0b21e777f5a85f3f0699f7d51e45a1dd83d0bf36eaf926f7e90fbe3ff&idx=1&lang=zh_CN&mid=2247485523&scene=21&sn=e7f3989448f5ff1e8905fc6596268e33&token=379611469#wechat_redirect">当浏览器全面禁用三方 Cookie</a></li> </ul> </article> <article> <h1>超详细的 JavaScript 深拷贝实现</h1> <p>Sun, 26 Feb 2023 11:27:14 GMT</p> <p></p> <h2>一、JSON.stringify() 的缺陷</h2> <p>利用内置的 JSON 静态方法，可以实现简易的深拷贝：</p> <pre><code class="language-js">const obj = { // ... } JSON.parse(JSON.stringify(obj)) // 序列化与反序列化 </code></pre> <p>它可以满足大部分应用场景，毕竟很少去拷贝函数之类的。</p> <pre><code class="language-js">JSON.stringify(value[, replacer[, space]]) </code></pre> <p>简单总结：</p> <ul> <li> <p>布尔值、数值、字符串对应的包装对象，在序列化过程会自动转换成其原始值。</p> </li> <li> <p><code>undefined</code>、任意函数、<code>Symbol</code> 值，在序列化过程有两种不同的情况。</p> <ul> <li>若出现在非数组对象的属性值中，会被忽略。</li> <li>若出现在数组中，会转换成 <code>null</code>。</li> </ul> </li> <li> <p><code>任意函数</code>、<code>undefined</code> 被单独转换时，会返回 <code>undefined</code>。</p> </li> <li> <p>所有以 <code>Symbol</code> 为属性键的属性都会被忽略，即便在第二个参数 <code>replacer</code> 中指定了该属性。</p> </li> <li> <p><code>Date</code> 调用了其内置的 <code>toJSON()</code> 方法转换成字符串，因此会被当初字符串处理。</p> </li> <li> <p><code>NaN</code> 和 <code>Infinity</code> 的数值及 <code>null</code> 都会当做 <code>null</code>。</p> </li> <li> <p>这些对象 <code>Map</code>、<code>Set</code>、<code>WeakMap</code>、<code>WeakSet</code> 仅会序列化可枚举的属性。</p> </li> <li> <p>被转换值如果含有 <code>toJSON()</code> 方法，该方法定义什么值将被序列化。</p> </li> <li> <p>对包含循环引用的对象进行序列化，会抛出错误。</p> </li> </ul> <p>从命名来看，我认为它们只是方便我们操作符合 JSON 格式的 JavaScript 对象或符合 JSON 格式的字符串。</p> <blockquote> <p>JSON 是一种数据格式，也可以说是一种规范。JSON 是用于跨平台数据交流的，独立于语言和平台。而 JavaScript 对象是一个实例，存在于内存中。JavaScript 对象是没办法传输的，只有在被序列化为 JSON 字符串后才能传输。</p> </blockquote> <p>它只是恰好能满足一些简单的深拷贝需求而已。</p> <h2>二、边界条件</h2> <p>其实实现一个较为完整的深拷贝，要处理很多边界条件。比如：</p> <ul> <li>循环引用</li> <li>包装对象</li> <li>函数</li> <li>原型链</li> <li>不可枚举属性</li> <li>Map/WeakMap、Set/WeakSet</li> <li>RegExp</li> <li>Symbol</li> <li>Date</li> <li>ArrayBuffer</li> <li>原生 DOM/BOM 对象</li> <li>...</li> </ul> <blockquote> <p>至于要不要考虑那么多边界条件，视实际需求而定。</p> </blockquote> <p>目前，最完善的深拷贝方法应该是 Lodash 的 <a href="https://www.lodashjs.com/docs/lodash.cloneDeep"><code>_.cloneDeep()</code></a> 方法。<s>实际项目中，如需处理 <code>JSON.stringify()</code> 无法解决的 Case，我会推荐使用它</s>。</p> <p>本文旨在学习，以上边界条件都会尽可能兼顾到。这样，无论日后实现特殊的深拷贝，还是面试，都可以从容应对。</p> <h2>三、实现</h2> <blockquote> <p>以下将会逐步实现，完整示例放在文末。</p> </blockquote> <p>使用递归思路实现。先写一个简易版本：</p> <pre><code class="language-js">const deepCopy = source => { // 判断是否为数组 const isArray = arr => Object.prototype.toString.call(arr) === '[object Array]' // 判断是否为引用类型 const isObject = obj => obj !== null && (typeof obj === 'object' || typeof obj === 'function') // 拷贝（递归思路） const copy = input => { if (typeof input === 'function' || !isObject(input)) return input const output = isArray(input) ? [] : {} for (let key in input) { if (input.hasOwnProperty(key)) { const value = input[key] output[key] = copy(value) } } return output } return copy(source) } </code></pre> <p>以上简易版本还存在很多情况要特殊处理，接下来针对 <code>JSON.stringify()</code> 的缺陷，一点一点去完善它。</p> <h3>3.1 针对布尔值、数值、字符串的包装对象的处理</h3> <blockquote> <p>需要注意的是，从 ES6 开始围绕原始数据类型创建一个显式包装器对象不再被支持。但由于遗留原因，现有的原始包装器对象（如 <code>new Boolean</code>、<code>new Number</code>、<code>new String</code>）仍可使用。这也是 ES6+ 新增的 <code>Symbol</code>、<code>BigInt</code> 数据类型无法通过 <code>new</code> 关键字创建实例对象的原因。</p> </blockquote> <p>由于 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 无法遍历<strong>不可枚举</strong>的属性。例如，包装对象的 <code>[[PrimitiveValue]]</code> 内部属性，因此需要我们特殊处理一下。</p> <p></p> <p>以上结果，显然不是预期结果。包装对象的 <code>[[PrimitiveValue]]</code> 属性可通过 <code>valueOf()</code> 方法获取。</p> <pre><code class="language-js">const deepCopy = source => { // 获取数据类型（本次新增） const getClass = x => Object.prototype.toString.call(x) // 判断是否为数组 const isArray = arr => getClass(arr) === '[object Array]' // 判断是否为引用类型 const isObject = obj => obj !== null && (typeof obj === 'object' || typeof obj === 'function') // 判断是否为包装对象（本次新增） const isWrapperObject = obj => { const theClass = getClass(obj) const type = /^\[object (.*)\]$/.exec(theClass)[1] return ['Boolean', 'Number', 'String', 'Symbol', 'BigInt'].includes(type) } // 处理包装对象（本次新增） const handleWrapperObject = obj => { const type = getClass(obj) switch (type) { case '[object Boolean]': return Object(Boolean.prototype.valueOf.call(obj)) case '[object Number]': return Object(Number.prototype.valueOf.call(obj)) case '[object String]': return Object(String.prototype.valueOf.call(obj)) case '[object Symbol]': return Object(Symbol.prototype.valueOf.call(obj)) case '[object BigInt]': return Object(BigInt.prototype.valueOf.call(obj)) default: return undefined } } // 拷贝（递归思路） const copy = input => { if (typeof input === 'function' || !isObject(input)) return input // 处理包装对象（本次新增） if (isWrapperObject(input)) { return handleWrapperObject(input) } // 其余部分没变，为了减少篇幅，省略一万字... } return copy(source) } </code></pre> <p>我们在控制台打印一下结果，可以看到是符合预期结果的。</p> <p></p> <h3>3.2 针对函数的处理</h3> <p>直接返回就好了，一般不用处理。在实际应用场景需要拷贝函数太少了...</p> <pre><code class="language-js">const copy = input => { if (typeof input === 'function' || !isObject(input)) return input } </code></pre> <h3>3.3 针对以 Symbol 值作为属性键的处理</h3> <p>由于以上 <code>for...in</code> 方法无法遍历 <code>Symbol</code> 的属性键，因此：</p> <pre><code class="language-js">const sym = Symbol('desc') const obj = { [sym]: 'This is symbol value' } console.log(deepCopy(obj)) // {}，拷贝结果没有 [sym] 属性 </code></pre> <p>这里，我们需要用到两个方法：</p> <ul> <li> <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">Object.getOwnPropertySymbols()</a> 它返回一个对象自身的所有 Symbol 属性的数组，包括不可枚举的属性。</p> </li> <li> <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">Object.prototype.propertyIsEnumerable()</a> 它返回一个布尔值，表示指定的属性是否可枚举。</p> </li> </ul> <pre><code class="language-js">const copy = input => { // 其它不变 for (let key in input) { // ... } // 处理以 Symbol 值作为属性键的属性（本次新增） const symbolArr = Object.getOwnPropertySymbols(input) if (symbolArr.length) { for (let i = 0, len = symbolArr.length; i < len; i++) { if (input.propertyIsEnumerable(symbolArr[i])) { const value = input[symbolArr[i]] output[symbolArr[i]] = copy(value) } } } // ... } </code></pre> <p>下面我们对 <code>source</code> 对象做拷贝操作：</p> <pre><code class="language-js">const source = {} const sym1 = Symbol('1') const sym2 = Symbol('2') Object.defineProperties(source, { [sym1]: { value: 'This is symbol value.', enumerable: true }, [sym2]: { value: 'This is a non-enumerable property.', enumerable: false } } ) </code></pre> <p>打印结果，也符合预期结果：</p> <p></p> <h3>3.4 针对 Date 对象的处理</h3> <p>其实，处理 <code>Date</code> 对象，跟上面提到的包装对象的处理是差不多的。暂时先放到 <code>isWrapperObject()</code> 和 <code>handleWrapperObject()</code> 中处理。</p> <pre><code class="language-js">const deepCopy = source => { // 其他不变... // 判断是否为包装对象（本次更新） const isWrapperObject = obj => { const theClass = getClass(obj) const type = /^\[object (.*)\]$/.exec(theClass)[1] return ['Boolean', 'Number', 'String', 'Symbol', 'BigInt', 'Date'].includes(type) } // 处理包装对象 const handleWrapperObject = obj => { const type = getClass(obj) switch (type) { // 其他 case 不变 // ... case '[object Date]': return new Date(obj.valueOf()) // new Date(+obj) default: return undefined } } // 其他不变... } </code></pre> <h3>3.5 针对 Map、Set 对象的处理</h3> <p>同样的，暂时先放到 <code>isWrapperObject()</code> 和 <code>handleWrapperObject()</code> 中处理。</p> <p>利用 Map、Set 对象的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols">Iterator</a> 特性和自身的方法，可以快速解决。</p> <pre><code class="language-js">const deepCopy = source => { // 其他不变... // 判断是否为包装对象（本次更新） const isWrapperObject = obj => { const theClass = getClass(obj) const type = /^\[object (.*)\]$/.exec(theClass)[1] return ['Boolean', 'Number', 'String', 'Symbol', 'BigInt', 'Date', 'Map', 'Set'].includes(type) } // 处理包装对象 const handleWrapperObject = obj => { const type = getClass(obj) switch (type) { // 其他 case 不变 // ... case '[object Map]': { const map = new Map() obj.forEach((item, key) => { // 需要注意的是，这里的 key 不能深拷贝，否则就会失去引用了 // 具体原因可以思考一下，不难。想不明白再评论区吧 map.set(key, copy(item)) }) return map } case '[object Set]': { const set = new Set() obj.forEach(item => { set.add(copy(item)) }) return set } default: return undefined } } // 其他不变... } </code></pre> <p>打印下结果：</p> <p></p> <h3>3.6 针对循环引用的问题</h3> <p>以下是一个循环引用（circular reference）的对象：</p> <pre><code class="language-js">const foo = { name: 'Frankie' } foo.bar = foo </code></pre> <p>上面提到 <code>JSON.stringify()</code> 无法处理循环引用的问题，我们在控制台打印一下：</p> <p></p> <p>从结果可以看到，当对循环引用的对象进行序列化处理时，会抛出类型错误：<code>Uncaught TypeError: Converting circular structure to JSON</code>。</p> <p>接着，使用自行实现的 <code>deepCopy()</code> 方法，看下结果是什么：</p> <p></p> <p>我们看到，在拷贝循环引用的 <code>foo</code> 对象时，发生栈溢出了。</p> <blockquote> <p>在另一篇<a href="https://github.com/tofrankie/blog/issues/228">文章</a>，我提到过使用 <a href="https://github.com/douglascrockford/JSON-js">JSON-js</a> 可以处理循环引用的问题，具体用法是，先引入其中的 <code>cycle.js</code> 脚本，然后 <code>JSON.stringify(JSON.decycle(foo))</code> 就 OK 了。但究其根本，它使用了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap">WeakMap</a> 去处理。</p> </blockquote> <p>那我们去实现一下：</p> <pre><code class="language-js">const deepCopy = source => { // 创建一个 WeakMap 对象，记录已拷贝过的对象（本次新增） const weakmap = new WeakMap() // 中间这块不变，省略一万字... // 拷贝（递归思路） const copy = input => { if (typeof input === 'function' || !isObject(input)) return input // 针对已拷贝过的对象，直接返回（本次新增，以解决循环引用的问题） if (weakmap.has(input)) { return weakmap.get(input) } // 处理包装对象 if (isWrapperObject(input)) { return handleWrapperObject(input) } const output = isArray(input) ? [] : {} // 记录每次拷贝的对象 weakmap.set(input, output) for (let key in input) { if (input.hasOwnProperty(key)) { const value = input[key] output[key] = copy(value) } } // 处理以 Symbol 值作为属性键的属性 const symbolArr = Object.getOwnPropertySymbols(input) if (symbolArr.length) { for (let i = 0, len = symbolArr.length; i < len; i++) { if (input.propertyIsEnumerable(symbolArr[i])) { output[symbolArr[i]] = input[symbolArr[i]] } } } return output } return copy(source) } </code></pre> <p>先看看打印结果，不会像之前一样溢出了。</p> <p></p> <p>需要注意的是，这里不使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a> 而是 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap">WeakMap</a> 的原因：</p> <p>首先，Map 的键属于强引用，而 WeakMap 的键则属于弱引用。且 WeakMap 的键必须是对象，WeakMap 的值则是任意的。</p> <p>由于它们的键与值的引用关系，决定了 Map 不能确保其引用的对象不会被垃圾回收器回收的引用。假设我们使用的 Map，那么图中的 <code>foo</code> 对象和我们深拷贝内部的 <code>const map = new Map()</code> 创建的 <code>map</code> 对象一直都是强引用关系，那么在程序结束之前，<code>foo</code> 不会被回收，其占用的内存空间一直不会被释放。</p> <p>相比之下，原生的 WeakMap 持有的是每个键对象的“弱引用”，这意味着在没有其他引用存在时垃圾回收能正确进行。原生 WeakMap 的结构是特殊且有效的，其用于映射的 key 只有在其没有被回收时才是有效的。</p> <p>基本上，如果你要往对象上添加数据，又不想干扰垃圾回收机制，就可以使用 WeakMap。</p> <blockquote> <p>可看 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap#why_weakmap">Why WeakMap?</a></p> </blockquote> <p>我们熟知的 Lodash 库的深拷贝方法，自实现了一个类似 WeakMap 特性的构造函数去处理循环引用的。（<a href="https://github.com/lodash/lodash/blob/master/.internal/baseClone.js#L199-L205">详见</a>）</p> <p>这里提供另一个思路，也是可以的。</p> <pre><code class="language-js">const deepCopy = source => { // 其他一样，省略一万字... // 创建一个数组，将每次拷贝的对象放进去 const copiedArr = [] // 拷贝（递归思路） const copy = input => { if (typeof input === 'function' || !isObject(input)) return input // 循环遍历，若有已拷贝过的对象，则直接放回，以解决循环引用的问题 for (let i = 0, len = copiedArr.length; i < len; i++) { if (input === copiedArr[i].key) return copiedArr[i].value } // 处理包装对象 if (isWrapperObject(input)) { return handleWrapperObject(input) } const output = isArray(input) ? [] : {} // 记录每一次的对象 copiedArr.push({ key: input, value: output }) // 后面的流程不变... } return copy(source) } </code></pre> <blockquote> <p>此前实现有个 bug，感谢虾虾米指出，现已更正。</p> </blockquote> <p>请在实现深拷贝之后测试以下示例：</p> <pre><code class="language-js">const foo = { name: 'Frankie' } foo.bar = foo const cloneObj = deepCopy(foo) // 自实现深拷贝 const lodashObj = _.cloneDeep(foo) // Lodash 深拷贝 // 打印结果如下，说明是正确的 console.log(lodashObj.bar === lodashObj) // true console.log(lodashObj.bar === foo) // false console.log(cloneObj.bar === cloneObj) // true console.log(cloneObj.bar === foo) // false </code></pre> <h3>3.7 针对正则表达式的处理</h3> <p>正则表达式里面，有两个非常重要的属性：</p> <ul> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/source">RegExp.prototype.source</a> 返回当前正则表达式对象的模式文本的字符串。注意，这是 ES6 新增的属性。</li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/flags">RegExp.prototype.flags</a> 返回当前正则表达式对象标志。</li> </ul> <pre><code class="language-js">const { source, flags } = /\d/g console.log(source) // "\\d" console.log(flags) // "g" </code></pre> <p>有了以上两个属性，我们就可以使用 <code>new RegExp(pattern, flags)</code> 构造函数去创建一个正则表达式了。</p> <pre><code class="language-js">const { source, flags } = /\d/g const newRegex = new RegExp(source, flags) // /\d/g </code></pre> <p>但需要注意的是，正则表达式有一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex"><code>lastIndex</code></a> 属性，该属性可读可写，其值为整型，用来指定下一次匹配的起始索引。在设置了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/global"><code>global</code></a> 或 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky"><code>sticky</code></a> 标志位的情况下（如 <code>/foo/g</code>、<code>/foo/y</code>），JavaScript <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> 对象是<strong>有状态</strong>的。他们会将上次成功匹配后的位置记录在 <code>lastIndex</code> 属性中。</p> <p>因此，上述拷贝正则表达式的方式是有缺陷的。看示例：</p> <pre><code class="language-js">const re1 = /foo*/g const str = 'table football, foosball' let arr while ((arr = re1.exec(str)) !== null) { console.log(`Found ${arr[0]}. Next starts at ${re1.lastIndex}.`) } // 以上语句会输出，以下结果： // "Found foo. Next starts at 9." // "Found foo. Next starts at 19." // 当我们修改 re1 的 lastIndex 属性时，输出以下结果： re1.lastIndex = 9 while ((arr = re1.exec(str)) !== null) { console.log(`Found ${arr[0]}. Next starts at ${re1.lastIndex}.`) } // "Found foo. Next starts at 19." // 以上这些相信你们都都懂。 </code></pre> <p>所以，你可以发现以下示例，打印结果是不一致的，原因就是使用 <code>RegExp</code> 构造函数去创建一个正则表达式时，<code>lastIndex</code> 会默认设为 <code>0</code>。</p> <pre><code class="language-js">const re1 = /foo*/g const str = 'table football, foosball' let arr // 修改 lastIndex 属性 re1.lastIndex = 9 // 基于 re1 拷贝一个正则表达式 const re2 = new RegExp(re1.source, re1.flags) console.log('re1:') while ((arr = re1.exec(str)) !== null) { console.log(`Found ${arr[0]}. Next starts at ${re1.lastIndex}.`) } console.log('re2:') while ((arr = re2.exec(str)) !== null) { console.log(`Found ${arr[0]}. Next starts at ${re2.lastIndex}.`) } // re1: // expected output: "Found foo. Next starts at 19." // re2: // expected output: "Found foo. Next starts at 9." // expected output: "Found foo. Next starts at 19." </code></pre> <p>因此：</p> <pre><code class="language-js">const deepCopy = source => { // 其他不变，省略... // 处理正则表达式 const handleRegExp = regex => { const { source, flags, lastIndex } = regex const re = new RegExp(source, flags) re.lastIndex = lastIndex return re } // 拷贝（递归思路） const copy = input => { if (typeof input === 'function' || !isObject(input)) return input // 正则表达式 if (getClass(input) === '[object RegExp]') { return handleRegExp(input) } // 后面不变，省略... } return copy(source) } </code></pre> <p>打印结果也是符合预期的：</p> <p></p> <p>由于 <code>RegExp.prototype.flags</code> 是 ES6 新增属性，我们可以看下 ES5 是如何实现的（源自 Lodash）：</p> <pre><code class="language-js">/** Used to match `RegExp` flags from their coerced string values. */ var reFlags = /\w*$/; /** * Creates a clone of `regexp`. * * @private * @param {Object} regexp The regexp to clone. * @returns {Object} Returns the cloned regexp. */ function cloneRegExp(regexp) { var result = new regexp.constructor(regexp.source, reFlags.exec(regexp)); result.lastIndex = regexp.lastIndex; return result; } </code></pre> <p>但还是那句话，都 2021 年了，兼容 ES5 的问题就放心交给 Babel 吧。</p> <h3>3.8 处理原型</h3> <blockquote> <p>注意，这里只实现类型为 <code>"[object Object]"</code> 的对象的原型拷贝。例如数组等不处理，因为这些情况实际场景太少了。</p> </blockquote> <p>主要是修改以下这一步骤：</p> <pre><code class="language-js">const output = isArray(input) ? [] : {} </code></pre> <p>主要利用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create"><code>Object.create()</code></a> 来创建 <code>output</code> 对象，改成这样：</p> <pre><code class="language-js">const initCloneObject = obj => { // 处理基于 Object.create(null) 或 Object.create(Object.prototype.__proto__) 的实例对象 // 其中 Object.prototype.__proto__ 就是站在原型顶端的男人 // 但我留意到 Lodash 库的 clone 方法对以上两种情况是不处理的 if (obj.constructor === undefined) { return Object.create(null) } // 处理自定义构造函数的实例对象 if (typeof obj.constructor === 'function' && (obj !== obj.constructor || obj !== Object.prototype)) { const proto = Object.getPrototypeOf(obj) return Object.create(proto) } return {} } const output = isArray(input) ? [] : initCloneObject(input) </code></pre> <p>来看下打印结果，可以看到 <code>source</code> 的原型对象已经拷贝过来了：</p> <p></p> <p>再来看下 <code>Object.create(null)</code> 的情况，也是预期结果。</p> <p></p> <p>我们可以看到 Lodash 的 <code>_.cloneDeep(Object.create(null))</code> 深拷贝方法并没有处理这种情况。当然了，要拷贝这种数据结构在实际应用场景，真的少之又少...</p> <p></p> <blockquote> <p>关于 Lodash 拷贝方法为什么不实现这种情况，我找到了一个相关的 Issue <a href="https://github.com/lodash/lodash/issues/588">lodash #588</a>：</p> <p>A shallow clone won't do that as it's just <code>_.assign({}, object)</code> and a deep clone is loosely based on the structured cloning algorithm and doesn't attempt to clone inheritance or lack thereof.</p> </blockquote> <h2>四、优化</h2> <p>综上所述，完整但<strong>未优化</strong>的深拷贝方法如下：</p> <pre><code class="language-js">const deepCopy = source => { // 创建一个 WeakMap 对象，记录已拷贝过的对象 const weakmap = new WeakMap() // 获取数据类型 const getClass = x => Object.prototype.toString.call(x) // 判断是否为数组 const isArray = arr => getClass(arr) === '[object Array]' // 判断是否为引用类型 const isObject = obj => obj !== null && (typeof obj === 'object' || typeof obj === 'function') // 判断是否为包装对象 const isWrapperObject = obj => { const theClass = getClass(obj) const type = /^\[object (.*)\]$/.exec(theClass)[1] return ['Boolean', 'Number', 'String', 'Symbol', 'BigInt', 'Date', 'Map', 'Set'].includes(type) } // 处理包装对象 const handleWrapperObject = obj => { const type = getClass(obj) switch (type) { case '[object Boolean]': return Object(Boolean.prototype.valueOf.call(obj)) case '[object Number]': return Object(Number.prototype.valueOf.call(obj)) case '[object String]': return Object(String.prototype.valueOf.call(obj)) case '[object Symbol]': return Object(Symbol.prototype.valueOf.call(obj)) case '[object BigInt]': return Object(BigInt.prototype.valueOf.call(obj)) case '[object Date]': return new Date(obj.valueOf()) // new Date(+obj) case '[object Map]': { const map = new Map() obj.forEach((item, key) => { map.set(key, copy(item)) }) return map } case '[object Set]': { const set = new Set() obj.forEach(item => { set.add(copy(item)) }) return set } default: return undefined } } // 处理正则表达式 const handleRegExp = regex => { const { source, flags, lastIndex } = regex const re = new RegExp(source, flags) re.lastIndex = lastIndex return re } const initCloneObject = obj => { if (obj.constructor === undefined) { return Object.create(null) } if (typeof obj.constructor === 'function' && (obj !== obj.constructor || obj !== Object.prototype)) { const proto = Object.getPrototypeOf(obj) return Object.create(proto) } return {} } // 拷贝（递归思路） const copy = input => { if (typeof input === 'function' || !isObject(input)) return input // 正则表达式 if (getClass(input) === '[object RegExp]') { return handleRegExp(input) } // 针对已拷贝过的对象，直接返回（解决循环引用的问题） if (weakmap.has(input)) { return weakmap.get(input) } // 处理包装对象 if (isWrapperObject(input)) { return handleWrapperObject(input) } const output = isArray(input) ? [] : initCloneObject(input) // 记录每次拷贝的对象 weakmap.set(input, output) for (let key in input) { if (input.hasOwnProperty(key)) { const value = input[key] output[key] = copy(value) } } // 处理以 Symbol 值作为属性键的属性 const symbolArr = Object.getOwnPropertySymbols(input) if (symbolArr.length) { for (let i = 0, len = symbolArr.length; i < len; i++) { if (input.propertyIsEnumerable(symbolArr[i])) { const value = input[symbolArr[i]] output[symbolArr[i]] = copy(value) } } } return output } return copy(source) } </code></pre> <p>接下来就是优化工作了...</p> <h3>4.1 优化一</h3> <p>我们上面使用到了 <code>for...in</code> 和 <code>Object.getOwnPropertySymbols()</code> 方法去遍历对象的属性（包括字符串属性和 Symbol 属性），还涉及了可枚举属性和不可枚举属性。</p> <ul> <li><a href=""><strong>for...in</strong></a>：遍历<strong>自身</strong>和<strong>继承过来</strong>的<strong>可枚举</strong>属性（不包括 Symbol 属性）。</li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><strong>Object.keys</strong></a>：返回一个数组，包含<strong>对象自身</strong>所有<strong>可枚举</strong>属性（不包括不可枚举属性和 Symbol 属性）</li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames"><strong>Object.getOwnPropertyNames</strong></a>：返回一个数组，包含<strong>对象自身</strong>的属性（包括不可枚举属性，但不包括 Symbol 属性）</li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols"><strong>Object.getOwnPropertySymbols</strong></a>：返回一个数组，包含<strong>对象自身</strong>的所有 Symbol 属性（包括可枚举和不可枚举属性）</li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys"><strong>Reflect.ownKeys</strong></a>：返回一个数组，包含<strong>自身所有</strong>的属性（包括 Symbol 属性，不可枚举属性以及可枚举属性）</li> </ul> <blockquote> <p>由于我们仅拷贝可枚举的字符串属性和可枚举的 Symbol 属性，因此我们将 <code>Reflect.ownKeys()</code> 和 <code>Object.prototype.propertyIsEnumerable()</code> 结合使用即可。</p> </blockquote> <p>所以，我们将以下这部分：</p> <pre><code class="language-js">for (let key in input) { if (input.hasOwnProperty(key)) { const value = input[key] output[key] = copy(value) } } // 处理以 Symbol 值作为属性键的属性 const symbolArr = Object.getOwnPropertySymbols(input) if (symbolArr.length) { for (let i = 0, len = symbolArr.length; i < len; i++) { if (input.propertyIsEnumerable(symbolArr[i])) { const value = input[symbolArr[i]] output[symbolArr[i]] = copy(value) } } } </code></pre> <p>优化成：</p> <pre><code class="language-js">// 仅遍历对象自身可枚举的属性（包括字符串属性和 Symbol 属性） Reflect.ownKeys(input).forEach(key => { if (input.propertyIsEnumerable(key)) { output[key] = copy(input[key]) } }) </code></pre> <h3>4.2 优化二</h3> <p>优化 <code>getClass()</code>、<code>isWrapperObject()</code>、<code>handleWrapperObject()</code>、<code>handleRegExp()</code> 及其相关的类型判断方法。</p> <p>由于 <code>handleWrapperObject()</code> 原意是处理包装对象，但是随着后面要处理的特殊对象越来越多，为了减少文章篇幅，暂时都写在里面了，稍微有点乱。</p> <p>因此下面我们来整合一下，部分处理函数可能会修改函数名。</p> <h2>五、最后</h2> <p>其实，上面提到的一些边界 Case、或者其他一些特殊对象（如 <code>ArrayBuffer</code> 等），这里并没有处理，但我认为该完结了，因为这些在实际应用场景真的太少了。</p> <p>代码已放在 GitHub 👉 <a href="https://github.com/tofrankie/utils">tofrankie/utils</a>。</p> <p>还是那句话：</p> <blockquote> <p>[!IMPORTANT] <strong>如果生产环境使用 <code>JSON.stringify()</code> 无法解决你的需求，请使用 <a href="https://www.lodashjs.com/">Lodash</a> 库的 <a href="https://www.lodashjs.com/docs/lodash.cloneDeep"><code>_.cloneDeep()</code></a> 方法，那个才叫面面俱到。千万别用我这方法，切记！</strong></p> </blockquote> <p>这篇文章主要面向学习、面试（手动狗头），或许也可以帮助你熟悉一些对象的特性。如有不足，欢迎指出，万分感谢 👋 ~</p> <p>终于终于终于......要写完了，吐了三斤血...</p> <p>最终版本如下：</p> <pre><code class="language-js">const deepCopy = source => { // 创建一个 WeakMap 对象，记录已拷贝过的对象 const weakmap = new WeakMap() // 获取数据类型，返回值如："Object"、"Array"、"Symbol" 等 const getClass = x => { const type = Object.prototype.toString.call(x) return /^\[object (.*)\]$/.exec(type)[1] } // 判断是否为数组 const isArray = arr => getClass(arr) === 'Array' // 判断是否为引用类型 const isObject = obj => obj !== null && (typeof obj === 'object' || typeof obj === 'function') // 判断是否为“特殊”对象（需要特殊处理） const isSepcialObject = obj => { const type = getClass(obj) return ['Boolean', 'Number', 'String', 'Symbol', 'BigInt', 'Date', 'Map', 'Set', 'RegExp'].includes(type) } // 处理特殊对象 const handleSepcialObject = obj => { const type = getClass(obj) const Ctor = obj.constructor // 对象的构造函数 const primitiveValue = obj.valueOf() // 获取对象的原始值 switch (type) { case 'Boolean': case 'Number': case 'String': case 'Symbol': case 'BigInt': // 处理包装对象 Wrapper Object return Object(primitiveValue) case 'Date': return new Ctor(primitiveValue) // new Date(+obj) case 'RegExp': { const { source, flags, lastIndex } = obj const re = new RegExp(source, flags) re.lastIndex = lastIndex return re } case 'Map': { const map = new Ctor() obj.forEach((item, key) => { // 注意，即使 Map 对象的 key 为引用类型，这里也不能 copy(key)，否则会失去引用，导致该属性无法访问得到。 map.set(key, copy(item)) }) return map } case 'Set': { const set = new Ctor() obj.forEach(item => { set.add(copy(item)) }) return set } default: return undefined } } // 创建输出对象（原型拷贝关键就在这一步） const initCloneObject = obj => { if (obj.constructor === undefined) { return Object.create(null) } if (typeof obj.constructor === 'function' && (obj !== obj.constructor || obj !== Object.prototype)) { const proto = Object.getPrototypeOf(obj) return Object.create(proto) } return {} } // 拷贝方法（递归思路） const copy = input => { if (typeof input === 'function' || !isObject(input)) return input // 针对已拷贝过的对象，直接返回（解决循环引用的问题） if (weakmap.has(input)) { return weakmap.get(input) } // 处理包装对象 if (isSepcialObject(input)) { return handleSepcialObject(input) } // 创建输出对象 const output = isArray(input) ? [] : initCloneObject(input) // 记录每次拷贝的对象 weakmap.set(input, output) // 仅遍历对象自身可枚举的属性（包括字符串属性和 Symbol 属性） Reflect.ownKeys(input).forEach(key => { if (input.propertyIsEnumerable(key)) { output[key] = copy(input[key]) } }) return output } return copy(source) } </code></pre> <h2>六、参考链接</h2> <ul> <li><a href="https://github.com/lodash/lodash/blob/2f79053d7bc7c9c9561a30dda202b3dcd2b72b90/cloneDeep.js">Lodash</a></li> <li><a href="https://juejin.cn/post/6844903986479251464">原生 JS 灵魂之问(中)，检验自己是否真的熟悉 JavaScript？</a></li> </ul> </article> <article> <h1>浏览器内核及渲染过程杂谈</h1> <p>Sun, 26 Feb 2023 11:26:16 GMT</p> <p></p> <p>网页依赖于浏览器这个宿主环境，那么它是如何渲染，怎样显示在屏幕上的呢？</p> <h2>一、浏览器内核</h2> <p>浏览器主要由用户界面、浏览器内核、数据存储、网络等组成。而浏览器内核分为两部分：<strong>渲染引擎</strong>（Rendering Engine）和 <strong>JS 引擎</strong>（JavaScript Engine）。</p> <p>渲染引擎常被称为“浏览器内核”，主要功能是解析 HTML、CSS 进行页面渲染，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎也被称为排版引擎（Layout Engine）、浏览器引擎（Browser Engine）。而 JS 引擎负责 JavaScript 脚本的解析、编译和执行。</p> <p>早期内核的概念并没有明确区分渲染引擎和 JS 引擎，现在 JS 引擎已经独立出来，而我们常说的浏览器内核通常指的是渲染引擎。我们知道 JavaScript 是 ECMAScript 标准的一种实现，JavaScript 在浏览器端实现还必须包括 DOM 和 BOM。</p> <h3>1.1 浏览器内核</h3> <p>下面列举一些常见的<a href="https://www.wikiwand.com/en/Browser_engine">浏览器引擎</a>：</p> <ul> <li> <p>Chrome：早期使用 <a href="https://www.wikiwand.com/zh-hans/WebKit">WebKit</a> 引擎，自 2013 年起使用 <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Blink">Blink</a> 引擎。Blink 派生自 WebKit 的一个分支。注意：iOS 版本的 Chrome 使用了 iOS 平台的渲染引擎，而非 Blink。</p> </li> <li> <p>FireFox：使用 <a href="https://www.wikiwand.com/zh-hans/Gecko">Gecko</a> 内核。</p> </li> <li> <p>Opera：早期采用 <a href="https://www.wikiwand.com/zh-hans/Elektra">Elektra</a>、<a href="https://www.wikiwand.com/zh-hans/Presto">Presto</a> 引擎，自 2013 年起使用 Blink 引擎。</p> </li> <li> <p>Safari：采用 <a href="https://www.wikiwand.com/zh-hans/WebKit">WebKit</a> 引擎。WebKit 早期源自 <a href="https://www.wikiwand.com/zh-hans/KHTML">KHTML</a> 引擎。</p> </li> <li> <p>IE：采用 <a href="https://www.wikiwand.com/zh-hans/Trident_(%E6%8E%92%E7%89%88%E5%BC%95%E6%93%8E)">Trident</a> 引擎，又称为 MSHTML。</p> </li> <li> <p>Edge：自 2015 年 1 月 25 日发布 Microsoft Edge 浏览器，其内核使用 <a href="https://www.wikiwand.com/zh-hans/EdgeHTML">EdgeHTML</a> 引擎（EdgeHTML 是 Trident 的一个分支）。从 2020 年 1 月 15 日发布基于 <a href="https://www.wikiwand.com/zh-hans/Chromium">Chromium</a> 的 Edge 浏览器，使用 Blink 引擎。</p> </li> </ul> <p> ▲ Timeline</p> <blockquote> <p>苹果要求其平台下浏览器必须使用 WebKit 渲染引擎，所以一些浏览器在不同平台，其内核是不一样的。（查看当前浏览器内核：<a href="https://ie.icoa.cn/">浏览器内核版本检测</a>）。</p> </blockquote> <h3>1.2 JS 引擎</h3> <p>一些常见的 <a href="https://www.wikiwand.com/en/Chakra_(JavaScript_engine)">JS 引擎</a>：</p> <ul> <li> <p>Chrome：采用 <a href="https://www.wikiwand.com/en/V8_(JavaScript_engine)">V8</a> 引擎。V8 引擎除了在 Google Chrome、基于 Chromium 的浏览器中使用，也被使用于服务端，如 <a href="https://nodejs.org/en/">Node.js</a> 等。</p> </li> <li> <p>FireFox：各版本所采用引擎的情况：<a href="https://www.wikiwand.com/zh-hans/SpiderMonkey">SpiderMonkey</a>（1.0 ~ 3.0）、TraceMonkey（3.5 ~ 3.6）、JägerMonkey（4.0 ~）。</p> </li> <li> <p>Opera：各版本所采用引擎的情况：Opera Linear A（4.0 ~ 6.1）、Linear B（7.0 ~ 9.2）、Futhark（9.5 ~ 10.2）、<a href="https://www.wikiwand.com/en/Presto_(browser_engine)">Carakan</a>（10.5 ~）</p> </li> <li> <p>Safari：采用 <a href="https://www.wikiwand.com/zh/WebKit#/JavaScriptCore">JavaScriptCore</a> 引擎。</p> </li> <li> <p>IE：在 IE3 ~ IE8 采用 <a href="https://www.wikiwand.com/zh-hans/JScript">JScript</a> 引擎，IE9 ~ IE11 使用 <a href="https://www.wikiwand.com/zh-hans/Chakra_(JScript%E5%BC%95%E6%93%8E)">Chakra</a> 引擎。</p> </li> <li> <p>Edge：采用 <a href="https://www.wikiwand.com/en/Chakra_(JavaScript_engine)">Chakra</a> 引擎，而基于 Chromium 的 Edge 浏览器则使用 V8 引擎。</p> </li> </ul> <h3>1.3 浏览器引擎前缀</h3> <p>浏览器厂商们有时会给实验性的或者非标准的 CSS 属性和 JavaScript API 添加前缀，这样开发者就可以用这些新的特性进行试验。</p> <p>CSS 前缀：</p> <ul> <li><code>-webkit-</code>（Chrome、Safari、新版 Opera 浏览器，以及几乎所有 iOS 系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于 WebKit 内核的浏览器）。</li> <li><code>-moz-</code>（Firefox 浏览器）</li> <li><code>-o-</code>（旧版 Opera 浏览器）</li> <li><code>-ms-</code>（IE 浏览器和旧版 Edge 浏览器）</li> </ul> <pre><code class="language-css">div { -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease; } </code></pre> <p>API 前缀：</p> <p>接口前缀，需要大写的前缀修饰接口名：</p> <ul> <li><code>WebKit</code>（Chrome、Safari、新版 Opera 浏览器，以及几乎所有 iOS 系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于 WebKit 内核的浏览器）。</li> <li><code>MOZ</code>（Firefox 浏览器）</li> <li><code>O</code>（旧版 Opera 浏览器）</li> <li><code>MS</code>（IE 浏览器和旧版 Edge 浏览器）</li> </ul> <p>属性和方法前缀，需要使用小写的前缀修饰属性或者方法：</p> <ul> <li><code>webkit</code>（Chrome、Safari、新版 Opera 浏览器，以及几乎所有 iOS 系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于 WebKit 内核的浏览器）。</li> <li><code>moz</code>（Firefox 浏览器）</li> <li><code>o</code>（旧版 Opera 浏览器）</li> <li><code>ms</code>（IE 浏览器和旧版 Edge 浏览器）</li> </ul> <pre><code class="language-js">const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame </code></pre> <h2>二、网页生成过程</h2> <p>首先，渲染引擎从网络层请求到 HTML 文档，然后进行如下所示的基本流程：</p> <p> ▲ Rendering Engine Basic Flow</p> <p>以 WebKit 为例，主流程如下：</p> <p> ▲ WebKit Main Flow</p> <blockquote> <p>至于 Mozilla 的 Gecko，整体流程跟 WebKit 基本相同，术语稍有不同。例如 WebKit 的 <code>Layout</code>（布局），在 Gecko 上称为 <code>Reflow</code>（重排）。由于本文并非两者的差异，因此不展开赘述，详情看 <a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Introduction_to_Layout_in_Mozilla">Introduction to Layout in Mozilla Overview</a>。</p> </blockquote> <p>大致过程：</p> <ol> <li>渲染引擎开始解析 HTML 文档，构建出 <code>DOM Tree</code>。</li> <li>同时解析外部 CSS 文件以及样式元素中的样式数据，构建出 <code>CSSOM Tree</code>，即上图的 Style Rules。</li> <li>结合 <code>DOM Tree</code> 和 <code>CSSOM Tree</code>，生成一个 <code>Render Tree</code>（渲染树）。</li> <li>接着进入 <code>Layout</code> （布局）处理阶段，即将 <code>Render Tree</code> 的所有节点分配一个应出现在屏幕上的确切坐标。</li> <li>下一个是 <code>Painting</code> （绘制）阶段，渲染引擎会遍历 <code>Render Tree</code> 将每个节点绘制出来。</li> </ol> <p>需要着重指出的是，这是一个渐进的过程。为了达到更好的用户体验，渲染引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建 Render Tree 和设置 Layout。在不断接收和处理来自网络的其余内容的同时，渲染引擎会将部分内容解析并显示出来。</p> <blockquote> <p>其中 <code>DOM</code> 是 Document Object Model 的简写，而 <code>CSSOM</code> 则是 CSS Object Model 的简写。</p> </blockquote> <p>需要注意的是：</p> <p><code>Render Tree</code> 和 <code>DOM Tree</code> 是相对应的，但并不是一一对应的。非可视化的元素不会插入 <code>Render Tree</code> 中，如 HTML 的 <code>head</code> 元素。如果元素的 <code>display</code> 为 <code>none</code>，那么也不会显示在 <code>Render Tree</code> 中，但是 <code>visibility</code> 为 <code>hidden</code> 的元素仍会显示。</p> <h2>三、解析</h2> <p><strong>解析</strong>是渲染引擎中非常重要的一个环节。</p> <h3>3.1 什么是解析？</h3> <p>解析文档是指将文档转化为有意义的结构，也就是可让代码理解和使用的结构。解析得到的结果通常是代表了文档结构的节点树，它被称作“解析树”或“语法树”。</p> <p> ▲ From source document to parse tree</p> <p>解析分为两个过程：词法分析（Lexical Analysis）和语法分析（Syntax Analysis）。</p> <p>词法分析是将输入内容分割成大量有效的标记（<code>token</code>）的过程。<code>token</code> 是语言词汇，是组成内容最小的元素。语法分析是指应用语言的语法规则的过程。</p> <p>解析器是这样工作的：词法分析器（Lexer）负责将输入内容分割成一个个有效的 <code>token</code>；而解析器（Parser）负责根据语言的语法规则分析文档结构，从而构建出解析树（Parse Tree）。词法分析器知道如何将无关的字符（如空格、换行符等）分离出来。</p> <p>举个例子，我们在 <a href="https://astexplorer.net/#/gist/e2d0fc90d6891eee271cacba32c51ee2/ce16e705e3113d6df7298a4d8a9b7336fb99f1e7">AST Explorer</a> 网站将以下这段 HTML 文档解析成“树”结构。</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <h1>Hello,</h1> <p id="name">I'm Frankie.</p> </body> </html> </code></pre> <p></p> <blockquote> <p>假设我们要访问 <code><p></code> 标签的 <code>id</code> 属性值，如果不将其先解析为“树”的话，应该会想到使用正则表达式去匹配源文档，若需要获取的属性各种各样，显然正则表达式会很麻烦。但现在，我们可以通过类似 <code>document.html.body.p.attrs.id</code> 的形式来获取其值。</p> <p>如果你对浏览器如何将 HTML 生成“抽象语法树”（AST），可以看下这个库：<a href="https://github.com/inikulin/parse5">parse5</a>。</p> </blockquote> <h3>3.2 翻译</h3> <p>很多时候，语法树（解析树）并不是最终的产品。解析通常在翻译过程中使用的，而翻译是指将输入文档转换成另一种格式。编译就是这样一个例子。编译器可以将源代码（source code）编译成机器代码（machine code）。</p> <p> ▲ Compilation flow</p> <h2>四、处理脚本和样式表的顺序</h2> <h3>4.1 脚本</h3> <p>网络的模型是同步的。网页作者希望解析器遇到 <code><script></code> 标记时立即解析并执行脚本。文档的解析将停止，直到脚本执行完毕。如果脚本是外部的，那么解析过程会停止，直到从网络同步抓取资源完成后再继续。此模型已经使用了多年，也在 HTML4 和 HTML5 规范中进行了指定。作者也可以将脚本标注为 <code>defer</code>，这样它就不会停止文档解析，而是等到解析结束才执行。HTML5 增加了一个选项，可将脚本标记为异步（<code>async</code>），以便由其他线程解析和执行。</p> <h3>4.2 预解析</h3> <p>WebKit 和 Gecko 都进行了这项优化。在执行脚本时，其他线程会解析文档的其余部分，找出并加载需要通过网络加载的其他资源。通过这种方式，资源可以子在并行连接上加载，从而提高总体速度。</p> <p>需要注意的是，预解析器不会修改 DOM Tree，而是将这项工作交由主解析器处理。预解析器只会解析外部资源（例如外部脚本、样式表和图片）的引用。</p> <p>未完待续...</p>  </article> <article> <h1>JavaScript 编程风格（书写习惯）</h1> <p>Sun, 26 Feb 2023 11:20:42 GMT</p> <p>一门编程语言的“语法规则”（grammar）应该是每一位开发者都必须遵循的；而“编程风格”则可自由选择。</p> <p>假设团队中有 100 位成员，然后每位成员的 coding 风格都不一样，而且团队中没有明确的编写规范，那 Code Review 的时候，不得打起来，或者内心口吐芬芳......所以，社区中出现了很多 Lint 工具来帮助团队去规范书写习惯，如 <a href="https://eslint.org/">ESLint</a>、<a href="https://prettier.io/">Prettier</a> 等等...</p> <blockquote> <p>“编程风格”的选择不应该基于个人爱好、熟悉程度、打字工作量等因素，而要考虑如何尽量使代码清晰易读、减少出错。你选择的，不是你喜欢的风格，而是一种能够清晰表达你的意图的风格。</p> </blockquote> <p>推荐 JavaScript 权威 <a href="https://www.crockford.com/sugar.html">Douglas Crockford</a> 的一篇<a href="https://www.youtube.com/watch?v=taaEzHI9xyY&ab_channel=YUILibrary">演讲</a>。</p> <h2>一、大括号位置</h2> <blockquote> <p><strong>规则 1：表示区块起首的大括号，不要另起一行。</strong></p> </blockquote> <p>绝大多数的编程语言，都用大括号 <code>{}</code> 表示区块（block），JavaScript 也一样。</p> <p>常见的写法有以下两种：</p> <pre><code class="language-js">// bad block { // ... } </code></pre> <pre><code class="language-js">// good block { // ... } </code></pre> <p>由于 JavaScript 的 <a href="https://github.com/tofrankie/blog/issues/223">自动插入分号</a>（Automatic Semicolon Insertion，简称 ASI）机制，导致一些难以察觉的错误。</p> <p>因此，原则上更推荐后者的写法：<strong>起首的大括号跟在关键字的后面</strong>。</p> <p>例如：</p> <pre><code class="language-js">return { key: 'value' } </code></pre> <p>上面的代码原意是要返回一个对象，但实际上返回值为 <code>undefined</code>。因为 ASI 的原因，JavaScript 解析器会在<code>return</code> 后面插入分号 <code>;</code>，由于分号是终止符，解析器就认为这个语句结束了。</p> <p>类似 <code>return</code> 的特定语句，在 ASI 中被称为 <code>restricted production</code>。它包括以下几个语法，均不能换行：</p> <ul> <li>后缀表达式 <code>++</code> 和 <code>--</code></li> <li><code>return</code></li> <li><code>continue</code></li> <li><code>break</code></li> <li><code>throw</code></li> <li>ES6 的箭头函数（参数和箭头之间不能换行）</li> <li><code>yield</code></li> </ul> <p>这些无需死记，因为按照一般的书写习惯，几乎没有人会这样换行的。如果有的话，打 si 它。</p> <h2>二、圆括号的位置</h2> <p>圆括号（parentheses）在 JavaScript 中有两种作用，一种是表示调用函数，另一种是表示不同的值的组合（grouping）。我们可以用空格区分两种不同的圆括号。</p> <blockquote> <p><strong>规则 2：调用函数的时候，函数名与左括号之间没有空格。</strong></p> </blockquote> <pre><code class="language-js">// bad foo (bar) // good foo(bar) </code></pre> <blockquote> <p><strong>规则 3：函数名与参数序列之间，没有空格。</strong></p> </blockquote> <pre><code class="language-js">// bad function fn (foo) { // ... } // good function fn(foo) { // ... } </code></pre> <blockquote> <p><strong>规则 4：所有其他语法元素与左括号之间，都有一个空格。</strong></p> </blockquote> <pre><code>// bad return(foo + bar) // good return (foo + bar) </code></pre> <p>上面这个示例，其实最好去掉圆括号，其实在这句语句里面它是不需要圆括号的。这里只是为了举例而已。</p> <p>相信很多人对以上三条建议，不屑一顾。2021 年了，那就交给 <a href="https://prettier.io/">Prettier</a> 处理吧。</p> <h2>三、不要省略分号</h2> <blockquote> <p><strong>规则 5：不要省略句末的分号。</strong></p> </blockquote> <p>其实我是偏向 <strong>semicolon-less</strong> 风格，我认为通篇少了 99% 的分号，看起来会简洁很多。</p> <blockquote> <p>之前写个一篇文章是关于自动插入分号的：<a href="https://github.com/tofrankie/blog/issues/223">JavaScript ASI 机制详解</a></p> </blockquote> <p>但是这时候，有人就会举出类似示例，来反对“无分号党”了：</p> <pre><code class="language-js">a = b (function () { // ... }) </code></pre> <p>由于 ASI 机制，JavaScript 解析器看到的会是这这样子：</p> <pre><code class="language-js">a = b(function () { // ... }); </code></pre> <p>是的，这样就得不到预期的结果。但是作为合格的 semicolon-less 风格的码农（俗称 coder），如果一条语句是以 <code>(</code>、<code>[</code>、<code>/</code>、<code>+</code>、<code>-</code> 开头，我们会在该语句的行首主动键入分号来避免分号 <code>;</code> 来避免 ASI 机制产生的非逾期结果或报错。</p> <p>在实际项目中，以 <code>/</code>、<code>+</code>、<code>-</code> 作为行首的代码其实是很少的，<code>(</code>、<code>[</code> 也是较少的。</p> <p>**如果你说这很容易忘记键入分号，那说明你不是合格的“无分号党”，那还是乖乖敲分号吧！**或许多数人更容易忘记，所以才有了“不要省略句末分号”的推荐写法吧。（算是少数服从多数的妥协吧）</p> <blockquote> <p>对于不加思考而一味否定 semicolon-less 的人，我还是给出尤大那句话：<strong>所有直觉性的 “当然应该加分号” 都是保守的、未经深入思考的草率结论。</strong></p> </blockquote> <h2>四、with 语句</h2> <blockquote> <p><strong>规则 6：不要使用 <code>with</code> 语句。</strong></p> </blockquote> <pre><code class="language-js">with (obj) { foo = bar } </code></pre> <p>上面的代码，可能会产生四种运行结果：</p> <pre><code class="language-js">obj.foo = bar obj.foo = obj.bar foo = bar foo = obj.bar </code></pre> <p>以上四种结果都可能发生，取决于不同的变量是否有定义。因此，建议不要使用 <code>with</code> 语句。</p> <h2>五、相等与严格相等</h2> <blockquote> <p><strong>规则 7：尽可能不要使用相等运算符（==），而使用全等运算符（===）。</strong></p> </blockquote> <p>此前针对相等运算符与全等运算符，写了一篇文章：<a href="https://github.com/tofrankie/blog/issues/240">JavaScript 相等比较详解</a>，文章开头就有如下这句话：</p> <blockquote> <p>Always use 3 equals unless you have a good reason to use 2.</p> </blockquote> <p>主要原因是，使用相等运算符对两个不同类型的操作数进行比较时，JavaScript 内部会“偷偷”进行了类型转换。</p> <pre><code class="language-js">0 == '' // true 2 == true // false 0 == '0' // true false == '0' // true ' \t\r\n ' == 0 // true </code></pre> <h2>六、语句的合并</h2> <p>有些开发者追求“过分”简洁，喜欢合并不同目的的语句。</p> <p>例如，原语句是：</p> <pre><code class="language-js">a = b if (a) { ... } </code></pre> <p>他喜欢写成下面这样：</p> <pre><code class="language-js">if (a = b) { ... } </code></pre> <p>虽然语句少了一行，但是可读性大打折扣，而且会造成误读，让别人误以为这行代码的意思是：</p> <pre><code class="language-js">if (a === b) { ... } </code></pre> <p>另外一种情况是，有些开发者喜欢在同一行中赋值多个变量：</p> <pre><code class="language-js">// 非严格模式 var a = b = 0 </code></pre> <p>它可能认为，上面的代码相当于：</p> <pre><code class="language-js">var a = 0, b = 0 </code></pre> <p>但实际上不是，它的真正效果是下面这样：</p> <pre><code class="language-js">// 这里指非严格模式（严格模式下会报错，不允许这种默认全局变量的写法） b = 0 var a = b </code></pre> <p>因此，不建议将不同目的的语句合并成一行。</p> <h2>七、变量声明</h2> <p>在 JavaScript 中，有一个非常著名的<strong>变量提升</strong>（<a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting">Hoisting</a>）概念，相信都知道。</p> <p>不管我们实际项目中怎样，作为一个合格或不合格的 Jser，都应该去了解清楚提升是什么鬼，好吧。之前写了一篇文章：<a href="https://github.com/tofrankie/blog/issues/211">深入了解 JavaScript 从预编译到解析执行的过程</a>。（PS：当初写得不好，建议看 MDN 或 ECMAScript 标准）</p> <p>就一句话：</p> <blockquote> <p>先声明，后调用。</p> </blockquote> <p>还有都 2021 年了，尽可能别用 <code>var</code> 了，用 <code>let</code>、<code>const</code> 吧。至于兼容就放心交给 <a href="https://www.babeljs.cn/">Babel</a> 吧！</p> <pre><code class="language-js">// bad if (!obj) { var obj = {} } // good var obj if (!obj) { obj = {} } </code></pre> <p>为了避免可能出现的问题，不如把变量声明都放在代码块的头部。</p> <pre><code class="language-js">// bad for (var i ...) { ... } // good var i for (i ...) { ... } </code></pre> <p>因此，</p> <blockquote> <p><strong>规则 9：所有变量声明都放在函数的头部。</strong></p> </blockquote> <blockquote> <p><strong>规则 10：所有函数都在使用之前定义。</strong></p> </blockquote> <h2>八、全局变量</h2> <p>Javascript 最大的语法缺点，可能就是全局变量对于任何一个代码块，都是可读可写。这对代码的模块化和重复使用，非常不利。</p> <blockquote> <p><strong>规则 11：避免使用全局变量；如果不得不使用，用大写字母表示变量名，比如 <code>UPPER_CASE</code>。</strong></p> </blockquote> <h2>九、new 关键字</h2> <p>JavaScript 使用 new 关键字，从构造函数生成一个新对象。</p> <pre><code class="language-js">var obj = new myObject() </code></pre> <p>这种做法的问题是，一段你忘了加上 <code>new</code> 关键字，<code>myObject()</code> 内部的 <code>this</code> 关键字就会指向全局对象（严格模式下 <code>this</code> 为 <code>undefined</code>），导致所有绑定在 this 上的变量，都变成了全局变量。</p> <blockquote> <p><strong>规则 12：不要使用 <code>new</code> 关键字，改用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a> 来创建新对象。</strong></p> </blockquote> <blockquote> <p><strong>规则 13：构造函数的函数名，采用首字母大写（InitialCap）的书写方式；其他的函数名，一律首字母小写。</strong></p> </blockquote> <p>当然，构造函数名称首字母大写，只是约定俗成的一种书写方式而已，不影响实际运行。像 ESLint 就有一个 <a href="https://github.com/eslint/eslint/blob/master/lib/rules/new-cap.js">new-cap</a> 规则去检查这种写法的。</p> <h2>十、自增和自减运算符</h2> <p>自增 <code>++</code> 和自减 <code>--</code> 运算符，放在操作数的前面或后面，返回值是不一样的，很容易发生错误。</p> <p>说实话，我到现在还经常记不太清这俩玩意。有时候遇到，还特地去查阅一番以确认是否预期运行。</p> <p>所以我也是使用 <code>+= 1</code> 或 <code>-= 1</code> 去替代它的。ESLint 也有一个规则 <a href="https://github.com/eslint/eslint/blob/master/docs/rules/no-plusplus.md">no-plusplus</a> 去限制这种写法。</p> <pre><code class="language-js">// bad ++i // good i += 1 </code></pre> <p>听说某 JS 库源码出现了以下代码片段：</p> <pre><code class="language-js">++i; ++i; // 怎么看，更合理的写法应该是： i += 2 </code></pre> <p>因此，</p> <blockquote> <p><strong>规则 14：不要使用自增（<code>++</code>）和自减（<code>--</code>），使用 <code>+=</code> 和 <code>-=</code> 代替。</strong></p> </blockquote> <p>其实我的习惯是，仅允许 <code>for</code> 的 <code>final-expression</code> 使用自增或自减，其他的不允许，所以 ESLint 规则可以这样写。</p> <pre><code class="language-js">/* eslint no-plusplus: ["error", { "allowForLoopAfterthoughts": true }] */ for (let i = 0; i < 10; i++) { // 上面 final-expression 允许自增、自减，但循环体本身不允许 } </code></pre> <p>详见：<a href="https://github.com/toFrankie/blog/issues/127">no-plusplus</a>。</p> <h2>十一、总结</h2> <p>综上所述，总结成一句话：<strong>爱咋咋地</strong>。</p> <p>都 2021 年了，项目都继承 ESLint、Prettier 了吧，那上面的很多毛病，它们基本上都给你处理了。但我们应该要了解下背后的原因，对吧。</p> <p>对于有强迫症的我，还要继承 <a href="https://github.com/csscomb/csscomb.js">CSScomb</a>，去对 CSS 进行排序。示例：<a href="https://github.com/tofrankie/csscomb-mini">tofrankie/csscomb-mini</a></p> <h2>十二、参考链接</h2> <ul> <li><a href="http://www.ruanyifeng.com/blog/2012/04/javascript_programming_style.html">Javascript 编程风格（阮一峰）</a></li> </ul> </article> <article> <h1>CORS 详解，终于不用担心跨域问题了</h1> <p>Sun, 26 Feb 2023 11:19:00 GMT</p> <p><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/CORS">CORS</a> 是一个W3C标准，全称是<strong>跨域资源共享</strong>（Cross-Origin Resource Sharing），也有译为“跨源资源共享”的。</p> <p>它允许浏览器向跨源服务器，发出 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>（XHR）或 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API">Fetch API</a> 跨域 HTTP 请求，从而克服了<a href="http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html">同源</a>使用的限制。</p> <blockquote> <p>本文内容主要参考于<a href="http://www.ruanyifeng.com/blog/2016/04/cors.html">跨域资源共享 CORS 详解</a>和 <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/CORS">MDN 相关文档</a>。</p> </blockquote> <h2>一、简介</h2> <p>CORS 是 HTTP 的一部分，它允许服务端来指定哪些主机可以从这个服务端加载资源。</p> <p>CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。</p> <p>整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附件的头信息，有时还会多处一次附件的请求，但用户不会有感觉。</p> <p>因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口（响应报文包括了正确的 CORS 响应头），就可以跨源通信。</p> <h2>二、同源安全策略</h2> <p>同源策略是一个重要的安全策略，它用于限制一个 Origin 的文档或它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。</p> <p><strong>如果两个 URL 的<a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Protocol">协议</a>（Protocol）、<a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Host">主机</a>（Host）、<a href="https://developer.mozilla.org/en-US/docs/Glossary/Port">端口</a>（Port，如果有指定的话）都相同的话，那么这两个 URL 是同源的，否则是不同源的。</strong></p> <p>下表给出了与 URL <code>http://store.company.com/dir/page.html</code> 的源进行对比的示例:</p> <table> <thead> <tr> <th>URL</th> <th>结果</th> <th>原因</th> </tr> </thead> <tbody> <tr> <td><a href="http://store.company.com/dir2/other.html">http://store.company.com/dir2/other.html</a></td> <td>同源</td> <td>只有路径不同。</td> </tr> <tr> <td><a href="http://store.company.com/dir/inner/another.html">http://store.company.com/dir/inner/another.html</a></td> <td>同源</td> <td>只有路径不同。</td> </tr> <tr> <td><a href="https://store.company.com/secure.html">https://store.company.com/secure.html</a></td> <td>不同源</td> <td>协议不同。</td> </tr> <tr> <td><a href="http://store.company.com:81/dir/etc.html">http://store.company.com:81/dir/etc.html</a></td> <td>不同源</td> <td>端口不同（http:// 默认端口是 80）。</td> </tr> <tr> <td><a href="http://news.company.com/dir/other.html">http://news.company.com/dir/other.html</a></td> <td>不同源</td> <td>主机不同。</td> </tr> </tbody> </table> <blockquote> <p>关于 IE 浏览器的<a href="https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy#ie_%E4%B8%AD%E7%9A%84%E7%89%B9%E4%BE%8B">特例</a>，其中差异点是不规范的，其他浏览器未做出支持。</p> </blockquote> <p>出于安全性，浏览器限制脚本内发起的跨域 HTTP 请求，例如常见的 XHR、Fetch API 都遵循同源策略。</p> <h2>三、两种请求</h2> <p>浏览器将 CORS 请求分成两类：</p> <ul> <li><strong>简单请求</strong>（simple request）</li> <li><strong>非简单请求</strong>（not-so-simple request）</li> </ul> <p>若满足下述所有条件，则为简单请求，否则为非简单请求。</p> <ul> <li> <p>请求方法是以下三种之一：</p> <ul> <li><code>HEAD</code></li> <li><code>GET</code></li> <li><code>POST</code></li> </ul> </li> <li> <p>HTTP 的头信息不超出以下几种字段：</p> <ul> <li><code>Accept</code></li> <li><code>Accept-Language</code></li> <li><code>Content-Language</code></li> <li><code>Content-Type</code></li> <li><code>DPR</code></li> <li><code>Downlink</code></li> <li><code>Save-Data</code></li> <li><code>Viewport-Width</code></li> <li><code>Width</code></li> </ul> </li> <li> <p>Content-Type 的值仅限于以下三种之一</p> <ul> <li><code>text/plain</code></li> <li><code>multipart/form-data</code></li> <li><code>application/x-www-form-urlencoded</code></li> </ul> </li> <li> <p>请求中的任意 <code>XMLHttpRequestUpload</code> 对象均没有注册任何事件监听器。</p> </li> <li> <p>请求中没有使用 <code>ReadableStream</code> 对象。</p> </li> </ul> <blockquote> <p>注意: 这些跨站点请求与浏览器发出的其他跨站点请求并无二致。如果服务器未返回正确的响应首部，则请求方不会收到任何数据。因此，那些不允许跨站点请求的网站无需为这一新的 HTTP 访问控制特性担心。</p> </blockquote> <h2>四、简单请求</h2> <p>一个简单的 XHR 请求示例：</p> <p>客户端（Client）：</p> <pre><code class="language-js">// Client 客户端（http://192.168.1.105:8080） function xhrRequest() { // 创建 xhr 对象 const xhr = new XMLHttpRequest() // 通过 onreadystatechange 事件捕获请求状态的变化 // 必须在 open 之前指定该事件，否则无法接收 readyState 0 和 1 的状态 xhr.onreadystatechange = () => { console.log(xhr.status) console.log(xhr.readyState) } // 捕获错误 xhr.onerror = err => { console.log('error:', err) } // 初始化请求 xhr.open('GET', 'http://192.168.1.105:7701/config', true) // 发送请求 xhr.send(null) } xhrRequest() </code></pre> <p>服务端（Server）：</p> <pre><code class="language-js">// Server 服务端（通过 node 命令即可启动，http://192.168.1.105:7701） const http = require('http') const port = 7701 const allowedOrigin = 'http://192.168.1.105:8080' // 这个是我本地客户端的 Origin（源） const server = http.createServer((request, response) => { if (request.headers.origin === allowedOrigin) { response.setHeader('Access-Control-Allow-Origin', allowedOrigin) } if (request.url === '/config') { response.end(JSON.stringify({ name: 'Frankie', age: 20 })) } }) server.listen(port) </code></pre> <p>发起 XHR HTTP 请求，我们可以在控制台看到请求报文和响应报文。（View source）</p> <h3>1. 基本流程</h3> <p>对于简单请求，浏览器直接发出 CORS 请求。具体来说，就在头信息之中，增加一个 <code>Origin</code> 字段。</p> <p>通过以上示例发起 <code>HTTP GET</code> 请求，请求报文如下：</p> <pre><code class="language-text">GET /config HTTP/1.1 Host: 192.168.1.105:7701 Connection: keep-alive User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1 Accept: */* Origin: http://192.168.1.105:8080 Referer: http://192.168.1.105:8080/ Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7 </code></pre> <p>上面的头信息中，<code>Origin</code> 字段用来说明，本次请求来自哪个源（协议 + 主机 + 端口）。服务器根据这个值，绝对是否同意这次请求。</p> <p>如果 <code>Origin</code> 指定的源，不在许可范围内，服务器会返回一个正确的 HTTP 回应。浏览器发现，这个回应的头信息没有包含 <code>Access-Control-Allow-Origin</code> 字段（详见下文），就知道出错了，从而抛出一个错误，被 <code>XMLHttpRequest</code> 的 <code>onerror</code> 回调函数捕获。注意，这种错误无法通过状态识别，因为 HTTP 回应的状态码有可能是 <code>200</code>。</p> <p>在上述服务端示例中，我们指定的源就是 <code>http://192.168.1.105:8080</code>，因此可以正常发起请求，并拿到接口响应数据：<code>{"name":"Frankie","age":20}</code>。</p> <p>假设，我们将服务端示例许可的 <code>Origin</code> 去掉：</p> <pre><code class="language-js">// if (request.headers.origin === allowedOrigin) { // response.setHeader('Access-Control-Allow-Origin', allowedOrigin) // } </code></pre> <p>我们再次发起 <code>/config</code> 请求的时候，可以看到控制台抛出跨域错误了：</p> <p></p> <blockquote> <p>需要注意的是，尽管无论从控制台看到的报错、还是 Network 选项卡的 Failed to load response data，都可以知道我们的请求失败了。但......其实是这样的：<strong>就本文服务端示例而言，即使是跨域请求，也是会返回响应数据的，只是 JavaScript 脚本获取到的结果是“失败”而已。</strong></p> <p>那不对啊，如果服务器正常返回数据，而前端却失败了，那信息不对称啊，中间商赚差价了？怎么回事呢？原因是浏览器在中间搞鬼，那浏览器在中间扮演了什么角色呢？</p> <p>当发起 CORS 请求时，浏览器首先会在请求报文上自动加上 <code>Origin</code> 的字段（它的值由当前页面的 Protocol + Host + Port 部分组成），到达服务端之后，会做出相应的处理并返回数据。由于服务端并没有给响应报文的头部设置 <code>Access-Control-Allow-Origin</code>（前面说把这块注释掉了），自然浏览器接收到的响应报文中就不含 <code>Access-Control-Allow-Origin</code>，当浏览器判断到请求报文与响应报文的 <code>Origin</code> 不相等，此时它不会将服务器的响应数据 JavaScript 脚本，即我们的 XHR 对象无法得到服务器的响应数据，并且会触发 XHR 对象的 <code>onerror</code> 事件，让脚本来捕获错误。所以，我们就看到请求失败了。（这种情况下，可以通过抓包工具查看服务器返回的数据）</p> <p>还有，只有在 <code>Origin</code> 指定的源在许可范围内，服务器响应报文才会多出这些 <code>Access-Control-Allow-Origin</code>、<code>Access-Control-Allow-Credentials</code>、<code>Access-Control-Expose-Headers</code> 头信息字段。（可从客户端 Network 选项卡观察到）</p> </blockquote> <p>以下与 CORS 请求相关的头信息字段，都以 <code>Access-Control-</code> 开头。</p> <pre><code class="language-text">Access-Control-Allow-Origin: http://10.16.4.226:8080 Access-Control-Allow-Credentials: true Access-Control-Expose-Headers: Date </code></pre> <ul> <li><strong>Access-Control-Allow-Origin</strong></li> </ul> <p>这个字段是必须的。它的值要么是请求时 <code>Origin</code> 字段的值，要么是一个 <code>*</code>，表示接受任意的源（域名）的请求。</p> <ul> <li><strong>Access-Control-Allow-Credentials</strong></li> </ul> <p>这个字段可选。它的值是一个布尔值，表示是否允许发送 Cookie。默认情况下，Cookie 不包括在 CORS 请求之中。设为 <code>true</code>，即表示服务器明确许可，Cookie 可以包含在请求中，一起发给服务器。这个值也只能设为 <code>true</code>，如果服务器不要浏览器发送 Cookie，删除该字段即可。</p> <pre><code class="language-js">// Client xhr.withCredentials = true // Server response.setHeader('Access-Control-Allow-Credentials', true) </code></pre> <p>当客户端携带 Cookie 发起请求，同时服务端允许携带 Cookie 的情况下，可以看到请求报文包含了 Cookie 信息：</p> <pre><code class="language-jsx">Cookie: username=Frankie </code></pre> <ul> <li><strong>Access-Control-Expose-Headers</strong></li> </ul> <p>这个字段可选。CORS 请求时，<code>XMLHttpRequest</code> 对象的 <code>getResponseHeader()</code> 方法只能拿到 6 个基本字段： <code>Cache-Control</code>、<code>Content-Language</code>、<code>Content-Type</code>、<code>Expires</code>、<code>Last-Modified</code>、<code>Pragma</code>。如果想要拿到其他字段，就必须在 <code>Access-Control-Expose-Headers</code> 里面指定。（但由于 W3C 的限制，不指定的情况下，客户端获取到的值可能为 <code>null</code>）</p> <p>例如，服务端将 <code>Access-Control-Expose-Headers</code> 指定为 <code>"Date,Access-Control-Allow-Origin"</code>，我们可以通过 XMLHttpRequest 对象的 getResponseHeader() 方法获取对应字段的值。</p> <pre><code class="language-js">// Client xhr.onreadystatechange = () => { if (xhr.status === 200 && xhr.readyState === 4) { console.log(xhr.getResponseHeader('Cache-Control')) // null console.log(xhr.getResponseHeader('Content-Language')) // null console.log(xhr.getResponseHeader('Content-Type')) // null console.log(xhr.getResponseHeader('Expires')) // null console.log(xhr.getResponseHeader('Last-Modified')) // null console.log(xhr.getResponseHeader('Pragma')) // null console.log(xhr.getResponseHeader('Date')) // "Sun, 06 Jun 2021 14:34:34 GMT" console.log(xhr.getResponseHeader('Access-Control-Allow-Origin')) // "http://192.168.1.105:8080" console.log(xhr.getResponseHeader('X-Custom-Header')) // Error: Refused to get unsafe header "X-Custom-Header" } } // Server if (request.headers.origin === allowedOrigin) { response.setHeader('Access-Control-Allow-Origin', allowedOrigin) response.setHeader('Access-Control-Allow-Credentials', true) response.setHeader('Access-Control-Expose-Headers', 'Date,Access-Control-Allow-Origin') } </code></pre> <blockquote> <p>如果连接未完成，响应中不存在报文项，或者被 W3C 限制，则返回 <code>null</code>。假设如上示例，自定义头信息 <code>X-Custom-Header</code> 字段，且服务端未对其进行设置，则会抛出错误：<code>Refused to get unsafe header "X-Custom-Header"</code></p> </blockquote> <h3>2. withCredentials 属性</h3> <p>上面说到，CORS 请求默认不发送 Cookie 和 HTTP 认证信息。如果要把 Cookie 发送到服务器，一方面要服务器同意，指定 <code>Access-Control-Allow-Credentials</code> 字段。</p> <pre><code>Access-Control-Allow-Credentials: true </code></pre> <p>另一方面，开发者必须在 AJAX 请求中打开 <code>withCredentials</code> 属性。</p> <pre><code class="language-js">xhr.withCredentials = true </code></pre> <p>否则，即使服务器同意发送 Cookie，浏览器也不会发送。或者服务器要求设置 Cookie，浏览器也不会处理。</p> <p>但是，如果省略 <code>withCredentials</code> 设置，有的浏览器还是会一起发送 Cookie。这时，可以显示关闭 <code>withCredentials</code>。</p> <pre><code class="language-js">xhr.withCredentials = false </code></pre> <p>需要注意的是，如果要发送 Cookie，<code>Access-Control-Allow-Origin</code> 就不能设为 <code>*</code>（否则会抛出如下错误），必须指定明确的、与请求网页一致的域名。同时，Cookie 依然遵循同源策略，只有用服务器域名设置的 Cookie 才会上传，其他域名的 Cookie 并不会上传，且（跨源）原网页代码中的 <code>document.cookie</code> 也无法读取服务器域名下的 Cookie。</p> <p></p> <h2>五、非简单请求</h2> <p>调整一下示例：</p> <pre><code class="language-js">// Client 客户端 function xhrRequest() { // 创建 xhr 对象 const xhr = new XMLHttpRequest() // 通过 onreadystatechange 事件捕获请求状态的变化 xhr.onreadystatechange = () => { console.log(xhr.status) console.log(xhr.readyState) if (xhr.status === 200 && xhr.readyState === 4) { console.log(xhr.getResponseHeader('Date')) console.log(xhr.getResponseHeader('Access-Control-Allow-Origin')) } } // 捕获错误 xhr.onerror = err => { console.log('error:', err) } // 初始化请求 xhr.open('PUT', 'http://192.168.1.105:7701/config', true) // 设置自定义头部（必须在 open 之后） xhr.setRequestHeader('X-Custom-Header', 'foo') // 发送请求 xhr.send(null) } xhrRequest() </code></pre> <pre><code class="language-js">// Server 服务端 const http = require('http') const port = 7701 const allowedOrigin = 'http://192.168.1.105:8080' // 这个是我本地客户端的 Origin（源） const server = http.createServer((request, response) => { if (request.headers.origin === allowedOrigin) { response.setHeader('Access-Control-Allow-Origin', allowedOrigin) response.setHeader('Access-Control-Allow-Credentials', true) response.setHeader('Access-Control-Allow-Methods', 'PUT') response.setHeader('Access-Control-Allow-Headers', 'X-Custom-Header') response.setHeader('Access-Control-Expose-Headers', 'Date,Access-Control-Allow-Origin') } if (request.url === '/config') { response.end(JSON.stringify({ name: 'Frankie', age: 20 })) } }) server.listen(port) </code></pre> <h3>1. 预检请求</h3> <p>非简单请求时那种对服务器有特殊要求的请求，比如请求方法是 <code>PUT</code> 或 <code>DELETE</code>，或者 <code>Content-Type</code> 字段的类型是 <code>application/json</code>。</p> <p>非简单请求的 CORS 请求，会在正式通信之前，增加一次 HTTP 查询请求，称为<strong>预检请求</strong>（preflight）。</p> <p>浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些 HTTP 动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的 XMLHttpRequest 请求，否则就报错。</p> <p>上面代码中，HTTP 请求的方法是 <code>PUT</code>，并且发送一个自定义头信息 <code>X-Custom-Header</code>。</p> <p>浏览器发现，这是一个非简单请求，就自动发出一个“预检请求”，要求服务器确认可以这样请求。下面是这个“预检请求”的 HTTP 头信息。</p> <pre><code class="language-text">OPTIONS /config HTTP/1.1 Host: 192.168.1.105:7701 Connection: keep-alive Accept: */* Access-Control-Request-Method: PUT Access-Control-Request-Headers: x-custom-header Origin: http://192.168.1.105:8080 User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1 Sec-Fetch-Mode: cors Referer: http://192.168.1.105:8080/ Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7 </code></pre> <p>“预检请求”用的请求方法是 <code>OPTIONS</code>，表示这个请求是用来询问的。头信息里面，关键字是 <code>Origin</code>，表示请求来自哪个源。</p> <p>除了 <code>Origin</code> 字段，“预检请求”的头信息包括两个特殊字段。</p> <ul> <li> <p><strong>Access-Control-Request-Method</strong> 这个字段是必须的，用来列出浏览器的 CORS 请求会用到哪些 HTTP 方法，上面示例是 PUT。</p> </li> <li> <p><strong>Access-Control-Request-Headers</strong> 这个字段是一个逗号 <code>,</code> 分隔的字符串，指定浏览器 CORS 请求会额外发送的头信息字段，上面示例是 <code>X-Custom-Header</code>。</p> </li> </ul> <blockquote> <p>Tips：预检请求可以在调试器 Network 选项卡中查看，如下图：</p> </blockquote> <p></p> <h3>2. 预检请求的回应</h3> <p>服务器收到“预检请求”以后，检查了 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers 字段以后，确认允许跨域请求，就可以做出回应。</p> <pre><code class="language-text">HTTP/1.1 200 OK Access-Control-Allow-Origin: http://192.168.1.105:8080 Access-Control-Allow-Credentials: true Access-Control-Allow-Methods: PUT Access-Control-Allow-Headers: X-Custom-Header Access-Control-Expose-Headers: Date,Access-Control-Allow-Origin Date: Sun, 06 Jun 2021 15:27:27 GMT Connection: keep-alive Keep-Alive: timeout=5 Content-Length: 27 </code></pre> <p>上面的 HTTP 回应中，关键的是 <code>Access-Control-Allow-Origin</code> 字段，表示 <code>http://192.168.1.105:8080</code> 可以请求数据。该字段也可以设为 <code>*</code>，表示同意任意的跨源请求。（本示例携带了 Cookie 信息，不可设为 <code>*</code>）</p> <pre><code>Access-Control-Allow-Origin: * </code></pre> <p>如果服务器否定了“预检请求”，会返回一个正常的 HTTP 回应，但是没有任何的 CORS 相关的头信息字段。这是，浏览器就认定，服务器不同意预检请求，因此触发一个错误，被 <code>XMLHttpRequest</code> 对象的 <code>onerror</code> 回调函数捕获。</p> <p>如果将服务端的 <code>Access-Control-Allow-Headers</code> 注释掉：</p> <pre><code class="language-js">// response.setHeader('Access-Control-Allow-Headers', 'X-Custom-Header') </code></pre> <p>控制台会打印出如下的报错信息：</p> <p></p> <p>服务器回应的其他 CORS 相关字段如下：</p> <pre><code>Access-Control-Allow-Methods: PUT Access-Control-Allow-Headers: X-Custom-Header Access-Control-Allow-Credentials: true Access-Control-Max-Age: 1728000 </code></pre> <ul> <li> <p><strong>Access-Control-Allow-Methods</strong> 这个字段是必须的，它的值是逗号 <code>,</code> 分隔的一个字符串，表明服务器支持的所有跨域请求。注意，返回的是<strong>所有</strong>支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次“预检请求”。(本示例仅设置了一个 <code>PUT</code> 方法。)</p> </li> <li> <p><strong>Access-Control-Allow-Headers</strong> 如果浏览器请求包括 <code>Access-Control-Request-Headers</code> 字段，则 <code>Access-Control-Allow-Headers</code> 字段是必须的，它也是一个逗号 <code>,</code> 分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在“预检请求”的字段。</p> </li> <li> <p><strong>Access-Control-Allow-Credentials</strong> 这个字段与简单请求时的含义相同。</p> </li> <li> <p><strong>Access-Control-Max-Age</strong> 这个字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是 20 天（1728000 秒），即允许缓存该条回应 1728000 秒（即 20 天），在此期间，不用发出另一条预检请求。</p> </li> </ul> <h3>3. 浏览器的正常请求和回应</h3> <p>一旦服务器通过了“预检请求”，以后每次浏览器正常的 CORS 请求，就都跟简单请求一样，会有一个 <code>Origin</code> 头信息字段。服务器的回应，也都会有一个 <code>Access-Control-Allow-Origin</code> 头信息字段。</p> <p>下面是“预检请求”之后，浏览器的正常 CORS 请求的请求报文。</p> <pre><code>PUT /config HTTP/1.1 Host: 192.168.1.105:7701 Connection: keep-alive Content-Length: 0 User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1 X-Custom-Header: foo Accept: */* Origin: http://192.168.1.105:8080 Referer: http://192.168.1.105:8080/ Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7 Cookie: username=Frankie </code></pre> <p>上面的头信息的 <code>Origin</code> 字段是浏览器自动添加的。</p> <p>下面是服务器正常的响应报文。</p> <pre><code>HTTP/1.1 200 OK Access-Control-Allow-Origin: http://192.168.1.105:8080 Access-Control-Allow-Credentials: true Access-Control-Allow-Methods: PUT Access-Control-Allow-Headers: X-Custom-Header Access-Control-Expose-Headers: Date,Access-Control-Allow-Origin Date: Sun, 06 Jun 2021 15:40:11 GMT Connection: keep-alive Keep-Alive: timeout=5 Content-Length: 27 </code></pre> <p>上面的头信息中，<code>Access-Control-Allow-Origin</code> 字段是每次回应都必定包含的。</p> <h2>六、与 JSONP 的比较</h2> <p>CORS 与 JSONP 的使用目的相同，但是比 JSONP 更强大。</p> <p>JSONP 只支持 <code>GET</code> 请求，CORS 支持所有类型的 HTTP 请求。JSONP 的优势在于支持老式浏览器，以及可以向不支持 CORS 的网站请求数据。</p> <h2>七、其他</h2> <h3>1. Check List</h3> <p>如果按以上设置后，仍会出现跨域情况，可以仔细检查：</p> <ul> <li>请求 URL 是否有拼写错误</li> <li>请求 URL 是否有空格（特别是开头结尾）</li> </ul> <blockquote> <p>被坑过，错误往往出现在这些不起眼的地方...</p> </blockquote> <h3>2. HTTP headers 之 Referer</h3> <p><code>Referer</code> 请求头包含了当前请求页面的来源页面的地址，即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用 <code>Referer</code> 请求头识别访问来源，可能会以此进行统计分析、日志记录以及缓存优化等。</p> <p>注意，如果直接在地址栏输入 URL 访问某网页，这时 <code>Referer</code> 为空。</p> <p>例如，上面示例中请求 <code>/config</code> 接口的网页地址是 <code>http://192.168.1.105:8080/#/about</code>，从请求报文可以大致看到 <code>Origin</code> 与 <code>Referer</code> 的区别。</p> <pre><code class="language-text">Origin: http://192.168.1.105:8080 Referer: http://192.168.1.105:8080/ </code></pre> <ul> <li> <p>Origin <code>Origin</code> 的值可以置空或者是 <code><scheme>://<host> [:<port>]</code>，即协议 + 主机 + 端口。其中主机是指域名或者 IP 地址；端口号可选，缺省时为服务的默认端口（例如 HTTP 请求默认端口是 <code>80</code>，HTTPS 请求默认端口是 <code>443</code>）</p> </li> <li> <p>Referer 当前页面被链接而至的前一页面的绝对路径或者相对路径。不包含 URL fragments (例如 <code>"#section"</code>) 和 userinfo (例如 <code>"https://username:password@example.com/foo/bar/"</code> 中的 <code>"username:password"</code> )。</p> </li> </ul> <p>上面的解释比较官方，换句话说就是从哪个页面链接过来的。例如，我从 GitHub 仓库点击跳转至简书文章，可以从 HTML 的请求报文看到：</p> <pre><code class="language-text">Host: www.jianshu.com Referer: https://github.com/toFrankie/csscomb-mini </code></pre> <p>假设有一个需求是统计从 GitHub 访问简书的访问量，那么就可以通过 <code>Referer</code> 来实现。也常用于防盗链等。</p> <blockquote> <p>需要注意的是，<code>Referer</code> 的正确英语拼法是 <strong>referrer</strong>。由于早期 HTTP 规范的拼写错误，为保持<a href="https://www.wikiwand.com/zh/%E5%90%91%E4%B8%8B%E5%85%BC%E5%AE%B9%22">向下兼容</a>就将错就错了。例如 <a href="https://www.w3.org/TR/DOM-Level-2-Core/">DOM Level 2</a>、<a href="https://w3c.github.io/webappsec-referrer-policy/#directive-referrer">Referrer Policy</a> 等其他网络技术的规范曾试图修正此问题，使用正确拼法，导致目前拼法并不统一。</p> </blockquote>  <h2>八、参考链接</h2> <ul> <li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/CORS">CORS Glossary</a></li> <li><a href="http://www.ruanyifeng.com/blog/2016/04/cors.html">跨域资源共享 CORS 详解（阮一峰）</a></li> </ul> </article> <article> <h1>细读 JS |（隐式）数据类型转换详解</h1> <p>Sun, 26 Feb 2023 11:15:58 GMT</p> <p></p> <p>在 JavaScript 的世界里，数据类型之间的转换无处不在。即使你没有主动显式地去转换，但 JavaScript 在私底下“偷偷地”帮我们做了很多类型转换的工作。那么，它们究竟是按照什么规则去转换的呢？我们试图在本文中找到答案，来解开谜底。</p> <p>ECMAScript 是负责制定标准的，而 JavaScript 则是前者的一种实现。</p> <p>在 ECMAScript 标准中定义一组转换抽象操作，常见的抽象操作（Abstract Operation）有 <code>ToPrimitive</code>、<code>ToBoolean</code>、<code>ToNumber</code>、<code>ToString</code>、<code>ToObject</code> 等等。</p> <h2>一、ToPrimitive</h2> <h3>1. ToPrimitive</h3> <p>在 ECMAScript 标准中，使用 ToPrimitive 抽象操作<strong>将引用类型转换为原始类型</strong>。（详见 <a href="https://262.ecma-international.org/#sec-toprimitive">#sec-7.1.1</a>）</p> <p>▼ ToPrimitive Abstract Operation </p> <pre><code>ToPrimitive(input[, PerferredType]) </code></pre> <p>参数 <code>input</code> 是文章开头提到的 8 种数据类型的值（Undefined、Null、Boolean、String、Symbol、Number、BigInt、Object）。参数 <code>PreferredType</code> 是可选的，表示要转换到的原始值的预期类型，取值只能是字符串 <code>"default"</code>（默认）、<code>"string"</code>、<code>"number"</code> 之一。</p> <p>对于 ToPrimitive 操作，可概括如下：</p> <ol> <li><code>input</code> 是 ECMAScript 语言类型的值。</li> <li>如果 <code>input</code> 是引用类型，那么 <ol> <li>如果没有传递 <code>PreferredType</code> 参数，使 <code>hint</code> 等于 <code>"default"</code>。</li> <li>如果参数 <code>PreferredType</code> 提示 String 类型，使 <code>hint</code> 等于 <code>"string"</code>。</li> <li>否则，参数 <code>PreferredType</code> 提示 Number 类型，使 <code>hint</code> 等于 <code>"number"</code>。</li> <li>使 <code>exoticToPrim</code> 等于 <code>GetMethod(input, @@toPrimitive)</code> 的结果（大致意思是，获取 <code>input</code> 对象的 <code>@@toPrimitive</code> 属性值，并将其赋给 <code>exoticToPrim</code>）。</li> <li>如果 <code>exoticToPrim</code> 不等于 <code>undefined</code>（即 <code>input</code> 对象含 <code>@@toPrimitive</code> 属性），那么 <ol> <li>使 <code>result</code> 等于 <code>Call(exoticToPrim, input, « hint »)</code> 的结果（大致意思是，执行 <code>@@toPrimitive</code> 方法，即 <code>exoticToPrim(hint)</code>）。</li> <li>如果 <code>result</code> 不是引用类型，则返回 <code>result</code>。</li> <li>否则抛出 <code>TypeError</code> 类型错误。</li> </ol> </li> <li>如果 <code>hint</code> 是 <code>"default"</code>，则将 <code>hint</code> 设为 <code>"number"</code>。</li> <li>返回 <code>OrdinaryToPrimitive(input, hint)</code>。</li> </ol> </li> <li>返回 <code>input</code>（即原始类型的值直接返回）。</li> </ol> <blockquote> <p>注意：当不带 <code>hint</code> 去调用 ToPrimitive 抽象操作时，通常它的行为就像 <code>hint</code> 是 <code>Number</code> 类型一样。但是，（派生）对象可以通过定义 <code>@@toPrimitive</code> 方法来替代此行为。在本规范中定义的对象里，只有 <code>Date</code> 对象（详见 <a href="https://262.ecma-international.org/#sec-date.prototype-@@toprimitive">#sec-20.4.4.45</a>）和 <code>Symbol</code> 对象（详见 <a href="https://262.ecma-international.org/#sec-symbol.prototype-@@toprimitive">#sec-19.4.3.5</a>）会覆盖默认的 ToPrimitive 行为。</p> </blockquote> <blockquote> <p>其他：</p> <ol> <li>以上提到的 <code>@@toPrimitive</code> 方法，即属性名称为 <code>[Symobl.toPrimitive]</code> 的方法。</li> <li><code>Date</code> 对象的 <code>@@toPrimitive</code> 方法定义：当 <code>hint</code> 为 <code>"default"</code> 时，会使 <code>hint</code> 等于 <code>"string"</code>。所以这也是 <code>Date</code> 对象转换为原始值时，会先调用 <code>instance.toString()</code> 方法，而不是 <code>instance.valueOf()</code> 方法的原因。</li> <li>目前 JavaScript 的内置对象中，含有 <code>@@toPrimitive</code> 方法的，只有 <code>Date</code> 和 <code>Symbol</code> 对象。</li> </ol> </blockquote> <p>用口水话再总结一下：</p> <ol> <li>如果 <code>input</code> 是原始类型，直接返回 <code>input</code>（不做转换操作）。</li> <li>如果参数 <code>PreferredType</code> 是 String（Number）类型，那么使得 <code>hint</code> 等于 <code>"string"</code>（<code>"number"</code>），否则 <code>hint</code> 等于默认的 <code>"default"</code>。</li> <li>如果 <code>input</code> 中存在 <code>@@toPrimitive</code> 属性（方法），若 <code>@@toPrimitive</code> 方法的返回值为原始类型，则 ToPrimitive 的操作结果就是该返回值，否则抛出 <code>TypeError</code> 类型错误。</li> <li>如果经过以上步骤之后 <code>hint</code> 是 <code>"default"</code>，则使 <code>hint</code> 等于 <code>"number"</code>。</li> <li>返回 <code>OrdinaryToPrimitive(input, hint)</code> 操作的结果。</li> </ol> <blockquote> <p>提醒：</p> <ol> <li> <p>关于 <code>Date</code> 对象的 <code>Date.prototype[@@toPrimitive]</code> 内部方法实现，其实是将 <code>hint</code> 为 <code>"default"</code> 的情况改为 <code>"string"</code>，然后执行第 5 步的 <code>OrdinaryToPrimitive</code> 操作。（详情看 <a href="https://262.ecma-international.org/#sec-date.prototype-@@toprimitive">#sec-20.4.4.45</a>）</p> </li> <li> <p>关于 <code>Symbol</code> 对象的 <code>Symbol.prototype[@@toPrimitive]</code> 内部方法实现，如果传递给该方法的是一个 <code>Symbol</code> 类型的值，则直接返回该值。如果该值是引用类型，且含有属性 <code>[[SymbolData]]</code>，而且该属性值为 <code>Symbol</code> 类型，则返回该属性值，否则会抛出 <code>TypeError</code> 类型错误。（详见 <a href="https://262.ecma-international.org/#sec-symbol.prototype-@@toprimitive">#sec-19.4.3.5</a>）</p> </li> </ol> </blockquote> <p>那么 <code>OrdinaryToPrimitive</code> 的操作是怎样的呢？我们接着往下看...</p> <h3>2. OrdinaryToPrimitive</h3> <p>详见：<a href="https://262.ecma-international.org/#sec-ordinarytoprimitive">#sec-7.1.11</a></p> <p>▼ OrdinaryToPrimitive Abstract Operation </p> <pre><code>OrdinaryToPrimitive(O, hint) </code></pre> <p>参数 <code>O</code> 为引用类型。参数 <code>hint</code> 为 String 类型，其值只能是字符串 <code>"string"</code>、<code>"number"</code> 之一。</p> <p>对于 OrdinaryToPrimitive 操作，可概括如下：</p> <ol> <li><code>O</code> 是引用类型。</li> <li><code>hint</code> 是 String 类型，且 <code>hint</code> 的值只能是 <code>"string"</code> 或 <code>"number"</code> 之一。</li> <li>如果 <code>hint</code> 为 <code>"string"</code>，使 <code>methodNames</code> 等于 <code>« "toString", "valueOf" »</code>（其中 <code>«»</code> 表示规范中的 <a href="https://262.ecma-international.org/#sec-list-and-record-specification-type">List</a>，类似于数组）。</li> <li>如果 <code>hint</code> 为 <code>"number"</code>，使 <code>methodNames</code> 等于 <code>« "valueOf", "toString" »</code>。</li> <li>遍历 <code>methodNames</code>，使 <code>name</code> 等于每个迭代值，并执行： <ol> <li>使 <code>method</code> 等于 <code>Get(O, name)</code>（即获取对象 <code>O</code> 的 <code>name</code> 属性，相当于获取对象的 <code>toString</code> 或 <code>valueOf</code> 属性，具体执行顺序视 <code>hint</code> 而定）。</li> <li>如果 <code>IsCallable(method)</code> 结果为 <code>true</code>，那么： <ol> <li>使 <code>result</code> 等于 <code>Call(method, O)</code> 结果（即调用 <code>method()</code> 方法）。</li> <li>如果 <code>result</code> 为原始类型，则返回 <code>result</code>。</li> </ol> </li> </ol> </li> <li>抛出 <code>TypeError</code> 类型错误。</li> </ol> <blockquote> <p>其中 <code>IsCallable(argument)</code> 操作，大致内容是：当参数 <code>argument</code> 为引用类型且 <code>argument</code> 对象包含内部属性 <code>[[Call]]</code> 时返回 <code>true</code>，否则返回 <code>false</code>。话句话说，就是用于判断是否为函数。</p> </blockquote> <p>口水话总结：</p> <ol> <li>当经过 ToPrimitive 操作，然后执行 <code>OrdinaryToPrimitive(input, hint)</code> 操作，那么步骤如下：</li> <li>如果 <code>hint</code> 为 <code>"string"</code>，它会先调用 <code>input.toString()</code> 方法， <ol> <li>若 <code>toString()</code> 结果为原始类型，则直接返回该结果。</li> <li>否则，继续调用 <code>input.valueOf()</code> 方法，若结果为原始类型，则返回该结果，否则抛出 <code>TypeError</code> 类型错误。</li> </ol> </li> <li>若 <code>hint</code> 为 <code>"number"</code>，它先调用 <code>input.valueOf()</code> 方法， <ol> <li>若 <code>valueOf()</code> 结果为原始类型，则直接返回该结果。</li> <li>否则，继续调用 <code>input.toString()</code> 方法，若结果为原始类型，则返回该结果，否则抛出 <code>TypeError</code> 类型错误。</li> </ol> </li> </ol> <blockquote> <p>到这里，已经完整地讲述了 ToPrimitive 操作的全部过程。文笔不太好，我不知道你们有没看明白，倘若仍有疑惑，请反复斟酌或直接查看 ECMAScript 标准。</p> </blockquote> <h3>3. 一些示例</h3> <ul> <li><code>-</code>、<code>*</code>、<code>/</code>、<code>%</code> 这四种操作符都会把符号两边的操作数先转换为数字再进行运算。</li> <li><code>+</code> 的作用可以是数值求和，也可以是字符串拼接。 <ul> <li>若符号两边操作数都是数字，则进行数字运算。</li> <li>若符号一边是字符串，则会把另一端转换为字符串进行拼接操作。</li> </ul> </li> </ul> <blockquote> <p>一元加运算符 <code>+</code>（unary plus）是将操作数转换为数字的最快且首选的方式，因为它不对该数字执行任何其他运算。</p> <p>区分一元加运算符（<code>+</code>）和算术运算符（<code>+</code>）的方法，就是前者只有一个操作数，而后者是两个操作数。</p> </blockquote> <pre><code class="language-js">// 运算符: x + y // Number + Number -> 数字相加 1 + 2 // 3 // Boolean + Number -> 数字相加 true + 1 // 2 // Boolean + Boolean -> 数字相加 false + false // 0 // Number + String -> 字符串连接 5 + 'foo' // "5foo" // String + Boolean -> 字符串连接 'foo' + false // "foofalse" // String + String -> 字符串连接 'foo' + 'bar' // "foobar" </code></pre> <pre><code class="language-js">const obj = { [Symbol.toPrimitive]: hint => { if (hint === 'number') { return 1 } else if (hint === 'string') { return 'string' } else { return 'default' } } } +obj // 1 hint is "number" `${obj}` // "string" hint is "string" obj + '' // "default" hint is "default" obj + 1 // "default1" hint is "default" Number(obj) // 1 hint is "number" String(obj) // "string" hint is "string" </code></pre> <h2>二、ToBoolean</h2> <p>将一个操作数转换为布尔值，这应该是最简单的了。（详见 <a href="https://262.ecma-international.org/#sec-toboolean">#sec-7.1.2</a>）</p> <p>▼ ToBoolean Abstract Operation </p> <p>所以总结下来就是：</p> <table> <thead> <tr> <th>操作数</th> <th>结果</th> </tr> </thead> <tbody> <tr> <td><code>undefined</code>、<code>null</code>、<code>false</code>、<code>+0</code>、<code>-0</code>、<code>NaN</code>、<code>''</code>、<code>0n</code></td> <td>false</td> </tr> <tr> <td>除以上这些（falsy）值之外</td> <td>true</td> </tr> </tbody> </table> <p>在 JavaScript 中，如果一个操作数 <code>argument</code> 通过 <code>ToBoolean(argument)</code> 操作后被转换为 <code>true</code>，那么这些操作数称为<strong>真值</strong>（truthy），否则为<strong>虚值</strong>（falsy）。</p> <pre><code class="language-js">// 转换为 Boolean 值的两种方式 !!x Boolean(x) </code></pre> <h2>三、ToNumber</h2> <p>将一个操作数转换为数字值。（详见 <a href="https://262.ecma-international.org/#sec-toboolean">#sec-7.1.4</a>）</p> <p>▼ ToNumber Abstract Operation </p> <table> <thead> <tr> <th>参数类型</th> <th>结果</th> </tr> </thead> <tbody> <tr> <td>Undefined</td> <td><code>NaN</code></td> </tr> <tr> <td>Null</td> <td><code>+0</code></td> </tr> <tr> <td>Boolean</td> <td><code>true</code> 转换为 <code>1</code>，<code>false</code> 转换为 <code>+0</code>。</td> </tr> <tr> <td>Number</td> <td>直接返回，不做类型转换。</td> </tr> <tr> <td>String</td> <td>1. 纯数字的字符串转换为相应的数字；<br/>2. 空字符串 <code>''</code> 转为 <code>+0</code>；<br/>3. 否则为 <code>NaN</code>；<br/><br/>其中 <code>0x</code> 开头的字符串被当成 16 进制。</td> </tr> <tr> <td>Symbol</td> <td>无法转换，抛出 <code>TypeError</code> 错误。</td> </tr> <tr> <td>BigInt</td> <td>无法转换，抛出 <code>TypeError</code> 错误。</td> </tr> <tr> <td>Object</td> <td>两个步骤：<br/><br/>1. 将引用类型转化为原始值 <code>ToPrimitive(argument, 'number')</code>；<br/>2. 转化为原始值后，进行 <code>ToNumber(primValue)</code> 操作，即按上面的类型转换。</td> </tr> </tbody> </table> <blockquote> <p>需要注意的是</p> <ol> <li><code>Number(undefined)</code> 结果为 <code>NaN</code>，而 <code>Number(null)</code> 结果为 <code>0</code>。</li> <li>含有前导和尾随空白符（<code>\n</code>、<code>\r</code>、<code>\t</code>、<code>\v</code>、<code>\f</code>）的字符串，在转换为数字类型的时候空白符会被忽略。</li> <li>上面也提到过，使用一元加运算符（<code>+</code>）是将其他类型转换为数值的常用方式。</li> </ol> </blockquote> <pre><code class="language-js">Number(undefined) // NaN Number(null) // 0 '\n 123 \t' == 123 // true +'string' // NaN +true // 1 +[] // 0 +{} // NaN </code></pre> <h2>四、ToString</h2> <p>将一个操作数转换为字符串类型的值。（详见 <a href="https://262.ecma-international.org/#sec-tostring">#sec-7.1.17</a>）</p> <p>▼ ToString Abstract Operation </p> <table> <thead> <tr> <th>参数类型</th> <th>结果</th> </tr> </thead> <tbody> <tr> <td>Undefined</td> <td><code>undefined</code></td> </tr> <tr> <td>Null</td> <td><code>null</code></td> </tr> <tr> <td>Boolean</td> <td><code>true</code> 转换为 <code>"true"</code>，<code>false</code> 转换为 <code>"false"</code>。</td> </tr> <tr> <td>Number</td> <td>1. <code>NaN</code> 转换为 <code>"NaN"</code>；<br/>2. <code>+0</code> 或 <code>-0</code> 转换为 <code>"0"</code>；<br/>3. 其中 <code>Infinity</code> 和 <code>-Infinity</code> 分别转换为 <code>"Infinity"</code>、<code>"-Infinity"</code>；<br/>4. 若 <code>x</code> 是小于 <code>0</code> 的负数，则返回 <code>"-x"</code>；若 <code>x</code> 是大于 <code>0</code> 的正数，则返回 <code>"x"</code>；<br/>5. 其他不常用的数值，详见 <a href="https://262.ecma-international.org/#sec-numeric-types-number-tostring">#sec-6.1.6.1.20</a>。</td> </tr> <tr> <td>String</td> <td>直接返回，不做类型转换。</td> </tr> <tr> <td>Symbol</td> <td>无法转换，抛出 <code>TypeError</code> 错误。</td> </tr> <tr> <td>BigInt</td> <td><code>10n</code> 转换为 <code>"10"</code>。</td> </tr> <tr> <td>Object</td> <td>两个步骤：<br/><br/>1. 将引用类型转化为原始值 <code>ToPrimitive(argument, 'string')</code>；<br/>2. 转化为原始值后，进行 <code>ToString(primValue)</code> 操作，即按上面的类型转换。</td> </tr> </tbody> </table> <blockquote> <p>需要注意的是，Symbol 原始值不能转换为字符串，只能将其转换成对应的包装对象，再调用 <code>Symbol.prototype.toString()</code> 方法。</p> </blockquote> <pre><code class="language-js">// 下面会导致 Symbol('foo') 进行隐式转换，即 ToString(Symbol)，按以上规则，是会抛出异常的 console.log(Symbol('foo') + 'bar' ) // TypeError: Cannot convert a Symbol value to a string // Symbol('foo') 结果是 Symbol 的原始值，再调用其包装对象的属性时，会自动转化为包装对象再调用其 toString() 方法 console.log(Symbol('foo').toString() + 'bar' ) // "Symbol(foo)bar" </code></pre> <p>抛一个有趣的问题：</p> <pre><code class="language-js">// 运行出错 var name = Symbol() // TypeError: Cannot convert a Symbol value to a string // 正常运行，不会抛出错误 let name = Symbol() // 为什么呢 ❓❓❓ </code></pre> <blockquote> <p>答案我不写了，感兴趣的可以自行搜索。对此有疑问可看：<a href="https://github.com/tofrankie/blog/issues/221">关于 var、let 的顶层对象的属性</a>。</p> </blockquote> <h2>五、ToObject</h2> <p>将一个操作数转换为引用类型的值。（详见 <a href="https://262.ecma-international.org/#sec-toobject">#sec-7.1.18</a>）</p> <p>▼ ToObject Abstract Operation </p> <table> <thead> <tr> <th>参数类型</th> <th>结果</th> </tr> </thead> <tbody> <tr> <td>Undefined</td> <td>无法转换，抛出 <code>TypeError</code> 错误。</td> </tr> <tr> <td>Null</td> <td>无法转换，抛出 <code>TypeError</code> 错误。</td> </tr> <tr> <td>Boolean</td> <td>返回 <code>new Boolean(argument)</code>。</td> </tr> <tr> <td>Number</td> <td>返回 <code>new Number(argument)</code>。</td> </tr> <tr> <td>String</td> <td>返回 <code>new String(argument)</code>。</td> </tr> <tr> <td>Symbol</td> <td>返回 <code>Object(Symbol(argument))</code>。</td> </tr> <tr> <td>BigInt</td> <td>返回 <code>Object(BigInt(argument))</code>。</td> </tr> <tr> <td>Object</td> <td>直接返回，不做类型转换。</td> </tr> </tbody> </table> <blockquote> <p>需要注意都是，JavaScript 内置的 <code>Symbol</code>、<code>BigInt</code> 对象不能使用 <code>new</code> 关键字去创建实例对象，只能通过 <code>Object()</code> 函数来创建一个包装对象（wrapper object）。</p> </blockquote> <pre><code class="language-js">// 错误示例 const sym = new Symbol() // TypeError: Symbol is not a constructor // 正确示例 const sym = Symbol() console.log(typeof sym) // "symbol" const symObj = Object(sym) console.log(typeof symObj) // "object" // BigInt 同理 </code></pre> <blockquote> <p>需要注意的是，从 ES6 开始围绕原始数据类型创建一个显式包装器对象不再被支持。但由于遗留原因，现有的原始包装器对象（如 <code>new Boolean</code>、<code>new Number</code>、<code>new String</code>）仍可使用。这也是 ES6+ 新增的 Symbol、BigInt 数据类型无法通过 <code>new</code> 关键字创建实例对象的原因。</p> </blockquote> <h2>六、参考链接</h2> <ul> <li><a href="https://262.ecma-international.org/#sec-toprimitive">ToPrimitive Abstract Operation</a></li> <li><a href="https://262.ecma-international.org/#sec-ordinarytoprimitive">OrdinaryToPrimitive Abstract Operation</a></li> </ul> </article> <article> <h1>细读 JS | valueOf 和 toString 方法</h1> <p>Sun, 26 Feb 2023 11:14:53 GMT</p> <h2>前言</h2> <p>在另外一篇文章《<a href="https://github.com/tofrankie/blog/issues/239">JS 数据类型详解</a>》中讲述 <code>ToPrimitive</code> 和 <code>OrdinaryToPrimitive</code> 操作时，涉及到这两方法，所以今天来简单写一下。</p> <p>其实我们一般很少主动去调用这两个方法，那它们什么时候会被使用到呢？当我们需要将一个对象（严格来说是，引用类型的值）转化为原始值的时候，JavaScript 可能会调用到它们。</p> <p>举个例子：</p> <pre><code class="language-js">const obj = {} console.log('This is ' + obj) // "This is [object Object]" </code></pre> <p>内部过程是这样的：</p> <ol> <li>'This is ' + obj 操作，使得 obj 会自动转换为原始值。</li> <li>由于 obj 内部没有定义 @@toPrimitive 属性，所以它会先调用 toString 方法或 valueOf 方法。</li> <li>由于 obj 本身没有 toString 方法，JavaScript 会从原型上找到 Object.prototype.toString()，执行结果是 [object Object]。</li> <li>由于 toString 方法已经返回原始值了，就不会再调用 valueOf 方法了。（假设上面 toString 没有返回原始值，接着调用 valueOf 方法，如果结果还不是原始值，则会抛出 TypeError 错误）</li> <li>所以最后执行拼接操作的是两个字符串：'This is ' + '[object Object]'，所以结果就是它了。</li> </ol> <p>验证一下：</p> <pre><code class="language-js">// 示例 1：验证第 2 点。在类型转换时，优先寻找 @@toPrimitive 方法（即下面的 [Symbol.toPrimitive]） const obj = { [Symbol.toPrimitive]: hint => { console.log('注意：根据 ECMAScript 标准，若该方法返回引用类型，会抛出 TypeError') return 'abc' } } console.log('This is ' + obj) // "This is abc" // 示例 2：验证第 3 点 const obj = {} Object.prototype.toString = () => 'rewrite toString method' console.log('This is ' + obj) // "This is rewrite toString method" // 示例 3：验证第 4 点 const obj = { valueOf: hint => { console.log('执行 valueOf 方法') return {} }, toString: hint => { console.log('执行 toString 方法') return 'tostring' } } console.log('This is ' + obj) // "This is tostring"（在控制台可以看到，先后执行了 valueOf、toString 方法） console.log(String(obj)) // "tostring" </code></pre> <h2>valueOf</h2> <p>当 <code>OrdinaryToPrimitive(O, hint)</code> 抽象操作的 <code>hint</code> 为 <code>"number"</code> 时，JavaScript 会首先调用 <code>valueOf()</code> 方法。</p> <blockquote> <p>关于 <a href="https://262.ecma-international.org/#sec-ordinarytoprimitive">OrdinaryToPrimitive(O, hint)</a> 的介绍可以看<a href="https://github.com/tofrankie/blog/issues/239">文章</a>。</p> </blockquote> <h3>Object.prototype.valueOf</h3> <p><code>Object.prototype.valueOf()</code> 方法返回对象的<strong>原始值</strong>。</p> <pre><code class="language-js">Object.prototype.valueOf.call({}) // {} Object.prototype.valueOf.call([]) // [] </code></pre> <p>当我们创建一个对象 <code>const obj = {}</code>，当我们调用 <code>obj.valueOf()</code> 时，访问的就是 <code>Object.prototype.valueOf()</code> 方法。</p> <p>但是，JavaScript 里面内置了很多全局性的对象，如 <code>Array</code>、<code>Boolean</code>、<code>Date</code>、<code>Function</code>、<code>Number</code>、<code>Object</code>、<code>String</code>。它们都重写了自己的 <code>valueOf</code> 方法。其中 <code>Math</code> 和 <code>Error</code> 对象没有 <code>valueOf</code> 方法。</p> <p>通过以下方式，可以判断一个内置对象是否有重写自己的 <code>valueOf</code> 方法：</p> <pre><code class="language-js">// 结果为 false 表示有重写（toString 同理） Array.prototype.valueOf === Object.prototype.valueOf // true Function.prototype.valueOf === Object.prototype.valueOf // true Boolean.prototype.valueOf === Object.prototype.valueOf // false Date.prototype.valueOf === Object.prototype.valueOf // false Number.prototype.valueOf === Object.prototype.valueOf // false String.prototype.valueOf === Object.prototype.valueOf // false Symbol.prototype.valueOf === Object.prototype.valueOf // false BigInt.prototype.valueOf === Object.prototype.valueOf // false // 还有很多内置对象没列出来，可自行翻查 MDN 或 ECMAScript 文档... </code></pre> <table> <thead> <tr> <th>对象</th> <th>返回值</th> </tr> </thead> <tbody> <tr> <td>Boolean</td> <td>返回布尔值。</td> </tr> <tr> <td>Date</td> <td>返回的时间是从 1970 年 1 月 1 日 00:00:00 开始计的毫秒数（UTC）。</td> </tr> <tr> <td>Number</td> <td>返回数字值。</td> </tr> <tr> <td>String</td> <td>字符串值。</td> </tr> <tr> <td>Object</td> <td>返回对象本身。这是默认情况。</td> </tr> </tbody> </table> <blockquote> <p>需要注意的是，<code>Math</code>、<code>Error</code> 对象没有 <code>valueOf()</code> 方法。</p> </blockquote> <p>假设我们自行创建一个对象，可以这样去覆盖默认的 <code>Object.prototype.valueOf()</code> 方法：</p> <pre><code class="language-js">// 构造函数 function MyObject(my) { this.my = my } // 在原型上定义 valueOf 方法（该方法不应传入参数） MyObject.prototype.valueOf = function() { return this.my } // 实例化 var myObj = new Object('This is myObj.') console.log('' + myObj) // "This is myObj." </code></pre> <h3>其他内置对象的 valueOf 方法</h3> <p>其实好像没什么好说的，放链接自己看吧。</p> <ul> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean/valueOf">Boolean.prototype.valueOf()</a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/valueOf">Date.prototype.valueOf()</a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/valueOf">Number.prototype.valueOf()</a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf">String.prototype.valueOf()</a></li> </ul> <h2>二、toString</h2> <p>同样的，一般比较少主动去调用 <code>toString()</code> 方法。</p> <h3>Object.prototype.toString()</h3> <p><code>Object.prototype.toString()</code> 返回一个表示该对象的字符串。</p> <p>它实际访问的是对象内部的 <code>[[Class]]</code> 属性，返回的形式如：<code>"[object type]"</code>，常用于检测对象类型。</p> <pre><code class="language-js">function getClass(x) { const { toString } = Object.prototype const str = toString.call(x) return /^\[object (.*)\]$/.exec(str)[1] } getClass(null) // "Null" getClass(undefined) // "Undefined" getClass({}) // "Object" getClass([]) // "Array" getClass(JSON) // "JSON" getClass(() => {}) // "Function" ;(function() { return getClass(arguments) })() // "Arguments" </code></pre> <blockquote> <p>更多详见 <a href="https://github.com/tofrankie/blog/issues/239">JS 数据类型详解 — 对象的内部属性</a>章节</p> </blockquote> <pre><code class="language-js">Array.prototype.toString === Object.prototype.toString // false Function.prototype.toString === Object.prototype.toString // false Boolean.prototype.toString === Object.prototype.toString // false Date.prototype.toString === Object.prototype.toString // false Number.prototype.toString === Object.prototype.toString // false String.prototype.toString === Object.prototype.toString // false Symbol.prototype.toString === Object.prototype.toString // false BigInt.prototype.toString === Object.prototype.toString // false </code></pre> <h3>Array.prototype.toString()</h3> <p><code>Array.prototype.toString()</code> 方法，返回一个包含用逗号 <code>,</code> 分隔的每个数组元素的字符串。</p> <pre><code class="language-js">var arr = [1, 2, 3] console.log(arr.toString()) // "1,2,3" // 结果相当于 Array.prototype.join.call(instance, ',') arr.join(',') // "1,2,3" </code></pre> <h3>Function.prototype.toString()</h3> <p><code>Function.prototype.toString()</code> 方法，返回一个表示当前函数源代码的字符串。</p> <pre><code class="language-js">function fn() {} console.log(fn.toString()) // "function fn() {}" </code></pre> <h3>Boolean.prototype.toString()</h3> <p><code>Boolean.prototype.toString()</code> 方法，返回指定的布尔对象的字符串形式。</p> <pre><code class="language-js">console.log(true.toString()) // "true" console.log(false.toString()) // "false" </code></pre> <h3>String.prototype.toString()</h3> <p><code>String.prototype.toString()</code> 方法，返回指定对象的字符串形式。</p> <pre><code class="language-js">console.log(new String('foo').toString()) // "foo" </code></pre> <h3>Symbol.prototype.toString()</h3> <p><code>Symbol.prototype.toString()</code> 方法，返回当前 Symbol 对象的字符串表示。</p> <blockquote> <p>需要注意的是，Symbol 原始值不能转换为字符串，只能将其转换成对应的包装对象，再调用 <code>toString()</code> 方法。</p> </blockquote> <pre><code class="language-js">console.log(Symbol('foo') + 'bar' ) // TypeError: Cannot convert a Symbol value to a string // Symbol('foo') 结果是 Symbol 的原始值，再调用其包装对象的属性时，会自动转化为包装对象再调用其 toString() 方法 console.log(Symbol('foo').toString() + 'bar' ) // "Symbol(foo)bar" </code></pre> <h3>BigInt.prototype.toString()</h3> <p><code>BigInt.prototype.toString()</code> 方法，返回一个字符串，后面的 <code>n</code> 不是字符串的一部分。</p> <pre><code class="language-js">console.log(1024n.toString()) // "1024" console.log(1024n.toString(2)) // "10000000000" console.log(1024n.toString(16)) // "400" </code></pre> <p>The end.</p> </article> <article> <h1>细读 JS | 相等比较详解</h1> <p>Sun, 26 Feb 2023 11:10:26 GMT</p> <h2>先说结论</h2> <p>记住一句话：</p> <blockquote> <p>Always use 3 equals unless you have a good reason to use 2.</p> </blockquote> <h2>基本概念</h2> <p>在 JavaScript 中我们经常会使用 <code>===</code>（Strict equality，全等运算符）和 <code>==</code>（Equality，相等运算符）来比较两个操作数是否相等，它俩都返回一个布尔值的结果（否定形式分别是 <code>!==</code> 和 <code>!=</code>）。</p> <p>两者的区别：</p> <ul> <li><code>===</code> 总是认为不同类型的操作数是不相等的。</li> <li><code>==</code> 与前者不同，它会尝试<strong>强制类型转换</strong>且比较不同类型的操作数。（即如果操作数的类型不同，相等运算符会在比较之前尝试将它们转换为相同的类型）</li> </ul> <p>一张很经典的图：</p> <p> ▲ 相等运算符（==）判断</p> <blockquote> <p>源自 <a href="https://dorey.github.io/JavaScript-Equality-Table/">JavaScript-Equality-Table</a></p> </blockquote> <h2>全等运算符</h2> <p>全等运算符（<code>===</code>和 <code>!==</code>）使用<a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">全等比较算法</a>来比较两个操作数。</p> <p>从 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Strict_equality">MDN</a> 可以看到，大致概括如下：</p> <blockquote> <ul> <li>如果操作数的类型不同，则返回 <code>false</code>。</li> <li>如果两个操作数都是对象，只有当它们指向同一个对象时才返回 <code>true</code>。</li> <li>如果两个操作数都为 <code>null</code>，或者两个操作数都为 <code>undefined</code>，返回 <code>true</code>。</li> <li>如果两个操作数有任意一个为 <code>NaN</code>，返回 <code>false</code>。</li> <li>否则，比较两个操作数的值： <ul> <li>数字类型必须拥有相同的数值。<code>+0</code> 和 <code>-0</code> 会被认为是相同的值。</li> <li>字符串类型必须拥有相同顺序的相同字符。</li> <li>布尔运算符必须同时为 <code>true</code> 或同时为 <code>false</code>。</li> </ul> </li> </ul> </blockquote> <p>列举几个示例：</p> <pre><code class="language-js">console.log(1 === '1') // false console.log(1 === true) // false console.log(undefined === null) // false console.log({} === {}) // false </code></pre> <p>以上这些结果相信是毫无疑问的。但是，从写下这篇文章的时候 MDN 上关于 <code>===</code> 的描述并未涉及 Symbol、BigInt 类型。</p> <p>那么，我们直接看 ECMAScript 最新标准吧。（<a href="https://262.ecma-international.org/#sec-strict-equality-comparison">#sec-7.2.16</a>）</p> <p></p> <p>看起来“好像”只是简单的几句话对吧，翻译一下：</p> <p>需要注意的是，<a href="https://262.ecma-international.org/#sec-ecmascript-data-types-and-values"><code>Type(x)</code></a> 是 ECMAScript 标准定义的抽象操作（Abstract Operation），并非是 JavaScript 的某个语法，它返回的是 8 种数据类型。如果你多读 ECMAScript 标准，就会发现很多抽象操作里都有引用到 <code>Type(x)</code>，假设每处都对 <code>Type(x)</code> 进行描述显得多余重复，何不将它抽出来定义成一个抽象操作。（我猜 ECMAScript 标准修订者也是这么想的）</p> <blockquote> <ol> <li>如果 <code>x</code> 和 <code>y</code> 是两种不同的数据类型，则返回 <code>false</code>。</li> <li>如果 <code>x</code> 和 <code>y</code> 的类型同时是 Number 或 BigInt 类型，那么 a. 对应返回 <code>Number::equal(x, y)</code> 或 <code>BigInt::equal(x, y)</code> 的操作结果。</li> <li>返回 <code>SameValueNonNumber(x, y)</code> 的结果。</li> </ol> </blockquote> <blockquote> <p>注意：该算法与 <a href="https://262.ecma-international.org/#sec-samevalue">SameValue</a> 算法的区别在于对<strong>有符号零</strong>和 <code>NaN</code> 的处理。</p> </blockquote> <p>原来它是这样的三句话，哎~</p> <h3>1. Number::equal(x, y)</h3> <p><a href="https://262.ecma-international.org/#sec-numeric-types-number-equal">#sec-6.1.6.1.13</a></p> <p></p> <p>翻译过来就是：</p> <blockquote> <ol> <li>如果 <code>x</code> 或 <code>y</code> 任意一个的值为 <code>NaN</code>，则返回 <code>false</code>。</li> <li>如果 <code>x</code> 和 <code>y</code> 的数学量（<a href="https://262.ecma-international.org/#number-value">Number value</a>）是相等的，则返回 <code>true</code>。</li> <li>如果 <code>x</code> 为 <code>+0</code> 且 <code>y</code> 为 <code>-0</code>，则返回 <code>true</code>（反之亦然）。</li> <li>以上均不符合，则返回 <code>false</code>。</li> </ol> </blockquote> <blockquote> <p>需要注意的是，<code>+0</code> 与 <code>-0</code> 的数学量是不相等的。（将 <strong>Number value</strong> 翻译成<strong>数学量</strong>，不一定准确哈，这是 Google Translation 告诉我的，我没去细究，就那个意思，哈哈）</p> </blockquote> <pre><code class="language-js">1 / +0 // Infinity 1 / -0 // -Infinity Infinity === -Infinity // false </code></pre> <h3>2. BigInt::equal(x, y)</h3> <p><a href="https://262.ecma-international.org/#sec-numeric-types-bigint-equal">#sec-6.1.6.2.13</a></p> <p></p> <p>如果 <code>x</code> 和 <code>y</code> 均为 BigInt 类型，且具有相同的数学整数值（<a href="https://262.ecma-international.org/#mathematical%20integer">mathematical integer</a>），则返回 <code>true</code>，否则返回 <code>false</code>。</p> <h3>3. SameValueNonNumeric(x, y)</h3> <p><a href="https://262.ecma-international.org/#sec-samevaluenonnumeric">#sec-7.2.13</a></p> <p></p> <p>翻译过来就是：</p> <blockquote> <ol> <li>断言：<code>x</code> 既不是 Number 类型，也不是 BigInt 类型。</li> <li>断言：<code>x</code> 与 <code>y</code> 的数据类型相同。</li> <li>如果 <code>x</code> 是 Undefined 类型，则返回 <code>true</code>。</li> <li>如果 <code>x</code> 是 Null 类型，则返回 <code>true</code>。</li> <li>如果 <code>x</code> 是 <code>String</code> 类型，那么 a. 如果 <code>x</code> 和 <code>y</code> 是完全相同的代码单元序列（在相应的索引处具有相同的长度和相同的代码单元），则返回 <code>true</code>；否则返回 <code>false</code>。</li> <li>如果 <code>x</code> 是 Boolean 类型，那么 a. 如果 <code>x</code> 和 <code>y</code> 同时为 <code>true</code>，或同时为 <code>false</code>，则返回 <code>true</code>，否则返回 <code>false</code>。</li> <li>如果 <code>x</code> 是 Symbol 类型，那么 a. 如果 <code>x</code> 和 <code>y</code> 都是相同的 Symbol 值，则返回 <code>true</code>，否则返回 <code>false</code>。</li> <li>如果 <code>x</code> 和 <code>y</code> 是同一个引用值，则返回 <code>true</code>，否则返回 <code>false</code>。</li> </ol> </blockquote> <blockquote> <p>几个点注意一下：</p> <ol> <li> <p><code>Assert</code> 是断言。若以 <code>Assert:</code> 为开头的步骤（Step），明确了其算法的不变条件。例如上面的 <code>SameValueNonNumeric</code> 算法，第 1、2 步骤明确了 <code>x</code> 和 <code>y</code> 的具有相同的数据类型，且不为 Number 或 BigInt 类型。可以理解为，这两句断言是该算法的前提条件。</p> <p>细心的同学可能会发现，类似第 5 条步骤：<code>if Type(x) is String, then...</code>，接着下一条不是 <code>if Type(y) is String, then...</code>，因为它没必要了，前面的步骤已经明确了它的类型是一致的，如果有反而多余了。回头再看 <code>Number::equal(x, y)</code> 算法，其中第 1、2 步骤分别说明了 <code>x</code> 为 <code>NaN</code>，<code>y</code> 为 <code>NaN</code> 的情况，因为它前置条件没有断言。下文的算法也有类似的情况。</p> </li> <li> <p>如果第 3、4 步骤有人不理解的话，看这里。由于 Undefined、Null 类型对应的值分别只有 <code>undefined</code>、<code>null</code>。如果 <code>x</code> 为 Undefined 类型，则可以推断出 <code>x</code> 和 <code>y</code> 的值，只能是 <code>undefined</code>，因此返回 <code>true</code>。Null 同理。</p> <p>注意：本文表示数据类型，均以大写字母开头，例如 Undefined、String 等，而表示某种数据类型的值，均以小写字母出现，例如 <code>undefined</code>、<code>null</code> 等。前者不使用代码块形式高亮展示，后者则高亮展示。</p> </li> </ol> </blockquote> <h3>4. 小结</h3> <blockquote> <ul> <li>如果操作数的数据类型不同，则返回 <code>false</code>。</li> <li>如果两个操作数的数据类型相同： <ul> <li>如果操作数均为引用类型，只有当它们指向同一个对象时才返回 <code>true</code>，否则返回 <code>false</code>。</li> <li>如果操作数是 String、Boolean、Undefined、Null 类型之一，它们的值相等才返回 <code>true</code>，否则返回 <code>false</code>。</li> <li>如果操作数是 Symbol 类型，只有它们指向同一个值才返回 <code>true</code>，否则返回 <code>false</code>。（单独拿出来是因为它有点像引用类型的意思，Symbol 类型的本质就是创建一个独一无二的字符串，即使我们使用 <code>Symbol()</code> 函数创建了表面“看似一样”的字符串，但实际上它们是不相等的。例如：<code>Symbol() === Symbol()</code> 结果为 <code>false</code>）</li> <li>如果操作数是 Number 或 BigInt 类型，（除了一个例外）它们必须具有相同的数学值，才会返回 <code>true</code>，否则返回 <code>false</code>。 <ul> <li>当 <code>x</code>、<code>y</code> 的值之一是 <code>NaN</code>，返回 <code>false</code>。</li> <li>当 <code>x</code> 为 <code>+0</code>，<code>y</code> 为 <code>-0</code>，返回 <code>true</code>，反之亦然。</li> <li>当 <code>x</code> 为 <code>+0n</code>，<code>y</code> 为 <code>-0n</code>，返回 <code>true</code>，反之亦然。</li> </ul> </li> </ul> </li> </ul> </blockquote> <h2>三、全等运算符的“坑”</h2> <p>根据以上的比较算法，感觉 <code>===</code> 也并不是总“靠谱”。例如以下“反直觉”的判断：</p> <pre><code class="language-js">// PS：NaN 是一个全局对象的属性，与 Number.NaN 的值一样，都为 NaN（Not-A-Number）。 console.log(NaN === NaN) // false console.log(Number.NaN === NaN) // false console.log(+0 === -0) // true </code></pre> <h3>1. NaN</h3> <blockquote> <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> 是 JavaScript 中<strong>唯一一个不等于自身</strong>的值。</p> </blockquote> <p>因此，<code>NaN !== NaN</code> 结果为 <code>true</code> 似乎没毛病，只是反人类、反直觉罢了。</p> <p>下面总结了几种方法，来判断一个值是否为 <code>NaN</code>。</p> <pre><code class="language-js">// 1. 利用 NaN 的特性，JavaScript 中唯一一个不等于自身的值 function isnan(v) { return v !== v } // 2. 利用 ES5 的 isNaN() 全局方法 function isnan(v) { return typeof v === 'number' && isNaN(v) } // 3. 利用 ES6 的 Number.isNaN() 方法 function isnan(v) { return Number.isNaN(v) } // 4. 利用 ES6 的 Object.is() 方法 function isnan(v) { return Object.is(v, NaN) } </code></pre> <p>因此，无法通过 <code>Array.prototype.indexOf()</code> 来确定 <code>NaN</code> 在数组中的索引值。</p> <pre><code class="language-js">[NaN].indexOf(NaN) // -1 </code></pre> <p>可使用 ES6 的 <code>Array.prototype.includes</code> 方法判断</p> <pre><code class="language-js">[NaN].includes(NaN) // true </code></pre> <blockquote> <p><code>Array.prototype.indexOf()</code> 内部基于 <code>Strict Equality Comparison</code> 去比较，判断两个 Number 类型的操作数是否相等是根据 <code>equal</code> 算法实现的。而 <code>Array.prototype.includes</code> 内部则使用了 <code>sameValueZero</code> 算法，前者认为 <code>NaN</code> 与 <code>NaN</code> 是不相等的，后者则认为相等的。（详情看 <a href="https://262.ecma-international.org/#sec-numeric-types-number-equal">Number::equal (x, y)</a>、<a href="https://262.ecma-international.org/#sec-numeric-types-number-sameValueZero">Number::sameValueZero (x, y)</a>）</p> </blockquote> <blockquote> <p>关于 <code>NaN</code>、<code>isNaN()</code>、<code>Number.isNaN()</code> 的区别，详见 <a href="https://github.com/tofrankie/blog/issues/234">JavaScript 的迷惑行为大赏</a>。</p> </blockquote> <h3>2. +0 与 -0</h3> <p>在 JavaScript 中，数字类型包括浮点数、<code>+Infinity</code>（正无穷）、<code>-Infinity</code>（负无穷）和 <code>NaN</code>（not-a-number，非数字）。</p> <p>还有 ES2021 标准中增加了一种 <code>BigInt</code>（原始）类型，表示极大的数字（非本文范围，不展开叙述）。</p> <p>其实，<code>+0</code> 与 <code>-0</code> 是不相等的，为什么？</p> <pre><code class="language-js">console.log(1 / +0 === Infinity) // true console.log(1 / -0 === -Infinity) // true console.log(Infinity === -Infinity) // false // 因此，+0 和 -0 是两个不相等的值。只是“全等比较算法”里认为他们是相对的而已。 </code></pre> <h3>3. 处理以上两种特殊的情况</h3> <p>在 ES6 标准中，提出来一个方法 <code>Object.is()</code>，对以上两种情况都做了“正确”的处理。</p> <pre><code class="language-js">Object.is(NaN, NaN) // true Object.is(+0, -0) // false </code></pre> <p>而 ES5 可以这样去处理：</p> <pre><code class="language-js">function objectIs(x, y) { if (x === y) { // x === 0 => compare via infinity trick return x !== 0 || (1 / x === 1 / y) } // x !== y => return true only if both x and y are NaN return x !== x && y !== y } </code></pre> <h2>四、相等运算符</h2> <p>相等运算符（<code>==</code> 和 <code>!=</code>）使用<a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">抽象相等比较算法</a>比较两个操作数。</p> <blockquote> <p>如果对 JavaScript 的类型转换不熟悉的话，建议先看 <a href="https://github.com/tofrankie/blog/issues/242">JS 数据类型转换详解</a>。</p> </blockquote> <h3>1. ES5 相等比较算法</h3> <p>在 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Equality">MDN</a> 可以看到 <code>x == y</code> 比较的描述，如下：</p> <blockquote> <ul> <li>如果两个操作数都是对象，则仅当两个操作数都引用同一个对象时才返回 <code>true</code>。</li> <li>如果一个操作数是 <code>null</code>，另一个操作数是 <code>undefined</code>，则返回 <code>true</code>。</li> <li>如果两个操作数是不同类型的，就会尝试在比较之前将它们转换为相同类型： <ul> <li>当数字与字符串进行比较时，会尝试将字符串转换为数字值。</li> <li>如果操作数之一是 <code>Boolean</code>，则将布尔操作数转换为 <code>1</code> 或 <code>0</code>。 <ul> <li>如果是 <code>true</code>，则转换为 <code>1</code>。</li> <li>如果是 <code>false</code>，则转换为 <code>0</code>。</li> </ul> </li> <li>如果操作数之一是对象，另一个是数字或字符串，会尝试使用对象的 <code>valueOf()</code> 和 <code>toString()</code> 方法将对象转换为原始值。</li> </ul> </li> <li>如果操作数具有相同的类型，则将它们进行如下比较： <ul> <li><code>String</code>：<code>true</code> 仅当两个操作数具有相同顺序的相同字符时才返回。</li> <li><code>Number</code>：<code>true</code> 仅当两个操作数具有相同的值时才返回。<code>+0</code> 并被 <code>-0</code> 视为相同的值。如果任一操作数为 <code>NaN</code>，则返回 <code>false</code>。</li> <li><code>Boolean</code>：<code>true</code> 仅当操作数为两个 <code>true</code> 或两个 <code>false</code> 时才返回 <code>true</code>。</li> </ul> </li> </ul> </blockquote> <p>截止发文日期，我们可以看到它并没有关于 Symbol 和 BigInt 类型的描述，因此以上相等比较并不是最新的。</p> <blockquote> <p>目前 MDN 上的文档仍展示的是 ES5.1 的算法，而阮一峰老师翻译的一篇也不是最新的<a href="https://es6.ruanyifeng.com/#docs/spec#%E7%9B%B8%E7%AD%89%E8%BF%90%E7%AE%97%E7%AC%A6">相等比较算法</a>，它里面没有 ES2020 新增的 BigInt 类型。</p> </blockquote> <h3>2. ES6+ 相等比较算法</h3> <p>目前 ECMAScript 标准最新的<a href="https://262.ecma-international.org/#sec-abstract-equality-comparison">抽象相等比较算法</a>如下：</p> <p></p> <p>翻译一下：</p> <blockquote> <ol> <li>如果 <code>x</code> 与 <code>y</code> 相同，则返回全等比较 <code>x === y</code> 的结果。</li> <li>如果 <code>x</code> 为 <code>null</code> 且 <code>y</code> 为 <code>undefined</code>，则返回 <code>true</code>。</li> <li>如果 <code>x</code> 为 <code>undefined</code> 且 <code>y</code> 为 <code>null</code>，则返回 <code>true</code>。</li> <li>如果 <code>x</code> 为 Number 类型，而 <code>y</code> 为 String 类型，那么先将 <code>y</code> 转换为 Number 再比较。</li> <li>如果 <code>x</code> 为 String 类型，且 <code>y</code> 为 Number 类型，那么先将 <code>x</code> 转换为 Number 再比较。</li> <li>如果 <code>x</code> 是 BigInt 类型，且 <code>y</code> 是 String 类型，则 a. 将 <code>y</code> 转换为 BigInt 类型，转换结果暂记为 <code>n</code>。 b. 如果 <code>n</code> 为 <code>NaN</code>，则返回 <code>false</code>。 c. 否则，返回 <code>x == n</code> 的比较结果。</li> <li>如果 <code>x</code> 为 String 类型，<code>y</code> 为 BigInt 类型，则返回比较结果 <code>y == x</code>。</li> <li>如果 <code>x</code> 为 Boolean 类型，那么先将 <code>x</code> 转换为 Number 类型，再比较。</li> <li>如果 <code>y</code> 为 Boolean 类型，那么先将 <code>y</code> 转换为 Number 类型，再比较。</li> <li>如果 <code>x</code> 是 String、Number、BigInt 或 Symbol 类型，并且 <code>y</code> 是Object 类型，那么将 <code>y</code> 转换成原始（Primative）类型再比较。</li> <li>如果 <code>x</code> 是 Object 类型，且 <code>y</code> 是String、Number、BigInt 或Symbol 类型，那么将 <code>x</code> 转换成原始（Primative）类型再比较。</li> <li>如果 <code>x</code> 是 BigInt 类型，且 <code>y</code> 是 Number 类型，或者 <code>x</code> 是 Number 类型且 <code>y</code> 是 BigInt 类型，则 a. 如果 <code>x</code> 或 <code>y</code> 为 <code>NaN</code>、<code>Infinity</code> 或 <code>-Infinity</code> 中的任何一个，则返回 <code>false</code>。 b. 否则返回 <code>x</code> 和 <code>y</code> 的比较结果。</li> <li>以上都不满足，那么返回 <code>false</code>。例如规则 10 在类型转换时出现 <code>TypeError</code> 状况时，那么就会在这里返回 <code>false</code>。</li> </ol> </blockquote> <p>相等运算符与<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">全等运算符</a>（<code>===</code>）运算符之间最显着的区别在于，后者不尝试类型转换。相反，前者始终将不同类型的操作数视为不同。</p> <p>列举几个示例：</p> <pre><code class="language-js">// 这些例子都是很简单的 console.log(false == undefined) // false console.log(null == undefined) // true console.log(null == false) // false console.log(null == 0) // false console.log(null == '') // false console.log('\n 123 \t' == 123) // true, because conversion to number ignores leading and trailing whitespace in JavaScript. </code></pre> <p>相信很多人在没有完全弄清楚相等运算符比较的【套路】之前，会很让人抓狂...</p> <p>针对以上 13 条规则，再提炼总结一下（但是标准描述真的是非常地严谨 👍）：</p> <ol> <li>如果两个操作数是同一类型，返回 <code>x === y</code> 的结果。</li> <li>如果一个操作数是 <code>null</code>，另一个操作数是 <code>undefined</code>，则返回 <code>true</code>。</li> <li>如果一个操作数是 Number 类型，另一个是操作数 String 类型，那么会将 String 类型的操作数先转换为 Number 类型，接着按第 1 点去比较并返回结果。</li> <li>如果一个操作数 <code>x</code> 是 BigInt 类型，另一个是操作数 <code>y</code> 是 String 类型，那么会将 String 类型的操作数先转换为 BigInt 类型（假设转换结果为 <code>n</code>）。 <ol> <li>如果 <code>n</code> 为 <code>NaN</code>，则返回 <code>false</code>。</li> <li>否则返回 <code>x == n</code> 的结果。</li> </ol> </li> <li>如果一个操作数是 Boolean 类型，则会将布尔值转换为 Number 类型，并返回 <code>x == ToNumber(y)</code> 的结果。</li> <li>如果一个操作是引用类型，另一个是原始类型，那么会将引用值转换为原始值，并返回 <code>ToPrimitive(x) == y</code>。</li> <li>如果一个操作数是 BigInt 类型，另一个是 Number 类型，那么 <ol> <li>如果其中一个数是 <code>NaN</code>、<code>Infinity</code> 或 <code>-Infinity</code> 中的任何一个，则返回 <code>false</code>。</li> <li>如果 <code>x</code> 和 <code>y</code> 的数学值相等，则返回 <code>true</code>，否则返回 <code>false</code>。</li> </ol> </li> <li>返回 <code>false</code>（包括以上转换过程出现 <code>TypeError</code> 都会在这里返回 <code>false</code>）。</li> </ol> <blockquote> <p>仔细观察可以看得到，相等比较都向着数字类型（这里指 Number 和 BigInt）转化的趋势。</p> </blockquote> <h2>五、相等比较常见示例</h2> <p>其实熟悉以上算法之后，遇到一些看似很“奇葩”的比较也不足为惧了。</p> <h3>1. 0 == false</h3> <pre><code class="language-js">0 == null // false 0 == undefined // false，同理 </code></pre> <p>根据 <code>Type(x)</code> 抽象操作规则，<code>Type(0)</code> 结果为 <code>Number</code>，<code>Type(null)</code> 结果为 <code>Null</code>，再结合比较算法，可以清楚地知道它按照第 13 点返回 <code>false</code>。</p> <blockquote> <p>需要注意的是，这里的 <code>Type(x)</code> 是指 ECMAScript 标准里面定义的一个操作，该操作表示返回 <code>x</code> 对应的数据类型。而不是具体的 JavaScript 语法，与 <code>typeof()</code> 有本质意义上的不同，别混淆了。</p> </blockquote> <h3>2. [] == ![]</h3> <p>看到这个式子，千万别急眼，一步一步来......</p> <pre><code class="language-js">[] == ![] // true </code></pre> <p>我们来分析一下，根据运算符优先级，<code>!</code> （逻辑非）的优先级高于 <code>==</code>，因此优先执行 <code>![]</code>。而 <code>[]</code> 属于真值（Truthy），所以 <code>![]</code> 结果为 <code>false</code>。</p> <pre><code class="language-js">[] == false </code></pre> <p>根据第 9 条规则，先将 Boolean 类型的值转换为 Number 类型，所以变成了：</p> <pre><code class="language-js">[] == 0 </code></pre> <p>再根据第 11 条规则，先将引用类型转换为原始类型，故进行的操作是 <code>ToPrimitive([])</code>。</p> <p>（这步操作可能稍微复杂一点点，但别急）由于数组实例本身没有 <code>@@toPrimitive</code> 方法，且此时 <code>ToPrimitive</code> 操作的 <code>hint</code> 值为 <code>"default"</code>（根据 <code>ToPrimitive</code> 规则，里面的其中一个步骤会将 <code>hint</code> 设为 <code>"number"</code>），然后进行 <code>OrdinaryToPrimitive</code> 操作，因此会先调用 <code>valueOf</code> 方法，再调用 <code>toString</code> 方法。</p> <pre><code class="language-js">// 由于 [].valueOf() // 结果为数组本身，并非原始值，接着调用 toString 方法 [].toString() // 结果为 ""，所以 [] 的 ToPrimitive 操作返回的是空字符串 // 所以变成了 '' == 0 </code></pre> <p>根据第 5 条规则，将 <code>""</code> 转换为数值 <code>0</code>，即</p> <pre><code class="language-js">0 == 0 // true </code></pre> <p>严格来说，其实还有一步的。根据第 1 条规则，返回 <code>0 === 0</code> 的结果。</p> <p>整个转换过程如下，因此 <code>[] == ![]</code> 比较结果为 <code>true</code>。</p> <pre><code class="language-js">[] == ![] [] == false [] == 0 '' == 0 0 == 0 0 === 0 // true </code></pre> <h3>3. {} == !{}</h3> <p>它看着跟前面一个例子很相似，转换过程同理，但结果是...</p> <pre><code class="language-js">{} == !{} // false </code></pre> <p>首先，根据操作符优先级顺序，先将 <code>!{}</code> 转换为 <code>false</code>。即变成了 <code>{} == false</code> 的比较，然后将 <code>false</code> 转换为 <code>0</code>，所以变成了。</p> <pre><code class="language-js">{} == 0 </code></pre> <p>然后将 <code>{}</code> 转换为原始值，即执行 <code>ToPrimitive({})</code> 操作。其中 <code>hint</code> 为 <code>"default"</code>。所以先执行 <code>{}.toString()</code> 方法，得到 <code>"[object Object]"</code> 结果，由于结果已经是原始值，不再调用 <code>valueOf()</code> 方法了。</p> <pre><code class="language-js">"[object Object]" == 0 </code></pre> <p>根据第 5 条规则，将 <code>"[object Object]"</code> 转换为数值，进行的操作是 <code>ToNumber("[object Object]")</code>，即执行方法 <code>Number("[object Object]")</code>，得到的结果是 <code>NaN</code>。</p> <pre><code class="language-js">NaN == 0 </code></pre> <p>由于 <code>NaN</code>、<code>0</code> 都是 Number 类型，根据第 1 条规则，返回 <code>NaN === 0</code> 的结果。而 <code>NaN</code> 与任何操作数（包括其本身）进行全等比较，均返回 <code>false</code>。</p> <p>因此 <code>{} == !{}</code> 的结果为 <code>false</code>。整个过程如下：</p> <pre><code class="language-js">{} == !{} {} == false {} == 0 '[object Object]' == 0 NaN == 0 NaN === 0 // false </code></pre> <h3>4. 10 == 10n</h3> <p>来看看 Number 类型与 BigInt 类型的相等比较。</p> <pre><code class="language-js">10 == 10n // true </code></pre> <p>根据规则第 12 条，且两个操作数并非是 <code>NaN</code>、<code>Infinity</code>、<code>-Infinity</code>，因此比较两者的数学值（<a href="https://262.ecma-international.org/#mathematical-value">mathematical value</a>），其数学值是相等的，所以结果为 <code>true</code>。</p> <h2>五、其他</h2> <h3>1. +、-、*、/、% 的隐式类型转换</h3> <p>除了 <code>+</code>、<code>-</code> 既可以作为一元运算符、也可以是算术运算符，其余的均为算术运算符。</p> <ul> <li> <p>当 <code>+</code>、<code>-</code>、<code>*</code>、<code>/</code>、<code>%</code> 均为算术运算符时，会将运算符两边的操作数先转换为 Number 类型（若已经是 Number 类型则无需再转换），再进行相应的算术运算。</p> </li> <li> <p>当 <code>+</code>、<code>-</code> 作为一元运算符时，即只有一个运算符和操作数。前者将操作数转换为 Number 类型并返回。后者将操作数转换为 Number 类型，然后取反再返回。</p> </li> </ul> <p>未完待续，拼命更新中...</p>  <h2>六、参考链接</h2> <ul> <li><a href="https://dorey.github.io/JavaScript-Equality-Table/">JavaScript-Equality-Table</a></li> <li><a href="https://github.com/tofrankie/blog/issues/234">JavaScript 的迷惑行为大赏</a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness">JavaScript 中的相等性判断</a></li> <li><a href="https://262.ecma-international.org/#sec-strict-equality-comparison">Strict Equality Comparison</a></li> <li><a href="https://262.ecma-international.org/#sec-abstract-equality-comparison">Abstract Equality Comparison</a></li> </ul>  </article> <article> <h1>细读 JS | 数据类型详解</h1> <p>Sun, 26 Feb 2023 11:09:16 GMT</p> <h2>一、数据类型的分类</h2> <p>截止发文日期，ECMAScript 标准的数据类型仅有 8 种（<a href="https://262.ecma-international.org/#sec-ecmascript-language-types">ECMAScript Language Types</a>）。可以分为两类：</p> <ul> <li><strong>原始类型</strong>（Primitives），我们也称作<strong>基本数据类型</strong>。 <ul> <li>Undefined</li> <li>Null（一种特殊的原始类型，<code>typeof(instance) === 'object'</code>）</li> <li>Boolean</li> <li>String</li> <li>Symbol（<code>typeof(instance) === 'symbol'</code>）</li> <li>Number</li> <li>BigInt（<code>typeof(instance) === 'bigint'</code>）</li> </ul> </li> <li><strong>引用类型</strong>（Objects） <ul> <li>Object（包括从 Object 派生出来的结构类型，如 Object、Array、Map、Set、Date 等）</li> </ul> </li> </ul> <blockquote> <p>关于使用 <code>typeof</code> 判断以上数据类型的话题，老生常谈了。例如，为什么 <code>typeof null === 'object'</code>、<code>typeof(() => {}) === 'function'</code> 呢？这里不展开赘述了，详见：<a href="https://github.com/tofrankie/blog/issues/234">JavaScript 的迷惑行为大赏</a>。</p> </blockquote> <p>原始类型的比较的是值，只有两者的值相等，那么它们被认为是相等的，否则不相等。而引用类型比较的是地址，当两者的标识符同时指向内存的同一个地址，则被认为是相等的，否则不相等。</p> <pre><code class="language-js">console.log({} == {}) // false console.log([] == []) // false </code></pre> <h2>二、原始类型与原始值</h2> <p>所有基本类型的值（即原始值，Primitive Values）都是<strong>不可改变</strong>（immutable）的，而且<strong>不含任何属性和方法</strong>的。</p> <p><strong>到这里可能会有小伙伴打问号了？？？</strong></p> <p>Q1：原始类型与原始值有什么区别？</p> <blockquote> <p>原始类型的值称为原始值。例如原始类型 Boolean 有两个（原始）值 <code>true</code> 和 <code>false</code>。同样的原始类型 Undefined（Null），只有一个原始值 <code>undefined</code>（<code>null</code>）。其他的就有很多个了...</p> </blockquote> <p>Q2：原始值不可改变？这样不是改变了吗？</p> <pre><code class="language-js">var foo = true foo = false console.log(foo) // false </code></pre> <blockquote> <p>其实不然，以上示例是原始类型和一个赋值为原始类型的变量的区别。变量会被赋予一个新值，而原值不能像数组、对象以及函数那样被改变。</p> </blockquote> <p>基本类型值可以被替换，但不能被改变。</p> <pre><code class="language-js">// 使用字符串方法不会改变一个字符串 var foo = 'foo' foo.toUpperCase() console.log(foo) // "foo" // 赋值行为可以给基本类型一个新值，而不是改变它 foo = foo.toUpperCase() // "FOO" </code></pre> <p>再有示例：</p> <pre><code class="language-js">var num = 1 function add(num) { num += 1 console.log(num) } add(num) // 2 console.log(num) // 1 // ************************** 华丽的分割线 ************************** // 如果没有看上面的一些概念，单纯地看上面的例子，我相信百分百都能得到正确答案。 // 但看完上面一些的概念之后，再结合例子，不知道会不会有人对 “原始类型的值不可改变” 这句话产生怀疑？ // 如果有怀疑就继续往下看 👇👇👇，否则可直接跳到 Q3 了。 // ************************** 华丽的分割线 ************************** // JS 运行的三个步骤：词法分析、预编译、解析执行。 // 其中预编译，不仅仅发生在 script 代码块执行之前，还发生在函数执行之前。 // // 函数预编译的过程大致是这样的： // 1. 首先查找形参和变量声明（此时并赋予值 undefined） // 2. 接着将实参赋值给形参 // 3. 接着查找函数体内的函数声明（赋予函数本身）。 // // 函数 add 在实参赋值给形参的过程，会将传递进来的参数（基本类型的值）复制一份， // 创建一个本地副本，该副本只存在于该函数的作用域中。（原本的值与副本是完全独立，互不干扰的） </code></pre> <p>Q3：原始值没有任何属性和方法？那这个是怎么回事？</p> <pre><code class="language-js">var foo = 'foo' console.log(foo.length) // 3 console.log(foo.toUpperCase()) // "FOO" // 试图改变 length 属性 foo.length = 4 console.log(foo.length) // 3 </code></pre> <blockquote> <p>其实这是 JavaScript 包装类的内容了。</p> </blockquote> <p>在 JavaScript 中除了 <code>null</code> 和 <code>undefined</code> 之外，所有的基本类型都有其对应的包装对象（Wrapper Object）。因此，访问 <code>null</code> 或 <code>undefined</code> 的任何属性和方法都会抛出错误。</p> <ul> <li><code>String</code> 为字符串基本类型。</li> <li><code>Number</code> 为数值基本类型。</li> <li><code>BigInt</code> 为大整数基本类型。</li> <li><code>Boolean</code> 为布尔基本类型。</li> <li><code>Symbol</code> 为字面量基本类型。</li> </ul> <p>这些包装对象的 <code>valueOf </code>方法返回其对应的原始值。</p> <blockquote> <p>再次明确一点，原始值是没有任何属性和方法的。</p> </blockquote> <p>不是说好的，原始值不含任何的属性和方法吗？那 <code>foo.length</code> 和 <code>foo.toUpperCase()</code> 是咋回事啊？？？</p> <p>其实它内部是这样实现的：<strong>当字符串字面量调用一个字符串对象才有的方法或属性时，JavaScript 会自动将基本字符串转化为字符串对象并且调用相应的方法或属性。</strong>（Boolean 和 Number 也同样如此）。</p> <p>我们尝试在控制台上打印一下 <code>new String('foo')</code>，可以看到该实例对象有一个 <code>length</code> 属性，其值为 <code>3</code>，实例对象本身没有 <code>toUpperCase()</code> 方法，所以接着往原型上查找，果然找到了。（由于原型上方法太多，截图里没有展开，否则影响文章篇幅）</p> <p></p> <p>因此</p> <pre><code class="language-js">var foo = 'foo' console.log(foo.length) // 3 console.log(foo.toUpperCase()) // "FOO" // 相当于 var foo = 'foo' console.log(new String(foo).length) // 3 console.log(new String(foo).toUpperCase()) // "FOO" </code></pre> <p>可下面为什么 <code>length</code> 还是 <code>3</code> 呢？</p> <pre><code class="language-js">foo.length = 4 console.log(foo.length) // 3 // 怎样理解呢？ // // // 执行第一行代码 // foo.length = 4 可以拆分成两部分去理解： var temp = new String(foo) // 在内存中创建了一个对象，只是没有一个标识符（变量）指向它而已（为了便于理解，我这里假装有一个 temp 变量指向它） temp.length = 4 // 修改包装对象的 length 属性，其实是修改成功的 // 由于该对象并没有被引用，所以在执行下一句代码之前就被回收销毁了 // // // 2. 执行第二行代码 // console.log(foo.length) 相当于 console.log(new String(foo).length) // foo 还是 "foo"，自然结果就是 3 了。 </code></pre> <h2>三、对象</h2> <p>在 JavaScript 中，除了以上的原始值，其余都属于对象。</p> <p>与原始类型不同的是，对象是可变（mutable）的。</p> <h3>1. 对象的分类</h3> <p>我们可以将对象划分为<strong>普通对象</strong>（ordinary object）和<strong>函数对象</strong>（function object）。</p> <p>那怎样区分呢？我们先定义一些 <code>Function</code> 实例和 <code>Object</code> 实例：</p> <pre><code class="language-js">// Function 实例 function fn1() {} var fn2 = function() {} var fn3 = new Function('console.log("Hi, everyone")') // 一般不使用 Function 构造器去生成 Function 对象，相比函数声明或者函数表达式，它表现更为低效。 // Object 实例 var obj1 = {} var obj2 = new Object() var obj3 = new fn1() </code></pre> <p>我们来打印一下结果：</p> <pre><code class="language-js">typeof Object // "function" typeof Function // "function" typeof fn1 // "function" typeof fn2 // "function" typeof fn3 // "function" typeof obj1 // "object" typeof obj2 // "object" typeof obj3 // "object" </code></pre> <p><code>Object</code> 和 <code>Function</code> 本身就是 JavaScript 中自带的函数对象。其中 <code>obj1</code>、<code>obj2</code>、<code>obj3</code> 为普通对象（均为 <code>Object</code> 的实例），而 <code>fn1</code>、<code>fn2</code>、<code>fn3</code> 为函数对象（均是 <code>Function</code> 的实例）。</p> <p>记住以下这句话：</p> <blockquote> <p>所有 <code>Function</code> 的实例都是<strong>函数对象</strong>，而其他的都是<strong>普通对象</strong>。</p> </blockquote> <h3>2. 对象的原型</h3> <p>接着，引入两个很容易让人抓狂、混淆的两兄弟 <code>prototype</code> （原型对象）和 <code>__proto__</code>（原型）。这俩兄弟的主要是为了构造<strong>原型链</strong>而存在的。</p> <table> <thead> <tr> <th>对象类型</th> <th>prototype</th> <th>__proto__</th> </tr> </thead> <tbody> <tr> <td>普通对象</td> <td>❌</td> <td>✅</td> </tr> <tr> <td>函数对象</td> <td>✅</td> <td>✅</td> </tr> </tbody> </table> <p>因此有以下结论：</p> <blockquote> <p>所有对象都有 <code>__proto__</code> 属性，而只有函数对象才具有 <code>prototype</code> 属性。</p> </blockquote> <p>再上几个菜，请慢慢品尝：</p> <pre><code class="language-js">// 每个对象都有一个 constructor 属性，该属性指向实例对象的构造函数 Object.prototype.constructor === Object // true Function.prototype.constructor === Function // true // （全局对象）Object 是（构造器）Function 的实例 // （全局对象）Function 也是（构造器）Function 的实例 Object.__proto__ === Function.prototype // true Function.__proto__ === Function.prototype // true // （构造器）Function 也是（构造器）Object 的实例 Function.prototype.__proto__ === Object.prototype // true // 从原型上查找属性，不可能无终止地查找下去，那原型的尽头在哪呢？ // 站在原型顶端的男人，是它。 // 假设我们访问一个对象的属性或者方法，如若前面的原型上均无法查找到，最终会止步于此，并返回 undefined。 Object.prototype.__proto__ // null </code></pre> <p>在 JavaScript 中访问一个对象属性，它在原型上是怎样查找的呢？</p> <pre><code class="language-js">function Person() {} // 构造函数 var person = new Person() // 实例化对象 console.log(person.name); // undefined // 过程如下： person // 是对象，可以继续 person['name'] // 不存在属性 name，继续查找 person.__proto__ // 是对象，可以继续 person.__proto__['name'] // 不存在属性 name，继续查找 person.__proto__.__proto__ // 是对象，可以继续 person.__proto__.__proto__['name'] // 不存在属性 name，继续查找 person.__proto__.__proto__.__proto__ // 不是对象，是 null 值。停止查找，返回 undefined </code></pre> <blockquote> <p>需要注意的是，<code>Object.prototype.__proto__</code> 从未被包括在 ECMAScript 语言规范中标准化，但它被大多数浏览器厂商所支持。该特性已从 Web 标准中删除，详情可看 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">Object.prototype.__proto__</a>。</p> <p>在标准中，几乎（例外是 <code>Object.create(null)</code> ，下面有说明）每个实例对象内部都有一个 <code>[[Prototype]]</code> 属性，该属性指向对象的原型，而且该属性值只会是<strong>对象</strong>或者 <code>null</code>。</p> <p>在非标准下，可以通过 <code>Object.prototype.__proto__</code> 访问（或设置）实例对象内部的 <code>[[Prototype]]</code>，这种方式其实是不被推荐使用的。现在更被推荐使用的方式是 <code>Objec.getPrototypeOf()</code>/<code>Object.setPrototypeOf()</code>。</p> </blockquote> <blockquote> <p>请注意，以上（包括下文）所指对象均不是通过 <code>Object.create(null)</code> 实例化的（除特意说明外）。<code>Object.create(null)</code> 实例化的对象比较特殊，它内部没有 <code>[[Prototype]]</code> 属性，也没有任何其他内部属性。（<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a>）</p> </blockquote> <pre><code class="language-js">var obj = Object.create(null) var obj1 = Object.create(null) var obj2 = {} obj.__proto__ === undefined // true obj.getPrototypeOf() // 抛出错误 TypeError: obj.getPrototypeOf is not a function </code></pre> <p>我们可以在控制台打印一下，看下两者的区别。</p> <p></p> <p>JavaScript 常被描述为一种基于原型的语言 —— 每个对象拥有一个原型（<code>[[Prototype]]</code>），对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链（prototype chain）。</p> <h3>3. 继承</h3> <p>关于继承内容，详见 <a href="https://github.com/tofrankie/blog/issues/213">深入 JavaScript 继承原理</a>。</p> <h3>4. 对象的内部属性（Internal properties）</h3> <p>在规范中，对象的内部方法和内部插槽使用双方括号 <code>[[]]</code> 中包含的名称标识，且首字母为大写。例如 <code>[[Prototype]]</code>、<code>[[Class]]</code>、<code>[[Extensible]]</code>、<code>[[Call]]</code>、<code>[[Scopes]]</code>、<code>[[FunctionLocation]]</code> 等等。</p> <p>下面挑几个来讲一下：</p> <h4>4.1 [[Class]]</h4> <p><code>[[Class]]</code> 是对象的一个内部属性，其值为以下<strong>字符串</strong>之一：</p> <ul> <li>常见的有：<code>Function</code>、<code>Object</code>、<code>Array</code>、<code>Boolean</code>、<code>Number</code>、<code>String</code>、<code>Symbol</code>、<code>RegExp</code>、<code>JSON</code>、<code>Date</code>、<code>Math</code>、<code>Error</code>、<code>Arguments</code> 等。</li> <li>比较少用的有：<code>BigInt</code>、<code>Set</code>、<code>WeakSet</code>、<code>Map</code>、<code>WeakMap</code>、<code>Reflect</code>、<code>Promise</code>、<code>GeneratorFunction</code>、<code>AsyncFunction</code>、<code>Window</code>、<code>Intl</code>、<code>WebAssembly</code>，以及派生于 <code>HTMLElement</code> 的（如 <code>HTMLScriptElement</code> ）等等。</li> <li>几乎所有<a href="">标准内置对象</a>，都有特定的类型。实在太多了...</li> </ul> <p>我们都知道 <code>typeof</code> 无法判断对象的具体类型，无论是 <code>typeof {}</code>、<code>typeof []</code>、还是 <code>typeof Math</code> 都返回 <code>"object"</code>。但有了 <code>[[Class]]</code> 属性之后，我们就可以利用它来判断对象的类型了。访问 <code>[[Class]]</code> 的唯一方法是通过默认的 <code>toString()</code> 方法（该方法是通用的）：</p> <blockquote> <p>Object.prototye.toString()</p> <ul> <li>如果参数 <code>undefined</code>，则返回 <code>[object Undefined]</code> 字符串；</li> <li>如果参数 <code>null</code>，则返回 <code>[object Null]</code> 字符串；</li> <li>如果参数是一个对象，则返回 <code>"[object " + obj.[[Class]] + "]"</code> 字符串，例如 <code>[object Array]</code>；</li> <li>如果参数是一个原始值，则会先将其转换为相应的对象，然后按照以上的规则输出。</li> </ul> </blockquote> <p>以下封装了获取对象类型的方法：</p> <pre><code class="language-js">function getClass(x) { const { toString } = Object.prototype const str = toString.call(x) return /^\[object (.*)\]$/.exec(str)[1] } getClass(null) // "Null" getClass(undefined) // "Undefined" getClass({}) // "Object" getClass([]) // "Array" getClass(JSON) // "JSON" getClass(() => {}) // "Function" ;(function() { return getClass(arguments) })() // "Arguments" </code></pre> <h4>4.2 [[Construct]]</h4> <p>一个对象里，如若没有 <code>[[construct]]</code> 属性，是无法使用 <code>new</code> 关键字进行构造的。</p> <h2>四、类型转换</h2> <p>在 JavaScript 中，我们会经常使用相等运算符（<code>==</code>）去比较两个操作数是否相等。当两个操作数一个是引用类型，另一个是原始类型的时候，前者会先转换为原始类型，再比较。</p> <p>那么，引用类型是如何转换为原始类型的呢？</p> <blockquote> <p>关于 JavaScript 类型转换的内容，详见 <a href="https://github.com/tofrankie/blog/issues/242">JS 数据类型转换详解</a>。</p> </blockquote> <p>未完待续...</p> <h2>五、参考链接</h2> <ul> <li><a href="https://2ality.com/2013/09/types.html">JavaScript’s type system</a></li> <li><a href="https://2ality.com/2013/01/categorizing-values.html">Categorizing values in JavaScript</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Primitive">Primitive MDN</a></li> <li><a href="https://262.ecma-international.org/#sec-toprimitive">ToPrimitive Abstract Operation</a></li> <li><a href="https://262.ecma-international.org/#sec-ordinarytoprimitive">OrdinaryToPrimitive Abstract Operation</a></li> </ul> </article> <article> <h1>解决安卓收起键盘无法触发失焦事件的问题</h1> <p>Sun, 26 Feb 2023 11:06:46 GMT</p> <h2>背景</h2> <p>最近在做一个移动端 Web 项目，在首页底部是有一个类似于 APP 导航栏（以下称 <code>FootNav</code>），采用的 <code>fixed</code> 布局固定于底部。同时页面有一些 <code><input></code> 输入框（以下称 <code>Input</code>）。</p> <p>当聚焦于 <code>Input</code> 时，在 iOS 预期效果是没问题，但是在杀千刀的 Android 上，页面高度发生变化，导致 <code>FootNav</code> 固定在手机键盘上面，同时 <code>FootNav</code> 也直接挡住了输入框，交互体验非常的糟糕。</p> <p>烦死了...</p> <h2>iOS 与 Android 键盘弹出收起的表现</h2> <p>先了解下背景，键盘的弹出收起，在 iOS 端与 Android 端的 WebView 中表现并非一致的。</p> <h3>键盘弹出</h3> <ul> <li> <p>iOS 在 iOS 系统的键盘处于窗口的最上层。当键盘弹出时，WebView 的高度 <code>height</code> 并没有发生改变，只是 <code>scrollTop</code> 发生改变。页面可以滚动，且页面可滚动的最大限度为弹出键盘的高度，而只有键盘弹出时页面恰好也滚动到最底部时，<code>scrollTop</code> 的变化值为键盘高度。</p> </li> <li> <p>Android 在 Android 系统中，键盘也是处于窗口的最上层。键盘弹出时，页面高度发生变化，如果输入框在靠近底部的话，就会被键盘挡住，只有你输入的时候才会滚动到可视化区域。</p> </li> </ul> <h3>键盘收起</h3> <ul> <li> <p>iOS 当触发键盘上按钮收起键盘或者输入框以外的区域时，输入框会失去焦点，因此会触发输入框的 <code>blur</code> 失焦事件。</p> </li> <li> <p>Android 当触发键盘上的按钮收起键盘时，输入框并不会失去焦点，因此不会触发输入框的 <code>blur</code> 事件；触发输入框以外的区域时，输入框会失去焦点，触发输入框的 <code>blur</code> 事件。</p> </li> </ul> <blockquote> <p>由于我并没有过多的深入了解两者的差异表现，以上内容来自<a href="https://www.cnblogs.com/xiaonian8/p/13740210.html">此处</a>。</p> </blockquote> <h2>寻找解决方案</h2> <p>针对 Android 设备做处理就行了，iOS 无需处理。</p> <h3>方案一</h3> <p>处理方式：<strong><code>Input</code> 聚焦隐藏 <code>FootNav</code>，失焦时再将其显示出来</strong>。（同理，修改布局方式也是一样的）</p> <p>首先这种处理思路是没毛病的，但是...</p> <blockquote> <p>某些机型、某些输入法，收起键盘并不会触发输入框的 <code>blur</code> 失焦事件，导致该方案直接流产。</p> </blockquote> <h3>方案二</h3> <p>监听页面高度的变化，利用这一点我们就可以处理 FootNav 的隐藏/显示了。</p> <h2>实现</h2> <p>思路很简单：首先进入页面时，先记录窗口的原始高度。每当 <code>Input</code> 聚焦时，设置 <code>window.onresize</code> 函数，当窗口宽高发生改变时便会触发。</p> <p>以 React 为例：</p> <pre><code class="language-jsx">class Home extends React.Component { constructor(props) { super(props) this.state = { showFootNav: true, initClientHeight: document.documentElement.clientHeight // 记录初始高度 } } // 判断 Android 设备 isAndroid() { const ua = navigator.userAgent.toLowerCase() return ua.includes('android') || ua.includes('linux') } // 监听窗口变化 listenWindowResize() { let that = this if (this.isAndroid()) { window.onresize = () => { const { initClientHeight } = that.state const curClientHeight = document.documentElement.clientHeight // 当前页面高度 if (curClientHeight < initClientHeight) { // 键盘弹出 that.setState({ showFootNav: false }) } else { // 键盘收起 that.setState({ showFootNav: true }, () => { window.onresize = null // 清空 onresize }) } } } } render() { const { showFootNav } = this.state // 以下 Input、FootNav 为自定义封装的组件 return ( <div> <Input onFocus={this.listenWindowResize.bind(this)} /> {showFootNav ? <FootNav /> : null} </div> ) } } </code></pre> <blockquote> <p>本文之外的一些兼容性问题，iOS 也有一些 bug 的，比如微信浏览器里收起键盘之后，页面不回弹，可参考<a href="https://github.com/tofrankie/blog/issues/158">文章</a>。</p> </blockquote> <h2>参考链接</h2> <ul> <li><a href="https://www.cnblogs.com/xiaonian8/p/13740210.html">h5 手机键盘弹出收起的处理</a></li> <li><a href="https://juejin.cn/post/6859545317378490376">可能这些是你想要的 H5 键盘兼容方案</a></li> <li><a href="https://github.com/tofrankie/blog/issues/158">微信浏览器中 Input 的兼容性处理</a></li> </ul> </article> <article> <h1>解决跨域问题 Response to preflight request doesn't pass access control check</h1> <p>Sun, 26 Feb 2023 11:06:25 GMT</p> <p>对于前后端分离，跨域问题老生常谈了，问题是这样的：</p> <blockquote> <p>Access to fetch at '<a href="https://xxx/api/user">https://xxx/api/user</a>' from origin '<a href="http://h5.xxx.com">http://h5.xxx.com</a>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '<a href="http://h5.xxx.com">http://h5.xxx.com</a>, *', but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.</p> </blockquote> <p>翻译过来就是：</p> <blockquote> <p>从源 <code>http://h5.xxx.com</code> 访问 <code>https://xxx/api/user</code> 处的访存已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：<code>Access-Control-Allow-Origin</code> 标头包含多个值 <code>http://h5.xxx.com, *</code>，但仅允许一个。让服务器发送带有有效值的标头，或者，如果不透明的响应满足您的需要，请将请求的模式设置为 <code>no-cors</code>，以在禁用 CORS 的情况下获取资源。</p> </blockquote> <p>原因是就是在服务器设置了允许跨域，同时又在 Nginx 代理又设置了一次。</p> <p>只要移除其一即可解决。</p> </article> <article> <h1>细读 JS | this 详解</h1> <p>Sun, 26 Feb 2023 11:04:35 GMT</p> <h2>一、前言</h2> <p>我相信很多人会将 <code>this</code> 和作用域混淆在一起理解，其实它们完全是两回事。</p> <p>例如 <code>this.xxx</code> 和 <code>console.log(xxx)</code> 有什么不同呢？前者是查找当前 <code>this</code> 所指对象上的 <code>xxx</code> 属性，后者是在当前作用域链上查找变量 <code>xxx</code>。</p> <pre><code class="language-js">var foo = { bar: 'property', // 属性 fn: function () { var bar = 'variable' // 变量 console.log(this.bar) // 这里的 this.bar 永远不会取到 bar 变量， // 可能从 foo 对象或 window 对象上查找 bar 属性（视乎函数调用方式） } } foo.fn() // "property" </code></pre> <p>作用域与函数的调用方式无关，而 <code>this</code> 则与函数调用方式相关。</p> <p>就 <code>this</code> 问题写了两篇文章：</p> <blockquote> <ul> <li><a href="https://github.com/tofrankie/blog/issues/236">细读 JS 之 this 详解</a>（本文）</li> <li><a href="https://github.com/tofrankie/blog/issues/250">在事件处理函数中的 this </a></li> </ul> </blockquote> <h2>二、this 是什么？</h2> <p>在 <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics#what_is_this">MDN</a> 上原话是：</p> <blockquote> <p>The <code>this</code> keyword refers to the current object the code is being written inside.</p> </blockquote> <p>翻译过来就是：在 JavaScript 中，关键字 <code>this</code> 指向了当前代码运行时的对象。</p> <p>如果我是刚接触 JavaScript 的话，看到这句话应该会有很多问号？？？</p> <h2>三、为什么需要设计 this？</h2> <p>假设我们有一个 <code>person</code> 对象，该对象有一个 <code>name</code> 属性和 <code>sayHi()</code> 方法。然后我们的需求是，<code>sayHi()</code> 方法要打印出如下信息：</p> <pre><code class="language-js">var person = { name: 'Frankie', sayHi: function() { // 若该方法的功能是，打印出：Hi, my name is Frankie. // 要如何实现？ } } </code></pre> <ol> <li>方案一</li> </ol> <p>最愚蠢的方案，如下：</p> <pre><code class="language-js">var person = { name: 'Frankie', sayHi: function(name) { console.log('Hi, my name is ' + name + '.') } } person.sayHi(person.name) // Hi, my name is Frankie. </code></pre> <ol start="2"> <li>方案二</li> </ol> <p>方案一在每次调用方法都需要传入 <code>person.name</code> 参数，还不如传入一个 <code>person</code> 参数。试图优化一下：</p> <pre><code class="language-js">var person = { name: 'Frankie', sayHi: function(context) { console.log('Hi, my name is ' + context.name + '.') } } person.sayHi(person) // Hi, my name is Frankie. </code></pre> <p>先卖个关子，这种方案看着是不是跟 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call">Function.prototype.call()</a> 有点相似?</p> <ol start="3"> <li>方案三</li> </ol> <p>在方案二里方法的调用方式，看着还是有点不雅。能不能把形参 <code>context</code> 也省略掉，然后通过 <code>person.sayHi()</code> 直接调用方法？</p> <p>当然可以，但此时的形参 <code>context</code> 要换成 JavaScript 中的保留关键字 <code>this</code>。</p> <pre><code class="language-js">var person = { name: 'Frankie', sayHi: function() { console.log('Hi, my name is ' + this.name + '.') } } person.sayHi() // Hi, my name is Frankie. </code></pre> <p>但是为什么 <code>this.name</code> 的值等于 <code>person.name</code> 的属性值呢？还有 <code>this</code> 哪来的？</p> <blockquote> <p>原来 <strong><code>this</code> 指向函数<a href="">运行时</a>所在的环境（执行上下文）。</strong></p> </blockquote> <p>实际上，<code>this</code> 可以理解为函数中的第一个形参（<strong>看不见的形参</strong>），在你调用 <code>person.sayHi()</code> 的时候，JavaScript 引擎会自动帮你把 <code>person</code> 绑定到 <code>this</code> 上。所以当你通过 <code>this.name</code> 访问属性时，其实就是 <code>person.name</code>。</p> <h2>四、了解 this</h2> <p>到目前为止，好像 <code>this</code> 也没那么神秘，没那么难理解嘛！</p> <blockquote> <p>注意，本小节示例均在<strong>非严格模式</strong>下，除非有特殊说明。</p> </blockquote> <p>再看：</p> <pre><code class="language-js">var person = { name: 'Frankie', sayHi: function() { console.log('Hi, my name is ' + this.name + '.') } } var name = 'Mandy' var sayHi = person.sayHi // 写法一 person.sayHi() // Hi, my name is Frankie. // 写法二，Why??? sayHi() // Hi, my name is Mandy. </code></pre> <p>上面示例中，<code>person.sayHi</code> 和 <code>sayHi</code> 明明都指向同一个函数，但为什么执行结果不一样呢？</p> <p>原因就是函数内部使用了 <code>this</code> 关键字。上面提到 <code>this</code> 指的是函数运行时所在的环境。对于 <code>person.sayHi()</code> 来说，<code>sayHi</code> 运行在 <code>person</code> 环境，所以 <code>this</code> 指向了 <code>person</code>；对于 <code>sayHi()</code> 来说，<code>sayHi</code> 运行在全局环境，所以 <code>this</code> 指向了全局环境。（可在 <code>sayHi</code> 函数体内打印 <code>this</code> 来对比）</p> <p>那么，函数的运行环境是怎么决定的呢？</p> <h3>1. 内存的数据结构</h3> <p>下面先了解一下 JavaScript 内存的数据结构。JavaScript 之所以有 <code>this</code> 的设计，跟内存里面的数据结构有关系。</p> <pre><code class="language-js">var person = { name: 'Frankie' } </code></pre> <p>上面的示例将一个对象赋值给变量 <code>person</code>。JavaScript 引擎会先在内存里面，生成一个对象 <code>{ name: 'Frankie' }</code>，然后把这个对象的内存地址赋值给变量 <code>person</code>。</p> <p></p> <p>也就是说，变量 <code>person</code> 是一个地址（reference）。后面如果要读取 <code>person.name</code>，JavaScript 引擎先从 <code>person</code> 拿到内存地址，然后再从该地址读出原始的对象，返回它的 <code>name</code> 属性。</p> <p>原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。举例来说，上面的例子 <code>name</code> 属性，实际上是以下面的形式保存的。</p> <p></p> <pre><code class="language-js">{ name: { [[value]]: 'Frankie', [[writable]]: true, [[enumerable]]: true, [[configurable]]: true } } </code></pre> <p>这样的结构是很清晰的，问题在于属性的值可能是一个函数。</p> <pre><code class="language-js">var person = { sayHi: function() {} } </code></pre> <p>这时，JavaScript 引擎会将函数单独保存在内存中，然后再将函数的地址赋值给 <code>sayHi</code> 属性的 <code>value</code> 属性。</p> <p></p> <pre><code class="language-js">{ name: { [[value]]: 函数的地址, [[writable]]: true, [[enumerable]]: true, [[configurable]]: true } } </code></pre> <p>由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行。</p> <pre><code class="language-js">var fn = function() {} var obj = { fn: fn } // 单独执行 fn() // obj 环境执行 obj.fn() </code></pre> <h3>2. 环境变量</h3> <p>JavaScript 允许在函数体内部，引用当前环境的其他变量。</p> <pre><code class="language-js">var sayHi = function() { console.log('Hi, my name is ' + name + '.') } </code></pre> <p>上面示例中，函数体里面使用了变量 <code>name</code>。该变量由运行环境提供。</p> <p>现在问题来了，由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获取当前的运行环境（context）。所以， <code>this</code> 就出现了，它的设计目的就是在函数内部，指代函数当前的运行环境。</p> <pre><code class="language-js">var sayHi = function() { console.log('Hi, my name is ' + this.name + '.') } </code></pre> <p>上面的示例中，函数体内部的 <code>this.name</code> 就是指当前运行环境的。</p> <pre><code class="language-js">var sayHi = function() { console.log('Hi, my name is ' + this.name + '.') } var name = 'Mandy' var person = { name: 'Frankie', sayHi: sayHi } // 单独执行 sayHi() // Hi, my name is Mandy. // person 环境执行 person.sayHi() // Hi, my name is Frankie. </code></pre> <p>上面的示例中，函数 <code>sayHi</code> 在全局环境执行，<code>this.name</code> 指向全局环境的 <code>name</code>。</p> <p></p> <p>在 <code>person</code> 环境执行，<code>this.name</code> 指向 <code>person.name</code>。</p> <p></p> <p>回到本小节开头的示例中：</p> <pre><code class="language-js">var person = { name: 'Frankie', sayHi: function() { console.log('Hi, my name is ' + this.name + '.') } } var name = 'Mandy' var sayHi = person.sayHi // 写法一 person.sayHi() // Hi, my name is Frankie. // 写法二，Why??? sayHi() // Hi, my name is Mandy. </code></pre> <p><code>person.sayHi()</code> 是通过 <code>person</code> 找到 <code>sayHi</code>，所以就是在 <code>person</code> 环境执行。一旦 <code>var sayHi = person.sayHi</code>，变量 <code>sayHi</code> 就直接指向函数本身，所以 <code>sayHi()</code> 就变成在全局环境执行。</p> <p>在 JavaScript 中，<code>this</code> 的四种绑定规则，而以上的示例 <code>this</code> 均属于默认绑定的。</p> <h2>五、函数调用</h2> <p>上面有提到 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call">Function.prototype.call()</a>，下面先聊聊这个方法。</p> <blockquote> <p>顺便提一下，<code>call()</code> 和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply"><code>apply()</code></a> 方法类似，区别只有一个，<code>call()</code> 方法接受的是<strong>参数列表</strong>，而 <code>apply()</code> 方法接受的是一个<strong>参数数组</strong>。</p> </blockquote> <p><code>call()</code> 允许为不同的对象分配和调用属于一个对象的函数/方法。</p> <h3>1. call 语法</h3> <blockquote> <p>function.call(thisArg, arg1, arg2, ...)</p> </blockquote> <ul> <li>thisArg（可选）在 function 函数运行时使用的 <code>this</code> 值。请注意，<code>this</code> 可能不是该方法看到的实际值。在<strong>非严格模式</strong>下，若参数指定为 <code>null</code> 或 <code>undefined</code>，<code>this</code> 会自动替换为指向<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis">全局对象</a>。</li> <li>arg1, arg2, ... 指定的参数列表。</li> </ul> <h3>2. 使用 call 方法调用函数，且不指定第一参数</h3> <p>此时分为两种情况：严格模式和非严格模式，两者在 <code>this</code> 的绑定上有区别。</p> <pre><code class="language-js">// 非严格模式下 var thing = 'world' function hello(thing) { console.log('hello ' + this.thing) } hello.call() // hello world // 等价于以下三种方式，均打印出 hello world hello() hello.call(null) hello.call(undefined) </code></pre> <blockquote> <p>但在严格模式下，<code>this</code> 的值将会是 <code>undefined</code>。</p> </blockquote> <p>所以下面示例会报错。</p> <pre><code class="language-js">// 严格模式下 'use strict' var thing = 'world' function hello(thing) { console.log('hello ' + this.thing) } hello.call() // TypeError: Cannot read property 'thing' of undefined </code></pre> <h3>3. 普通函数调用（小结）</h3> <p>在 JavaScript 中，其实所有的函数原始的调用方式是这样的：</p> <blockquote> <p>function.call(thisArg, arg1, arg2, ...)</p> </blockquote> <pre><code class="language-js">function fn() { } // 加糖调用 fn() fn(x) // 脱糖调用（desugar）& 严格模式 fn.call(undefined) fn.call(undefined, x) // 脱糖调用（desugar）& 非严格模式 fn.call(window) fn.call(window, x) </code></pre> <p><code>fn()</code> 其实就是 <code>fn.call()</code> 的语法糖形式。</p> <blockquote> <p>注意，当函数<strong>被调用时</strong>，函数的 <code>this</code> 值才会被绑定。</p> </blockquote> <p>普通函数调用可以总结成这样：</p> <pre><code class="language-js">fn(...args) // 等价于 fn.call(window [ES5-strict: undefined], ...args) (function() {})() // 等价于 (function() {}).call(window [ES5-strict: undefined]) </code></pre> <h3>4. 成员函数调用（方法）</h3> <p>这也是一种非常常见的调用方式，又回到开头的那个示例。</p> <pre><code class="language-js">var person = { name: 'Frankie', sayHi: function() { console.log('Hi, my name is ' + this.name + '.') } } person.sayHi() // Hi, my name is Frankie. // 等价于 person.sayHi.call(person) // Hi, my name is Frankie. </code></pre> <p>根据前面讲述的函数在内存中的数据结构，以上示例跟下面动态地将 <code>sayHi</code> 方法绑定到 <code>person</code> 上是一致的。</p> <pre><code class="language-js">function sayHi() { console.log('Hi, my name is ' + this.name + '.') } var person = { name: 'Frankie' } var name = 'Mandy' // 动态添加到 person 上 person.sayHi = sayHi person.sayHi() // Hi, my name is Frankie. sayHi() // Hi, my name is Mandy. </code></pre> <p>以上两者区别是，前一个例子的 <code>sayHi</code> 函数只能通过变量 <code>person</code> 在内存中根据变量存放的对象地址找到对象，该对象下有一个 <code>sayHi</code> 属性，该属性的 <code>[[value]]</code> 存放的函数地址，所以只能通过 <code>person.sayHi()</code> 进行调用。而后一个例子中 <code>sayHi</code> 函数除了前面提到的调用方式外，还可以直接通过变量 <code>sayHi</code> 去调用该函数（<code>sayHi()</code>）。</p> <blockquote> <p>注意，<code>sayHi</code> 函数并没有在编写代码时确定 <code>this</code> 的指向。<code>this</code> 总是在函数被调用时，根据其调用的环境进行设置。</p> </blockquote> <h2>六、this 的绑定方式</h2> <p><code>this</code> 是 JavaScript 的一个关键字，它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。</p> <pre><code class="language-js">function fn() { this.x = 1 } </code></pre> <p>上面示例中，函数 <code>fn</code> 运行时，内部会自动有一个 <code>this</code> 可以使用。</p> <p>函数的不同使用场景，<code>this</code> 会有不同的值。<strong>总的来说，<code>this</code> 就是函数运行时所在的环境对象。</strong></p> <h3>1. 普通函数调用（默认绑定）</h3> <p>这是函数最常用的用法了，属于全局性调用，因此 <code>this</code> 就代表全局对象。</p> <blockquote> <p>注意，全局对象在不同宿主环境下是有区别的。在浏览器环境下全局对象是 <code>window</code>，而在 Node 环境下，全局对象是 <code>global</code>。</p> </blockquote> <pre><code class="language-js">var x = 1 function fn() { console.log(this.x) } fn() // 1 </code></pre> <p>注意，如果使用了 ES6 的 <code>let</code> 或 <code>const</code> 去声明变量 <code>x</code> 时，结果又稍微有点不同了！</p> <pre><code class="language-js">let x = 1 function fn() { // 注意，若严格模式下，this 为 undefined，所以执行 this.x 就会报错 console.log(this.x) } fn() // undefined </code></pre> <p>原因很简单。首先在 <code>fn</code> 运行时，<code>this</code> 仍然指向 <code>window</code>，只不过 <code>window</code> 对象下没有 <code>x</code> 属性，所以打印了 <code>undefined</code>。</p> <p>为什么会这样呢？</p> <pre><code class="language-js">// 以下两种方式，其实都往 window 对象添加了 x、y 属性，并赋值。 x = 1 var y = 2 // 但在 ES6 之后，做出了改变 // 使用了 let、const 或者 class 来定义变量或类，都不会往顶层对象添加对应属性 let x = 1 const y = 2 class Fn {} </code></pre> <blockquote> <p>关于这块内容，可以看另外一篇文章：<a href="https://github.com/tofrankie/blog/issues/221">关于 var、let 的顶层对象的属性</a>。</p> </blockquote> <h3>2. 作为对象方法调用（隐式绑定）</h3> <p>函数还作为某个对象的方法调用，这时 <code>this</code> 就指向这个上级对象。</p> <pre><code class="language-js">function fn() { console.log(this.x) } var obj = { x: 1, fn: fn } obj.fn() // 1 // 这里我又再次提一下，但不解释了。如果还不懂，从头再看一遍。 fn() // undefined </code></pre> <h3>3. 通过 call、apply 调用（显式绑定）</h3> <p>这两个方法的参数以及区别不再赘述，上面已经讲过了。</p> <pre><code class="language-js">var x = 0 function fn() { console.log(this.x) } var obj = { x: 1, fn: fn } obj.fn.call() // 0，此时 this 指向全局对象 obj.fn.call(obj) // 1，此时 this 指向 obj 对象 </code></pre> <h3>4. 作为构造函数调用（new 绑定）</h3> <p>所谓构造函数，就是通过这个函数，可以生成一个新对象。这时，<code>this</code> 就指向这个新对象（实例）。</p> <pre><code class="language-js">function Fn() { this.x = 1 } var obj = new Fn() console.log(obj.x) // 1 </code></pre> <p>为了表明这时 <code>this</code> 不是指向全局对象，我们修改一下代码：</p> <pre><code class="language-js">var x = 'global' function Fn() { this.x = 'local' } var obj = new Fn() console.log(obj.x) // "local" console.log(x) // "global" </code></pre> <p>根据结果，我们可以看到全局变量 <code>x</code> 没有发生变化。</p> <blockquote> <p>以上几种绑定方式，优先级如下：</p> <ol> <li>只要使用 <code>new</code> 关键字调用，无论是否还有 <code>call</code>、<code>apply</code> 绑定，<code>this</code> 均指向实例化对象。</li> <li>通过 <code>call</code>、<code>apply</code> 或者 <code>bind</code> 显式绑定，<code>this</code> 指向该绑定对象（第一个参数缺省时，根据是否为严格模式，<code>this</code> 指向全局对象或者 <code>undefined</code>）。</li> <li>函数通过上下文对象调用，<code>this</code> 指向（最后）调用它的对象。</li> <li>如以上均没有，则会默认绑定。严格模式下，<code>this</code> 指向 <code>undefined</code>，否则指向全局对象。</li> </ol> </blockquote> <h2>七、其他</h2> <h3>1. 箭头函数</h3> <p>箭头函数，没有自己的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>，<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a>，<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/super"><code>super</code></a> 或 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target"><code>new.target</code></a>，并且它不能用作构造函数。由于没有 <code>this</code>，因此它不能绑定 <code>this</code>。</p> <pre><code class="language-js">const obj = { x: 1, fn1: () => console.log(this.x, this), fn2: function() { console.log(this.x, this) } } obj.fn1() // undefined, Window{...} obj.fn1.call(obj) // undefined, Window{...} obj.fn2() // 1, Object{...} </code></pre> <h3>2. 事件处理函数</h3> <p>在事件处理函数中，不同的使用方式，会导致 <code>this</code> 指向不同的对象，你知道吗？</p> <blockquote> <p>详见：<a href="https://github.com/tofrankie/blog/issues/250">在事件处理函数中的 this</a></p> </blockquote> <h2>八：思考题</h2> <p>抛下两个题，可以分析分析为什么结果不一样。</p> <p>例一：</p> <pre><code class="language-js">var length = 1 function foo() { console.log(this.length) } const obj = { length: 2, bar: function (cb) { cb() } } obj.bar(foo, 'p1', 'p2') // 1 </code></pre> <p>例二：</p> <pre><code class="language-js">var length = 1 function foo() { console.log(this.length) } const obj = { length: 2, bar: function (cb) { arguments[0]() } } obj.bar(foo, 'p1', 'p2') // 3 </code></pre> <h2>九、参考链接</h2> <ul> <li><a href="https://2ality.com/2011/11/uncurrying-this.html">Uncurrying “this” in JavaScript</a></li> <li><a href="https://2ality.com/2017/12/alternate-this.html">A different way of understanding this in JavaScript</a></li> <li><a href="http://www.ruanyifeng.com/blog/2018/06/javascript-this.html">JavaScript 的 this 原理</a></li> <li><a href="https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/">Understanding JavaScript Function Invocation and "this"</a></li> <li><a href="https://www.quirksmode.org/js/this.html">The this keyword</a></li> </ul> </article> <article> <h1>细读 ES6 | 解构赋值</h1> <p>Sun, 26 Feb 2023 11:03:04 GMT</p> <p>在 ES6 中，允许按照一定的模式，从<strong>数组</strong>和<strong>对象</strong>中提取值，对变量进行赋值，这种行为被称为<strong>解构</strong>（Destructuring）。</p> <p>解构赋值的规则是，只要被解构的值（等号右边的值）不为对象或者数组（如字符串、数值、布尔值），就先将其转为对象。但 <code>undefined</code> 和 <code>null</code> 除外，因为它俩无法转为对象，所以进行解构赋值会报错。</p> <p>本文主要包括：</p> <ul> <li>数组的解构赋值</li> <li>对象的解构赋值</li> <li>字符串的解构赋值</li> <li>数值和布尔值的解构赋值</li> <li>函数参数的解构赋值</li> <li>圆括号问题</li> <li>用途</li> </ul> <h2>一、数组的解构赋值</h2> <p>只要某种数据结构具有 Iterator 接口（可遍历结构），都可以采用数组形式的解构赋值。JavaScript 中原生具备 Iterator 接口的数据结构如下：</p> <ul> <li>Array</li> <li>Map</li> <li>Set</li> <li>String</li> <li>TypredArray</li> <li>函数的 arguments 对象</li> <li>NodeList 对象</li> </ul> <h3>1. 基本用法</h3> <p>在 JavaScript 中，我们可以这样为变量进行赋值：</p> <pre><code class="language-js">// 在 ES5 我们只能直接指定值 var a = 1 var b = 2 var c = 3 // 在 ES6 允许这样为变量赋值 let [a, b, c] = [1, 2, 3] </code></pre> <p>上面的示例表示，可以从数组中提取值，按照对应位置对变量赋值。</p> <blockquote> <p>本质上，这种写法属于**“模式匹配”**，只要等号两边的模式相同，左边的变量就会被赋予对应的值。</p> </blockquote> <p>下面是一些使用嵌套数组进行解构的例子：</p> <pre><code class="language-js">let [foo, [[bar], baz]] = [1, [[2], 3]] foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"] third // "baz" let [x, , y] = [1, 2, 3] x // 1 y // 3 let [head, ...tail] = [1, 2, 3, 4] head // 1 tail // [2, 3, 4] let [x, y, ...z] = ['a'] x // "a" y // undefined z // [] </code></pre> <p>如果解构不成功，变量的值就等于 <code>undefined</code>。以下两种情况都属于解构不成功，<code>foo</code> 的值都会等于 <code>undefined</code>。</p> <pre><code class="language-js">let [foo] = [] foo // undefined let [bar, foo] = [1] foo // undefined </code></pre> <blockquote> <p>当等号左边的模式，只匹配一部分等号右边的数组，依然可以解构成功，这种情况属于不完全解构。</p> </blockquote> <p>以下两个例子，都属于不完全解构，但是可以成功。</p> <pre><code class="language-js">let [x, y] = [1, 2, 3]; x // 1 y // 2 let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4 </code></pre> <p>如果等号右边的值不是数组（或者严格地说，不是可遍历的结果），将会报错。</p> <pre><code class="language-js">let [foo] = 1 let [foo] = false let [foo] = NaN let [foo] = undefined let [foo] = null let [foo] = {} // TypeError: xxx is not iterable </code></pre> <p>上面的语句都会报错，因为等号右边的值，要么转为对象以后不具备 Iterator 接口（前五个表达式），要么本身就不具备 Iterator 接口（最后一个表达式）。</p> <p>上面提到，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。比如 Set 结构，也可以使用数组的解构赋值。</p> <pre><code class="language-js">let [x, y, z] = new Set(['a', 'b', 'c']) x // "a" </code></pre> <p>下面示例中，<code>gen</code> 是一个 Generator 函数，原生具有 Iterator 接口。解构赋值会依次从这个接口获取值。</p> <pre><code class="language-js">function* gen() { let a = 0 let b = 1 while (true) { yield a ;[a, b] = [b, a + b] } } let [first, second, third, fourth, fifth, sixth] = gen() sixth // 5 </code></pre> <h3>2. 默认值</h3> <p>解构赋值允许指定默认值。</p> <pre><code class="language-js">let [foo = true] = [] foo // true let [x, y = 'b'] = ['a'] x // "a" y // "b" let [x, y = 'b'] = ['a', undefined] x // "a" y // "b" </code></pre> <blockquote> <p>需要注意的是，ES6 内部使用严格相等运算符（<code>===</code>）判断一个位置是否有值。所以，只有当一个数组成员<strong>严格等于</strong> <code>undefined</code>，默认值才会生效。</p> </blockquote> <p>以下示例中，如果一个数组成员是 <code>null</code>，默认值就不会生效，因为 <code>null</code> 不严格等于 <code>undefined</code>。</p> <pre><code class="language-js">let [x = 1] = [undefined] x // 1 let [x = 1] = [null] x // null </code></pre> <p>如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。下面示例中，因为 <code>x</code> 能取到值，所以函数 <code>fn</code> 根本不会执行。</p> <pre><code class="language-js">function fn() { return 'aaa' } let [x = f()] = [1] // 等价于 let x if ([1][0] === undefined) { x = fn() } else { x = [1][0] } </code></pre> <p>注意，<strong>默认值可以引用解构赋值的其他变量，但该变量必须已经声明。</strong></p> <pre><code class="language-js">let [x = 1, y = x] = [] // x=1; y=1 let [x = 1, y = x] = [2] // x=2; y=2 let [x = 1, y = x] = [1, 2] // x=1; y=2 let [x = y, y = 1] = [] // ReferenceError: Cannot access 'y' before initialization </code></pre> <p>上面示例中，最后一个表达式会报错，是因为将 <code>y</code> 用做 <code>x</code> 的默认值时，<code>y</code> 还没有声明。</p> <h2>二、对象的解构赋值</h2> <p>解构不仅可以用于数组，还可以用于对象。</p> <h3>1. 基本用法</h3> <pre><code class="language-js">let { foo, bar } = { foo: 'aaa', bar: 'bbb' } foo // "aaa" bar // "bbb" </code></pre> <p>对象的解构与数组有一个重要的的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性是没有次序的，变量必须与属性同名，才能取到正确的值。</p> <pre><code class="language-js">let { bar, foo } = { foo: 'aaa', bar: 'bbb' } foo // "aaa" bar // "bbb" let { baz } = { foo: 'aaa', bar: 'bbb' } baz // undefined </code></pre> <p>上面的示例中，第一例子等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于 <code>undefined</code>。</p> <p>如果解构失败，变量的值等于 <code>undefined</code>。下面的示例中，等号右边的对象中没有 <code>foo</code> 属性，所以变量 <code>foo</code> 取不到值，所以等于 <code>undefined</code>。</p> <pre><code class="language-js">let { foo } = { bar: 'baz' } foo // undefined </code></pre> <p>对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。</p> <pre><code class="language-js">// 例一，将 Math 对象的对数、正弦、余弦方法赋值到对应的变量上 let { log, sin, cos } = Math // 例二，将 console.log 赋值到 log 变量上 const { log } = console log('Hello World') // "Hello World" </code></pre> <p>如果变量名与属性名不一致，必须写成下面这样：</p> <pre><code class="language-js">let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; baz // "aaa" let obj = { first: 'hello', last: 'world' }; let { first: f, last: l } = obj; f // "hello" l // "world" </code></pre> <p>这实际上说明，对象的解构赋值是下面形式的简写（对象属性的简写形式）：</p> <pre><code class="language-js">let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' } </code></pre> <p>也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋值给对应的变量。真正被赋值的后者，而不是前者。</p> <pre><code class="language-js">let { foo: baz } = { foo: 'aaa', bar: 'bbb' } baz // "aaa" foo // ReferenceError: foo is not defined </code></pre> <p>上面的示例中，<code>foo</code> 是匹配的模式，<code>baz</code> 才是变量。真正被赋值的是变量 <code>baz</code>，而不是模式 <code>foo</code>。</p> <p>与数组一样，解构也可以用于嵌套结构的对象。</p> <pre><code class="language-js">let obj = { p: [ 'Hello', { y: 'World' } ] } let { p: [x, { y }] } = obj x // "Hello" y // "World" </code></pre> <p>注意，此时 <code>p</code> 是模式，不是变量，因此也不会被赋值。如果 <code>p</code> 也要作为变量赋值，也可以写成下面这样。</p> <pre><code class="language-js">let obj = { p: [ 'Hello', { y: 'World' } ] }; let { p, p: [x, { y }] } = obj x // "Hello" y // "World" p // ["Hello", {y: "World"}] </code></pre> <p>下面是另一个例子，示例中有三次解构赋值，分别对 <code>loc</code>、<code>start</code>、<code>line</code> 三个属性的解构赋值。注意，最后一次对 <code>line</code> 属性的结构赋值之中，只有 <code>line</code> 是变量，<code>loc</code> 和 <code>start</code> 都是模式，不是变量。</p> <pre><code class="language-js">const node = { loc: { start: { line: 1, column: 5 } } }; let { loc, loc: { start }, loc: { start: { line }} } = node line // 1 loc // Object {start: Object} start // Object {line: 1, column: 5} </code></pre> <p>下面是嵌套赋值的例子。</p> <pre><code class="language-js">let obj = {} let arr = [] ;({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true }) obj // {prop: 123} arr // [true] </code></pre> <p>如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。下面的示例中，等号左边对象的 <code>foo</code> 属性，对应一个子对象。该子对象的 <code>bar</code> 属性，解构是会报错。原因很简单，因为 <code>foo</code> 这时等于 <code>undefined</code>，再取子属性就会报错。</p> <pre><code class="language-js">// TypeError: Cannot read property 'bar' of undefined let { foo: { bar } } = { baz: 'baz' } </code></pre> <p>注意，对象的解构赋值可以取到继承的属性。</p> <pre><code class="language-js">const obj1 = {} const obj2 = {} Object.setPrototypeOf(obj1, obj2) const { foo } = obj1 foo // "bar" </code></pre> <p>上面的示例中，对象 <code>obj1</code> 的原型对象是 <code>obj2</code>。<code>foo</code> 属性不是 <code>obj1</code> 自身的属性，而是继承自 <code>obj2</code> 的属性，解构赋值可以取到这个属性。</p> <h3>2. 默认值</h3> <p>对象的解构也可以指定默认值。</p> <pre><code class="language-js">let { x = 3 } = {} x // 3 let { x, y = 5 } = { x: 1 } x // 1 y // 5 let { x: y = 3 } = {} y // 3 let { x: y = 3 } = { x: 5 } y // 5 let { message: msg = 'Something went wrong' } = {} msg // "Something went wrong" </code></pre> <p>默认值生效的条件是，对象的属性值严格等于 <code>undefined</code>。</p> <pre><code class="language-js">let { x = 3 } = { x: undefined } x // 3 let { x = 3 } = { x: null } x // null </code></pre> <p>上面的示例中，属性 <code>x</code> 等于 <code>null，因为 </code>null<code>与</code>undefined<code>不严格相等，所以是个有效的赋值，导致默认值</code>3` 不会生效。</p> <h3>3. 注意点</h3> <p>(1) 如果要将一个已经声明的变量用于解构赋值，必须非常小心。</p> <pre><code class="language-js">// 错误的写法 let x { x } = { x: 1 } // SyntaxError: Unexpected token '=' </code></pre> <p>上面示例的写法会报错，因为 JavaScript 引擎会将 <code>{ x }</code> 理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解析为代码块，才能解决这个问题。如下：</p> <pre><code class="language-js">// 正确的写法 let x ;({ x } = { x: 1 }) // 注意一下，由于我平常的编程偏向于 semicolon-less 风格，所以我行尾是不写分号的， // 但是此时需要注意的是，若行首是以 (、[、/、+、- 开头的时候为了避免出现非预期结果或语法错误，需要手动插入分号（;） // 所以相当于： let x; ({ x } = { x: 1 }); </code></pre> <p>上面的示例将整个解构赋值语句，放在一个圆括号里面，就可以正确执行（关于圆括号与解构赋值的关系，下文会提到）。</p> <p>(2) 解构赋值允许等号左边的模式之中，不放置任何变量名。因此，可以写出非常古怪的赋值表达式。</p> <pre><code class="language-js">;({} = [true, false]) ;({} = 'abc') ;({} = []) </code></pre> <p>以上的表达式虽然毫无意义，但是语法是合法的，可以正常执行。</p> <p>(3) 由于属性本质是特殊的对象，因此可以对数组进行对象属性的解构。</p> <pre><code class="language-js">let arr = [1, 2, 3] let { 0: first, [arr.length - 1]: last } = arr first // 0 lst // 3 </code></pre> <p>上面的示例中，对数组进行对象解构。数组 <code>arr</code> 的 <code>0</code> 键对应的值是 <code>1</code>，<code>[arr.length - 1]</code> 就是 <code>2</code> 键，对应的值是 <code>3</code>。方括号的这种写法属于“属性名表达式”的表达方式。</p> <h2>三、字符串的解构赋值</h2> <p>字符串也可以解构赋值，这是因为字符串被转换成了一个类似数组的对象。</p> <pre><code class="language-js">const [a, b, c, d, e] = 'hello' a // "h" b // "e" c // "l" d // "l" e // "o" </code></pre> <p>类似数组的对象都有一个 <code>length</code> 属性，因此还可以对这个属性解构赋值。</p> <pre><code class="language-js">const { length: len } = 'hello' len // 5 </code></pre> <h2>四、数值和布尔值的解构赋值</h2> <p>解构赋值时，如果等号右边是数值和布尔值，则会转为对象。</p> <pre><code class="language-js">let { toString: s } = 123 s === Number.prototype.toString // true let { toString: s } = true s === Boolean.prototype.toString // true </code></pre> <p>上面示例中，数值和布尔值的包装对象都有 <code>toString</code> 属性，因此变量 <code>s</code> 都能取到值。</p> <p>解构赋值的规则是，只要等号右边的值不是对象或数值，就先其转为对象。由于 <code>undefined</code> 和 <code>null</code> 无法转为对象，所以对它们进行解构赋值，都会报错。</p> <pre><code class="language-js">let { prop: x } = undefined // TypeError: Cannot destructure property 'prop' of 'undefined' as it is undefined. let { prop: y } = null // TypeError: Cannot destructure property 'prop' of 'null' as it is null. </code></pre> <h2>五、函数参数的解构赋值</h2> <p>函数的参数也可以使用解构赋值。</p> <p>下面的示例中，函数 <code>add</code> 的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量 <code>x</code> 和 <code>y</code>。对于函数内部的代码拉说，它们能感受到的参数就是 <code>x</code> 和 <code>y</code>。</p> <pre><code class="language-js">function add([x, y]) { return x + y } add([1, 2]) // 3 </code></pre> <p>下面是另一个例子。</p> <pre><code class="language-js">;[[1, 2], [3, 4]].map(([a, b]) => a + b) // [3, 7] </code></pre> <p>函数参数的解构也可以使用默认值。</p> <pre><code class="language-js">function move({x = 0, y = 0} = {}) { return [x, y] } move({x: 3, y: 8}) // [3, 8] move({x: 3}) // [3, 0] move({}) // [0, 0] move() // [0, 0] </code></pre> <p>上面的示例中，函数 <code>move</code> 的参数是一个对象，通过对这个对象进行解构，得到变量 <code>x</code> 和 <code>y</code> 的值。如果解构失败，<code>x</code> 和 <code>y</code> 等于默认值。</p> <p>注意，下面的写法会得到不一样的结果。</p> <pre><code class="language-js">function move({x, y} = { x: 0, y: 0 }) { return [x, y] } move({x: 3, y: 8}) // [3, 8] move({x: 3}) // [3, undefined] move({}) // [undefined, undefined] move() // [0, 0] </code></pre> <p>上面的示例，是为函数 <code>move</code> 的参数指定默认值，而不是为变量 <code>x</code> 和 <code>y</code> 指定默认值，所以会得到与前一种写法不同的结果。</p> <p><code>undefined</code> 就会触发函数才能上的默认值。</p> <pre><code class="language-js">;[1, undefined, 3].map((x = 'yes') => x) // [1, 'yes', 3] </code></pre> <h2>六、圆括号的问题</h2> <p>解构赋值虽然很方便，但是解析起来并不容易。对于编译器来说，一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道。</p> <p>由此带来的问题是，如果模式中出现圆括号怎么处理？<strong>ES6 的规则是，只要有可能导致解构的歧义，就不得使用圆括号。</strong></p> <p>但是，这条规则实际上不那么容易辨别，处理起来相对麻烦。因此，建议只要有可能，就不要在模式中放置圆括号。</p> <p><strong>不能使用圆括号的情况：</strong></p> <p>以下三种解构赋值不得使用圆括号。</p> <h3>1. 变量声明语句</h3> <p>下面 6 个语句都会报错，因为它们都是变量声明语句，模式不能使用圆括号。</p> <pre><code class="language-js">let [(a)] = [1] let {x: (c)} = {} let ({x: c}) = {} let {(x: c)} = {} let {(x): c} = {} let { o: ({ p: p }) } = { o: { p: 2 } } </code></pre> <h3>2. 函数参数</h3> <p>函数参数也属于变量声明，因此不能带有原括号。</p> <pre><code class="language-js">// 报错：Unexpected token function fn([(z)]) { return z } // 报错：Unexpected token function fn([z, (x)]) { return x } </code></pre> <h3>3. 赋值语句的模式</h3> <pre><code class="language-js">// 全部报错：Parenthesized pattern ;({ p: a }) = { p: 42 } ;([a]) = [5] </code></pre> <p>上面的示例将整个模式放在圆括号之中，导致报错。</p> <pre><code class="language-js">;[({ p: a }), { x: c }] = [{}, {}] </code></pre> <p>上面代码将一部分模式放在圆括号之中，导致报错。</p> <p><strong>可以使用圆括号的情况：</strong></p> <p>可以使用圆括号的情况只有一种：赋值语句的非模式部分，可以使用圆括号。</p> <pre><code class="language-js">;[(b)] = [3] // 正确 ;({ p: (d) } = {}) // 正确 ;[(parseInt.prop)] = [3] // 正确 </code></pre> <p>以上三行语句都可以正确执行，因为它们都是赋值语句，而不是声明语句；其次，它们的圆括号都不属于模式的一部分。第一行语句中，模式是取数组的第一成员，跟圆括号无关；第二行语句中，模式是 <code>p</code>，而不是 <code>d</code>；第三行语句与第一行语句的性质一致。（如果到这里对模式没完全弄清楚的，建议往回再细看一下）</p> <h2>七、用途</h2> <p>变量的解构赋值用途很多。</p> <h3>1. 交换变量的值</h3> <p>下面示例交换变量 <code>x</code> 和 <code>y</code> 的值，这样的写法不仅简洁，而且易读，语义非常清晰。</p> <pre><code class="language-js">let x = 1 let y = 1 ;[x, y] = [y, x] </code></pre> <h3>2. 从函数返回多个值</h3> <p>函数只能返回一个值，如果要返回多个值，只能将它们放在数组或者对象里返回。有了结构赋值，取出这些值就非常方便。</p> <pre><code class="language-js">// 返回一个数组 function fn1() { return [1, 2, 3] } let [a, b, c] = fn1() // 返回一个对象 function fn2() { return { foo: 1, bar: 2 } } let { foo, bar } = fn2() </code></pre> <h3>3. 函数参数的定义</h3> <p>解构赋值可以方便地将一组参数与变量名对应起来。</p> <pre><code class="language-js">// 参数是一组有次序的值 function fn1([x, y, z]) { ... } fn1([1, 2, 3]) // 参数是一组无次序的值 function fn2({x, y, z}) { ... } fn2({z: 3, y: 2, x: 1}) </code></pre> <h3>4. 提取 JSON 数据</h3> <p>解构赋值对提取 JSON 对象中的数据，尤其有用。</p> <pre><code class="language-js">let jsonData = { id: 42, status: "OK", data: [867, 5309] } let { id, status, data: number } = jsonData console.log(id, status, number) // 42, "OK", [867, 5309] </code></pre> <h3>5. 函数参数的默认值</h3> <p>指定参数的默认值，就避免了在函数体内部再写 <code>var foo = config.foo || 'default foo';</code> 这样的语句。</p> <pre><code class="language-js">jQuery.ajax = function(url, { async = true, beforeSend = function() {}, cache = true, complete = function() {}, crossDomain = false, global = true, // ... more config } = {}) { // ... do stuff } </code></pre> <h3>6. 遍历 Map 结构</h3> <p>任何部署了 Iterator 接口的对象，都可以用 for...of 循环遍历。Map 解构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。</p> <pre><code class="language-js">const map = new Map() map.set('first', 'hello') map.set('second', 'world') for (let [key, value] of map) { console.log(key + ' is ' + value) } // first is hello // second is world </code></pre> <p>如果只是想获取键名（或者键值），可以写成下面这样。</p> <pre><code class="language-js">// 获取键名 for (let [key] of map) { // ... } // 获取键值 for (let [,value] of map) { // ... } </code></pre> <h3>7. 输入模块的指定方法</h3> <p>加载模块时，往往需要指定哪些方法。解构赋值使得输入语句非常清晰。</p> <pre><code class="language-js">const { SourceMapConsumer, SourceNode } = require("source-map") </code></pre> <h2>八、参考</h2> <ul> <li><a href="https://es6.ruanyifeng.com/">阮一峰 ES6 入门教程</a></li> </ul> </article> <article> <h1>JavaScript 的迷惑行为大赏</h1> <p>Sun, 26 Feb 2023 11:00:53 GMT</p> <p>今天来聊一聊 JavaScript 中让人摸不着头的设计失误。</p> <p>Brendan Eich 在 1995 年加入 Netscape 公司，当时 Netscape 和 Sun 合作开发一个可运行在浏览器上的编程语言，当时 JavaScript 的开发代号是 Mocha。Brendan Eich 花了 10 天完成了第一版的 JavaScript。</p> <p>由于设计时间太短，语言的一些细节考虑得不够严谨，一些因不可抗因素而无法修复的 bug，加之后来填坑过程中新挖的坑，总之开发者表示很烦...</p> <p>一起看下 JavaScript 设计的「坑」有哪些？</p> <blockquote> <p>本文主要内容源自 <a href="https://web.archive.org/web/20211130020159/https://sodatea.blog/zh/2016/javascript-design-regrets-cf9619ba">JavaScript 的设计失误</a>（<a href="https://haoqun.dev/">蒋豪群</a>）</p> </blockquote> <h2>一、typeof null === 'object'</h2> <p>这是一个众所周知的失误。</p> <p>对于刚接触 JavaScript 的朋友，有可能会直觉性地、错误地认为 <code>typeof null === 'null'</code>，这是不对的。</p> <blockquote> <p><code>typeof null === 'object'</code> 的 “bug” 其实是第一版 JavaScript 就存在了，随着 JavaScript 的流行，很多人提议修复这个 bug，但被拒绝了，因为修改它意味着会破坏现有的代码。历史原因可以看下这篇文章：<a href="https://2ality.com/2013/10/typeof-null.html">The history of “typeof null”</a>。</p> </blockquote> <p>在 JavaScript 中，数据类型在底层都是以二进制形式表示的。在初版 JavaScript 中，以 32 位为单位存储一个值，其中包括一个类型标记（1-3 位）和该值的实际数据。类型标记存储在单元的低位。其中有五个：</p> <ul> <li><code>000</code>：object，数据是一个对象的引用。</li> <li><code>1</code>：int，数据是一个 31 位有符号整数。</li> <li><code>010</code>：double，数据是一个双精度浮点数。</li> <li><code>100</code>：string，数据是一个字符串</li> <li><code>110</code>：boolean，数据是一个布尔值。</li> </ul> <p>也就是说，最低位如果是 1，那么类型标记长度只有 1 位；如果最低位是 0，那么类型标记长度为 3 位，为四种类型提供两个附加位。</p> <p>有两个特殊的值：</p> <ul> <li><code>undefined</code>（JSVAL_VOID）是整数 −2^30^（整数范围之外的数字）</li> <li><code>null</code>（JSVAL_NULL）是机器码空指针。或：一个对象类型标记加上一个零的引用。(<code>null</code> 二进制表示全是 0)</li> </ul> <p>现在我们知道为什么 <code>typeof</code> 会认为 <code>null</code> 是一个对象了，它检查了 <code>null</code> 的类型标记，且类型标记表示 <code>object</code>。以下是该引擎的 <code>typeof</code> 代码。</p> <pre><code class="language-c">JS_PUBLIC_API(JSType) JS_TypeOfValue(JSContext *cx, jsval v) { JSType type = JSTYPE_VOID; JSObject *obj; JSObjectOps *ops; JSClass *clasp; CHECK_REQUEST(cx); if (JSVAL_IS_VOID(v)) { // (1) type = JSTYPE_VOID; } else if (JSVAL_IS_OBJECT(v)) { // (2) obj = JSVAL_TO_OBJECT(v); if (obj && (ops = obj -> map -> ops, ops == & js_ObjectOps ? (clasp = OBJ_GET_CLASS(cx, obj), clasp -> call || clasp == & js_FunctionClass) // (3,4) : ops -> call != 0)) { // (3) type = JSTYPE_FUNCTION; } else { type = JSTYPE_OBJECT; } } else if (JSVAL_IS_NUMBER(v)) { type = JSTYPE_NUMBER; } else if (JSVAL_IS_STRING(v)) { type = JSTYPE_STRING; } else if (JSVAL_IS_BOOLEAN(v)) { type = JSTYPE_BOOLEAN; } return type; } </code></pre> <p>上面的代码执行的步骤是：</p> <ol> <li>在（1）首先检查值 <code>v</code> 是否 <code>undefined</code>（VOID）。通过 <code>==</code> 比较值是否相同：</li> </ol> <pre><code class="language-c">#define JSVAL_IS_VOID(v) ((v) == JSVAL_VOID) </code></pre> <ol start="2"> <li>下一个检查（2）是该值是否具有对象标记。如果它另外可以调用（3）或它的内部属性 <code>[[Class]]</code> 将其标记为一个函数（4），则 <code>v</code> 是一个函数。否则，它是一个对象。这是由 <code>typeof null</code> 产生的结果。</li> <li>随后的检查是数字，字符串和布尔值。甚至没有显式的 <code>null</code> 检查，可以由以下 C 宏执行。</li> </ol> <pre><code class="language-c">#define JSVAL_IS_NULL(v) ((v) == JSVAL_NULL) </code></pre> <p>这似乎是一个非常明显的错误，但请不要忘记，只有很少的时间来完成 JavaScript 的第一个版本。</p> <blockquote> <p>Brendan Eich 在 Twitter 表示这是一个 <a href="https://x.com/BrendanEich/status/617450289889607681">abstraction leak</a>，可理解为变相承认这是代码的 bug。</p> <p>null means "no object", undefined =>"no value". Really it's an abstraction leak: null and objects shared a Mocha type tag.</p> </blockquote> <p>下面列出各种数据类型 <code>typeof</code> 对应的结果：</p> <table> <thead> <tr> <th style="text-align:center">Operand</th> <th style="text-align:center">Result</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">undefinded</td> <td style="text-align:center">"undefined"</td> </tr> <tr> <td style="text-align:center">null</td> <td style="text-align:center">"object"</td> </tr> <tr> <td style="text-align:center">Boolean value</td> <td style="text-align:center">"boolean"</td> </tr> <tr> <td style="text-align:center">Number value</td> <td style="text-align:center">"number"</td> </tr> <tr> <td style="text-align:center">BigInt value (ES11)</td> <td style="text-align:center">"bigint"</td> </tr> <tr> <td style="text-align:center">String value</td> <td style="text-align:center">"string"</td> </tr> <tr> <td style="text-align:center">Symbol value (ES6)</td> <td style="text-align:center">"symbol"</td> </tr> <tr> <td style="text-align:center">宿主对象（由 JS 环境提供）</td> <td style="text-align:center">取决于具体实现</td> </tr> <tr> <td style="text-align:center">Function</td> <td style="text-align:center">"function"</td> </tr> <tr> <td style="text-align:center">All other values</td> <td style="text-align:center">"object"</td> </tr> </tbody> </table> <blockquote> <p>typeof returning "object" for null is a bug. It can’t be fixed, because that would break existing code. Note that a function is also an object, but typeof makes a distinction. Arrays, on the other hand, are considered objects by it.</p> </blockquote> <p><a href="https://zhuanlan.zhihu.com/p/143590829">某文章</a>表示：</p> <p>在 JavaScript V8 引擎中，针对 <code>typeof null === 'object'</code> 这种“不规范”情况，对 <code>null</code> 提前做了一层判断。假设在 V8 中把这行代码删掉， <code>typeof null</code> 会返回 <code>undefined</code>。</p> <pre><code>GotoIf(InstanceTypeEqual(instance_type, ODDBALL_TYPE), &if_oddball); </code></pre> <p>好了，关于 <code>typeof null === 'object'</code> 的话题告一段落。</p> <h2>二、typeof NaN === 'number'</h2> <p>不确定这个算不算一个设计失误，但毫无疑问这是反直觉的。</p> <blockquote> <p>关于 NaN，还有一些很有趣的知识点，推荐一个 Slide，非常值得一看：<a href="https://speakerdeck.com/lewisjellis/idiosyncrasies-of-nan-v2">Idiosyncrasies of NaN v2</a>。</p> </blockquote> <h2>三、NaN、isNaN()、Number.isNaN()</h2> <p>在 JavaScript 中，NaN 是一个看起来很莫名其妙的存在。当然 NaN 不是只有 JavaScript 才存在的。其他语言也是有的。</p> <blockquote> <p>我觉得应该是这样："NaN" actually stands for "Not a NaN".</p> </blockquote> <h3>1. NaN</h3> <p><code>NaN</code> 是一个全局对象属性，其属性的初始值就是 <code>NaN</code>，和 <code>Number.NaN</code>的值一样。</p> <p><strong><code>NaN</code> 是 JavaScript 中唯一一个不等于自身的值</strong>。虽然这个设计其实理由很充分（参照前面推荐的那个 Slide，在 IEEE 754 规范中有非常多的二进制序列都可以被当做 <code>NaN</code>，所以任意计算出两个 <code>NaN</code>，它们在二进制表示上很可能不同），但不管怎样，这个还是非常值得吐槽...</p> <pre><code class="language-js">NaN == NaN // false NaN === NaN // false Number.NaN === NaN // false </code></pre> <h3>2. isNaN()</h3> <p><code>isNaN()</code> 是全局对象提供的一个方法，它的命名和行为非常让人费解：</p> <ul> <li>它并不只是用来判断一个值是否为 <code>NaN</code>，因为所有对于所有非数字类型的值它也返回 <code>true</code>；</li> <li>但也不能说它是用来判断一个值是否为数值的，因为根据前文，<code>NaN</code> 的类型是 <code>number</code>，应当被认为是一个数值。</li> </ul> <p><code>isNaN()</code> 方法，当参数值是 <code>NaN</code> 或者将参数转换为数字的结果为 <code>NaN</code>，则返回 <code>true</code>，否则返回 <code>false</code>。因此，它不能用来判断是否严格等于 <code>NaN</code>。</p> <pre><code class="language-js">isNaN(NaN) // true isNaN('hello world') // true </code></pre> <h3>3. Number.isNaN()</h3> <p>ES6 提供了 <code>Number.isNaN()</code> 方法，用于判断一个值是否严格等于 <code>NaN</code>，终于是拨乱反正了。</p> <p>和全局函数 <code>isNaN()</code> 相比，<code>Number.isNaN()</code> 不会自行将参数转换成数组，它会先判断参数是否为数字类型，如不是数字类型则直接返回 <code>false</code>，接着判断参数值是否为 <code>NaN</code>，若是则返回 <code>true</code>。</p> <pre><code class="language-js">Number.isNaN(NaN) // true Number.isNaN(Number.NaN) // true Number.isNaN(0 / 0) // true Number.isNaN('hello world') // false Number.isNaN(undefined) // false </code></pre> <h3>4. 总结几种判断值是否为 NaN 的方法</h3> <pre><code class="language-js">// 1. 利用 NaN 的特性，JavaScript 中唯一一个不等于自身的值 function myIsNaN(v) { return v !== v } // 2. 利用 ES5 的 isNaN() 全局方法 function myIsNaN(v) { return typeof v === 'number' && isNaN(v) } // 3. 利用 ES6 的 Number.isNaN() 方法 function myIsNaN(v) { return Number.isNaN(v) } // 4. 利用 ES6 的 Object.is() 方法 function myIsNaN(v) { return Object.is(v, NaN) } </code></pre> <h2>四、==、=== 与 <a href="http://Object.is">Object.is</a>()</h2> <p>JavaScript 是一种弱类型语言，存在隐式类型转换。因此，<code>==</code> 的行为非常令人费解。</p> <pre><code class="language-js">[] == ![] // true 2 == '2' // true </code></pre> <p>所以，各种 JavaScript 书籍都推荐使用 <code>===</code> 替代 <code>==</code>（仅在 null checking 之类的情况除外）。</p> <p>但事实上， <code>===</code> 也并不总是靠谱，它至少存在两类例外情况。（<a href="https://2ality.com/2012/03/stricter-equality.html">Stricter equality in JavaScript</a>）</p> <pre><code class="language-js">// 1. 前文提到的 NaN NaN === NaN // false // 2. +0 与 -0 两者其实是不相等的值 👇 +0 === -0 // true // 因为 1 / +0 === Infinity // true 1 / -0 === -Infinity // true Infinity === -Infinity // false // ES6 是提供的方法 Object.is(NaN, NaN) // true Object.is(+0, -0) // false </code></pre> <p>直到 ES6 才有一个可以比较两个值是否严格相等的方法：<code>Object.is()</code>，它对于 <code>===</code> 的这两者例外都做了正确的处理。</p> <p>如果 ES6 以下，这样实现 <code>Object.is()</code>：</p> <pre><code class="language-js">function myObjectIs (x, y) { if (x === y) { // x === 0 => compare via infinity trick return x !== 0 || (1 / x === 1 / y) } // x !== y => return true only if both x and y are NaN return x !== x && y !== y } </code></pre> <blockquote> <p>关于 <code>==</code> 和 <code>===</code> 部分值的比较，可以看下 <a href="https://dorey.github.io/JavaScript-Equality-Table/">JavaScript-Equality-Table</a>。</p> <p>Always use 3 equals unless you have a good reason to use 2.（除非您有充分的理由 <code>==</code>，否则始终使用 <code>===</code>）</p> </blockquote> <h2>五、分号自动插入机制（ASI）</h2> <blockquote> <p>此前还专门针对 ASI 内容写了一篇文章：<a href="https://github.com/tofrankie/blog/issues/223">JavaScript ASI 机制详解，不用再纠结分号问题</a>。</p> </blockquote> <h3>1. Restricted Productions</h3> <p>据 Brendan Eich 称，JavaScript 最初被设计出来时，<a href="https://brendaneich.com/2008/04/popularity/">上级要求这个语言的语法必须像 Java</a>。所以跟 Java 一样，JavaScript 的语句在解析时，是<strong>需要分号</strong>分隔的。但是后来出于降低学习成本，或者提高语言的容错性的考虑，他在语法解析中加入了分号自动插入的纠正机制。</p> <p>这个做法的本意当然是好的，有不少其他语言也是这么处理的（比如 Swift）。但是问题在于，JavaScript 的语法设计得不够安全，导致 ASI 有不少特殊情况无法处理到，在某些情况下会错误地加上分号（在标准文档里这些被称为 <a href="https://tc39.github.io/ecma262/#sec-rules-of-automatic-semicolon-insertion">Restricted Productions</a>）。</p> <p>最典型的是 <code>return</code> 语句：</p> <pre><code class="language-js">// returns undefined return { name: 'Frankie' } // returns { name: 'Frankie' } return { name: 'Frankie' } </code></pre> <p>这导致了 JavaScript 社区写代码时花括号都不换行，这在其他编程语言社区是无法想象的。</p> <h3>2. 漏加分号的问题</h3> <p>有好几种情况要注意（更多 ASI 详情看上面推荐的文章），比如：</p> <pre><code class="language-js">// 假设源码是这样的 var a = function (x) { console.log(x) } (function () { console.log('do something') })() // 在 JS 解析器的眼里却是这样的，所以这段代码会报错 var a = function (x) { console.log(x) }(function () { console.log('do something') })() </code></pre> <h3>3. semicolon-less</h3> <p>由于以上这些已经是语言特性了，并且无法绕开，无论怎样我们都需要去学习掌握。</p> <blockquote> <p>对于使用 semicolon-less 风格的朋友，注意一下 5 种情况就可以了：</p> <p>如果一条语句是以 <code>(</code>、<code>[</code>、<code>/</code>、<code>+</code>、<code>-</code> 开头，那么就要注意了。根据 JavaScript 解析器的规则，尽可能读取更多 <code>token</code> 来构成一个完整的语句，而以上这些 <code>token</code> 极有可能与前一个 <code>token</code> 可组成一个合法的语句，所以它不会自动插入分号。</p> <p>实际项目中，以 <code>/</code>、<code>+</code>、<code>- </code>作为行首的代码其实是很少的，<code>(</code>、<code>[</code> 也是较少的。**当遇到这些情况时，通过在行首手动键入分号 <code>;</code> 来避免 ASI 规则产生的非预期结果或报错。**这样的记忆成本和出错概率远低于强制分号风格。</p> <p>还有，ESLint 中有一条规则 <code>no-unexpected-multiline</code> 哦，这样就几乎没有什么负担了。</p> </blockquote> <h2>六、Falsy values</h2> <p>在 JavaScript 中至少有七种假值（在条件表达式中与 <code>false</code> 等价）：<code>0</code>、<code>0n</code>、<code>null</code>、<code>undefined</code>、<code>false</code>、<code>''</code> 以及 <code>NaN</code>。（其中 <code>0n</code> 是 BigInt 类型的值）</p> <blockquote> <p>以上六种假值均可通过 Double Not 运算符（<code>!!</code>）来显示转换成 <code>Boolean</code> 类型的 <code>false</code> 值。</p> </blockquote> <h2>七、+、- 操作符相关的隐式类型转换</h2> <p>大致可以这样记：作为二元操作符的 <code>+</code> 会尽可能地把两边的值转为字符串，而 <code>-</code> 和作为一元操作符的 <code>+</code> 则会尽可能地把值转为数字。</p> <pre><code class="language-js">('foo' + + 'bar') === 'fooNaN' // true '3' + 1 // '31' '3' - 1 // 2 '222' - - '111' // 333 </code></pre> <blockquote> <p>注意: <code>+</code> 两侧只要有一侧是字符串，另一侧的数字则会自动转换成字符串，因为其中存在隐式转换。</p> </blockquote> <h2>八、null、undefined 以及数组的 “holes”</h2> <p>在一个语言中同时有 <code>null</code> 和 <code>undefined</code> 两个表示空值的原生类型，乍看起来很难理解，不过这里有一些讨论可以一看：</p> <ul> <li><a href="https://twitter.com/BrendanEich/status/330775086208524288">Java has null but only for reference types. With untyped JS, the uninitialized value should not be reference-y or convert to 0</a>.</li> <li><a href="https://github.com/DavidBruant/ECMAScript-regrets/issues/26#issue-13943504">GitHub 上的一些讨论</a> - <a href="https://twitter.com/BrendanEich/status/652442934151938048">Null for Objects and undefined for primitives</a></li> </ul> <p>不过数组里的 "holes" 就非常难以理解了。</p> <p>产生 holes 的方法有两种：一是定义数组字面量时写两个连续的逗号：<code>var a = [1, , 2]</code>；二是使用 <code>Array</code> 对象的构造器：<code>new Array(3)</code>。</p> <p>数组的各种方法对于 holes 的处理非常非常非常不一致，有的会跳过（<code>forEach</code>），有的不处理但是保留（<code>map</code>），有的会消除掉 holes（<code>filter</code>），还有的会当成 <code>undefined</code> 来处理（<code>join</code>）。这可以说是 JavaScript 中最大的坑之一，不看文档很难自己理清楚。</p> <p>具体可以参考这两篇文章：</p> <ul> <li><a href="http://www.2ality.com/2013/07/array-iteration-holes.html">Array iteration and holes in JavaScript</a></li> <li><a href="http://www.2ality.com/2015/09/holes-arrays-es6.html">ECMAScript 6: holes in Arrays</a></li> </ul> <h2>九、 Array-like objects</h2> <p>在 JavaScript 中，类数组但不是数组的对象不少，这类对象往往有 <code>length</code> 属性、可以被遍历，但缺乏一些数组原型上的方法，用起来非常不便。比如在为了能让 <code>arguments</code> 对象用上 <code>Array.prototype.shift()</code> 方法，我们往往需要先写这样一条语句，非常不便。</p> <pre><code class="language-js">var args = Array.prototype.slice.apply(arguments) </code></pre> <p>在 ES6 中，arguments 对象不再被建议使用，我们可以用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters">Rest parameters</a>（<code>const fn = (...args) => {}</code>），这样拿到的对象（<code>args</code>）就直接是数组了。</p> <p>不过在语言标准之外，DOM 标准中也定义了不少 Array-like 的对象，比如 NodeList 和 HTMLCollection。对于这些对象，在 ES6 中我们可以用 spread operator 处理：</p> <pre><code class="language-js">const nodeList = document.querySelectorAll('div') const nodeArray = [...nodeList] console.log(Object.prototype.toString.call(nodeList)) // [object NodeList] console.log(Object.prototype.toString.call(nodeArray)) // [object Array] </code></pre> <h3>1. arguments</h3> <p>在非严格模式下（sloppy mode）下，对 argument 赋值会改变对应的<strong>形参</strong>。</p> <blockquote> <p>可以看下这篇文章：<a href="https://github.com/tofrankie/blog/issues/232">JavaScript 严格模式详解</a>（4-8-2 小节）</p> </blockquote> <pre><code class="language-js">function foo(x) { console.log(x === 1) // true arguments[0] = 2 console.log(x === 2) // true } function bar(x) { 'use strict' console.log(x === 1) // true arguments[0] = 2 console.log(x === 2) // false } foo(1) bar(1) </code></pre> <h2>十、函数作用域与变量提升（Variable hoisting）</h2> <h3>1. 函数作用域</h3> <p>蝴蝶书上的例子想必大家都看过：</p> <pre><code class="language-js">// The closure in loop problem for (var i = 0; i !== 10; ++i) { setTimeout(function() { console.log(i) }, 0) } </code></pre> <p>函数级作用域本身没有问题，但是如果只能使用函数级作用域的话，在很多代码中它会显得非常<strong>反直觉</strong>。比如上面的这个循环例子，对于程序员来说，根据花括号的违章确定变量作用域远比找到外层函数容易得多。</p> <p>在以前，要解决这个问题，我们只能使用闭包 + IIFE 产生一个新作用域，代码非常难看（其实 <code>with</code> 以及 <code>catch</code> 语句后面跟的代码块也算是块级作用域，但这并不通用）。</p> <p>幸而现在 ES2015 引入了 <code>let</code> / <code>const</code>，让我们终于可以用上真正的块级作用域。</p> <h3>2. 变量提升</h3> <p>JavaScript 引擎在执行代码的时候，会先处理作用域内所有的变量声明，给变量分配空间（在标准里叫 binding），然后在再执行代码。</p> <p>这本来没什么问题，但是 <code>var</code> 声明在被分配空间的同时也会被初始化成 <code>undefined</code>（ES5 中的 <a href="https://es5.github.io/#x10.2.1.1.2">CreateMutableBinding</a>），这就相当于把 var 声明的变量提升到了函数作用域的开头，也就是所谓的 “hoisting”。</p> <p>ES6 中引入的 <code>let</code>、<code>const</code> 则实现了 temporal dead zone，虽然进入作用域时用 <code>let</code> 和 <code>const</code> 声明的变量也会被分配空间，但不会被初始化。在初始化语句之前，如果出现对变量的引用，会抛出 <code>ReferenceError</code> 错误。</p> <pre><code class="language-js">// without TDZ console.log(a) // undefined var a = 1 // with TDZ console.log(b) // ReferenceError let b = 2 </code></pre> <p>在标准层面，这是通过把 CreateMutableBing 内部方法分拆成 CreateMutableBinding 和 InitializeBinding 两步实现的，只有 VarDeclaredNames 才会执行 InitializeBinding 方法。</p> <h3>3. let、const</h3> <p>然而，<code>let</code> 和 <code>const</code> 的引入也带来了一个坑。主要是这两个关键词的命名不够精确合理。</p> <p><code>const</code> 关键词所定义的是一个 immutable binding（类似于 Java 的 <code>final</code> 关键词），而非真正的常量（constant），这一点对于很多人来说也是反直觉的。</p> <p>ES6 规范的主笔 Allen Wirfs-Brock 在 ESDiscuss 的一个<a href="https://esdiscuss.org/topic/should-const-be-favored-over-let#content-6">帖子</a>里表示，如果可以从头再来的话，他会更倾向于选择 <code>let var</code> / <code>let</code> 或者 <code>mut</code> / <code>let</code> 替代现在的这两个关键词，可惜这只能是一个美好的空想了。</p> <h3>4. for...in</h3> <p><code>for...in</code> 的问题在于它会遍历到原型链上的属性，这个大家应该都知道的，使用时需要加上 <code>obj.hasOwnProperty(key)</code> 判断才安全。</p> <p>在 ES6+ 中，使用 <code>for(const key of Object.keys(obj))</code> 或者 <code>for(const [key, value] of Object.entries())</code> 可以绕开这个问题。</p> <blockquote> <p>顺便提一下 <code>Object.keys()</code>、<code>Object.getOwnPropertyNames()</code>、<code>Reflect.ownKeys()</code> 的区别：我们最常用的一般是 <code>Object.keys()</code> 方法，<code>Object.getOwnPropertyNames()</code> 会把 <code>enumerable: false</code> 的属性名也会加进来，而 <code>Reflect.ownKeys()</code> 在此基础上还会加上 <code>Symbol</code> 类型的键。</p> </blockquote> <h3>5. with</h3> <p>最主要的问题在于它依赖运行时语义，影响优化。</p> <p>此外还会降低程序可读性、易出错、易泄露全局变量。</p> <pre><code class="language-js">function fn(foo, length) { with(foo) { console.log(length) } } fn([1, 2, 3], 222) // 3 </code></pre> <h3>6. eval</h3> <p><code>eval</code> 的问题不在于可以动态执行代码，这种能力无论如何也不能算是语言的缺陷。</p> <h3>7. Scope</h3> <p>它的第一个坑在于传给 eval 作为参数的代码段能够接触到当前语句所在的闭包。</p> <p>而用 <code>new Function</code> 动态执行的代码就不会有这个问题。因为 <code>new Function</code> 所生成的函数是确保执行在最外层作用域下的（<a href="http://perfectionkills.com/global-eval-what-are-the-options/#new_function">严格来说标准里不是这样定义的，但实际效果基本可以看作等同，除了 <code>new Function</code> 中可以获取到 <code>arguments</code> 对象</a>）。</p> <pre><code class="language-js">function test1() { var a = 11 eval('(a = 22)') console.log(a) // 22 } function test2() { var a = 11 new Function('return (a = 22)')() console.log(a) // 11 } </code></pre> <h3>8. 直接调用 vs 间接调用（Direct Call vs Indirect Call）</h3> <p>第二个坑是直接调用 <code>eval</code> 和间接调用的区别。</p> <p>事实上，但是「直接调用」的概念就足以让人迷糊了。</p> <p>首先，<a href="https://es5.github.io/#x15.1.2"><code>eval</code> 是全局对象上的一个成员函数</a>；</p> <p>但是，<a href="https://esdiscuss.org/topic/double-checking-if-window-eval-is-an-indirect-call-to-eval#content-1"><code>window.eval()</code> 这样的调用 <strong>不算是</strong> 直接调用，因为这个调用的 base 是全局对象而不是一个 "environment record"</a>。</p> <p>接下来的就是历史问题了：</p> <ul> <li>在 ES1 时代，<code>eval</code> 调用并没有直接和间接的区分；</li> <li>然后在 ES2 中，加入了直接调用（direct call）的概念。根据 <a href="http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/#indirect-eval-call">Dmitry Soshnikov 后来的说法</a>，区分这两种调用可能是处于安全考虑。此时唯一合法的 <code>eval</code> 使用方式是 <strong>直接调用</strong>，如果 <code>eval</code> 被间接调用了或者被赋值给其他变量了，JavaScript 引擎 <strong>可以选择</strong> 报一个 Runtime Error（<a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf">ECMA-262 2nd Edition</a>, p.63）。</li> <li>但是浏览器厂商们在试图实现这个特性时，发现这会让一些旧网站不兼容。</li> <li>考虑到这毕竟是可选的特性，他们最后就选择了不报错，转而让所有间接调用的 <code>eval</code> 都在全局作用域下执行。这样一来，既保持了对旧网站的兼容性，也保证了一定程度的安全性。</li> <li><a href="https://mail.mozilla.org/pipermail/es-discuss/2011-February/012852.html">到了 ES5 时期，标准制定者们希望能够和当前约定俗成的实现保持一直并规范化，所以去掉了之前标准里的可选实现，转而规定了间接调用 <code>eval</code> 时的行为</a></li> </ul> <p>直接调用和间接调用最大的区别在于他们的作用域不同：</p> <pre><code class="language-js">function test() { var x = 2, y = 4 console.log(eval("x + y")) // Direct call, uses local scope, result is 6 var geval = eval; console.log(eval("x + y")) // Indirect call, uses global scope, throws ReferenceError because `x` is undefined } </code></pre> <p>间接调用 <code>eval</code> 最大的用处（可能也是唯一的实际用处）是在任意地方获取到全局对象（然而 Function('return this')() 也能做到这一点）： <code>javascript // 即使是在严格模式下也能起作用 var global = ("indirect", eval)("this");</code></p> <p>未来，如果 Jordan Harband 的 <a href="https://github.com/tc39/proposal-global"><code>System.global</code> 提案</a>能进入到标准的话，这最后一点用处也用不到了……</p> <h2>十一、非严格模式下，赋值给未声明的变量会导致产生一个新的全局变量</h2> <h3>1. Value Properties of the Global Object</h3> <p>平常我们使用到的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>，<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a>、<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a> 并不是作为原始值被使用的，<a href="https://es5.github.io/#x15.1.1">而是定义在全局对象上的属性名</a>。</p> <p>在 ES5 之前，这几个属性甚至可以被覆盖，直到 ES5 之后它们才被改成 non-configurable、non-writable。</p> <p>然而，因为这几个属性名都不是 JavaScript 的保留字，所以可以被用来当做变量名使用。即使全局变量上的这几个属性不可被更改，我们仍可以在自己的作用域里面对这几个名字进行覆盖。</p> <pre><code class="language-js">(function () { var undefined = 'foo' console.log(undefined, typeof undefined) // "foo" "string" })() </code></pre> <h3>2. Stateful RegExps</h3> <p>JavaScript 中，正则对象上的函数是有状态的：</p> <pre><code class="language-js">const re = /foo/g console.log(re.test('foo bar')) // true console.log(re.test('foo bar')) // false </code></pre> <p>这使得这些方法难以调试，无法做到线程安全。</p> <p>Brendan Eich 的说法是<a href="https://twitter.com/BrendanEich/status/231066800304046080">这些方法来自于 90 年代的 Perl 4，那时候并没有想到这么多</a>。</p> <p>未完待续...</p> <h2>十二、参考链接</h2> <ul> <li><a href="https://web.archive.org/web/20211130020159/https://sodatea.blog/zh/2016/javascript-design-regrets-cf9619ba">JavaScript 的设计失误</a></li> <li><a href="https://2ality.com/2013/10/typeof-null.html">The history of “typeof null”</a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof">typeof MDN</a></li> <li><a href="https://2ality.com/2012/03/stricter-equality.html">Stricter equality in JavaScript</a></li> </ul> </article> <article> <h1>随机打乱数组</h1> <p>Sun, 26 Feb 2023 11:00:09 GMT</p> <p></p> <p>本文介绍三种数组乱序的方式：</p> <ul> <li>Array.prototype.sort</li> <li>Fisher–Yates Shuffle</li> <li>Knuth-Durstenfeld Shuffle</li> </ul> <p>若要实现随机打乱数组的需求，不建议使用 <code>arr.sort(() => Math.random() - 0.5)</code> 。目前用得较多的是 Knuth-Durstenfeld Shuffle 算法（洗牌算法），前端常用的 Lodash 库里面的 <a href="https://www.lodashjs.com/docs/lodash.shuffle"><code>_.shuffle()</code></a> 也是使用了这种算法。</p> <h2>Array.prototype.sort 排序</h2> <p>最简单的乱序实现：</p> <pre><code class="language-js">function randomShuffle(arr) { return arr.sort(() => Math.random() - 0.5) } </code></pre> <p>但实际上<strong>这种方法并不能真正的随机打乱数组</strong>。在多次执行后，每个元素有很大几率还在它原来的位置附近出现。详见：<a href="https://www.cnblogs.com/macq/p/6650586.html">常用的 sort 打乱数组方法真的有用？</a></p> <h2>Fisher–Yates Shuffle（Fisher and Yates' original method）</h2> <p>由 Ronald Fisher 和 Frank Yates 提出的 <a href="https://www.wikiwand.com/en/Fisher%E2%80%93Yates_shuffle#/Fisher_and_Yates'_original_method">Fisher–Yates shuffle</a> 算法思想，大致如下：</p> <p>假设有一个长度为 N 的数组：</p> <ol> <li>从第 1 个到剩余的未删除项（包含）之间选择一个随机数 k。</li> <li>从剩余的元素中将第 k 个元素删除并取出，放到新数组中。</li> <li>重复第 1、2 步直到所有元素都被删除。</li> <li>最终将新数组返回</li> </ol> <h3>实现</h3> <pre><code class="language-js">function shuffle(arr) { let random const newArr = [] while (arr.length) { random = Math.floor(Math.random() * arr.length) newArr.push(arr[random]) arr.splice(random, 1) } return newArr } </code></pre> <h3>举例</h3> <p>假设我们有 1 ~ 8 的数字</p> <blockquote> <p>表格每列分别表示：范围、随机数（被移除数的位置）、剩余未删除的数、已随机排列的数。</p> </blockquote> <table> <thead> <tr> <th style="text-align:center">Range</th> <th style="text-align:center">Roll</th> <th style="text-align:center">Scratch</th> <th style="text-align:center">Result</th> </tr> </thead> <tbody> <tr> <td style="text-align:center"></td> <td style="text-align:center"></td> <td style="text-align:center">1 2 3 4 5 6 7 8</td> <td style="text-align:center"></td> </tr> </tbody> </table> <p>现在，我们从 1 ~ 8 中随机选择一个数，得到随机数 <em>k</em> 为 3，然后在 Scratch 上删除第 <em>k</em> 个数字（即数字 3），并将其放到 Result 中：</p> <table> <thead> <tr> <th style="text-align:center">Range</th> <th style="text-align:center">Roll</th> <th style="text-align:center">Scratch</th> <th style="text-align:center">Result</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">1 - 8</td> <td style="text-align:center">3</td> <td style="text-align:center">1 2 <s>3</s> 4 5 6 7 8</td> <td style="text-align:center"><strong>3</strong></td> </tr> </tbody> </table> <p>现在我们从 1 ~ 7 选择第二个随机数 <em>k</em> 为 4，然后在 Scratch 上删除第 <em>k</em> 个数字（即数字 5），并将其放到 Result 中：</p> <table> <thead> <tr> <th style="text-align:center">Range</th> <th style="text-align:center">Roll</th> <th style="text-align:center">Scratch</th> <th style="text-align:center">Result</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">1 - 7</td> <td style="text-align:center">4</td> <td style="text-align:center">1 2 <s>3</s> 4 <s>5</s> 6 7 8</td> <td style="text-align:center">3 <strong>5</strong></td> </tr> </tbody> </table> <p>现在我们从 1 ~ 6 选择下一个随机数，然后从 1 ~ 5 选择依此类推，总是重复上述过程：</p> <table> <thead> <tr> <th style="text-align:center">Range</th> <th style="text-align:center">Roll</th> <th style="text-align:center">Scratch</th> <th style="text-align:center">Result</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">1–6</td> <td style="text-align:center">5</td> <td style="text-align:center">1 2 <s>3</s> 4 <s>5</s> 6 <s>7</s> 8</td> <td style="text-align:center">3 5 <strong>7</strong></td> </tr> <tr> <td style="text-align:center">1–5</td> <td style="text-align:center">3</td> <td style="text-align:center">1 2 <s>3</s> <s>4</s> <s>5</s> 6 <s>7</s> 8</td> <td style="text-align:center">3 5 7 <strong>4</strong></td> </tr> <tr> <td style="text-align:center">1–4</td> <td style="text-align:center">4</td> <td style="text-align:center">1 2 <s>3</s> <s>4</s> <s>5</s> 6 <s>7</s> <s>8</s></td> <td style="text-align:center">3 5 7 4 <strong>8</strong></td> </tr> <tr> <td style="text-align:center">1–3</td> <td style="text-align:center">1</td> <td style="text-align:center"><s>1</s> 2 <s>3</s> <s>4</s> <s>5</s> 6 <s>7</s> <s>8</s></td> <td style="text-align:center">3 5 7 4 8 <strong>1</strong></td> </tr> <tr> <td style="text-align:center">1–2</td> <td style="text-align:center">2</td> <td style="text-align:center"><s>1</s> 2 <s>3</s> <s>4</s> <s>5</s> <s>6</s> <s>7</s> <s>8</s></td> <td style="text-align:center">3 5 7 4 8 1 <strong>6</strong></td> </tr> <tr> <td style="text-align:center"></td> <td style="text-align:center"></td> <td style="text-align:center"><s>1</s> <s>2</s> <s>3</s> <s>4</s> <s>5</s> <s>6</s> <s>7</s> <s>8</s></td> <td style="text-align:center">3 5 7 4 8 1 6 <strong>2</strong></td> </tr> </tbody> </table> <h2>Knuth-Durstenfeld Shuffle（The modern algorithm）</h2> <p>Richard Durstenfeld 于 1964 年推出了现代版本的 <a href="https://www.wikiwand.com/en/Fisher%E2%80%93Yates_shuffle#citenotecacm2">Fisher–Yates shuffle</a>，并由 Donald E. Knuth 在 <a href="https://www.wikiwand.com/en/The_Art_of_Computer_Programming">The Art of Computer Programming</a> 以 “Algorithm P (Shuffling)” 进行了推广。Durstenfeld 所描述的算法与 Fisher 和 Yates 所给出的算法有很小的差异，但意义重大。</p> <pre><code class="language-text">-- To shuffle an array a of n elements (indices 0..n-1): for i from n−1 downto 1 do // 数组从 n-1 到 0 循环执行 n 次 j ← random integer such that 0 ≤ j ≤ i // 生成一个 0 到 n-1 之间的随机索引 exchange a[j] and a[i] // 将交换之后剩余的序列中最后一个元素与随机选取的元素交换 </code></pre> <p>Durstenfeld 的解决方案是将“<strong>删除</strong>”的数字移至数组<strong>末尾</strong>，即<strong>将每个被删除数字与最后一个未删除的数字进行交换</strong>。</p> <h3>实现</h3> <pre><code class="language-js">function shuffle(arr) { let i = arr.length while (--i) { let j = Math.floor(Math.random() * i) ;[arr[j], arr[i]] = [arr[i], arr[j]] } return arr } </code></pre> <p>Knuth-Durstenfeld Shuffle 将算法的时间复杂度降低到 <code>O(n)</code>，而 Fisher–Yates shuffle 的时间复杂度为 <code>O(n2)</code>。后者在计算机实现过程中，将花费不必要的时间来计算每次剩余的数字（可以理解成数组长度）。</p> <h3>举例</h3> <p>同样，假设我们有 1 ~ 8 的数字</p> <blockquote> <p>表格每列分别表示：范围、当前随机数（即随机交互的位置）、剩余未交换的数、已随机排列的数。</p> </blockquote> <table> <thead> <tr> <th style="text-align:center">Range</th> <th style="text-align:center">Roll</th> <th style="text-align:right">Scratch</th> <th style="text-align:left">Result</th> </tr> </thead> <tbody> <tr> <td style="text-align:center"></td> <td style="text-align:center"></td> <td style="text-align:right">1 2 3 4 5 6 7 8</td> <td style="text-align:left"></td> </tr> </tbody> </table> <p>我们从 1 ~ 8 中随机选择一个数，得到随机数 <em>k</em> 为 6，然后交换 Scratch 中的第 6 和第 8 个数字：</p> <table> <thead> <tr> <th style="text-align:center">Range</th> <th style="text-align:center">Roll</th> <th style="text-align:right">Scratch</th> <th style="text-align:left">Result</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">1 - 8</td> <td style="text-align:center">6</td> <td style="text-align:right">1 2 3 4 5 <strong>8</strong> 7</td> <td style="text-align:left"><strong>6</strong></td> </tr> </tbody> </table> <p>接着，从 1 ~ 7 中随机选择一个数，得到随机数 <em>k</em> 为 2，然后交换 Scratch 中的第 2 和第 7 个数字：</p> <table> <thead> <tr> <th style="text-align:center">Range</th> <th style="text-align:center">Roll</th> <th style="text-align:right">Scratch</th> <th style="text-align:left">Result</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">1 - 7</td> <td style="text-align:center">6</td> <td style="text-align:right">1 <strong>7</strong> 3 4 5 8</td> <td style="text-align:left"><strong>2</strong> 6</td> </tr> </tbody> </table> <p>继续，下一个随机数是1 ~ 6，得到的随机数恰好是 6，这意味着我们将列表中的第 6 个数字保留下来（经过上面的交换，现在是 8），然后移到下一个步。同样，我们以相同的方式进行操作，直到完成排列：</p> <table> <thead> <tr> <th style="text-align:center">Range</th> <th style="text-align:center">Roll</th> <th style="text-align:right">Scratch</th> <th style="text-align:left">Result</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">1 - 6</td> <td style="text-align:center">6</td> <td style="text-align:right">1 7 3 4 5</td> <td style="text-align:left"><strong>8</strong> 2 6</td> </tr> <tr> <td style="text-align:center">1 - 5</td> <td style="text-align:center">1</td> <td style="text-align:right"><strong>5</strong> 7 3 4</td> <td style="text-align:left"><strong>1</strong> 8 2 6</td> </tr> <tr> <td style="text-align:center">1 - 4</td> <td style="text-align:center">3</td> <td style="text-align:right">5 7 <strong>4</strong></td> <td style="text-align:left"><strong>3</strong> 1 8 2 6</td> </tr> <tr> <td style="text-align:center">1 - 3</td> <td style="text-align:center">3</td> <td style="text-align:right">5 7</td> <td style="text-align:left"><strong>4</strong> 3 1 8 2 6</td> </tr> <tr> <td style="text-align:center">1 - 2</td> <td style="text-align:center">1</td> <td style="text-align:right"><strong>7</strong></td> <td style="text-align:left"><strong>5</strong> 4 3 1 8 2 6</td> </tr> </tbody> </table> <p>因此，结果是 <code>7 5 4 3 1 8 2 6</code>。</p> <h2>参考链接</h2> <ul> <li><a href="https://www.cnblogs.com/macq/p/6650586.html">常用的 sort 打乱数组方法真的有用？</a></li> <li><a href="https://bost.ocks.org/mike/shuffle/">Fisher–Yates Shuffle 可视化</a></li> <li><a href="https://www.wikiwand.com/en/Fisher%E2%80%93Yates_shuffle">Fisher–Yates shuffle wiki</a></li> <li><a href="https://github.com/ccforward/cc/issues/44">洗牌算法（shuffle）的 js 实现</a></li> </ul> </article> <article> <h1>JavaScript 严格模式详解</h1> <p>Sun, 26 Feb 2023 10:58:07 GMT</p> <h2>一、概念</h2> <p><a href="https://www.ecma-international.org/publications-and-standards/standards/ecma-262/">ECMAScript 5</a> 添加了第二种运行模式：<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode">严格模式</a>（strict mode）。顾名思义，这种模式使得 JavaScript 在更严格的条件下运行。</p> <p>与之相反的<strong>非严格模式</strong>，被称为“<a href="https://developer.mozilla.org/docs/Glossary/Sloppy_mode">sloppy mode</a>”，也称作“正常模式”。因为翻译原因，正常模式也被翻译为 —— 马虎模式/稀松模式/懒散模式。但这并不是一个官方术语，但是你会经常见到如上的一些说法，其意义就是指代非严格模式，即正常模式。</p> <p>设立严格模式的目的，主要有以下几个：</p> <ul> <li>消除 JavaScript 语法的一些不合理、不严谨之处，减少一些怪异行为</li> <li>消除代码运行的一些不安全之处，保证代码运行的安全</li> <li>提高编译器效率，增加运行速度</li> <li>为未来新版本的 JavaScript 做好铺垫</li> </ul> <p>严格模式体现了 JavaScript 更合理、更安全、更严谨的发展方向，包括 IE10 在内的主流浏览器都已经<a href="https://caniuse.com/use-strict">支持</a>它，许多大项目已经开始全面拥抱它。</p> <p>另外，同样的代码在不同的模式下可能会有不一样的运行结果；一些在正常模式下可以运行的语句，在严格模式下可能不能运行。</p> <h2>二、启用严格模式</h2> <p>启用严格模式很简单，就一行语句。</p> <pre><code class="language-js">'use strict' </code></pre> <p>不支持该模式的浏览器，会把它当作一行普通字符串，加以忽略。</p> <h2>三、调用严格模式</h2> <p>严格模式可以应用到<strong>整个脚本</strong>或<strong>个别函数</strong>中。不要在封闭大括弧 <code>{}</code> 内这样做，在这样的上下文中这么做是没有效果的。</p> <p>严格模式有两种调用方法，适用于不同的场合。</p> <h3>1. 针对整个脚本文件</h3> <p>将 <code>'use strict'</code> 放在脚本文件的<strong>第一行</strong>，则整个脚本都将以<strong>严格模式</strong>运行。如果这行语句不在第一行，则无效，整个脚本以正常模式运行。</p> <blockquote> <p>如果不同模式的代码文件合并成一个文件，这一点需要特别注意。</p> </blockquote> <pre><code class="language-html"><script> 'use strict' console.log('这是严格模式！') </script> <script> console.log('这是正常模式！') </script> </code></pre> <p>上述代码表示，一个网页中依次有两段 JavaScript 代码。前一个 <code><script></code> 标签是严格模式，后一个是非严格模式。</p> <h3>2. 针对单个函数</h3> <p>将 <code>'use strict'</code> 放在函数体的第一行，则整个函数以严格模式运行。</p> <pre><code class="language-js">function strict() { "use strict"; return '这是严格模式！' } function notStrict() { return '这是正常模式！' } </code></pre> <h3>3. 脚本文件的变通写法</h3> <p>因为第一种调用方法不利于文件合并，所以更好的做法是借用第二种方法，将整个脚本文件放在一个立即执行的匿名函数之中。</p> <pre><code class="language-js">void (function () { 'use strict' // ... })() </code></pre> <h3>4. 关于 'use strict' 放在 Program 或 FunctionBody 的第一行问题</h3> <blockquote> <p>严格地说，只要前面不是产生实际运行结果的语句，<code>'use strict'</code> 可以不在第一行，比如前面包括一些注释、或者是一些 JS 引擎无法识别的<a href="https://262.ecma-international.org/5.1/#sec-14.1">指令序言</a>等。</p> </blockquote> <p>例如：</p> <pre><code class="language-js">function fn() { 'use bar' 'abc' 'use strict' // 因为这完全符合指令序言 — 多指令共存的语法. 所被应用的代码仍然会进入严格模式。 } </code></pre> <p>ES5 会把 <code>'use bar'</code> 和 <code>'abc'</code> 也作为指令序言的某个指令处理，由于 JS 引擎不认识该指令，只认识 <code>'use strict'</code> 指令，则同样会进入严格模式.</p> <h2>四、严格模式对于语法和行为的改变</h2> <p>严格模式对 JavaScript 的语法和行为，都做了一些改变。</p> <h3>1. 全局变量显式声明</h3> <p>在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。</p> <pre><code class="language-js">'use strict' name = 'Frankie' // Uncaught ReferenceError: name is not defined for (i = 0; i < 2; i++) { // Uncaught ReferenceError: i is not defined // ... } // 上述代码在正常模式下，是可以正常运行的，而在严格模式下就会报错（引用类型错误） </code></pre> <p>因此，严格模式下变量都必须<strong>先声明再使用</strong>。抛开 JavaScript 设计的不合理、缺陷、甚至是 Bug，或者是其他看起来很反人类的东西，在了解历史原因和其中原理之后，为了代码可读性都理应如此。</p> <h3>2. 静态绑定</h3> <p>JavaScript 语言的一个特点，就是允许“动态绑定”，即某些属性和方法到底属于哪一个对象，不是在编译时确定的，而是在运行时（runtime）确定的。</p> <p>严格模式对动态绑定做了一些限制。某些情况下，只允许静态绑定。也就是说，属性和方法到底归属哪个对象，在编译阶段就确定。这样做有利于编译效率的提高，也使得代码更容易阅读，更少出现意外。</p> <p>具体来说，涉及以下几个方面。</p> <p>（1）禁止使用 with 语句</p> <p>因为 <code>with</code> 语句无法在编译时就确定，属性到底归属哪个对象。</p> <pre><code class="language-js">'use strict' var obj = { name: 'Frankie' } // 语法错误，Uncaught SyntaxError: Strict mode code may not include a with statement with (obj) { name = 'Mandy' } </code></pre> <p>（2）创设 eval 作用域</p> <p>正常模式下，JavaScript 语言有两种变量作用域（scope）：<strong>全局作用域</strong>和<strong>函数作用域</strong>。严格模式创设了第三种作用域：<strong>eval 作用域</strong>。</p> <p>正常模式下，<code>eval</code> 语句的作用域，取决于它处于全局作用域，还是处于函数作用域。严格模式下，<code>eval</code> 语句本身就是一个作用域，不再能够生成全局变量了，它所生成的变量只能用于 eval 内部。</p> <pre><code class="language-js">'use strict' var name = 'Frankie' console.log(eval("var name = 'Mandy'; name")) // "Mandy" console.log(name) // "Frankie" </code></pre> <h3>3. 增强的安全措施</h3> <p>（1）禁止 this 关键字指向全局对象</p> <pre><code class="language-js">function fn1() { // 返回 false，因为 this 指向全局对象 return !this } function fn2() { 'use strict' // 返回 true，因为严格模式下，this 的值为 undefined。 return !this } </code></pre> <p>因此，使用构造函数时，如果忘加 <code>new</code> 关键字时，<code>this</code> 不再指向全局对象，而是报错。</p> <pre><code class="language-js">// 构造函数 function Fn() { 'use strict' this.name = 'Frankie' // Uncaught TypeError: Cannot set property 'name' of undefined } // 直接当作普通函数调用就会报错，因为此时 this 为 undefined。 Fn() </code></pre> <p>（2）禁止在函数内部遍历调用栈</p> <pre><code class="language-js">function fn() { 'use strict' fn.arguments // 报错 fn.caller // 报错 // Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them } fn() </code></pre> <h3>4. 禁止删除变量</h3> <p>严格模式下无法删除变量。</p> <pre><code class="language-js">'use strict' var name delete name // 语法错误，Uncaught SyntaxError: Delete of an unqualified identifier in strict mode. </code></pre> <p>只有 <code>configurable</code> 设置为 <code>true</code> 的对象属性，才能被删除。</p> <pre><code class="language-js">'use strict' var obj = Object.create(null, { name: { value: 'Frankie', configurable: true } }) delete obj.name // 删除成功 </code></pre> <h3>5. 显式报错</h3> <p>正常模式下，对一个对象的只读属性进行赋值，不会报错，只会默默地失败。严格模式下，将报错。</p> <pre><code class="language-js">'use strict' var obj = {} Object.defineProperty(obj, 'name', { value: 'Frankie', writable: false }) obj.name = 'Mandy' // 报错，Uncaught TypeError: Cannot assign to read only property 'name' of object '#' </code></pre> <p>严格模式下，对一个使用 <code>getter</code> 方法读取的属性进行赋值，会报错。</p> <pre><code class="language-js">'use strict' var obj = { get name() { return 'Frankie' } } obj.name = 'Mandy' // 报错，Uncaught TypeError: Cannot set property name of # which has only a getter </code></pre> <p>严格模式下，对禁止扩展的对象添加新属性，会报错。</p> <pre><code class="language-js">'use strict' var obj = {} Object.preventExtensions(obj) obj.name = 'Frankie' // 报错，Uncaught TypeError: Cannot add property name, object is not extensible </code></pre> <p>严格模式下，删除一个不可删除的属性，会报错。</p> <pre><code class="language-js">'use strict' // 报错，Uncaught TypeError: Cannot delete property 'prototype' of function Object() { [native code] } delete Object.prototype </code></pre> <h3>6. 重名错误</h3> <p>严格模式新增了一些语法错误。</p> <p>（1）对象不能有重名的属性</p> <p>在 Gecko 版本 34 之前，严格模式要求一个对象内的所有属性名在对象内必须唯一。正常模式下重名属性是允许的，最后一个重名的属性决定其属性值。因为只有最后一个属性起作用，当代码要去改变属性值而不是修改最后一个重名属性的时候，复制这个对象就产生一连串的 bug。在严格模式下，重名属性被认为是语法错误：</p> <blockquote> <p>这个问题在 ECMAScript 6 中已经不复存在（<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1041128">bug 1041128</a>）。</p> </blockquote> <pre><code class="language-js">'use strict' // 语法错误：SyntaxError: property name age appears more than once in object literal var obj = { age: 18, age: 20 } </code></pre> <p>（2）函数不能有重名的参数</p> <p>正常模式下，如果函数有多个重名的参数，最后一个重名参数名会掩盖之前的重名参数，之前的参数仍然可以通过 <code>arguments[i]</code> 来访问。然而，这种隐藏毫无意义而且可能是意料之外的 (比如它可能本来是打错了)，所以在严格模式下重名参数被认为是语法错误。</p> <pre><code class="language-js">'use strict' // 语法错误：Uncaught SyntaxError: Duplicate parameter name not allowed in this context function fn(x, x, y) { return } </code></pre> <h3>7. 禁止八进制表示法</h3> <p>ECMAScript 并不包含八进制语法，但所有的浏览器都支持这种以零（<code>0</code>）开头的八进制语法：<code>0100 === 64</code>，还有 <code>"\045" === "%"</code>。在 ECMAScript 6 中支持为一个数字加 <code>"0o"</code> 的前缀来表示八进制数.</p> <pre><code class="language-js">'use strict' var n = 0100 // 语法错误：Uncaught SyntaxError: Octal literals are not allowed in strict mode. </code></pre> <pre><code class="language-js">var n = 0o100 // ES6 八进制数表示法 </code></pre> <h3>8. arguments 对象的限制</h3> <p>arguments 是函数的参数对象，严格模式对它的使用做了限制。</p> <p>（1）不允许对arguments赋值</p> <pre><code class="language-js">'use strict' arguments++ // 语法错误：Uncaught SyntaxError: Unexpected eval or arguments in strict mode var obj = { set p(arguments) { } } // 语法错误，同上 try { } catch (arguments) { } // 语法错误，同上 function arguments() { } // 语法错误，同上 var fn = new Function('arguments', "'use strict'; return 17;") // 语法错误，同上 </code></pre> <p>（2）arguments不再追踪参数的变化</p> <pre><code class="language-js">function fn1(x) { x = 2 return [x, arguments[0]] } fn1(1); // 正常模式为 [2, 2] function fn2(x) { 'use strict' x = 2 return [x, arguments[0]] } fn2(1) // 严格模式为 [2, 1] </code></pre> <p>（3）禁止使用 arguments.callee</p> <p>这意味着，你无法在匿名函数内部调用自身了。</p> <pre><code class="language-js">'use strict' var fn = function () { return arguments.callee } fn() // 报错：Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them </code></pre> <h3>9. 函数必须声明在顶层</h3> <p>将来 JavaScript 的新版本会引入"块级作用域"。为了与新版本接轨，严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说，不允许在非函数的代码块内声明函数。</p> <p><a href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">严格模式禁止了不在脚本或者函数层面上的函数声明</a>。在浏览器的普通代码中，在“所有地方”的函数声明都是合法的。这并不在 ES5 规范中（甚至是 ES3）！这是一种针对不同浏览器中不同语义的一种延伸。未来的 ECMAScript 版本很有希望制定一个新的，针对不在脚本或者函数层面进行函数声明的语法。<a href="http://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls">在严格模式下禁止这样的函数声明</a>对于将来 ECMAScript 版本的推出扫清了障碍：</p> <pre><code class="language-js">'use strict' if (true) { function f() { } // !!! 语法错误，SyntaxError: in strict mode code, functions may be declared only at top level or immediately within another function f() } for (var i = 0; i < 5; i++) { function f2() { } // !!! 语法错误，SyntaxError: in strict mode code, functions may be declared only at top level or immediately within another function f2() } function baz() { // 合法 function eit() { } // 同样合法 } </code></pre> <p>关于这块内容，可以看下这几个链接：</p> <ul> <li><a href="http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html#comment-268200">franky's comment</a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode#%E4%B8%BA%E6%9C%AA%E6%9D%A5%E7%9A%84ecmascript%E7%89%88%E6%9C%AC%E9%93%BA%E5%B9%B3%E9%81%93%E8%B7%AF">Paving the way for future ECMAScript versions</a></li> <li><a href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">New ES5 strict mode requirement: function statements not at top level of a program or function are prohibited</a></li> </ul> <h3>10. 保留字</h3> <p>为了向将来 JavaScript 的新版本过渡，严格模式新增了一些保留字：<code>implements</code>、<code>interface</code>、<code>let</code>、<code>package</code>、<code>private</code>、<code>protected</code>、<code>public</code>、<code>static</code>、<code>yield</code>。使用这些词作为变量名将会报错。</p> <pre><code class="language-js">function package(protected) { // 语法错误，Uncaught SyntaxError: Unexpected strict mode reserved word 'use strict' var implements // 语法错误 } </code></pre> <p>此外，ECMAScript 5 本身还规定了另一些保留字（<code>class</code>、<code>enum</code>、<code>export</code>、<code>extends</code>、<code>import</code>、<code>super</code>），以及各大浏览器自行增加的 <code>const</code> 保留字，也是不能作为变量名的。</p> <p>未完待续...</p>  <h2>五、参考链接</h2> <ul> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode MDN</a></li> <li><a href="http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html">JavaScript 严格模式详解（阮一峰）</a></li> </ul> </article> <article> <h1>正则表达式</h1> <p>Sun, 26 Feb 2023 10:56:20 GMT</p> <p></p> <p>正则表达式（Regular Expressions）是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 <code>RegExp</code> 的 <code>exec</code> 和 <code>test</code> 方法, 以及 <code>String</code> 的 <code>match</code>、<code>matchAll</code>、<code>replace</code>、<code>search</code> 和 <code>split</code> 方法。</p> <p>创建正则表达式的方式有两种：</p> <pre><code>// 正则表达式字面量 const re = /ab+c/ // 使用 RegExp 对象的构造函数 const re = new RegExp("ab+c") </code></pre> <h2>正则表达式中的特殊字符</h2> <ul> <li><code>\</code> 为转义，通常在 <code>\</code> 后面的字符不按原本的意义解释。如 <code>/b/</code> 匹配字符 <code>"b"</code>，当 b 前面添加反斜杠 <code>/\b/</code>，转义为匹配一个单词的边界。也可以对正则表达式功能字符的还原，<code>/a*/</code> 将匹配 <code>"a"</code>、<code>"aa"</code>、<code>"aaa"</code>等字符（<code>*</code> 匹配它前面元字符 0 次或多次，），加了反斜杠后 <code>/a\*/</code> 将只匹配 <code>"a*"</code>。</li> <li><code>^</code> 匹配一个输入或一行的开头，<code>/^a/</code> 匹配 <code>"an A"</code> 字符，而不匹配 <code>"An a"</code> 字符。</li> <li><code>$</code> 匹配一个输入或一行的结尾，<code>/a$/</code> 匹配 <code>"An a"</code> 字符，而不匹配 <code>"an A"</code> 字符。</li> <li><code>*</code> 匹配前面元字符 0 次或多次，<code>/ba*/</code> 匹配 <code>"b"</code>、<code>"ba"</code>、<code>"baa"</code>、<code>"baaa"</code> 等字符。</li> <li><code>+</code> 匹配前面元字符 1 次或多次，<code>/ba+/</code> 匹配 <code>"ba"</code>、<code>"baa"</code>、<code>"baaa"</code> 等字符。</li> <li><code>?</code> 匹配前面元元字符 0 次或 1 次，<code>/ba?/</code> 匹配 <code>"b"</code>、<code>"ba"</code> 字符。</li> <li><code>(x)</code> 匹配 <code>x</code>，保存 <code>x</code> 在 <code>$1...$9</code> 的变量中。</li> <li><code>x|y</code> 匹配 <code>x</code> 或 <code>y</code>。</li> <li><code>{n}</code> 精确匹配 n 次。</li> <li><code>{n,}</code> 精确匹配 n 次及以上。</li> <li><code>{m,n}</code> 精确匹配 <code>m ~ n</code> 次。</li> <li><code>[xyz]</code> 字符集，匹配这个集合中的任一一个字符（或元字符）。</li> <li><code>[^xyz]</code> 不匹配这个集合中的任一一个字符。</li> <li><code>[\b]</code> 匹配一个退格符。</li> <li><code>\b</code> 匹配一个单词的边界。</li> <li><code>\B</code> 匹配一个单词的非边界。</li> <li><code>\cX</code> 这里的 <code>X</code> 是一个控制符，<code>\cM/</code> 匹配 <code>Ctrl-M</code>。</li> <li><code>\d</code> 匹配一个数字字符，<code>/\d/</code> 相当于 <code>/[0-9]/</code>。</li> <li><code>\D</code> 匹配一个非数字字符，<code>/\D/</code> 相当于 <code>/[^0-9]/</code>。</li> <li><code>\n</code> 匹配一个换行符。</li> <li><code>\r</code> 匹配一个回车符。</li> <li><code>\s</code> 匹配一个空白字符，包括 <code>\n</code>、<code>\r</code>、<code>\f</code>、<code>\t</code>、<code>\v</code> 等，相当于 <code>/[\n\r\f\t\v]/</code>。</li> <li><code>\S</code> 匹配一个非空白字符，相当于 <code>/[^\n\r\f\t\v]/</code>。</li> <li><code>\t</code> 匹配一个制表符。</li> <li><code>\v</code> 匹配一个垂直制表符。</li> <li><code>\w</code> 匹配一个可以组成单词的字符（包括字母、数字或者下划线）。如 <code>[\w]</code> 匹配 <code>"$5.28"</code> 中的 <code>5</code>，相当于 <code>[a-zA-Z0-9]</code>。</li> <li><code>\W</code> 匹配一个不可以组成单词的字符，如 <code>[\W]</code> 匹配 <code>"$5.28"</code> 中的 <code>$</code>，相当于 <code>[^a-zA-Z0-9]</code>。</li> </ul> <h2>直接量字符</h2> <p>如果想在正则表达式中使用特殊的标点符号，必须在他们之前加上一个 <code>\</code> 进行转义。</p> <ul> <li><code>\/</code> 表示一个 <code>/</code> 直接量。</li> <li><code>\\</code> 表示一个 <code>\</code> 直接量。</li> <li><code>\.</code> 表示一个 <code>.</code> 直接量。</li> <li><code>\*</code> 表示一个 <code>*</code> 直接量。</li> <li><code>+</code> 表示一个 <code>+</code> 直接量。</li> <li><code>?</code> 表示一个 <code>?</code> 直接量。</li> <li><code>\|</code> 表示一个 <code>|</code> 直接量。</li> <li><code>$</code> 表示一个 <code>(</code> 直接量。</li> <li><code>$</code> 表示一个 <code>)</code> 直接量。</li> <li><code>\[</code> 表示一个 <code>[</code> 直接量。</li> <li><code>\]</code> 表示一个 <code>]</code> 直接量。</li> <li><code>\{</code> 表示一个 <code>{</code> 直接量。</li> <li><code>\}</code> 表示一个 <code>}</code> 直接量。</li> </ul> <h2>字符类</h2> <p>将单独的直接复放进中括号（<code>[...]</code>）内就可以组合成字符类。一个字符类和它所包含的任何一个字符都匹配。正式表达式 <code>/[abc]/</code> 和字母 <code>"a"</code>、<code>"b"</code>、<code>"c"</code> 中的任何一个都匹配，另外还可以定义否定字符类，这些类匹配的是除那些包含在中括号之内的字符外的所有字符。定义否定字符尖（<code>^</code>）时，要将一个 <code>^</code> 符号作为从左中括号算起的第一个字符。</p> <p>由于某些字符类非常常用，所以 JavaScript 的正则表达式语法包含一些特殊字符和转义序列来表示这些常用的类。比如 <code>\s</code> 匹配的是空白符（包括空格符、制表符、换行符等空白符），<code>\S</code> 匹配的是除空白符之外的任意字符。</p> <ul> <li><code>[...]</code> 匹配位于括号之内的任意字符。</li> <li><code>[^...]</code> 匹配不在括号内的任意字符。</li> <li><code>.</code> 匹配除换行符之外的任意字符，相当于 <code>[^\n]</code>。</li> <li><code>\w</code> 匹配任何单字字符，相当于 <code>[a-zA-Z0-9_]</code>。</li> <li><code>\W</code> 匹配任何非单字字符，相当于 <code>[^a-zA-Z0-9_]</code>。</li> <li><code>\s</code> 匹配任意空白符，相当于 <code>/[\n\r\f\t\v]/</code>。</li> <li><code>\S</code> 匹配任意非空白符，相当于 <code>/[^\n\r\f\t\v]/</code>。</li> <li><code>\d</code> 匹配任意数字，相当于 <code>[0-9]</code>。</li> <li><code>\D</code> 匹配除数字之外的任意字符，相当于 <code>[^0-9]</code>。</li> <li><code>\b</code> 匹配一个退格直接量（特例）。</li> </ul> <h2>复制</h2> <p>用以上的正则表达式语法，可以把两位数描述成 <code>/\d\d/</code>，把四位数描述成 <code>/\d\d\d\d/</code>，但是我们还没有一种方法可以用来描述具有任意多位数的数字或者是一个字符串，这个字符串由三个字符以及跟随在字母后的一位数字构成。这些复杂的模式使用的正则表达式语法指定了改表达式中每个元素要重复出现的次数。</p> <p>指定复制的字符总是出现在它们所作用的模式后面。由于某种复制类型相对常用。所以有一些特殊的字符专门用于表示它们。比如 <code>+</code> 匹配的就是复制前一模式一次或多次的模式下。</p> <p>先看写例子：</p> <ul> <li><code>/\d{2,4}/</code> 表示匹配 2 ~ 4 个的数字字符。</li> <li><code>/\w{3}\d?/</code> 表示匹配三个单字字符和一个任意的数字。</li> <li><code>\s+java\s+</code> 表示匹配字符串 <code>"java"</code>，并且该字符串前后可以有一个或多个空格。</li> <li><code>/[^"]*/</code> 表示匹配零个或多个非引号字符。</li> </ul> <p>复制字符的几种方式：</p> <ul> <li><code>{m,n}</code> 匹配前一项至少 m 次，但是不能超过 n 次。</li> <li><code>{n,}</code> 匹配前一项 n 次及以上。</li> <li><code>{n}</code> 匹配前一项恰好 n 次。</li> <li><code>?</code> 匹配前一项 0 次或 1 次，就是说前一项是可选的，相当于 <code>{0,1}</code>。</li> <li><code>+</code> 匹配前一项 1 次或多次，相当于 <code>{1,}</code>。</li> <li><code>*</code> 匹配前一项 0 次或多次，相当于 <code>{0,}</code>。</li> </ul> <h2>选择、分组、引用</h2> <p>正则表达式的语法还包括指定选择项，对子表达式分组和引用前一子表达式的特殊字符。字符 <code>|</code> 用于分隔供选择的字符，例如：<code>/ab|cd|ef/</code> 匹配的是 <code>"ab"</code> 或者是 <code>"cd"</code> 又或者是 <code>"ef"</code> 字符串。再比如：<code>/\d{3}|[a-z]{4}/</code> 匹配的是要么是一个三位数字，要么是四个小写字母。</p> <p>在正则表达式中，括号（<code>(...)</code>）具有几种作用：</p> <ol> <li> <p>它的主要作用是把单独的项目分组成子表达式，以便可以像处理一个独立的单元那种用 <code>*</code>、<code>+</code> 或 <code>?</code> 来处理那些项目。例如：<code>/java(script)?/</code> 匹配的是字符串 <code>"java"</code>，其后的既可以有 <code>"script"</code>，也可以没有。再比如，<code>/(ab|cd)+|ef/</code> 匹配的既可以是字符串 <code>"ef"</code>，也可以是字符串 <code>"ab"</code> 或者 <code>"cd"</code> 的一次或多次重复。</p> </li> <li> <p>括号的第二个用途是，在完整的模式中定义子模式。当一个正则表达式成功地和目标字符串相匹配是，可以从目标串中抽出和括号中的子模式相匹配的部分。例如，假定我们正在检索的模式是一个或多个字母后面跟随一位或多位数组，你们我们可以使用模式 <code>/[a-z]+\d+/</code>。但是由于假定我们真正关心的是每个匹配尾部的数字，那么如果我们将模式的数字部分放在括号中 <code>/[a-z]+(\d+)/</code>，我们就可以从所检索到的任何匹配中抽取数字了，之后我们会对此进行解析的。</p> </li> <li> <p>代括号的另一个用途是，允许我们在同一正则表达式的后面引用前面的子表达式。这是通过在字符串 <code>\</code> 后加一位或多位数字来实现的。数字指的是代括号的子表达式在正则表达式中的位置。例如：<code>\1</code> 引用的的是第一个代括号的子表达式，<code>\3</code> 引用的是第三个代括号的子表达式。注意，由于子表达式可以嵌套在其他子表达式中，所以它的位置是被计数的左括号的位置。</p> </li> </ol> <p>例如，在下面的正则表达式被指定为 <code>\2</code>：<code>/([Jj]ava[Ss]cript)\sis\s(fun\w*)/</code>，对正则表达式中前一子表达式的引用所指定的并不是那个子表达式，而是与那个模式相匹配的文本。这样，引用就不只是帮助你输入正则表达式的重复部分的快捷方式了，它还实施了一条规约，那就是一个字符串各个分离的部分包含的是完全相同的字符。例如：<code>/['"][^'"]['"]/</code> 匹配的就是位于单引号或者双引号之内的所有字符。但是它要求开始和结束的引号匹配。（例如两个都是双引号或者都是但引号）如果要求开始和结束的引号匹配，我们可以使用如下的引用：<code>/(['"])[^'"]*\1/</code>，<code>\1</code> 匹配的是第一个代括号的子表达式所匹配的模式。在这个例子中，它实施了一种规约，那就是开始的引号必须和结束的引号相匹配。注意，如果反斜杠后跟随的数字比代括号的子表达式数多，那么它就会被解析为一个十进制的转义序列，而不是一个引用。你可以坚持使用完整的三个字符来表示转义序列，这样就可以避免混淆了。例如 <code>\044</code>，而不是 <code>\44</code>。</p> <p>下面是正则表达式的选择、分组和引用字符：</p> <ul> <li><code>|</code> 选择：匹配的要么是该符号左边的子表达式，要么是它右边的子表达式。</li> <li><code>(...)</code> 分组：将几个项目分为一个单元，这个单元可由 <code>*</code>、<code>+</code>、<code>?</code> 和 <code>|</code> 等符号使用，而且还可以记住和这个组匹配的字符以供此后引用使用 <code>\n</code> 和第 <code>n</code> 个（注意这里的 <code>n</code> 是指数字）分组所匹配的字符相匹配。分组是括号中的子表达式。（可能是嵌套的）分组号是从左到右计数的左括号数。</li> </ul> <h2>通过标志进行高级搜索</h2> <p>正则表达式有六个<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions#%E9%80%9A%E8%BF%87%E6%A0%87%E5%BF%97%E8%BF%9B%E8%A1%8C%E9%AB%98%E7%BA%A7%E6%90%9C%E7%B4%A2">可选参数</a>（<code>flags</code>）允许全局和不分大小写搜索等。这些参数既可以单独使用，也能以任意顺序一起使用，并且被包含在正则表达式实例中。</p> <ul> <li><code>g</code> 全局搜索</li> <li><code>i</code> 不区分大小写搜索</li> <li><code>m</code> 多行搜索。</li> <li><code>s</code> 允许 <code>.</code> 匹配换行符。</li> <li><code>u</code> 使用 unicode 码的模式进行匹配。</li> <li><code>y</code> 执行“粘性（sticky）”搜索,匹配从目标字符串的当前位置开始。</li> </ul> <pre><code>// 正则表达式字面量 var re = /pattern/flags; // RegExp 构造函数 var re = new RegExp("pattern", "flags"); </code></pre> <h2>动态创建正则表达式</h2> <p>从用户输入等来源中动态地产生，就需要使用构造函数来创建正则表达式。</p> <pre><code class="language-js">// 假设需求是生成一个正则表达式：/temp/ // 此时我们手上有一个字符串 "temp" var str = 'temp'; // 这种方式是不对的，得到的只是一个 "/temp/" 字符串。 var re = '/' + str + '/'; // 应该是这样，才是正则表达式 var re = new RegExp(str); </code></pre> <p>未完待续...</p> <pre><code>\s 空白符 \S 非空白符 [\s\S]任意字符 [\s\S]* 0个到任意多个字符 [\s\S]*? 0个字符，匹配任何字符前的位置。 </code></pre> <h2>常用正则表达式</h2> <pre><code class="language-js">// 删除字符串前后第一个空格 str.replace(/(^\s*)|(\s*$)/g, '') // 删除字符串中所有空格 str.replace(/\s/g, '') </code></pre> <h2>需要转义的字符</h2> <p>需要转义的字符有：<code>\</code>、<code>.</code>、<code>*</code>、<code>^</code>、<code>&</code>、<code>[</code>、<code>]</code>、<code>{</code>、<code>}</code>、<code>?</code> 等。</p> <p>[ ] \ ^ $ . | ? * + ( )</p>  <h2>参考链接</h2> <ul> <li><a href="https://developer.mozilla.org/zh-cn/docs/web/javascript/guide/regular_expressions">正则表达式 MDN</a></li> <li><a href="https://www.cnblogs.com/mmzuo-798/p/7264093.html">JS 正则表达式大全</a></li> <li><a href="https://github.com/toFrankie/blog/issues/134">常用正则表达式</a></li> </ul> </article> <article> <h1>如何判断 JS 数组</h1> <p>Sun, 26 Feb 2023 10:55:21 GMT</p> <p></p> <h2>先说结论</h2> <p><strong>一律</strong>使用 ES5 提供的方法：</p> <pre><code class="language-js">Array.isArray() </code></pre> <p>非要降级考虑，那就：</p> <pre><code class="language-js">function isArray(val) { return Object.prototype.toString.call(val) === '[object Array]' } </code></pre> <blockquote> <p>其原理是通过 <code>Object.prototype.toString()</code> 判断对象的内部属性 <code>[[Class]]</code> 是否为 <code>"Array"</code>。</p> </blockquote> <h2>其他方法的缺陷</h2> <h3>typeof</h3> <p>要是 Function、String、Number、Undefined 等类型来说，它完全可以胜任。</p> <p>但判断 Array 类型不行的，因此不能用它来判断一个值是否为数组。</p> <pre><code class="language-js">const arr = [] console.log(typeof arr) // "object" // 同样地 console.log(typeof null) // "object" console.log(typeof {}) // "object" </code></pre> <h3>instanceof 和 constructor</h3> <p><code>instanceof</code> 用于检测构造函数的 <code>prototype</code> 属性是否出现在某个实例对象的原型链上，比如：</p> <pre><code class="language-js">const arr = [] console.log(arr instanceof Array) // true </code></pre> <p>使用 <code>constructor</code> 判断类型，比如：</p> <pre><code class="language-js">const arr = [] console.log(arr.constructor === Array) // true // 其他 // arr.__proto__.constructor === Array // true // arr.__proto__ === Array.prototype // true </code></pre> <p>在某些情况下是不准确的，比如：</p> <pre><code class="language-js">function Fn() {} Fn.prototype = new Array() const instance = new Fn() console.log(instance.constructor === Fn) // false console.log(instance.constructor === Array) // true // 此时 instance 应该是一个普通对象，而非数组，使用 constructor 判断是不合适的 </code></pre> <p>使用 instanceof 和 constructor 的局限性：</p> <blockquote> <p>使用和声明都必须是在当前页面，比如父页面引用了子页面，在子页面中声明了一个 <code>Array</code>，将其赋值给父页面的一个变量，那么此时做原型链的判断：<code>Array === object.constructor</code> 得到的是 <code>false</code>，原因如下：</p> <ol> <li><code>Array</code> 属于引用型数据，在传递过程中，仅仅是引用地址的传递。</li> <li>每个页面的 <code>Array</code> 原生对象所引用的地址是不一样的，在子页面声明的<code>Array</code> 所对应的构造函数是子页面的 <code>Array</code> 对象；父页面来进行判断，使用的 <code>Array</code> 并不等于子页面的 <code>Array</code>。</li> </ol> </blockquote> <blockquote> <p>附 <a href="https://2ality.com/2013/01/categorizing-values.html">Categorizing values in JavaScript</a> 一段原话： <code>Array.isArray()</code> exists because of one particular problem in browsers: each frame has its own global environment. An example: Given a frame A and a frame B (where either one can be the document). Code in frame A can pass a value to code in frame B. Then B code cannot use <code>instanceof Array</code> to check whether the value is an array, because its B <code>Array</code> is different from the A <code>Array</code> (of which the value could be an instance).</p> </blockquote> <p>示例：</p> <pre><code class="language-js">const iframe = document.createElement('iframe') document.body.appendChild(iframe) const xArray = window.frames[window.frames.length - 1].Array const xarr = new xArray() const arr = new Array() // 不同页面，结果并非我们所预期的 true，而是 false console.log(xarr instanceof Array) // false console.log(xarr.constructor === Array) // false // 同页面才是 true console.log(arr instanceof Array) // true console.log(arr.constructor === Array) // true </code></pre> </article> <article> <h1>URI、URL、URN 是什么？</h1> <p>Sun, 26 Feb 2023 10:54:08 GMT</p> <p></p> <h2>URI</h2> <p>URI：统一资源标识符（Uniform Resource Identifier）</p> <p>每个 web 服务器资源都有一个名字，服务器资源名被统称为统一资源标识符；URI 就像 Internet 的邮政地址，唯一地标识和定位世界各地的信息资源。URI 有两种形式，分别为 URL 和 URN。</p> <pre><code>ftp://ftp.is.co.za/rfc/rfc1808.txt http://www.ietf.org/rfc/rfc2396.txt ldap://[2001:db8::7]/c=GB?objectClass?one mailto:John.Doe@example.com news:comp.infosystems.www.servers.unix tel:+1-816-555-1212 telnet://192.0.2.16:80/ urn:oasis:names:specification:docbook:dtd:xml:4.1.2 </code></pre> <h2>URL</h2> <p>URL：统一资源定位符（Uniform Resource Locator）</p> <p>URL 是最常见的资源标识符，URL 描述了一台特定服务器上某资源的特定位置。它们可以明确说明如何从一个精准、固定的位置获取资源。</p> <pre><code>https://developer.mozilla.org https://developer.mozilla.org/en-US/docs/Learn/ https://developer.mozilla.org/en-US/search?q=URL https://tools.ietf.org/html/rfc2396#section-3.1 </code></pre> <h2>URN</h2> <p>URN：统一资源名称（Uniform Resource Name）</p> <p>URI 的第二种形式是统一资源名。URN 是作为特定内容的唯一名称使用的，与目前的资源所在地无关。如图书的编号（ISBN）urn:isbn:0451450523。</p> <p>要理解这三者的区别，不要 URI 与 URL 和 URN 放在同一个等级。</p> <h2>区别</h2> <p>URL 一定是 URI，但 URI 不一定是 URL，URI 还包括 URN。</p> <p>URL 通过描述资源的位置来标识资源，而 URN 是通过名字来标识资源的，与位置无关。</p> <h3>参考链接</h3> <ul> <li><a href="https://blog.csdn.net/qq_32595453/article/details/80563142">URI 和 URL 的区别比较与理解</a></li> <li><a href="https://www.zhihu.com/question/19557151/answer/1614646380">URL 和 URI 有什么不同?</a></li> </ul> </article> <article> <h1>详谈 JSON 与 JavaScript</h1> <p>Sun, 26 Feb 2023 10:53:12 GMT</p> <p></p> <p>JSON 在编程中无处不在。</p> <ul> <li>那么 JSON 是什么呢？</li> <li>跟我们的 JavaScript 有什么关系呢？</li> <li>在 JavaScript 中，我们如何处理 JSON 数据呢？</li> </ul> <h2>一、JSON</h2> <p>JSON（JavaScript Object Natation）是一种轻量级的数据交换格式。由于易于阅读、编写，以及便于机器解析与生成的特性，相比 XML，它更小、更快、更易解析，使得它成为理想的数据交换语言。完全独立于语言的一种文本格式。</p> <p>JSON 的两种结构：</p> <ul> <li><strong>“名称/值” 对的集合</strong>：不同语言中，它被理解成对象（object）、记录（record）、结构（struct）、字典（dictionary）、哈希表（hash table）、有键列表（keyed list）或者关联数组（associative array）。</li> <li><strong>值的有序列表</strong>：大部分语言中，它被理解成数组（array）。</li> </ul> <p>例如用以下 JSON 数据来描述一个人的信息：</p> <pre><code class="language-json">{ "name": "Frankie", "age": 20, "skills": ["Java", "JavaScript", "TypeScript"] } </code></pre> <p>注意，<strong>JavaScript 不是 JSON，JSON 也不是 JavaScript</strong>。但 JSON 与 JavaScript 是存在渊源的，JSON 的数据格式是从 JavaScript 对象中演变出来的。（从名称上可以体现）</p> <h2>二、JSON 与 JavaScript 的区别</h2> <p>JSON 是一种数据格式，也可以说是一种规范。JSON 是用于跨平台数据交流的，独立于语言和平台。而 JavaScript 对象是一个实例，存在于内存中。JavaScript 对象是没办法传输的，只有在被序列化为 JSON 字符串后才能传输。</p> <table> <thead> <tr> <th style="text-align:center">JavaScript 类型</th> <th style="text-align:left">JSON 的不同点</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">对象和数组</td> <td style="text-align:left">属性名称必须是双引号括起来的字符串；最后一个属性后不能有逗号</td> </tr> <tr> <td style="text-align:center">数值</td> <td style="text-align:left">禁止出现前导零（ <code>JSON.stringify()</code> 方法自动忽略前导零，而在 <code>JSON.parse()</code> 方法中将会抛出 SyntaxError）；如果有小数点，则后面至少跟着一位数字。</td> </tr> <tr> <td style="text-align:center">字符串</td> <td style="text-align:left">只有有限的一些字符可能会被转义；禁止某些控制字符； Unicode 行分隔符（<a href="http://unicode-table.com/cn/2028/">U+2028</a>）和段分隔符（<a href="http://unicode-table.com/cn/2029/">U+2029</a>）被允许 ; 字符串必须用双引号括起来。请参考下面的示例，可以看到 <code>JSON.parse()</code> 能够正常解析，但将其当作 JavaScript 解析时会抛出 <code>SyntaxError</code> 错误：</td> </tr> </tbody> </table> <pre><code>let code = '"\u2028\u2029"' JSON.parse(code) // 正常 eval(code) // 错误 </code></pre> <p>在 JavaScript 中，我们不能把以下对象叫做 JSON，如：</p> <pre><code class="language-js">// 这只是 JS 对象 var people = {} // 这跟 JSON 就更不沾边了，只是 JS 的对象 var people = { name: 'Frankie', age: 20 } // 这跟 JSON 就更不沾边了，只是 JS 的对象 var people = { 'name': 'Frankie', 'age': 20 } // 我们可以把这个称做：JSON 格式的 JS 对象 var people = { "name": "Frankie", "age": 20 } // 我们可以把这个称做：JSON 格式的字符串 var people = '{"name":"Frankie","age":20}' // 稍复杂的 JSON 格式的数组 var peopleArr = [ { "name": "Frankie", "age": 20 }, { "name": "Mandy", "age": 18 } ] // 稍复杂的 JSON 格式字符串 var peopleStr = '[{"name":"Frankie","age":20},{"name":"Mandy","age":18}]' </code></pre> <blockquote> <p>尽管 JSON 与严格的 JavaScript 对象字面量表示方式很相似，如果将 JavaScript 对象属性加上双引号就理解成 JSON 是不对的，它只是符合 JSON 的语法规则而已。JSON 与 JavaScript 对象本质上是完全不同的两个东西，就像“斑马”和“斑马线”一样。</p> </blockquote> <p>在 JavaScript 中，<code>JSON</code> 对象包含两个方法，用于解析的 <code>JSON.parse()</code> 和转换的 <code>JSON.stringify()</code> 方法。除了这两个方法，<code>JSON</code> 这个对象本身并没有其他作用，也不能被调用或者作为构造函数调用。</p> <h2>三、JSON.stringify()</h2> <p>将一个 JavaScript 对象或值转换为 JSON 字符串。</p> <pre><code class="language-js">JSON.stringify(value, replacer, space) </code></pre> <ul> <li> <p>参数 <code>value</code> ，是将要序列化成 JSON 字符串的值。</p> </li> <li> <p>参数 <code>replacer</code> （可选），如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数未提供（或者值为 <code>null</code>），则对象所有的属性都会被序列化。</p> </li> </ul> <pre><code class="language-js">const people = { name: 'Frankie', age: 20 } const peopleStr1 = JSON.stringify(people, ['name']) const peopleStr2 = JSON.stringify(people, (key, value) => { if (typeof value === 'string') { return undefined } return value }) console.log(peopleStr1) // '{"name":"Frankie"}' console.log(peopleStr2) // '{"age":20}' </code></pre> <ul> <li>参数 <code>space</code> （可选），指定缩进用的空白字符串，用于美化输出（pretty-print）。如果参数为<strong>数字</strong>，它表示有多少个空格，值大于 10 时，输出空格为 10，小于 1 则表示没有空格。如果参数为<strong>字符串</strong>，该字符串将被将被作为空格。如果参数没有提供（或者值为 <code>null</code>），将没有空格。注意，若使用非空字符串作为参数值，就不能被 <code>JSON.parse()</code> 解析了，会抛出 <code>SyntaxError</code> 错误。</li> </ul> <blockquote> <p>一般来说，参数 <code>replacer</code> 和 <code>space</code> 平常比较少用到。</p> </blockquote> <p>看示例：</p> <pre><code class="language-js">const symbol = Symbol() const func = () => { } const people = { name: 'Frankie', age: 20, birthday: new Date(), sex: undefined, home: null, say: func, [symbol]: 'This is Symbol', skills: ['', undefined, , 'JavaScript', undefined, symbol, func], course: { name: 'English', score: 90 }, prop1: NaN, prop2: Infinity, prop3: new Boolean(true) // or new String('abc') or new Number(10) } const replacer = (key, value) => { // 这里我其实没做什么处理，跟忽略 replacer 参数是一致的。 // 若符合某种条件不被序列化，return undefined 即可。 // 比如 if (typeof value === 'string') return undefined // 也可以通过该函数来看看序列化的执行顺序。 // console.log('key: ', key) // console.log('value: ', value) return value } // 序列化操作 const peopleStr = JSON.stringify(people, replacer) // '{"name":"Frankie","age":20,"birthday":"2021-01-17T10:24:39.333Z","home":null,"skills":["",null,null,"JavaScript",null,null,null],"course":{"name":"English","score":90},"prop1":null,"prop2":null,"prop3":true}' console.log(peopleStr) console.log(JSON.stringify(function(){})) // undefined console.log(JSON.stringify(undefined)) // undefined </code></pre> <p>结合以上示例，有以下特点：</p> <ul> <li><strong>非数组对象</strong>的属性不能保证以<strong>特定的顺序</strong>属性出现在序列化后的字符串中。（示例可能没体现出来）</li> <li>布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。（如 <code>prop3</code>）</li> <li><code>undefined</code>、任意的函数以及 <code>symbol</code> 值，在序列化过程中有两种不同的情况。若出现在<strong>非数组对象的属性值</strong>中，会被忽略；若出现在<strong>数组</strong>中，会被转换成 <code>null</code>。</li> <li>函数、<code>undefined</code> 被单独转换时，会返回 <code>undefined</code>。</li> <li>所有以 symbol 为属性键的属性都会被完全忽略掉，即便 <code>replacer</code> 参数中强制指定包含了它们。</li> <li>Date 日期调用了其内置的 <code>toJSON()</code> 方法将其转换成字符串（同 <code>Date.toISOString()</code>），因此会被当做字符串处理。</li> <li><code>NaN</code> 和 <code>Infinity</code> 格式的数值及 <code>null</code> 都会被当做 <code>null</code>。</li> <li>其他类型的对象，包括 <code>Map</code>、<code>Set</code>、<code>WeakMap</code>、<code>WeakSet</code>，仅会序列化可枚举的属性。</li> <li>转换值如果含有 <code>toJSON()</code> 方法，该方法定义什么值将被序列化。</li> <li>对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。</li> </ul> <p>针对最后两点举例说明：</p> <ul> <li>若对象本身实现了 <code>toJSON()</code> 方法，那么调用 <code>JSON.stringify()</code> 方法时，<code>JSON.stringify()</code> 会将这个对象的 <code>toJSON()</code> 方法的返回值作为参数去进行序列化。</li> </ul> <pre><code class="language-js">const people = { name: 'Frankie', age: 20, toJSON: () => { return { name: 'Mandy' } } } console.log(JSON.stringify(people)) // 结果是 {"name":"Mandy"}，而不是 {"name":"Frankie","age":20} // 需要注意的是，若对象的 toJSON 属性值不是函数的话，仍然是该对象作为参数进行序列化。 // 上面还提到 Date 对象本身内置了 toJSON() 方法，所以以下返回结果是： // "2021-01-17T09:40:08.302Z" console.log(JSON.stringify(new Date())) // 假如我去修改 Date 原型上的 toJSON 方法，结果会怎样呢？ Date.prototype.toJSON = function () { return '被改写了' } console.log(JSON.stringify(new Date())) // "被改写了" </code></pre> <ul> <li>对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。</li> </ul> <pre><code class="language-js">const foo = {} const bar = { b: foo } foo.a = bar console.log(foo) // 如果这时候对 foo 进行序列化操作，就会抛出错误。 JSON.stringify(foo) // Uncaught TypeError: Converting circular structure to JSON </code></pre> <p>foo 对象和 bar 对象会无限相互引用，可以看下 foo 打印结果如下，如果此时对 foo 进行序列化操作，就会抛出错误：<code>Uncaught TypeError: Converting circular structure to JSON</code>。</p> <p></p> <p>针对这个问题，看看别人的解决方法，看这里 <a href="https://github.com/douglascrockford/JSON-js">JSON-js</a>。具体用法是，先引入其中的 <code>cycle.js</code> 脚本，然后 <code>JSON.stringify(JSON.decycle(foo))</code> 就 OK 了。</p> <p><code>JSON.stringify()</code> 总结：</p> <ol> <li>若被序列化的对象，存在 <code>toJSON()</code> 方法，真正被序列化的其实是 <code>toJSON()</code> 方法的返回值。</li> <li>若提供了 <code>replacer</code> 参数，应用这个函数过滤器，传入的函数过滤器的值是第 1 步返回的值。</li> <li>对第 2 步返回的每个值，进行相应的序列化。</li> <li>如果提供了 <code>space</code> 参数，执行相应的格式化操作。</li> </ol> <h2>四、JSON.parse()</h2> <p><code>JSON.parse()</code> 方法用来解析 JSON 字符串，构造由字符串描述的 JavaScript 值或对象。提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)。</p> <pre><code>JSON.parse(text, reviver) </code></pre> <ul> <li> <p>参数 <code>text</code>，要被解析成 JavaScript 值的字符串。</p> </li> <li> <p>参数 <code>reviver</code>（可选）转换器，如果传入该参数(函数)，可以用来修改解析生成的原始值，调用时机在 parse 函数返回之前。</p> <p>如果指定了 <code>reviver</code> 函数，则解析出的 JavaScript 值（解析值）会经过一次转换后才将被最终返回（返回值）。更具体点讲就是：解析值本身以及它所包含的所有属性，会按照<strong>一定的顺序</strong>（从最最里层的属性开始，一级级往外，最终到达顶层，也就是解析值本身）分别的去调用 <code>reviver</code> 函数，在调用过程中，当前属性所属的对象会作为 <code>this</code> 值，当前属性名和属性值会分别作为第一个和第二个参数传入 <code>reviver</code> 中。如果 <code>reviver</code> 返回 <code>undefined</code>，则当前属性会从所属对象中删除，如果返回了其他值，则返回的值会成为当前属性新的属性值。</p> <p>当遍历到最顶层的值（解析值）时，传入 <code>reviver</code> 函数的参数会是空字符串 <code>""</code>（因为此时已经没有真正的属性）和当前的解析值（有可能已经被修改过了），当前的 <code>this</code> 值会是 <code>{"": 修改过的解析值}</code>，在编写 <code>reviver</code> 函数时，要注意到这个特例。（<strong>这个函数的遍历顺序依照：从最内层开始，按照层级顺序，依次向外遍历</strong>）</p> </li> </ul> <pre><code class="language-js">// JSON 字符串 const peopleStr = '{"name":"Frankie","age":20,"birthday":"2021-01-17T10:24:39.333Z","home":null,"skills":["",null,null,"JavaScript",null,null,null],"course":{"name":"English","score":90},"prop1":null,"prop2":null,"prop3":true}' // 若需输出 this 对象，不能使用箭头函数 const reviver = (key, value) => { // 可以通过该函数来看看序列化的执行顺序。 // console.log('key: ', key) // console.log('value: ', value) // 若删除某个属性，return undefined 即可。 // 比如 if (typeof value === 'string') return undefined // 如果到了最顶层，则直接返回属性值 if (key === '') return value // 数值类型，将属性值变为原来的 2 倍 if (typeof value === 'number') return value * 2 // 其他的原样解析 return value } const parseObj = JSON.parse(peopleStr, reviver) console.log(parseObj) </code></pre> <p>解析结果如下：</p> <pre><code class="language-json">{ "age": 40, "birthday": "2021-02-14T06:02:18.491Z", "course": { "name": "English", "score": 180 }, "home": null, "name": "Frankie", "prop1": null, "prop2": null, "prop3": true, "skills": ["", null, null, "JavaScript", null, null, null] } </code></pre> <h2>五、其他</h2> <p>针对 Line separator 和 Paragraph separator 的处理，可以看这里：<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#json.stringify%E7%94%A8%E4%BD%9C_javascript" title="Permalink to JSON.stringify用作 JavaScript">JSON.stringify 用作 JavaScript</a></p> <h2>六、拓展</h2> <p>根据 ECMA-262 标准定义，一个字符串可以包含任何东西，只要它不是一个引号，一个反斜线或者一个行终止符。</p> <p>以下被认为是行终止符：</p> <ul> <li><code>\u000A</code> - Line Feed</li> <li><code>\u000D</code> - Carriage Return</li> <li><code>\u2028</code> - Line separator</li> <li><code>\u2029</code> - Paragraph separator</li> </ul> <h2>七、参考链接</h2> <ul> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON MDN</a></li> <li><a href="http://www.json.org/json-zh.html">Introducing JSON</a></li> <li><a href="http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf">ECMA-404 The JSON Data Interchange Standard</a></li> </ul> </article> <article> <h1>JavaScript 获取二级域名的方法</h1> <p>Sun, 26 Feb 2023 10:52:32 GMT</p> <h2>背景</h2> <p>有个需求，将 cookie 设置到我们的二级域名上，在不同的项目都可以公用。</p> <h2>准备</h2> <ol> <li>一个完整的域名由二个或二个以上部分组成，各部分之间用英文的句号 <code>.</code> 来分隔</li> <li>在设置 cookie 时，如省略 domain 参数，那么它默认设置为当前域名</li> <li>domain 参数可以设置父域名以及当前域名。不能设置为其他域名，包括子域名也不行</li> <li>cookie 的作用域是 domain 本身以及 domain 下的所有子域名。(这里忽略 path 参数限制，当做 <code>/</code>)</li> </ol> <h2>思路</h2> <p>如何获取二级域名，以 <code>shortcuts.sspai.com</code> 为例：</p> <p>接着我们对 URL 进行拆分，按先后顺序对 <code>com</code>、<code>sspai.com</code>、<code>shortcuts.sspai.com</code> （以此类推）设置 cookie。倘若能设置 cookie 则说明域名是合法的，此时停止继续往下执行，直接返回结果 <code>sspai.com</code>，同时删掉该 cookie。</p> <h2>其他</h2> <ol> <li>需要注意的是，<code>baidu.com</code> 应属于二级域名。</li> <li>关于顶级域名、二级域名、三级域名等划分如理解有偏差，自行搜索。<a href="https://www.zhihu.com/question/29998374/answer/399176525">参考</a></li> <li>当前采用部分 ES6 语法，若需兼容 ES5 自行修改即可。</li> <li>还有一些比较实用的 JS <a href="https://github.com/tofrankie/utils">方法</a>，比如中文转拼音、身份证号码校验等。</li> </ol> <h2>实现</h2> <pre><code class="language-js">/** * 获取当前 URL 二级域名 * 如果当前是 IP 地址，则直接返回 IP Address */ function getSubdomain() { try { let subdomain = '' const key = `mh_${Math.random()}` const expiredDate = new Date(0) const { domain } = document const domainList = domain.split('.') const reg = new RegExp(`(^|;)\\s*${key}=12345`) const ipAddressReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/ // 若为 IP 地址、localhost，则直接返回 if (ipAddressReg.test(domain) || domain === 'localhost') { return domain } const urlItems = [] urlItems.unshift(domainList.pop()) while (domainList.length) { urlItems.unshift(domainList.pop()) subdomain = urlItems.join('.') const cookie = `${key}=12345;domain=.${subdomain}` document.cookie = cookie if (reg.test(document.cookie)) { document.cookie = `${cookie};expires=${expiredDate}` break } } return subdomain || document.domain } catch (e) { return document.domain } } </code></pre> <h2>参考链接</h2> <ul> <li><a href="https://developer.aliyun.com/article/195912">前端 JS 如何获取主域名(根域名)</a></li> </ul> </article> <article> <h1>Date 对象</h1> <p>Sun, 26 Feb 2023 10:51:47 GMT</p> <p>关于 Date 对象，有几个方法总是记不住或者记混淆的，所以写篇文章整理一下。</p> <h2>Date</h2> <p>在 ECMAScript 中，Date 类型使用自世界标准时间（UTC）<strong>1970-1-1 00:00:00</strong> 开始经过的毫秒数来保存日期。</p> <pre><code class="language-js">// 获取起始时间 const date = new Date(0) // Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间) </code></pre> <p>创建 Date 两种方式：</p> <pre><code class="language-js">// 字符串类型 const date = Date() console.log(typeof date) // string // 对象类型（常用） const date = new Date() console.log(typeof date) // object </code></pre> <h2>Date Get 方法</h2> <p>下面以 2020 年 12 月 03 日为例：</p> <ul> <li> <p><code>getTime()</code> 返回 1970 年 1 月 1 日零时至今的毫秒数。</p> </li> <li> <p><code>getFullYear()</code> 返回 4 位数的年份（如 2020）。</p> </li> <li> <p><code>getMonth()</code> 返回月份，值为 <code>0~11</code> 分别表示 1 月到 12 月。<strong>所以一般获取月份都要加一</strong>。</p> </li> <li> <p><code>getDate()</code> 返回一个月的某天，值为 <code>1~31</code> 分别表示 1日到 31 日。</p> </li> <li> <p><code>getDay()</code> 返回一周的某天，值为 <code>0~6</code> 分别表示周日、周一到周六。</p> </li> <li> <p><code>getHours()</code> 返回小时数，值为 <code>0 ~ 23</code>。</p> </li> <li> <p><code>getMinutes()</code> 返回分钟数，值为 <code>0 ~ 59</code>。</p> </li> <li> <p><code>getSeconds()</code> 返回秒数，值为 <code>0 ~ 59</code>。</p> </li> <li> <p><code>getMilliseconds()</code> 返回毫秒数，值为 <code>0 ~ 999</code>。</p> </li> </ul> <blockquote> <p>**<code>getYear()</code> 方法在 Web 标准中已被删除，尽管某些浏览器仍然支持它，但建议不要用了！**因为它在不同浏览器的表现不一样。像 Chrome、Safari、FireFox 返回的是 <code>当前年份 - 1900</code> 的值。而在 IE 浏览器上，当当前年份大于等于 2000 时，返回值是当前 4 位数年份。 👉 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getYear">Date.getYear()</a></p> </blockquote> <h2>Date Set 方法</h2> <ul> <li> <p><code>setTime()</code> 以毫秒设置 Date 对象（参数：<code>毫秒数</code>）</p> </li> <li> <p><code>setDate()</code> 根据本地时间设置 Date 对象中月的某一天（合理参数：<code>1 ~ 31</code>，分别表示 1 ~ 31 日）</p> <blockquote> <p>如果参数超出合理范围，会相对应的更新 Date 对象。</p> <ul> <li>参数为 <code>0</code> 时，则设置为<strong>上个月的最后一天</strong>。</li> <li>参数为 <code>负数</code> 时，则设置为上个月最后一天往前数这个负数绝对值天数后的日期。例如：<code>-1</code> 会设置为<strong>上月最后一天的前一天</strong>。</li> <li>参数为 <code>超过当前月最大的天数</code> 时，则<strong>超出天数</strong>（<code>参数值 - 当前月天数</code>）设置为下个月对应日期。例如：当前 Date 为 4 月，当参数为 32 时，则日期被设置为 5 月 2 日。</li> </ul> </blockquote> </li> </ul> <blockquote> <p>下列 Set 方法同理。</p> </blockquote> <ul> <li> <p><code>setMonth()</code> 根据本地时间设置 Date 对象中月份（参数：<code>0 ~ 11</code>，分别表示 1 ~ 12 月份）</p> </li> <li> <p><code>setFullYear()</code> 根据本地时间设置 Date 对象中的年份（参数：<code>4 位数字年份</code>）</p> <blockquote> <p>同样 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/setYear">setYear()</a> 已从 Web 标准中删除，不建议使用。</p> </blockquote> </li> <li> <p><code>setMilliseconds()</code> 根据本地时间设置 Date 对象中的毫秒数（参数：<code>0 ~ 999</code>）</p> <p>超出合理范围，日期对象的时间会相应地更更新。例如 1005，秒数加 1，毫秒数为 5。</p> </li> <li> <p><code>setSeconds()</code> 根据本地时间设置 Date 对象中的秒数（参数：<code>0 ~ 59</code>）</p> <p>超出合理范围，日期对象的时间会相应地更更新。例如 100，分钟数加 1，秒数为 40。</p> </li> <li> <p><code>setMinutes()</code> 根据本地时间设置 Date 对象中的秒数（参数：<code>0 ~ 59</code>）</p> <p>超出合理范围，日期对象的时间会相应地更更新。例如 60，小时数加 1，秒数为 0。</p> </li> <li> <p><code>setHours()</code> 根据本地时间设置 Date 对象中的小时数（参数：<code>0 ~ 23</code>）</p> <p>超出合理范围，日期对象的时间会相应地更更新。例如 24，天数加 1，小时数为 0。</p> </li> </ul> <h2>UTC 时间</h2> <p>上述所讲的 Get 和 Set 方法是针对本地时区时间去获取、设置时间的。而 Date 同样提供了获取、设置 UTC 时间，方法如：<code>getUTCMonth()</code>、<code>setUTCMonth()</code> 等等。实践过程中，比较少涉及 UTC 时间，所以不展开赘述。<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth">可以偷偷点这里去了解。</a></p> <h2>Date 其他方法</h2> <ul> <li> <p><code>Date.now()</code></p> <p>返回自 1970-1-1 00:00:00（UTC）到当前时间的毫秒数。</p> </li> <li> <p><code>Date.prototype.toString()</code>、<code>Date.prototype.toTimeString()</code>、<code>Date.prototype.toDateString()</code></p> <p>返回值是以美式英语和人类易读的形式返回日期对象的格式化字符串。该字符串由<strong>日期部分</strong>（年月日）和<strong>时间部分</strong>（时分秒及时区）组成。</p> </li> </ul> <pre><code class="language-js">const date = new Date() date.toString() // "Thu Dec 03 2020 18:19:17 GMT+0800 (中国标准时间)" date.toDateString() // "Thu Dec 03 2020" date.toTimeString() // "18:19:17 GMT+0800 (中国标准时间)" </code></pre> <ul> <li><code>Date.parse()</code>、<code>Date.prototype.getTime()</code>、<code>Date.prototype.valueOf()</code> 它们都返回 1970-1-1 00:00:00（UTC）到指定日期的毫秒数。但是它们还是有区别的。 <blockquote> <p>前者精确到<strong>秒</strong>，而后两者是精确到<strong>毫秒</strong>。</p> </blockquote> </li> </ul> <pre><code class="language-js">const date = new Date('5/24/2020') date.setMilliseconds(45) // 设置毫秒数 console.log(date.getTime()) // 1590249600045 console.log(date.valueOf()) // 1590249600045 console.log(Date.parse(date)) // 1590249600000 </code></pre> <h2>兼容性</h2> <p>类似 <code>new Date('xxxx/xx/xx xx:xx:xx')</code> 形式的时间对象在 IOS 和 Andriod 系统上都可以被正确的识别，而类似 <code>new Date('xxxx-xx-xx xx:xx:xx')</code> 形式的时间对象在 iOS 系统上无法被正确的识别，需要做一层转化。</p> <pre><code class="language-js">const date = new Date('xxxx-xx-xx xx:xx:xx'.replace(/-/g, '/')) </code></pre> <h2>UTC vs GMT</h2> <ul> <li>UTC 世界协调时间 Greenwich Mean Time</li> <li>GMT 格林威治标准时间 Universal Time Coordinated</li> </ul> <p>详见 <a href="https://www.cnblogs.com/tosee/p/5538007.html">GMT 与 UTC 简介</a></p> <h2>参考链接</h2> <ul> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date">MDN Date</a></li> <li><a href="https://juejin.cn/post/6844903941390467080">日期相关 Date</a></li> <li><a href="https://www.cnblogs.com/tosee/p/5538007.html">GMT 与 UTC 简介</a></li> </ul> </article> <article> <h1>数组的高阶函数 Array.prototype.reduce</h1> <p>Sun, 26 Feb 2023 10:50:14 GMT</p> <h2>一、背景</h2> <p>最近在写 React 系列文章，其中写到 Redux 的时候（<a href="https://github.com/tofrankie/blog/issues/62">这里</a>），提到了一个叫做 <code>compose</code> 的高阶函数，它里面用到的就是 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce">Array.prototype.reduce</a> 方法。它的源码如下：</p> <pre><code class="language-js">// https://github.com/reduxjs/redux/blob/4.x/src/compose.js export default function compose(...funcs) { if (funcs.length === 0) { return arg => arg } if (funcs.length === 1) { return funcs[0] } return funcs.reduce((a, b) => (...args) => a(b(...args))) } </code></pre> <p>其实类似的组合函数，很多都是使用到 <code>Array.prototype.reduce</code> 方法。在此之前，平时比较少用到它，就没好好整理过知识点，但最近我认为，这是必须掌握而且用起来的方法。</p> <p>To be continue...</p> <h2>二、reduce 方法</h2> <p>它是 ES5 提供的一个数组原生的方法，语法如下：</p> <pre><code class="language-js">arr.reduce(reducer, [initialValue]) </code></pre> <p>参数：</p> <ul> <li> <p><strong>reducer</strong>：是执行数组中每个值（如果没有提供 <code>initialValue</code> 则第一个值除外）的函数。</p> </li> <li> <p><strong>initialValue</strong>（可选）：作为第一次调用 <code>reducer</code> 函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 <code>reduce</code> 方法将报错。</p> </li> </ul> <p>返回值：</p> <p>函数累计处理的结果</p> <pre><code class="language-js">const arr1 = [1, 2, 3, 4] const arr2 = [] const arr3 = new Array(10) const reducer = (acc, cur) => { console.log(`acc: ${acc}, cur: ${cur}`) return acc + cur } // (1) 是否含初始值的区别 const sum1 = arr1.reduce(reducer) // 循环三次（reduce没有初始值，数组第一项被作为 acc 的初始值） const sum2 = arr1.reduce(reducer, 0) // 循环四次 // (2) 空数组访问 reduce 方法，必须传初始值，否则报错 const sum3 = arr2.reduce(reducer, 0) // 初始值 0 作为返回结果，且不执行 reducer const sum4 = arr2.reduce(reducer) // 运行报错 // (3) 同理 const sum5 = arr3.reduce(reducer, 0) // 初始值 0 作为返回结果，从未被赋值的元素不执行 reducer const sum6 = arr3.reduce(reducer) // 运行报错 console.log(sum1, sum2, sum3, sum4, sum5, sum6) </code></pre> <h2>三、reducer 函数</h2> <pre><code class="language-js">arr.reduce(reducer(accumulator, currentValue, index, array), initialValue) </code></pre> <p>四个参数：</p> <ul> <li> <p><strong>accumulator</strong>：累计器回调的返回值。它是上一次调用回调时返回的累计值。若它是第一次执行，它的值就是 <code>initialValue</code> 或者数组的第一项（结合上面的理解）。<strong>千万不要被它的命名吓到，如果真是这样，就把它当做参数 <code>a</code> 或 <code>b</code> 或 <code>c</code> 看待，因为它只是一个存储之前执行结果的变量而已。</strong></p> </li> <li> <p><strong>currentValue</strong>：当前正在遍历的数组元素。</p> </li> <li> <p><strong>index</strong>（可选）：当前正在遍历的数组元素的索引。若提供了 <code>initialValue</code>，则起始索引是 <code>0</code>，否则从索引 <code>1</code> 起始。</p> </li> <li> <p><strong>array</strong>（可选）：调用 <code>reduce()</code> 的数组</p> </li> </ul> <h2>四、MDN 官方描述</h2> <p><code>reduce</code> 为数组中的每一个元素依次执行 <code>reducer</code> 函数，<strong>不包括数组中被删除或从未被赋值的元素</strong>，接受四个参数：</p> <ul> <li><code>accumulator 累计器</code></li> <li><code>currentValue 当前值</code></li> <li><code>currentIndex 当前索引</code></li> <li><code>array 数组</code></li> </ul> <p>回调函数第一次执行时，<code>accumulator</code> 和 <code>currentValue</code> 的取值有两种情况：</p> <ol> <li>如果调用 <code>reduce()</code> 时提供了 <code>initialValue</code>，<code>accumulator</code> 取值为 <code>initialValue</code>，<code>currentValue</code> 取数组中的第一个值；</li> <li>如果没有提供 <code>initialValue</code>，那么 <code>accumulator</code> 取数组中的第一个值，<code>currentValue</code> 取数组中的第二个值。</li> </ol> <p><strong>注意：如果没有提供 <code>initialValue</code>，<code>reduce</code> 会从索引 <code>1</code> 的地方开始执行 <code>reducer</code> 方法，跳过第一个索引。如果提供 <code>initialValue</code>，从索引 <code>0</code> 开始。</strong></p> <p>如果数组为空且没有提供 <code>initialValue</code>，会抛出 <code>TypeError</code>。如果数组仅有一个元素（无论位置如何）并且没有提供 <code>initialValue</code>，或者有提供 <code>initialValue</code> 但是数组为空，那么此唯一值将被返回并且 <code>reducer</code> 不会被执行。</p> <blockquote> <p>这一小节跟上面的是有重复的。</p> </blockquote> <p>就本节内容，举例说明一下：</p> <pre><code class="language-js">// 在 Array 原型上添加一个 delete 方法：用于删除数组某项 Array.prototype.delete = function (item) { for (let i = 0; i < this.length; i++) { if (this[i] === item) { this.splice(i, 1) return this } } return this } const arr1 = new Array(10) const arr2 = [1, 2, undefined, null] const arr3 = [1, 2, 3, 4] const reducer = (acc, cur, index, arr) => { // 删除 arr3 数组的第二项 if (index === 0 && arr === arr3) arr.delete(2) return `${acc} - ${cur}` } const sum1 = arr1.reduce(reducer, 0) // 返回：0 const sum2 = arr2.reduce(reducer, 0) // 返回：0 - 1 - 2 - undefined - null const sum3 = arr3.reduce(reducer, 0) // 返回：0 - 1 - 3 - 4 // 结论： // 1. 空项（未被赋值项）不执行 reducer ，而 undefined、null 会执行 reducer // 2. 被删除项，不执行 reducer // PS: 由于我经常被各种方法对 undefined、null、empty（空项）执不执行困扰，所以我就全列举出来了。 </code></pre> <h2>五、应用场景</h2> <p>未完待续...</p> </article> <article> <h1>JavaScript ASI 机制详解，不用再纠结分号问题</h1> <p>Sun, 26 Feb 2023 10:43:12 GMT</p> <h2>前言</h2> <p>关于要不要加分号的问题，其实有很多争论！有的坚持加分号，而有的不喜欢加分号...但是无论那种风格，都不能百分百避免某些特殊情况产生的问题，究其根本就是因为对 JavaScript 解析和 ASI 规则的不了解。</p> <p>对于此问题，看看几位大佬是怎么说的：</p> <ul> <li><a href="https://www.zhihu.com/question/20298345/answer/49551142">尤雨溪</a></li> <li><a href="https://www.zhihu.com/question/20298345/answer/14670020">贺师俊</a></li> </ul> <blockquote> <p>所有直觉性的 “当然应该加分号” 都是保守的、未经深入思考的草率结论。</p> </blockquote> <blockquote> <p>个人立场是偏向 semicolon-less 风格，可能是强迫症使然，还有加了也避免不了特殊情况。</p> </blockquote> <h2>ASI 是什么？</h2> <p>按照 ECMAScript 标准，一些<strong>特定语句</strong>（statement）必须以分号结尾。分号代表这段语句的终止。但是有时候为了方便，这些分号是有可以省略的。这种情况下解析器会自己判断语句该在哪里终止。这种行为被叫做「<strong>自动插入分号</strong>」，简称 <strong>ASI</strong>（<a href="http://www.ecma-international.org/ecma-262/6.0/index.html#sec-automatic-semicolon-insertion">Automatic Semicolon Insertion</a>）。</p> <blockquote> <p>实际上分号并没有真的被插入，只是便于解释的形象说法。</p> </blockquote> <p>这些特定的语句有：</p> <ul> <li><code>空语句</code></li> <li><code>let</code></li> <li><code>const</code></li> <li><code>import</code></li> <li><code>export</code></li> <li><code>变量赋值</code></li> <li><code>表达式</code></li> <li><code>dubugger</code></li> <li><code>continue</code></li> <li><code>break</code></li> <li><code>return</code></li> <li><code>throw</code></li> </ul> <p>ASI 会按照一定的规则去判断，应该在哪里插入分号。但在此之前，先了解一下 JavaScript 是如何解析代码的。</p> <h2>Token</h2> <p>解析器在解析代码时，会把代码分成很多 <code>token</code>，一个 <code>token</code> 相当于一小段有特定意义的语法片段。</p> <p>看例子：</p> <pre><code class="language-js">var a = 12; </code></pre> <p>通过 <a href="https://esprima.org/demo/parse.html#">Esprima Parser</a> 可以看到被拆分为多个 <code>token</code>。</p> <pre><code class="language-json">[ { "type": "Keyword", "value": "var" }, { "type": "Identifier", "value": "a" }, { "type": "Punctuator", "value": "=" }, { "type": "Numeric", "value": "12" }, { "type": "Punctuator", "value": ";" } ] </code></pre> <p>以上变量声明语句可以分成五个 <code>token</code>：</p> <ul> <li><code>var</code> 关键字</li> <li><code>a</code> 标识符</li> <li><code>=</code> 标点符号</li> <li><code>12</code> 数字</li> <li><code>;</code> 标点符号</li> </ul> <p>解析器在解析语句时，会一个一个地读入 <code>token</code> 尝试构成给一个完整的语句（statement），直到碰到特定情况（例如语法规定的终止）才会认为这个语句结束了。这个例子中的终止符就是<strong>分号</strong>。用 <code>token</code> 构成语句的过程类似于正则里的贪婪匹配，解释器总是试图用尽可能多的 <code>token</code> 构成语句。</p> <p><strong>敲重点！！！</strong></p> <p>任意 <code>token</code> 之间都可以插入一个或多个换行符（Line Terminator），这完全不会影响 JavaScript 的解析。</p> <pre><code class="language-js">var a = // 假设这里有 N 个换行符 12 ; </code></pre> <p>上面的代码，跟之前单行 <code>var a = 12;</code> 是等价的。这个特性可以让开发者通过增加代码的可读性，更灵活地组织语言风格。平时写的跨多行数组、字符串拼接、链式调用等都属于这一类。</p> <p>当然了，在省略分号的风格中，这种特性会导致一些意外的情况。举个例子：</p> <pre><code class="language-js">var a , b = 12 , hi = 2 , g = {exec: function() { return 3 }} a = b /hi/g.exec('hi') console.log(a) // 打印出 2, 因为代码会被解析成： // a = b / hi / g.exec('hi'); // a = 12 / 2 / 3 </code></pre> <p>以上例子，以 <code>/</code> 开头的正则表达式被解析器理解成除法运算，所以打印结果是 <code>2</code>。</p> <p>其实，这不是省略分号风格的错误，而是开发者没有理解 JavaScript 解析器的工作原理。如果你偏向于省略分号的，那更要理解 ASI 的原理了。</p> <h2>ASI 规则</h2> <p>ECMAScript 标准定义的 ASI 包括<strong>三条规定</strong>和<strong>两条例外</strong>。</p> <h3>三条规则</h3> <ol> <li>解析器从左往右解析代码（读入 <code>token</code>），当碰到一个不能构成合法语句的 <code>token</code> 时，他会在以下几种情况中，在该 <code>token</code> 之前插入分号，此时不合群的 <code>token</code> 被称为<code>违规 token</code> （<code>offending token</code>） <ul> <li>1.1 如果这个 <code>token</code> 跟上一个 <code>token</code> 之间有至少一个换行。</li> <li>1.2 如果这个 <code>token</code> 是 <code>}</code>。</li> <li>1.3 如果前一个 <code>token</code> 是 <code>)</code> 它会试图把签名的 <code>token</code> 理解成 <code>do-while</code> 语句并插入分号。</li> </ul> </li> <li>当解析到文件末尾发现语法还是无法构成合法的语句，就会在文件末尾插入分号。</li> <li>当解析碰到 <code>restricted production</code> 的语法（比如 <code>return</code>），并且在 <code>restricted production </code>规定的 <code>[no LineTerminator here]</code> 的地方发现换行，那么换行的地方就会被插入分号。</li> </ol> <h3>两个例外</h3> <ol> <li>分号不能被解析成空语句。</li> <li>分号不能被解析成 <code>for</code> 语句的两个分号之一。</li> </ol> <p>到这里，好像规则挺晦涩的。先别慌，看完下面的例子就能明白其中的含义了。</p> <h2>举例说明</h2> <p>就以上规则，举例说明助于理解。</p> <h3>例一：换行</h3> <pre><code class="language-js">a b </code></pre> <p>解析器一个一个读取 <code>token</code>，但读到第二个 <code>token b</code> 时，它就发现没法构成合法的语句，然后它发现 <code>token b</code> 和上一个 <code>token a</code> 是有换行的，于是按照 <code>规则 1.1</code> 的处理，在 <code>token b</code> 之前插入分号变成 <code>a\n;b</code>，这样语法就合法了。接着继续读取 <code>token</code>，这时读到文件末尾，<code>token b</code> 还是不能构成合法的语句，这是按照 <code>规则 2</code> 处理，在末尾插入分号终止。故得到：</p> <pre><code class="language-js">a ;b; </code></pre> <h3>例二：大括号</h3> <pre><code class="language-js">{ a } b </code></pre> <p>解析器仍然一个一个读取 <code>token</code>，读到 <code>token }</code> 时，它发现 <code>{ a }</code> 是不合法的，因为 <code>a</code> 是表达式，它必须以分号结尾。但是当前 <code>token</code> 是 <code>}</code>，所以按照 <code>规则 1.2</code> 处理，他在 <code>}</code> 前面插入分号变成 <code>{ a; }</code>，接着往后读取 <code>token b</code>，按照 <code>规则 2</code> 给 <code>b</code> 加上分号。故得到：</p> <pre><code class="language-js">{ a; } b; </code></pre> <blockquote> <p>另外，也许有人会认为是 <code>{ a; };</code> ，但不是这样的。因为 <code>{...}</code> 属于块语句，而按照定义块语句是不需要分号结尾的，不管是不是在一行。因为块语句也被用在其他地方（比如函数声明），所以下面代码是完全合法的，不需要任何的分号。</p> </blockquote> <pre><code class="language-js">function a() {} function b() {} </code></pre> <h3>例三：do-while 语句</h3> <p>这个是为了解释 <code>规则 1.3</code>，这是最绕的地方。</p> <pre><code class="language-js">do a; while(b) c </code></pre> <p>这例子种解析到 <code>token c</code> 的时候就不对了。这里既没有 <code>换行</code>，也没有 <code>}</code>，但 <code>token c</code> 前面是 <code>token )</code> ，所以解析器把之前的 <code>token</code> 组成一个语句，并判断是否为 <code>do-while</code> 语句，结果正好是的，于是自动插入分号变成 <code>do a; whiile(b);</code>，这种给 <code>token c</code> 加上分号。故得到：</p> <pre><code class="language-js">do a; while(b); c; </code></pre> <p>简单来说，<code>do-while</code> 后面的分号是自动插入的。但是如果其他以 <code>)</code> 结尾的情况就不行了。<code>规则 1.3</code> 就是为 <code>do-while</code> 量身定做的。</p> <h3>例四：return</h3> <pre><code class="language-js">return a </code></pre> <p>我们都知道 <code>return</code> 和 <code>返回值</code> 之间不能换行，因为上面代码会解析成：</p> <pre><code class="language-js">return; a; </code></pre> <p>但为什么不能换行呢？是因为 <code>return</code> 语句就是一个 <code>restricted production</code> 语法。<code>restricted production</code> 是一组有严格限定的语法的统称，这些语法都是在某个地方不能换行的，不能换行的地方会被标注 <code>[no LineTermiator here]</code>。</p> <p>比如 ECMAScript 的 <code>return</code> 语法定义如下：</p> <pre><code class="language-js">return [no LineTerminator here] Expression; </code></pre> <p><strong>这表示 <code>return</code> 跟表达式之间是不允许换行的（但后面的表达式内部可以换行）</strong>。如果这个地方恰好有换行，ASI 就会自动插入分号，这就是 <code>规则 3</code> 的含义。</p> <p>刚才我们说了 <code>restricted production</code> 是一组语法的统称，它一共包含下面几个语法：</p> <ul> <li>后缀表达式 <code>++</code> 和 <code>--</code></li> <li><code>return</code></li> <li><code>continue</code></li> <li><code>break</code></li> <li><code>throw</code></li> <li>ES6 的箭头函数（参数和箭头之间不能换行）</li> <li><code>yield</code></li> </ul> <p>这些无需死记，因为按照一般的书写习惯，几乎没有人会这样换行的。顺带一提，<code>continue</code> 和 <code>break</code> 后面是可以接 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/break">label</a> 的。但这不在本文讨论范围内，有兴趣自行探索。</p> <h3>例五：后缀表达式</h3> <pre><code class="language-js">a ++ b </code></pre> <p>解析器读到 <code>token ++</code> 时发现语句不合法（注意：<code>++</code> 不是两个 <code>token</code>，而是一个）。因为后缀表达式是不允许换行的。换句话说，换行的都不是后缀表达式，所以它只能按照 <code>规则 1.1</code> 在 <code>token ++</code> 前面插入分号来结束语句 <code>a</code>，然后继续执行，因为前缀表达式并不是 <code>restricted production</code>，所以 <code>++</code> 和 <code>b</code> 可以组成一条语句，然后按照 <code>规则 2</code> 在末尾加上分号。故得到：</p> <pre><code class="language-js">a ;++ b; </code></pre> <h3>例六：空语句</h3> <pre><code class="language-js">if (a) else b </code></pre> <p>解析器解析到 <code>token else</code> 时发现不合法（ <code>else</code> 是不能跟在 <code>if</code> 语句头后面的），本来按照 <code>规则 1.1</code>，它应该加上分号变成 <code>if (a)\n;</code>，但是这样 <code>;</code> 就变成空语句了，所以按照 <code>例外 1</code>，这个分号不能加，程序在 <code>else</code> 处抛异常结束。Node.js 的运行结果：</p> <pre><code class="language-js">else b ^^^^ SyntaxError: Unexpected token else </code></pre> <p>而以下这样语法是正确的。</p> <pre><code class="language-js">if (a); else b </code></pre> <h3>例七：for 语句</h3> <pre><code class="language-js">for(a; b ) </code></pre> <p>解析器读到 <code>token )</code> 时发现语法不合法，本来换行可以自动插入分号，但是按照 <code>例外 2</code>，不能为 <code>for</code> 头部自动插入分号，于是程序在 <code>)</code> 处抛异常结束。Node.js 运行结果如下：</p> <pre><code class="language-js">) ^ SyntaxError: Unexpected token ) </code></pre> <h2>如何手动测试 ASI</h2> <p>我们很难有办法去测试 ASI 是不是如预期那样工作的，只能看到代码最终执行结果是对是错。ASI 也没有手动打开或者关掉去对比结果。但我们可以通过对比解析器生成的 tree 是否一致来判断 ASI 插入的分号是不是跟我们预期的一致。这点可以用 <a href="https://esprima.org/demo/parse.html#">Esprima Parser</a> 验证。</p> <p>举个例子：</p> <pre><code class="language-js">do a; while(b) c </code></pre> <p>Esprima 解析的 Syntax 如下所示（不需要看懂，记住大概样子就好）：</p> <pre><code class="language-json">{ "type": "Program", "body": [ { "type": "DoWhileStatement", "body": { "type": "ExpressionStatement", "expression": { "type": "Identifier", "name": "a" } }, "test": { "type": "Identifier", "name": "b" } }, { "type": "ExpressionStatement", "expression": { "type": "Identifier", "name": "c" } } ], "sourceType": "script" } </code></pre> <p>然后我们主动加上分号，输入进去：</p> <pre><code class="language-js">do a; while(b); c; </code></pre> <p>你就会发现 <code>do a; while(b) c</code> 和 <code>do a; while(b); c;</code> 生成的 Syntax 是一致的。这说明解析器对这两段代码解析过程是一致的，我们并没有加入任何多余的分号。</p> <p>然后试试这个多余分号的版本：</p> <pre><code class="language-js">do a; while(b); c;; // 结尾多一个分号 </code></pre> <p>它的结果是：</p> <pre><code class="language-json">{ "type": "Program", "body": [ { "type": "DoWhileStatement", "body": { "type": "ExpressionStatement", "expression": { "type": "Identifier", "name": "a" } }, "test": { "type": "Identifier", "name": "b" } }, { "type": "ExpressionStatement", "expression": { "type": "Identifier", "name": "c" } }, { "type": "EmptyStatement" } ], "sourceType": "script" } </code></pre> <p>你会发现多出来一条空语句（EmptyStatement），那么这个分号就是多余的。</p> <h2>最后</h2> <p>看到这里，相信你对 JavaScript 解析机制和 ASI 机制有一个大致的了解了。</p> <blockquote> <p>所以即使坚持使用分号，仍然会因为 ASI 机制导致产生与预期不一致的结果。</p> </blockquote> <p>比如下面例子，这不是加不加分号的问题，而是懂不懂 JavaScript 解析的问题。</p> <pre><code class="language-js">// 坚持添加分号的小明 return 123; // 坚持不添加分号的小红 return 123 // 以上小明、小红都不能返回预期的结果 123，而是 undefined。 // 因为 JavaScript 解析器解析它们，都会变成这样： return; 123; // 如果我们懂得了 JavaScript 解析规则，那么无论我们写分号或者不写分号，都能得到预期结果。 return 123 return 123; </code></pre> <p>正如文章开头所说，我更偏向于不加分号的。这时候，我们要注意一些特殊情况，以避免 ASI 机制产生与我们编写程序的预期结果不一致的问题。</p> <p><strong>敲重点！！！</strong></p> <blockquote> <p>如果一条语句是以 <code>(</code>、<code>[</code>、<code>/</code>、<code>+</code>、<code>-</code> 开头，那么就要注意了。根据 JavaScript 解析器的规则，尽可能读取更多 <code>token</code> 来构成一个完整的语句，而以上这些 <code>token</code> 极有可能与前一个 <code>token</code> 可组成一个合法的语句，所以它不会自动插入分号。</p> <p>实际项目中，以 <code>/</code>、<code>+</code>、<code>- </code> 作为行首的代码其实是很少的，<code>(</code>、<code>[</code> 也是较少的。<strong>当遇到这些情况时，通过在行首手动键入分号 <code>;</code> 来避免 ASI 规则产生的非预期结果或报错。</strong></p> </blockquote> <h3>以 <code>(</code> 开头的情况</h3> <pre><code class="language-js">a = b (function() { }) </code></pre> <p>JavaScript 解析器会解析成这样：</p> <pre><code class="language-js">a = b(function() { }); </code></pre> <h3>以 <code>[</code> 开头的情况</h3> <pre><code class="language-js">a = function() { } [1,2,3].forEach(function(item) { }) </code></pre> <p>JavaScript 解析器会按以下这样去解析，由于 <code>function() {}[1,2,3]</code> 返回值是 <code>undefined</code>，所以就会报错。</p> <pre><code class="language-js">a = function() { }[1,2,3].forEach(function(item) { }); </code></pre> <h3>以 <code>/</code> 开头的情况</h3> <pre><code class="language-js">a = 'abc' /[a-z]/.test(a) </code></pre> <p>JavaScript 解析器会按以下这样去解析，所以就会报错。</p> <pre><code class="language-js">a = ‘abc’/[a-z]/.test(a); </code></pre> <h3>以 <code>+</code> 开头的情况</h3> <pre><code class="language-js">a = b +c </code></pre> <p>JavaScript 解析器会解析成这样：</p> <pre><code class="language-js">a = b + c; </code></pre> <h3>以 <code>-</code> 开头的情况</h3> <pre><code>a = b -c </code></pre> <p>JavaScript 解析器会解析成这样：</p> <pre><code class="language-js">a = b - c; </code></pre> <blockquote> <p>关于后缀表达式 <code>++</code> 和 <code>--</code> 跟上面的有点区别，上面已经举例说明了，它属于 <code>restricted production</code> 的情况之一，会在换行处自动插入分号，所以它们不能换行写，否则可能会产生非预期结果。</p> </blockquote> <p>所以理解了以上规则之后，我可以愉快了使用 <a href="https://github.com/tofrankie/blog/issues/66">ESLint + Prettier</a> 一键去掉分号以及统一格式化，而不会有任何的负担了。</p> <h2>参考链接</h2> <ul> <li><a href="https://segmentfault.com/a/1190000004548664">JavaScript ASI 机制详解</a></li> <li><a href="http://www.ecma-international.org/ecma-262/6.0/index.html#sec-automatic-semicolon-insertion">ECMAScript ASI 标准</a></li> <li><a href="https://esprima.org/demo/parse.html#">Esprima AST 在线解析器</a></li> <li><a href="https://www.cnblogs.com/ricklz/p/10342629.html">JavaScript 代码要不要加分号</a></li> <li><a href="http://justjavac.iteye.com/blog/1852405">JavaScript 中的自动分号插入机制（ASI）</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#automatic_semicolon_insertion">MDN Automatic semicolon insertion</a></li> </ul> </article> <article> <h1>JS 包装类</h1> <p>Sun, 26 Feb 2023 10:42:19 GMT</p> <p><strong>JavaScript 的「原始值」其实是没有任何的属性和方法的</strong>。</p> <p>那么问题来了，</p> <pre><code class="language-js">const str = 'abc' console.log(str.length) // 3 </code></pre> <p>那为什么能访问到 <code>length</code> 属性呢？不是说原始值没有属性、方法吗？</p> <pre><code class="language-js">// console.log(str.length) 经历了什么过程呢？ // 1. 使用 new String(str) ，实例化一个 String 对象；（假设为 obj） // 2. 这个实例化对象 obj 下面有个 length 属性，然后 obj.length 就能获取到对应的属性值 3； // 3. 接着马上销毁 delete obj.length。 </code></pre> <p>再来，</p> <pre><code class="language-js">const str = 'abc' str.len = 1 console.log(str.len) // undefined // 相当于 const str = 'abc' new String(str).len = 1 console.log(new String(str).len) </code></pre> <ul> <li>在第二行的 <code>str.len = 1</code> 里面，虽然给 String 的实例化对象的 <code>len</code> 属性赋值 <code>1</code>，但由于没有保存起来，所以，接着系统会马上给销毁掉 <code>delete new String(str).len</code>。</li> <li>第三行里面，又是一个新的实例化对象，而该实例化对象里面并没有 <code>len</code> 属性（或方法），所以输出的是 <code>undefined</code>。</li> </ul> <p>所以，我们常见的 <code>string.length</code> 并不是我们表面看到的 <code>string</code> 变量有一个 <code>length</code> 属性，它没有。</p> <blockquote> <p>记住，<strong>原始值是没有属性和方法的</strong>。</p> </blockquote> <p>但 <code>str.len = 1</code> 不报错，为什么呢？</p> <p>因为经历了一个包装类。<code>Boolean</code>、<code>String</code>、<code>Number</code> 的原始值都可以加属性和方法，因为有包装类，但是 Null 和 Undefined 加属性和方法会报错（例外）。</p> <blockquote> <p>有些文章把这个过程成为对象的装箱与拆箱。</p> </blockquote> </article> <article> <h1>关于 var、let 的顶层对象的属性</h1> <p>Sun, 26 Feb 2023 10:41:18 GMT</p> <p><strong>顶层对象</strong> ，在浏览器环境指的是 <code>window</code> 对象，在 Node 指的是 <code>global</code> 对象。ES5 之中，顶层对象的属性与全局变量是等价的。</p> <pre><code class="language-js">window.a = 1; console.log(a); // 1 a = 2; console.log(window.a); // 2 </code></pre> <p>在上面代码中，顶级对象的属性赋值与全局变量的赋值，是同一件事。</p> <p>顶层对象的属性与全局变量挂钩，被认为是 JavaScript 语言最大的设计败笔之一。这样的设计带来了几个很大的问题，首先是没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）；其次，程序员很容易不知不觉地就创建了全局变量（比如打字出错）；最后，顶层对象的属性是到处可以读写的，这非常不利于模块化编程。另一方面，window 对象有实体含义，指的是浏览器的窗口对象，顶层对象是一个有实体含义的对象，也是不合适的。</p> <p>ES6 为了改变这一点，一方面规定，为了保持兼容性，<code>var</code> 和 <code>function</code> 声明的全局变量，依旧是顶层对象的属性；另一方面规定，<code>let</code>、<code>const</code>、<code>class</code> 声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。</p> <pre><code class="language-js">var a = 1; // 如果在 Node 的 REPL 环境，可以写成 global.a // 或者采用通用方法，写成 this.a console.log(window.a); // 1 console.log(this.a); // 1 let b = 1; console.log(window.b); // undefined console.log(this.b); // undefined </code></pre> <p>上面代码中，全局变量 <code>a</code> 由 <code>var</code> 命令声明，所以它是顶层对象的属性；全局变量 <code>b</code> 由 <code>let</code> 命令声明，所以它不是顶层对象的属性，返回 <code>undefined</code>。</p> </article> <article> <h1>ECMAScript 和 JavaScript 的关系？</h1> <p>Sun, 26 Feb 2023 10:39:23 GMT</p> <p>一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？</p> <p>要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。</p> <p>该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。</p> <p>因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。</p> </article> <article> <h1>如何判断 JS 对象为空</h1> <p>Sun, 26 Feb 2023 10:38:50 GMT</p> <p></p> <p>对象属性有这几种情况下：</p> <ol> <li>自身属性还是原型上的属性</li> <li>是否为可枚举属性</li> <li>是否包含 Symbol 属性</li> </ol> <p>不同的遍历方式：</p> <ul> <li><a href=""><strong>for...in</strong></a>：遍历<strong>自身</strong>和<strong>继承过来</strong>的<strong>可枚举</strong>属性（不包括 Symbol 属性）。</li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><strong>Object.keys</strong></a>：返回一个数组，包含<strong>对象自身</strong>所有<strong>可枚举</strong>属性（不包括不可枚举属性和 Symbol 属性）</li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames"><strong>Object.getOwnPropertyNames</strong></a>：返回一个数组，包含<strong>对象自身</strong>的属性（包括不可枚举属性，但不包括 Symbol 属性）</li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols"><strong>Object.getOwnPropertySymbols</strong></a>：返回一个数组，包含<strong>对象自身</strong>的所有 Symbol 属性（包括可枚举和不可枚举属性）</li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys"><strong>Reflect.ownKeys</strong></a>：返回一个数组，包含<strong>自身所有</strong>的属性（包括 Symbol 属性，不可枚举属性以及可枚举属性）</li> </ul> <p>一般的业务场景，没有那么复杂，使用 <code>Object.keys</code>：</p> <pre><code class="language-js">const obj = {} Object.keys(obj).length === 0 // true </code></pre> <p>若要考虑不可枚举属性、Symbol 属性，使用 <code>Reflect.ownKeys</code>：</p> <pre><code class="language-js">const obj = {} Reflect.ownKeys(obj).length === 0 // true </code></pre> <p>一句话：按需使用。</p>  </article> <article> <h1>module.exports 属性与 exports 变量的区别</h1> <p>Sun, 26 Feb 2023 10:36:51 GMT</p> <h2>一、CommonJS 模块规范</h2> <p>Node 应用由模块组成，采用 CommonJS 模块规范。每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。</p> <p>CommonJS 规范规定，每个模块内部，<code>module</code> 变量代表当前模块。这个变量是一个对象，它的 <code>exports</code> 属性（即 <code>module.exports</code> ）是对外的接口。加载某个模块，其实是加载该模块的 <code>module.exports</code> 属性。</p> <p>CommonJS 规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。</p> <p>CommonJS 模块的特点如下：</p> <ul> <li>所有代码都运行在模块作用域，不会污染全局作用域。</li> <li>模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。</li> <li>模块加载的顺序，按照其在代码中出现的顺序。</li> </ul> <h3>1. module.exports 属性</h3> <p><code>module.exports</code> 属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取 <code>module.exports</code> 变量。</p> <h3>2. exports 变量</h3> <p>为了方便，Node 为每个模块提供一个 <code>exports</code> 变量，它指向 <code>module.exports</code>。这等同于在每个模块头部，有一行这样的命令：<code>var exports = module.exports</code>，我们可以通过以下方式来验证</p> <pre><code class="language-js">console.log(exports === module.exports); // true </code></pre> <p>所以在对外输出模块接口时，可以向 <code>exports</code> 对象添加属性方法。</p> <pre><code class="language-js">module.exports.age = 20 module.exports.getAge = function() {} // 相当于 exports.age = 20 exports.getAge = function() {} </code></pre> <p>但是不能直接将 <code>exports</code> 变量指向一个值，因为这样等于切断了 <code>exports</code> 与 <code>module.exports</code> 的联系。</p> <pre><code class="language-js">// 以下写法无效，因为 exports 不再指向 module.exports 了。 exports = function() {}; </code></pre> <h3>3. module.exports 与 exports 的使用</h3> <p>当一个模块的对外接口，只是一个单一的值时，不能使用 <code>exports</code> 输出，只能使用 <code>module.exports</code> 输出。</p> <pre><code class="language-js">// moduleA.js // 1️⃣ 正确 ✅ module.exports = function() {}; // 2️⃣ 错误 ❌ exports = function() {}; </code></pre> <p>导入模块看结果：</p> <pre><code class="language-js">// other.js var moduleA = require('moduleA.js'); console.log(moduleA); // 两种写法打印的值分别为： // 1️⃣ 预期结果 ✅ ƒ () { console.log('moduleD'); } // 2️⃣ 非预期结果 ❌ {} </code></pre> <p>分析结果：首先我们要知道 <code>module.exports</code> 的初始值是 <code>{}</code>，当执行 <code>exports = function() {};</code> 赋值时，无论赋值的是基本数据类型还是引用数据类型，都将改变 <code>exports</code> 的指向，即切断了 <code>exports</code> 与 <code>module.exports</code> 的联系。但是我们模块对外输出的接口是 <code>module.exports</code>，所以 2️⃣ 得到的是初始值 <code>{}</code>。</p> <p><strong>如果你觉得 <code>exports</code> 与 <code>module.exports</code> 之间的区别很难分清，一个简单的处理方法，就是放弃使用 <code>exports</code>，只使用 <code>module.exports</code>。</strong></p> <p>*我个人也没觉得 <code>exports</code> 的写法有多方便，哈哈。</p> <h3>4. 总结</h3> <ul> <li><code>module.exports</code> 初始值为一个空对象 <code>{}</code>；</li> <li><code>exports</code> 是指向的 <code>module.exports</code> 的引用；</li> <li><code>require()</code> 返回的是 <code>module.exports</code> 而不是 <code>exports</code>。</li> </ul> <p>还是那句话，如果你觉得 <code>exports</code> 与 <code>module.exports</code> 之间的区别很难分清，一个简单的处理方法，就是放弃使用 <code>exports</code>，只使用 <code>module.exports</code>。</p> <h2>二、require() 扩展话题</h2> <blockquote> <p>以下案例源自知乎<a href="https://www.zhihu.com/question/26621212/answer/625539463">回答</a></p> </blockquote> <p>关于 <code>require()</code> 的解释</p> <blockquote> <p>To illustrate the behavior, imagine this hypothetical implementation of require(), which is quite similar to what is actually done by require():</p> </blockquote> <pre><code class="language-js">function require(/* ... */) { const module = { exports: {} }; ((module, exports) => { // Module code here. In this example, define a function. function someFunc() {} exports = someFunc; // At this point, exports is no longer a shortcut to module.exports, and // this module will still export an empty default object. module.exports = someFunc; // At this point, the module will now export someFunc, instead of the // default object. })(module, module.exports); return module.exports; } </code></pre> <p>注意实现顺序，也就是下面代码为什么不成功的原因。</p> <pre><code class="language-js">// moduleA.js module.exports = function() {}; // 为什么这段配置不成功？你们有 BUG!!! exports.abc = 'abc'; </code></pre> <p><code>require()</code> 的时候，是先通过 <code>exports.abc</code> 获取，然后通过 <code>module.exports</code> 直接覆盖了原有的 <code>exports</code>，所以 <code>exports.abc = 'abc'</code> 就无效了。</p> <p><strong>一般库的封装都是 <code>exports = module.exports = _</code> （underscore 的例子）。</strong></p> <p>原因很简单，通过 <code>exports = module.exports</code> 让 <code>exports</code> 重新指向 <code>module.exports</code>。</p> <h2>三、参考链接</h2> <ul> <li><a href="https://javascript.ruanyifeng.com/nodejs/module.html#">CommonJS规范</a></li> <li><a href="https://www.zhihu.com/question/26621212">Node.js模块里exports与module.exports的区别?</a></li> </ul> </article> <article> <h1>关于 ES6 class 类</h1> <p>Sun, 26 Feb 2023 10:36:30 GMT</p> <p>本文用来记录之前比较少用到的知识点。</p> <h2>一、super 关键字</h2> <pre><code class="language-js">// 父类 class Person { constructor(name) { this.name = name } showName() { console.log(`My name is ${this.name}. (class Person)`) } } // 子类 class Student extends Person { constructor(name, skill) { // 继承类中的构造函数必须调用 super(...)，并且在使用 this 之前执行它。 super(name) this.skill = skill } } // 实例 let student = new Student('Frankie', 'JavaScript') console.log(student) // Student {name: "Frankie", skill: "JavaScript"} student.showName() // My name is Frankie. (class Person) </code></pre> <p>一个极其简单的例子，问题如下：</p> <p><strong>1. 假如我们的子类 <code>Student</code> 也有一个 <code>showName()</code> 方法，会怎样呢？</strong></p> <pre><code class="language-js">class Student extends Person { constructor(name, skill) { super(name) this.skill = skill } showName() { console.log(`My name is ${this.name}. (class Student)`) } } </code></pre> <p>那么（从自身找到了，自然停止往原型上找，没毛病）</p> <pre><code class="language-js">student.showName() // My name is Frankie. (class Student) </code></pre> <p><strong>2. 如果我们既想执行父类 <code>Person</code> 的 <code>showName()</code> 方法，也要执行子类的 <code>Student</code> 的 <code>showName()</code> 方法，要怎么办呢？</strong></p> <pre><code class="language-js">class Student extends Person { constructor(name, skill) { super(name) this.skill = skill } showName() { super.showName() console.log(`My name is ${this.name}. (class Student)`) } } </code></pre> <p>通常我们不想完全替代父类方法，而是在父类方法的基础上调整或扩展其功能。我们进行一些操作，让它之前或之后或在过程中调用父方法。</p> <p>Class 为此提供了 <code>super</code> 关键字。</p> <ul> <li>使用 <code>super.method()</code> 调用父类方法</li> <li>使用 <code>super()</code> 调用父构造函数（仅在 <code>constructor</code> 函数中）</li> </ul> <pre><code class="language-js">student.showName() // My name is Frankie. (class Person) // My name is Frankie. (class Student) </code></pre> <h2>二、set、get</h2> <p>与 ES5 一样，在 Class 内部可以使用 <code>get</code> 和 <code>set</code> 关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。</p> <pre><code class="language-js">class Student { constructor(name, skill) { this.name = name this.skill = skill } // 不得有参数（Getter must not have any formal parameters.) get age() { console.log(`getter`) } // 必须有一个参数（Setter must have exactly one formal parameter.） set age(value) { console.log(`setter: ${value}`) } } let student = new Student('Frankie', 'JavaScript') student.age = 20 // setter: 20 student.age // getter </code></pre> </article> <article> <h1>JavaScript 最全面的身份证号码校验方法</h1> <p>Sun, 26 Feb 2023 10:34:28 GMT</p> <p>关于国家公民身份号码规定如下：</p> <pre><code class="language-js">/** * 〖中华人民共和国国家标准 GB 11643-1999〗中有关公民身份号码的规定： * 公民身份号码是特征组合码，由十七位数字本体码和一位数字校验码组成。排列顺序从左至右依次为：六位数字地址码，八位数字出生日期码，三位数字顺序码和一位数字校验码。 * * 地址码编码规则为： * 第一位数字表示地区，1 是华北，2 是东北，3 是华东，4 是中南，5 是西南，6 是西北。 * 第二位数字表示户籍地所在的直辖市、省、自治区，比如在华北地区，1 代表北京市，2 代表天津市等。 * 第三、四位数字则表示户籍所在地的区、县、县级市、旗。 * 第五、六位数字是户籍所在地。 * * 出生日期码： * 身份证号码第七位到第十四位表示编码对象出生的年、月、日。 * * 顺序码： * 身份证号码第十五位到十七位是顺序码，对同年、月、日出生的人员编定的顺序号。其中第十七位奇数分给男性，偶数分给女性。 * * 校验码： * 身份证号码最后一位为校验码。 * * 校验码的计算方法： * 一、将身份证号码前面的 17 位数分别乘以不同的系数。从第一位到第十七位的系数分别为：7－9－10－5－8－4－2－1－6－3－7－9－10－5－8－4－2。 * 二、将这 17 位数字和系数相乘的结果相加。 * 三、用加出来的和除以 11，余数只可能有：0－1－2－3－4－5－6－7－8－9－10 这 11 个数字。其分别对应的最后一位身份证的号码为：1－0－X －9－8－7－6－5－4－3－2。 * 四、如果余数是 2，那么身份证的第 18 位数字就是 X。 */ </code></pre> <p>身份证校验的 JavaScript 实现如下：</p> <pre><code class="language-js">/** * 支持 15 位和 18 位身份证号校验 * 关于身份证号更多规则，请看文件末尾 * * @param {string} code 身份证号码 * @returns {boolean} 是否检验通过 */ export const checkIDNumber = code => { if (!code || typeof code !== 'string') return false // prettier-ignore const provinceCodes = ['11', '12', '13', '14', '15', '21', '22', '23', '31', '32', '33', '34', '35', '36', '37', '41', '42', '43', '44', '45', '46', '50', '51', '52', '53', '54', '61', '62', '63', '64', '65', '71', '81', '82', '91'] const reg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)?$/i const codeLen = code.length // 格式错误 if (!reg.test(code) || ![15, 18].includes(codeLen)) { return false } // 地址码错误 const provinceCode = code.substring(0, 2) if (!provinceCodes.includes(provinceCode)) { return false } // 18 位需校验最后一位校验码 if (codeLen === 18) { const codeArr = code.split('') const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2] const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2] let sum = 0 let ai = 0 let wi = 0 for (let i = 0; i < 17; i++) { ai = codeArr[i] wi = factor[i] sum += ai * wi } if (parity[sum % 11] != codeArr[17].toUpperCase()) { // 校验码错误 return false } } return true } /** * 〖中华人民共和国国家标准 GB 11643-1999〗中有关公民身份号码的规定： * 公民身份号码是特征组合码，由十七位数字本体码和一位数字校验码组成。排列顺序从左至右依次为：六位数字地址码，八位数字出生日期码，三位数字顺序码和一位数字校验码。 * * 地址码编码规则为： * 第一位数字表示地区，1 是华北，2 是东北，3 是华东，4 是中南，5 是西南，6 是西北。 * 第二位数字表示户籍地所在的直辖市、省、自治区，比如在华北地区，1 代表北京市，2 代表天津市等。 * 第三、四位数字则表示户籍所在地的区、县、县级市、旗。 * 第五、六位数字是户籍所在地。 * * 出生日期码： * 身份证号码第七位到第十四位表示编码对象出生的年、月、日。 * * 顺序码： * 身份证号码第十五位到十七位是顺序码，对同年、月、日出生的人员编定的顺序号。其中第十七位奇数分给男性，偶数分给女性。 * * 校验码： * 身份证号码最后一位为校验码。 * * 校验码的计算方法： * 一、将身份证号码前面的 17 位数分别乘以不同的系数。从第一位到第十七位的系数分别为：7－9－10－5－8－4－2－1－6－3－7－9－10－5－8－4－2。 * 二、将这 17 位数字和系数相乘的结果相加。 * 三、用加出来的和除以 11，余数只可能有：0－1－2－3－4－5－6－7－8－9－10 这 11 个数字。其分别对应的最后一位身份证的号码为：1－0－X －9－8－7－6－5－4－3－2。 * 四、如果余数是 2，那么身份证的第 18 位数字就是 X。 * * 示例： * 某女性的身份证号码为【11010519491231002X】，我们看看这个身份证是不是合法的身份证。 * 首先我们得出前 17 位的乘积和【(1*7)+(1*9)+(0*10)+(1*5)+(0*8)+(5*4)+(1*2)+(9*1)+(4*6)+(9*3)+(1*7)+(2*9)+(3*10)+(1*5)+(0*8)+(0*4)+(2*2)】是 167， * 然后用 167 除以 11 得出的结果是 167/11=15----2，也就是说其余数是 2。 * 最后通过对应规则就可以知道余数 2 对应的检验码是 X。 * 所以，可以判定这是一个正确的身份证号码。 * 请知悉，示例中身份证号码来自国家标准文件附录，请勿非法使用，否则后果自负！ * * 附上： * 〖中华人民共和国国家标准 GB 11643-1999〗：http://www.gb688.cn/bzgk/gb/newGbInfo?hcno=080D6FBF2BB468F9007657F26D60013E * 关于身份证校验码，可以看：https://baike.baidu.com/item/身份证校验码/3800388 * * 其他： * 相比 18 位的身份证号码，15 位的身份证号少了出入年份的前两位，以及最后的校验位。因此将你现在的身份证号码去掉这三位数字，使用本方法也可校验通过 */ // 地址码前两位，所对应的省市： // const provinceCodes = { // 11: '北京', // 12: '天津', // 13: '河北', // 14: '山西', // 15: '内蒙古', // 21: '辽宁', // 22: '吉林', // 23: '黑龙江', // 31: '上海', // 32: '江苏', // 33: '浙江', // 34: '安徽', // 35: '福建', // 36: '江西', // 37: '山东', // 41: '河南', // 42: '湖北', // 43: '湖南', // 44: '广东', // 45: '广西', // 46: '海南', // 50: '重庆', // 51: '四川', // 52: '贵州', // 53: '云南', // 54: '西藏', // 61: '陕西', // 62: '甘肃', // 63: '青海', // 64: '宁夏', // 65: '新疆', // 71: '台湾', // 81: '香港', // 82: '澳门', // 91: '国外' // } </code></pre> <p>已收录在 <a href="https://github.com/tofrankie/utils">tofrankie/utils</a>，还有一些比较实用的方法，比如中文转拼音等。</p> <p>The end.</p> </article> <article> <h1>六、Ajax 之 FormData</h1> <p>Sun, 26 Feb 2023 10:32:51 GMT</p> <h2>表单编码</h2> <p>当用户提交表单时，表单中的数据（每个表单元素的名字和值）编码到一个字符串并随请求发送。默认情况下，HTML 表单通过 POST 方法发送给服务器，而编码后的表单数据则用做请求主体。</p> <p>对表单数据使用的编码方案相对简单：对每个表单元素的名字和值执行普通的 <code>URL 编码</code>（使用十六进制转义码替换特殊字符），使用 <code>=</code> 把编码后的名字和值分开，并使用 <code>&</code> 符号分开 <code>名/值对</code>。</p> <p>一个简单的表单的编码如下所示：</p> <pre><code>name=Frankie&age=20&height=180 </code></pre> <p>表单数据编码格式有一个正式的 <code>MIME</code> 类型：</p> <pre><code>application/x-www-form-urlencoded </code></pre> <p>当使用 POST 方法提交这种顺序的表单数据市，必须将请求头 <code>Content-Type</code> 设置为该值。注意：这种类型的编码并不需要 HTML 表单，在 Ajax 应用中，希望发送给服务器的很可能是一个 JavaScript 对象，前面展示的数据变成 JavaScript 对象的表单编码形式可能是：</p> <pre><code>{ name: 'Frankie', age: 20, height: 180 } </code></pre> <p>表单编码在 Web 上如此广泛地使用，同时所有服务器端的编程语言都能得到良好的支持，所以非表单数据的表单编码通常也是容易实现的事情，下面代码展示如何实现对象属性的表单编码：</p> <pre><code class="language-js">function encodeFormData(data) { if (!data) return '' const pairs = [] // 用于保存名值对 for (let key in data) { if (!data.hasOwnProperty(key) || typeof data[key] === 'function') { continue } let value = data[key].toString() // 把值转换成字符串 let name = encodeURIComponent(key.replace('%20', '+')) // 编码名字 value = encodeURIComponent(value.replace('%20', '+')) // 编码值 pairs.push(name + '=' + value) } return pairs.join('&') // 返回使用'&'连接的名值对 } const data = { name: '越前君', age: 20, height: 180 } console.log(encodeFormData(data)) // name=%E8%B6%8A%E5%89%8D%E5%90%9B&age=20&height=180 </code></pre> <h2>表单序列化</h2> <p>随着 Ajax 的出现，表单序列化已经成为一种常见的需求，在 JavaScript 中，可以利用表单字段的 <code>type</code> 属性，连同 <code>name</code> 和 <code>value</code> 属性一起实现对表单序列化。在编写代码之前，有必要先弄清楚在表单提交期间，浏览器是如何将数据发送给服务器的。</p> <ul> <li><strong>对表单字段的名称和值进行 <code>URL 编码</code>，使用 <code>&</code> 分隔；</strong></li> <li><strong>不发送禁用的表单字段；</strong></li> <li><strong>只发送勾选的复选框和单选框按钮；</strong></li> <li><strong>不发送 <code>type</code> 为 <code>reset</code> 和 <code>button</code> 的按钮；</strong></li> <li><strong>对选选择框中，每个选中的值单独一个条目；</strong></li> <li><strong>在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提价按钮。也包括 <code>type</code> 为 <code>image</code> 的 <code><input></code> 元素；</strong></li> <li><strong><code><select></code> 元素的值，就是选中的 <code><option></code> 元素的 <code>value</code> 属性值。如果 <code><option></code> 元素没有 <code>value</code> 属性，则是 <code><option></code> 元素的文本值</strong></li> </ul> <p>在表单序列化过程中，一般不包括任何按钮字段，因为结果字符串很可能是通过其他方式提交的。除此之外的其他上述规则都应该遵循。</p> <p>在下面表单序列化 <code>serialize()</code> 函数中，首先定义了一个名为 <code>parts</code> 数组，用于保存将要创建的字符串的各个部分。然后，通过 <code>for</code> 循环遍历每个表单字段，并将其保存在 <code>field</code> 变量中。在活动一个字段的引用之后，使用 <code>switch</code> 语句检测其 <code>type</code> 属性。</p> <p>序列化过程中最麻烦的就是 <code><select></code> 元素，它可能是单选框，也可能是多选框。为此，需要遍历控件中的每一个选项，并在相应选项被选中的情况下向数组添加一个值。对于单选框，只有一个选中项，而多选框则可能有零个或多个选中项。这里的代码适用于这两种选择框，至于可选项的数量则是由浏览器控制的。在找到一个选中项之后，需要确定使用什么值。如果不存在 <code>value</code> 属性，或者虽然存在该属性，但值为空字符串，都要使用选项的文本来代替。为检查这个特性，在 DOM 兼容的浏览器中需要使用 <code>hasAttribute()</code> 方法，而在 IE7 中需要使用属性 <code>specified</code> 属性。</p> <p>如果表单中包含 <code><fieldset></code> 元素，则该元素会出现在元素集合中，但没有 <code>type</code> 属性。因此，如果 <code>type</code> 属性未定义，则不需要对其进行序列化。同样，对于各种按钮以及文件输入字段也是如此（文件输入字段在表单提交过程中包含文件的内容；但是，这个字段是无法模仿的，序列化时一般都要忽略）</p> <p>对于单选按钮和复选框，要检查其 <code>checked</code> 属性是否被设置为 <code>false</code>，如果是则退出 <code>switch</code> 语句。如果 <code>checked</code> 属性是 <code>true</code>，则继续执行 <code>default</code> 语句，即将当前字段的名称和值进行编码，然后添加到 <code>parts</code> 数组中。函数的最后一步，就是使用 <code>join()</code> 个数整个字符串，也就是用 <code>&</code> 来分隔每一个表单字段。</p> <p>最后 <code>serialize()</code> 函数会以查询字符串的格式输出序列化之后的字符串。</p> <pre><code>// 未完待续，例子晚点加上 </code></pre> </article> <article> <h1>JavaScript 之快速排序</h1> <p>Sun, 26 Feb 2023 10:31:21 GMT</p> <p></p> <p>快速排序（快排）是最常见的算法之一。桶排序虽然快，但是空间消耗大，冒泡排序利用的空间较为合理但是 <code>O(n²)</code>，显然在数据量较大时不够快。快速排序算是从两者取长补短的算法。</p> <h2>原理</h2> <p>以升序为例：</p> <ol> <li>在数据中选一个作为 <code>基准数</code>。（一般习惯选择中间的数，但选择其他数也可以）</li> <li>将所有的数据进行遍历（除基准数外），小于等于基数的放到一个临时数组 <code>arr1</code>，大于放到一个临时数组 <code>arr2</code>。</li> <li>若只有两个数则将小的放前面，大的放后面；若 <code>arr1</code> 或 <code>arr2</code> 只有 <code>0~1</code> 个则当前数组退出。</li> <li>将 <code>arr1</code>，<code>arr2</code> 执行步骤 1、2、3。（即递归实现）</li> </ol> <h2>图示</h2> <p> ▲ 快速排序</p> <h2>实现</h2> <pre><code class="language-js">function quickSort(arr) { // 设置递归出口 if (arr.length <= 1) return arr // 设置基数，并将基数移出 let base = Math.floor(arr.length / 2) let baseValue = arr.splice(base, 1)[0] // 临时数组。1）小于等于基数放入 arr1；2）大于放入基数放入 arr2 let arr1 = [] let arr2 = [] for (let i = 0; i < arr.length; i++) { if (arr[i] <= baseValue) { arr1.push(arr[i]) } else { arr2.push(arr[i]) } } // 递归 return sort(arr1).concat([baseValue], sort(arr2)) } let array = [4, 9, 3, 6, 21, 5, 0, 30, 2, 14] console.log(quickSort(array)) // [0, 2, 3, 4, 5, 6, 9, 14, 21, 30] </code></pre> <h2>时间复杂度</h2> <p>快速排序的平均时间复杂度为 <code>O(nlogn)</code>，快速排序的时间复杂度计算较为复杂。</p> <p>有兴趣的同学可参考：<a href="https://www.zhihu.com/question/22393997">如何证明快速排序法的平均复杂度为 O(nlogn)？</a></p> <p>可以看到的是 <code>快速排序</code> 的时间复杂度是介于 <code>桶排序 O(n)</code> 和 <code>冒泡排序 O(n^2)</code> 之间的： <code>O(1) < O(logn) < O(n) < O(n*logn) < O(n^2) < O(n^3) < O(2^n) < O(n!) < O(n^n)</code>。</p> </article> <article> <h1>细读 JS | 深入继承原理</h1> <p>Sun, 26 Feb 2023 10:18:57 GMT</p> <blockquote> <p>系列文章：</p> <ul> <li><a href="https://github.com/tofrankie/blog/issues/212">原型详解</a></li> <li><a href="https://github.com/tofrankie/blog/issues/213">深入继承原理</a>（本文）</li> </ul> <p>原文出自 <a href="https://github.com/ulivz">ULIVZ</a>：</p> <ul> <li><a href="https://juejin.cn/post/6844903567325659144">万物皆空之 JavaScript 原型</a></li> <li><a href="https://juejin.cn/post/6844903569317953543">深入继承原理</a></li> </ul> </blockquote> <p><code>ES6</code> 的 <code>class</code> 语法糖你是否已经用得炉火纯青呢？那如果回归到 <code>ES5</code> 呢？</p> <p>本文，将继续上一篇尾篇提出的疑问：<code>如何用 JavaScript 实现类的继承？</code> 来展开阐述。</p> <p>通过本文，你将学到：</p> <ol> <li>如何用 JavaScript 模拟类中的私有变量？</li> <li>了解常见的几种 JavaScript 继承方法，原理极其优缺点。</li> <li>实现一个较为 fancy 的 JavaScript 继承方法。</li> </ol> <p>此外，如果你完全明白了文末的终极版继承，你也就懂了这两篇所要将的核心知识，同时也能说明你拥有不错的 JavaScript 基础。</p> <h2>类</h2> <p>我们回顾一下 <code>ES6 / TypeScript / ES5</code> 的类写法以作对比。首先，我们创建一个 <code>GitHubUser</code> 类，它拥有一个 <code>login</code> 方法和一个静态方法 <code>getPublicServices</code>，用于获取 <code>public</code> 的方法列表：</p> <pre><code class="language-js">// ES6 class GithubUser { static getPublicServices() { return ["login"]; } constructor(username, password) { this.username = username; this.password = password; } login() { console.log(this.username + " 要登录 Github，密码是：" + this.password); } } </code></pre> <p>实际上，<code>ES6</code> 这个类的写法有一个弊病，实际上密码 <code>password</code> 应该是 <code>GitHub</code> 用户一个私有变量，接下来，我们用 <code>TypeScript</code> 重写一下：</p> <pre><code class="language-ts">// TypeScript class GithubUser { static getPublicServices() { return ["login"]; } public username: string; private password: string; constructor(username, password) { this.username = username; this.password = password; } public login(): void { console.log(this.username + " 要登录 Github，密码是：" + this.password); } } </code></pre> <p>如此一来，<code>password</code> 就只能在类的内部访问了。好了，问题来了，如果结合原型讲解那疑问的知识，来用 <code>ES5</code> 实现这个类呢？</p> <pre><code class="language-js">function GithubUser(username, password) { // private 属性 let _password = password; // public 属性 this.username = username; // public 方法 GithubUser.prototype.login = function() { console.log(this.username + " 要登录 Github，密码是：" + _password); }; } GithubUser.getPublicServices = function() { return ["login"]; }; </code></pre> <blockquote> <p>值得注意的是，我们一般都会把 <code>共有方法</code> 放在类的原型上，而不会采用 <code>this.login = function() {}</code> 这种写法。因为只有这样，才能让多个实例引用同一个共有方法，从而避免重复创建方法的浪费。</p> </blockquote> <p>是不是很直观，留下 2 个疑问：</p> <ol> <li>如何实现 <code>private 方法</code> 呢？</li> <li>能否实现 <code>protected 属性/方法</code> 呢？</li> </ol> <h2>继承</h2> <p>我们如果创建一个 <code>User</code> 来继承 <code>GitHubUser</code>，那么 <code>User</code> 及其实例就可以调用 <code>GitHubUser</code> 的 <code>login</code> 方法了。首先，先写出这个简单的 <code>User</code> 类：</p> <pre><code class="language-js">function User(username, password, articles) { // TODO need implementation this.articles = articles; // 文章数量 User.prototype.readArticle = function () { console.log('Read article'); } } </code></pre> <p>由于 <code>ES6/TS</code> 的继承方式太过直观，本节将忽略。首先概述一下本文将要讲解的几种继承方式：</p> <ul> <li>类式继承</li> <li>构造函数继承</li> <li>组合式继承</li> <li>原型继承</li> <li>寄生式继承</li> <li>寄生组合式继承</li> </ul> <p>看起来很多，下面我们一一论述。</p> <h3>类式继承</h3> <p>在此之前，我们已经得知：若通过 <code>new Parent()</code> 创建了 <code>child</code>，则 <code>child.__proto__ = Parent.prototype</code>，而原型链则顺着 <code>__proto__</code> 依次向上查找。因此，可以通过修改子类的原型为父类的实例来实现继承。</p> <pre><code class="language-js">function GithubUser(username, password) { let _password = password; this.username = username; GithubUser.prototype.login = function () { console.log(this.username + " 要登录 Github，密码是：" + _password); }; } function User(username, password, articles) { this.articles = articles; User.prototype = new GithubUser(username, password); User.prototype.readArticle = function () { console.log('Read article'); } } var user = new User('Frankie', 'abc', 5); console.log(user); </code></pre> <p>在控制台查看打印结果：</p> <p></p> <p>诶，不对啊，很明显 <code>user.__proto__</code> 并不是 <code>GitHubUser</code> 的一个实例。</p> <p>实际上，这是因为之前我们为了能够在类的方法中读取私有变量，将 <code>User.prototype</code> 的重新赋值放在了构造函数中，而此时实例已经创建，其 <code>__proto__</code> 还指向老的 <code>User.prototype</code>。所以，重新赋值一下实例的 <code>__proto__</code>。所以重新赋值一下实例的 <code>__proto__</code> 就可以解决这些问题。</p> <pre><code class="language-js">// 类式继承 function GithubUser(username, password) { let _password = password; this.username = username; GithubUser.prototype.login = function () { console.log(this.username + " 要登录 Github，密码是：" + _password); }; } function User(username, password, articles) { this.articles = articles; var prototype = new GithubUser(username, password); // User.prototype = prototype; // 这一行已经没有意义了 prototype.readArticle = function () { console.log('Read article'); } this.__proto__ = prototype; } var user = new User('Frankie', 'abc', 5); console.log(user); // 但由于私自篡改了 __proto__，导致以下不成立 console.log(user.__proto__ === User.prototype); // false console.log(user instanceof User); // false </code></pre> <p>继续查看控制台打印的结果：</p> <p></p> <p>Perfect！原型链已经出来，问题“<strong>好像</strong>”得到了完美解决！<strong>但实际上还是有明显的问题：</strong></p> <ol> <li>在原型链上创建了属性（一般来说，这不是一种好的实践）。</li> <li>私自篡改 <code>__proto__</code>，导致 <code>user.__proto__ === User.prototype</code> 不成立！从而导致 <code>user instanceof User</code> 也不成立，这不是应该发生的！</li> </ol> <p>细心的同学会发现，造成这种问题的根本原因在于我们在实例化的时候动态修改了原型，那有没有一种方法可以在实例化之前就固定好类的原型的 <code>refernce</code> 呢？</p> <p>事实上，我们可以考虑把类的原型赋值挪出来：</p> <pre><code class="language-js">// 类式继承，修改版 function GithubUser(username, password) { let _password = password; this.username = username; GithubUser.prototype.login = function () { console.log(this.username + " 要登录 Github，密码是：" + _password); }; } function User(username, password, articles) { this.articles = articles; } // 此时构造函数还未运行，无法访问 username 和 password ！ User.prototype = new GithubUser(); User.prototype.readArticle = function () { console.log('Read article'); } var user = new User('Frankie', 'abc', 5); console.log(user) // 以下成立 console.log(user.__proto__ === User.prototype); // true console.log(user instanceof User); // true </code></pre> <p>打印 <code>user</code> 实例的结果：</p> <p></p> <p>这样做又有明显的<strong>缺点</strong>：</p> <ol> <li><strong>父类过早被创建，导致无法接受子类的动态参数；</strong></li> <li><strong>仍然在原型上创建了属性，此时，多个子类的实例将共享同一个父类的属性，完蛋会互相影响！</strong></li> </ol> <pre><code class="language-js">// 举例说明缺点 2： function GithubUser(username) { this.username = username; } function User(username, password) {}; User.prototype = new GithubUser(); var user1 = new User('Frankie', 'abc'); var user2 = new User('Mandy', 'mno'); // 这就是把属性定义在原型链上的致命缺点，你可以直接访问，但修改就是一件难事了！ console.log(user1.username); // undefined （缺点 1：父类过早地被创建，导致无法接受子类的动态参数） user1.__proto__.username = 'Other'; console.log(user1.username); // "Other" // 卧槽无情，影响了另一个实例！ console.log(user2.username); // "Ohter" </code></pre> <p>由此可见，<code>类式继承</code> 的两种方式缺陷太多！</p> <h3>构造函数继承</h3> <p>通过 <code>call()</code> 来实现继承。相应地，你可以用 <code>apply()</code> 实现。</p> <pre><code class="language-js">// 构造函数继承 function GithubUser(username, password) { let _password = password; this.username = username; GithubUser.prototype.login = function () { console.log(this.username + " 要登录 Github，密码是：" + _password); }; } function User(username, password, articles) { this.articles = articles; GithubUser.call(this, username, password); // 或者使用 apply // GithubUser.apply(this, [username, password]); } var user = new User('Frankie', 'abc', 5); console.log(user.username); // Frankie console.log(user.articles); // 5 user.login(); // Uncaught TypeError: user.login is not a function </code></pre> <p>当然，如果继承真如此简单，那么本文就没有存在的必要了，本继承方法也存在明显的缺陷：<strong><code>构造函数式继承</code>并没有继承父类原型上的方法</strong>。</p> <h3>组合式继承</h3> <p>既然上述两种方式各有缺点，但是又各有所长，那么我们是否可以将其结合起来使用呢？？没错，这种方式叫做：<code>组合式继承</code>。</p> <pre><code class="language-js">// 组合式继承 function GithubUser(username, password) { let _password = password; this.username = username; GithubUser.prototype.login = function () { console.log(this.username + " 要登录 Github，密码是：" + _password); }; } function User(username, password, articles) { this.articles = articles; GithubUser.call(this, username, password); // 第二次执行 GitHubUser 构造函数 } User.prototype = new GithubUser(); // 第一次执行 GitHubUser 构造函数 var user = new User('Frankie', 'abc', 5); console.log(user); console.log(user.username); console.log(user.articles); user.login(); </code></pre> <p>打印结果如下：</p> <p></p> <p>虽然这种方式弥补了上述两种方式的一些缺陷，但有些问题仍然存在：</p> <ol> <li><strong>子类仍旧无法传递动态参数给父类！</strong></li> <li><strong>父类的构造函数被调用了两次。</strong></li> </ol> <p>本方式很明显执行了两次父类的构造函数。因此，这也不是我们最终想要的继承方式。</p> <h3>原型继承</h3> <p><code>原型继承</code> 实际上就是对 <code>类式继承</code> 的一种封装，只不过其独特之处在于，定义了一个干净的中间类，如下：</p> <pre><code class="language-js">// 原型继承 function createObject(o) { // 创建临时类 function F() { }; // 修改临时类的原型为 o，于是 f 的实例都将继承 o 上的方法。 F.prototype = o; return new F(); } function GithubUser(username, password) { let _password = password; this.username = username; GithubUser.prototype.login = function () { console.log(this.username + " 要登录 Github，密码是：" + _password); }; } function User(username, password, articles) { this.articles = articles; } User.prototype = createObject(GithubUser); var user = new User('Frankie', 'abc', 5); console.log(user.username); // undefined console.log(user.articles); // 5 user.login(); // Uncaught TypeError: user.login is not a function </code></pre> <p>熟悉 <code>ES5</code> 的同学，会注意到，这不就是 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create</a> 吗？没错，你可以认为是如此。</p> <p>既然只是 <code>类式继承</code> 的一种封装，其使用方式如下：</p> <pre><code class="language-js">User.prototype = createObject(GithubUser); </code></pre> <p>也仍旧没有解决 <code>类式继承</code> 的一些问题。</p> <blockquote> <p>个人觉得，<code>原型继承</code> 和 <code>类式继承</code> 应该归为一种继承，但无奈众多 JavaScript 书籍均是如此命名，算是 <code>follow legacy</code> 的标准吧。</p> </blockquote> <h3>寄生继承</h3> <p><code>寄生继承</code> 是依托于一个对象而生的一种继承方式，因此称之为 <code>寄生</code>。</p> <pre><code class="language-js">// 寄生继承 var userSample = { username: 'Frankie', password: 'abc', articles: 5 } function User(obj) { var o = Object.create(obj); o.readArticle = function () { console.log('Read article'); } return o; } var user = new User(userSample); console.log(user.username); // Frankie user.readArticle(); // Read article </code></pre> <p>由于实际情况，继承一个单例对象的场景实在是太少。因此，我们仍然没有找到最佳的继承方法。</p> <h3>寄生组合式继承</h3> <p>看起来很玄乎，先看代码：</p> <pre><code class="language-js">// 寄生组合式继承 // 核心方法 function inherit(child, parent) { // 继承父类的原型 var p = Object.create(parent.prototype); // 重写子类的原型 child.prototype = p; // 重写被污染的子类的 constructor p.constructor = child; } // 父类 function GithubUser(username, password) { this.password = password; this.username = username; } GithubUser.prototype.login = function () { console.log(this.username + ' 要登录 GitHub，密码是：' + this.password); } // 子类 function User(username, password, articles) { this.articles = articles; GithubUser.call(this, username, password); } // 实现原型上的方法 inherit(User, GithubUser); // 在原型上添加新的方法 User.prototype.readArticle = function () { console.log('Read article'); } var user = new User('Frankie', 'abc', 5); console.log(user); </code></pre> <p>看下打印结果：</p> <p></p> <p>简单说明一下：</p> <ol> <li>子类继承了父类的属性和方法，同时属性没有被创建在原型链上，因此多个子类不会共享同一个属性。</li> <li>子类可以传递动态参数给父类。</li> <li>父类的构造函数只执行了一次。</li> </ol> <p>Nice！这才是我们想要的继承方法。然而，<strong>仍然存在一个美中不足的问题</strong>：</p> <ul> <li>子类想要在原型上添加方法，必须在继承之后添加，否则将会覆盖掉原有原型上的方法。这样的话，若是已经存在的两个类，就不好办了。</li> </ul> <p>所以，我们可以将其优化一下：</p> <pre><code class="language-js">// 优化版： function inherit(child, parent) { // 继承父类的原型 var p = Object.create(parent.prototype); // 重写子类的原型 child.prototype = Object.assign(parent.prototype, child.prototype); // 重写被污染的子类的 constructor p.constructor = child; } </code></pre> <p>但实际上，使用 <code>Object.assign</code> 来进行 <code>copy</code> 仍然不是最好的方法，根据 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign">MDN</a> 描述：</p> <ul> <li>The <code>Object.assign()</code> method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.</li> </ul> <p>其中有个很关键的词：<code>enumerable</code>，这已经不是本节讨论的知识了，不熟悉的同学可以参考 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">MDN - Object.defineProperty</a> 补习。简单来说，上述的继承方法只适用于 <code>copy</code> 原型链上可枚举的方法，此外，如果子类本身已经继承自某个类，以上的继承将不能满足要求。</p> <h2>终极版继承</h2> <p>为了让代码更清晰，我用 <code>ES6</code> 的一些 API，写出来这个我认为最合理的继承方法：</p> <ul> <li>用 <code>Reflect</code> 代替了 <code>Object</code>；</li> <li>用 <code>Reflect.getPrototypeOf</code> 来代替 <code>obj.__proto__</code>；</li> <li>用 <code>Reflect.ownKeys</code> 来读取所有 <code>可枚举/不可枚举/Symbol</code> 的属性；</li> <li>用 <code>Reflect.getOwnPropertyDescriptor</code> 读取属性描述符；</li> <li>用 <code>Reflect.setPropertyOf</code> 来设置 <code>__proto__</code>。</li> </ul> <p>源码如下：</p> <pre><code class="language-js">// 寄生组合式继承 // 不同于 object.assign, 该 merge 方法会复制所有的源键 // 不管键名是 Symbol 或字符串，也不管是否可枚举 function fancyShadowMerge(target, source) { for (const key of Reflect.ownKeys(source)) { Reflect.defineProperty(target, key, Reflect.getOwnPropertyDescriptor(source, key)); } return target; } // Core function inherit(child, parent) { const objectPrototype = Object.prototype; // 继承父类的原型 const parentPrototype = Object.create(parent.prototype); let childPrototype = child.prototype; // 若子类没有继承任何类，直接合并子类原型和父类原型上的所有方法 // 包含可枚举/不可枚举的方法 if (Reflect.getPrototypeOf(childPrototype) === objectPrototype) { child.prototype = fancyShadowMerge(parentPrototype, childPrototype); } else { // 若子类已经继承了某个类 // 父类的原型将子类的原型链的尽头补全 while (Reflect.getPrototypeOf(childPrototype) !== objectPrototype) { childPrototype = Reflect.getPrototypeOf(childPrototype); } Reflect.setPrototypeOf(childPrototype, parent.prototype); } // 重写被污染的子类的 constructor parentPrototype.constructor = child; } </code></pre> <p>测试：</p> <pre><code class="language-js">function GithubUser(username, password) { this.username = username; this.password = password; } GithubUser.prototype.login = function () { console.log(this.username + " 要登录 Github，密码是：" + this.password); } function User(username, password, articles) { GithubUser.call(this, username, password); WeiboUser.call(this, username, password); this.articles = articles; } User.prototype.readArticle = function () { console.log('Read article'); } function WeiboUser(username, password) { this.key = username + '&' + password; } WeiboUser.prototype.compose = function () { console.log('compose'); } // 先让 User 继承 GitHubUser inherit(User, GithubUser); // 再让 User 继承 GitHubUser inherit(User, WeiboUser); const user = new User('Frankie', 'abc', 5); console.log(user); </code></pre> <p>打印结果：</p> <p></p> <p>最后用一个问题来检验你对本文的理解：</p> <ul> <li>改写上述继承方法，让其支持 <code>inherit(A, B, C, ...)</code> ，实现 <code>A</code> 依次继承后面所有的类，但除了 <code>A</code> 以外的类不产生继承关系。</li> </ul> <h2>总结</h2> <ol> <li>我们可以使用 <code>function</code> 来模拟类；</li> <li>JavaScript 类的继承是基于原型的，一个完善的继承方法，其继承过程是相当复杂的；</li> <li>虽然建议实际生产中直接使用 <code>ES6</code> 的继承，但仍然建议深入了解内部继承机制。</li> </ol> <h2>题外话</h2> <p>最后放一个彩蛋，为什么我会在寄生组合式继承中尤其强调 <code>enumerable</code> 这个属性描述符呢？因为：</p> <ul> <li><code>ES6</code> 的 <code>class</code> 中，默认所有类的方法是不可枚举的！</li> </ul> <p>The end.</p> </article> <article> <h1>细读 JS | 原型详解</h1> <p>Sun, 26 Feb 2023 10:15:04 GMT</p> <blockquote> <p>系列文章：</p> <ul> <li><a href="https://github.com/tofrankie/blog/issues/212">原型详解</a>（本文）</li> <li><a href="https://github.com/tofrankie/blog/issues/213">深入继承原理</a></li> </ul> <p>原文出自 <a href="https://github.com/ulivz">ULIVZ</a>：</p> <ul> <li><a href="https://juejin.cn/post/6844903567325659144">万物皆空之 JavaScript 原型</a></li> <li><a href="https://juejin.cn/post/6844903569317953543">深入继承原理</a></li> </ul> </blockquote> <p>在此之前，关于原型的认知都是零零散散，没有系统整理过。</p> <h2>引入：普通对象与函数对象</h2> <p>在 JavaScript 中，一直有一种说法，万物皆对象。</p> <p>事实上，在 JavaScript 中，对象也是有区别的，我们可以将其划分为「普通对象」和「函数对象」。</p> <p><code>Object</code> 和 <code>Function</code> 便是 JavaScript 自带的两个典型的「函数对象」。而函数对象就是一个纯函数，所谓的函数对象，其实就是使用 JavaScript 在模拟类。</p> <p><strong>那么，什么是普通对象，什么又是函数对象呢？</strong></p> <p>先创建三个 <code>Function</code> 和 <code>Object</code> 的实例。</p> <pre><code class="language-js">function fn1() {}; var fn2 = function() {}; var fn3 = new Function('getName', 'console.log("Frankie")'); var obj1 = {}; var obj2 = new Object(); var obj3 = new fn1(); </code></pre> <p>打印以下结果，可以得到：</p> <pre><code class="language-js">console.log(typeof Object); // function console.log(typeof Function); // function console.log(typeof obj1); // object console.log(typeof obj2); // object console.log(typeof obj3); // object console.log(typeof fn1); // function console.log(typeof fn2); // function console.log(typeof fn3); // function </code></pre> <p>在上述的例子中，<code>obj1</code>、<code>obj2</code>、<code>obj3</code> 为 <code>普通对象</code>（均为 Object 的实例），而 <code>fn1</code>、<code>fn2</code>、<code>fn3</code> 为 <code>函数对象</code>（均是 <code>Function</code> 的实例）。</p> <p>如何区分呢？记住这句话就行了：</p> <p><strong>所有 Function 的实例都是函数对象，而其他的都是普通对象。</strong></p> <p>说到这里，细心的同学会发表一个疑问。文中开头，我们提到 <code>Object</code> 和 <code>Function</code> 均是 <code>函数对象</code>，而这里又说：所有的 <code>Function</code> 的实例都是 <code>函数对象</code>，难道 <code>Function</code> 也是 <code>Function</code> 的实例吗？（先留下疑问）</p> <p></p> <p>从图中可以看出，对象本身的实现还是要依靠<strong>构造函数</strong>，那 <code>原型链</code> 到底是用来干嘛的呢？</p> <p>众所周知，作为一门面向对象的语言，必定具有以下特征：</p> <ul> <li>对象唯一性</li> <li>抽象性</li> <li>继承性</li> <li>多态性</li> </ul> <p><strong>原型链最大的目的就是为了实现继承。</strong></p> <h2>进阶：prototype 与 __proto__</h2> <p>原型链究竟是如何实现继承的呢？</p> <p>首先，我们要引入介绍两兄弟：<code>prototype</code> 和 <code>__proto__</code>，这是在 JavaScript 中无处不在的两个变量，然而，这两个变量并不是在所有的对象上都存在。</p> <table> <thead> <tr> <th>对象类型</th> <th>prototype</th> <th>__proto__</th> </tr> </thead> <tbody> <tr> <td>普通对象(NO)</td> <td>❌</td> <td>✅</td> </tr> <tr> <td>函数对象(FO)</td> <td>✅</td> <td>✅</td> </tr> </tbody> </table> <p>首先，我们先给出以下结论：</p> <ul> <li><strong>只有函数对象才具有 <code>prototype</code> 属性。</strong></li> <li><strong><code>prototype</code> 和 <code>__proto__</code> 都是 JavaScript 在定义一个函数或对象时自动创建的预定义属性。</strong></li> </ul> <pre><code class="language-js">function fn() {}; console.log(typeof fn.__proto__); // function console.log(typeof fn.prototype); // object const obj = {}; console.log(typeof obj.__proto__); // function console.log(typeof obj.prototype); // undefined，普通对象没有 prototype </code></pre> <p>也就是说，下面代码成立：</p> <pre><code class="language-js">console.log(fn.__proto__ === Function.prototype); // true console.log(obj.__proto__ === Object.prototype); // true </code></pre> <p>看起来很酷，结论瞬间被证明，感觉是不是很爽，那么问题来了：既然 <code>fn</code> 是一个函数对象，那么 <code>fn.prototype.__proto__</code> 到底等于什么？</p> <p>这是我尝试去解决这个问题的过程：</p> <ol> <li>首先用 <code>typeof</code> 得到 <code>fn.prototype</code> 的类型 <code>"object"</code>；</li> <li>既然是 <code>"object"</code>，那 <code>fn.prototype</code> 岂不是 <code>Object</code> 的实例？我们验证一下：</li> </ol> <pre><code class="language-js">console.log(fn.prototype.__proto__ === Object.prototype); // true </code></pre> <p>接下来，如果要你快速地写出，在创建一个函数时，JavaScript 对该函数原型的初始化代码，你是不是也能快速地写出：</p> <pre><code class="language-js">// 实际代码 function fn() {}; // JavaScript 自动执行 fn.prototype = { constructor: fn; __proto__: Object.prototype } fn.__proto__ = Function.prototype; </code></pre> <p>到这里，你是否有一丝恍然大悟的感觉？</p> <p>此外，因为普通对象就是通过函数对象实例化（<code>new</code>）得到的，而一个实例不可能再次进行实例化，也就不会让另一个对象的 <code>__proto__</code> 指向它的 <code>prototype</code>，隐藏本节一开始提到的「普通对象没有 <code>prototype</code> 属性」的结论似乎非常好理解了。从上述的分析，我们还可以看出，<code>fn.prototype</code> 就是一个普通的对象，它也不存在 <code>prototype</code> 属性。</p> <p>再回顾下上一节，我们还遗留了一个疑问：<strong>难道 <code>Function</code> 也是 <code>Function</code> 的实例？</strong></p> <p>是时候去掉「应该」让它成立了：</p> <pre><code class="language-js">console.log(Function.__proto__ === Function.prototype); // true </code></pre> <h2>重点：原型链</h2> <p>上一节，我们详解了 <code>prototype</code> 和 <code>__proto__</code>。实际上，这两兄弟主要就是为了<strong>构造原型链</strong>而存在的。</p> <p>先上一段代码：</p> <pre><code class="language-js">function Person(name, age) { this.name = name; this.age = age; } // 1️⃣ Person.prototype.getName = function() { return this.name; }; // 2️⃣ Person.prototype.getAge = function() { return this.age; }; // 3️⃣ var person = new Person("Frankie", 20); // 4️⃣ console.log(person); // 5️⃣ console.log(person.getName()); // 6️⃣ // 采用 ES6 更优雅的写法？哈哈 // Object.assign(Person.prototype, { // getName() { // return this.name; // }, // getAge() { // return this.age; // }, // }) </code></pre> <p>解析一下执行细节：</p> <ol> <li>执行 1️⃣，创建一个构造函数 <code>Person</code>，要注意前面已经提到，此时 <code>Person.prototype</code> 已经被自动创建，它包含 <code>constructor</code> 和 <code>__proto__</code> 这两个属性；</li> <li>执行 2️⃣，给对象 <code>Person.prototype</code> 增加一个方法 <code>getName()</code>；</li> <li>执行 3️⃣，给对象 <code>Person.prototype</code> 增加一个方法 <code>getAge()</code>；</li> <li>执行 4️⃣，右构造函数 <code>Person</code> 创建一个 <code>person</code> 实例，值得注意的是，一个构造函数在实例化时，一定会自动执行该构造函数。</li> <li>在浏览器得到 5️⃣ 的输出，即 <code>person</code> 应该是：</li> </ol> <pre><code class="language-js">{ name: 'Frankie', age: 20, __proto__: Object // 实际上就是 Person.prototype } </code></pre> <p>结合上一节的经验，以下等式成立：</p> <pre><code class="language-js">console.log(person.__proto__ === Person.prototype); // true </code></pre> <ol start="6"> <li>执行 6️⃣ 的时候，由于在 <code>person</code> 中找不到 <code>getName()</code> 和 <code>getAge()</code> 这两个方法，就会继续朝着原型链上查找，也就是通过 <code>__proto__</code> 向上查找，于是很快在 <code>person.__proto__</code> 中，即 <code>Person.prototype</code> 中找到了这两个方法，于是停止查找并执行得到结果。</li> </ol> <p>这便是 JavaScript 的原型继承。准确的说，JavaScript 的原型继承是通过 <code>__proto__</code> 并借助 <code>prototype</code> 来实现的。</p> <p>于是，我们可以作以下总结：</p> <ul> <li>函数对象的 <code>__proto__</code> 指向 <code>Function.prototype</code>；</li> <li>函数对象的 <code>prototype</code> 指向 <code>instance.__proto__</code>；</li> <li>普通对象的 <code>__proto__</code> 指向 <code>Object.prototype</code>；</li> <li>普通对象没有 <code>prototype</code> 属性；</li> <li>在访问一个对象的某个属性很方法时，若在当前对象上找不到，则会尝试访问 <code>obj.__proto__</code>，也就是访问该对象的构造函数的原型 <code>objCtr.prototype</code>，若仍然找不到，会继续查找 <code>objCtr.prototype.__proto__</code>，像依次地查找下去。若在某一刻，找到该属性，则会立刻返回值并停止对原型链的搜索，若找不到，则返回 <code>undefined</code>。</li> </ul> <p>为了检验你对上述的理解，请分析下面两个问题：</p> <ol> <li><strong>以下代码输出结果是什么？</strong></li> </ol> <pre><code class="language-js">console.log(person.__proto__ === Function.prototype); // false </code></pre> <ol start="2"> <li><strong><code>Person.__proto__</code> 和 <code>Person.prototype.__proto__</code> 分别指向何处？</strong></li> </ol> <pre><code class="language-js">console.log(Person.__proto__ === Function.prototype); // true console.log(Person.prototype.__proto__ === Object.prototype); // true // 分析： // 1. 前面已经提到过，在 JavaScript 中万物皆对象。Person 很明显是 Function 的实例， // 因此，Person.__proto__ 指向 Function.prototype。 // 2. 因为 Person.prototype 是一个普通对象，因此Person.prototype.__proto__ 指向 Object.prototype。 // 3. 为了验证 Person.__proto__ 所在的原型链中没有 Object， // 以及 Person.prototype.__proto__ 所在的原型链中没有 Function, 结合以下语句验证： console.log(Person.__proto__ === Object.prototype); // false console.log(Person.prototype.__proto__ == Function.prototype); // false </code></pre> <h2>终极：原型链图</h2> <p>上一节，我们实际上还遗留了一个疑问：<strong>原型链如果一个搜索下去，如果找不到，那何时停止呢？也就是说，原型链的尽头是哪里？</strong></p> <p>我们可以快速地利用下面的代码验证：</p> <pre><code class="language-js">function Person() {}; var person = new Person(); console.log(person.name); // undefined </code></pre> <p>很显然，上述输出 <code>undefined</code>。下面简述查找过程：</p> <pre><code class="language-js">person // 是一个对象，可以继续 person['name'] // 不存在，继续查找 person.__proto__ // 是一个对象，可以继续 person.__proto__['name'] // 不存在，继续查找 person.__proto__.__proto__ // 是一个对象，可以继续 person.__proto__.__proto__['name'] // 不存在, 继续查找 person.__proto__.__proto__.__proto__ // null !!!! 停止查找，返回 undefined </code></pre> <p>原来路的尽头是一场空。</p> <p>最后，再回过头来看看上一节的那演示代码：</p> <pre><code class="language-js">function Person(name, age) { this.name = name; this.age = age; } // 1️⃣ Person.prototype.getName = function() { return this.name; }; // 2️⃣ Person.prototype.getAge = function() { return this.age; }; // 3️⃣ var person = new Person("Frankie", 20); // 4️⃣ console.log(person); // 5️⃣ console.log(person.getName(), person.getAge()); // 6️⃣ </code></pre> <p>我们来画一个原型链图，或者说，将其整个原型链图画出来？请看下图：</p> <p></p> <p>画完这张图，基本上之前所有的疑问都可以解答了。</p> <p>与其说万物皆对象，万物皆空似乎更加形象。</p> <h2>调料：constructor</h2> <p>前面已经有所提及，但只有原型对象才具有 <code>constructor</code> 这个属性，<code>constructor</code> 用来指向引用它的函数对象。</p> <pre><code class="language-js">console.log(Person.prototype.constructor === Person); // true console.log(Person.prototype.constructor.prototype.constructor === Person); // true </code></pre> <p>这是一种循环引用。当然你也可以在上一节的原型链图中画上去，这里就不赘述了。</p> <h2>补充 JavaScript中的六大内置（函数）对象的原型继承</h2> <p>通过前文的论述，结合相应的代码验证，整理出以下原型链图：</p> <p></p> <p>由此可见，我们更加强化了这两个关掉：</p> <blockquote> <ol> <li>任何内置对象（类）本身的 <code>__proto__</code> 都指向 <code>Function</code> 的原型对象；</li> <li>除了 <code>Object</code> 的原型对象的<code> __proto__</code> 指向 <code>null</code>，其他所有的内置函数对象的原型对象的 <code>__proto__</code> 都指向 <code>Object</code>。</li> </ol> </blockquote> <pre><code>console.log(Object.prototype.__proto__ === null); // true </code></pre> <h2>总结</h2> <p>来几个总结：</p> <ul> <li> <p>若 <code>A</code> 通过 <code>new</code> 创建了 <code>B</code>，则 <code>B.__proto__ = A.prototype</code>。</p> </li> <li> <p><code>__proto__</code> 是原型链查找的起点；</p> </li> <li> <p>执行 <code>B.a</code>，若在 <code>B</code> 中找不到 <code>a</code>，则会在 <code>B.__proto__</code> 中，也就是 <code>A.prototype</code> 中查找，若 <code>A.prototype</code> 中仍然没有，则会继续向上查找，最终，一定会找到 <code>Object.prototype</code>，倘若还找不到，因为 <code>Object.prototype.__proto__</code> 指向 <code>null</code>，因此会返回 <code>undefined</code>；</p> </li> <li> <p>为什么万物皆空，还是那句话，原型链的顶端，一定有 <code>Object.prototype.__proto__</code> 等于 <code>null</code>。</p> </li> </ul> <p>如何用 JavaScript 实现类的继承？</p> <p>请接着下一篇 <a href="https://github.com/tofrankie/blog/issues/213">深入继承原理</a>。</p> </article> <article> <h1>细读 JS | 深入了解从预编译到解析执行的过程</h1> <p>Sun, 26 Feb 2023 10:14:30 GMT</p> <h2>一、前言</h2> <p>从简单说起</p> <pre><code class="language-js">var a = 1; </code></pre> <p>在字面上，这就是简单地将 <code>1</code> 赋值给变量 <code>a</code>。可在 JS 引擎里面，它认为这是两个步骤：<code>var a</code> 和 <code>a = 1</code>，分别是声明和赋值，它们发生在两个不同的阶段。</p> <p>写这篇文章的原因是看到一道题，发现自己对预编译的理解出现了偏差。加上以往也没整理过，久了不接触就会慢慢遗忘、凌乱，所以借此机会整理下预编译的知识点，同时希望这篇文章能帮助屏幕前的你。</p> <h2>二、JS 从加载到执行完经历了什么？</h2> <ol> <li>页面产生便创建了一个 GO 全局对象（Global Object，全局上下文），即 window 对象。</li> <li>第一个脚本文件加载。（加载完成后，接着是 JS 运行三部曲） 1). 语法分析 2). 预编译 3). 解析执行</li> <li>三部曲第一步：语法分析，检查是否合法。</li> <li>三部曲第二步：开始预编译：（其实这里还有创建了 document、navigator、screen 等属性，此处忽略） 1). 查找变量声明，作为 GO 属性，并赋予 undefined； 2). 查找函数声明，作为 GO 属性，并赋予函数体本身（若函数与变量同名，函数会覆盖变量；若多个函数声明是同名，后面的会覆盖前面的）</li> <li>三部曲第三步：开始执行代码。</li> <li>执行完一个 script 块，到下一个 script 块，会重复 2、3、4、5 步骤。</li> </ol> <pre><code><script> console.log(a); // function a() {} console.log(b); // function b() {} console.log(c); // undefined var a = 1; function a() {}; function b() {}; var c = 3; console.log(a); // 1 console.log(d); // Uncaught ReferenceError: d is not defined，且从这里开始代码终止执行 d = 4; console.log(d); /** （有必要说明一下：下面的 GO 是伪代码，为了助于理解罢了） 1. 创建 GO 对象；GO {} 2. 加载 script 块 3. 语法分析 4. 开始预编译 1). 找到变量声明 a 和 c，放到 GO {a: undefined, c: undefined} 2). 找到函数声明 a 和 b，因为函数 a 和变量 a 同名，所以函数覆盖掉变量：GO {a: f(), b: f(), c: undefined} 5. 执行代码 1). 执行到 console.log(a)，然后从 GO 里面找到 a，所以打印出来是函数； 2). 继续往下执行，同理打印 b 也是函数； 3). 同理，c 打印结果是 undefined； 4). 因为 a 赋值 1，所以第二个 console.log(a) 会打印 1； 5). 到了 console.log(d) 这一步，因为暗示全局变量 (imply global variable)，不参与预编译的过程，所以会报引用错误；（代码终止执行，不会继续往下走） */ </script> </code></pre> <blockquote> <p>JavaScript 不是全文编译完再执行，而是块编译，即一个 script 块中预编译然后执行，再按顺序预编译下一个 script 块再执行。但是此时上一个 script 块中的数据都是可用的，而下一个 script 块中的函数和变量则是不可用的。</p> </blockquote> <h2>三、解析执行阶段，当遇到函数执行的时候，会产生 AO 活跃对象（Activation Object，活跃上下文），那过程又是怎样的呢？</h2> <p>首先要明确一点，<strong>预编译不仅仅发生在 script 代码块执行之前，还发生在函数执行之前</strong>。</p> <p>函数执行之前的“预编译”的过程：</p> <ol> <li>创建 AO 对象</li> <li>查找形参和变量声明，并赋予 undefined；</li> <li>实参值赋给形参；</li> <li>查找函数声明，赋予函数本身；</li> </ol> <p>预编译完了之后，接着是执行函数。（下面举例说明下这个过程）</p> <pre><code><script> function fn(a) { console.log(a); // 123 console.log(b); // undefined console.log(c); // function c() {} var a = 1; var b = function() {}; // 注意：函数表达式，其实就是将一个匿名函数赋值给变量 b function c() {}; console.log(a); // 1 console.log(b); // function() {} } fn(123); /** 有必要说明一下：下面的 AO 是伪代码，为了助于理解罢了 1. 创建 AO 对象；AO {} 2. 预编译（还包括 arguments 等，此处忽略） 1). 查找形参和变量声明 a、b 和 c，放到 AO {a: undefined, b: undefined} 2). 实参赋值给形参：AO {a: 123, b: undefined} 3). 找到函数声明 c，AO {a: 123, b: undefined, c: f()} 3. 执行代码 1). 执行到 console.log(a)，然后从 AO 里面找到 a，所以打印出来是 123； 2). 继续往下执行，打印 b 是 undefined； 3). 继续往下，a 赋值 1；b 赋值一个匿名函数； 4). 第二个 console.log(a) 会打印 1； 5). 第二个 console.log(b) 会打印 function； */ </script> </code></pre> <h2>四、其他</h2> <p>其实 GO 和 AO 就差在形参和实参这俩个东西。这也是我们常说的“提升” （Hoisting）。</p> <p>其实这些蛋疼的情况，几乎只会出现在“面试”上，在实际的项目中几乎很少出现。如果在多人共同维护项目中，估计早被打死了。因为可读性差而且维护成本高。</p> <p>在 ES6 中，新增的 let、const、class 特性就不会存在提升的问题，声明变量，必须要在调用之前发生，否则就会报错。这应该也是一个信号，减少那些蛋疼的情况。</p> <p>但是无论是为了对付面试，还是为了了解 JavaScript 内部运行的原理，作为前端开发的一员，我们都应该要弄清楚。</p> </article> <article> <h1>JavaScript 之冒泡排序</h1> <p>Sun, 26 Feb 2023 10:09:55 GMT</p> <p></p> <p>冒泡排序，是一个相对较为简单易于理解的排序算法。</p> <h2>原理</h2> <ol> <li>比较相邻的两个元素a、b。若 a > b，则互换 a 与 b 的位置，否则不变。</li> <li>按照上面的规则，第一轮循环次数为 <code>array.length - 1</code>，一轮循环结束，数组最后一项应该是最大数。</li> <li>第二轮开始，循环次数为 <code>array.length - 1 - 1</code>，同样把本次循环的最大项互换到 <code>array[length - 1 - 1]</code> 的位置上。</li> <li>以此类推...</li> </ol> <h2>图示</h2> <p> ▲ 冒泡排序</p> <h2>实现</h2> <blockquote> <p>以升序为例</p> </blockquote> <pre><code class="language-js">function bubbleSort(arr) { for (let i = 0; i < arr.length - 1; i++) { for (let j = 0; j < arr.length - i - 1; j++) { if (arr[j] > arr[j + 1]) { ;[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]] } } } return arr } const array = [8, 12, 4, 0, 22, 8, 21, 3, 56] console.log(bubbleSort(array)) // [0, 3, 4, 8, 8, 12, 21, 22, 56] </code></pre> <h2>时间复杂度</h2> <p>可知冒泡排序执行次数是 <code>(n-1) + (n-2) + ... + 2 + 1</code> = <code>(n^2 - n)/2</code>，根据<a href="https://github.com/tofrankie/blog/issues/203">时间复杂度推导方式</a>，可得到 <code>O(n^2)</code>。</p> </article> <article> <h1>五、Ajax 之响应解码</h1> <p>Sun, 26 Feb 2023 09:45:34 GMT</p> <p>我们接收到的响应主体类型可以是多种形式的，包括字符串 String、ArrayBuffer 对象、二进制 Blob 对象、JSON 对象、JavaScript 文件以及表示 XML 文档的 Document 对象等。下面将针对不同的主体类型，进行相应的响应解码。</p> <h2>属性</h2> <p>在介绍响应解码之前，要先了解一下 <a href="https://github.com/tofrankie/blog/issues/205">XHR 对象</a>的属性。一般地，如果接收的数据是字符串，使用 responseText 即可，这也是最常用的用于接收数据的属性。但如果获取了其他类型的数据，使用 responseText 可能就不太合适了。</p> <h3>1. responseText</h3> <p>该属性返回从服务器接收到的字符串，该属性<strong>只读</strong>。如果本次请求没有成功或者数据不完整，该属性就会等于 <code>null</code>。如果服务器返回的数据格式是 JSON、字符串、JavaScript或者XML，都可以使用 responseText 属性。</p> <h3>2. response</h3> <p>该属性<strong>只读</strong>，返回接收到的数据体。它的类型可以是 ArrayBuffer、Blob、Document、JSON对象、或者字符串，这由 XMLHttpRequest.responseType 属性的值决定。如果本次请求没有成功或者数据不完整，该属性就会等于 <code>null</code>。（IE 9 浏览器不支持）</p> <h3>3. responseType</h3> <p>该属性用来指定服务器返回数据（xhr.response）的类型。</p> <ul> <li><code>""</code>：字符串（默认值）</li> <li><code>"arraybuffer"</code>：ArrayBuffer 对象</li> <li><code>"blob"</code>：Blob 对象</li> <li><code>"document"</code>：Document 对象</li> <li><code>"json"</code>：JSON 对象</li> <li><code>"text"</code>：字符串</li> </ul> <h3>4. responseXML</h3> <p>该属性返回从服务器接收到的 Document 对象，该属性为<strong>只读</strong>。如果本次请求没有成功，或者数据不完整，或者不能被解析为 XML 或 HTML，该属性等于 <code>null</code>。</p> <h3>5. overrideMimeType()</h3> <p>该方法用来指定服务器返回数据的 MIME 类型。<strong>该方法必须在 send() 之前调用</strong>。传统上，如果希望从服务器取回二进制数据，就要使用这个方法，人为将数据类型伪装成文本数据。但是，这种方法很麻烦，在 XMLHttpRequest 版本升级以后，一般采用指定 responseType 的方法。</p> <h2>字符串</h2> <p>如果服务器返回的结果是一个字符串，则直接使用 responseText 属性解析即可。关于 <code>ajax()</code> 函数封装，已经在<a href="https://github.com/tofrankie/blog/issues/208">上一篇文章</a>中详细介绍过，这里就不再赘述。直接调用 <code>ajax()</code>。</p> <pre><code class="language-html"><button id="btn">取得响应</button> <div id="result"></div> <script> btn.onclick = function () { ajax({ url: './example.php', method: 'GET', timeout: 30000, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (res) { // result 假设为 id 为 result 的节点 result.innerHTML = res }, fail: function (err) { console.log('request fail: ', err) } }) } </script> </code></pre> <pre><code class="language-php"><?php // 设置页面内容的 html 编码格式是 utf-8，内容是纯文本 header("Content-Type: text/plain;charset=utf-8"); echo '你好，世界'; ?> </code></pre> <h2>JSON</h2> <p>使用 ajax 最常用的传输方式就是 JSON 字符串，直接使用 responseText 属性解析即可。</p> <pre><code class="language-js">ajax({ success: function (res) { const data = JSON.parse(res) } }) </code></pre> <h2>JS</h2> <p>使用 ajax 也可以接收 js 文件。仍然使用 responseText 来接收数据，但要使用 <code>eval()</code> 来执行代码。</p> <pre><code class="language-js">// 此处省略一万行代码 ajax({ success: function (res) { eval(res) } }) </code></pre> <p>未完待续...</p> <p>后续补上 xml、blob、arraybuffter...</p> </article> <article> <h1>四、Ajax 之 GET、POST 请求方式</h1> <p>Sun, 26 Feb 2023 09:45:05 GMT</p> <p>在<a href="https://github.com/tofrankie/blog/issues/205">上一篇</a>中，概要地介绍了 XHR 对象的使用，本文将详细地介绍使用 XHR 对象发送请求的两种方式 <code>GET</code> 和 <code>POST</code>。</p> <h2>一、GET 请求</h2> <p>GET 请求是最常见的请求类型，最常用于向服务器查询某些信息，它适用于当 URL 完全指定请求资源，当请求对服务器没有任何副作用以及当服务器的响应是可缓存的的情况下。</p> <h3>1. 数据发送</h3> <p>使用 GET 方式发送请求时，数据被追加到 <code>open()</code> 方法中的 URL 的末尾。数据以 <code>?</code> 问号开始，属性名和属性值之间用 <code>=</code> 等号连接，键值对之间使用 <code>&</code> 分隔。使用 GET 方式发送的数据常常被称为查询字符串。</p> <pre><code class="language-js">xhr.open('GET', 'example.php?name1=value1&name2=value2', true) </code></pre> <h3>2. 编码</h3> <p>由于 URL 无法识别特殊字符，所以如果数据中包含特殊字符（如中文），则需要使用 encodeURIComponent() 进行编码。</p> <pre><code class="language-js">const url = 'example.php?name=' + encodeURIComponent('越前君') // url 被编码成：example.php?name=%E8%B6%8A%E5%89%8D%E5%90%9B xhr.open('GET', url, true) </code></pre> <blockquote> <p>注意：<code>encodeURIComponent()</code> 只是六种编解码方法的一种，关于它们的详细信息，<a href="http://www.cnblogs.com/xiaohuochai/p/6144157.html#anchor4">请点击这里</a>。</p> </blockquote> <h3>3. 写个函数来编码</h3> <pre><code class="language-js">function addURLParam(url, name, value) { url += url.indexOf('?') > -1 ? '&' : '?' url += encodeURIComponent(name) + '=' + encodeURIComponent(value) return url } let url = 'example.php' url = addURLParam(url, 'name1', 'Frankie') url = addURLParam(url, 'name2', 'Mandy') xhr.open('GET', url, true) </code></pre> <h3>4. 缓存</h3> <p>在 GET 请求中，为了避免缓存的影响，可以向 URL 添加一个随机数或者时间戳。</p> <pre><code class="language-js">xhr.open('GET', 'example.php?' + Number(new Date()), true) // 或者 xhr.open('GET', 'example.php?' + Math.random(), true) </code></pre> <h3>5. 封装 GET 方法</h3> <pre><code class="language-js">function get(url, data, callback) { let xhr // 创建 xhr 对象 if (window.XMLHttpRequest) { xhr = new window.XMLHttpRequest() } else { xhr = new ActiveXObject('Microsoft.XMLHTTP') } // 监听请求完成 xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { typeof callback === 'function' && callback(xhr.responseText) } } // 设置超时 xhr.ontimeout = function () { typeof callback === 'function' && callback('The request was timed out!') } xhr.timeout = 30000 // 编码特殊字符 for (const key in data) { url += url.indexOf('?') > -1 ? '&' : '?' url += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) } // 添加时间戳，防止缓存 url += (url.indexOf('?') > -1 ? '&' : '?') + Number(new Date()) // 建立、发送请求 xhr.open('GET', url, true) xhr.send(null) } // 发起 GET 请求 get('example.php', { name: 'Frankie', age: '20', sex: '男' }, function (res) { // callback statements... }) </code></pre> <h2>二、POST 请求</h2> <p>使用频率仅次于 GET 请求的是 POST 请求通常用于向服务器发送应该被保存的数据。POST 方法常用于 HTML 表单。它在请求主体中包含额外数据且这些数据常存储到服务器上的数据库中。相同 URL 的重复 POST 请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。</p> <p>POST 请求应该把数据作为请求的主体提交，而 GET 请求传统上不是这样。POST 请求的主体可以包含非常多的数据，而且格式不限。在 open() 方法第一个参数位置传入 'POST' （大小写不限制，通常习惯大写），就可以初始化一个 POST 请求了。</p> <pre><code class="language-js">xhr.open('POST', 'example.php', true) </code></pre> <h3>1. 设置请求头</h3> <p>发送 POST 请求的第二步就是向 send() 方法传入某些数据。由于 XHR 最初的设计是为了处理 XML，因此可以在此传入 XML DOM 文档，传入的文档经序列化之后将作为请求主体被提交到服务器。亦可以在此传入任何想发送到服务器的<strong>字符串</strong>。</p> <p>默认情况下，服务器对 POST 请求和提交 Web 表单的请求并不会一视同仁。因此，服务器端必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。不过，可以使用 XHR 来模仿表单提交：首先将 <code>Content-Type</code> 头部信息设置为 <code>application/x-www-form-urlencoded</code>，也就是表单提交时的内容类型。</p> <pre><code class="language-js">xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') </code></pre> <p>如果不设置 Content-Type，发送给服务器的数据就不会出现在 <code>$POST</code> 超级全局变量中。这时要访问同样的数据，需借助 <code>$HTTP_RAW_POST_DATA</code> 。</p> <blockquote> <p>如果对相同的头调用多次 setRequestHeader()，新值不会取代之前指定的值。相反，HTTP 请求将包含这个头的多个副本或者这个头将指定多个值。</p> </blockquote> <h3>2. 发送主体</h3> <p>接下来要以适当的格式创建一个字符串，并使用 send() 方法发送。 POST 数据的格式与查询字符串格式相同，键和值之间使用 <code>=</code> 等号连接，键值对之间用 <code>&</code> 分隔，如下：</p> <pre><code class="language-js">xhr.send('name=Frankie&age=20') </code></pre> <h3>3. 编码和缓存</h3> <p>由于使用 POST 方式传递数据时，需要设置请求头 <code>content-type</code>，这一步骤已经能勾自动对特殊字符（如中文）进行编码，所以就不需要使用 encodeURIComponent() 方法了。POST 请求主要用于数据提交，相同 URL 的重复 POST 请求从服务器得到的响应可能不同，所以不应该缓存使用 POST 方法的请求。</p> <h3>4. 性能</h3> <p>GET 对发送信息的数量有限制，一般在 2000 个字符。与 GET 请求相比，POST 请求消耗的资源要更多一些。从性能的角度来看，以发送相同的数据计算，GET 请求的速度最多可 POST 请求的两倍。</p> <h3>5. 封装 POST 方法</h3> <pre><code class="language-js">function post(url, data, callback) { let xhr // 创建 xhr 对象 if (window.XMLHttpRequest) { xhr = new window.XMLHttpRequest() } else { xhr = new ActiveXObject('Microsoft.XMLHTTP') } // 监听请求完成 xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { typeof callback === 'function' && callback(xhr.responseText) } } // 设置超时 xhr.ontimeout = function () { typeof callback === 'function' && callback('The request was timed out!') } xhr.timeout = 30000 // 序列化 data let strData = '' for (const key in data) { strData += '&' + key + '=' + data[key] } strData = strData.substr(1) // 初始化请求 xhr.open('POST', url, true) // 设置请求头 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded') // 发送请求 xhr.send(strData) } // 发起 POST 请求 post('example.php', { name: 'Frankie', age: '20', sex: '男' }, function (res) { // callback statements... }) </code></pre> <h2>三、将 GET 和 POST 封装一下</h2> <pre><code class="language-js">function ajax(opt) { // 请求 url let url = opt.url ? opt.url : '' // 默认异步 const isAsync = typeof opt.async !== 'undefined' ? !!opt.async : true // 默认 GET 方法 const method = opt.method && opt.method.toUpperCase() === 'POST' ? 'POST' : 'GET' // 成功回调 const successCallback = typeof opt.success === 'function' ? opt.success : null // 失败回调 const failCallback = typeof opt.fail === 'function' ? opt.fail : null let xhr // 创建 xhr 对象 if (window.XMLHttpRequest) { xhr = new window.XMLHttpRequest() } else { xhr = new ActiveXObject('Microsoft.XMLHTTP') } // 监听请求完成 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { successCallback && successCallback(xhr.responseText) } else { failCallback && failCallback(xhr.responseText) } } } // 设置超时（同步不能设置超时） if (isAsync) { xhr.ontimeout = function () { console.error('The request was timed out!') } xhr.timeout = opt.timeout ? opt.timeout : 30000 } if (method === 'POST') { // POST 处理 let strData = '' for (var key in opt.data) { strData += '&' + key + '=' + opt.data[key] } strData = strData.substr(1) xhr.open(method, url, isAsync) if (opt.headers) { for (const key2 in opt.headers) { xhr.setRequestHeader(key2, opt.headers[key2]) } } xhr.send(strData) } else { // GET 处理 for (var key in opt.data) { url += url.indexOf('?') > -1 ? '&' : '?' url += encodeURIComponent(key) + '=' + encodeURIComponent(opt.data[key]) } url += (url.indexOf('?') > -1 ? '&' : '?') + Number(new Date()) xhr.open(method, url, isAsync) xhr.send() } } // 发起请求 ajax({ url: './example.php', method: 'POST', data: { name: 'Frankie', age: 20 }, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (res) { console.log('request success: ', res) }, fail: function (err) { console.log('request fail: ', err) } }) </code></pre> <p>下一篇：<a href="https://github.com/tofrankie/blog/issues/209">Ajax 之响应解码</a></p> <p>The end.</p> </article> <article> <h1>三、HTTP 协议</h1> <p>Sun, 26 Feb 2023 09:44:33 GMT</p> <p>上一篇介绍了：<a href="https://github.com/tofrankie/blog/issues/206">HTTP Content-Type 详解</a></p> <h2>什么是 HTTP 协议？</h2> <p>HTTP，全称是 HyperText Transfer Protocol，中文叫做超文本传输协议。它是一种用于分布式、协作式和超媒体信息系统的应用层协议。</p> <p>一系列发布的 RFC 中，最著名的是 1999 年 6 月公布的 RFC 2616，定义了 HTTP 协议中现今广泛使用的一个版本 <code>HTTP/1.1</code>。直到 <code>HTTP/2</code> 于 2015 年 5 月的 RFC 7540 正式发布，取代了 HTTP/1.1 成为 HTTP 的实现标准。</p> <h2>HTTP 协议概述</h2> <p>HTTP 是一个客户端（用户）和服务器端（网站）请求和应答的标准（TCP）。通过使用网页浏览器、网络爬虫或者其他工具，客户端发起一个 HTTP 请求到服务器上指定的端口（默认端口为 80），我们称这个客户端为用户代理程序（user agent）。应答的服务器上存储这一些资源，比如 HTML文件、图像等，我们称这个应答服务器为源服务器（origin server）。在用户代理程序和源服务器中间可能存在多个“中间层”，比如代理服务器、网关或者隧道（tunnel）。</p> <p>尽管 TCP/IP 协议是互联网上最流行的应用，但在 HTTP 协议中，并没有规定必须使用它或者他支持的层。事实上，HTTP 可以在任何互联网协议上，或者其他网络上实现。HTTP 假定其下层协议提供可靠的传输。因此，任何能够提供这种保证的协议都可以被其使用。因此，也就是其在 TCP/IP 协议族使用 TCP 作为其传输层。</p> <p>通常，由 HTTP 客户端发起一个请求，创建一个到服务器指定端口（默认为 80）的 TCP 连接。HTTP 服务器则在那个端口监听客户端的请求。一旦收到请求，服务器会向客户端返回一个状态，比如 “HTTP/1.1 200 OK”，以及返回的内容，如请求的文件、错误信息、或者其他信息。</p> <h2>HTTP 工作原理</h2> <p>HTTP 协议定义 Web 客户端如何从 Web 服务器请求 Web 页面，以及服务器如何把 Web 页面传送给客户端。HTTP 协议采用了“请求/响应模型”。</p> <p>客户端想服务器发送一个请求报文，请求报文包含了请求方法、URL协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或错误代码、服务器信息、响应头部和响应数据。</p> <p>HTTP 报文可以分为两类：请求报文（request message）和响应报文（response message），两者的基本报文结构相同。</p> <p></p> <p>请求报文的格式：</p> <pre><code class="language-xml"><method> <request-URL> <version> <headers> <entiry-body> </code></pre> <p>响应报文格式：</p> <pre><code class="language-xml"><version> <status> <reason-phrase> <headers> <entity-body> </code></pre> <p>报文对应表示：</p> <pre><code>// method: 客户端希望服务器对资源执行的动作。是一个单独的词，比如 GET、HEAD 或 POST; // request-URL: 命名了所请求的资源，或者 URL 路径组件的完整 URL // version: 报文所使用的 HTTP 版本，格式：HTTP/<major>.<minor>，主版本号和次版本号都是整数 // headers: 首部，可以有零个或多个首部，毎个首部都包含一个名字，后面跟着一个冒号（:），然后是一个可选的空格，接着是一个值，最后是一个 CRLF。首部是由一个空行（CRLF）结束的，表示了首部列表的结束和实体主体部分的开始 // entity-body: 主体部分，包含一个由任意数据组成的数据块，并不是所有的报文都包含实体的主体部分，有时报文是已一个 CRLF 结束的。 // 注意：请求行、响应行的每个字段都是由“空格符”进行分割的。 </code></pre> <h2>HTTP 请求/响应的步骤</h2> <ol> <li> <p>客户端连接到 Web 服务器一个 HTTP 客户端。通常是浏览器，与 Web 服务器的 HTTP 端（默认为 80）建立一个 TCP 套接字连接。如：<a href="http://www.baidu.com">http://www.baidu.com</a>；</p> </li> <li> <p>发送 HTTP 请求通过 TCP 套接字，客户端向 Web 服务器发送一个文本的请求报文，<strong>一个请求报文包括请求行、请求头部、空行和请求数据 4 部分组成。</strong></p> </li> <li> <p>服务器接受请求并返回 HTTP 响应 Web 服务器解析请求，定位请求资源。服务器将资源副本写到 TCP 套接字，由客户端读取。一个响应由状态行、响应头部、空行和响应数据 4 部分组成。</p> </li> <li> <p>释放 TCP 连接如果 connect 模式为 close，则服务器阻断关闭 TCP 连接，客户端被动关闭连接，释放 TCP 连接；如果 connection 模式为 keepalive，则该连接会保持一段时间，在改时间内可以继续接收请求。</p> </li> <li> <p>客户端浏览器解析 HTML 内容。客户端浏览器首先解析状态行，查看表明请求是否成功的状态代码，然后解析每一个响应头，响应头告知以下为若干字节的 HTML 文档和文档的字符集。客户端浏览器读取响应数据 HTML，根据 HTML 语法堆砌进行格式化，并在浏览器窗口中显示。</p> </li> </ol> <p><strong>一个经典问题：在浏览器地址栏键入 URL，按下回车之后会经历什么？</strong></p> <ol> <li>浏览器向 DNS 服务器请求解析该 URL 中域名对应的 IP 地址；</li> <li>解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立 TCP 连接；</li> <li>服务器发出读取文件的HTTP请求（URL 中域名后面部分对应的文件），该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器；</li> <li>服务器对浏览器请求作出响应，并把对应的 HTML 文本发送给浏览器；</li> <li>释放 TCP 连接；</li> <li>浏览器将 HTML 文档渲染并显示内容；</li> </ol> <h3>请求方法</h3> <p>HTTP 1.1 提供了八种方法来以不同方式操作指定的资源</p> <ul> <li>GET：获取资源</li> <li>POST：传输实体主体</li> <li>PUT：传输文件</li> <li>HEAD：获取报文首部</li> <li>DELETE：删除文件</li> <li>OPTIONS：询问支持的方法</li> <li>TRACE：追踪路径</li> <li>CONNECT：要求用隧道协议连接代理</li> </ul> <hr> <ul> <li> <p><strong>GET</strong>：向指定的资源发出“显示”请求。使用GET方法应该只用在读取数据，而不应当被用于产生“副作用”的操作中，例如在Web Application中。其中一个原因是GET可能会被网络蜘蛛等随意访问。</p> </li> <li> <p><strong>HEAD</strong>：与GET方法一样，都是向服务器发出指定资源的请求。只不过服务器将不传回资源的本文部分。它的好处在于，使用这个方法可以在不必传输全部内容的情况下，就可以获取其中“关于该资源的信息”（元信息或称元数据）。</p> </li> <li> <p><strong>PUT</strong>：向指定资源位置上传其最新内容。</p> </li> <li> <p><strong>POST</strong>：向指定资源提交数据，请求服务器进行处理（例如提交表单或者上传文件）。数据被包含在请求本文中。这个请求可能会创建新的资源或修改现有资源，或二者皆有。</p> </li> <li> <p><strong>TRACE</strong>：回显服务器收到的请求，主要用于测试或诊断。</p> </li> <li> <p><strong>OPTIONS</strong>：这个方法可使服务器传回该资源所支持的所有HTTP请求方法。用'*'来代替资源名称，向Web服务器发送OPTIONS请求，可以测试服务器功能是否正常运作。</p> </li> <li> <p><strong>DELETE</strong>：请求服务器删除Request-URI所标识的资源。</p> </li> <li> <p><strong>CONNECT</strong>：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。通常用于SSL加密服务器的链接（经由非加密的HTTP代理服务器）。</p> </li> </ul> <p>注意：</p> <ol> <li> <p>方法名称是区分大小写的。当某个请求所针对的资源不支持对应的请求方法的时候，服务器应当返回状态码 405（Method Not Allowed），当服务器不认识或者不支持对应的请求方法的时候，应当返回状态码 501（Not Implemented）。</p> </li> <li> <p>HTTP 服务器至少应该实现 GET 和 HEAD 方法，其他方法都是可选的。当然，所有的方法支持的实现都应当匹配下述的方法各自的语义定义。此外，除了上述方法，特定的HTTP服务器还能够扩展自定义的方法。例如 PATCH（由 RFC 5789 指定的方法）用于将局部修改应用到资源。</p> </li> <li> <p>GET 提交的数据大小有限制（因为浏览器对 URL 的长度有限制），而 POST 方法提交的数据没有限制.</p> </li> </ol> <h3>状态码</h3> <p>HTTP 状态码负责表示客户端 HTTP 请求的返回结果、标记服务器端处理是否正常、通知出现的错误等工作。HTTP 状态码被分成了“五”大类，不同的类型代表不同类别的状态码。</p> <table> <thead> <tr> <th>状态码</th> <th>类别</th> <th>原因短语</th> </tr> </thead> <tbody> <tr> <td>1XX</td> <td>Information（信息性状态码）</td> <td>表示接收的请求正在处理</td> </tr> <tr> <td>2XX</td> <td>Success（成功状态码）</td> <td>表示请求正常处理完毕</td> </tr> <tr> <td>3XX</td> <td>Redirection（重定向状态码）</td> <td>表示需要进行附加操作以完成请求</td> </tr> <tr> <td>4XX</td> <td>Client Error（客户端错误状态码）</td> <td>表示服务器无法处理请求</td> </tr> <tr> <td>5XX</td> <td>Server Error（服务器错误码）</td> <td>表示服务器处理请求出错</td> </tr> </tbody> </table> <p>更具体的状态码：</p> <p></p> <p></p> <p></p> <p>下一篇：<a href="https://github.com/tofrankie/blog/issues/208">Ajax 之 GET、POST 请求方式</a></p> <h2>参考链接</h2> <ul> <li><a href="https://www.cnblogs.com/xiaohuochai/p/6156435.html">前端学 HTTP 之报文起始行</a></li> <li><a href="https://www.cnblogs.com/an-wen/p/11180076.html">HTTP 协议超级详解</a></li> </ul> <p>The end.</p> </article> <article> <h1>二、HTTP Content-Type 详解</h1> <p>Sun, 26 Feb 2023 09:43:13 GMT</p> <p>上一篇介绍了：<a href="https://github.com/tofrankie/blog/issues/205">神秘的 XMLHttpRequest 对象</a></p> <p>之前写 JavaScript 时，并没有特意去整理过类似的知识点，本文整理记录下，方便自己查阅。</p> <h2>什么是 Content-Type？</h2> <p>Media-Type（Internet Media Type），互联网媒体类型，也叫做 MIME 类型。在互联网中有成百上千种不同的数据类型，HTTP 在传输数据对象时会为他们打上称为 MIME 的数据格式标签，用于区分数据类型。最初 MIME 是用于电子邮件系统的，后来 HTTP 也采用了这一方案。</p> <p>格式如下：</p> <pre><code>Content-Type: [type]/[subtype]; parameter </code></pre> <blockquote> <p>如：Content-Type: text/html; charset:utf-8</p> </blockquote> <ul> <li><strong>type</strong>：主类型，任意的字符串，如 <code>text</code>，如果是 <code>*</code> 表示所有。</li> <li><strong>subtype</strong>：子类型，用于指定 type 的详细形式，任意的字符串，如 <code>html</code>，同样 <code>*</code> 表示所有，用 <code>/</code> 与主类型隔开。</li> <li><strong>parameter</strong>：可选参数，如 charset、boundary 等。</li> </ul> <h2>常见 type</h2> <ul> <li>Text：用于标准化地表示的文本信息，文本消息可以是多种字符串集合或者多种格式的集合；</li> <li>Multipart：用于连接消息体的多个部分构成一个消息，这些部分可以是不同类型的数据；</li> <li>Application：用于传输营运程序数据或者二进制数据；</li> <li>Message：用于包装一个 Email 消息；</li> <li>Image：用于传输静态图片数据；</li> <li>Audio：用于传输音频或者音声数据；</li> <li>Video：用于传输动态影像数据，可以是与音频编辑咋一起的视频数据格式。</li> </ul> <h2>常见 subtype</h2> <p>为了确保这些值在一个有序而且公开的状态下开发，MIME 使用 Internet Assigned Numbers Authority（IANA）作为中心的注册机制来管理这些值。常用的有如下这些：</p> <ul> <li>text/plain：纯文本</li> <li>text/html：HTML 文档</li> <li>text/xml：XML 文档</li> </ul> <hr> <ul> <li>image/gif：GIF 图像</li> <li>image/jpeg：JPEG 图像（注意：JPG 与 JPEG 没区别，只是 <code>.jpg</code> 的写法更流行而已）（PHP 中为 image/pjpeg）</li> <li>image/png：PNG 图像（PHP 中为 image/x-png）</li> <li>video/mpeg：MPEG 动画</li> <li>message/rfc822：<a href="https://tools.ietf.org/html/rfc822">RFC 822</a> 形式</li> </ul> <hr> <ul> <li>application/octet-stream：任意的二进制数据</li> <li>application/pdf：PDF 文档</li> <li>application/xhtml+xml：XHTML 文档</li> <li>application/msword：Microsoft Word 文件</li> <li>application/x-www-form-urlencoded：使用 HTTP 的 POST 方式提交的表单，<code><form encType=""></code> 中默认的 encType</li> <li>application/json：JSON 数据格式</li> </ul> <hr> <ul> <li>multipart/form-data：用于提交包含文件、非ASCII数据和二进制数据的表单，如文件上传</li> <li>multipart/alternative：HTML 邮件的 HTML 形式和纯文本形式，相同内容使用不同的形式表示</li> </ul> <blockquote> <p>附上：<a href="https://tool.oschina.net/commons?type=22013-05-17">Content-Type 对照表</a></p> </blockquote> <p>下一篇：<a href="https://github.com/tofrankie/blog/issues/207">HTTP 协议</a></p> <p>The end.</p> </article> <article> <h1>一、神秘的 XMLHttpRequest 对象</h1> <p>Sun, 26 Feb 2023 09:35:03 GMT</p> <h2>一、背景</h2> <p>在 1999 年，微软发布 IE5，第一次引入了新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这功能在当时并没有被引起注意，直到 2004 年 Gmail 和 2005 年 Google Map 的发布，才引起广泛的重视。在 2005 年 2 月，Ajax （<code>Asynchronous JavaScript And XML</code>，中文翻译是：<code>异步的 JavaScript 和 XML</code> ）这词第一次提出，指围绕这个功能进行开发的一整套做法。此后，Ajax 成为脚本发起 HTTP 通信的代名词，W3C 也在 2006 年发布了它的国际标准。</p> <h2>二、什么是 XHR 对象？</h2> <p>XHR 是 <code>XMLHttpRequest</code> 的简称。这是微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。XHR 为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。</p> <h2>三、创建 XHR</h2> <p>IE5是第一款引入 XHR 对象的浏览器，在 IE5中， XHR 对象是通过 MSXML 库中的一个 ActiveX 对象实现的，而 IE7+ 及其他标准浏览器都支持原生的 XHR 对象。</p> <pre><code class="language-js">let xhr if (window.XMLHttpRequest) { xhr = new window.XMLHttpRequest() } else { // IE5, IE6 xhr = new ActiveXObject('Microsort.XMLHTTP') } </code></pre> <blockquote> <p>注意：如果要建立 N 个不同的请求，就要使用 N 个不同的 XHR 对象。当然可以重用已存在的 XHR 对象，但这会终止之前通过该对象挂起的任何请求。</p> </blockquote> <h2>四、发送请求</h2> <p>发送请求的过程，包括 open 和 send 两个方法。</p> <h3>open</h3> <p>在使用 XHR 对象时，要调用的第一个方法是 <code>open()</code> ，该方法接收 3 个参数；</p> <pre><code class="language-js">// xhr.open(method, url, async) xhr.open('GET', 'example.php', false) </code></pre> <ul> <li><strong>method</strong>：即指定发送请求的方式，字符串类型，不区分大小写，但通常使用大写字母。如 <code>GET</code>、<code>POST</code>。还可以是 <code>HEAD</code>、<code>OPTIONS</code>、<code>PUT</code>。而由于安全风险的原因，<code>CONNECT</code>、<code>TRACE</code>、<code>TRACK</code> 被禁止使用。（ <a href="https://www.cnblogs.com/xiaohuochai/p/6156435.html">关于HTTP协议8种常用方法的详细介绍，可以点击这里</a>）</li> <li><strong>url</strong>：所要请求 URL，该 URL相对于执行代码的当前页面，且<strong>只能</strong>向<strong>同一个域中</strong>使用<strong>相同端口</strong>和<strong>协议</strong>的 URL 发送请求。如果 URL 与启动请求的页面有任何差别，都会引发安全错误。</li> <li><strong>async</strong>：表示是否异步发送请求，布尔类型（<code>true</code> 表示异步，<code>false</code> 表示同步）。如果不填写，默认 <code>true</code>，表示异步发送。</li> <li>如果请求一个受密码保护的 URL，把用于认证的用户名和密码作为第 4 个和第 5 个参数传递给 <code>open()</code> 方法。</li> </ul> <blockquote> <p>如果接收的是同步响应，则需要将 <code>open()</code> 方法的第三个参数设置为 <code>false</code>，那么 <code>send()</code> 方法将阻塞直到请求完成。</p> <p>同步请求是吸引人的，但应该避免使用它们。客户端 JavaScript 是单线程的，当 <code>send()</code> 方法阻塞时，他通常会导致整个页面冻结。如果连接的服务器响应慢，那么用户的浏览器看起来像“假死”状态。</p> </blockquote> <h3>send</h3> <p><code>send()</code> 方法接收一个参数，即要作为请求主体发送的数据。调用 send() 方法后，请求被分派到服务器。</p> <ul> <li>如果 <code>GET</code> 请求， <code>send()</code> 方法<strong>无参数，或者参数为 <code>null</code></strong>；</li> <li>如果 <code>POST</code> 请求，<code>send()</code> 方法参数为<strong>要发送的数据，字符串类型</strong>，所以一般需要序列化。</li> </ul> <pre><code class="language-js">xhr.open('GET', 'example.php', false) xhr.send(null) </code></pre> <h2>五、接收响应</h2> <p>一个完整的 HTTP 响应由状态码、响应头集合、响应主体组成。在收到响应后，这些都可以通过 XHR 对象的属性和方法使用，主要有以下 4 个属性：</p> <ul> <li><strong>responseText</strong>：作为响应主体被返回的文本（文本形式）；</li> <li><strong>responseXML</strong>：如果响应的内容是 <code>text/xml</code> 或 <code>application/xml</code>，这个属性中将保存这响应数据的 XML DOM 文档（document 形式）</li> <li><strong>status</strong>：HTTP 状态码（数字形式）</li> <li><strong>statusText</strong>：HTTP 状态说明（文本形式）</li> </ul> <p>在接收到响应之后，第一步是检测 status 属性，以确定响应已经成功返回。一般来说，可以将 HTTP状态码为 200 作为成功的标志。此时，responseText 属性的内容已经就绪，而且在内容类型正确的情况下， responseXML 也可以访问了。此外，状态码为 304 表示请求的资源并没有被修改，可以直接使用浏览器中的缓存版本。当然，也意味着响应是有效的。</p> <p>无论内容类型是什么，响应主体的内容都会保存到 responseText 属性中，而对于非 XML 数据而已，responseXML 属性的值将为 null。</p> <pre><code class="language-js">// 这是同步的方式，（异步则需要监听 onreadystatechange 事件，继续往下看） if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { alert(xhr.responseText) } else { alert('request was unsuccessful: ' + xhr.status) } </code></pre> <h2>六、readyState</h2> <p>当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XHR 对象提供了 onreadystatechange 事件机制来捕获请求的状态，继而实现响应。</p> <p>每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XHR 的状态信息。 readyState 存有 XHR 的状态，从 0 到 4 发生变化。</p> <ul> <li><strong>0 （Uninitialized 未初始化）：请求未初始化</strong>（此阶段确认XMLHttpRequest对象是否创建，还没有调用 <code>open()</code> 方法）</li> <li><strong>1（Loading 载入）：服务器连接已建立</strong>（此阶段调用 open() 方法进行初始化，并调用 send() 方法向服务端发送请求）</li> <li><strong>2（Loaded 载入完成）：请求已接收</strong>（此阶段 send() 方法执行完成，且已接收到服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用）</li> <li><strong>3（Interactive 交互）：请求处理中</strong>（此阶段解析接收到的服务器端响应数据，即根据服务器端响应头部返回的 MIME 类型把数据转换成能通过 responseBody，responseText 或 responseXML 的属性存取的格式）</li> <li><strong>4（Completed 完成）：请求已完成，且响应已就绪</strong>（此阶段响应内容解析完成，可以在客户端调用了）</li> </ul> <pre><code class="language-js">// 异步方式 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { alert('request was successful!') } } </code></pre> <blockquote> <p>注意：理论上，只要 <code>readyState</code> 属性值发生改变，都会触发一次 <code>onreadystatechange</code> 事件。但是为了确保跨浏览器的兼容性，必须在调用 <code>open()</code> 之前指定 <code>onreadystatechange</code> 事件处理程序，否则将无法接收 <code>readyState</code> 属性为 <code>0</code> 和 <code>1</code> 的情况。</p> </blockquote> <h2>七、超时</h2> <p>XHR 对象的 timeout 属性等于一个整数，单位毫秒（ms），表示该请求的最大请求时间。即在多少毫秒后，如果请求仍然没有得到结果，就会自动终止。<strong>该属性默认为 0，表示没有时间限制。</strong></p> <p>如果请求超时，将会触发 ontimeout 事件。</p> <pre><code class="language-js">xhr.open('POST', 'example.php', true) xhr.ontimeout = function () { console.log('The request timed out') } xhr.timeout = 1000 xhr.send() </code></pre> <blockquote> <p>IE8 浏览器不支持该属性。</p> </blockquote> <h2>八、最后</h2> <p>只要弄清楚了整个过程，就会发现其实它并没有那么神秘，对吧。概而括之，整个 XHR 对象的生命周期应该包括如下阶段：<strong>创建 → 初始化请求 → 发送请求 → 接收数据 → 解析数据 → 完成</strong>。</p> <pre><code class="language-js">// 整个过程 function httpRequest() { let xhr // 创建 xhr 对象 if (window.XMLHttpRequest) { xhr = new window.XMLHttpRequest() } else { // 为了兼容 IE5、IE6 xhr = new ActiveXObject('Microsoft.XMLHTTP') } // 异步方式必须采用 onreadystatechange 来监听 xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { alert('The request was successful! ' + xhr.responseText) // handle statements... } } // 设置超时处理 xhr.ontimeout = function () { alert('The request was timed out') } xhr.timeout = 3000 xhr.open('POST', './test.ajax', true) // 如需设置 HTTP 请求头，必须在 open() 之后、send() 之前调用，例如： // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencode'); // 序列化 xhr.send(JSON.stringify({ name: 'test' })) } httpRequest() </code></pre> <p>下一篇：<a href="https://github.com/tofrankie/blog/issues/206">HTTP Content-Type详解</a></p> <h2>九、参考链接</h2> <ul> <li><a href="https://www.cnblogs.com/xiaohuochai/p/6036475.html">深入理解 Ajax 系列第一篇之 XHR 对象</a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>（MDN）</li> <li><a href="https://blog.csdn.net/sky786905664/article/details/53079487">关于 chrome 控制台警告：Synchronous XMLHttpRequest on the main thread终极解决办法</a></li> </ul> </article> <article> <h1>JavaScript 算法有哪些？</h1> <p>Sun, 26 Feb 2023 09:33:34 GMT</p> <h2>一、算法优劣评判</h2> <ul> <li><strong>稳定</strong>：如果 a 原本在 b 前面，而 a = b，排序之后 a 仍然在 b 的前面；</li> <li><strong>不稳定</strong>：如果 a 原本在 b 前面，而 a = b，排序之后 a 可能会出现在 b 的后面；</li> </ul> <hr> <ul> <li><strong>内排序</strong>：所有排序操作都在内存中完成；</li> <li><strong>外排序</strong>：由于数据太大，因此把数据放在磁盘，而排序通过磁盘和内存中的数据才能进行排序</li> </ul> <hr> <ul> <li><strong>时间复杂度</strong>：一个算法执行所消耗的时间；</li> <li><strong>空间复杂度</strong>：运行完一个算法所需内存的大小；</li> </ul> <h2>二、排序算法</h2> <p></p> <h2>三、时间复杂度的推导</h2> <p>算法的时间复杂度是表示算法所消耗时间大小的量度，通常使用 <code>大 O 表示法</code> 来建立数学模型，即 <code>O(f(n))</code>，随着 <code>n</code> 的数值增大，<code>O(f(n))</code> 的数值增长的越慢就越是时间复杂度低的算法。</p> <ol> <li>用常数 <code>1</code> 取代运行时间中的所有加法常数。</li> <li>在修改后的运行次数函数中，只保留最高阶项。</li> <li>如果最高阶项存在且不是<code>1</code>，则去除与这个项相乘的常数。得到的结果就是大 <code>O</code> 阶。</li> </ol> <p>（如某一步不存在，忽略该步）</p> <h2>四、参考链接</h2> <ul> <li><a href="https://www.cnblogs.com/ybygb-geng/p/9355425.html">js 十大排序算法：冒泡排序</a></li> <li><a href="https://www.cnblogs.com/aimeeblogs/articles/9502050.html">js 十大排序算法详解</a></li> <li><a href="https://www.cnblogs.com/zaking/p/9085240.html">js 算法初窥 07（算法复杂度）</a></li> </ul> </article> <article> <h1>Array.prototype.sort 你真的掌握了吗？</h1> <p>Sun, 26 Feb 2023 09:24:46 GMT</p> <p>在项目开发当中，对数组的排序肯定少不了，类似的升序排序肯定都见过。</p> <pre><code class="language-js">const array = [2, 7, 4, 9, 3] array.sort((a, b) => a - b) // 升序排列：[2, 3, 4, 7, 9] </code></pre> <p>可你有细究过 <code>sort()</code> 内部是怎么实现的吗？</p> <p><code>sort()</code> 方法用 <a href="https://en.wikipedia.org/wiki/In-place_algorithm">原地算法</a> 对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后会按照转换为的字符串的每个字符的 Unicode 位点进行排序。</p> <pre><code class="language-js">array.sort([compareFunction]) // 参数可选 </code></pre> <p>净看概率，可能会有点难理解，然后下面结合代码理解。</p> <h2>一、没有参数</h2> <pre><code class="language-js">// 1. 没问题 const arr1 = [5, 3, 8, 2, 0, -3] arr1.sort() // output: [-3, 0, 2, 3, 5, 8] // 2. 也没问题 const arr2 = ['m', 'c', 'h', 'd'] arr2.sort() // output: ["c", "d", "h", "m"] // 3. 似乎跟预想的不一样啊！小朋友你是否有很多问号 ❓❓❓ const arr3 = [-2, 27, 0, -5, 4] arr3.sort() // output: [-2, -5, 0, 27, 4] </code></pre> <p>为什么 <code>arr3</code> 进行排序之后，返回的为什么不是 <code>[-2, -5, 0, 4, 27]</code> 呢？</p> <p>结合概念来看，其实就没那么难理解了。首先我们没传参数，即采用<strong>默认排序</strong>方式，它会将<strong>每一个元素</strong>转化为<strong>字符串</strong>，接着按照字符串的<strong>每个字符</strong>的 Unicode 位置进行排序。</p> <p>所以，在比较 <code>27</code> 和 <code>4</code> 时，它会先比较 <code>2</code> 和 <code>4</code> ，发现 <code>2</code> 的 Unicode 顺序要比 <code>4</code> 靠前，所以最终的结果是 <code>27</code> 在 <code>4</code> 之前。同样的道理，负数在前是因为 <code>-</code> 的 Unicode 顺序更靠前。（附 <a href="https://tool.oschina.net/commons?type=4">ASCII 对照表</a>）</p> <h2>二、带参，且必须是函数</h2> <p>其实默认的排序方式在实际的应用中，很多不能满足我们的排序要求，所以 sort 也提供了一个参数 <code>comparFunction</code>，来满足我们的各种需求。</p> <blockquote> <p>array.sort(compareFunction(a, b))</p> </blockquote> <p>指明了 <code>compareFunction</code>，那么数组会按照该函数的返回值排序，即 <code>a</code> 和 <code>b</code> 是两个将要被比较的元素</p> <ul> <li>如果 <code>compareFunction(a, b)</code> 小于 <code>0</code>，那么 <code>a</code> 会被排列到 <code>b</code> 之前；</li> <li>如果 <code>compareFunction(a, b)</code> 大于 <code>0</code>，那么 <code>b</code> 会排列到 <code>a</code> 之前；</li> <li>如果 <code>compareFunction(a, b)</code> 等于 <code>0</code>，那么 <code>a</code> 和 <code>b</code> 的相对位置不变。</li> </ul> <h2>三、几种最常见的排序方式</h2> <h3>1. 升序、降序排序</h3> <pre><code class="language-js">// 按照上面的规则，来写个升序排序，那就 so easy 了，对吧 const array = [-2, 27, 0, -5, -4] array.sort((a, b) => { if (a > b) { return 1 } else if (a < b) { return -1 } else { return 0 } }) console.log(array) // [-5, -2, 0, 4, 27] // 简写 // array.sort((a, b) => a - b) // 降序也是同理 // array.sort((a, b) => b - a) </code></pre> <h3>2. 根据对象某属性排序</h3> <pre><code class="language-js">const classroom = [ { name: 'Frankie', age: 18 }, { name: 'Mandy', age: 16 }, { name: 'John', age: 22 }, { name: 'Ada', age: 20 } ] classroom.sort((a, b) => a.age - b.age) console.log(classroom) // [{"name": "Mandy", "age": 16}, {"name": "Frankie", "age": 18}, {"name": "Ada", "age": 20}, {"name": "John", "age": 22}] </code></pre> <h3>3. 根据字母 A-Z 排序</h3> <pre><code class="language-js">const array = ['fifa', 'nba', 'cbb', 'dnfa', 'cba', 'sos', 'dnf'] array.sort((a, b) => { let length = Math.max.apply(null, [a.length, b.length]) for (let i = 0; i < length; i++) { if (a[i] === undefined) { return -1 } else if (b[i] === undefined) { return 1 } else if (a.charCodeAt(i) < b.charCodeAt(i)) { return -1 } else if (a.charCodeAt(i) > b.charCodeAt(i)) { return 1 } } return 0 }) console.log(array) // ["cba", "cbb", "dnf", "dnfa", "fifa", "nba", "sos"] </code></pre> <p>The end.</p> </article> <article> <h1>前端如何实现视觉设计稿</h1> <p>Sun, 26 Feb 2023 09:23:54 GMT</p> <blockquote> <p>内容转自：<a href="https://lulua87.github.io/2017/08/29/How-does-FE-implement-Mockup/">Gaolu - 前端如何实现视觉设计稿</a></p> </blockquote> <p>在这篇文章中将和大家探讨一下关于前端在移动端开发如何去实现视觉设计稿。探讨过后，在大家的实际工作中或许能帮助解决一些问题。</p> <h2>前端工程师需要明白的「像素」</h2> <p>一般设计稿是 <strong>640px</strong> 或者 <strong>750px</strong>（现在最流行），但是 iPhone 5 不是 320px 宽吗，iPhone 6 不是 375px 宽吗? 这里需要理解一下基础概念： <strong>设备像素</strong>(device pixel)，<strong>CSS 像素</strong>(css pixel)以及<strong>设备像素比</strong>(device pixel ratio)。</p> <ul> <li> <p>设备像素 (device pixel): 设备像素设是物理概念，指的是设备中使用的物理像素。比如 iPhone 5 的分辨率 <code>640 x 1136px</code>。</p> </li> <li> <p>CSS 像素 (css pixel): CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使用的逻辑像素。在 CSS 规范中，长度单位可以分为两类，绝对 (absolute) 单位以及相对 (relative) 单位。px是一个相对单位，相对的是设备像素 (device pixel)。</p> </li> <li> <p>设备像素比 (device pixel ratio): 即 <code>window.devicePixelRatio</code>，是设备上物理像素和设备独立像素 (device-independent pixels (dips)) 的比例。公式表示就是 <code>window.devicePixelRatio = 物理像素 / dips</code></p> </li> </ul> <p>垂直手机屏幕下，使用<code><meta name="viewport" content="width=device-width"/></code>，iPhone 5 屏幕物理像素 640 像素，独立像素还是 320 像素，因此，<code>window.devicePixelRatio</code> 等于 2。</p> <p></p> <p>比如 iPhone 5，6 使用的是 Retina 视网膜屏幕（2 倍屏），6 Plus 是 3 倍屏，使用<code>2px × 2px</code>的 device pixel 代表<code>1px × 1px</code>的 css pixel，所以设备像素数为<code>640 × 1136px</code>（5），<code>750 × 1134</code>（6），而 CSS 逻辑像素数为 <code>320 x 568px</code>（5），<code>375 × 667</code>（6）；5，6 的 window.devicePixelRatio=2，6 Plus 为 3。</p> <p></p> <p>H5 适配：rem 方案 rem：是 CSS3 新增的一个相对单位，相对于 html 标签的 font-size 的大小为基础的。而 font-size 的大小可以动态根据手机屏幕宽度document.documentElement.clientWidth 来设置，从而达到自适应屏幕的目的。</p> <p>我这里找了一下<a href="https://m.mi.com/">小米</a>，<a href="http://3g.163.com/touch/">网易</a>，<a href="https://m.lagou.com/">拉勾网</a>，<a href="https://m.taobao.com/">手淘</a> 以及糯米，大同小异。</p> <h3><a href="https://m.mi.com/">小米官网</a></h3> <p></p> <p>设计稿是 720px 的，即 5 英寸屏幕的安卓手机（720 x 1280px）。对于页面缩放和横竖屏事件进行监听，改变 html 根元素字体 <code>clientWidth/720/100</code>。如图是这样计算的 <code>375/(720/100) = 52.0833</code></p> <h3><a href="http://3g.163.com/touch/">网易</a></h3> <p></p> <p></p> <p>iPhone 6 : <code>375/7.5=50</code>, 则知道设计稿应该是基于 iPhone 6 来的，所以它的设计稿竖直放时的横向分辨率为 750px，为了计算方便，取一个 100px 的 font-size 为参照，那么 body 元素的宽度就可以设置为 <code>width: 7.5rem</code>，于是 html 的 <code>font-size=deviceWidth / 7.5</code>。布局时，设计图标注的尺寸除以 100 得到 css 中的尺寸。并且布局中的 <code>font-size</code> 也可用 <code>rem</code> 单位。</p> <h3><a href="https://m.lagou.com/">拉勾网</a></h3> <p></p> <p></p> <pre><code class="language-css">html { font-size: 65.5%; } </code></pre> <p>设置html根元素字体为<code>65.5%</code>，对应px单位则为<code>10.48px</code>，则列表里时间信息字体设置为<code>1rem = 10.48px</code>，chrome在<code>-webkit-text-size-adjust: 100%;</code>情况下小于<code>12px</code>的一律显示为<code>12px</code>。</p> <p>拉勾网页面列表部分是<code>px</code>为单位，字体是<code>rem</code>，底部bar是使用<code>百分百</code>来控制宽高间距。</p> <p>之前网上讨论的比较多的是</p> <pre><code class="language-css">body { font-size: 62.5%; } p { font-size: 1.2em; } </code></pre> <p>则 <code>1em = 16px * 62.5% = 10px</code>，em 的初始值为 <code>1em = 16px</code>，而为了方便计算，换算一下 <code>10 / 16</code>（16px 是 Chrome 浏览器默认字体大小）。缺点是进行任何元素设置，都有可能需要知道他父元素的大小，比较繁琐低效。</p> <h3><a href="https://m.taobao.com/">手淘</a></h3> <p></p> <p>（1）动态设置 viewport的scale</p> <pre><code class="language-js">var scale = 1 / devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); </code></pre> <p>（2）动态计算 html 的 font-size</p> <pre><code class="language-js">document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; </code></pre> <p>（3）布局的时候，各元素的 css 尺寸 = 设计稿标注尺寸/设计稿横向分辨率/10</p> <p>设计稿是 750 的，所以 html 的 font-size 就是 75，如果某个元素是 150px的宽，换算成 rem 就是 150 / 75 = 2rem。</p> <p>整个手淘设计师和前端开发的适配协作基本思路是：</p> <ul> <li>选择一种尺寸作为设计和开发基准</li> <li>定义一套适配规则，自动适配剩下的两种尺寸(介于 iPhone 6的小屏和大屏)</li> <li>特殊适配效果给出设计效果</li> </ul> <p></p> <p>手淘推出了一套移动端适配的方案 - <a href="https://github.com/amfe/lib-flexible">Flexible 方案</a>。</p> <p>总结来说：</p> <ul> <li>动态读取设备宽度并结合设备的像素比</li> <li>动态改变 html 的 font-size 大小 & 页面缩放比例</li> <li>影响以 rem 为单位的元素的最终呈现</li> </ul> <h2>px 方案：css 尺寸为对应设计稿／2</h2> <p>设计稿是 750 的。</p> <p></p> <p></p> <p>优点：简单粗暴，所有 css 尺寸均为设计稿尺寸直接除 2，开发快速简单；缺点：可能出现一排放不下的情况，需要针对小屏幕如 5 及以下做单独适配</p> <h2>vw 方案</h2> <h3><a href="https://m.nuomi.com/">糯米 WAP</a></h3> <p>利用 CSS3 中新增单位 <code><mark style="background: rgb(255, 255, 0); color: rgb(0, 0, 0);">vw</mark></code>，配合 <code><mark style="background: rgb(255, 255, 0); color: rgb(0, 0, 0);"></code>百分比</mark>`来做响应式开发。</p> <table> <thead> <tr> <th>单位</th> <th>释义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>px</td> <td>相对于显示器屏幕分辨率</td> <td>-</td> </tr> <tr> <td>em</td> <td>相对于父元素字体大小</td> <td>-</td> </tr> <tr> <td>rem</td> <td>相对于根元素字体大小</td> <td>css3</td> </tr> <tr> <td>vw</td> <td>相对于视窗的宽度</td> <td>css3</td> </tr> <tr> <td>vh</td> <td>相对于视窗的高度</td> <td>css3</td> </tr> </tbody> </table> <p><code>vw</code> 相对于视窗的宽度：视窗宽度是 <code>100vw</code>。如果视区宽度是 100vm, 则 1vm 是视区宽度的 1/100, 也就是 1%，类似于 width: 1%。那 iPhone 6 来说，<code>document.documentElement.clientWidth=375</code>, 则豆腐块宽度为 <code>375/100*30=112.5px</code></p> <p></p> <p></p> <p>混合: rem px vw 百分百等单位混用</p> <h3>rem & 百分比%</h3> <pre><code class="language-css">body { padding-bottom: 14.0625%; } a.link { width: 30vw; height: 23vw; } </code></pre> <p>略，同上糯米WAP</p> <h3>rem & vw</h3> <pre><code class="language-css">html { font-size: 4.375vw; } </code></pre> <p>这里假设设计稿 640px，则设置根元素 font-size 为 4.375vw，根据屏幕宽度自适应，在视窗宽度为 320px 的时候，正好是 14px (14 / 320 = 0.04375)。达到页面默认字体大小 14px 的目的（其他大小也 ok）。好了，现在页面上所有以 <code>rem</code> 为单位的属性值都会随着屏幕的宽度变化而变化，达到自适应的目的。（<code>自适应不用 js 动态设置根元素大小</code>）</p> <pre><code class="language-css">p { font-size: 1rem; padding-top: 2rem: /* 设计稿上为 28px */ } </code></pre> <h2>总结</h2> <p>在移动端页面开发中，视觉童鞋一般会用 750px（iPhone 6）来出设计稿，然后要求 FE 童鞋能够做到页面是自适应屏幕的，这种情况下就可以用 rem 或者 vm 等相对单位来做适配，愉快和视觉童鞋一起玩耍啦。</p> </article> <article> <h1>JavaScript 深浅拷贝，其实没那么难！</h1> <p>Sun, 26 Feb 2023 09:20:21 GMT</p> <blockquote> <p>本文已过时，请移步《<a href="https://github.com/tofrankie/blog/issues/246">超详细的 JavaScript 深拷贝实现</a>》</p> </blockquote> <blockquote> <p>本文最后更新于 2020-03-03</p> </blockquote> <h2>什么是深浅拷贝？</h2> <ul> <li> <p>浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。</p> </li> <li> <p>深拷贝：将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象</p> </li> </ul> <h2>浅拷贝的几种方式</h2> <p><code>array.slice()</code>、<code>array.concat()</code>、<code>Object.assign()</code> 都能实现浅拷贝，前两个针对数组。还可以用以下这种方式。</p> <pre><code class="language-js">// 浅拷贝 function shallowCopy(source, target = {}) { for (let key in source) { if (source.hasOwnProperty(key)) { target[key] = source[key] } } return target } let student1 = { name: 'Frankie', age: 22, language: ['Chinese', ['English', 'German']] } let student2 = shallowCopy(student1) student2.language[1] = ['French'] console.log(student1) console.log(student2) // 打印对比可知，language 同时改变了 </code></pre> <h3>JSON</h3> <p>利用 <code>JSON.stringify</code> & <code>JSON.parse</code> 方法</p> <p>缺点：</p> <ol> <li>无法拷贝对象中的<strong>方法</strong>属性；</li> <li>无法拷贝对象中的 <strong>undefined</strong> 属性</li> </ol> <h3>JQuery</h3> <p>JQuery 提供的两种方法 <code>$.extend()</code>、<code>$.clone()</code> ，前者是 JS 对象的拷贝、后者是 DOM 对象的拷贝（这里不讨论）</p> <p>缺点：</p> <ol> <li>需要引入 JQuery 库</li> <li>无法拷贝对象中的 <strong>undefined</strong> 属性</li> </ol> <h3>递归</h3> <p>利用 <code>for..in..</code>、 <code>hasOwnProperty</code>、<code>递归</code>实现</p> <p>缺点：比上面的两种方式稍复杂</p> <p>递归实现深拷贝：</p> <pre><code class="language-js">// 假设在 Object 的原型，添加一个 height 属性 Object.prototype.height = 180 // student1 什么类型的属性都有了 const student1 = { name: 'Frankie', age: 22, private: true, friends: ['Mandy', 'John'], abilities: undefined, other: null, car: { color: 'gray', brand: 'Benz' }, teacher: { name: 'Ada', student: ['Helkai', 'Jerry'] }, learn: function () { console.log(this.name + ' is learning JavaScript now.') } } // 深拷贝 function deepCopy(source, target = {}) { for (const key in source) { // for...in... 会遍历原型链上的属性，所以这里需要利用 hasOwnProperty 判断，否则会把 Object 原型上的 height 也拷贝进去了 if (source.hasOwnProperty(key)) { if (typeof source[key] === 'object' && source[key] !== null) { // 判断是否为数组 target[key] = Object.prototype.toString.call(source[key]) === '[object Array]' ? [] : {} // 递归 deepCopy(source[key], target[key]) } else { target[key] = source[key] } } } return target } // 从 student1 中拷贝一个 student2 出来 const student2 = deepCopy(student1) // 修改 student2 的属性值 student2.name = 'Steven' student2.age = 20 student2.car = { color: 'red', brand: 'BMW' } student2.friends[1] = 'Jone' student2.teacher.age = '30' // 打印结果看下面截图，结果是没有相互影响的 console.log(student1) console.log(student2) // JSON 方式 const student3 = JSON.parse(JSON.stringify(student1)) console.log(student3) // 打印 student3 可见 abilities、learn 属性丢失了 </code></pre> <p>运行结果：</p> <p></p> <p>日常搬砖选择哪种方式呢，视具体情况而定。我的话，能用 JSON 方式解决的，绝不用递归，没必要复杂化，简单够用即可。但是学习的话，递归的方式必须得懂啊，其实不难懂。</p> <p>其实还有优化的空间，我们都知道 for...in 的性能是比较差的。关于性能优化篇，可以看下掘金这篇<a href="https://juejin.cn/post/6844903929705136141">文章</a>。</p> <p>The end.</p> </article> <article> <h1>重写 Function.prototype.bind</h1> <p>Sun, 26 Feb 2023 09:16:24 GMT</p> <blockquote> <p>本文已过时，请移步《<a href="https://github.com/tofrankie/blog/issues/3">手写 call、apply、bind</a>》</p> </blockquote> <p>该方法创建一个新的函数，在 <code>bind()</code> 被调用时，这个新函数的 <code>this</code> 被指定为 <code>bind()</code> 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。</p> <pre><code class="language-js">function.bind(thisArg [, arg1 [, arg2 [, ...]]]) </code></pre> <p><strong>参数 thisArg</strong></p> <ul> <li>如果使用 <code>new</code> 运算符构造绑定函数，则忽略该值。</li> <li>当使用 <code>bind</code> 在 <code>setTimeout</code> 中创建一个函数（作为回调提供）时，作为 <code>thisArg</code> 传递的任何原始值都将转换为 <code>Object</code>。</li> <li>如果 <code>bind</code> 函数的参数列表为空，执行作用域的 <code>this</code> 将被视为新函数的 <code>thisArg</code>。</li> </ul> <p><strong>参数 arg1、arg2...</strong></p> <p>当目标函数被调用时，被预置入绑定函数的参数列表中的参数。</p> <p><strong>返回值</strong></p> <p>返回一个原函数的拷贝，并拥有指定的 <code>this</code> 值和初始参数。</p> <p>实现：</p> <pre><code class="language-js">const point = { x: 0, y: 0, z: 0 } // 构造函数 function Point(x, y, z) { console.log(this.x, x, y, z) console.log('') } // 函数名写成 bindy，是为了方便与原生 bind 方法对比 Function.prototype.bindy = function (context) { const _this = this const args = Array.prototype.slice.call(arguments, 1) const tempFn = function () {} const fn = function () { const thatArgs = Array.prototype.slice.call(arguments) _this.apply(this instanceof _this ? this : context, args.concat(thatArgs)) } // 圣杯模式 tempFn.prototype = this.prototype fn.prototype = new tempFn() return fn } // bind 可以在调用的时候传入参数 Point.bind(point, 1, 2)(3) // output: 0 1 2 3 Point.bindy(point, 4, 5)(6) // output: 0 4 5 6 // 使用 new 去构造时，bind 绑定的 this 最终会执行构造函数 const p = Point.bind(point) const p2 = Point.bindy(point) new p(3, 3, 3) // output: undefined 3 3 3 new p2(4, 4, 4) // output: undefined 4 4 4 </code></pre> </article> <article> <h1>手写实现 Promise/A+ 标准</h1> <p>Sun, 26 Feb 2023 09:11:51 GMT</p> <p>本文仅作为个人记录，文中可能存在不严谨的地方。</p> <p>要了解更多可以看下这两篇文章：</p> <ul> <li><a href="https://zhuanlan.zhihu.com/p/21834559">史上最易读懂的 Promise/A+ 完全实现</a></li> <li><a href="https://segmentfault.com/a/1190000018589798">promise/A+ 规范翻译以及手写实现</a></li> </ul> <h2>Promise/A+ 的标准有哪些？</h2> <ul> <li>只有一个 <code>then</code> 方法，没有 <code>catch</code>、<code>race</code>、<code>all</code> 等方法。</li> <li><code>then</code> 返回一个新的 Promise。</li> <li>不同的 Promise 的实现需要相互调用。</li> <li>Promise 的状态有 <code>pending</code>、<code>fullfilled</code>、<code>rejected</code> 三种。初始状态是 <code>pending</code>，可以由 <code>pending</code> 转化为 <code>fullfilled</code> 或者 <code>rejected</code>。一旦状态确定之后，不能再被改变。</li> <li>更具体的官方标准，看<a href="https://promisesaplus.com/">这里</a>。</li> </ul> <h2>具体代码实现</h2> <pre><code class="language-js">function MyPromise(executor) { const _this = this // 状态 _this.status = 'pending' // resolve 值 _this.value = null // reject 原因 _this.reason = null // resolve、reject 函数 _this.onFullfilled = [] _this.onRejected = [] function resolve(value) { if (value instanceof MyPromise) { return value.then(resolve, reject) } // 其实这里采用 setTimeout 方式实现异步执行 onFullfilled/onRejected 不太符合 Event Loop 机制。下面 reject 同理。 setTimeout(() => { // 只有状态为 pending 才能被改变 if (_this.status == 'pending') { _this.value = value _this.status = 'resolved' _this.onFullfilled.forEach(currentValue => currentValue(value)) } }, 0) } function reject(reason) { setTimeout(() => { // 只有状态为 pending 才能被改变 if (_this.status == 'pending') { _this.reason = reason _this.status = 'rejected' _this.onRejected.forEach(currentValue => currentValue(reason)) } }, 0) } // 注意：若执行过程出现异常，则捕获异常并执行 reject 函数。 try { executor(resolve, reject) } catch (e) { reject(e) } } function resolvePromise(promise2, x, resolve, reject) { let then let thenCallorThrow = false if (promise2 === x) { return reject(new TypeError('same Promise!')) } if (x instanceof MyPromise) { if (x.status === 'pending') { x.then(value => { resolvePromise(promise2, value, resolve, reject) }, reject) } else { x.then(resolve, reject) } return } if (x !== null && (typeof x === 'object' || typeof x === 'function')) { try { then = x.then if (typeof then === 'function') { then.call( x, res => { if (thenCallorThrow) return thenCallorThrow = true return resolvePromise(promise2, res, resolve, reject) }, err => { if (thenCallorThrow) return thenCallorThrow = true return reject(err) } ) } else { resolve(x) } } catch (e) { if (thenCallorThrow) return thenCallorThrow = true return reject(e) } } else { return resolve(x) } } MyPromise.prototype.then = function (onFullfilled, onRejected) { const _this = this let promise2 // promise.then() 返回一个 promise 对象 // Promise 值的穿透处理： // 场景如： new Promise(resolve => resolve('abc')).then().catch().then(res => {console.log('print abc')}) onFullfilled = typeof onFullfilled === 'function' ? onFullfilled : val => val onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err } switch (_this.status) { case 'pending': promise2 = new MyPromise((resolve, reject) => { _this.onFullfilled.push(value => { try { const x = onFullfilled(value) resolvePromise(promise2, x, resolve, reject) } catch (e) { reject(e) } }) _this.onRejected.push(reason => { try { const x = onRejected(reason) resolvePromise(promise2, x, resolve, reject) } catch (e) { reject(e) } }) }) break case 'resolved': promise2 = new MyPromise((resolve, reject) => { setTimeout(() => { try { const x = onFullfilled(_this.value) resolvePromise(promise2, x, resolve, reject) } catch (e) { reject(e) } }) }) break case 'rejected': promise2 = new MyPromise((resolve, reject) => { setTimeout(() => { try { const x = onRejected(_this.reason) resolvePromise(promise2, x, resolve, reject) } catch (e) { reject(e) } }) }) break default: break } return promise2 } // Promise 标准里面没有 catch、race、all 等方法，只有一个 then 方法 MyPromise.prototype.catch = function (onRejected) { return this.then(null, onRejected) } new MyPromise((resolve, reject) => { resolve('right') }).then( res => { console.log(res) }, err => { console.warn(err) } ) </code></pre> <p>未完待续...</p> </article> <article> <h1>你是如何理解 setTimeout 的？</h1> <p>Sun, 26 Feb 2023 09:10:04 GMT</p> <p></p> <h2>一、setTimeout</h2> <p>在 JavaScript 中 <code>setTimeout</code>、<code>setInterval</code> 最常见不过了，用于延迟或者延迟重复处理等。</p> <pre><code class="language-js">setTimeout(() => { console.log('一秒后执行') }, 1000) </code></pre> <p>以上示例，可以简单地理解成：「一秒」后输出对应的字符串。但是这「一秒」只是我们所设的「预期值」，然而实际情况它只是「最小延迟时间」而已。换句话说，最理想情况下，一秒之后会执行回调函数，然而现实往往不是这样的，肯定存在误差在里面。</p> <blockquote> <p>那能否在我们所指定的时间执行回调函数呢？</p> </blockquote> <p>严格来说肯定是不行的，有实实在在的误差在里面，平常看起来像是指定时间执行只是因为人本身无法感知其中微妙的误差而已。倘若误差在可接受范围内，理解成指定时间后执行也是没问题的。</p> <p>误差产生的因素有很多，比如 <code>for</code> 循环、其他异步任务（微任务、宏任务）、浏览器精度等等。本质上是 <a href="https://github.com/tofrankie/blog/issues/348">Event Loop 机制</a>导致的的现象。比如示例：</p> <pre><code class="language-js">setTimeout(() => { console.log('会在一秒后执行吗?') }, 1000) for(let i = 0; i < 10000; i++) { console.count('循环次数') } </code></pre> <blockquote> <p>我对 <code>setTimeout</code> 的理解是：<strong>在指定时间后，将回调函数作为异步任务加入到任务队列中。</strong></p> <p>对于刚接触 JavaScript 的朋友，可能会<strong>错误地</strong>理解为：在指定时间后，执行对应函数。这是不对的。</p> <p>为什么呢？因为可能一秒的时间内 <code>for</code> 循环还没执行完，所以一秒后还没开始执行定时器里面的函数。我们都知道 <code>setTimeout</code> 属于异步任务（宏任务），在执行（下）一个异步任务之前，首先得执行当前完同步任务、微任务（也属于异步任务）、接着更新 UI 之后，才会执行（下一个）异步任务。</p> </blockquote> <h2>二、扩展</h2> <p><strong><code>setTimeout</code> 加不加括号，会导致什么不同的结果？</strong></p> <p>看个示例，请问二者有什么区别，会产生什么不同的结果：</p> <pre><code class="language-js">function foo() { console.log('show foo') } // 写法一 setTimeout(foo, 3000) // 写法二 setTimeout(foo(), 3000) // 两者运行结果一致吗？ </code></pre> <ol> <li>将 <code>delay</code> 设为 <code>300</code>，看起来好像没区别，都能正常输出 <code>show foo</code>，接着往下看。</li> <li>若将 <code>delay</code> 设为 <code>3000</code>，仍然都能输出字符串，但有点区别。<code>setTimeout(foo, 3000)</code> 在预期的 <code>3s</code> 后输出值。然而<code>setTimeout(foo(), 3000)</code> 好像立刻执行了，而不是等 <code>3s</code> 后才输出。</li> <li>通过设置不同 <code>delay</code> 值可以更明显地感知其中的区别，越大越明显。</li> </ol> <blockquote> <p>两者区别：</p> <ol> <li>不加括号：能正常地按照我们所预期的时候执行对应的函数。</li> <li>加括号：同样会执行该函数，但它是立即执行，所以不会达到延迟执行的目的。(这点说法不严谨，只是帮助理解，请继续往下看)</li> </ol> </blockquote> <p><strong>造成上面差异的原因是什么呢？</strong></p> <p>我们改下代码，就很清晰了。</p> <pre><code>function foo() { console.log('show foo') return `console.log('哈哈')` } setTimeout(foo(), 3000) // 结果：立即打印出 show foo，三秒后打印了 “哈哈”。 </code></pre> <p>由于 <code>foo</code> 函数返回值是 <code>console.log('哈哈')</code>，因此 <code>setTimeout(foo(), 3000)</code> 相当于 <code>setTimeout('console.log("哈哈")', 3000)</code> ，就会产生这样的结果。</p> <p>其实 <code>setTimeout</code> 方法第一个参数除了支持函数之外，还可以是字符串。若是字符串，会使用 <code>eval</code> 去执行。</p> <blockquote> <p>由于我们最常用的写法是执行一个匿名函数（如<code>setTimeout(() => {}, delay)</code>），没注意的同学，所以可能会忽略加与不加括号的区别。</p> <p>还有，不建议使用 <code>setTimeout('String Code', delay)</code> 的形式。因为 <code>eval</code> 通常被用来执行动态创建的代码，如果 <code>eval(...)</code> 中执行的代码包括一个或多个声明（无论变量还是函数），就会对 <code>eval(...)</code> 所处的词法作用域进行修改（可看<a href="https://github.com/tofrankie/blog/issues/268">文章</a>）。避免出现一些意料之外的事情，不建议使用。</p> </blockquote> <h2>三、其他</h2> <p><strong>1. 当使用 setTimeout() 方法的时候，是否必须执行 clearTimeout() ？</strong></p> <ul> <li> <p>在 <code>setTimeout()</code> 内的函数执行之前，如果想要阻止执行该方法，只能通过 <code>cleartTimeout()</code> 来处理。</p> </li> <li> <p>在 <code>setTimeout()</code> 内的函数执行之后，执行 <code>clearTimeout()</code> 方法对整个代码流程没有害处，但是是没有必要的。</p> </li> <li> <p>通常情况，执行 <code>clearInterval()</code> 比执行 <code>clearTimeout()</code> 更实际一些，因为如果不执行 <code>clearInterval()</code>，则 <code>setInterval()</code> 的方法会无限循环执行下去。而 <code>setTimeout()</code> 在一次调用后，就会停止执行（浏览器会自动回收资源）。除非你创建了一个无限循环的 <code>setTimeout()</code>。</p> </li> </ul> <p><strong>2. 关于 setTimeout(fn, 0) 的问题</strong></p> <p>注意，这仍然属于异步任务，指定某个任务在主线程最早可得的空闲时间执行。HTML5 标准中规定了 <code>setTimeout()</code> 的第二个参数的最小值（最短间隔），不得低于 <code>4ms</code>，如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为 <code>10ms</code>。另外，对于那些 DOM 的变动（尤其是涉及页面重新渲染部分），通常不会立即执行，而是每 <code>16ms</code> 执行一次，对于动画的优化，<code>window.requestAnimationFrame</code> 或是更好的选择。</p> <h2>四、参考链接</h2> <ul> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#%E5%AE%9E%E9%99%85%E5%BB%B6%E6%97%B6%E6%AF%94%E8%AE%BE%E5%AE%9A%E5%80%BC%E6%9B%B4%E4%B9%85%E7%9A%84%E5%8E%9F%E5%9B%A0%EF%BC%9A%E6%9C%80%E5%B0%8F%E5%BB%B6%E8%BF%9F%E6%97%B6%E9%97%B4">实际延时比设定值更久的原因：最小延迟时间（MDN）</a></li> <li><a href="https://www.quora.com/How-accurate-are-JavaScript-timers">How accurate are JavaScript timers?</a></li> <li><a href="https://developer.chrome.com/blog/timer-throttling-in-chrome-88">Heavy throttling of chained JS timers beginning in Chrome 88</a></li> </ul> </article> <article> <h1>History 对象</h1> <p>Sun, 26 Feb 2023 09:00:57 GMT</p> <p>本文更新于 2020-04-22。</p> <ol> <li> <p>HTML5 使用 <code>history</code> 对象 <code>history.pushState()</code> 和 <code>history.replaceState()</code> 方法添加和修改浏览历史记录，<a href="https://blog.csdn.net/u012028371/article/details/67636395">这里</a>。</p> </li> <li> <p>History 对象提供的方法有：</p> <ul> <li> <p><code>back()</code>：移动到上一个访问页面，等同于浏览器的后退键。</p> </li> <li> <p><code>forward()</code>：移动到下一个访问页面，等同于浏览器的前进键。</p> </li> <li> <p><code>go()</code>：接受一个整数作为参数，移动到该整数指定的页面，比如 <code>go(1)</code> 相当于 <code>forward()</code>，<code>go(-1)</code>相当于 <code>back()</code>。<code>history.go(0)</code> 或 <code>history.go()</code> 相当于刷新当前页面。</p> <p>注意：如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是默默的失败。注意：返回上一页时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。</p> </li> <li> <p>其中 <code>pushState()</code>、<code>replaceState()</code> 是 HTML5 新增的方法，用来在浏览历史中添加和修改记录。判断是否支持 <code>pushState</code> 方法：<code>!!(window.history && history.pushState)</code></p> </li> </ul> </li> <li> <p><code>history.pushState(object state, string title, string url)</code> 方法能实现在不刷新页面的情况下修改浏览器 url 链接，并且该方法创建了新的浏览记录，并将新的链接插入到浏览记录队列中。</p> <ul> <li> <p><code>state</code>：一个与指定网址相关的状态对象，<code>popstate</code> 事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填 <code>null</code>。新页面里可以通过 <code>window.history.state</code> 获取。</p> </li> <li> <p><code>title</code>：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填 <code>null</code>。</p> </li> <li> <p><code>url</code>：新的网址，必须与当前页面处在同一个域，否则报错（不支持跨域）。浏览器的地址栏将显示这个网址。不允许跨域的目的是，防止恶意代码让用户以为他们是在另一个网站上。假如设置了一个新的锚点值（即 hash），并不会触发 <code>hashchange</code> 事件。</p> </li> </ul> </li> <li> <p>总之，<code>pushState</code> 方法不会触发页面刷新，只是导致 <code>history</code> 对象发生变化，地址栏会有反应。</p> </li> <li> <p><code>history.replaceState</code> 方法的参数与 <code>pushState</code> 方法一模一样，区别是它修改浏览历史中当前纪录。</p> </li> <li> <p><code>popstate</code> 事件：</p> <p>每当同一个文档的浏览历史(即 <code>history</code> 对象)出现变化时，就会触发 <code>popstate</code> 事件</p> <p>需要注意的是，仅仅调用 <code>pushState</code> 方法或 <code>replaceState</code> 方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用 JS 调用 <code>back()</code>、<code>forward()</code>、<code>go()</code> 方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。</p> </li> </ol> <pre><code class="language-js">// event.state，就是通过 pushState 和 replaceState 方法，为当前 URL 绑定的 state 对象，可以通过 history.state 获取 window.onpopstate = function (event) { console.log('location: ' + document.location) console.log('state: ' + JSON.stringify(event.state)) } </code></pre> <ol start="7"> <li> <p>其他</p> <p>获取 URL，从输出结果上，<code>document.URL</code> 和 <code>windows.location.href</code> 没有区别。非要说区别的话，你只可以读取 <code>document.URL</code> 的值，不能修改它。<code>windows.location.href</code> 的值你即可以读取也可以修改。 <code>windows.location.href</code> 是旧的写法，新的标准推荐用 <code>document.URL</code> 替代。（如果你只是读取的话）</p> </li> </ol> <pre><code class="language-js">document.location.href window.location.href document.URL // 只读 </code></pre> <ol start="8"> <li>参考： <ul> <li><a href="http://www.mamicode.com/info-detail-2375792.html">javascript History 对象详解</a></li> <li><a href="https://yq.aliyun.com/articles/626809">history 禁用浏览器的后退功能（包括其他操作后退的按钮，操作等）</a></li> </ul> </li> </ol> </article> <article> <h1>JavaScript 事件循环（含宏任务与微任务）</h1> <p>Sun, 26 Feb 2023 08:59:40 GMT</p> <blockquote> <p>本文已过时，可移步《<a href="https://github.com/tofrankie/blog/issues/348">通过两个例子再探 Event Loop</a>》。</p> </blockquote> <h2>JavaScript 特点</h2> <p>JavaScript 是单线程非阻塞的一门语言。</p> <p>单线程意味着 JavaScript 代码执行时只有一个主线程去处理所有的任务，即同一时间只能做一件事情。</p> <p>非阻塞表示当执行到异步任务时，主线程会挂起该异步任务，待异步任务返回结果时，再根据一定的规则去执行相应的回调。</p> <blockquote> <p>思考：为什么 JavaScript 要设计成单线程？</p> <p>单线程是必要的，也是 Javascript 这门语言的基石。在最初的浏览器执行环境中，我们需要进行各种各样的 DOM 操作。如果 Javascript 是多线程的话，当两个线程同时对 DOM 进行一项操作，比如一个向其添加事件，另一个删除了这个 DOM 元素，此时该如何处理呢？因此，Javascript 选择只用一个主线程来执行代码，这样就保证了程序执行的一致性。</p> </blockquote> <h2>事件循环（Event Loop）</h2> <p>JavaScript 是通过「事件循环」的实现非阻塞的。而事件循环是通过「任务队列」机制协调的。</p> <p>在事件循环中，每进行一次循环操作称为 Tick，每一次 Tick 的任务处理是比较复杂的，主要步骤如下：</p> <ol> <li>在本次 Tick 中选择最先进入队列的任务，如有则执行一次。</li> <li>检查是否存在微任务（microtask），如有则执行，直至清空微任务队列（microtask queue）。</li> <li>渲染页面。</li> <li>主线程重复执行上述步骤。</li> </ol> <p>Tick 需要了解的是：</p> <ul> <li>JS 任务分为「同步任务」和「异步任务」。</li> <li>同步任务都在主线程上执行，形成一个执行栈。</li> <li>主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了结果，就在任务队列里面放置一个事件。</li> <li>一旦执行栈中所有同步任务执行完毕（JS 引擎空闲之后），就会去读取任务队列，将可运行的异步任务添加到可执行栈里面，开始执行。</li> </ul> <p></p> <blockquote> <p>任务分为「同步任务」和「异步任务」，其中异步任务又分为「宏任务」和「微任务」。</p> </blockquote> <h3>宏任务（Task）</h3> <p>每次执行栈的代码就是一个宏任务（包括每次从事件队列中获取的一个事件回调并放到执行中执行）。</p> <p>浏览器为了能够使得 JS 内部宏任务与 DOM 任务有序地执行，会在宏任务执行结束之后，在下一个宏任务开始执行之前，对页面进行重新渲染。</p> <blockquote> <p>当前宏任务 → 渲染页面 → 下一个宏任务 → ...</p> </blockquote> <p>常见宏任务有：</p> <ul> <li><code>setInterval</code></li> <li><code>setTimeout</code></li> <li><code>setImmediate</code>（node.js）</li> <li>XHR 回调</li> <li>事件回调（鼠标键盘事件）</li> <li>indexedDB 数据库等 I/O 操作</li> <li>渲染 DOM</li> </ul> <h3>微任务（Microtask）</h3> <p>当前同步任务执行结束之后，在下一个宏任务之前（也在渲染 DOM 之前），立即执行的任务。</p> <blockquote> <p>当前宏任务 → 当前微任务 → 渲染页面 → 下一个宏任务 → ...</p> </blockquote> <p>常见微任务包括：</p> <ul> <li>Promise 的 <code>then</code>、<code>catch</code>、<code>finally</code> 回调。</li> <li><code>process.nextTick</code>（node.js）</li> <li><code>MutationObserver</code></li> <li><code>Object.observe</code>（已废弃）</li> </ul> <h2>运行机制</h2> <ol> <li>执行一个宏任务（执行栈中没有就从事件队列中获取）。</li> <li>执行过程中如果遇到微任务，就将其添加到微任务的任务队列里面。</li> <li>宏任务执行完毕之后，立即执行当前微任务队列里面的所有微任务（依次执行）。</li> <li>当前宏任务执行完毕之后，开始检查渲染，然后 GUI 线程接管渲染（但是 UI render 不一定会执行，因为需要考虑 UI 渲染消耗的性能已经有没有 UI 变动）。</li> <li>渲染完毕后，JS 线程继续接管，开始下一个宏任务（从事件队列中获取）。</li> <li>JS 不断重复以上步骤，直至所有任务执行完毕。（栈内存溢出也会终止执行）。</li> </ol> <p></p> <h2>参考链接</h2> <ul> <li><a href="https://www.jianshu.com/p/184988903562">JS 事件循环</a></li> <li><a href="https://www.cnblogs.com/cangqinglang/p/8967268.html">详解 JavaScript 中的 Event Loop（事件循环）机制（含 node 环境下的事件循环机制）</a></li> <li><a href="https://www.cnblogs.com/ckAng/p/11133643.html">JS 宏任务和微任务</a></li> <li><a href="http://www.ruanyifeng.com/blog/2014/10/event-loop.html">JavaScript 运行机制详解：再谈 Event Loop（阮一峰）</a></li> <li><a href="https://mp.weixin.qq.com/s?__biz=MzI3NTM5NDgzOA==&mid=2247484039&idx=1&sn=e70e5b6473917dcf71bfd3f60ddb2a7d&chksm=eb043afedc73b3e8fb3ac90613d52d14cd165d358912e519e13f25bbd236c3591386fb2e349a&token=1983269989&lang=zh_CN&scene=21#wechat_redirect">深入解析 Event Loop 和浏览器渲染、帧动画、空闲回调的关系</a></li> <li><a href="https://www.youtube.com/watch?v=cCOL7MC4Pl0&ab_channel=JSConf">JSConf.Asia - In the loop</a></li> <li><a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/">Tasks, microtasks, queues and schedules</a></li> </ul> </article> <article> <h1>H5 唤起原生 APP</h1> <p>Sun, 26 Feb 2023 08:58:00 GMT</p> <p>可以看看以下这篇文章，里面列举了 URL Scheme、Intent、Universal Link 三种方式唤醒 APP 的坑，没有一个比较完美的解决方法。文章最后建议使用一个 <a href="https://github.com/suanmei/callapp-lib">suanmei/callapp-lib</a> 库去兼容绝大多数的应用场景。</p> <blockquote> <p>文章出处：拾壹小筑 —— <a href="https://suanmei.github.io/2018/08/23/h5_call_app/#more">H5 唤起 APP 指南</a></p> </blockquote> </article> <article> <h1>关于 onbeforeunload</h1> <p>Sun, 26 Feb 2023 08:56:49 GMT</p> <blockquote> <p><a href="https://www.cnblogs.com/strangerqt/p/3630040.html">原文</a></p> </blockquote> <p>页面在关闭前会有 <code>onbeforeUnload</code> 事件，来询问用户是否要关闭这个页面/标签。</p> <ul> <li>浏览器的 F5 刷新为：<code>onbeforeUnload → onunload → onload</code>。</li> <li>浏览器关闭为：<code>onbeforeUnload → onunload</code>；</li> </ul> <p>在 <code>window.onbeforeunload</code> 的方法体中用 <code>alert</code> 或 <code>confirm</code> 这样的方法在 IE 中是有效的，会弹出来，点击后页面也会关闭。<code>confirm</code> 也是如此，即使你 <code>confirm</code> 点击了取消还是会刷新/关闭页面。</p> <p>而在现代浏览器 Chrome、Firefox 中是不会弹出来的，但是会执行。这是浏览器的一个 bug 或者机制吧，在页面关闭后 <code>alert</code> 和 <code>confirm</code> 等弹出框是不会弹出来的。想要一个可以让用户选择的是否关闭的办法，<code>alert</code> 和 <code>confirm</code> 是不可行的。</p> <p>网上查了下资料发现用 <code>event.returnValue = '你想让用户看到的信息'</code> 这样的方法可以在页面被关闭之前让用户看到提示信息“这个页面要被关闭了，你想关闭还是不关闭？”来让用户进行选择。</p> <p>IE8、Chrome 可以让用户完全看到你 <code>rerturnValue</code> 中的信息，Firefox 的内容就是浏览器自带的，不管你<code>returnValue</code> 设置的显示内容是如何，它始终显示自带的。</p> <h2>参考链接</h2> <ul> <li><a href="https://www.zhangxinxu.com/wordpress/2021/11/js-visibilitychange-pagehide-lifecycle/">从 js visibilitychange Safari 下无效说开去</a>（深度好文）</li> </ul> </article> <article> <h1>初识 JavaScript 函数 Arguments 模拟重载</h1> <p>Sun, 26 Feb 2023 08:44:51 GMT</p> <p>在 JavaScript 中并没有重载函数的功能，但每个函数中的 Arguments 对象可以模拟重载的实现。</p> <h2>1. 通过下标访问实参</h2> <p><code>arguments</code> 不是一个数组对象，没有数组对象所有的属性和方法，但通过 <code>arguments[0]</code>、<code>arguments[1]</code> 等方式获取实参。</p> <pre><code class="language-js">function demo() { let str = '' for (let i = 0; i < arguments.length; i++) { str += arguments[i] + ', ' } } console.log(demo('小明', '小红')) // 输出：小明, 小红, </code></pre> <h2>2. 实现重载</h2> <p>利用 Arguments 对象实现函数重载的方式可以有几种，除了根据参数的个数，还可以根据传入参数的类型、或者利用参数中特殊的参数值来执行不同的操作。</p> <pre><code class="language-js">// 通过参数个数实现重载 function overloadDemo() { switch (arguments.length) { case 0: console.log(0) break case 1: console.log(1) break default: console.log(arguments.length) break } } overloadDemo('name') // 输出：1 </code></pre> <h2>3. callee 属性</h2> <p>Arguments 对象的 <code>callee</code> 属性指向的是<strong>正在被执行的 Function 对象</strong>。常常利用该属性实现递归。</p> <pre><code>function sum(n) { if (n == 1) { return 1 } else { return n + arguments.callee(n - 1) } } console.log(sum(5)) // 输出：15 </code></pre> <blockquote> <p>但是 <code>arguments.callee</code> 和 <code>arguments.caller</code> 已经在 ES5 严格模式中禁用，将来也会彻底移除。</p> </blockquote> </article> <article> <h1>Vue 组件之间通信以及状态管理模式（Vuex）</h1> <p>Sun, 26 Feb 2023 08:36:20 GMT</p> <h3>一、使用 props</h3> <p><code>props</code> 用于接收来自父组件的数据。<code>props</code> 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。<strong>这种方式，不能在子组件更改父组件的对应的属性值</strong>。</p> <pre><code class="language-vue"> <template> <child message="这是父组件给子组件的信息"></child> </template> <script> import Child from '../xxx/xxx' export default { components: { Child } } </script> </code></pre> <pre><code class="language-vue"> <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] } </script> </code></pre> <blockquote> <p><code>props</code> 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态。</p> <p>若一定要改，只能通过子组件 <code>$emit()</code>，父组件 <code>$on()</code> 进行响应更改，如在更复杂的情况下，建议使用状态管理模式，即 <code>Vuex</code>。下面会讲述这两种方式的具体使用方式。</p> </blockquote> <h3>二、$emit()、$on() 非父子组件间的通信（简单场景）</h3> <blockquote> <p><code>$emit()</code>和 <code>$on()</code>和的事件必须是在一个公共的实例上，才能触发。官方文档里这个主要用于非父子组件之间的通信。</p> <p>下面对这个例子简单修改一下：</p> </blockquote> <pre><code class="language-js">// 新建一个公共示例 // bus.js import Vue from 'vue' export const bus = new Vue() </code></pre> <pre><code class="language-vue"> <template> <child :message="message"></child> </template> <script> import Child from '../xxx/xxx' // 引入公共实例 import { bus } = from 'xxx/bus.js' export default { components: {Child}, data() { return { message: '这是父组件给子组件的信息' } }, mounted() { // $on() 响应 bus.$on('change', (msg) => { console.log(msg) }) } } </script> </code></pre> <pre><code class="language-vue"> <template> <div>{{ message }}</div> </template> <script> import { bus } from 'xxx/bus.js' export default { props: ['message'], watch: { message(newVal, oldVal) { // 通过 $emit() 去触发 bus.$emit('change', '要改变的值') } } } </script> </code></pre> <h3>三、使用 Vuex 进行状态管理（主要用于较为复杂场景），划重点</h3> <ol> <li>安装 <a href="https://vuex.vuejs.org/zh/installation.html">Vuex</a></li> </ol> <pre><code>npm install vuex --save </code></pre> <ol start="2"> <li>新建 <code>store.js</code> ，将 Vuex 放在里面，我就不放 <code>main.js</code> 里了</li> </ol> <pre><code class="language-js">import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) /** * 说明： * * 一、Mutations * 1. 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation * 2. 一条重要的原则就是要记住 mutation 必须是同步函数 * * 二、Action * 1. action 提交的是 mutation，而不是直接变更状态 * 2. action 可以包含任意异步操作 * 3. 所以我更喜欢使用 action 去提交 mutation，例如下面这个异步操作 * */ const store = new Vuex.Store({ // 定义状态 state: { message: '' }, mutations: { changeMessage(state, payload) { // 状态变更 state.message = payload } }, actions: { changeMessage(context, args) { context.commit('changeMessage', args) setTimeout(() => { // 1.5s 后置空 context.commit('changeMessage', '') }, 1500) } } }) export default store </code></pre> <p>3). <code>main.js</code> 引入</p> <pre><code class="language-js">import Vue from 'vue' import App from './App.vue' import store from './store.js' new Vue({ el: '#app', store, render: h => h(App) }) </code></pre> <p>4). 提交载荷、分发 Action、获取状态</p> <pre><code class="language-js">// 以下 this 指向 vue 实例 // 提交 Payload，仅支持同步操作 this.$store.commit('changeMessage', 'any') // 分发 Action，支持异步操作 this.$store.dispatch('changeMessage', 'any') // 获取 state const var1 = this.$store.state.message </code></pre> <blockquote> <p>写得有点啰嗦了，更具体或者细节的地方，麻烦移步官方文档： <a href="https://vuex.vuejs.org/zh/">Vuex 是什么？</a></p> </blockquote> <p>啊啊啊，不想写了，好了，就到此为止吧。有疑问的留意，尽我所会的回答。（如有更好的方式，或者改进的地方，欢迎指出！）</p> </article> <article> <h1>Vue 实现复制内容到剪贴板</h1> <p>Sun, 26 Feb 2023 08:35:48 GMT</p> <p>官网：<a href="https://www.npmjs.com/package/vue-clipboard2">点击跳转</a></p> <ol> <li> <p>安装 <code>npm install --save vue-clipboard2</code></p> </li> <li> <p>引入（我一般在 <code>main.js</code> 引入，如果仅仅是某一小模块用到，在对应的 <code>component</code> 引入即可）</p> </li> </ol> <pre><code class="language-js">import Vue from 'vue' import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) </code></pre> <p>3、使用</p> <pre><code class="language-js">const message = '拷贝的文本' this.$copyText(message) .then(res => { alert('Copied') }) .catch(err => { alert('Can not copy') }) </code></pre> </article> <article> <h1>JS 中文转换拼音的实现</h1> <p>Sun, 26 Feb 2023 08:31:53 GMT</p> <h2>写在前面</h2> <p>或许你需要的是：</p> <ul> <li><a href="https://github.com/zh-lx/pinyin-pro">pinyin-pro</a> ⭐️⭐️⭐️⭐️⭐️</li> <li><a href="https://github.com/hotoo/pinyin">pinyin</a></li> </ul> <h2>需求</h2> <p>此前项目中有一个中文转拼音的需求，于是整理了一下实现方法。</p> <blockquote> <p>在转换过程中，这里我保留了数字和字母，其他特殊字符或者空格将会被去掉。如 <code>测试</code> 会被转换成 <code>CeShi</code>。（可自行修改 <code>convert2Pinyin()</code> 方法实现其他需求）</p> </blockquote> <h2>实现</h2> <blockquote> <p>示例 <a href="https://github.com/tofrankie/utils/blob/master/examples/convert2Pinyin.html">Demo</a></p> </blockquote> <pre><code class="language-html"> <input id="input" value="测试" /> <input id="output" disabled /> </code></pre> <pre><code class="language-js">// js window.onload = () => { const input = document.getElementById('input') const output = document.getElementById('output') // 失焦进行转换 input.addEventListener('blur', () => { const val = input.value output.value = convertToPinyin(val) }) /** * 转换成拼音（若有空格、特殊字符将被移除） * * @param {string} sourceStr 原始数据 */ const convertToPinyin = sourceStr => { // 目标数据 let targetStr = '' // 匹配中文 const cnReg = /[\u4e00-\u9fa5]/ // 匹配数字和英文 const enReg = /[a-zA-Z0-9]/ // 保留英文和数字 const keep = true // 遍历源数据 for (let i = 0, len = sourceStr.length; i < len; i++) { const str = sourceStr.substr(i, 1) if (keep && enReg.test(str)) { targetStr += str } else if (cnReg.test(str)) { const searchResult = searchPinYin(str, PinYin) if (searchResult) { // targetStr += searchResult targetStr += capitalize(searchResult) // 首字母大写 } } } return targetStr } /** * 检索拼音 * * @param {string} str 源字符串 * @param {object} data 收集的拼音 Unicode 编码集合 */ const searchPinYin = (str, data) => { for (const key in data) { if (data.hasOwnProperty(key) && data[key].indexOf(str) !== -1) { return key } } return '' } /** * 将拼音首字母转换为大写 * * @param {string} str 源字符串 */ const capitalize = str => { if (str) { const [first] = str const other = str.replace(/^\S/, '') return `${first.toUpperCase()}${other}` } return str } /** * 目前这个 16 进制 Unicode 编码是网上收集的，可能不能覆盖所有的中文字符，可以自行补充； * * 例如：‘婋’（xiao）字： * 1、使用 '婋'.charCodeAt(0).toString(16) 得到 Unicode 编码：5a4b； * 2、将编码前面加上：\u => \u5a4b; * 3、然后放到对象 PinYin['xiao'] 里面。 * * 现在只想到了这种笨方法一个一个往里补充，如果有更好的方法，欢迎指出！！！ */ const PinYin = { a: '\u554a\u963f\u9515' // ... // 由于这块代码太多，这里省略就不贴上来了，麻烦请看 GitHub Demo。 } } </code></pre> <h2>难点</h2> <p>其实在中文转拼音的过程中，比较麻烦的在于「多音字」和「生僻字」的实现，我想到的解决思路是：</p> <ol> <li> <p><strong>生僻字</strong>：是由于 <code>PinYin</code> 里面列举的缺失一些中文字符，可通过 <code>str.charCodeAt(0).toString(16)</code> 的方式补充，具体方法不再赘述，上面有说明。</p> </li> <li> <p><strong>多音字</strong>：其实多音字一直是最麻烦的地方，因为每一个中文字符只有一个对应的 Unicode 编码，所以需要在对象的多个对应属性上添加编码。如 <code>曾</code> 字，通过 <code>'曾'.charCodeAt(0).toString(16)</code> 获取到 <code>66fe</code>，然后前面拼接上 <code>\u</code>，得到 <code>\u66fe</code>。</p> </li> </ol> <pre><code>// 截取 PinYin 一小部分 const PinYin = { ceng: '\u66fe', zeng: '\u66fe' } </code></pre> <p>然后修改上述 <code>convert2Pinyin()</code> 和 <code>searchPinYin()</code> 方法，把符合规则的字符返回一个数组，然后用<strong>排列组合</strong>的方式列出所有可能。</p> <h2>最后</h2> <p>除了拼音转中文之外，该仓库还有其他实用方法，请移步 <a href="https://github.com/tofrankie/utils">tofrankie/utils</a>。</p> </article> <article> <h1>关于 Flex 布局</h1> <p>Sun, 26 Feb 2023 08:28:38 GMT</p> <p>在项目的开发过程中，常遇到水平居中、垂直居中的需求。挺多人第一个想到可能是：<code>text-align</code>、<code>vertical-align</code>，但这两个属性<strong>仅适用于行内元素</strong> 。</p> <pre><code class="language-css">{ text-align: center; vertical-align: middle } </code></pre> <p>本文，介绍一些常见的居中方法，包括水平居中、垂直居中。</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head>  <style> .parent { width: 100px; height: 100px; border: 2px solid #f00; /* 红色 */ } .child { width: 50px; height: 50px; border: 2px solid #00f; /* 蓝色 */ } </style> </head> <body> <div class="parent"> <div class="child">child</div> </div> </body> </html> </code></pre> <ol> <li>水平居中：<code>text-align: center</code> 和 <code>margin: 0 auto</code>，其中 <code>text-align</code> 作用的对象是它的<strong>子元素，且必须为行内元素，块级元素无效</strong>。</li> </ol> <pre><code class="language-html"> <style> .parent { width: 100px; height: 100px; border: 2px solid #f00; text-align: center; } .child { width: 50px; height: 50px; border: 2px solid #00f; } </style>  <div class="parent">  <div class="child">child</div>  </div> </code></pre> <p>下班继续写，哈哈哈……</p> </article> <article> <h1>JavaScript for 循环比较</h1> <p>Sun, 26 Feb 2023 08:24:03 GMT</p> <ol> <li> <p>for 循环的效率问题比较，建议看一下这篇文章：<a href="https://zhuanlan.zhihu.com/p/23812134">深入了解 JavaScript 中的 for 循环</a></p> </li> <li> <p>判断是否为空对象</p> </li> </ol> <pre><code>// 兼容写法，JavaScript in 操作符可获取对象的属性；delete 操作符则删除属性 function isEmptyObj(obj) { for (var i in obj) { if (obj.hasOwnProperty(i)) { return false } } return true } // ES6 写法 function isEmptyObj(obj) { return Object.keys(obj).length == 0 } </code></pre> <ol start="3"> <li>遍历效率：<code>for > for-of > forEach > filter > map > for-in</code>。虽然 <code>for-in</code> 遍历 Array 元素性能没有普通的 for 循环好，但对于 <code>稀疏数组</code> 的使用是极好的，尤其在数组长度很大的情况，如下：</li> </ol> <pre><code>const arr = [] arr[99] = '哈哈' arr[999] = '呵呵' arr[9999] = '滚' // 优化版 for 循环，只计算一次数组长度（共遍历了 10000 次） for (let i = 0, len = arr.length; i < len; i++) { if (i in { '99': '', '999': '', '9999': '' }) { console.log(true + ' ' + i) } else { console.log(false) } } // for-in（共遍历了 3 次） for (const key in arr) { if (key in { '99': '', '999': '', '9999': '' }) { console.log(arr[key]) } } // 两者遍历次数相差很大，这种情况下采用 for-in 是效率高很多。 </code></pre> <ol start="4"> <li>循环方式的比较</li> </ol> <table> <thead> <tr> <th>遍历方式</th> <th>描述</th> <th>缺点</th> </tr> </thead> <tbody> <tr> <td>for</td> <td>效率最高</td> <td>改进版 for 循环：使用一个变量存储数组的长度，可以省去每次循环都去计算数组长度</td> </tr> <tr> <td>for-of</td> <td>ES6 新增的方法，最简洁、最直接的遍历数组元素的方法，为了改进 <code>forEach</code>、<code>for-in</code> 缺陷而生的新方法。支持数组、对象、字符串、Map 对象、Set 对象遍历</td> <td>不支持遍历普通对象，可以使用 <code>for-in</code> 代替</td> </tr> <tr> <td>forEach</td> <td>每执行一遍，都会执行 <code>callback(item, index, array)</code>。其中，<code>item</code> 是当前项，<code>index</code> 是当前索引项，<code>array</code> 是数组对象本身</td> <td>不能 <code>break</code> 、<code>continue</code> 或者 <code>return</code></td> </tr> <tr> <td>filter</td> <td>用来筛选符合某种条件的元素，将符合条件的元素重新组成一个新的数组</td> <td></td> </tr> <tr> <td>map</td> <td>面向数组，不改变原数组。对于 <code>未被初始化</code>、<code>被删除项（delete 操作符）</code>、<code>数组的属性（array.name='小明'）</code> 都不会执行 <code>callback</code> 函数</td> <td></td> </tr> <tr> <td>for-in</td> <td><code>for-in</code> 是为普通对象设计的，<code>for (var index in arr) { }</code> 赋值给 <code>index</code> 的值不是索引值 <code>1</code>、<code>2</code>，而是字符串 <code>'1'</code>，<code>'2'</code>。</td> <td><code>for-in</code> 缺点更加明显，它不仅遍历数组中的元素，还会遍历自定义的属性，甚至原型链上的属性都被访问到。而且，遍历数组元素的顺序可能是随机的。</td> </tr> </tbody> </table> <p>未完待续...</p> </article> <article> <h1>Canvas 绘图不清晰的原因及解决方法</h1> <p>Sun, 26 Feb 2023 08:18:16 GMT</p> <![CDATA[<p></p> <h2>为什么图片展示不清晰？</h2> <p>我们知道，图片是有尺寸的，在生成时就确定了。在 CSS 中我们叫做图片的原始尺寸。</p> <p>试想一下，把一张 100 * 100 的图片（位图）放大 10 倍，图片会模糊，对吧。</p> <p>什么时候图片最清晰呢？答案是：<strong>图片渲染尺寸 = 图片原始尺寸</strong></p> <p>换句话说，如果希望图片放大 10 倍仍然足够清晰，应该使用尺寸为 1000 * 1000 图片作展示。</p> <blockquote> <p>本文讨论的前提，图片在原始尺寸下是清晰的。</p> </blockquote> <h2>解决 img 不清晰问题</h2> <p>在 <code></code> 通过这样的方式获取图片的渲染尺寸和原始尺寸。</p> <ul> <li>width/height 渲染宽高</li> <li>naturalWidth/naturalHeight 原始宽高。</li> </ul> <p></p> <p>当 width > naturalWidth 的时候，就会有不同程度的模糊。</p> <p>下面提供一些供参考解决方案（注意考虑兼容性）。</p> <h3>图片渲染尺寸是固定的</h3> <p>图片渲染尺寸固定，可以通过 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/img#srcset">srcset</a> 属性进行设置，浏览器会根据设备 DPR 自动选择最高清晰可用的版本。</p> <pre><code class="language-html"> </code></pre> <h3>图片渲染尺寸是动态的</h3> <p>图片渲染尺寸不固定，可以结合 srcset + <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/img#sizes">sizes</a> 进行设置：</p> <pre><code class="language-html"> </code></pre> <h3>background-image 图片</h3> <p>如果是 background-image 图片，可以使用 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/image/image-set">image-set()</a> 进行设置。</p> <pre><code class="language-css">.container { background-image: image-set( "pic@1x.jpg" 1x, "pic@2x.jpg" 2x, "pic@3x.jpg" 3x ); } </code></pre> <h2>解决 Canvas 图片不清晰的问题</h2> <h3>了解像素</h3> <p>以 iPhone 7 为例：</p> <ul> <li>屏幕 CSS 像素：375 * 667</li> <li>屏幕物理像素：750 * 1334（也就是手机分辨率）</li> <li>DPR：2（物理像素与 CSS 像素之比）</li> </ul> <p>也就是说，一个 CSS 像素，使用 2 个物理像素进行绘制，因此呈现效果要比同期其他手机好。</p> <p>如果用一张 375 * 667 尺寸的图片放到 iPhone 7 上显示，其实是“不够清晰”的，此时应该使用 2x 图（也就是 750 * 1334）的图片进行展示，这样才会更清晰。</p> <p>前面提到，当「图片原始尺寸 = 图片渲染尺寸」时图片显示最清晰，这里的「图片渲染尺寸」其实是指「CSS 尺寸 * DPR」，因此可以转换下公式：</p> <blockquote> <p><strong>图片原始图片 = CSS 尺寸 * DPR</strong></p> </blockquote> <p>套入 iPhone 7 的例子：图片原始尺寸宽度 = 375 * 2，所以确保图片清晰的最佳尺寸应该是 750 宽，高度同理。</p> <h3>了解可替换元素</h3> <blockquote> <p>关于<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Guides/Images/Replaced_element_properties">可替换元素</a>更多细节可以自行查阅。</p> </blockquote> <p><code></code> 是一个可替换元素。</p> <p>从一个简单的例子开始：</p> <pre><code class="language-html"> </code></pre> <p>▲ 我们没给 img 元素添加任何样式，此时它在文档流中占据的空间取决于图片原始尺寸。</p> <pre><code class="language-html"> </code></pre> <p>▲ 这是一张 750 * 1334 尺寸的图片，此时在文档流中占据的空间是 750 * 1334（CSS 尺寸）。尽管文档流中占据的空间（CSS 像素）和图片实际尺寸是一致的，但由于 DPR 为 2，此时图片显示其实是不清晰的（想象成一张图片放大了 2 倍查看）。</p> <pre><code class="language-html"> </code></pre> <p>▲ 接着，给 img 添加样式限制其宽高，这里改变的其实是「渲染尺寸」，此时图片占据文档流的空间是 375 * 667（CSS 尺寸）。注意，这样修改样式并未修改图片的原始尺寸，也改不了，因为图片原始尺寸在生成时就固定了。此时图片显示是清晰的。</p> <p>我们可以将 img 这个可替换元素类比成这样的结构：</p> <pre><code class="language-html"><div style="375px; height: 667px"> <div style="width: 750px; height: 1334px"></div> </div> </code></pre> <p>我们调整 img 的宽高其实修改的是外层的 div，影响不到内层的 div 宽高。当然可以使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/object-fit">object-fit</a> 等 CSS 属性影响可替换元素的外层与内存的关系。</p> <h3>了解 Canvas</h3> <p>Canvas 也是一个可替换元素。</p> <p>但它跟 img 有点不一样，我们知道图片原始尺寸在生成时就确定了，无法修改，而 Canvas 的原始宽高是可以控制修改的。</p> <pre><code class="language-html"><canvas></canvas> </code></pre> <p>首先，Canvas 是有个默认宽高的，300 * 150（Canvas 原始尺寸），我们不作任何样式修改的情况下，它占据文档流 300 * 150 空间（取决于 Canvas 的原始尺寸）。</p> <p>举个例子，我们使用 Canvas 进行绘图时，通常会进行类似的初始化处理：</p> <pre><code class="language-html"><canvas id="canvas"></canvas> </code></pre> <pre><code class="language-css">#canvas { width: 375px; height: 667px; } </code></pre> <pre><code class="language-js">const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') const elementWidth = canvas.clientWidth const elementHeight = canvas.clientHeight const dpr = window.devicePixelRatio ?? 1 ctx.canvas.width = elementWidth * dpr // 可以使用 canvas.width = elementWidth * dpr ctx.canvas.height = elementHeight * dpr // 可以使用 canvas.height = elementHeight * dpr ctx.scale(dpr, dpr) // 各种绘制... </code></pre> <p>这里做了几件事：</p> <ol> <li>通过 CSS 修改了 Canvas 元素在文档流占据的空间，设为 375 * 667</li> <li>通过 <code>ctx.canvas.width = elementWidth * dpr</code> 和 <code>ctx.canvas.height = canvas.clientHeight</code> 修改了 Canvas 的原始尺寸，确保文档流占据的空间与 Canvas 原始尺寸保持正比，以避免显示变形。（如果没有理解，想象一下在 100 * 100 的 img 元素中放了一张 100 * 200 的图片的场景，此时图片显示会变形）</li> <li>使用 <code>CanvasRenderingContext2D.scale()</code> 对 Canvas 的坐标系进行放大，放大了 N 倍（取决于设备 DPR），以确保后续绘制按相同的比例进行下去</li> </ol> <p>为什么要这样做？</p> <p>回顾这条公式：<strong>图片原始图片 = CSS 尺寸 * DPR</strong></p> <blockquote> <p>我们在内心把 Canvas 绘制出来的图形当作一张图片。</p> </blockquote> <p>前面，如果要在不同 DPR 设备下使得 img 的图片清晰显示，我们的解决方法是使用不同尺寸的图片。</p> <p>我们把 Canvas 本身当作一张图片。针对不同 DPR 的设备，不需要换图解决，使用 Canvas 提供的 API 就能轻松修改其（原始）尺寸。也就是 <code>ctx.canvas.width = elementWidth * dpr</code> 和 <code>ctx.canvas.height = canvas.clientHeight</code> 所做的事情。</p> <p>以 iPhone 7 为例，图片原始宽度（ctx.canvas.width）= 375 * 2 = 750，高度同理。</p> <p>类比成 div：</p> <pre><code class="language-html"><div style="375px; height: 667px">   <div style="width: 750px; height: 1334px"></div> </div> </code></pre> <p>接着，如果我们初始化过程如下：</p> <pre><code class="language-js">// 不用 // ctx.canvas.width = elementWidth * dpr // ctx.canvas.height = elementHeight * dpr // 改用 canvas.style.width = elementWidth * dpr + 'px' canvas.style.height = elementHeight * dpr + 'px' </code></pre> <p>它相当于修改了：</p> <pre><code class="language-css">#canvas { width: 750px; height: 1334px; } </code></pre> <p>使用 div 两层结构类比，它修改的是外层 div 的尺寸，此时效果相当于：把一张 300 * 150 尺寸的图片放到了一个 750 * 1334 尺寸的 img 容器中，图片显示会变形，且在高清屏下显示不清晰。</p> <h3>Canvas 绘制不清晰的原因</h3> <p>理解了上一节的内容，就很好理解并知道为什么要这样处理。</p> <p>如果在高清屏下 Canvas 绘制模糊，原因大概率是没有进行以下两部处理（多数可能是没有乘以 DPR）：</p> <pre><code class="language-js">// 1. 仅确保了 Canvas 的实际尺寸跟文档流占据的空间一致，以避免变形 ctx.canvas.width = elementWidth * dpr ctx.canvas.height = elementHeight * dpr // 2. 确保后续绘制以相同的比例进行 ctx.scale(dpr, dpr) </code></pre> <p>如果在 Canvas 上绘制一张图片，还要检查图片本身是否清晰。</p> <h2>总结</h2> <p>记住这两个结论：</p> <ul> <li><strong>当图片原始尺寸 = 图片渲染尺寸时，图片在屏幕上显示最清晰</strong></li> <li><strong>图片原始尺寸 = CSS 尺寸 * DPR</strong></li> </ul> <h2>旧内容废弃</h2> <details> <summary>Deprecated </article> <article> <h1>JavaScript 数组</h1> <p>Sun, 26 Feb 2023 08:12:39 GMT</p> <ol> <li>筛选满足条件的项</li> </ol> <pre><code class="language-js">const arr = [1, 6, 9, 3, 6, 56, 7, 36] arr.filter(item => item > 6 && item < 32) // 输出 [9, 7] </code></pre> <ol start="2"> <li>去掉空字符、空格字符串、null、undefined</li> </ol> <pre><code class="language-js">const arr = ['A', '', 'B', null, undefined, 'C', ' '] const newArr = arr.filter( item => item && item.trim() // 注：IE9(不包含IE9)以下的版本没有trim()方法 ) console.log(newArr) // 输出 ['A', 'B', 'C'] </code></pre> <ol start="3"> <li>排序（按对象属性排序）</li> </ol> <pre><code class="language-js">const fruit = [ { id: 3, type: '苹果' }, { id: 7, type: '草莓' }, { id: 2, type: '梨子' }, { id: 6, type: '凤梨' }, ] function sortById(item1, item2) { // 升序，如降序，反过来即可 return item1.id - item2.id } console.log(fruit.sort(sortById)) // 输出 [{id: 2, type: '梨子'}, {id: 3, type: '苹果'},{id: 6, type: '凤梨'},{id: 7, type: '草莓'}] // array.sort() 方法是在原数组的基础上重新排序，不会生成副本。 </code></pre> <ol start="4"> <li>数组去重</li> </ol> <pre><code class="language-js">const newArr = arr.reduce((pre, cur) => { if (!pre.includes(cur)) { return pre.concat(cur) } else { return pre } }, []) console.log(newArr) // [1, 6, 9, 3, 56, 36] </code></pre> </article> <article> <h1>Muse UI 遇到的坑</h1> <p>Sun, 26 Feb 2023 08:10:36 GMT</p> <p>故事背景是这样的，最近做一个Vue项目，使用到 <a href="https://github.com/museui/muse-ui">Muse UI</a> 组件库。刚开始时想着能用 Material Design 设计规范是一件非常开心的事情，然后事情并不会一直美好下去。。。</p> <p>项目本身需要用到 Material Icon 字体包，但由于一些众所周知的原因，国内网络无法访问一些外网。于是采用了本地化部署字体的方法。下载 Material Icons 字体包，然后放到 <code>static</code> 静态文件夹中，再从 <code>index.html</code> 引入。</p> <p>问题来了：</p> <ol> <li>在首页（路由是：<code>/</code>），可以正常读取到字体包，所以页面渲染成功，没问题的。</li> <li>当进入其他路由（例如历史行程路由：<code>/trip/history</code>），刚进入页面同样是渲染成功。当此时对页面重新加载时，就会出现错误，字体图标找不到，只显示了的字体图标名称。</li> </ol> <p>▼ 首页 </p> <p>▼ 历史行程 </p> <blockquote> <p>对于这个 Bug，大概困扰了我一个多月。一度很无奈解决不了，甚至想过放弃使用 Muse UI。直到今天才发现问题所在，然后就解决了。</p> </blockquote> <p>按照官方文档的方法引入（最后就在这里解决的，就是一个退格键的事）：</p> <pre><code class="language-html">// index.html <link rel="stylesheet" href="./static/fonts/material-icons/material-icons.css"/> </code></pre> <p>这个 Bug 是在控制台偶然 Warning：<code>Resource interpreted as Stylesheet but transferred with MIME type text/html: "URL(这个URL是关于 Material Icon 的路径)"</code>，才意识到 URL 错了。</p> <p>▼ 首页 </p> <p>▼ 历史行程 </p> <ol> <li>仔细对比路径之后发现了问题，首页的 Requset URL 是正确的，而历史行程页面是错误的。然后就锁定到 <code>index.html</code> 中引入 Material Icon 的 <code><link/></code> 标签。</li> <li>跟官方文档对比后，好像没发现有错。由于 <code>index.html</code> 和 <code>static</code> 文件夹是同级目录下的，所以 <code>href="./static/fonts/material-icons/material-icons.css"</code> 按道理应该是没错的，官方文档也这么写，但实际上确实出错了。</li> </ol> <p>于是乎......我把路径改成项目根目录，然后就行了，如下。</p> <pre><code class="language-html">// index.html <link rel="stylesheet" href="/static/fonts/material-icons/material-icons.css"> </code></pre> <p>在本地确定没问题后，再打包项目放到云服务器上，看看能否读取到静态资源，发现也正常。</p> <p>回想整个过程，最主要是因为没发现在不同页面下的 Request URL 不一致，且其中一个是不正确的。发现了这个问题，事情就好办了。</p> <p>这个 Bug 困扰太久了，作个记录。</p> </article> <article> <h1>vue-baidu-map 进入页面自动定位的解决方案！</h1> <p>Sun, 26 Feb 2023 08:07:35 GMT</p> <p>之前也被这问题困扰过，在网上查了一番，没找到解决方法。</p> <p>直到今天，在 <a href="https://github.com/Dafrok/vue-baidu-map">Dafrok/vue-baidu-map</a> 提了个问题，才点醒了我。此前没有认真阅读 vue-baidu-map 的<a href="https://dafrok.github.io/vue-baidu-map/#/zh/start/usage">文档</a>。（也可能是看完忘了）</p> <p><a href="https://dafrok.github.io/vue-baidu-map/#/zh/start/usage">文档原话</a>：由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。</p> <p></p> <p>我试过，以上这种方法好像是可行，效果可以出来，但我们最好采用作者提供的正确方法！</p> <p></p> <p>推荐这种方法！那下面解决进入页面自动定位的方法也是在这里。(仅供参考)</p> <blockquote> <p>我只是一个小，不足之处欢迎指出！</p> </blockquote> <p>▼ template： </p> <p>▼ script </p> </article> <article> <h1>Uncaught SyntaxError: Unexpected token <</h1> <p>Sun, 26 Feb 2023 08:05:52 GMT</p> <p>今天做一个 VUE 的项目，引入 JS 文件时遇到了一个问题：</p> <p></p> <p>控制台的提示：<code>Uncaught SyntaxError: Unexpected token <</code>。查看源文件如下图所示：</p> <p></p> <p>提示：<code><!DOCTYPE html></code> 出错，是跟我开玩笑是吧！</p> <p>但根据以往的印象，应该是引入 JS 的问题。确认 JS 文件没出错后，再仔细看了看 <code>index.html</code> 文件。</p> <p></p> <p>原本我的 JS 文件是放在 <code>/src/utils</code> 文件夹下的，但引入 <code>/src</code> 和 <code>/static</code> 的文件是有区别的。其中区别推荐看这篇文章：<a href="https://www.cnblogs.com/huangqiao/p/7798887.html">vue 中静态文件引用注意事项</a>。</p> <p>现在我的解决办法是将 JS 文件放到 <code>/static/utils</code> 目录下，引入路径也改成：<code><script src="./static/utils/sockjs.js"></script></code>，这样就不报错了！</p> </article> <article> <h1>Vue 项目中常见问题的解决办法（不定期更新）</h1> <p>Sun, 26 Feb 2023 08:01:05 GMT</p> <blockquote> <p>大佬请绕路</p> </blockquote> <h2>页面间传参问题</h2> <p>页面 A 跳转到页面 B 需要传参，我一般采用的是编程式导航 <code>router.push()</code>，而不是声明式导航 <code><router-link :to=" "></code>，二者效果作用都一样。以下为路由设置：</p> <pre><code class="language-js">// 部分不关键的代码省略 // ... const routes = [ { path: '/trip/history', name: 'HistoryTrip', component: HistoryTrip, }, { path: '/trip/history/detail', name: 'TripDetail', component: TripDetail, }, ] const router = new VueRouter({ routes, // 使用 HTML 5 history 模式 mode: 'history', }) export default router </code></pre> <p>编程式传参有两种方式：</p> <p>方式一：<code>router.push({ name: 'TripDetail', params: { TripOrderId: 123 }})</code></p> <pre><code class="language-js">// A 页面，此时 URL 为：http://localhost:8080/trip/history this.$router.push({ name: 'TripDetail', params: { TripOrderId: 123 }}) // B 页面获取参数的方法，此时的 URL 为：http://localhost:8080/trip/history/detail console.log(this.$route.params.TripOrderId) </code></pre> <p>大家注意一下 B 页面的 URL，上面并没有 TripOrderId 这个参数。采用这种方法进行传参有两个缺点，这就是其中一个。另一个就是：跳转到页面 B 之后，如果对页面进行刷新，这个 params 参数是会丢失的。打印一下就知道，打印结果应该是 undefined。方式二（推荐）：<code>router.push({ path: '/trip/history/detail', query: { TripOrderId: 123 }})</code></p> <pre><code class="language-js">// A 页面，此时URL为：http://localhost:8080/trip/history this.$router.push({ path: '/trip/history/detail', query: { TripOrderId: 123 }}) // B 页面获取参数的方法，此时的URL为：http://localhost:8080/trip/history/detail?TripOrderId=123 console.log(this.$route.query.TripOrderId) </code></pre> <p>方法二中，最明显的就是 URL 中可以看出参数是什么，这种方法更为直观。最重要的是对页面进行刷新，query 参数并不会丢失，依然可以在地址栏看到 TripOrderId 参数。</p> </article> <article> <h1>前端那些经常被忽视而真实存在的小问题</h1> <p>Sun, 26 Feb 2023 08:00:10 GMT</p> <p>img 在 div 总有那几个像素的高度不能完全填充的问题（前提是不设置 div 宽高）。</p> <p>解决办法是：给 img 加个 <code>display: block</code>。</p> <pre><code class="language-html"><style> .div1 { background: red; } .div1 img { width: 100px; height: 100px; /* display: block 加上即可解决 */ } </style> <div class="div1"> </div> </code></pre> <p>▼ 实际效果图，按道理 div1 宽高应该是 100x100 </p> </article> <article> <h1>JS 代码片段</h1> <p>Sun, 26 Feb 2023 07:56:07 GMT</p> <p></p> <h2>首字母大写转换</h2> <pre><code class="language-js">function captialize([first, ...rest]) { return first.toUpperCase() + rest.join('') } </code></pre> <h2>生成数字范围数组</h2> <pre><code class="language-js">function range(length) { return Array.from({ length }, (_, index) => index) } </code></pre> <h2>过滤数组虚值</h2> <p>虚值（falsy）有 <code>undefined</code>、<code>null</code>、<code>false</code>、<code>+0</code>、<code>-0</code>、<code>NaN</code>、<code>0n</code>、<code>''</code>，除此之外称为真值（truthy）。</p> <pre><code class="language-js">function filterFalsy(arr) { return arr.filter(Boolean) } </code></pre> <h2>生成随机字符串</h2> <pre><code class="language-js">function getRandomKey() { return Math.random().toString(36).slice(2) } // create unique id from letters and numbers const uniqueAlphaNumericId = (() => { const heyStack = '0123456789abcdefghijklmnopqrstuvwxyz' const randomInt = () => Math.floor(Math.random() * Math.floor(heyStack.length)) return (length = 24) => Array.from({ length }, () => heyStack[randomInt()]).join('') })() </code></pre> <h2>生成随机颜色值（十六进制）</h2> <pre><code class="language-js">function getRandomColor() { // 带不透明度的话 slice(2, 10) return Math.random().toString(16).slice(2, 8) } </code></pre> <h2>颜色转换 RGB → Hex</h2> <pre><code class="language-js">function rgb2hex(rgb) { return `#${((rgb.r << 16) | (rgb.g << 8) | rgb.b).toString(16).padStart(6, '0')}` } </code></pre> <h2>反转字符串</h2> <pre><code class="language-js">function reverseString(str) { return [...str].reduce((a, s) => s + a) } </code></pre> <h2>五星打分</h2> <p>有大佬利用这个思路做了个五星评级的组件，详看：<a href="https://zhuanlan.zhihu.com/p/33464317">★构建东半球最小的评级组件☆</a>。</p> <pre><code class="language-js">function getRating(rate) { if (rate > 5 || rate < 0) throw new Error('不在范围内') return '★★★★★☆☆☆☆☆'.substring(5 - rate, 10 - rate) // return '★'.repeat(rate) + '☆'.repeat(5 - rate) } </code></pre> <h2>判断是否为苹果设备</h2> <pre><code class="language-js">function isAppleDevice() { return /(iPhone|iPad|iPod|iOS|mac\sos)/i.test(navigator.userAgent) } </code></pre> <h2>数字千分位表示法</h2> <p>思路看<a href="https://github.com/tofrankie/blog/issues/134">这里</a>。</p> <pre><code class="language-js">function thousandsReplace(str) { return String(str).replace(/\B(?=(\d{3})+$)/g, ',') } thousandsReplace(10000) // "10,000" </code></pre> <h2>移除末尾 0</h2> <p>常用场景是价格展示。</p> <pre><code class="language-js">function removeTrailingZero(str) { const reg = /(?:\.0*|(\.\d+?)0+)$/ return str.replace(reg, '$1') } </code></pre> </article> <article> <h1>深究 Safari 下 border-radius & overflow 不生效的问题</h1> <p>Sun, 26 Feb 2023 07:55:14 GMT</p> <p></p> <h2>背景</h2> <p>前两天在做需求的时候，发现了 Safari 浏览器（包括 iOS 平台各浏览器）下有一个渲染的 Bug，其他则没问题。</p> <p>复现示例如下：</p> <pre><code class="language-html"><div class="box"> </div> </code></pre> <pre><code class="language-css">.box { width: 270px; height: 169px; margin: 0 auto; overflow: hidden; border-radius: 30px; border: 4px solid #000; } .box img { width: 100%; height: 100%; transform: translateZ(10px); } </code></pre> <p> <a href="https://codesandbox.io/s/overflow-hidden-border-radius-bu-sheng-xiao-demo-qesus8?file=/index.html">CodeSandbox Demo</a></p> <p>其实就是简单地在 <code>.box</code> 中添加了 <code>overflow: hidden; border-radius: 30px;</code> 做一个圆角处理。上图为预期表现。但是在 Apple 的 WebKit 平台（不包含 Chrome 的 Blink 平台），就出现问题了 👇</p> <p></p> <p>是 overflow: hidden 处理无效？还是 border-radius 的问题？</p> <h2>原因</h2> <p>解决方法很多，我们先深究下原因。</p> <p>前面，我们给 <code></code> 添加了 <code>transform: translateZ(10px)</code>，于是该元素产生了 Composite Layer（合成层）。</p> <pre><code class="language-css">.box img { width: 100%; height: 100%; transform: translateZ(10px); } </code></pre> <p></p> <p>而 Webkit 内核中，<code>border-radius</code> 对含有 Composite Layer 的元素的裁剪是存在 Bug 的，该问题可以追溯到 2011 年，很早就有人提出问题了。</p> <blockquote> <p><a href="https://bugs.webkit.org/show_bug.cgi?id=68196">Bug 68196: border-radius clipping of composited layers doesn't work</a></p> </blockquote> <p>发现该 Bug 在 2022 年 9 月 7 日已被标记为「RESOLVED FIXED」，在 2022 年 10 月 19 日发布的 <a href="https://webkit.org/blog/13394/release-notes-for-safari-technology-preview-156/">Safari Technology Preview 156</a> 中已修复。好家伙，这问题整整十多年才解决。</p> <p>隔壁 Blink 内核（基于 Webkit 的一个分支）则在 2017 年 1 月 24 日修复。</p> <blockquote> <p><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=157218">Issue 157218: border-radius clipping without a stacking context does not apply to composited children</a></p> </blockquote> <h2>解决方法</h2> <p>我们只要在 <code>border-radius</code> 的元素上添加一个可创建 Stacking Context（层叠上下文）的 CSS 属性即可。比如 <code>transform: scale(1)</code>、<code>transform: translateZ(1px)</code>、<code>isolation: isolate</code>、<code>position: relative; z-index: 0</code> 等等。</p> <ul> <li>从语义角度考虑，个人更偏向使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/isolation">isolation</a>，它表示该元素是否必须创建一个新的层叠上下文。</li> <li>从兼容性角度考虑，相比 isolation，transform 或 position + z-index 会更好一些。</li> </ul> <pre><code class="language-css">.box { width: 270px; height: 169px; margin: 0 auto; overflow: hidden; border-radius: 30px; border: 4px solid #000; isolation: isolate; /* 新增 */ } .box img { width: 100%; height: 100%; transform: translateZ(10px); } </code></pre> <p></p> <h2>参考链接</h2> <ul> <li><a href="https://bugs.webkit.org/show_bug.cgi?id=68196">border-radius clipping of composited layers doesn't work</a></li> <li><a href="https://github.com/WebKit/WebKit/pull/3883">border-radius clipping of composited layers doesn't work #3883</a></li> <li><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=157218">Issue 157218: border-radius clipping without a stacking context does not apply to composited children</a></li> <li><a href="https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari">Overflow: hidden with border radius not working on Safari</a></li> </ul> </article> <article> <h1>关于 CSS Reset 的思考</h1> <p>Sun, 26 Feb 2023 07:54:53 GMT</p> <p></p> <p>记得当时第一次接触 CSS，老师一上来就说用这个抹平浏览器的样式差异。</p> <pre><code class="language-css">* { margin: 0; padding: 0; } </code></pre> <p><strong>但，这合理吗？</strong></p> <p>显然，这是不合理的。margin 差异的只有 body 元素，但上述做法却对所有元素生效，会使得浏览器为元素计算样式的时候更耗时。</p> <p>相关文章：</p> <ul> <li><a href="https://www.cnblogs.com/coco1s/p/6249038.html">reset.css 知多少？</a></li> <li><a href="https://www.zhangxinxu.com/wordpress/2010/04/css-reset%E7%9A%84%E9%87%8D%E6%96%B0%E5%AE%A1%E8%A7%86-%E9%81%BF%E5%85%8D%E6%A0%B7%E5%BC%8F%E9%87%8D%E7%BD%AE/">CSS reset 的重新审视 – 避免样式重置</a></li> <li><a href="http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/">Reset Reasoning</a></li> <li><a href="https://nicolasgallagher.com/about-normalize-css/">About normalize.css</a></li> </ul> <p>可选项：</p> <ul> <li><a href="https://github.com/necolas/normalize.css/">normalize.css</a></li> <li><a href="https://github.com/sindresorhus/modern-normalize">modern-normalize</a></li> <li><a href="https://github.com/csstools/postcss-normalize">postcss-normalize</a></li> <li><a href="https://meyerweb.com/eric/tools/css/reset/">CSS Tools: Reset CSS</a>（文中示例并非最新版本）</li> <li><a href="https://github.com/jensimmons/cssremedy">CSS Remedy</a></li> </ul> </article> <article> <h1>overflow 使得 transform-style 失效了</h1> <p>Sun, 26 Feb 2023 07:54:13 GMT</p> <p></p> <p>这周做了一个需求，出现了 Bug，经排查后发现：</p> <p><strong>同一元素同时设置 <code>overflow: hidden</code> 和 <code>transform-style: preserve-3d</code> 样式，会使得后者失去 3D 效果，也就是相当于 <code>transform-style: flat</code>。</strong></p> <p>下面用示例验证一下：</p> <pre><code class="language-html"><div class="container"> <div class="rect red"></div> <div class="rect green"></div> </div> </code></pre> <ul> <li><code>.constainer</code> 区域设置了 <code>transform-style: preserve-3d</code>；</li> <li><code>.red</code> 区域设置了 <code>transform: translate3d(20px, 20px, 10px)</code>；</li> <li><code>.green</code> 区域设置了 <code>transform: translate3d(0, 0, 5px)</code>；</li> </ul> <p>👇</p> <pre><code class="language-css">.container { margin: 0 auto; border-radius: 10px; padding: 10px; width: 200px; height: 200px; background: #f8f8f8; transform-style: preserve-3d; } .rect { box-sizing: border-box; border: 2px solid #000; border-radius: 4px; width: 100px; height: 100px; } .red { background: #f00; /* translateZ 为 10px */ transform: translate3d(20px, 20px, 10px); } .green { background: #0f0; /* translateZ 为 5px */ transform: translate3d(0, 0, 5px); } </code></pre> <p>由于红色区域与绿色区域置于 3D 空间中，其中红色在 Z 轴更上面，因此实际表现如下，与预期一致。 👇</p> <p></p> <p>一旦，将 <code>overflow: hidden</code> 应用于 <code>.container</code>：</p> <pre><code class="language-css">.container { margin: 0 auto; border-radius: 10px; padding: 10px; width: 200px; height: 200px; background: #f8f8f8; transform-style: preserve-3d; /* 新增 */ overflow: hidden } </code></pre> <p>那么结果就... 👇</p> <p></p> <p>在不同设备实际表现还不一样，应该是渲染内核实现不一致导致的。FireFox 浏览器同左边表现一样。其中左边为「非预期效果」，右边为「预期效果」。</p> <p>示例：<a href="https://codepen.io/tofrankie/pen/ExLWRPQ">CodePen</a></p> <p>我们分析一下左边的原因：</p> <blockquote> <p>我们知道，使用 <code>transform</code> 会使得元素创建一个「层叠上下文」，也就是说 <code>.red</code> 和 <code>.green</code> 是两个不同的层叠上下文。由于这里并没有使用 <code>z-index</code> 来控制元素的「层叠顺序」，加上 <code>overflow: hidden</code> 使得 <code>transform-style: preserve-3d</code> 失去了 3D 空间效果，因此无法通过 <code>transform: translateZ()</code> 的大小来控制层叠顺序。因此在文档流中遵循「后者居上」的原则，使得 <code>.green</code> 处于 <code>.red</code> 的上方（即左边的表现）。</p> </blockquote> <p>因此，可得出结论：</p> <blockquote> <p><strong>在「非 Webkit 内核」中，同一元素同时设置 <code>overflow: hidden</code> 和 <code>transform-style: preserve-3d</code> 样式，会使得后者失去 3D 效果，也就是相当于 <code>transform-style: flat</code>。</strong></p> </blockquote> <p>注意，以上结论表述为「非 Webkit 内核」可能不严谨。原因是：以上 Chrome 为 Mac 平台的截图，查看了其 UA 是 <code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36</code> 标注的是 Webkit 内核，难道实际是 Google 的 Blink 内核（虽说 Blink 师出 Webkit）？如果是的话，表述就没问题了。</p> <p>有时候，犯错了印象才会更加深刻...</p> </article> <article> <h1>关于浏览器如何渲染含小数像素的问题</h1> <p>Sun, 26 Feb 2023 07:53:34 GMT</p> <p></p> <p>最近跟进的一个项目，其中涉及到含小数像素的渲染问题，在查阅了一番资料之后，有了全新的认识。</p> <p>以下为相关链接，等周末有空再整理一下：</p> <ul> <li><a href="https://zhuanlan.zhihu.com/p/401287272">深究移动端适配那些坑：小数像素、图片模糊</a></li> <li><a href="https://www.zhihu.com/question/264372456">浏览器将 rem 转成 px 时有精度误差怎么办？</a></li> <li><a href="https://www.zhihu.com/question/48624427/answer/134621269">css 设置元素的宽高为整数，为什么有的浏览器解析出来的宽高是小数？</a></li> <li><a href="https://github.com/yiyizym/yiyizym.github.io/blob/a11e114b9b4527921a2d26b666bb6435b0cf3119/_posts/2018-01-07-why_circle_not_round.markdown">说好一起变圆，你怎么就瘦了？</a></li> <li><a href="https://isux.tencent.com/articles/105.html">浏览器亚像素渲染与小数位的取舍</a></li> <li><a href="https://trac.webkit.org/wiki/LayoutUnit">LayoutUnit</a></li> <li><a href="https://github.com/Jiavan/blog/issues/5">LayoutUnit & Subpixel Layout</a></li> <li><a href="https://www.w3.org/TR/CSS22/cascade.html#value-stages">Assigning property values, Cascading, and Inheritance</a></li> </ul> </article> <article> <h1>你真的了解「像素」吗？</h1> <p>Sun, 26 Feb 2023 07:52:08 GMT</p> <p></p> <p>一切都从「像素」开始...</p> <blockquote> <p>从<a href="https://www.wikiwand.com/en/Pixel">维基百科</a>词源可知，像素 <code>pixel</code> 一词由 <code>pictures</code> 和 <code>element</code> 两个词的简写形式 <code>pix</code> 和 <code>el</code> 结合而来。</p> </blockquote> <p>像素，在数字成像中是不可分割的最小单元，可分为两类：</p> <ul> <li><strong>虚拟像素</strong>：其大小是任意的、可变的，没有实际的物理尺寸大小。</li> <li><strong>物理像素</strong>：通常用于描述手机、电脑、显示器等设备的像素，它在设备出厂时已经确定，是不可变的，具有实际的物理尺寸大小（一般使用英寸表示）。</li> </ul> <p>物理像素（即屏幕像素，screen pixel）是显示设备成像的最小单位。我们「肉眼」看到的物理像素都是真实的物理发光元件，既然是物理元件，就不可能「无缝」填满整个屏幕，而且像素（即元件）大小、形状也是可以自由定义的，在屏幕上多是方形或者接近方形的。两个相邻像素之间的距离就是点距（dot pitch），点距越小成像越细腻，近距离使用体验越好。</p> <p>但并不是说像素紧密排列就意味着「视觉效果」更好，比如说户外硕大的 LED 广告牌，是可以明显地看到黑色缝隙的，原因是它们的元件排列是有间隙的。</p> <p>虚拟像素到物理成像，是有一定的映射关系的，具体由显示设备或打印设备来决定。</p> <h2>一、分辨率</h2> <p>我们发现，通常描述「<a href="https://www.wikiwand.com/en/Resolution">分辨率</a>」的单位也叫像素，但有什么区别呢？</p> <ul> <li> <p><strong>物理屏幕分辨率</strong>（Physical screen resolution）：泛指电视机、电脑显示器、手机屏幕等显示设备的分辨率，它在设备出厂时便以确定，不可修改，而且是有着具体的物理尺寸大小。</p> <p>常说的 1920 × 1080 分辨率的手机，指的是显示器横向排列了 1080 个像素，纵向排列了 1920 个像素。</p> </li> <li> <p><strong>显示分辨率</strong>（<a href="https://www.wikiwand.com/en/Display_resolution">Display resolution</a>）：也称作屏幕分辨率（screen resolution），它没有具体的物理大小，是可以修改的。</p> <p>常说的“调节电脑屏幕分辨率”，修改的就是显示分辨率。当显示器分辨率与屏幕分辨率一致时，表示一个虚拟像素将会用一个物理像素来显示，此时显示效果是最佳的。当二者不相同时，将有相关系统使用算法去模拟像素，而这些模拟处理都会带来画质的损失。</p> </li> <li> <p>还有很多分类，比如 Image resolution、Printing resolution、Sensor resolution 等等，详看 <a href="https://www.wikiwand.com/en/Resolution">Wiki</a>。</p> </li> </ul> <p>以上描述源自<a href="https://zhuanlan.zhihu.com/p/97895083">这里</a>。</p> <blockquote> <p>请注意，不能单凭显示器分辨率来计量屏幕的细腻程度。试想，同样是 1920 × 1080 分辨率，一个放在 5.5 英寸的手机屏幕上，一个放在 40 英寸的电视机屏幕上，细腻程度会一样吗？</p> </blockquote> <h2>二、屏幕尺寸</h2> <p>这玩意本来就是外国人发明的，因此常用单位「<a href="https://www.wikiwand.com/en/Inch">英寸</a>」来描述。单位换算：1 英寸 = 2.54 厘米（cm）。</p> <blockquote> <p>请注意，<strong>英寸是「长度」单位</strong>，而不是「面积」单位。</p> </blockquote> <p>比如 4.7 英寸的手机，这里的 4.7 英寸指的是<strong>手机显示屏「对角线」的长度</strong>，而不是显示器的宽度或者高度，更不是面积。对，就是数学中直角三角形的那个斜边，勾股定理还记得吧。</p> <p>下文将会提到的像素密度（PPI）表示「每英寸」屏幕所拥有的像素数，也是指对角线的长度，而非面积大小。</p> <h2>三、像素密度</h2> <p><a href="https://www.wikiwand.com/en/Pixels_per_inch">像素密度</a>（Pixel density），通常用来计量电子设备屏幕细腻程度。</p> <blockquote> <p>像素密度的单位一般是 <strong>PPI（Pixel Per Inch，每英寸像素）</strong>，表示单位长度上的像素数量（注意，不是单位面积的像素数量）。</p> </blockquote> <p>电子设备的 PPI 取决于「屏幕尺寸」和「显示器分辨率」，计算规则如下：</p> <p></p> <ul> <li><code>dp</code> 为屏幕对角线的分辨率</li> <li><code>di</code> 为屏幕对角线的长度（单位为英寸）</li> <li><code>wp</code> 为屏幕横向分辨率</li> <li><code>hp</code> 为屏幕纵向分辨率</li> </ul> <p>以 4.7 英寸的 iPhone 7 为例，分辨率为 750 × 1334，像素密度约为 326PPI（<a href="https://www.calculatorsoup.com/calculators/technology/ppi-calculator.php">在线换算</a>）。需要注意的是，应以设备「实际尺寸」换算，而非厂商「宣传尺寸」，二者之间可能会有一定的偏差，自然计算结果就会产生误差。比如：</p> <p></p> <p>「数码相机」与手机等屏幕不同的是，数码相机的屏幕通常用「点色数」来描述，而不是像素。每个像素包含了三个点色数（分别是红、绿、蓝三原色）。以<a href="https://www.dpreview.com/reviews/canoneos50d/">佳能 50D</a> 相机显示屏为例，它有 920,000 个点色数（应该是约数），即 92 万色，通过这个数据，可以推算出屏幕为 307,200 个像素，分辨率为 640 × 480。因此，相机显示屏的点色数和像素常被人混淆（源自<a href="https://www.wikiwand.com/zh-hans/%E6%AF%8F%E8%8B%B1%E5%AF%B8%E5%83%8F%E7%B4%A0">维基百科</a>）。</p> <p>还有，用于量度「打印机」打印精细程度的计量单位是 <strong>DPI</strong>。</p> <blockquote> <p><strong>DPI（Dots Per Inch，每英寸点数）</strong>，表示单位长度上可打印的点数。</p> </blockquote> <p>虽说 PPI 和 DPI 两者所用的领域存在区别，「像素」只存在于屏幕显示领域，而「点」只出现于打印或印刷领域。但由于 PPI 也会影响到图片的打印质量，因此容易出现混用或混淆的情况。比如，在 SONY Support 的一篇<a href="https://www.sony.com/electronics/support/articles/00027623">文章</a>中指出：</p> <blockquote> <p>Much of the confusion between these two terms happens for a couple of reasons. First, even though PPI refers to the resolution of an on-screen digital image, it can also affect the quality of the final printed picture. Second, even some professional print services request that pictures must be at a certain DPI level before they can be printed; what they normally mean is PPI, not DPI - thus, this adds to the confusion.</p> </blockquote> <p>由于本文的重点讨论的是显示屏幕领域像素之间的关系，而非打印领域，加之本人对此并不是很了解，因此不作过多介绍，点到为止，哈哈！</p> <h2>四、设备独立像素（即逻辑像素）</h2> <p><a href="https://www.wikiwand.com/en/Device-independent_pixel">设备独立像素</a>（device-independent pixel），也称为「逻辑像素」，虽然它属于虚拟像素范畴，但是它固定不可变的，在显示设备出厂时便已确定。</p> <p>从 <a href="https://yesviz.com/iphones.php">YESVZ</a> 网站可以查看常见设备的逻辑像素：</p> <p></p> <p><strong>既然有了物理像素，为什么还要逻辑像素的概念，它是为了解决什么实际问题而出现的呢？</strong></p> <p>在很早以前，一个 CSS 像素由一个物理像素表示（即 DPR 为 1）。改变从 Apple 开始，随着 iPhone 4 发布，苹果向世界展示了一块显示效果俱佳 Retina 屏幕，其后高清屏如雨后春笋般出现，比如 720P、1080P、2K 屏等等，加之各设备的屏幕大小还不一样......面对如此之多不同尺寸不同分辨率的屏幕，对于软件开发者来说是非常头疼的，亟需一种「规范」或「方案」使得同一图像在不同设备上“看起来”一样，因此「逻辑像素」的概念就出现了。</p> <p>前面提到过，虚拟像素到物理成像，是具有映射关系的。在 Web 领域中，这种映射关系可以用 DPR 表示。当 DPR 为 1 时，一个 CSS 像素用一个物理像素表示；当 DPR 为 2 时，一个 CSS 像素用两个物理显示表示，其他同理。</p> <h3>逻辑像素与 CSS 像素</h3> <p>网上很多文章，指出「逻辑像素等于CSS 像素」，真的是这样吗？</p> <p>在「网页未缩放」情况下，逻辑像素与 CSS 像素是 1:1 的关系。如有缩放的话，其缩放比例就是逻辑像素与逻辑像素的比值。</p>  <h3>CSS 像素</h3> <p>我们知道，Web 标准由 <a href="https://www.w3.org/Consortium/">W3C</a>（The World Wide Web Consortium）制定，在 CSS 标准中，长度单位包括「<a href="https://www.w3.org/TR/css3-values/#relative-lengths">相对长度</a>」和「<a href="https://www.w3.org/TR/css3-values/#absolute-lengths">绝对长度</a>」两类。其中 <code>px</code> 是绝对长度单位之一（<a href="https://www.w3.org/TR/css3-values/#absolute-lengths">详见</a>），</p> <p>但真的「绝对」吗？</p> <p>网上很多文章提到 <code>px</code> 归为「相对单位」，原因有二：</p> <ol> <li>不加思索，人云亦云。</li> <li>所选参照物不一样。由于 CSS 像素与物理像素不一定是 1 : 1 的关系，它跟屏幕的像素密度有关，比如在 iPhone 7 下 1 × 1 的 CSS 像素，将会使用 2 × 2 个物理像素去渲染。在 Web 领域通常使用「设备像素比」（Device Pixel Ratio，DPR）去描述 CSS 像素与最终显示成像的关系。</li> </ol> <p>我看到一句话「A pixel no longer equals a pixel」，在当下高清屏大行其道的时代，这句话就成立了，一个虚拟像素不再等于一个物理像素。</p> <h3>设备像素比</h3> <blockquote> <p>DPR（Device Pixel Ratio，设备像素比），表示当前显示设备的物理像素分辨率与 CSS 像素分辨率之比。</p> </blockquote> <p>在 CSS 规范中 <code>window.devicePixelRatio</code> 的计算逻辑如下（<a href="https://drafts.csswg.org/cssom-view/#dom-window-devicepixelratio">详见</a>）：</p> <ol> <li>If there is no output device, return 1 and abort these steps.</li> <li>Let <em>CSS pixel size</em> be the size of a <a href="https://drafts.csswg.org/css-values-4/#px">CSS pixel</a> at the current <a href="https://drafts.csswg.org/cssom-view/#page-zoom">page zoom</a> scale factor and at a <a href="https://drafts.csswg.org/cssom-view/#pinch-zoom">pinch zoom</a> scale factor of 1.0.</li> <li>Let <em>device pixel size</em> be the vertical size of a device pixel of the output device.</li> <li>Return the result of dividing <em>CSS pixel size</em> by <em>device pixel size</em>.</li> </ol> <p>关键词是「缩放比例为 1」、「输出设备处于垂直方向」（可以理解为手机竖屏状态）、</p> <p>设备像素比是可变的，比如页面的缩放（但注意手势缩放不会）</p> <p>未完待续...</p>  </article> <article> <h1>CSS 隐藏滚动条总结</h1> <p>Sun, 26 Feb 2023 07:51:18 GMT</p> <p></p> <h2>一、什么时候会出现滚动条？</h2> <p>我们知道，默认情况下，当一个元素的内容大小超过了所在容器的空间大小时，会产生溢出效果，而且溢出部分的内容是可见的。</p> <p>在 CSS 中，可以使用 <code>overflow</code> 属性对溢出内容做控制，它是 <code>overflow-x</code> 和 <code>overflow-y</code> 的简写属性。其中 <code>overflow</code> 产生效果的前提是：</p> <blockquote> <p>元素所在的块级容器指定了高度（设置 <code>height</code> 或 <code>max-height</code>）或将 <code>white-space</code> 设为 <code>nowrap</code>。</p> </blockquote> <h3>取值</h3> <table> <thead> <tr> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>visibile</code></td> <td>默认值，内容不会被修剪，会呈现在容器之外。</td> </tr> <tr> <td><code>hidden</code></td> <td>内容会被修剪，并且溢出内容不可见。</td> </tr> <tr> <td><code>scroll</code></td> <td>内容会被修剪，浏览器会显示滚动条，滚动可查看溢出内容。</td> </tr> <tr> <td><code>auto</code></td> <td>由浏览器定夺，如果内容被修剪，就会显示滚动条。</td> </tr> <tr> <td><code>overlay</code></td> <td>行为与 <code>auto</code> 相同，但滚动条绘制在内容之上而不是占用空间。仅被基于 WebKit 内核的浏览器所支持。</td> </tr> <tr> <td><code>clip</code></td> <td>行为与 <code>hidden</code> 相同，区别在于它无法通过 DOM API 使得元素滚动（新特性兼容性较差）。</td> </tr> </tbody> </table> <p>由于 <code>overflow</code> 是简写形式，按照规范：</p> <ul> <li>如果指定一个值时，<code>overflow-x</code> 和 <code>overflow-y</code> 都应用相同的值。</li> <li>如果指定两个值时，第一个值应用于 <code>overflow-x</code>，第二个应用于 <code>overflow-y</code>。</li> </ul> <blockquote> <p>但是总有不遵循规范的家伙，在 Firefox 63 之前，指定两个值时，刚好与规范相反，前者作用于 <code>overflow-y</code>，后者作用于 <code>overflow-x</code>。在后续新版本中顺序已经调整过来，如规范一般。<strong>因此，当 <code>overflow-x</code> 和 <code>overflow-y</code> 需指定不同的值时，不建议使用简写形式，应分别设置为好。</strong></p> </blockquote> <h3>注意点</h3> <blockquote> <ol> <li>当一个轴设置了非 <code>visibile</code> 的值，即使另外一个轴指定为 <code>visibile</code>，它的行为也会变成 <code>auto</code> 的效果。</li> <li>当 <code>overflow</code> 指定为非 <code>visibile</code> 的值，该容器会形成块级格式化上下文（Block Formatting Context，BFC）。</li> <li>尽管 <code>overflow: hidden</code> 可以隐藏溢出内容，但使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop">Element.scrollTop</a> 仍可以用来滚动元素。目前有一个<a href="https://caniuse.com/?search=overflow%3A%20clip">兼容性</a>不好的新特性 <code>clip</code> 倒是可以解决这种通过 DOM API 滚动的问题。</li> </ol> </blockquote> <p>关于更多 <code>clip</code> 内容，请看<a href="https://www.zhangxinxu.com/wordpress/2022/02/css-overflow-clip-margin/">文章</a>。</p> <h2>二、如何隐藏滚动条？</h2> <p>在不同浏览器中，隐藏的方式还有点不同，只要在所在的块级容器中，添加以下样式即可。</p> <h3>Chrome、Safari 等基于 WebKit（Blink）内核的浏览器</h3> <p>它使用到 <code>::-webkit-scrollbar</code> 伪元素，更多<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar">请看</a>。</p> <pre><code class="language-css">.container::-webkit-scrollbar { display: none; width: 0; height: 0; color: transparent; } </code></pre> <h3>FireFox 浏览器</h3> <p>使用到标准的 <code>scrollbar-width</code> 属性，更多<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-width">请看</a>。</p> <pre><code class="language-css">.container { scrollbar-width: none; } </code></pre> <h3>IE 浏览器</h3> <p>这货这样处理：</p> <pre><code class="language-css">.container { -ms-overflow-style: none; /* IE 10+ */ } </code></pre> <p>因此，汇总起来如下兼容处理：</p> <pre><code class="language-css">.container { scrollbar-width: none; -ms-overflow-style: none; } .container::-webkit-scrollbar { display: none; width: 0; height: 0; color: transparent; } </code></pre> <h3>小程序</h3> <p>关于微信小程序隐藏 <code><scroll-view></code> 滚动条（暂时未遇到这种需求），请看这两篇文章：</p> <ul> <li><a href="https://blog.csdn.net/qq_41638795/article/details/98172326">微信小程序 -- 去掉 scroll-view 滚动条（测试有效）</a></li> <li><a href="https://developers.weixin.qq.com/community/develop/doc/00024e761d872887f24858d0252000">小程序如何隐藏滚动条</a></li> </ul> <p>The end.</p> </article> <article> <h1>Taro 单位转换优化</h1> <p>Sun, 26 Feb 2023 07:49:47 GMT</p> <p></p> <blockquote> <p>近期将 Taro 从 v3.4.8 升级至 v3.6.20，发现有一些调整（文末）。</p> </blockquote> <h2>一、单位使用</h2> <p>初始化一个项目：</p> <pre><code class="language-shell">$ yarn global add @tarojs/cli $ taro init simple-taro $ yarn dev:weapp </code></pre> <blockquote> <p>实际项目建议将 <code>@taro/cli</code> 安装到项目依赖里面，而不是全局安装。<code>@taro/cli</code> 与 <code>@tarojs/taro</code> 版本一致很重要，可以避免一些问题。</p> </blockquote> <p>以 <code>750px</code> 的设计稿尺寸为例，通常 Taro 配置文件会设置（<a href="https://docs.taro.zone/docs/size">更多尺寸</a>）：</p> <pre><code class="language-js">const config = { designWidth: 750, deviceRatio: { 750: 1 } } </code></pre> <p>这样，源码使用 <code>px</code> 单位即可，打包时会对应平台的单位。比如小程序的 <code>rpx</code>、H5 的 <code>rem</code>。</p> <pre><code class="language-css">/* 编译前 */ .avatar { width: 50px; } /* 编译为小程序 */ .avatar { width: 50rpx; } /* 编译为 H5 */ .avatar { width: 1.0667rem; } </code></pre> <p>如果是运行时，可以使用 <code>Taro.pxtransform</code> API：</p> <pre><code class="language-js">Taro.pxtransform(50) // 无需指定单位 </code></pre> <p>如果不想被转换，可以写成 <code>1Px</code> 或 <code>1PX</code>（排版引擎大小写均可识别）。</p> <pre><code class="language-css">.avatar { width: 1Px; /* 将会被忽略 */ } </code></pre> <p>若要忽略某个文件，则在文件顶部添加 <code>/* postcss-pxtransform disable */</code> 注释即可。</p> <blockquote> <p>注意，如果项目有用 Prettier、Stylelint 等格式化工具，保存时可能会被自动修复为 px，需要用 <code>/* prettier-ignore */</code> 等忽略掉。</p> </blockquote> <p>还提供了这些配置：</p> <pre><code class="language-js">{ postcss: { pxtransform: { enable: true, config: { onePxTransform: true, // 设置 1px 是否需要被转换 unitPrecision: 5, // rem 单位允许的小数位 propList: ['*'], // 允许转换的属性 selectorBlackList: [], // 黑名单里的选择器将会被忽略，不做转换处理 replace: true, // 直接替换而不是追加一条进行覆盖 mediaQuery: false, // 允许媒体查询里的 px 单位转换 minPixelValue: 0 // 设置一个可被转换的最小 px 值 } } } } </code></pre> <h2>二、为什么要优化？</h2> <p>其实 Taro 已经提供了完备转换方案，为什么还要优化呢？</p> <p>示例：</p> <pre><code class="language-css">/* 编译前 */ .avatar { width: 50px; } /* 编译为小程序 */ .avatar { width: 50rpx; } /* 编译为 H5 */ .avatar { width: 1.0667rem; } </code></pre> <p>从编译结果看，编译到 H5 端宽度是 <code>1.0667rem</code>。</p> <p><strong>试想，如果要用到 DevTool 调试像素大小（比如添加 2 像素），面对 <code>width: 1.0667rem</code> 这个值，你要怎么下手呢？</strong></p> <p>如果 H5 端编译前后相差 100，是不是就没有换算负担了？</p> <pre><code class="language-css">/* 编译前 */ .avatar { width: 50px; } /* 编译为 H5 */ .avatar { width: 0.5rem; } </code></pre> <p>好了，我们就朝着这个方向去做...</p> <h2>三、转换原理</h2> <p>你也许用过 <a href="https://github.com/cuth/postcss-pxtorem/">postcss-pxtorem</a> 插件，将 <code>px</code> 转换为 <code>rem</code>。Taro 内部的单位转换插件 <a href="https://github.com/Pines-Cheng/postcss-pxtransform/">postcss-pxtransform</a> 在此基础上二次开发的，新增了对小程序的支持。</p> <p>我们知道 <code>rem</code> 参照物是页面根节点字号。比如根节点字号是 <code>16px</code>，那么 <code>1rem</code> = <code>16px</code> 的长度。</p> <p>假设 750px 设计稿中，某个元素长度为 <code>123px</code> 时，按照根元素字号 <code>16px</code> 来换算，对应就是 <code>123 / 16 = 7.6875rem</code>，这样的话换算负担非常大。</p> <p>如果换算的基础值是 <code>100</code>，那么无论是 <code>123px</code> 还是 <code>345px</code>，原有值除以 <code>100</code> 就是编译结果，换算负担为零。</p> <h3>使用 postcss-pxtorem</h3> <p>在非 Taro 项目中，我通常是这样使用 <code>postcss-pxtorem</code> 的：</p> <pre><code class="language-js">// postcss.config.js module.exports = { // ... plugins: [ require('postcss-pxtorem')({ propList: ['*'], rootValue: 100, minPixelValue: 2 }) ] } </code></pre> <p>我们先看下 <a href="https://github.com/cuth/postcss-pxtorem/#options">postcss-pxtorem</a> 配置项的默认值：</p> <pre><code class="language-js">{ rootValue: 16, unitPrecision: 5, propList: ['font', 'font-size', 'line-height', 'letter-spacing'], // 这些 CSS 属性将会被转换 selectorBlackList: [], replace: true, mediaQuery: false, minPixelValue: 0, exclude: /node_modules/i, } </code></pre> <p>主要关注 <code>rootValue</code> 配置项，它接受一个 <code>Number</code> 或 <code>Function</code> 参数，描述如下：</p> <blockquote> <p>Represents the root element font size or returns the root element font size based on the <a href="https://api.postcss.org/Input.html"><code>input</code></a> parameter.</p> </blockquote> <p>简单来说，<code>书写值/rootValue = 转换值</code>。比如源码是 <code>50px</code>，当 <code>rootValue</code> 为 <code>16</code>，那么结果为 <code>50/16 = 3.125rem</code>。</p> <p>所以 <code>rootValue</code> 设置为 <code>100</code> 的原因很简单：<strong>换算负担最小，约为零</strong>。这样 <code>50px</code> → <code>0.5rem</code>、<code>123px</code> → <code>1.23rem</code>。</p> <h3>设备像素与 CSS 像素</h3> <p>在往下之前，先了解下这些内容：</p> <table> <thead> <tr> <th>设备</th> <th>设备分辨率</th> <th>设备像素</th> <th>CSS 像素</th> <th>设备像素比</th> </tr> </thead> <tbody> <tr> <td>iPhone 5/5s</td> <td>640 × 1136</td> <td>640 × 1136</td> <td>320 × 568</td> <td>2</td> </tr> <tr> <td>iPhone 6/6s/7/8</td> <td>750 × 1334</td> <td>750 × 1334</td> <td>375 × 667</td> <td>2</td> </tr> <tr> <td>iPhone 6/6s/7/8 Plus</td> <td>1080 × 1920</td> <td>1242 × 2208</td> <td>414 × 736</td> <td>3</td> </tr> <tr> <td>iPhone X/XS</td> <td>1125 × 2436</td> <td>1125 × 2436</td> <td>375 × 812</td> <td>3</td> </tr> <tr> <td>iPhone XR</td> <td>828 × 1792</td> <td>828 × 1792</td> <td>414 × 896</td> <td>2</td> </tr> <tr> <td>iPhone 11 Pro</td> <td>1125 × 2436</td> <td>1125 × 2436</td> <td>375 × 812</td> <td>3</td> </tr> <tr> <td>iPhone XS Max/11 Pro Max</td> <td>1242 × 2688</td> <td>1242 × 2688</td> <td>414 × 896</td> <td>3</td> </tr> <tr> <td>iPhone 12 mini</td> <td>1125 × 2436</td> <td>1125 × 2436</td> <td>375 × 812</td> <td>2</td> </tr> <tr> <td>iPhone 12/12 Pro</td> <td>1170 × 2532</td> <td>1170 × 2532</td> <td>390 × 844</td> <td>3</td> </tr> <tr> <td>iPhone 12 Pro Max</td> <td>1284 × 2778</td> <td>1284 × 2778</td> <td>428 × 926</td> <td>3</td> </tr> </tbody> </table> <blockquote> <p>推荐 <a href="https://yesviz.com/">YESVIZ</a> 和 <a href="https://www.mydevice.io/">My Device</a> 两个网站，可以查看常见设备参数。</p> </blockquote>  <p>怎么区分：</p> <ul> <li>设备分辨率：通常是用户比较关注的购机指标。</li> <li>设备像素：是设计师关注的指标，<strong>常说的 750px 设计稿尺寸，就是指设备像素的宽度</strong>。</li> <li>CSS 像素：是开发者需关注的指标，同时要理解设备像素与 CSS 像素的关系。</li> <li>设备像素比：设备像素 / CSS 像素。</li> </ul> <p>我们还经常看得到这样的声明：</p> <pre><code class="language-html"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> </code></pre> <ul> <li><code>width=device-width</code>：定义 Viewport 宽度。由于各浏览器默认 Viewport 宽度可能不一致，而且移动设备的屏幕大小有限，通常会将设备宽度设置为 Viewport 宽度。</li> <li><code>initial-scale=1</code>：定义设备宽度与 Viewport 之间的缩放比例。</li> <li><code>minimum-scale=1</code>：定义缩放比例的最小值。</li> <li><code>maximum-scale=1</code>：定义缩放比例的最小值。</li> <li><code>user-scalable</code>：取值 <code>yes</code> 或 <code>no</code>，其中 <code>no</code> 表示用户将无法缩放当前页面。</li> </ul> <p>为什么要这样设置呢？</p> <blockquote> <p><strong>原来「设备像素比」是指在未缩放状态下，设备像素与 CSS 像素的初始比例关系。</strong></p> </blockquote> <p>当网页缩放比例设为 <code>1</code> 时，<code>document.documentElement.clientWidth</code> 的返回值等于该设备横向 CSS 像素宽度。</p> <h3>动态设置根元素字体大小</h3> <p>接下来，介绍如何动态地设置根元素 <code><html></code> 的字体大小。</p> <p>我们知道，通过 JavaScript 获取元素的宽高等，对应的是 CSS 像素，而不是设备像素，更不是设备分辨率。比如：</p> <p></p> <table> <thead> <tr> <th>设备</th> <th>设备像素</th> <th>CSS 像素</th> <th>设备像素比</th> </tr> </thead> <tbody> <tr> <td>iPhone 7</td> <td>750 × 1334</td> <td>375 × 667</td> <td>2</td> </tr> </tbody> </table> <p>以 iPhone 7 为例，750px 设计稿上的 <code>100px</code> 对应 CSS 像素为 <code>50px</code>。</p> <p>当根元素字号设为 <code>50px</code> 时，此时 <code>1rem = 50 CSS 像素 = 100 设备像素</code>。</p> <p>兼容其他设备可以这样算：</p> <pre><code class="language-js">rootFontSize = document.documentElement.clientWidth / 375 * 50 </code></pre> <p>实现如下：</p> <pre><code class="language-html"><script> !(function (n, e) { var t = n.documentElement var i = 'orientationchange' in window ? 'orientationchange' : 'resize' var d = function () { var n = t.clientWidth if (n) { var e = 50 * (n / 375) e = e > 58 ? 58 : e t.style.fontSize = e + 'px' } } if (n.addEventListener) { e.addEventListener(i, d) n.addEventListener('DOMContentLoaded', d) } })(document, window) </script> </code></pre> <h2>四、Taro 转换原理</h2> <p>前面提到 Taro 对 postcss-pxtorem 进行了二次开发，以适配多端的单位转换。</p> <p>其配置项与 postcss-pxtorem 是相似，最大的区别在于 <code>rootValue</code> 上。尽管在 <a href="https://github.com/Pines-Cheng/postcss-pxtransform/#rootvalue-number-%E5%BF%85%E5%A1%AB">README</a> 提到 <code>rootValue</code> 是必填的，但其实是没用的。</p> <p></p> <p>根据源码 <code>rootValue</code> 在不同端会有不同的换算规则。</p> <ul> <li>源文件 <a href="https://github.com/NervJS/taro/blob/be064b6c9c872bcda2410ad77871021d4c2b70eb/packages/postcss-pxtransform/index.js">taro/packages/postcss-pxtransform/index.js</a>。</li> <li>源文件中 <code>rootValue</code> 的关键逻辑在 <a href="https://github.com/NervJS/taro/blob/be064b6c9c872bcda2410ad77871021d4c2b70eb/packages/postcss-pxtransform/index.js#L50-L71">L50-L71</a>。</li> </ul> <p></p> <p>如果 Taro 的编译配置如下：</p> <pre><code class="language-js">const config = { designWidth: 750, deviceRatio: { 750: 1 } } </code></pre> <p>那么从源码中，可以知道调用 <code>rootValue()</code> 方法，将会得到什么值。以 <code>50px</code> 为例：</p> <p><strong>小程序端：</strong></p> <pre><code class="language-js">options.rootValue = input => 1 / options.deviceRatio[designWidth(input)] // 根据配置，可知 designWidth(input) 结果为 750， // 因此 options.deviceRatio[designWidth(input)] 即为 1 // 所以，小程序端转换，仅涉及单位的转换（px => rpx），数值是不变的，即转换结果为 50rpx。 </code></pre> <p><strong>H5端：</strong></p> <pre><code class="language-js">options.rootValue = input => baseFontSize * designWidth(input) / 640 // 其中 baseFontSize 是源码中写死的 40 // 其中 designWidth(input) 为 750， // 因此该方法返回值将会是 46.875 // 所以 H5 端 50px 会转换为 1.06666667rem </code></pre> <p>到这里，你应该就明白其转换结果为什么会是这样的了。</p> <pre><code class="language-css">/* 编译前 */ .avatar { width: 50px; } /* 编译为小程序 */ .avatar { width: 50rpx; } /* 编译为 H5 */ .avatar { width: 1.0667rem; } </code></pre> <p>完整的转换过程看 <a href="https://github.com/NervJS/taro/blob/be064b6c9c872bcda2410ad77871021d4c2b70eb/packages/postcss-pxtransform/index.js#L207-L220">createPxReplace</a> 部分：</p> <p></p> <p>理解转换规则后，就很简单了。本质上就是通过 <code>String.prototype.replace()</code> 方法来替换字符串而已。从这里，你也理解了 <code>onePxTransform</code> 和 <code>minPixelValue</code> 配置项的作用。</p> <p>至于匹配 <code>px</code> 的正则表达式如下（<a href="https://github.com/NervJS/taro/blob/be064b6c9c872bcda2410ad77871021d4c2b70eb/packages/postcss-pxtransform/lib/pixel-unit-regex.js#L11">#L11</a>）：</p> <pre><code>const pxRegex = /"[^"]+"|'[^']+'|url$[^$]+\)|(\d*\.?\d+)px/g </code></pre> <h2>五、转换调整</h2> <p>Taro 项目 <code>index.html</code> 是这样处理的：</p> <pre><code class="language-html"><script> !(function (n) { function e() { var e = n.document.documentElement, t = e.getBoundingClientRect().width; e.style.fontSize = t >= 640 ? "40px" : t <= 320 ? "20px" : (t / 320) * 20 + "px"; } n.addEventListener("resize", function () { e(); }), e(); })(window); </script> </code></pre> <p>按上一节的调整为：</p> <pre><code class="language-html"><script> !(function (n, e) { var t = n.documentElement var i = 'orientationchange' in window ? 'orientationchange' : 'resize' var d = function () { var n = t.clientWidth if (n) { var e = 50 * (n / 375) e = e > 58 ? 58 : e t.style.fontSize = e + 'px' } } if (n.addEventListener) { e.addEventListener(i, d) n.addEventListener('DOMContentLoaded', d) } })(document, window) </script> </code></pre> <p>通过源码，我们知道 H5 中 <code>rootValue</code> 的计算如下，由于我们的 <code>designWidth</code> 为 <code>750</code>，而 <code>baseFontSize</code> 则是写死的 <code>40</code>。</p> <pre><code class="language-js">options.rootValue = input => baseFontSize * designWidth(input) / 640 </code></pre> <p>要使得 <code>rootValue()</code> 方法的返回值为 <code>100</code>，需要将 <code>designWidth</code> 设为 <code>1600</code>。但是小程序端仍要设为 <code>750</code>，可以通过 <code>process.env.TARO_ENV</code> 判断平台。</p> <pre><code class="language-js">const config = { designWidth: process.env.TARO_ENV === 'h5' ? 1600 : 750, deviceRatio: { 750: 1 }, mini: { postcss: { pxtransform: { enable: true, config: { platform: 'weapp', minPixelValue: 2, onePxTransform: false } } } }, h5: { postcss: { pxtransform: { enable: true, config: { platform: 'h5', minPixelValue: 2, onePxTransform: false, } } } } } </code></pre> <p>至此，就能实现类似 postcss-pxtorem 设置 <code>rootValue</code> 为 <code>100</code> 的效果，编译前后就如预期所想：</p> <pre><code class="language-css">/* 编译前 */ .avatar { width: 50px; } /* 编译为小程序 */ .avatar { width: 50rpx; } /* 编译为 H5 */ .avatar { width: 0.5rem; } </code></pre> <h2>六、2023.11.30 更新</h2> <blockquote> <p>postcss-pxtransform 最新仓库移到了<a href="https://github.com/NervJS/taro/blob/68f9618a5d43856462c9cdc0983f075edf01a15a/packages/postcss-pxtransform/README.md">这里</a>，<a href="https://github.com/Pines-Cheng/postcss-pxtransform/">原先</a>的应该弃用了。</p> </blockquote> <p>最近从 v3.4.8 升级至 v3.6.20 后会导致报错以及样式错乱。</p> <pre><code class="language-text">Error: deviceRatio 配置中不存在 1600 的设置！ </code></pre> <p>从 <a href="https://github.com/NervJS/taro/issues/12078">NervJS/taro #12078</a> 发现了给 taro-h5 的 <a href="https://github.com/NervJS/taro/blob/68f9618a5d43856462c9cdc0983f075edf01a15a/packages/taro-h5/src/api/taro.ts#L85-L87"><code>pxTransform()</code></a> 添加了以下检测逻辑，应该是各平台都加了：</p> <pre><code class="language-js">if (!(designWidth in config.deviceRatio)) { throw new Error(`deviceRatio 配置中不存在 ${designWidth} 的设置！`) } </code></pre> <p>这个问题只要在配置文件加上就好 <code>1600</code> 的 <code>deviceRatio</code> 就能解决：</p> <pre><code class="language-js">const config = { designWidth: process.env.TARO_ENV === 'h5' ? 1600 : 750, deviceRatio: { 750: 1, 1600: 0.8 }, } </code></pre> <p>然后还观察到 <code>baseFontSize</code>、<code>rootValue</code> 计算的规则发生了一些变化（<a href="https://github.com/NervJS/taro/blob/68f9618a5d43856462c9cdc0983f075edf01a15a/packages/postcss-pxtransform/index.js#L42-L98">详见</a>）：</p> <pre><code class="language-js">const transUnits = ['px'] // 变化 1️⃣ const baseFontSize = options.baseFontSize || (options.minRootSize >= 1 ? options.minRootSize : 20) const designWidth = (input) => typeof options.designWidth === 'function' ? options.designWidth(input) : options.designWidth switch (options.platform) { case 'h5': { targetUnit = options.targetUnit ?? 'rem' if (targetUnit === 'vw') { options.rootValue = (input) => { return designWidth(input) / 100 } } else if (targetUnit === 'px') { options.rootValue = (input) => (1 / options.deviceRatio[designWidth(input)]) * 2 } else { // rem // 变化 2️⃣ options.rootValue = (input) => { return (baseFontSize / options.deviceRatio[designWidth(input)]) * 2 } } transUnits.push('rpx') break } // ... } </code></pre> <p>为了跟之前一样使得 <code>rootValue</code> 总等于 <code>100</code>，一是主动配置 <code>baseFontSize</code> 为 <code>40</code>，然后换算过来 <code>deviceRatio['1600']</code> 就是 <code>0.8</code>。</p> <p>更新后的配置如下：</p> <pre><code class="language-js">const config = { designWidth: process.env.TARO_ENV === 'h5' ? 1600 : 750, deviceRatio: { 750: 1, 1600: 0.8 }, mini: { postcss: { pxtransform: { enable: true, config: { platform: 'weapp', minPixelValue: 2, onePxTransform: false } } } }, h5: { postcss: { pxtransform: { enable: true, config: { baseFontSize: 40, platform: 'h5', minPixelValue: 2, onePxTransform: false, } } } } } </code></pre> <p>The end.</p> </article> <article> <h1>CSS 中的伪类、伪元素总结</h1> <p>Sun, 26 Feb 2023 07:49:30 GMT</p> <p></p> <blockquote> <p>本文摘抄自 AlloyTeam 团队：<a href="http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/">总结伪类与伪元素</a>。</p> </blockquote> <p>老是不记得哪个用双冒号，哪个用单冒号，不知道你们有没有这种困惑。尽管知道是可兼容的，但还是想再整理一下。</p> <h2>一、概念</h2> <ul> <li> <p><strong>伪类（pseudo-classes）</strong> 用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。</p> </li> <li> <p><strong>伪元素（pseudo-elements）</strong> 用于创建一些不在文档树中的元素，并为其添加样式。</p> </li> </ul> <p>伪类的操作对象是「文档树中已有的元素」，而伪元素则创建了一个「文档树之外的元素」。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。</p> <h2>二、伪元素是使用单冒号还是双冒号？</h2> <p>按 CSS3 规范，</p> <blockquote> <p>伪元素使用双冒号（<code>::</code>）表示，伪类使用单冒号（<code>:</code>）表示。</p> </blockquote> <p>如果不按规范行事，并需要兼容 IE8 以下浏览器，</p> <blockquote> <p>无论是伪类，还是伪元素，都使用单冒号（<code>:</code>）表示。</p> </blockquote> <p>但是，经过各大浏览器厂商们的加班加点（可能是为了兼容性考虑），</p> <blockquote> <p>除了少部分伪元素（比如 <code>::backdrop</code>）必须使用双冒号之外，大部分伪元素都支持单冒号和双冒号的写法。</p> </blockquote> <p>对于<a href="https://www.w3.org/community/webed/wiki/Advanced_CSS_selectors#CSS3_pseudo-element_double_colon_syntax">伪元素是使用单冒号还是双冒号的问题</a>，W3C 标准中的描述如下：</p> <blockquote> <p>Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg <code>a::after { ... }</code>, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.</p> </blockquote> <p>综上所述：<strong>除了必须要双冒号的伪元素之外，为了向后兼容，建议伪元素也使用单冒号的写法。</strong></p> <h2>三、常见的伪元素、伪类</h2> <p>伪类：</p> <p></p> <p>伪元素：</p> <p></p> <p>具体用法<a href="http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/">原文</a>，真心写得不错~</p> <p>The end.</p> </article> <article> <h1>CSS 变量使用详解</h1> <p>Sun, 26 Feb 2023 07:47:19 GMT</p> <p></p> <p>这篇文章你将学到以下内容：</p> <ul> <li>CSS 变量</li> <li>CSS 常用函数</li> <li>iPhone X 系列机型适配</li> <li>CSS At-rules 和媒体查询</li> <li>深色模式适配</li> </ul> <h2>一、简述</h2> <p>CSS 变量（CSS Variables），也称作 CSS 自定义属性（CSS Custom Properties），它是带有前缀 <code>--</code> 属性名，且带有值的自定义属性。然后通过 <code>var</code> 函数在全文范围复用。</p> <blockquote> <p>至于为什么采用 <code>--</code>，大概是因为 <code>@</code> 被 <a href="https://lesscss.org/">Less</a> 占用了，<code>$</code> 被 <a href="https://sass-lang.com/">Sass</a> 占用了吧。</p> </blockquote> <h3>1.1 语法</h3> <p>定义 CSS 变量的语法非常简单，在变量名称之前添加两个短横线 <code>--</code>：</p> <pre><code class="language-css">--<custom-property-name>: <declaration-value> </code></pre> <p>其中 <code><custom-property-name></code> 表示变量名称，<code><declaration-value></code> 表示变量值，形如：<code>--*</code>。这类自定义 CSS 属性与 <code>color</code>、<code>font-size</code>、<code>background-image</code> 等属性并没有什么不同，只是它没有默认含义罢了，它必须通过 <code>var()</code> 函数复用之后，才会产生意义。</p> <p>其中「变量名称」命名约束是比较宽松的，可以是数字、字母、下划线 <code>_</code>、短横线 <code>-</code> 的组合，但不能包含 <code>$</code>、<code>[</code>、<code>^</code>、<code>(</code>、<code>%</code> 等字符。比如：</p> <pre><code class="language-css">--some-keyword: left; --some-color: #f00; --some-complex-value: 3px 6px rgb(20, 32, 54); </code></pre> <p>甚至可以是以数字开头、也可以是中文、韩文等。</p> <pre><code class="language-css">:root { --红色: #f00; /* 有效 */ --1: 1px; /* 有效 */ } body { background-color: var(--红色); height: var(--1); } </code></pre> <p>当然，实际项目中，千万别以这种花里胡哨、奇奇怪怪的组合来命名变量名称，主要是避免被打。建议使用 <code>kebab-case</code> 方式进行命名，比如 <code>--theme-primary</code> 等。</p> <blockquote> <p>请注意，CSS 变量名称是大小写敏感的，<code>--foo</code> 和 <code>--Foo</code> 是两个不同的变量。这一点与 CSS 属性大小写不敏感是有区别的。</p> </blockquote> <h3>1.2 作用域</h3> <p>同一个 CSS 变量，可以在多个选择器内声明，读取顺序与 CSS 匹配规则一致，优先级最高的生效。请注意，CSS 变量并没有 <code>!important</code> 用法，变量的覆盖规则由 CSS 选择器权重决定。</p> <p>一般情况下，全局性变量放在 <code>:root</code> 内声明，也可以在任意元素中声明 CSS 变量，视实际情况而定即可。如果是小程序，则在全局样式 <code>app.wxss</code> 的 <code>page</code> 内声明。</p> <blockquote> <p><code>:root</code> 这个 CSS <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes">伪类</a>匹配文档树的根元素。对于 HTML 来说，<strong><code>:root</code></strong> 表示 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/html"><code><html></code></a> 元素，除了<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity">优先级</a>更高之外，与 <code>html</code> 选择器相同。</p> </blockquote> <pre><code class="language-css">:root { --theme-primary: #f00; /* 全局可复用 */ } header { --theme-primary: #0f0; /* 仅 header 范围内可复用 */ } section { --theme-primary: #00f; /* 仅 section 范围内可复用 */ } </code></pre> <p>比如 <code><section></code> 内使用 <code>color: var(--theme-primary)</code>，生效的将会是 <code>color: #00f</code>。再者，以下示例中，在 <code><div id="error"></div></code> 中引用 <code>--color</code> 变量，最终生效的是 ID 选择器的变量值。</p> <pre><code class="language-css">:root { --color: #f00; } div { --color: #0f0; } #id { --color: #00f; } </code></pre> <p>总的来讲，CSS 变量是有作用域概念的，它只能作用于自身或后代元素，而兄弟元素、祖先元素都是不用享用的。</p> <p>可以试下这个示例：<a href="https://codesandbox.io/s/css-variable-scope-demo-7p5rio">css-variable-scope-demo</a>。</p> <h3>1.3 兼容性</h3> <p>兼容性如下，还是挺不错的（如果忽略 IE 的话），更多请看 <a href="https://caniuse.com/css-variables">Can I use</a>。</p> <p></p> <p>很棒 🙄，IE 全系不支持，骂骂咧咧地说：还是用 SCSS 或 LESS 吧。可以参考下这个项目：<a href="https://github.com/jhildenbiddle/css-vars-ponyfill">css-vars-ponyfill</a>。</p> <p>对于不支持 CSS 变量的浏览器，可以采用如下方式兼容处理：</p> <pre><code>:root { --color-primary: #00f; } a { color: #00f; color: var(--color-primary); } </code></pre> <p>也可以使用 <code>@supports</code> 规则，然而它也不兼容 IE 浏览器。</p> <pre><code class="language-css">@supports (--foo: 0) { /* supported */ } @supports (not (--foo: 0)) { /* unsupported */ } </code></pre> <h2>二、JavaScript 操作</h2> <p>利用 <code>CSS.supports()</code> 方法即可判断当前浏览器是否支持 CSS 变量，如下：</p> <pre><code class="language-js">const isSupported = window.CSS.supports('--foo', 0) </code></pre> <p>由于 CSS 变量就是自定义的 CSS 属性嘛，因此按照平常设置 CSS 属性的方式去操作即可，如下：</p> <pre><code class="language-js">const element = document.querySelector('selectors') // 定义 CSS 变量 element.style.setProperty('--color', '#f00') // 读取 CSS 变量 element.style.getPropertyValue('--color', '#f00') // 删除 CSS 变量 element.style.removeProperty('--color') </code></pre> <p>另外有一个比较奇怪的用法（来自 <a href="https://drafts.csswg.org/css-variables/#syntax">EXAMPLE 7</a>），如下：</p> <pre><code class="language-css">:root { --foo: if(x > 5) this.width = 10; } </code></pre> <p>尽管这个属性值是「无用」的，不会使得任意 CSS 属性产生实际效果，但是这个 CSS 变量定义是「有效」的。它可以被 JavaScript 读取，至于有什么用，我也不知道。</p> <h2>三、CSS 函数</h2> <h3>3.1 var 函数</h3> <p><code>var()</code> 函数用于读取 CSS 变量，它可以替代元素中「任何属性」中的「值的任何部分」，不能作为属性名、选择器或其他处理属性值之外的值。</p> <p>语法如下：</p> <pre><code class="language-css">var(<custom-property-name>[, <declaration-value>]) </code></pre> <ul> <li><code><custom-property-name></code> 表示自定义属性名</li> <li><code><declaration-value></code>（可选）表示声明值（后备值），<strong>仅自定义属性没有定义时，它才会有效</strong>（类似 ES6 中的函数参数设定默认值）。</li> </ul> <h4>3.1.1 CSS 变量不合法的缺省特性</h4> <p>看看以下示例，变量 <code>--color</code> 的值为 <code>20px</code>，显然它作为 <code>background-color</code> 值的话是无效的，那么 <code><body></code> 会显示什么背景颜色呢？红色？绿色？还是...</p> <pre><code class="language-css">body { --color: 20px; background-color: #f00; background-color: var(--color, #0f0); /* 正确语法，与 background-color: 20px 有着本质上的区别 */ } </code></pre> <p></p> <p>它最终生效的属性值为 <code>transparent</code>，即 <code>background-color</code> 的默认值，因此相当于：</p> <pre><code class="language-css">body { --color: 20px; background-color: #f00; background-color: transparent; } </code></pre> <p>👆 可看 <a href="https://drafts.csswg.org/css-variables/#using-variables">EXAMPLE 13</a>。</p> <p>但请注意，以下示例生效的是 <code>background-color: #f00</code>，就怕有人看到上面示例之后，对原来的认知产生怀疑，特意说明下。</p> <pre><code class="language-css">body { background-color: #f00; /* 有效 */ background-color: 20px; /* 语法错误，这条规则声明被丢弃，因此上一条规则生效 */ } </code></pre> <blockquote> <p>因此，当 CSS 变量值不合法时，生效的是 CSS 属性的“默认值”。</p> <p>但注意，CSS 变量值不合法并不能使得 <code><declaration-value></code> 声明值生效，它仅限于 CSS 变量没有定义才会生效（类似函数参数的默认值仅实参为 <code>undefined</code> 才会生效，即便是 <code>null</code> 等 falsy 实参也不会使其生效一样）。</p> </blockquote> <p>为什么这里默认值要打双引号呢，原因是标准 <a href="https://drafts.csswg.org/css-variables/#using-variables">EXAMPLE 13</a> 部分明确说明了：</p> <blockquote> <p>If the property was one that’s inherited by default, such as <a href="https://drafts.csswg.org/css-color-4/#propdef-color">color</a>, it would compute to the inherited value rather than the initial value.</p> </blockquote> <p>也就是说，如果一个 CSS 属性是可继承的，那个当它应用了一个不合法的 CSS 变量值，最终生效的是其继承值，而不是默认值。比如：</p> <pre><code class="language-html"><style> :root { --not-a-color: 20px; } body { color: #f00; } p { color: var(--not-a-color); } </style> <body> <p>字体会是什么颜色呢？</p> </body> </code></pre> <p></p> <p>你看最终 <code><p></code> 生效的 <code>color</code> 是其从 <code><body></code> 中继承过来的 <code>#f00</code> 红色，而不是 <code>color</code> 的默认颜色 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color#formal_definition">canvastext</a>。</p> <p>插个话题，我很好奇 <code>canvastext</code> 颜色是什么颜色，一般来说它会是黑色 <code>rgb(0, 0, 0)</code>，然后我尝试将系统调至深色模式，然而它并不会默认变为白色，哈哈。然后我翻查了下标准，发现它跟 <system-color> 有关，它一般由浏览器来定义（如下），可看 <a href="https://drafts.csswg.org/css-color-4/#css-system-colors">6.2 System Color</a> 章节。</p> <p></p> <blockquote> <p>因此，比较严谨的说法是：当 CSS 变量值不合法时，生效的是 CSS 属性的继承值或初始值。</p> </blockquote> <h4>3.1.2 var 函数的尾随空格</h4> <pre><code class="language-html"><style> body { --size: 20; font-size: var(--size)px; } </style> <body> <p>字号是多大呢？</p> </body> </code></pre> <p>猜一下 <code>font-size</code> 会是预期的 <code>20px</code> 吗？它不是，如下图：</p> <p></p> <p>请注意，浏览器最终解析出来的规则是：<code>font-size: var(--size) px;</code>，它在 <code>var(--size)</code> 和 <code>px</code> 之间多了一个「空格」，因此这条规则是无效的（注意并不是引用 CSS 变量无效），所以字号是浏览器默认字体大小 <code>16px</code>。</p> <p>如果你使用诸如 VS Code 等编辑器，它一般会有 <code>semi-colon expected</code> 错误提醒的，如果保存自动格式化，它将会被保存为：<code>font-size: var(--size) px;</code>。</p> <p></p> <p>这种情况可结合 <code>calc()</code> 函数处理，比如：</p> <pre><code class="language-css">body { --size: 20; font-size: calc(var(--size) * 1px); /* 这样就能正常计算得出 20px 了 */ } </code></pre> <p>但个人更推荐这样用：对于一些长度、大小等 CSS 属性值，在定义 CSS 变量时，应带上单位：</p> <pre><code class="language-css">body { --size: 20px; font-size: var(--size); } </code></pre> <blockquote> <p>请注意，如果变量值包含单位，就不能写成字符串形式。</p> </blockquote> <pre><code class="language-css">body { --size: '20px'; font-size: var(--size); /* 注意，CSS 变量引用的语法是有效的，但经 CSS 解析器计算之后，其值并不符合 font-size 属性值的要求，因此被判定为语法错误，规则会被丢弃。 */ } </code></pre> <p>相当于 <code>font-size: '20px';</code> 语法错误，规则会被丢弃，因此取其继承值或默认值。</p> <h4>3.1.3 CSS 变量的相互传递性</h4> <p>我们在某个选择器中定义了一个 CSS 变量，它除了在子元素中被复用，它本身作用域内也可以复用，而且与编写顺序无关。比如：</p> <pre><code class="language-css">body { --size: 20px; font-size: var(--size); } </code></pre> <pre><code>body { font-size: var(--size); --size: 20px; } </code></pre> <p>以上两个示例，均是有效的。后者并不会因为 <code>--size: 20px;</code> 定义在后，就不会生效。这样规则，对于我们通过 JavaScript 动态设置 CSS 变量有着非常重要的意义。</p> <h3>3.2 calc 函数</h3> <p><code>calc()</code> 语法非常地简单，如下：</p> <pre><code>property: calc(expression) </code></pre> <p>该函数接收一个表达式作为它的参数，表达式的返回值作为 <code>calc()</code> 函数的值。表达式可以是 <code>+</code>、<code>-</code>、<code>*</code>、<code>/</code> 的组合，而且可以混用不同单位进行运算。</p> <p>它同样支持 CSS 变量，例如：</p> <pre><code class="language-css">.foo { --height: 30px; width: calc(100% - 30px); height: calc(100vh - var(--height)) } </code></pre> <p>注意点：</p> <ul> <li>对于 <code>+</code> 和 <code>-</code> 运算，运算符两边必须要有「空格」，而 <code>*</code> 和 <code>/</code> 运算则没有要求，因此建议都加上空白符。</li> <li>对于 <code>*</code> 运算，参与运算的至少有一个数值（<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/number"><number></a>），且不能为 <code>0</code>。</li> <li>对于 <code>/</code> 运算，运算符 <code>/</code> 右侧必须是一个数值（<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/number"><number></a>）。</li> <li><code>calc()</code> 函数支持嵌套写法，但其实被嵌套的 <code>calc()</code> 函数只会被当做普通的括号，因此函数内直接使用括号就好了。</li> </ul> <p>那么嵌套语法有什么用呢，比如：</p> <pre><code class="language-css">.foo { --widthA: 100px; --widthB: calc(var(--widthA) / 2); --widthC: calc(var(--widthB) / 2); width: var(--widthC); } </code></pre> <p>那么，以上 <code>--widthC</code> 的值就会变成 <code>calc(calc(100px / 2) / 2)</code>，即 <code>25px</code>。</p> <p>Web 前端总是绕不开兼容性，那么看下 <code>calc()</code> 函数的兼容性如何：</p> <p></p> <p>绿悠悠的一片，甚好！可以看到 IE9 以上都支持，可 IE 浏览器不支持嵌套写法，由于 IE 浏览器都不支持 CSS 变量，因此这个无伤大雅。</p> <h3>3.3 env 和 constant 函数</h3>  <p>2017 年 Apple 公司发布了 iPhone X 和 iOS 11，开启了「刘海屏」和底部小横条之路。</p> <p>于是就有了「安全区 Safe Area」之说（<a href="https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/#Layout%20Guides%20and%20Safe%20Area">详见</a>）：</p> <blockquote> <p>A safe area defines the area within a view that isn’t covered by a navigation bar, tab bar, toolbar, or other views a view controller might provide.</p> </blockquote> <p>简单来讲，以 iPhone X 为例，其安全区是指不受刘海（Sensor Housing）、底部小横条（Home Indicator）、设备圆角（Corners）影响的区域，如下图的浅蓝色区域所示，其中粉色部分是指浏览器默认的 Margin 值，通常为了抹平各浏览器不同的外边距，都会设置 <code>body { margin: 0 }</code>。</p> <p></p> <p>我们知道，Viewport 是规则的矩形，如果显示设备的屏幕是不规则（比如圆形）的话，页面中的某些部分就会被裁剪。那么 <code>viewport-fit</code> 可以通过设置可视 Viewport 大小来控制裁剪区域。</p> <p>其中 <code>viewport-fit</code> 提供了 <code>auto</code>（默认）、<code>contain</code>、<code>cover</code> 三种属性值（<a href="https://www.w3.org/TR/css-round-display-1/#extending-viewport-rule">详见</a>）：</p> <pre><code class="language-html"><meta name="viewport" content="viewport-fit=auto|contain|cover" /> </code></pre> <table> <thead> <tr> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>auto</code></td> <td>默认值，表现与 <code>contain</code> 一致，Viewport 会显示在「安全区」之内，相当于 <code>viewport-fit: contain</code>。</td> </tr> <tr> <td><code>contain</code></td> <td>将可视 Viewport 设置为页面所有内容均可见的最大矩形。</td> </tr> <tr> <td><code>cover</code></td> <td>将可视 Viewport 大小设置为显示设备屏幕的外接矩形。</td> </tr> </tbody> </table> <p>以圆形屏幕为例：</p> <p></p> <p>Apple 公司为了适配旗下的全面屏设备，（iOS 11 起）WebKit 内核的浏览器中定义了 <code>safe-area-inset-*</code> 四个环境变量。</p> <ul> <li><code>safe-area-inset-top</code></li> <li><code>safe-area-inset-right</code></li> <li><code>safe-area-inset-bottom</code></li> <li><code>safe-area-inset-left</code></li> </ul> <blockquote> <p>需要注意的是，在竖屏和横屏状态下，<code>safe-area-inset-*</code> 值是不同的。比如，竖屏状态下环境变量 <code>safe-area-inset-left</code> 和 <code>safe-area-inset-right</code> 的值为 <code>0</code>，横屏状态下环境变量 <code>safe-area-inset-top</code> 的值为 <code>0</code>。</p> </blockquote> <p></p> <p>上图源自 <a href="https://objcer.com/2017/09/21/Understanding-the-WebView-Viewport-in-iOS-11-iPhone-X/">Deng's Blog</a>。</p> <p>通过 <code>env()</code> 或 <code>constant()</code> 函数就能引用以上几个环境变量，对于不支持 <code>env()</code> 或 <code>constant()</code> 的浏览器，包含它的样式规则将被忽略。</p> <blockquote> <p>自 Safari Technology Preview 41 和 iOS 11.2 beta 起，<code>constant()</code> 函数已被移除，并用 <code>env()</code> 函数替换（<a href="https://webkit.org/blog/7929/designing-websites-for-iphone-x/">详见</a>）。可为了兼容性，一般两个都会写。</p> </blockquote> <blockquote> <p>另外，若要环境变量 <code>safe-area-inset-*</code> 生效，需将页面设置为 <code>viewport-fit: cover</code>。</p> </blockquote> <p>接下来，会介绍如何适配 iPhone X 系列刘海屏手机，有以下示例：</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <title>Document</title> <style> * { margin: 0; padding: 0; } body { width: 100%; background-color: darkorange; } .container { height: 100%; min-height: 200vh; background-color: forestgreen; } </style> </head> <body> <div class="container"></div> </body> </html> </code></pre> <p>当我们不做任何处理，以上示例在 iPhone X 系列手机横屏状态下，左右边框会空出一部分，究其原因就是 Safari 浏览器会将网页内容置于「安全区之内」，相当于 <code>viewport-fit: contain</code>。</p> <p></p> <p>当我们将 <code><meta></code> 标签内的 <code>viewport-fit</code> 改为 <code>cover</code> 之后，并在页面中添加一首诗。</p> <p></p> <p>这样，Viewport 就占满了显示设备最大的矩形，但因为设备的刘海、圆角等因素，会导致页面中的部分内容无法完全显示。</p> <p>然后，我们试着在 <code>container</code> 内添加左右外边距，其值分别取 <code>safe-area-inset-left</code>、<code>safe-area-inset-right</code> 环境变量。</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" /> <title>Document</title> <style> * { margin: 0; padding: 0; } body { width: 100%; background-color: darkorange; } .container { height: 100%; min-height: 200vh; background-color: forestgreen; /* 新增 */ margin-left: env(safe-area-inset-left); margin-right: env(safe-area-inset-left); } </style> </head> <body> <div class="container"> <article> <h1>蒹葭</h1> <p>蒹葭苍苍，白露为霜。所谓伊人，在水一方。溯洄从之，道阻且长。溯游从之，宛在水中央。</p> <p>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。溯洄从之，道阻且跻。溯游从之，宛在水中坻。</p> <p>蒹葭采采，白露未已。所谓伊人，在水之涘。溯洄从之，道阻且右。溯游从之，宛在水中沚。</p> <p></p> </article> </div> </body> </html> </code></pre> <p>横屏、竖屏显示如下：</p> <p></p> <p>考虑 <code>env()</code> 和 <code>constant()</code> 函数兼容性的写法如下：</p> <pre><code class="language-css">@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { .container { /* 请注意，constant 和 env 先后顺序如下 */ margin-left: constant(safe-area-inset-left); /* 兼容 iOS < 11.2 */ margin-left: env(safe-area-inset-left); /* 兼容 iOS >= 11.2 */ margin-right: constant(safe-area-inset-right); margin-right: env(safe-area-inset-right); } } </code></pre> <h3>3.4 max 和 min 函数</h3> <p>从文章排版来看，这是极不美观的，我们希望在左右两边再加点内边距。PS：上述图片为了更方便对比，采用了外边距（Margin），接下来会将其修改为内边距（Padding）。</p> <pre><code class="language-css">.container { /* 这里将原先的 margin 修改为 padding */ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-left); } </code></pre> <blockquote> <p>但有个小小的需求，我们只希望竖屏状态下，添加 <code>10px</code> 的左右内边距，而横屏状态下取 <code>safe-area-inset-*</code> 的值就好。</p> </blockquote> <p>它们提供了两个 CSS 函数：<code>min()</code> 和 <code>max()</code>，利用它们就能实现这需求。</p> <pre><code class="language-css">.container { /* 这里使用到 max() 函数，表示取二者最大值。 */ padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-left)); } </code></pre> <p>效果如下：</p> <p></p> <p>如果考虑兼容性的话，可以使用 <code>@supports</code> 语法来处理：</p> <pre><code class="language-css">@supports (padding: max(0px)) { .container { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-left)); } } </code></pre> <p>对于 <code>max()</code> 和 <code>min()</code> 的语法和使用非常地简单，分别表示取最大值和最小值。</p> <p>两者语法是一致的，以 <code>max</code> 为例：</p> <pre><code class="language-css">property: max(expression [, expression]) </code></pre> <p>它接受一个或多个值，若有多个值则采用逗号 <code>,</code> 分隔，选择最大的值作为 CSS 属性的值。每个值除了可以是直接数值，还可以是数学运算（如 <code>calc()</code>）、其他表达式（如 <code>attr()</code>）。</p> <p>还支持嵌套 <code>max()</code> 和 <code>min()</code> 函数，需要时可以使用小括号 <code>()</code> 来设定运算顺序。</p> <p>兼容性如下，一如既往 IE 全系不支持：</p> <p></p> <blockquote> <p>至此，相信你对 iPhone X 等机型的适配有更深刻的了解，适配起来就完全没有压力了。</p> </blockquote> <h2>四、CSS At-rules</h2> <p>一个 at-rule 是一个 CSS 语句，它以 <code>@</code> 符号开头，后接一个标识符，并包括直到下一个分号 <code>;</code> 的所有内容或下一个 CSS 块，以先到者为准。</p> <p>主要可分为不可嵌套、可嵌套两类：</p> <p><strong>不可嵌套 at-rule：</strong></p> <ul> <li><code>@charset</code>：指定样式表中使用的字符编码。</li> <li><code>@import</code>：导入其他外部样式表。</li> <li><code>@namespace</code>：指示 CSS 引擎必须考虑XML命名空间。</li> </ul> <p><strong>可嵌套 at-rule：</strong></p> <ul> <li><code>@media</code>：用于基于一个或多个媒体查询的结果来应用样式表中的一部分。</li> <li><code>@font-face</code>：指定一个用于显示文本的自定义字体。</li> <li><code>@keyframs</code>：通过在动画序列中定义关键帧的样式来控制 CSS 动画序列中的中间步骤。</li> <li><code>@supports</code>：指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。</li> <li><code>@document</code>：根据文档的 URL 限制其中包含的样式规则的作用范围（实验特性）。</li> <li><code>@page</code>：用于在打印文档时修改某些 CSS 属性。</li> </ul> <p>每个 at-rule 规则都有不同的语法，有一部分 at-rule 可以归为一类：<strong>条件规则组</strong>。</p> <blockquote> <p>这些规则组所指的条件总等效于 <code>true</code> 或 <code>false</code>，如果为 <code>true</code> 那么它里面的 CSS 语句生效。</p> </blockquote> <p>本文仅介绍 <code>@supports</code> 和 <code>@media</code>，其他规则请看 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/At-rule">CSS At-rules</a>。</p> <h3>4.1 @supports</h3> <p><code>@supports</code> 常用于 CSS 兼容性判断。</p> <p>它由一组支持条件和一组样式声明组成。支持条件可以是一个或多个条件使用逻辑与 <code>and</code>、逻辑或 <code>or</code>、逻辑非 <code>not</code> 组合而成。</p> <ul> <li>单一条件：由一个 CSS 属性和属性值组成，中间用分号 <code>;</code> 隔开。</li> </ul> <pre><code class="language-css">@supports (transform-origin: 5% 5%) { /* 样式声明 */ } </code></pre> <p>当 <code>transform-origin</code> 的实现语法认为 <code>5% 5%</code> 是有效的值，表达式会返回 <code>true</code>，此时规则内声明的样式就会生效。</p> <ul> <li>多个条件：使用 <code>not</code>、<code>and</code>、<code>or</code> 操作符组合。</li> </ul> <blockquote> <p>相当于 JavaScript 中的 <code>!</code>、<code>&&</code>、<code>||</code> 操作符啦，需设定运算顺序，则使用括号包裹。</p> </blockquote> <pre><code class="language-css">/* 当 transform-origin: 10em 10em 10em 无效时，表达式返回 true */ @supports not (transform-origin: 10em 10em 10em) { /* 样式声明 */ } </code></pre> <pre><code class="language-css">/* 当所有条件同时为真时，表达式才返回 true */ @supports (display: table-cell) and (display: list-item) { /* 样式声明 */ } </code></pre> <pre><code class="language-css">/* 当条件至少有一个为真时，表达式才返回 true */ @supports (transform-style: preserve) or (-moz-transform-style: preserve) { /* 样式声明 */ } </code></pre> <p>还有一个实验性的语法：<code>selector()</code>，有兴趣请看<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#function_syntax">这里</a>。</p> <p></p> <p>兼容性仍然是 IE 全系不支持，呵呵~</p> <h3>4.2 @media 介绍</h3> <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries">媒体查询</a>（Media Queries），在网页开发中是非常常用的。浏览器给 Web 提供了一些媒体特性（Media Features），它描述了 <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/User_agent">User Agent</a>、输出设备、浏览器环境的具体特征。网页开发者可根据这些特性，来提供更好的用户体验。</p> <p>比如：</p> <pre><code class="language-css">@import 'common.css' screen, projection; @media screen and (min-width: 480px) { /* ... */ } </code></pre> <pre><code class="language-html"><link rel="stylesheet" src="styles.css" media="screen" /> <link rel="stylesheet" href="mobile.css" media="(max-width: 480px)" /> </code></pre> <pre><code class="language-js">// 如果参数是 CSS 声明（也就是出现了冒号），外面需要有个括号，否则语法不正确。 if (window.matchMedia('(max-width: 480px)').matches) { // ... } </code></pre> <p>使用媒体查询最常见的是 <code>@media</code> 方式，但是在 HTML 和 JavaScript 同样是可以使用的，后者用得较少。</p> <p>媒体查询可以这样使用：</p> <blockquote> <ul> <li>在 CSS 中使用 <code>@media</code> 来装饰样式。</li> <li>在 HTML 中将 <code>media</code> 属性作用于 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style#attr-media"><code><style></code></a>、<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link#attr-media"><code><link></code></a>、<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/source#attr-media"><code></code></a> 等元素指定特定的媒体类型。</li> <li>在 JavaScript 中使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia"><code>Window.matchMedia()</code></a> 和<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/MediaQueryList/addListener"><code>MediaQueryList.addListener()</code></a> 方法来<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">测试和监控媒体状态</a>。</li> </ul> </blockquote> <p>需要注意的是，当媒体查询作用于 <code><link></code> 元素时，即使媒体查询结果为 <code>false</code>，该样式表仍会被下载，只是样式内容不被作用而已。</p> <h4>4.2.1 媒体查询语法</h4> <p>每条媒体查询语句（不区分大小写），由一个可选的「媒体类型」和任意数量的「媒体特征」表达式构成。同时可使用多种「逻辑操作符」合并多条媒体查询语句。</p> <p>当媒体查询语句中指定的媒体类型与设备匹配时，这条媒体查询结果返回 <code>true</code>。若是多条媒体查询语句组合，需每个条件均为 <code>true</code>，那么媒体查询结果才为 <code>true</code>。</p> <h4>4.2.2 媒体类型（Media Types）</h4> <p>在媒体查询中，媒体类型（Media Types）是可选的，默认是 <code>all</code> 类型。一般是使用了 <code>not</code> 或 <code>only</code> 逻辑操作符，才需要显式指定。有以下这些：</p> <table> <thead> <tr> <th>媒体类型</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>all</code></td> <td>默认值，适用于所有设备</td> </tr> <tr> <td><code>screen</code></td> <td>适用于屏幕。</td> </tr> <tr> <td><code>print</code></td> <td>适用于在打印预览模式下的屏幕上查快递分页材料和文档。</td> </tr> <tr> <td><code>speech</code></td> <td>适用于语音合成器。</td> </tr> </tbody> </table> <p>一部分媒体类型在 Media Queries Level 4 中已被弃用，可看<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types">这里</a>。</p> <p>简单示例：</p> <pre><code class="language-css">@media print { /* 针对打印设备 */ } @media screen, print { /* 针对多种设备 */ } </code></pre> <h4>4.2.3 媒体特性（Media Features）</h4> <p>媒体特性描述了 User Agent、输出设备，或是浏览环境的具体特征，更多请看 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features">MDN</a>。</p> <blockquote> <p>建议：使用前先弄清楚<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#browser_compatibility">兼容情况</a>。</p> </blockquote> <p>常见的媒体特性：</p> <table> <thead> <tr> <th>媒体特性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>aspect-ratio</code></td> <td>视口（Viewport）的宽高比。</td> </tr> <tr> <td><code>width</code></td> <td>输出设备更新内容的渲染结果的频率。</td> </tr> <tr> <td><code>height</code></td> <td>视口（Viewport）的高度</td> </tr> <tr> <td><code>hover</code></td> <td>主要输入模式是否允许用户在元素上悬停。</td> </tr> <tr> <td><code>orientation</code></td> <td>视口（Viewport）的旋转方向。</td> </tr> <tr> <td><code>prefers-color-scheme</code></td> <td>探测用户倾向于选择亮色还是暗色的配色方案。</td> </tr> <tr> <td><code>resolution</code></td> <td>输出设备的像素密度（分辨率）。</td> </tr> <tr> <td><code>scripting</code></td> <td>探测脚本（例如 JavaScript）是否可用？</td> </tr> </tbody> </table> <p>实际场景中用得较少的媒体特性：</p> <table> <thead> <tr> <th>媒体特性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>any-hover</code></td> <td>是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？</td> </tr> <tr> <td><code>any-pointer</code></td> <td>可用的输入机制中是否有任何指针设备，如果有，它的精度如何？</td> </tr> <tr> <td><code>pointer</code></td> <td>主要输入机制是一个指针设备吗？如果是，它的精度如何？</td> </tr> <tr> <td><code>color</code></td> <td>输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0。</td> </tr> <tr> <td><code>color-gamut</code></td> <td>用户代理和输出设备大致程度上支持的色域。</td> </tr> <tr> <td><code>color-index</code></td> <td>输出设备的颜色查询表（color lookup table）中的条目数量，如果设备不使用颜色查询表，则该值为 0。</td> </tr> <tr> <td><code>display-mode</code></td> <td>应用程序的显示模式，比如 Web App 中的 manifest 中的 display 成员所指定。</td> </tr> <tr> <td><code>forced-color</code></td> <td>检测 User Agent 是否限制调色板。</td> </tr> <tr> <td><code>grid</code></td> <td>输出设备使用网格屏幕还是点阵屏幕？</td> </tr> <tr> <td><code>inverted-colors</code></td> <td>User Agent 或者底层操作系统是否反转了颜色。</td> </tr> <tr> <td><code>light-height</code></td> <td>环境光亮度。</td> </tr> <tr> <td><code>monochrome</code></td> <td>输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0。</td> </tr> <tr> <td><code>overflow-block</code></td> <td>输出设备如何处理沿块轴溢出视窗(viewport)的内容</td> </tr> <tr> <td><code>overflow-inline</code></td> <td>沿内联轴溢出视口（Viewport）的内容是否可以滚动？</td> </tr> <tr> <td><code>prefers-contrast</code></td> <td>探测用户是否有向系统要求提高或降低相近颜色之间的对比度。</td> </tr> <tr> <td><code>prefers-reduced-motion</code></td> <td>用户是否希望页面上出现更少的动态效果。</td> </tr> <tr> <td><code>update</code></td> <td>输出设备更新内容的渲染结果的频率。</td> </tr> </tbody> </table> <p>在 Media Queries Level 4 已被弃用的媒体特性：</p> <table> <thead> <tr> <th>媒体特性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>device-aspect-ratio</code></td> <td>输出设备的宽高比。</td> </tr> <tr> <td><code>device-width</code></td> <td>输出设备渲染表面（如屏幕）的宽度。</td> </tr> <tr> <td><code>device-height</code></td> <td>输出设备渲染表面（如屏幕）的高度。</td> </tr> </tbody> </table> <p>对于 Media Queries Level 各级中新增或弃用的媒体特性，可看<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media#%E8%A7%84%E8%8C%83">这里</a>。</p> <p>对于表示「范围」的的媒体特性（比如 <code>width</code>、<code>height</code> 等），可以使用前缀 <code>min-*</code>、<code>max-*</code> 表示查询最小值、最大值。比如：</p> <pre><code class="language-css">@media (width: 480px) { /* 当 Viewport 宽度等于 480px 时被应用 */ } @media (min-width: 720px) { /* 当 Viewport 最小宽度大于等于 720px 时被应用 */ } @media (max-width: 960px) { /* 当 Viewport 最大宽度不超过 960px 时被应用 */ } </code></pre> <p>以上这种写法，在 Media Queries Level 4 中支持以下<a href="https://drafts.csswg.org/mediaqueries-4/#mq-min-max">范围语法</a>，但目前<a href="https://caniuse.com/?search=media%20queries%204">兼容性</a>非常的差，了解下就行了：</p> <pre><code class="language-css">@media (min-width: 720px) and (max-width: 960px) {} /* 等价于 */ @media ( 720px <= width <= 960px) {} </code></pre> <h4>4.2.4 device-width 与 width 的区别</h4> <p>其中 <code>device-width</code> 表示设备的宽度，<code>width</code> 表示视口 Viewport 宽度。举个例子，在 PC 中打开了一个「非全屏」的浏览器窗口，那么 <code>device-with</code> 是显示器的宽度，是不可变的。而 <code>width</code> 则是浏览器内页面的 Viewport 宽度（注意，不能单纯地认为浏览器窗口的宽度），通过拖拽浏览器窗口等行为是可使其发生变化的。</p> <p>但请注意，在移动端中，横屏与竖屏的切换，<code>device-width</code> 会相应跟着改变的。应对这种行为，可结合 <code>orientation</code> 这个媒体特性使用。</p> <blockquote> <p><code>device-height</code> 与 <code>height</code> 同理。</p> </blockquote> <h4>4.2.5 逻辑操作符（Logical Operators）</h4> <p>通过逻辑操作符（<code>and</code>、<code>not</code>、<code>only</code>），可以创建复杂、多条件的媒体查询。其中 <code>and</code>、<code>not</code>、<code>only</code> 分别表示与、非、唯一的意思。</p> <p>此外，还可以使用 <code>,</code>（逗号）将多个媒体查询合并，只要任一查询结果为 <code>true</code>，整个查询语句就返回 <code>true</code>（跟逻辑或 <code>or</code> 行为类似）。</p> <p>需要注意的是：</p> <blockquote> <ul> <li><code>not</code> 操作符不能用于否定单个查询条件，只能用于否定整个媒体查询。</li> <li>使用 <code>not</code>、<code>only</code> 操作符，必须指定「媒体类型」。</li> <li><code>and</code> 操作符可以将媒体类型、媒体特性或其他媒体功能组合在一起。</li> <li><code>only</code> 操作符，一般用于处理不支持「媒体特性」查询的语句旧版本浏览器。</li> </ul> </blockquote> <p>下面看一些示例：</p> <pre><code class="language-css">/* not 作用于整个媒体查询 */ @media not all and (monochrome) {} /* 等价于 */ @media not (all and (monochrome)) {} /* 而不是 */ @media (not all) and (monochrome) {} </code></pre> <p>再看：</p> <pre><code class="language-css">@media not screen and (color), print and (color) {} /* 等价于 */ @media (not (screen and (color))), print and (color) {} </code></pre> <p>再看：</p> <pre><code class="language-css">/* 通过 and 可组合多个条件 */ @media screen and (min-width: 30em) and (orientation: landscape) {} </code></pre> <p>再看：</p> <pre><code class="language-css">/* 用户设备的最小高度为 680px 或为竖屏模式的屏幕设备，都会被应用此样式。 */ @media (min-height: 680px), screen and (orientation: portrait) {} </code></pre> <p>再看这个示例，如果是不支持「媒体特性」查询的旧浏览器，那么以下样式将不会被应用，在这些浏览器看来，它将 <code>only</code> 识别为「媒体类型」了，但实际上并没有这样的媒体类型，因而将不会被应用。而在现代浏览器中，就没有任何影响。</p> <pre><code class="language-css">@media only screen and (color) {} /* 在旧版浏览器，相当于这样 */ @media only {} /* 在现代浏览器，相当于这样 */ @media screen and (color) {} </code></pre> <h3>4.3 @media 应用场景</h3> <ol> <li>浅色模式与深色模式</li> </ol> <p>可以使用媒体特性 <code>prefers-color-scheme</code> 来判断是否在系统层面设置了深色模式。它有三个可选值：</p> <ul> <li><code>light</code> - 表示用户在系统层面使用了“浅色模式”。</li> <li><code>dark</code> - 表示用户在系统层面使用了“深色模式”。</li> <li><code>no-preference</code> - 理解为浏览器不支持设置主题色，或者浏览器支持设置主题色，但默认被设为“未设置”、“无偏好”等（也可简单理解为无默认值）。</li> </ul> <pre><code class="language-css">/* 深⾊模式 */ @media (prefers-color-scheme: dark) {} /* 浅⾊模式 */ @media (prefers-color-scheme: light) {} </code></pre> <p>通过 DOM API 提供的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia">matchMedia</a> 接口，可以做一些判断：</p> <pre><code class="language-js">if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') { console.log('🎉 Dark mode is supported') } if (window.matchMedia('(prefers-color-scheme: dark)').matches) { console.log('Dark mode is on.') } if (window.matchMedia('(prefers-color-scheme: light)').matches) { console.log('Light mode is on.') } </code></pre> <p>想要监听浅色/深色模式的切换，可以这样做：</p> <pre><code class="language-js">const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)') const lightModeMediaQuery = window.matchMedia('(prefers-color-scheme: light)') darkModeMediaQuery.addListener(e => { const darkModeStatus = e.matches console.log(`Dark mode is ${darkModeStatus ? 'on' : 'off'}.`) }) lightModeMediaQuery.addListener(e => { const lightModeStatus = e.matches console.log(`Light mode is ${lightModeStatus ? 'on' : 'off'}.`) }) </code></pre> <p>结合 CSS 变量就可以很好地去适配网站的深色模式了。举个简单示例：</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="theme.css" /> </head> <body> <div class="container"> <article> <h1>蒹葭</h1> <p>蒹葭苍苍，白露为霜。所谓伊人，在水一方。溯洄从之，道阻且长。溯游从之，宛在水中央。</p> <p>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。溯洄从之，道阻且跻。溯游从之，宛在水中坻。</p> <p>蒹葭采采，白露未已。所谓伊人，在水之涘。溯洄从之，道阻且右。溯游从之，宛在水中沚。</p> <p></p> </article> </div> </body> </html> </code></pre> <pre><code class="language-css">/* theme.css */ :root { --theme-bg: #fff; --theme-color: #000; } @media screen and (prefers-color-scheme: dark) { :root { --theme-bg: #000; --theme-color: #fff; } } body { color: var(--theme-color); background: var(--theme-bg); } </code></pre> <p>以上示例会自适应系统主题色，如果你想交由用户决定，去掉示例中的媒体查询，然后通过 JavaScript 去动态设置 CSS 变量即可。另外，可以看下张鑫旭大佬这篇文章：<a href="https://www.zhangxinxu.com/wordpress/2020/11/css-mix-blend-mode-filter-dark-theme/">几行 CSS 让整站支持深色模式的探索与拓展</a>。</p> <p><a href="https://caniuse.com/prefers-color-scheme">兼容性</a>如下，看着还不错：</p> <p></p> <p>私认为深色模式的适配难点并不在实现上，通过本文的学习，可以说是没有难度对吧，难点应该在于设计师要考虑全站的交互样式，并制定出深浅模式下的各级色调等。</p> <blockquote> <p>推荐看下这篇文章：<a href="https://web.dev/prefers-color-scheme/">prefers-color-scheme: Hello darkness, my old friend</a></p> </blockquote> <p>未完待续...</p>  </article> <article> <h1>关于 Safari 100vh 的问题与解决方案</h1> <p>Sun, 26 Feb 2023 07:46:15 GMT</p> <p></p> <h2>一、背景</h2> <p>最近在做一个移动端的 H5 项目，遇到了一个「有趣」的问题。假设有一页面布局如下：</p> <p></p> <p>下方 50px 悬浮于底部，采用 fixed 布局，示例如下：</p> <pre><code class="language-html"><div class="container">  <div class="page"></div>  <div class="tabbar">TabBar</div> </div> <script> window.onload = function () { const arr = new Array(100).fill(0).map((_, index) => index + 1) const pageEl = document.querySelector('.page') const listEl = document.createElement('div') arr.forEach(item => { const itemElement = document.createElement('div') itemElement.innerText = item itemElement.className = 'list' listEl.appendChild(itemElement) }) pageEl.appendChild(listEl) } </script> </code></pre> <p>完整示例请看 <a href="https://codesandbox.io/s/safari-100vh-demo-cmh34y">CodeSandbox</a>。</p> <p>测试下来看似乎没问题，可当你使用 iPhone 的 Safari 浏览器打开此页面时，就会出现如下情况：</p> <p></p> <p>截图中已滑动至页面最底部，然而 100 被 TabBar 部分挡住了（其他浏览器均能正常展示出来）。</p> <h2>二、原因</h2> <p>我们知道，<code>vh</code>、<code>vw</code> 都是 CSS 中的一种相对长度单位，<code>1vh</code> 表示 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts#mobile_viewports">viewport</a> 高度的 1%（<code>vm</code> 同理）。简单来讲，viewport 基本上是指当前文档的可见部分，因此 <code>100vh</code> 表示可见文档的最大高度。</p> <p><strong>可事实真是如此吗？</strong></p> <p>在 Safari 浏览器中，<code>100vh</code> 如下图所示（<a href="https://github.com/postcss/postcss-100vh-fix">出自</a>）：</p> <p></p> <p>按上面所说，<code>100vh</code> 不应该是 viewport 可视区域的全部高度，为什么右图的高度会超出的呢？</p> <p>做个简图区分一下吧：</p> <p></p> <p>所以，这就是为什么在 Safari 会被挡住一部分的原因。</p> <blockquote> <p>吐槽一下，Safari 会是现代化的 IE 浏览器？</p> </blockquote> <h2>三、寻根问底</h2> <p>是 bug 还是故意为之？</p> <p>可以详细地看下这篇文章：<a href="https://nicolas-hoizey.com/articles/2015/02/18/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers/">Viewport height is taller than the visible part of the document in some mobile browsers</a>，然后文章作者给 WebKit 提了个 <a href="https://bugs.webkit.org/show_bug.cgi?id=141832">bug</a>，其中 Apple 工程师 Benjamin Poulain 的<a href="https://bugs.webkit.org/show_bug.cgi?id=141832#c5">回答</a>如下：</p> <blockquote> <p>This is completely intentional. It took quite a bit of work on our part to achieve this effect. :)</p> </blockquote> <p><strong>So, it's a feature, not a bug.</strong></p> <p>然而，并不是只有 Safari 是这样做的，比如 iOS 端 Chrome 浏览器表现与 iOS 端 Safari 一致... (⊙ˍ⊙)</p> <h2>四、解决方法</h2> <p>尽管这并不是大多数开发者想要的，但很无奈，我们只能想办法去「修复」它，使得我们的网站在各浏览器表现一致。</p> <h3>方案一：使用 -webkit-fill-available</h3> <p>简单来说，-webkit-fill-available 就是自动填满剩余空间（<a href="https://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/">详见</a>）。这里使用另一个示例，来说明 <code>-webkit-fill-available</code> 的一些问题，如下：</p> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> * { padding: 0; margin: 0; text-align: center; } body { min-height: 100vh; display: flex; flex-direction: column; } </style> <body> <div style="height: 100px; background: blue"></div> <div style="flex: 1; background: red"></div> <div style="height: 100px; background: green"></div> </body> </html> </code></pre> <p>以上示例，分别会有蓝、红、绿三部分，按预期结果，它们应该会占满整个可视区域（完整示例请看 <a href="https://codesandbox.io/s/-webkit-fill-available-demo-ibeg82">CodeSandbox</a>），而 Safari 中底部绿色部分会被挡住。然后我们添加在 <code>body</code> 添加上 -<code>webkit-fill-available</code> 看看：</p> <pre><code class="language-css">body { min-height: 100vh; min-height: -webkit-fill-available; display: flex; flex-direction: column; } </code></pre> <p>iOS 上的 Safari 中的表现是正常了，但是你会发现 Chrome 下红色区域没了，原因是 Chrome 84 起已不再支持 <code>-webkit-fill-available</code>，所以实际渲染如下：</p> <p></p> <p>那么解决方法就是，针对 Safari 浏览器才设置 <code>-webkit-fill-available</code> 即可，这里利用到 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@supports">@support</a> 和 <a href="https://caniuse.com/?search=-webkit-touch-callout">-webkit-touch-callout</a>，如下：</p> <pre><code class="language-css">body { min-height: 100vh; display: flex; flex-direction: column; } @supports (-webkit-touch-callout: none) { body { min-height: -webkit-fill-available; } } </code></pre> <p>这样就 OK 了，Safari 和 Chrome 表现均如预期一致。这也是 <a href="https://github.com/postcss/postcss-100vh-fix">postcss-100vh-fix</a> 插件的解决方案。</p> <p>然而，以上方案并不适用于这些情况，比如：<code>height: 90vh</code>、<code>height: calc(100vh - 50px)</code>，因此才有了方案二。</p> <h3>方案二：通过 CSS 变量计算 1vh 所表示的实际高度</h3> <p>思路：</p> <blockquote> <p>设置一个 CSS 变量（比如 <code>--vh</code>），然后通过 JavaScript 脚本动态设置 <code>--vh</code> 的值，然后使用时需兼容处理即可（比如，<code>height: 100vh; height: calc(var(--vh) * 100)</code>）。</p> </blockquote> <p>实现如下：</p> <pre><code class="language-html"><style> :root { --vh: 1vh; } </style> <script> !(function (n, e) { function setViewHeight() { var windowVH = e.innerHeight / 100 n.documentElement.style.setProperty('--vh', windowVH + 'px') } var i = 'orientationchange' in window ? 'orientationchange' : 'resize' n.addEventListener('DOMContentLoaded', setViewHeight) e.addEventListener(i, setViewHeight) })(document, window) </script> </code></pre> <p>使用 <code>vh</code> 时，需要这样兼容处理：</p> <pre><code class="language-css">.page { height: calc(100vh - 50px); height: calc(var(--vh) * 100 - 50px); } </code></pre> <p>有一个 <a href="https://github.com/mvasin/react-div-100vh">react-div-100vh</a> 库就是获取 <code>window.innerHeight</code>，然后将其值设置为容器高度实现的，然而这也是仅可处理 <code>100vh</code> 的情况。</p> <p>至于使用哪一种解决方案，视乎实际情况而定吧！</p> <h2>五、新解法</h2> <p>现在 CSS 支持新特性：</p> <ul> <li><strong>svh</strong>（Small Viewport Height）：视窗最小高度（地址栏、工具栏展示时的高度）</li> <li><strong>lvh</strong>（Large Viewport Height）：视窗最大高度（地址栏、工具栏隐藏时的高度）</li> <li><strong>dvh</strong>（Dynamic Viewport Height）：视窗动态高度（根据地址栏、工具栏展示与隐藏动态调整的高度，也就是我们“想要”的 100vh 效果）</li> </ul> <p>看看<a href="https://caniuse.com/viewport-unit-variants">兼容性</a>，还是有点“新”的，生产环境还是再观望观望。</p> <p></p> <h2>六、References</h2> <ul> <li><a href="https://nicolas-hoizey.com/articles/2015/02/18/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers/">Viewport height is taller than the visible part of the document in some mobile browsers</a></li> <li><a href="https://stackoverflow.com/questions/23223157/how-to-fix-vhviewport-unit-css-in-mobile-safari">How to fix vh(viewport unit) css in mobile Safari?</a></li> <li><a href="https://github.com/JeffKko/blog/issues/14">解決 safari mobile 上 css 數值 "vh" 的問題</a></li> <li><a href="https://www.bram.us/2020/05/06/100vh-in-safari-on-ios/">100vh in Safari on iOS</a></li> </ul> </article> <article> <h1>影响回流、重绘的 CSS 属性有哪些？</h1> <p>Sun, 26 Feb 2023 07:44:52 GMT</p> <p></p> <p>目前，比较常见的浏览器内核（渲染引擎）有：<a href="https://www.wikiwand.com/zh-hans/WebKit">WebKit</a>、<a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Blink">Blink</a> 、<a href="https://www.wikiwand.com/zh-hans/Gecko">Gecko</a>、<a href="https://www.wikiwand.com/zh-hans/Trident_(%E6%8E%92%E7%89%88%E5%BC%95%E6%93%8E)">Trident</a>、<a href="https://www.wikiwand.com/zh-hans/EdgeHTML">EdgeHTML</a>，更多<a href="https://github.com/tofrankie/blog/issues/245">请看</a>。</p> <blockquote> <ul> <li><strong>WebKit</strong> 课代表是 Safari 浏览器</li> <li><strong>Blink</strong> 课代表是 Chrome 浏览器（Blink 起源自 WebKit 的一个分支）</li> <li><strong>Gecko</strong> 课代表是 Firefox 浏览器</li> <li><strong>Trident</strong> 课代表是 IE 浏览器。2015 年微软推出的 Edge 浏览器其内核是 EdgeHTML。从良之后于 2020 年推出基于 Chromium 的 Edge 浏览器，使用 Blink 引擎。</li> </ul> </blockquote> <p>以下是两个主流浏览器内核 WebKit、Gecko 合成 DOM 的过程：</p> <p>▼ WebKit </p> <p>▼ Gecko </p> <p>两者整体流程基本相似，在术语方面也有所不同，比如 WebKit 中的 <strong>Layout</strong> 过程，Gecko 称为 <strong>Reflow</strong>。</p> <blockquote> <p>提高网页性能的其中一个方式就是，减少回流（reflow）、重绘（repaint），分别对应 <strong>Layout</strong> 和 <strong>Painting</strong> 过程。</p> </blockquote> <p>比如，React Hooks 中处理副作用时，某些场景下应选择 <code>useLayoutEffect</code>，而不是 <code>useEffect</code> 的原因正是为了减少回流重绘的过程。</p> <p>「回流」也有称作「重排」的。</p> <h2>什么是卡顿？</h2> <p>在很长一段时间里，显示器的刷新率多数为 60Hz，即使到现在仍然是占多数。</p> <p>刷新率（RefreshRate），表示单位时间内能够绘制新图像的次数。举个例子，60Hz 的刷新率，表示显示器要在一秒内刷新 60 次图像，换句话说，一次图像的更新要在 <code>16.67ms</code> 内完成。这样才不会造成卡顿。如果超出这个时间，在视角上就会产生卡顿感。</p> <blockquote> <p>60Hz 的刷新率是人类不会感觉到屏幕图像闪烁的数值，由科学家验证得出。</p> </blockquote> <p>附一个来自网上的图：</p> <p></p> <p>还是用 React 举例吧。我们知道 React 16 起采用了全新的 Fiber 架构，就是为了解决大型应用卡顿的问题。</p> <p>我们知道，浏览器是多进程的，JavaScript 是单线程的。浏览器会为每个标签（Tab）分配一个进程，每个进程由 GUI 渲染线程、JS 线程、定时器线程、网络线程、事件线程多个线程组成。最重要的一点是：<strong>GUI 渲染线程与 JS 线程是互斥的</strong>。换句话说，某个时刻它只能执行其中一个线程，等待该线程执行完毕之后，才将执行权交由另一个线程。</p> <p>那么为什么 React 15 在处理大型应用的时候会卡顿呢？</p> <p>首先 React 15 架构，由<strong>协调器</strong>（Reconciler）和<strong>渲染器</strong>（Render）组成。而 React 16 在原来的基础上新增了<strong>调度器</strong>（Scheduler），用于调度任务的优先级。</p> <p>在 React 15 的 Reconciler 中，组件的挂载（Mounting）、更新（Updating）会对应调用 <code>mountComponent</code>、<code>updateComponent</code> 方法，它们内部会执行递归操作，以更新子组件。**但是递归执行的缺点是「无法中断」。**假设 JS 线程执行递归耗时超过了 <code>16.67ms</code>，由于互斥期间 GUI 线程并不能执行任何的操作，等递归完并生成新的虚拟 DOM 之后，触发 DOM 等更新，此时由 GUI 线程进行处理，可能包括回流、重绘的过程，然后才完成一次页面的更新。由于无法满足刷新率的要求，就会产生卡顿感。</p> <blockquote> <p>因此，解决卡顿的思路就是：在每一帧的时间内，预留一些时间给 JS 线程，当预留的时间不够用时，React 中断当前任务，将线程控制权交换给浏览器，使其有时间渲染页面，等下一帧到来的时候，继续被中断的工作。</p> </blockquote> <p>在 React 16 新增的 Scheduler 可以使得浏览器有剩余时间的时候通知 React，而且提供了多种调度优先级，使得更高优先级的任务优先进入 Reconciler 阶段。而 Reconciler 则是利用了 Fiber 这种架构实现了**「可中断的异步更新」**（请注意，这里的异步并不是由 <code>setTimeout</code> 实现的，由于精度问题，<code>setTimeout</code> 实际上最低延迟时间是 <code>4ms</code>，在这寸土寸金的一帧时间才 <code>16.67ms</code>，显然是不合理的）。</p> <p>因此，React 就是采用了这种思路来解决大型应用卡顿问题的。</p> <p>题外话扯完了，回到本文的主题...</p> <h2>影响页面渲染性能的有什么？</h2> <p>再附上一张源自网上的图：</p> <p></p> <p>这几个关键点：</p> <ul> <li><strong>JavaScript</strong> - 使用 JavaScript 脚本来触发 DOM 的更新。</li> <li><strong>Style</strong> - 匹配各种选择器，并计算出哪些元素应用哪些 CSS 样式的过程。</li> <li><strong>Layout</strong> - 前面知道一个元素应用哪些规则之后，浏览器开始计算它要占用的空间大小以及在屏幕的位置。一个元素在空间上的变化，会同时影响其他元素的重排。</li> <li><strong>Paint</strong> - 绘制是填充的像素的过程，比如文本、颜色、图像、边框和阴影等。</li> <li><strong>Composite</strong> - 合成过程处理元素绘制到哪一层，可能是在某个元素的上层或下层。与<a href="https://github.com/tofrankie/blog/issues/166">层叠上下文</a>有关。</li> </ul> <blockquote> <ol> <li>如果修改了某个元素的 Layout 属性，那么浏览器会检查其他所有元素，然后“自动重排”，任何受影响的部分都需要重新绘制，然后才进行合成。</li> <li>如果仅修改了「paint only」属性，比如背景图片，文字颜色、背景等，它不会影响页面布局，所以会跳过 Layout 阶段，然后执行重绘。</li> <li>如果修改了一个既不影响 Layout，也无需 Paint 的属性，那么浏览器只执行 Composite 合成过程。这个开销是最小的，可以看下这篇<a href="https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count">文章</a>。</li> </ol> </blockquote> <h2>CSS Triggers</h2> <p>哪些 CSS 属性影响 Layout，哪些影响 Paint 呢？</p> <p>可以看这个网站 <a href="https://csstriggers.com">CSS Triggers</a>。</p> <p></p> <p>其中 <strong>Change from default</strong> 表示从未设置（即 CSS 默认值）到设置为其他值，<strong>Subsequent updates</strong> 表示属性修改。</p> <h2>参考链接</h2> <ul> <li><a href="https://developers.google.com/web/fundamentals/performance/rendering">Rendering Performance </a></li> <li><a href="https://csstriggers.com">CSS Triggers</a></li> <li><a href="https://github.com/tofrankie/blog/issues/245">浏览器内核及渲染过程杂谈</a></li> </ul> </article> <article> <h1>原生 JavaScript 读写 CSS样式的方法</h1> <p>Sun, 26 Feb 2023 07:40:22 GMT</p> <p>好久没用原生 JS 写 CSS 样式，差点忘了，记录一下！</p> <ol> <li>通过 DOM 节点对象的style对象</li> </ol> <pre><code class="language-js">var element = document.getElementById('id') element.style.color = 'red' </code></pre> <ol start="2"> <li>通过 Element 对象的 setAttribute()、getAttribute()、removeAttribute() 方法</li> </ol> <pre><code class="language-js">var element = document.getElementById('id') element.setAttribute('color', 'red') </code></pre> <ol start="3"> <li>通过 style 对象的 cssText 属性、setProperty()、removeProperty() 方法</li> </ol> <pre><code class="language-js">var element = document.getElementById('id') element.style.cssText = 'color: red' element.style.setProperty('color', 'red', 'important') element.style.removeProperty('color') element.style.cssText = '' // 快速清空该规则的所有声明 </code></pre> <ol start="4"> <li>直接添加样式表</li> </ol> <p>1）创建 <code>style></code> 标签，内联样式</p> <pre><code class="language-js">var style = document.createElement('style') style.innerHTML = 'body{color: red}' document.head.appendChild(style) </code></pre> <p>2）添加外部样式表</p> <pre><code class="language-js">var link = document.createElement('link') link.setAttribute('rel', 'stylesheet') link.setAttribute('type', 'text/css') link.setAttribute('href', 'reset-min.css') document.head.appendChild(link) </code></pre> <ol start="5"> <li>还有很多…</li> </ol> </article> <article> <h1>细读 CSS | 层叠上下文</h1> <p>Sun, 26 Feb 2023 07:21:48 GMT</p> <p></p> <h2>一、概念</h2> <p>在 HTML 页面中，我们通常会使用 <code>margin</code>、<code>float</code>、<code>offset</code> 等 CSS 属性控制元素在 X 轴和 Y 轴页面中的位置，另外会使用 <code>z-index</code> 和 <code>transform</code> 来控制元素在 Z 轴的排列顺序。</p> <blockquote> <p>因此，我们可以得知 HTML 页面其实是一个<strong>三维</strong>的结构。</p> </blockquote> <p>了解以下这几个词：</p> <ul> <li><strong>层叠上下文</strong>（Stacking Context）</li> </ul> <p>层叠上下文是一个比较抽象的概念。当一个元素拥有了一个“三维”的表现，即在 Z 轴上有一定的顺序，那么我们称该元素有一个层叠上下文。</p> <ul> <li><strong>层叠等级</strong>（Stacking Level）</li> </ul> <p>有了层叠上下文之后，需要一个叫做层叠等级（层叠水平）的家伙来决定同一个层叠上下文中元素在 Z 轴上的显示顺序。</p> <ul> <li><strong>层叠顺序</strong>（Stacking Order）</li> </ul> <p>层叠顺序是一种用于描述层叠等级的特定规则。</p> <p><strong>如何区分？</strong></p> <p>层叠上下文和层叠等级是概念，而层叠顺序是规则。通俗地讲，前两者就像是公司和领导，负责画饼和制定计划，而后者则是打工人，负责具体实施（就是搬砖）。</p> <h2>二、重点</h2> <h3>本文术语约定</h3> <p>本文中所提到的“层叠元素”和“定位元素”均按以下描述进行约定，有特殊说明除外。</p> <ul> <li><strong>层叠元素</strong>：指含有层叠上下文的元素（主要用于区别不含层叠上下文的普通元素）。</li> <li><strong>定位元素</strong>：指含有 <code>position</code> 属性，且其值不为 <code>static</code> 的元素。</li> </ul> <h3>注意点</h3> <ul> <li>普通元素的层叠等级优先由层叠上下文决定。</li> <li>层叠顺序的比较，只有在同一层叠上下文中进行对比才有意义。</li> <li>所有元素（普通元素、层叠元素）都存在层叠等级。请不要将层叠等级和 CSS 中的 <code>z-index</code> 属性混为一谈，尽管 <code>z-index</code> 在某些情况下会影响到层叠等级。</li> </ul> <h3>层叠上下文的特性</h3> <p>层叠元素有以下特性：</p> <ul> <li>层叠元素的层叠等级要比普通元素高。</li> <li>层叠上下文可以阻断元素的混合模式。</li> <li>层叠上下文可嵌套，内部层叠上下文及其所有子元素均受限于外部的层叠上下文。</li> <li>每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素即可。</li> <li>每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素都被认为是在父层叠上下文的层叠顺序中。</li> </ul> <h3>创建层叠上下文</h3> <p>以下几种方式，都会创建层叠上下文：</p> <ul> <li> <p>根层叠上下文页面的根元素 <code><html></code> 自带一个层叠上下文。我们知道，绝对定位元素通过 <code>top/right/bottom/left</code> 来定位时，若没有其他定位元素限制，会相对浏览器窗口定位。其中缘由，就是因为有根层叠上下文的原因。</p> </li> <li> <p>定位元素层叠上下文（传统）当元素的 <code>position</code> 不为 <code>static</code>，<code>z-index</code> 不为 <code>auto</code> 时，该元素就会创建层叠上下文（但有些特例，下文会提到）。</p> </li> <li> <p>CSS3层叠上下文（新时代）在 CSS3 中新增了很多新属性，有一些会创建层叠上下文。</p> <ol> <li><code>z-index</code> 值不为 <code>auto</code> 的 <code>flex</code> 项（父元素 <code>display:flex|inline-flex</code>）；</li> <li>元素的 <code>opacity</code> 值不为 <code>1</code>；</li> <li>元素的 <code>transform</code> 值不为 <code>none</code>；</li> <li>元素 <code>mix-blend-mode</code> 值不为 <code>normal</code>；</li> <li>元素的 <code>filter</code> 值不为 <code>none</code>；</li> <li>元素的 <code>isolation</code> 值为 <code>isolate</code>；</li> <li><code>will-change</code> 指定的属性值为上面任意一个；</li> <li>元素的 <code>-webkit-overflow-scrolling</code> 设为 <code>touch</code>。</li> </ol> </li> </ul> <blockquote> <p>特例说明</p> <ol> <li>在远古神兽 IE5/6/7 浏览器下，<code>z-index: auto</code> 会创建层叠上下文。至于这是 Bug 还是微软故意为之，就不去考究了，反正也接触不到这些远古神兽了。<strong>在现代浏览器（包括 IE8 及以上）中，<code>z-index: auto</code> 都不会创建层叠上下文</strong>。</li> <li>在过去 <code>position: relative | absolute | fixed</code> 都需要配合 <code>z-index</code>（数值）才会创建新的层叠上下文。但是不知道什么时候起，Chrome、Firefox、Safari、Edge 等浏览器，<code>position: fixed | sticky</code> 元素天然层叠上下文，无需 <code>z-index</code> 为数值。（2022.01 亲测）</li> </ol> </blockquote> <h3>层叠上下文与层叠顺序</h3> <p>一旦普通元素具有了层叠上下文，其层叠顺序就会变高。</p> <p>分为两种情况：</p> <blockquote> <ol> <li>如果层叠元素不依赖 <code>z-index</code>，那么其层叠顺序看成与 <code>z-index: auto</code> 一致的 <code>z-index: 0</code> 级别。</li> <li>如果层叠元素依赖 <code>z-index</code>，那么其层叠顺序由 <code>z-index</code> 决定。</li> </ol> </blockquote> <p></p> <p>*张鑫旭大佬原图出处，请看<a href="https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/">这里</a>。</p> <p><strong>Q：为什么定位元素会层叠在普通元素的上面？</strong></p> <p>当一个元素成为了定位元素，<code>z-index</code> 会自动生效，取其默认值 <code>auto</code>。根据层叠顺序图，我们可以看到 <code>z-index: auto</code> 的层叠顺序比 <code>block</code>、<code>float</code>、<code>inline/inline-block</code> 都要高。</p> <h3>层叠准则</h3> <p>当元素发生层叠时，其覆盖关系遵循以下两个准则：</p> <blockquote> <ol> <li><strong>谁大谁上</strong>：在同一层叠上下文中，层叠等级较大的会覆盖较小的。</li> <li><strong>后来居上</strong>：在同一层叠上下文中，若层叠等级（顺序）相同时，在 DOM 文档流中处于后面的元素会覆盖前面的元素。</li> </ol> </blockquote> <p>请注意，上面两条准则的前提都是“处于同一层叠上下文中”，那是因为在不同层叠上下文的比较是没有意义的。</p> <p>接下来，介绍一些常见的层叠上下文、层叠顺序的案例，帮助进一步理解。</p> <h2>三、position 与 z-index</h2> <p>它们取值如下：</p> <pre><code>position: static(default) | relative | absolute | fixed | sticky </code></pre> <pre><code>z-index: auto(default) | <integer> | inherit </code></pre> <p><strong>当 <code>position</code> 不为 <code>static</code> 时，<code>z-index</code> 才会生效</strong>。</p> <p>其中 <code>z-index</code> 属性值如下：</p> <table> <thead> <tr> <th>Value</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>auto</td> <td>将层叠水平设为 <code>0</code>，且<strong>不会</strong>创建新的层叠上下文（默认值）。</td> </tr> <tr> <td>inherit</td> <td>将层叠水平设为与父元素相同，且<strong>不会</strong>创建新的层叠上下文。</td> </tr> <tr> <td><integer></td> <td>将层叠水平设为对应（正负）整数，并<strong>会</strong>创建新的层叠上下文。</td> </tr> </tbody> </table> <p><s>*其实还有一些全局值（如 <code>initial</code>、<code>unset</code>），但不重要，故忽略。</s></p> <p>请注意，在 CSS3 里当父元素设为 <code>display: flex | inline-flex</code>，子元素使用 <code>z-index</code> 时，也会使得<strong>子元素</strong>创建新的层叠上下文（请注意：创建新的层叠上下文是子元素，而不是父元素哦）。</p> <p>换句话说，<code>z-index</code> 不再是定位元素独享，它还可以与 <code>flex</code> 搞在一起做点什么。</p> <p><strong>基础示例一</strong> 👉 <a href="https://codepen.io/tofrankie/pen/dyVqWbm">源码及演示</a></p> <p></p> <p><strong>基础示例二</strong> 👉 <a href="https://codepen.io/tofrankie/pen/OJxomvJ">源码及演示</a></p> <p></p> <p>以上两个示例都很基础，不多说了...</p> <h3>小结</h3> <blockquote> <ul> <li>若 <code>position</code> 为 <code>static</code> 时，<code>top</code>、<code>right</code>、<code>bottom</code>、<code>left</code> 和 <code>z-index</code> 属性均无效。</li> <li>当 <code>z-index</code> 生效时，层叠顺序表现为：<code>-integer < auto/0 < +integer</code>。</li> <li>仅<strong>层叠顺序</strong>而言，<code>z-index: auto</code> 和 <code>z-index: 0</code> 表现是一致，都是 <code>0</code> 级别。但两者在层叠上下文领域有着根本性的差异，前者不会创建新的层叠上下文，而后者会创建新的层叠上下文。</li> <li>即使不显式设置 <code>z-index</code>，定位元素的层叠顺序也会比普通元素高。</li> </ul> </blockquote> <h3>验证 z-index: auto 和 z-index: 0 的层叠顺序是相同的</h3> <p>👉 <a href="https://codepen.io/tofrankie/pen/poWOwRa">源码及演示</a></p> <p></p> <p>从结果上看，可以知道：</p> <blockquote> <ul> <li>层叠顺序 <code>z-index: -1 < z-index: auto | z-index: 0 < z-index: 1</code>，且 <code>z-index: auto</code> 和 <code>z-index: 0</code> 层叠顺序均为 <code>0</code> 级别。</li> <li>当 <code>z-index: auto</code> 和 <code>z-index: 0</code> 的定位元素同时存在，发生层叠时，在 DOM 流中处于后面的元素会覆盖前面的元素（同一层叠上下文中）。</li> </ul> </blockquote> <p>请记住：处于同一层叠上下文中，遵循谁大谁上、后来居上的准则。</p> <h3>验证 z-index: auto 不会创建层叠上下文</h3> <p>👉 <a href="https://codepen.io/tofrankie/pen/LYzMpRr">源码及演示</a></p> <p></p> <p>图中示例的区别在于 <code>inner</code> 盒子外层的 <code>outer</code> 盒子，一个设为 <code>z-index: auto</code>，另一个设为 <code>z-index: 0</code>。</p> <p><strong>假设 <code>z-index: auto</code> 会使得元素本身创建新的层叠上下文</strong>，那么 <code>inner1</code> 和 <code>inner2</code> 对应的参照物分别是 <code>outer1</code> 和 <code>outer2</code>，此时 <code>inner1</code> 中的 <code>z-index</code> 值，其实是没有意义的，无论它的值是正数、负数、还是 <code>0</code> 或 <code>auto</code>，它总会显示在 <code>outer1</code> 上面（<code>inner2</code> 同理）。同时，由于 <code>outer1</code> 和 <code>outer2</code> 的层叠顺序是一致的，<code>outer2</code> 在 DOM 流后面，属于“后来居上”，因此 <code>outer2</code> 会覆盖 <code>outer1</code>。</p> <p>倘若假设成立，蓝色块应覆盖在绿色块上面（效果应如示例二相同），可事实并非如此。因此，我们可以得出结论：<code>z-index: auto</code> 并不会创建新的层叠上下文。</p> <p>给你们看看远古神兽 IE5/6/7 浏览器下，<code>z-index: auto</code> 创建层叠上下文的效果。</p> <p></p> <blockquote> <p>因此，较为严谨的说法是：在<strong>现代浏览器</strong>（包括 IE8 及以上浏览器）中，<code>z-index: auto</code> 不会创建层叠上下文。</p> </blockquote> <h3>关于 z-index 负值时而有效，时而无效的问题</h3> <p>👉 <a href="https://codepen.io/tofrankie/pen/dyVwQmg">源码及演示</a></p> <p></p> <p>究其原因，其实很简单，前面也提到过。<strong>比较层叠顺序时，应在同一层叠上文中进行对比，否则是无意义的</strong>。</p> <p>在示例一，<code>red</code> 盒子和 <code>green</code> 盒子处于同一层叠上下文（即根层叠上下文）中，且 <code>z-index: -1</code> 层叠顺序较低，所以可以看到 <code>red</code> 盒子覆盖了 <code>green</code> 盒子。</p> <p>在示例二，由于 <code>red</code> 盒子的 <code>z-index: 0</code> 是使得其本身创建了新的层叠上下文，所以 <code>green</code> 永远不会穿越 <code>red</code> 盒子。此时，即使 <code>green</code> 盒子的 <code>z-index</code> 为 <code>-9999</code> 也总会显示在 <code>red</code> 盒子上层。</p> <p>在示例三中，<code>red</code> 盒子内多了一个 <code>blue</code> 盒子，并设为 <code>z-index: 1</code>。由于 <code>blue</code> 盒子和 <code>green</code> 盒子同属于 <code>red</code> 盒子创建的层叠上下文，因而，此时 <code>z-index</code> 就有了比较的意义了。所以，我们可以看到 <code>green</code> 盒子处于 <code>blue</code> 盒子下方，且不会穿过 <code>red</code> 盒子。</p> <p>再看另外一个示例 👉 <a href="https://codepen.io/tofrankie/pen/yLzGGyz">源码及演示</a></p> <p></p> <p>它的原因是一样的，因为除了 <code>z-index</code> 会创建层叠上下文之外，CSS3 中的 <code>transform</code> 也会创建新的层叠上下文哦！</p> <p>以上两个都是常见的 <code>z-index</code> “失效”的场景，根本原因还是，有的小伙伴不知道 <code>transform</code> 也会创建层叠上下文。</p> <blockquote> <p>当遇到 <code>z-index</code> 失效时，Check List 如下：</p> <ul> <li>检查当前元素是否为定位元素，或其父级元素是否有 <code>display: flex | inline-flex</code>；</li> <li>检查它们是否处于同一层叠上下文；</li> <li>若前面条件都确认无疑，那说明有一些你不知道的 CSS 属性会创建层叠上下文（此时应去翻阅文档）；</li> <li>否则，就是这垃圾浏览器没有遵循标准，偷偷地创建了新的层叠上下文（这种情况应该几乎不会出现，毕竟微软都放弃 IE 转投 Chromium 了）。</li> </ul> </blockquote> <h3>关于 position: fixed | sticky 自带层叠上下文</h3> <p>👉 <a href="https://codepen.io/tofrankie/pen/qBPLLrw">源码及演示</a></p> <p></p> <p>于 2022.01 亲测，Chrome 97、Safari 15.2、Firefox 97、Microsoft Edge 97 浏览器下面，表现均如上图。由于 <code>position: fixed | sticky</code> 自带层叠上下文，因此图中示例三、示例四蓝色块会覆盖绿色块。</p> <h2>四、transform</h2> <p>在 CSS3 中有几个与动画相关的属性：<code>transform</code>、<code>transition</code>、<code>animation</code> 分别对应变换、过渡、动画。虽意义相近，但具体角色不一。它们的取值如下：</p> <pre><code class="language-css">.selector { transform: transform-function | none; transition: property duration timing-function delay; animation: name duration timing-function delay iteration-count direction fill-mode play-state; } </code></pre> <p>本文重点并非谈谈它们的区别，我们接着看 <code>transform</code>。与之相关的 CSS 属性有这些：</p> <pre><code class="language-css">.selector { /* 设置元素变形方式，如旋转、缩放、倾斜、平移等 */ transform: transform-function | none; /* 更改一个元素变形的原点 */ transform-origin: <length> | <percentage> | center | left | right | top | bottom; /* 定义与 transform、transform-origin 这两个属性有关联的布局框 */ transform-box: content-box | border-box | fill-box | stroke-box | view-box; /* 设置元素的子元素是位于平面中，还是 3D 空间中 */ transform-style: flat | preserve-3d; } </code></pre> <p>它还有兼容性属性：</p> <pre><code class="language-css">.selector { -webkit-transform: transform-function | none; -moz-transform: transform-function | none; -ms-transform: transform-function | none; -o-transform: transform-function | none; transform: transform-function | none; } </code></pre> <p>其中 <code>transform-function</code> 的变换函数有以下这些：</p> <ul> <li>透视：<code>perspective()</code>（<a href="https://codepen.io/tofrankie/pen/QWqYPLN">查看示例</a>）</li> <li>矩阵：<code>matrix()</code>、<code>matrix3d()</code>（<a href="https://codepen.io/tofrankie/pen/PoJVLVr">查看示例</a>）</li> <li>倾斜：<code>skew()</code>、<code>skewX()</code>、<code>skewY()</code>（<a href="https://codepen.io/tofrankie/pen/RwLvvzx">查看示例</a>）</li> <li>缩放：<code>scale()</code>、<code>scaleX()</code>、<code>scaleY()</code>、<code>scaleZ()</code>、<code>scale3d()</code>（<a href="https://codepen.io/tofrankie/pen/abLXMYy">查看示例</a>）</li> <li>旋转：<code>rotate()</code>、<code>rotateX()</code>、<code>rotateY()</code>、<code>rotateZ()</code>、<code>rotate3d()</code>（<a href="https://codepen.io/tofrankie/pen/vYebbqW">查看示例</a>）</li> <li>平移：<code>translate()</code>、<code>translateX()</code>、<code>translateY()</code>、<code>translateZ()</code>、<code>translate3d()</code>（<a href="https://codepen.io/tofrankie/pen/wvrNZzM">查看示例</a>）</li> </ul> <p>我们知道，只要 <code>transform</code> 不为 <code>none</code> 时，它也会创建层叠上下文。还有 <code>translateZ()</code>、<code>perspective()</code> 两个变换函数，可以实现 <code>z-index</code> 类似的效果。<code>translateZ(tz)</code> 就是 <code>translate3d(0, 0, tz)</code> 简写形式。</p> <h3>transform-style 与 translateZ</h3> <p>从字面上看，我们可以很容易知道，<code>translateZ</code> 的变换是属于 3D 空间的。</p> <p>先看个简单<a href="https://codepen.io/tofrankie/pen/WNZmeVP">示例</a>：</p> <p></p> <p>为什么红色块的 <code>translateZ</code> 值更大，但却不是在更上面呢？</p> <p>原因很简单，就是因为 <code>transform-style</code> 的默认值是 <code>flat</code>，即处于 2D 平面中。如果选择平面，元素的子元素将不会有 3D 的遮挡关系。</p> <p>它的取值有：</p> <pre><code>transform-style: flat | preserve-3d </code></pre> <p>只要将其添加一个 <code>transform-style: preserve-3d</code> 的父元素，就能得到预期结果：红色覆盖在绿色上面。<code>preserve-3d</code> 使得该元素的子元素应位于 3D 空间中。</p> <p></p> <p>再看示例 👉 <a href="https://codepen.io/tofrankie/pen/MWExgoL">源码及演示</a></p> <p></p> <p>以上示例多组对比，其实还是为了说明：在不同层叠上下文中比较层叠高低是没有意义的。</p> <h3>Transform 和 z-index 同时使用，会产生什么问题呢？</h3> <p>看示例 👉 <a href="https://codepen.io/tofrankie/pen/PoOwyBB">源码及演示</a></p> <p></p> <p>我们来看下 iPhone 微信浏览器下，表现如何：</p> <p></p> <p>看到差异了吗？</p> <p>原因是，苹果旗下的 Safari 浏览器在使用 3D 变换时，会忽略 <code>z-index</code> 的作用。</p> <blockquote> <p>详情戳这里：<a href="https://www.zhangxinxu.com/wordpress/2016/08/safari-3d-transform-z-index/">Safari 3D transform 变换 z-index 层级渲染异常的研究</a></p> </blockquote> <p><strong>个人建议</strong></p> <blockquote> <ul> <li>尽量不要同时使用 <code>translateZ()</code> 和 <code>z-index</code>，iOS 与 Android 下表现有差异；</li> <li>在涉及 3D 变换时，应采用 <code>transform-style: preserve-3d</code>、<code>transform: translateZ()</code>、<code>transform: perspective</code> 的方案，而不是 <code>z-index</code>；</li> </ul> </blockquote>  <p>未完待续...</p> <h2>参考链接</h2> <ul> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">层叠上下文 MDN</a></li> <li><a href="https://blog.csdn.net/WuLex/article/details/105769655">z-index 和 transform，你真的了解吗？</a></li> <li><a href="https://jelly.jd.com/article/6006b1025b6c6a01506c8775">探究 transform 动画元素的 z-index</a></li> <li><a href="https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/">深入理解 CSS 中的层叠上下文和层叠顺序</a></li> <li><a href="https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/">好吧，CSS3 3D transform 变换，不过如此！</a></li> <li><a href="https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/">CSS3 transform 对普通元素的 N 多渲染影响</a></li> <li><a href="https://bitsofco.de/how-z-index-works/">How z-index Works</a></li> <li><a href="https://www.zoo.team/article/css-stacking-context">CSS 层叠上下文（Stacking Context）</a></li> <li><a href="https://www.cnblogs.com/xiaohuochai/p/5289653.html">深入理解 CSS 溢出 overflow</a></li> <li><a href="https://www.zhangxinxu.com/wordpress/2016/08/safari-3d-transform-z-index/">Safari 3D transform 变换 z-index 层级渲染异常的研究</a></li> </ul> </article> <article> <h1>动态设置 CSS 样式时，如何写入各浏览器兼容性样式？</h1> <p>Sun, 26 Feb 2023 07:20:36 GMT</p> <p></p> <p>我们知道，通过原生 JS 脚本动态设置内联样式的方式有：</p> <pre><code class="language-html"> <style> @keyframes slidein { from { transform: scaleX(0); } to { transform: scaleX(1); } } </style> <div id="app">关关雎鸠，在河之洲...</div> </code></pre> <pre><code class="language-js">const element = document.getElementById('app') // 1️⃣ 方式一（泛指一类，下同） element.style.fontSize = '30px' // 2️⃣ 方式二 element.style.setProperty('font-size', '30px') // 3️⃣ 方式三（请注意，这可能会抹掉其他 CSS 属性的哦） element.style.cssText = 'color: 30px' element.setAttribute('style', 'color: 30px') </code></pre> <p><strong>但是，这里面有一些限制...</strong></p> <blockquote> <ul> <li>方式一：无法设置权重 <code>!important</code>，若带上权重，其属性值也不会生效。</li> <li>方式二：无法设置带 <code>-webkit-</code>、<code>-moz-</code>、<code>-o-</code>、<code>-ms-</code> 等各浏览器厂商实验性或非标准的 CSS 属性，如 <code>-webkit-animation</code>。</li> <li>方式三：可以处理以上两种方式无法实现的功能。另外，要获取内联样式中某个 CSS 属性是否含有 <code>!important</code> 权重，也需借助 <code>element.style.cssText</code> 方可获取。</li> </ul> </blockquote> <h2>验证</h2> <h3>方式一</h3> <pre><code class="language-js">// 对比一 element.style.fontSize = '30px' // 有效 element.style.fontSize = '50px !important' // 无效，除了不会设置权重之外，50px 也不会生效哦。 // 对比二 // 假设 element 元素本身就含有 font-size: 30px !important 的内联样式 element.style.fontSize // 输出 "30px"，注意是不含权重的 element.style.fontSize = '50px' // 这是有效的，同时权重也会丢失 element.style.fontSize = '50px !important' // 无效 // 对比三 element.style.animation = '3s slidein' // 有效 element.style.webkitAnimation = '3s slidein' // 有效，但是最终会变成 animation: "3s slidein"，而不是 -webkit-animation: "3s slidein" element.style.MozAnimation = '3s slidein' // 有效，但同上 </code></pre> <p>小结：</p> <ul> <li>通过 <code>element.style.fontSize</code> 这一类形式读写内联样式时，都无法<strong>读取</strong>或<strong>写入</strong>权重，而且需要注意的是 <code>element.style.fontSize = '30 !important'</code> 并不会被写入哦。</li> <li>通过 <code>element.style.webkitAnimation = '3s slidein'</code> 或 <code>element.style.MozAnimation = '3s slidein'</code> 形式写入包含浏览器厂商特性的 CSS 属性时，将会被处理成标准的 CSS 属性。例如：<code>-webkit-animation</code> 变为 <code>animation</code>，跟预期结果是有出入的。</li> <li>另外，请注意写法。标准 CSS 属性是小驼峰形式，而带浏览器厂商特性的 CSS 属性，则可能不是小驼峰命名规则。例如：<code>webkitXxx</code>、<code>MozXxx</code> 首字母大小写就不一样。</li> </ul> <blockquote> <p>请注意，以上示例仅列举了个别属性，但其实是泛指同一类。</p> </blockquote> <h3>方式二</h3> <pre><code class="language-js">// 对比一 element.style.setProperty('font-size', '30px') // 有效 element.style.setProperty('font-size', '30px', 'important') // 有效（可设置权重，但请注意是不含 ! 的） // 对比二 element.style.setProperty('-webkit-animation', '3s slidein') // 有效，可会变为 animation。同方式一 element.style.setProperty('-moz-animation', '3s slidein') // 有效，可会变为 animation。同方式一 </code></pre> <p>小结：</p> <ul> <li>可通过 <code>CSSStyleDeclaration.setProperty(propertyName, value, priority)</code> 方法，并传递 <code>important</code>（请注意是不含 <code>!</code> 的）给 <code>priority</code> 参数，来设置 CSS 优先级。</li> </ul> <h3>方式三</h3> <p>这种方式，除了可以实现以上功能之外，最重要的是，它可以设置 <code>-webkit-</code>、<code>-moz-</code>、<code>-o-</code>、<code>-ms-</code> 等实验性或非标准的 CSS 属性。</p> <pre><code class="language-js">element.style.cssText = 'font-size: 30px; -webkit-animation: 3s slidein' // 有效 element.setAttribute('style', 'font-size: 30px; -webkit-animation: 3s slidein') // 有效 </code></pre> <blockquote> <p>⚠️ 尽管以上两种方式都能实现，但注意可能会抹掉当前元素的其他 CSS 属性，可利用类型以下的方式处理。</p> </blockquote> <pre><code class="language-js">const { cssText } = element.style element.style.cssText = `${cssText} font-size: 30px; color: #f00` </code></pre> <h2>2023-03-21 更新</h2> <p>上述方式三中通过 <code>element.style.cssText</code> 方式设置带有 <code>-webkit</code> 等样式时，其前缀可能会被抹除。举个例子：</p> <pre><code class="language-js">element.style.cssText = '-webkit-user-select: none' </code></pre> <p>在 Safari 16.3 中，可按预期设置 <code>-webkit-user-select: none</code>，而在 Chrome 111、Firefox 112 则会被处理成 <code>user-select: none</code>。</p> <p>目前比较安全的做法如下：</p> <pre><code class="language-js">element.setAttribute('style', '-webkit-user-select: none') </code></pre> <h2>参考链接</h2> <ul> <li><a href="https://stackoverflow.com/questions/40230182/why-doesnt-style-webkittransition-and-style-webkittransform-work-anymore-in">Why doesn't style.webKitTransition and style.webkitTransform work anymore in Chrome?</a></li> </ul> </article> <article> <h1>CSS 图片最大边自适应</h1> <p>Sun, 26 Feb 2023 07:19:48 GMT</p> <p>模拟移动端图片预览效果，使图片最大边适应屏幕宽或高。</p> <pre><code class="language-html"><div class="prev-box"> </div> </code></pre> <pre><code class="language-css">.prev-box { background: rgba(0, 0, 0, 1); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10000; } /* 保证最大边占满屏幕 */ .prev-box .prev-img { max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </code></pre> <p>▼ 竖屏图片效果 </p> <p>▼ 横屏 </p> </article> <article> <h1>CSS white-space</h1> <p>Sun, 26 Feb 2023 07:19:09 GMT</p> <p></p> <p>对于 white-space 属性，经常记不清楚那几个属性，然后有什么微妙的差别，所以就有了这篇文章。</p> <h2>white-space</h2> <p>通常用于处理元素的空白，包含空格（Space）、回车（Enter）、制表符（Tab）。</p> <blockquote> <p>在默认情况下，无论我们有 N 多个空格或者回车，它显示在页面上都会合并成一个。超过一行的情况下，文字会换行。</p> </blockquote> <p>但无奈的是，我们真实需求可能是要求各式各样的，所以默认情况显然是不满足我们所有要求的。</p> <ul> <li> <p><strong>normal（默认）</strong> 所有空格、回车、制表符都合并成一个空格，文本自动换行。</p> </li> <li> <p><strong>nowrap</strong> 所有空格、回车、制表符都合并成一个空格，文本不换行。</p> </li> <li> <p><strong>pre</strong> 所有东西原样输出，文本不换行。</p> </li> <li> <p><strong>pre-wrap</strong> 所有东西原样输出，文本换行。</p> </li> <li> <p><strong>pre-line</strong> 所有空格、制表符合并成一个空格，回车不变，文本换行。</p> </li> <li> <p><strong>inherit</strong> 继承父元素（IE 不支持）</p> </li> </ul> <table> <thead> <tr> <th style="text-align:left">white-space 属性</th> <th style="text-align:left">源码空格</th> <th style="text-align:left">源码换行</th> <th style="text-align:left"><br> 换行</th> <th style="text-align:left">容器边界换行</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">normal</td> <td style="text-align:left">合并</td> <td style="text-align:left">忽略</td> <td style="text-align:left">换行</td> <td style="text-align:left">换行</td> </tr> <tr> <td style="text-align:left">nowrap</td> <td style="text-align:left">合并</td> <td style="text-align:left">忽略</td> <td style="text-align:left">换行</td> <td style="text-align:left">不换行</td> </tr> <tr> <td style="text-align:left">pre</td> <td style="text-align:left">保留</td> <td style="text-align:left">换行</td> <td style="text-align:left">换行</td> <td style="text-align:left">不换行</td> </tr> <tr> <td style="text-align:left">pre-wrap</td> <td style="text-align:left">保留</td> <td style="text-align:left">换行</td> <td style="text-align:left">换行</td> <td style="text-align:left">换行</td> </tr> <tr> <td style="text-align:left">pre-line</td> <td style="text-align:left">合并</td> <td style="text-align:left">换行</td> <td style="text-align:left">换行</td> <td style="text-align:left">换行</td> </tr> </tbody> </table> <blockquote> <p>更多细节《<a href="https://github.com/tofrankie/blog/issues/313">细谈空白符</a>》</p> </blockquote> </article> <article> <h1>input placeholder 兼容性处理</h1> <p>Sun, 26 Feb 2023 07:18:24 GMT</p> <p>若要修改 <code><input /></code> 元素 <code>placeholder</code> 属性的样式，需要兼容多种浏览器，如下：</p> <pre><code class="language-css">/* WebKit, Blink, Edge */ input::-webkit-input-placeholder { color: #eee !important; font-size: 16px !important; } /* Mozilla Firefox 19+ */ .input::-moz-placeholder { color: #eee !important; font-size: 16px !important; } /* Mozilla Firefox 4 to 18 */ .input:-moz-placeholder { color: #eee !important; font-size: 16px !important; } /* Internet Explorer 10-11 */ .input:-ms-input-placeholder { color: #eee !important; font-size: 16px !important; } </code></pre> <h3>设置不生效？</h3> <p>若设置 <code>placeholder</code> 的样式不生效，原因可能是在某些公共样式已经对 <code>placeholder</code> 进行设置了，再一次设置就会无效。</p> <p>解决方法是，添加 <code>!important</code> 增加权重。</p> </article> <article> <h1>Autoprefixer 没有添加前缀？</h1> <p>Sun, 26 Feb 2023 07:16:42 GMT</p> <p>在 <a href="https://github.com/postcss/postcss/blob/main/docs/README-cn.md">PostCSS</a> 中使用 <a href="https://github.com/postcss/autoprefixer.git">Autoprefixer</a> 发现没有给我添加前缀，然后...</p> <p>两种解决方案：</p> <h5>方案一</h5> <p>无论使用 <code>postcss.config.js</code> 等配置文件还是直接在 <code>webpack.config.js</code> 中使用 <a href="https://github.com/postcss/autoprefixer.git">Autoprefixer</a>，都需要设置 <code>browserslist</code> 才会帮你添加前缀。</p> <pre><code class="language-js">// postcss.config.js module.exports = { plugins: [ require('autoprefixer') ] } </code></pre> <pre><code class="language-js">// webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer') ], } }] } ] } } </code></pre> <pre><code class="language-json5">// package.json { "browserslist": [ "last 2 versions", "> 1%", "iOS 7", "last 3 iOS versions" ] } </code></pre> <p>或者添加配置文件 <code>.browserslistrc</code></p> <pre><code># Browsers that we support last 2 versions > 1% iOS 7 last 3 iOS versions </code></pre> <h5>2. 方案二（不推荐）</h5> <p>在 <code>postcss.config.js</code> 配置文件添加 <code>browsers</code> 选项，但是这种方式，<a href="https://github.com/postcss/autoprefixer.git">Autoprefixer</a> 不提倡这种写法，会导致一些错误。</p> <p>建议使用方案一解决，否则项目构建时会有警告 ⚠️：</p> <blockquote> <p>Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.json or .browserslistrc file.</p> <p>Using browsers option cause some error. Browserslist config can be used for Babel, Autoprefixer, postcss-normalize and other tools.</p> <p>If you really need to use option, rename it to overrideBrowserslist.</p> <p>Learn more at: <a href="https://github.com/browserslist/browserslist#readme">https://github.com/browserslist/browserslist#readme</a> <a href="https://twitter.com/browserslist">https://twitter.com/browserslist</a></p> </blockquote> <pre><code class="language-js">// postcss.config.js module.exports = { plugins: [ require('autoprefixer')({ browsers: ['defaults', 'not ie < 11', 'last 2 versions', '> 1%', 'iOS 7', 'last 3 iOS versions'] }) ] } </code></pre> </article> <article> <h1>针对不规则图案阴影 drop-shadow</h1> <p>Sun, 26 Feb 2023 07:15:52 GMT</p> <h2>背景</h2> <p>最近在做微信小程序优惠券的一个需求，然后优惠券卡片展示是<strong>不规则图形且含阴影</strong>。</p> <p>如下：</p> <p></p> <p>因为卡片有展开交互，所以高度非固定的，所以就没用切图去弄，想着用 CSS 实现，然后一顿操作：</p> <pre><code class="language-css">.card { width: 100%; height: auto; margin: 24rpx 0; position: relative; border-radius: 10rpx; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06); background: radial-gradient(circle at 0 142rpx, transparent 10rpx, #fff 0) top left, linear-gradient(0.25turn, #fff, #fff), radial-gradient(circle at 70rpx 142rpx, transparent 10rpx, #fff 0) bottom right; background-size: 10% 100%, 82% 100%, 10% 100%; background-repeat: no-repeat; background-position: 0 0, 50% 0, 100% 0; } </code></pre> <p>出来的效果如下，有瑕疵，强迫症表示受不了。</p> <p></p> <p>针对不规则图形，使用 <code>filter</code> 属性替换掉 <code>box-shadow</code>。（效果如图一）</p> <pre><code class="language-css">{ filter: drop-shadow(0px 4rpx 12rpx rgba(0, 0, 0, 0.06)); } </code></pre> <blockquote> <p>其中 <code>drop-shadow</code> 参数与 <code>box-shadow</code> 基本一致。</p> </blockquote> <h2>兼容性</h2> <p>在使用 <code>filter: drop-shadow</code> 设置阴影会导致部分 iOS 设备导致花屏。</p> <h2>参考链接</h2> <ul> <li><a href="https://developers.weixin.qq.com/community/develop/doc/000446f4b14600321067eaee851800">wx:for 渲染列表时在 iPhone X 出现重复数据？</a></li> <li><a href="https://segmentfault.com/a/1190000017236686">小程序踩坑记之——花屏/重复渲染数据</a></li> <li><a href="https://developers.weixin.qq.com/community/develop/doc/0002022265c700a43a395a67351c00">iOS 真机下动态修改 filter:drop-shadow 导致的渲染异常问题</a></li> </ul> </article> <article> <h1>微信浏览器中 Input 标签 CSS 兼容性问题</h1> <p>Sun, 26 Feb 2023 07:15:06 GMT</p> <p>经测试与个人猜测，在微信浏览器中，<code><input /></code> 标签，微信的 webview 容器应该是赋予了一些默认的属性，如标签禁用状态下 <code>opacity</code> 不透明度非 100% 等。</p> <blockquote> <p>为什么有这种猜测，因为在 Chrome 调试是预期表现，而微信浏览器中则非预期结果，所以有了以上大胆的猜测，哈哈。如有知道根本原因的，请欢迎大胆指出，谢谢。</p> </blockquote> <p>例如，我遇到的问题，<code>disabled</code> 状态下只设置了 <code>color</code> 之后，而且输入框的背景颜色是白色，所以导致前端页面看起来就像输入框没有任何值一样。</p> <h2>解决方案一</h2> <p>局部添加</p> <pre><code class="language-css">.your-input { color: #ababab; text-fill-color: #ababab; opacity: 1; -webkit-text-fill-color: #ababab; -webkit-opacity: 1; } </code></pre> <h2>解决方案二</h2> <p>全局 input 标签覆盖</p> <pre><code class="language-css">input:disabled, textarea:disabled { color: #ababab; text-fill-color: #ababab; opacity: 1; -webkit-text-fill-color: #ababab; -webkit-opacity: 1; } </code></pre> <blockquote> <p>其中 <code>-webkit-text-fill-color</code> 是用来做填充色使用的，如果有设置这个值，则 <code>color</code> 属性将不生效。</p> </blockquote> </article> <article> <h1>微信浏览器中 Input 的兼容性处理</h1> <p>Sun, 26 Feb 2023 07:14:13 GMT</p> <ol> <li>在 iOS 上输入框默认样式会有内阴影，无法通过 <code>box-shadow: none</code> 去除，可通过以下方式处理。</li> </ol> <pre><code class="language-css">input { -webkit-appearance: none; } </code></pre> <ol start="2"> <li>在微信浏览器中部分 iOS 设备在输入框失焦时，页面无法正常回弹，可通过在 <code>input</code> 失焦事件加上：</li> </ol> <pre><code class="language-js">function blurHandler() { setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0 window.scrollTo(0, Math.max(scrollHeight - 1, 0)) }, 0) } </code></pre> </article> <article> <h1>解决多行文本换行省略显示失效的问题</h1> <p>Sun, 26 Feb 2023 07:12:15 GMT</p> <p>相信大家的前端工程化项目中，都会用到 <code>autoprefixer</code> ，它让我们无需关系要为哪些浏览器加前缀。配合 <code>postcss</code> 一起使用会更好。</p> <p>但同时它也会带来一些问题，例如它不会帮你添加 <code>-webkit-</code> 之类的 prefixer。虽然它会帮你增加新前缀，但也会帮你删除老式过时的代码。</p> <h2>需求来了</h2> <p>例如，我们有一个需求，<strong>文本最多显示两行，溢出部分使用省略号表示</strong>，要怎么做呢？</p> <h2>代码实现</h2> <p>心想 so easy 啦，然后叭拉一下写出来下面的代码，页面热更新好了，擦了擦眼镜，不是眼花了吧，没成功？（内心十万个马儿奔腾...）</p> <pre><code class="language-html"><div class="text">关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</div> </code></pre> <pre><code class="language-css">.text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } </code></pre> <h2>结果</h2> <p>预期表现：✅</p> <p></p> <p>实际表现：❌</p> <p></p> <h2>找原因 Why</h2> <p>为什么会这样呢？细心一看，会发现编译后的 CSS 中 <code>-webkit-box-orient: vertical;</code> 不见了。👇</p> <p> ▲ 编译后的 CSS</p> <p>然后就大概能猜出是什么玩意搞鬼了，不是 postcss，就是 autoprefixer 了。然后搜了一番，发现杀人凶手就是 autoprefixer，它把我的 <code>-webkit-box-orient: vertical</code> 吃了（上面提过，会删掉一些过时的规则）</p> <h2>解决方法</h2> <ol> <li>在 postcss-loader 增加 <code>autoprefixer({ remove: false })</code>。<strong>（不推荐）</strong></li> <li>只移除过时前缀，不自动增加新前缀：<code>autoprefixer({ add: false })</code>。<strong>（非本文问题解决方案，仅扩展用）</strong></li> <li>使用 Control Comments（控制注释，块级）<strong>（有效）</strong></li> </ol> <pre><code class="language-css">.text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /*! autoprefixer: off */ -webkit-box-orient: vertical; /*! autoprefixer: on */ } </code></pre> <ol start="4"> <li>使用 Control Comments（控制注释，单行）<strong>（无效）</strong> 网上很多所使用这种方式的，但我测试无效，原因未知。如用补充，欢迎指出修正，谢谢！</li> </ol> <pre><code>.text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /*! autoprefixer: ignore next */ -webkit-box-orient: vertical; } </code></pre> <ol start="5"> <li>增加内联样式 <code>style={{WebkitBoxOrient: 'vertical'}}</code><strong>（有效）</strong></li> </ol> <blockquote> <p>个人推荐第 3 种方式</p> </blockquote> <h2>参考链接</h2> <ul> <li><a href="https://github.com/postcss/autoprefixer#control-comments">Autoprefixer control comments</a></li> <li><a href="https://juejin.cn/post/6844903848599896072">怎样使用 autoprefixer 时保留 -webkit-box-orient 等样式规则</a></li> <li><a href="https://juejin.cn/post/6844903988081475591">可能是最全的 “文本溢出截断省略” 方案合集</a></li> </ul> </article> <article> <h1>CSS 选择器的权重</h1> <p>Sun, 26 Feb 2023 07:08:51 GMT</p> <p>记录一下，有些还是很少使用到的。</p> <p><strong>权重由高到低：<code>!important</code> ＞ <code>内联样式</code> ＞ <code>id 选择器</code> ＞ <code>类选择器</code> ＞ <code>标签选择器</code> ＞ <code>通配符</code> ＞ <code>继承</code></strong></p> <ul> <li>id 选择器（<code>#myid</code>）</li> <li>类选择器（<code>.myclassname</code>）</li> <li>标签选择器（<code>div</code>、<code>h1</code>、<code>p</code>）</li> <li>相邻选择器（<code>h1 + p</code>）</li> <li>子选择器（<code>ul > li</code>）</li> <li>后代选择器（<code>li a</code>）</li> <li>通配符选择器（<code>*</code>）</li> <li>属性选择器（<code>a[rel="external"]</code>）</li> <li>伪类选择器（<code>a:hover</code>、<code>li:nth-child</code>）</li> <li>可继承的属性：<code>font-size</code>、<code>font-family</code>、<code>color</code></li> </ul> </article> <article> <h1>关于 fail can only be invoked by user TAP gesture 的记录</h1> <p>Sat, 25 Feb 2023 14:30:47 GMT</p> <p></p> <p>相信大家开发小程序的时候都遇到过：</p> <pre><code>{errMsg: "requestSubscribeMessage:fail can only be invoked by user TAP gesture."} </code></pre> <p>意思就是需要「用户触发」，是用户自发、主动的行为才能正常调用，很多 API 都用此限制，比如 <code>wx.navigateToMiniprogram()</code>、<code>wx.openSetting()</code> 等。官方甩锅说开发者滥用接口，其实都是产品经理需求上的滥用。他们限制不了产品经理，就只能搞开发者了。</p> <p>诸如此类的问题，在微信开放社区一搜一堆，然后官方万能回复模板是：「请具体描述问题出现的流程，并提供能复现问题的简单代码片段」。</p> <p>原因可能会有这些，自行排查一下：</p> <ol> <li>只能在 <code>bindtap/catchtap</code> 绑定的方法内调用 <code>wx.requestSubscribeMessage()</code>。</li> <li>只能在所绑定的方法内直接调用，不允许在回调函数中调用。</li> <li>在执行 <code>wx.requestSubscribeMessage()</code> 前，不能有 <code>await xxx</code> 等异步操作。看到一个更离谱的是前面有 <code>console.log()</code> 也失败了，移步<a href="https://developers.weixin.qq.com/community/develop/article/doc/00066e97bb8dc0d1720b1a8f75fc13">这里</a>。</li> </ol> <p>关于能不能在回调函数里使用，有些人在 <code>wx.request()</code>、<code>wx.showToast()</code> 等回调里是成功的，总之很诡异~</p> <p>解决方法是，将其他逻辑后置，首先调用 <code>wx.requestSubscribeMessage()</code> 接口。</p> <p>相关链接：</p> <ul> <li><a href="https://developers.weixin.qq.com/miniprogram/dev/api/open-api/subscribe-message/wx.requestSubscribeMessage.html">wx.requestSubscribeMessage()</a></li> <li><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html">小程序订阅消息</a></li> <li><a href="https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-message-management/subscribe-message/sendMessage.html">发送订阅消息</a></li> <li><a href="https://developers.weixin.qq.com/miniprogram/product/#_5-21-%E6%BB%A5%E7%94%A8%E8%AE%A2%E9%98%85%E6%B6%88%E6%81%AF">滥用订阅消息</a></li> <li><a href="https://developers.weixin.qq.com/community/develop/doc/000046b0e6035824c6b9ed8235b809">关于小程序模板消息能力调整说明</a></li> <li><a href="https://developers.weixin.qq.com/community/develop/article/doc/00006c4ea5ca80d4bcde43a755c813">小程序一次性订阅消息详解</a></li> <li><a href="https://developers.weixin.qq.com/community/develop/doc/000c086fffc06852bd5996fe45b000">requestSubscribeMessage 无法调用？</a></li> </ul> </article> <article> <h1>wx-open-launch-weapp 样式问题</h1> <p>Sat, 25 Feb 2023 14:25:12 GMT</p> <p></p> <h2>系列文章</h2> <ul> <li><a href="https://github.com/tofrankie/blog/issues/153">关于 React 中使用 wx-open-launch-weapp 唤起微信小程序</a></li> <li><a href="https://github.com/tofrankie/blog/issues/154">wx-open-launch-weapp 样式问题</a></li> </ul> <h2>背景</h2> <p>上篇介绍了如何在 React 中引入 wx-open-launch-weapp。完了之后，该标签设置样式非常地蛋疼。</p> <p></p> <p>由于在 <code><wx-open-launch-weapp></code> 设置样式会有很多问题，甚至不起作用，因此我是这样设计的：</p> <ul> <li><code>container</code> 为点击唤起小程序的区域（相对定位）</li> <li><code>content</code> 则是该区域的展示内容，<code>wx-open-launch-weapp</code> 则是占满唤起区域（绝对定位）。</li> </ul> <pre><code class="language-jsx"><div class="container"> <div class="content">页面内容</div> <wx-open-launch-weapp>省略了一部分代码</wx-open-launch-weapp> </div> </code></pre> <pre><code class="language-css">.container { position: relative; margin: 30px; height: 182px; } .content { width: 100%; height: 100%; } </code></pre> <blockquote> <p>简化版，完整示例请看文末。</p> </blockquote> <p>为什么要这样设计？后面的方案会给出答案。</p> <h2>方案一</h2> <p>当前需求，由于我的 <code>content</code> 部分是一张图片，因此我的第一个想法是这样的。</p> <blockquote> <p>为了方便对比，添加了背景色。其中紫色部分为 <code><wx-open-launch-weapp></code> 区域，粉红部分为 <code><script type="text/wxtag-template"></code> 区域。</p> </blockquote> <pre><code class="language-jsx"><div class="container"> <wx-open-launch-weapp username="gh_xxxxxxxx" path="pages/index/index.html" style={{ width: '100%', height: '100%', opacity: 0.3, background: 'blue' }} > <script type="text/wxtag-template"> <div style={{ opacity: 0.3, background: 'red' }} /> </script> </wx-open-launch-weapp> </div> </code></pre> <pre><code class="language-css">.container { margin: 30px; height: 182px; background-image: url(../../../images/banner-movecar.png); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; } </code></pre> <p>将 <code><wx-open-launch-weapp></code> 宽高设为 <code>100%</code>，我们先看下效果：</p> <p></p> <p><strong>此时只出现了紫色部分，且紫色部分点击也没有任何效果，不能唤起小程序</strong>。</p> <p>我想是不是 <code><script type="text/wxtag-template"></code> 未设置宽高的问题，将其设置为 <code>100%</code> 之后，效果一样均无效。</p> <h2>方案二</h2> <p>方案一流产之后，想到会不会是 <code>100%</code> 不生效，于是想着将宽高设置为具体值。如下：</p> <pre><code class="language-html"><div class="container"> <wx-open-launch-weapp username="gh_xxxxxxxx" path="pages/index/index.html" style={{ width: '6.9rem', height: '1.82rem', opacity: 0.3, background: 'blue' }} > <script type="text/wxtag-template"> <div style={{ width: '100%', height: '100%', opacity: 0.3, background: 'red' }} /> </script> </wx-open-launch-weapp> </div> </code></pre> <p></p> <p>尽管 <code><wx-open-launch-weapp></code> 占满 <code>container</code> 的宽度，但高度...</p> <p>接着尝试设为 <code>{{ width: '6.9rem', height: '100%' }}</code>，效果完全一致，高度仍无法占满 <code>container</code> 的高度。</p> <blockquote> <p>PS：项目设置 <code>100px</code> 对应的是 <code>1rem</code>。</p> </blockquote> <p>我又想是不是 <code>rem</code> 单位问题，然后我又改为 <code>{{ width: '690px', height: '182px' }}</code> 看看有什么不一样，但高度仍然如上图一样，可宽度倒是有变化。</p> <p>多次调整宽高及其单位后发现：<strong>宽度可控，可高度始终如一</strong>。</p> <p>无奈.jpg</p> <h2>方案三</h2> <p>到这里想吐了，我想着先解决 <code><wx-open-launch-weapp></code> 占满 <code>container</code> 的问题，暂时忽略 <code><script type="text/wxtag-template"></code> 的问题。</p> <p>既然方案二尝试了各种可能性，无论怎么设置宽高仍不尽人意。于是采用<strong>绝对布局</strong>看看：</p> <blockquote> <p>此前设置了背景色来区分，将 <code><script type="text/wxtag-template"></code> 区域宽度暂时设为 <code>90%</code> 以便于对比。</p> </blockquote> <pre><code class="language-jsx"><div class="container"> <wx-open-launch-weapp username="gh_xxxxxxxx" path="pages/index/index.html" style={{ position: 'absolute', width: '100%', height: '100%', opacity: 0.3, background: 'blue' }} > <script type="text/wxtag-template"> <div style={{ width: '90%', height: '100%', opacity: 0.3, background: 'red' }} /> </script> </wx-open-launch-weapp> </div> </code></pre> <pre><code class="language-css">.container { position: relative /* 其他不变 */ } </code></pre> <p></p> <p>好像看到希望了，<code><wx-open-launch-weapp></code> 已占满 <code>container</code> 了。</p> <p>但 <code><script type="text/wxtag-template"></code> 的区域仍然没有展示出来，那我是不也要设为绝对布局呢，试试看：</p> <pre><code class="language-jsx"><div class="container"> <wx-open-launch-weapp username="gh_xxxxxxxx" path="pages/index/index.html" style={{ position: 'absolute', width: '100%', height: '100%', opacity: 0.3, background: 'blue' }} > <script type="text/wxtag-template"> <div style={{ position: 'absolute', width: '90%', height: '100%', opacity: 0.3, background: 'red' }} /> </script> </wx-open-launch-weapp> </div> </code></pre> <p>效果如下：</p> <blockquote> <p>PS：注意这里宽度是没问题的，写成 <code>100%</code> 就能横向占满。</p> </blockquote> <p></p> <p>好像快成功了，高度还是不对。其中紫色部分属于 <code><wx-open-launch-weapp></code>，而粉红部分属于 <code><script type="text/wxtag-template"></code>。所以点击粉红区域可以正常唤起小程序了。</p> <p>细心的同学可能发现了，缺的那部分高度跟未设置布局时的高度是一样的，为什么会这样，我也没找到原因。有知道的同学可以告诉我哦，谢谢。</p> <blockquote> <p>若将 <code><script type="text/wxtag-template"></code> 设为 <code>relative</code> 布局，我试了，发现是不行的。</p> </blockquote> <p>然后，又想到将 <code>top</code> 设为 <code>0</code>，发现可以了。</p> <p></p> <p>为了兼容性，于是我谨慎地将 <code>top</code>、<code>left</code> 均设为 <code>0</code>。</p> <p>到这里，感觉可以收尾了。</p> <h2>最终版</h2> <p>上文是这样设计的：</p> <ul> <li><code>container</code> 为点击唤起小程序的区域（相对定位）</li> <li><code>content</code> 则是该区域的展示内容，<code>wx-open-launch-weapp</code> 则是占满唤起区域（绝对定位）。</li> </ul> <p>但由于前面宽高问题，就那么难搞了，我想把页面元素与唤起小程序的区域分开来，是不是省心很多。</p> <p>完整示例：</p> <pre><code class="language-jsx">import React, { useState } from 'react' import style from './index.scss' export default function Demo() { return ( <div className={style.container}> <div className={style.content}> {/* 这里写页面内容 */} </div> <wx-open-launch-weapp username="gh_xxxxxxxx" path="pages/index/index.html" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }} > <script type="text/wxtag-template"> {/* 这里唤起小程序的点按区域 */} <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 0 }} /> </script> </wx-open-launch-weapp> </div> ) } </code></pre> <pre><code class="language-scss">// index.scss .container { position: relative; margin: 30px; height: 182px; } .content { width: 100%; height: 100%; background-image: url(../../../images/banner-movecar.png); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; } </code></pre> <p>吐了三斤血，庆幸的是可以愉快地唤起小程序了。</p> <p></p> <p>The end.</p> </article> <article> <h1>关于 React 中使用 wx-open-launch-weapp 唤起微信小程序</h1> <p>Sat, 25 Feb 2023 14:18:58 GMT</p> <p></p> <h2>系列文章</h2> <ul> <li><a href="https://github.com/tofrankie/blog/issues/153">关于 React 中使用 wx-open-launch-weapp 唤起微信小程序</a></li> <li><a href="https://github.com/tofrankie/blog/issues/154">wx-open-launch-weapp 样式问题</a></li> </ul> <h2>背景</h2> <p>最近在做中秋国庆活动，其中一个需求是在 H5 页面中唤起微信小程序。</p> <p>前不久，微信 JSSDK 开放了该接口 <code>wx-open-launch-weapp</code> ，仅支持微信浏览器内唤起小程序。<a href="https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#2">官方文档</a></p> <p>记录一下踩坑的过程。</p> <h2>重要前提</h2> <blockquote> <p>[!WARNING] 必须满足以下条件，否则渲染不出来。</p> </blockquote> <ul> <li> <p><strong>已认证的服务号</strong>：服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。</p> </li> <li> <p><strong>已认证的非个人主体的小程序</strong>：使用小程序云开发的<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/introduction.html">静态网站托管</a>绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。</p> </li> </ul> <p>这里踩坑了。我一直以为生产环境和测试环境都是同一个公众号（服务号）。后来问了后端才知道，测试环境是一个私人公众号（订阅号），所以在测试环境捣鼓了半天也没弄出来！ 😔</p> <h2>版本要求</h2> <blockquote> <p>要真机上才有效果，微信开发工具是看不到的！</p> </blockquote> <ul> <li>微信 JS-SDK 版本：1.6.0 及以上</li> <li>微信版本：7.0.12 及以上</li> <li>系统版本：iOS 10.3 及以上、Android 5.0 及以上</li> </ul> <h2>wx.config</h2> <pre><code class="language-js">wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 appId: '', // 必填，公众号的唯一标识 timestamp: '', // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名 jsApiList: [], // 必填，需要使用的JS接口列表 openTagList: [ 'wx-open-launch-weapp' ] // 可选，需要使用的开放标签列表 }) </code></pre> <blockquote> <p>我看过<a href="https://developers.weixin.qq.com/community/develop/article/doc/00002a05760be03915caee70e51413">某帖</a>说，即使没用到 <code>jsApiList</code>，也要显式配置 <code>jsApiList: []</code>，这样 <code>wx.config()</code> 才能生效。但我项目本身就有使用它，所以我没有去验证。</p> </blockquote> <p>可通过指定 <code>debug: true</code> 来验证 <code>wx.config()</code> 是否成功。</p> <p>只有配置成功了，后续的功能才能实现。</p> <h2>wx-open-launch-weapp</h2> <p>提一嘴，别弄错标签了，长得有点像！</p> <ul> <li><code><wx-open-launch-app></code> 打开 APP 标签</li> <li><code><wx-open-launch-weapp></code> 打开微信小程序标签</li> </ul> <blockquote> <p>[!NOTE] 官方文档有更新，支持更多属性，详见<a href="https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#%E8%B7%B3%E8%BD%AC%E5%B0%8F%E7%A8%8B%E5%BA%8F%EF%BC%9Awx-open-launch-weapp">这里</a>。</p> </blockquote> <p>属性：</p> <ul> <li> <p><strong>username</strong>（必填）：所需跳转的<strong>小程序原始 id</strong>。是以 <code>gh_</code> 开头的原始 id，非以 <code>wx</code> 开头的小程序 APPID。</p> </li> <li> <p><strong>path</strong>（非必填）：所需跳转的小程序内页面路径及参数。页面路径必须添加<code>.html</code>后缀，比如<code>pages/index/index.html</code>。</p> </li> </ul> <p>以下是使用 React 的写法，其他的框架或库我没特意去写过，可以参考 <a href="https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html">官方文档</a>。</p> <blockquote> <p>但看微信文档要带一双慧眼，初期官方示例似乎有语法错误，现在似乎修复了。</p> </blockquote> <p>React 中不支持直接写 <code><template /></code> 标签，需要使用 <code><script type="text/wxtag-template" /></code> 替换。或考虑使用 <a href="https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html">dangerouslySetInnerHTML</a>。</p> <pre><code class="language-jsx"><div style={{ position: 'relative', width: '6.3rem', height: '2.46rem' }}> <div>唤起小程序的页面元素，如按钮等</div> <wx-open-launch-weapp id="launch-btn" username="gh_****" path="/pages/index/index.html" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }} > <script type="text/wxtag-template"> <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 0 }} /> </script> </wx-open-launch-weapp> </div> </code></pre> <p>若使用 TS 遇到</p> <pre><code>Property 'wx-open-launch-weapp' does not exist on type 'JSX.IntrinsicElements'. </code></pre> <p>可添加类型声明：</p> <pre><code class="language-ts">declare global { namespace JSX { interface IntrinsicElements { 'wx-open-launch-weapp': React.DetailedHTMLProps< React.HTMLAttributes<HTMLElement>, HTMLElement > & { username: string path?: string } } } } </code></pre> <h2>参考链接</h2> <ul> <li><a href="https://developers.weixin.qq.com/community/develop/doc/00048ee3af87a0bd09aaee4c35b800?jumpto=comment&commentid=00004e8f228440dd0caae0a29568">react 里面 h5 wx-open-launch-weapp 跳转小程序按钮样式无法设置？</a></li> <li><a href="https://juejin.im/post/6868526637458128903">公众号跳转 H5</a></li> <li><a href="https://developers.weixin.qq.com/community/develop/doc/0004c86fcf80801413aab38fc5c000?_at=1576086274183">react 里面 h5 wx-open-launch-weapp 不显示，是什么问题？</a></li> </ul> </article> <article> <h1>小程序启动参数相关问题</h1> <p>Sat, 25 Feb 2023 14:15:50 GMT</p> <h2>一、支付宝小程序</h2> <p>相关链接：</p> <ul> <li><a href="https://opendocs.alipay.com/mini/framework/app-detail">文档介绍</a></li> <li><a href="https://opensupport.alipay.com/support/helpcenter/142/201602475172?ant_source=manual&recommend=9784af7814a1ec663089e796d8a7b4ce">小程序跳转能力介绍</a></li> <li><a href="https://opensupport.alipay.com/support/helpcenter/144/201602504467?ant_source=antsupport">三方 APP /浏览器如何跳转小程序</a></li> <li><a href="https://opensupport.alipay.com/support/helpcenter/142/201602496413?ant_source=antsupport">小程序 scheme 链接介绍</a></li> </ul> <pre><code>// scheme 链接 alipays://platformapi/startapp?appId=[appId]&page=[pagePath]&query=[params] </code></pre> <table> <thead> <tr> <th>参数</th> <th>描述</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td>appId</td> <td>要跳转的目标小程序 appId</td> <td><code>20170713077xxxxx</code></td> </tr> <tr> <td>pagePath</td> <td>要跳转到目标小程序的具体 page 页面，该值等于 app.json 里面的配置值；如果不带 page 字段，默认跳转到小程序首页。<br><br><strong>注意：如 pagePath 需要带参数，也要进行 UrlEncode 处理。</strong></td> <td><code>pages/index/index</code></td> </tr> <tr> <td>query</td> <td>表示从外部 APP 携带的参数透传到目标小程序；如果不需要携带参数给小程序，可以不带该参数。<br><br>query：启动参数，内容按照格式为：<strong>参数名=参数值&参数名=参数值</strong>。<br><br><strong>注意：query 携带的启动参数必须进行 UrlEncode 否则只能获取第一个参数!</strong></td> <td><code>xx%3Dxx</code></td> </tr> </tbody> </table> <h3>1. 应用逻辑</h3> <p>每次通过 scheme 调用，前端表现是重新触发 <code>onLaunch</code> 和 <code>onShow</code>，都会传参给 <code>app.js</code> 的 <code>onLaunch</code> 和 <code>onShow</code>，基础页面会重新触发 <code>onLoad</code> 和 <code>onShow</code> 方法。</p> <p>在保活期间（5分钟），比如锁屏之后，会重新触发 <code>onShow</code> 方法，但是却没法获取参数，也就是传参 scheme 只会在调用的时候触发一次，再次启动只是触发 <code>onShow</code> 不会传参。只能前端在 <code>onShow</code> 里做相应的业务逻辑。</p> <h3>2. 页面的逻辑</h3> <p>当小程序用 scheme 从后台唤起的时候，其实相当于重新被打开了 <code>onLoad</code>，还有 <code>onShow</code> 都会被触发。</p> <p>在保活期间（5分钟）被重新唤起的时候，就只会触发 <code>onShow</code>。</p> <h3>3. 小程序通过 scheme 跳转如何获取启动参数</h3> <p>在小程序 <code>app.js</code> 的 <code>onLaunch</code> 或 <code>onShow</code> 进行获取启动参数。</p> <p>如果冷启动，则会在 <code>onLaunch(options)</code> 中获得参数；如果为热启动，则会在 <code>onShow(options)</code> 中获得参数。建议冷启动中获取不了的时候，再尝试在 <code>onShow</code> 中获取，若还是获取不了，则可判定为没有拿到该参数。</p> <h3>4. 其他</h3> <blockquote> <p><code>my.switchTab()</code>、<code>my.navigateBack()</code> 不支持带参跳转。</p> </blockquote> <h2>二、微信小程序</h2> <p>大同小异，后续补上...</p> </article> <article> <h1>微信小程序转支付宝小程序</h1> <p>Sat, 25 Feb 2023 14:06:04 GMT</p> <p>社区官方列出的常见问题：<a href="https://openclub.alipay.com/read.php?tid=6471&fid=66&ant_source=zsearch">小程序常见问题汇总</a></p> <h2>框架相关</h2> <ol> <li>页面标题：<code>navigationBarTitleText</code> → <code>defaultTitle</code>。</li> </ol> <h2>组件</h2> <ol> <li><code>wx.showModal</code>，在支付宝小程序上拆分为 <code>my.alert</code> 和 <code>my.confirm</code>， <a href="https://docs.alipay.com/mini/api/ui-feedback">交互反馈</a>。</li> <li>canvas:</li> </ol> <h2>API</h2> <ol> <li> <p>微信支付：<a href="https://developers.weixin.qq.com/miniprogram/dev/api/wx.requestPayment.html"><code>wx.request()</code></a> → <a href="https://docs.alipay.com/mini/api/openapi-pay"><code>my.httpRequest()</code></a>，二者参数不一致。</p> </li> <li> <p>缓存： <a href="https://developers.weixin.qq.com/miniprogram/dev/api/wx.setStorageSync.html"><code>wx.setStorageSync(string key, any data)</code></a> → <a href="https://docs.alipay.com/mini/api/storage"><code>my.setStorageSync({key: key, data: value})</code></a>，<code>getStorageSync</code> 和 <code>removeStorage</code> 也类似。</p> </li> <li> <p><code>wx.showToast</code> 关于 loading 的要改成：<a href="https://docs.alipay.com/mini/api/ui-feedback"><code>my.showLoading</code></a>；<a href="https://docs.alipay.com/mini/api/ui-feedback"><code>my.showToast()</code></a> 内容属性，微信小程序是 <code>title</code>，支付宝小程序是 <code>content</code>，且没有<code>mask</code> 属性。</p> </li> <li> <p><code><form></code> 组件事件：<code>bindreset → onReset</code>、 <code>bindsubmit → onSubmit</code>。</p> </li> <li> <p><code><input></code>、<code>textarea</code> 组件事件：<code>bindinput → onInput</code>、<code>bindblur → onBlur</code>、<code>bindfocus → onFocus</code>。</p> </li> <li> <p><code><canvas></code> 组件事件：<code>onTouchstart → onTouchStart</code>、<code>onTouchmove → onTouchMove</code>、<code>onTouchend → onTouchEnd</code>；组件属性：<code>canvas-id → id</code>。</p> </li> <li> <p><code><div></code>、<code><span></code> 标签在支付宝小程序都不支持，改成 <code><view></code>、<code><text></code> 标签即可。</p> </li> <li> <p>拨打电话微信：<code>wx.makePhoneCall({ phoneNumber: '020-11183' })</code> 支付宝：<code>my.makePhoneCall({ number: '020-11183' })</code></p> </li> <li> <p><code>my.alert(object)</code> 没有“取消”按钮，以及“确定”按钮的键为：<code>buttonText</code>。</p> </li> <li> <p>支付宝小程序中，如果标签中写了两个或以上 <code>class</code> 属性，只能读取第一个，可能是 bug。</p> </li> <li> <p>（请忽略，跟支付宝小程序无关）一些字段改变： <code>wxChannel → aliChannel</code> <code>updateWxUserChannel → updateAliUserChannel</code></p> </li> <li> <p><code><checkbox></code> 组件的改变事件属性为：<code>onChange="onChangeFn"</code>。</p> </li> <li> <p><code>my.getImageInfo</code> 有兼容性的问题，需要做处理。在联想手机上有问题，可能是因为支付宝 APP 版本过低的原因。</p> </li> <li> <p>在支付宝小程序 <code>my.uploadFile</code> 接口中，不需要把头部信息设为 <code>header: { "Content-Type": "multipart/form-data" }</code>，这个可能导致个别机型接口返回数据错误，导致无法正常显示图片。而微信小程序 <code>wx.uploadFile</code> 中，如果发起 POST 请求，则需要把头部信息设成上面那样。</p> </li> <li> <p><code>this.setData()</code> 方法，从 1.7.0 版本开始，<code>setData</code> 可以接受传递一个回调函数，该回调函数会在页面渲染之后执行。使用 <code>my.canIUse('page.setData.callback')</code>做兼容性处理。</p> </li> <li> <p>基础库版本分布如下：</p> </li> </ol> <p></p> <ol start="17"> <li> <p><code>my.httpRequest</code> API 接口失败返回的错误码描述有误，官方已确认，待修正！<a href="https://docs.alipay.com/mini/api/network"><code>my.httpRequest</code></a>。</p> </li> <li> <p><a href="https://docs.alipay.com/mini/component/picker"><code><picker></code></a> 中只能含有一个子元素。若多个元素，需要用 <code><view></code> 括起来，否则不显示。</p> </li> <li> <p>（请忽略，非支付宝 api ）去掉函数 <code>compareAppVersionToTarget</code> 和 <code>compareWxVersion</code>。</p> </li> <li> <p>多个空格的问题：</p> </li> </ol> <pre><code class="language-html"> <text decode="{{true}}" space="nbsp"> </text>  <text style="white-space: pre-wrap">{{' '}}</text> </code></pre> <p>CSS3 为 <code>white-space</code> 新增了<code>pre-line</code> 和 <code>pre-wrap</code> 属性，前者会将多个空格合成一个，后者会保留所有空格。详情可以看一下这篇文章：<a href="https://www.cnblogs.com/qianlegeqian/p/3987235.html">white-space 中 pre、pre-line、pre-wrap 的区别</a>。</p> <ol start="21"> <li> <p>文件下载的相关接口，成功回调里的路径：<code>res.tempFilePath → res.apFilePath</code>。</p> </li> <li> <p>适配 iPhone X 导航的需要修改，支付宝里 <code>my.getSystemInfo</code> 获取的 <code>res.model</code> 值不一样。</p> </li> <li> <p>删除地址的弹窗：<code>wx.alert()</code> 要改成 <code>my.confirm()</code>。</p> </li> </ol> </article> <article> <h1>记录前端遇到的坑，含小程序！</h1> <p>Sat, 25 Feb 2023 13:58:08 GMT</p> <blockquote> <p>本文最后更新于 2020-09-04</p> </blockquote> <ol> <li>react 项目无法（热）更新，是编译路径找不到。</li> <li>在绝对布局中，当 <code>left</code> 为 <code>0</code> 时，如果不写，在部分机型的浏览器会出现错位。</li> </ol> <pre><code class="language-css">div { position: absolute; left: 0; /* 加上最好 */ top: 10px } </code></pre> <ol start="3"> <li>React 项目中，一些纯文本页面，如果要设置整个 HTML 页面背景颜色，可以把他设为 <code>fixed</code> 布局，再设置 <code>width</code> 和 <code>height</code> 为 <code>100%</code>，因为 <code>fixed</code> 布局参考对象是 <code>body</code> 的宽度。</li> </ol> <pre><code class="language-css">/* css 样式 */ div { width: 100%; height: 100%; position: fixed; left: 0; bottom: 0; overflow-y: scroll; } </code></pre> <ol start="4"> <li> <p>在 CSS3 标准中，伪类使用单冒号 <code>:</code>，而伪元素使用双冒号 <code>::</code>。在此之前的标准，他俩都使用单冒号。需要注意的是，双冒号的写法在低版本的IE浏览器中兼容性有问题，所以一些开发者为了保证兼容性，伪类和伪元素都用单冒号的写法。</p> </li> <li> <p><code>rpx</code> 是微信小程序的 CSS 尺寸单位，小程序把不同的设备统一规定屏幕宽度为 <code>750rpx</code>，<code>rpx</code> 可以根据设备屏幕的真实宽度进行自适应。常见设备的转化关系（<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html?t=1476197492063">小程序开发文档</a>）：</p> </li> </ol> <table> <thead> <tr> <th>设备</th> <th>rpx 换算 px (屏幕宽度/750)</th> <th>px 换算 rpx (750/屏幕宽度)</th> </tr> </thead> <tbody> <tr> <td>iPhone 5</td> <td>1rpx = 0.42px</td> <td>1px = 2.34rpx</td> </tr> <tr> <td>iPhone 6</td> <td>1rpx = 0.5px</td> <td>1px = 2rpx</td> </tr> <tr> <td>iPhone 6 Plus</td> <td>1rpx = 0.552px</td> <td>1px = 1.81prx</td> </tr> </tbody> </table> <p>说明一下，iPhone 6/7 的屏幕宽度是 <code>375px</code>，意外着 <code>1px = 2rpx</code>。很多UI设计师以 iPhone6/7 作为视觉稿。（插句话，iPhone 6/7 的物理像素是 <code>750</code> 个，即用 <code>2</code> 个像素表示网页中的 <code>1px</code>，所以在以前 iPhone 比一些普通设备显得更加细腻就是这个原因。<code>1px = 2rpx = 2</code> 个物理像素。如果觉得混乱的可以忽略这句！）</p> <ol start="6"> <li> <p>小程序 <code>rem</code>（root em）单位，规定屏幕宽度为 <code>20rem</code>；<code>1rem = (750/20)rpx</code></p> </li> <li> <p>鼠标形状</p> </li> </ol> <pre><code class="language-css">/* css 样式*/ div { cursor: default; /* 默认，箭头 */ cursor: pointer; /* 手指 */ } </code></pre> <ol start="8"> <li> <p>npm（nodejs package manager），nodejs 包管理器； <code>--save</code> 的目的是将项目对该包的依赖写入到 <code>package.json</code> 文件中。</p> </li> <li> <p><code>box-shadow</code>，其中 IE6 和 IE7 应该是不支持 <code>box-shadow</code> 属性。</p> </li> </ol> <pre><code class="language-css">/* css 样式*/ div { -moz-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); /* 不需要设置透明度的，直接使用颜色值 */ -webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); } </code></pre> <ol start="10"> <li>CSS3 边框</li> </ol> <pre><code class="language-css">/* css样式 */ div { border: 1px solid #eee; box-sizing: border-box; /* 内边框，默认 */ box-sizing: content-box; /* 外边框 */ } </code></pre> <ol start="11"> <li> <p>在微信小程序中 <code><map></code>、<code><canvas></code>、<code></code>、<code><textarea></code> 是由客户端创建的原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 <code>z-index</code> 为多少，都无法盖在原生组件上。原生组件暂时还无法放在 <code><scroll-view></code> 上，也无法对原生组件设置 css 动画。（官方解释）<code><map></code>，<code></code>，<code><canvas></code>，<code><textarea></code> 是原生组件，层级位于 webview 之上。在原生控件 <code><cover-view></code> 作为父容器时，不能使用其他控件嵌套作为子元素，只能使用 cover 类的控件，例如：<code><cover-view></code>、<code><cover-image></code> 。</p> </li> <li> <p>不同数据类型的布尔运算（详细说明：<a href="https://blog.csdn.net/mrhaoxiaojun/article/details/50946366">点击这里</a>） <code>if(a)</code>，<code>a</code> 为 <code>false</code>、<code>0</code>、<code>undefined</code>、<code>null</code>、<code>NaN</code>、<code>空字符串</code> 时都返回 <code>false</code>。</p> </li> </ol> <table> <thead> <tr> <th>数据类型</th> <th>规律</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>Object</td> <td>都为 <code>true</code></td> <td></td> </tr> <tr> <td>Number</td> <td>只有 <code>0</code> 和 <code>NaN</code> 为 <code>false</code></td> <td></td> </tr> <tr> <td>String</td> <td>只有空字符串(<code>''</code>)为 <code>false</code></td> <td>空格字符串(<code>' '</code>)为 <code>true</code></td> </tr> <tr> <td>Function</td> <td>都为 <code>true</code></td> <td></td> </tr> <tr> <td>null, undefined</td> <td>都为 <code>false</code></td> <td></td> </tr> </tbody> </table> <ol start="13"> <li>小程序 <code><scroll-view></code> 中的 <code>bindscrolltolower</code> 方法失效的原因：需要在 <code>app.wxss</code> 中设置 <code>page</code> 的高度为 <code>100%</code>，并在 <code><scroll-view></code> 组件中设置高度为 <code>100%</code>。</li> </ol> <pre><code>// app.wxss page { height: 100% } // scroll-view 组件 <scroll-view scroll-y="true" style="height:100%" bindscrolltolower="scrollLower"></scroll-view> </code></pre> <ol start="14"> <li> <p><code><input></code> 组件，在手写输入的状态下，可能不会触发 <code>bindinput</code> 事件，为了确保获取的 <code>value</code> 值正确，可以在 <code>bindblur</code> 事件中通过 <code>e.detail.value</code> 获取最新的输入值。</p> </li> <li> <p><code>wx.scanCode</code> API 调用扫一扫，扫码成功或者返回的时候，在真机上会调用 <code>onShow</code> 生命周期。如果在在 <code>onShow</code> 中读取缓存数据，需要加个判断，把新值赋过去</p> </li> <li> <p>文本不换行，溢出部分用省略号显示：</p> </li> </ol> <pre><code class="language-css">.text { width: 100px; /* 必须要设置宽度 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; } </code></pre> <ol start="17"> <li> <p>善用 <code>!!</code> 将变量转化为布尔类型。除了<code>false</code>、<code>0</code>、<code>null</code>、<code>undefined</code>、<code>NaN</code> 、<code>空字符串</code>返回 <code>false</code>，其余的都返回 <code>true</code>。（空格字符串也是返回true）。</p> </li> <li> <p>微信小程序：当项目上传或者预览编译的时候出现<code>无法使用代码保护功能</code>的情况，是因为当前项目勾选了<code>上传时进行代码保护</code>的选项，而且项目本身引用了第三方库，才导致出现这样的情况。解决办法是：关闭代码保护。</p> </li> <li> <p>微信小程序在 <code><scroll-view /></code> 子元素使用 <code><textarea /></code> 原生组件可能会报错：如：<code>insertTextArea:fail</code> 等。</p> </li> <li> <p>支付宝小程序关于 <code><cover-view /></code>、<code><cover-image /></code> 的问题：</p> </li> </ol> <ul> <li><code><cover-view></code> 默认白色背景，虽然<a href="https://opensupport.alipay.com/support/knowledge/46919/201602487825">官方回答</a>是不能更改，但可通过再 app.acss 里面添加样式修改，亲测有效：</li> </ul> <pre><code class="language-css">cover-view { background-color: rgba(0, 0, 0, 0); } </code></pre> <ul> <li><code><cover-image></code> 的 <code>border-radius</code> 属性部分机型无效，<a href="https://opensupport.alipay.com/support/knowledge/46919/201602487826">官方回答</a>可修改，但无效（已知华为 P30 不生效，iPhone 都有效），可能是支付宝版本问题（10.1.26）</li> </ul> <ol start="21"> <li>支付宝小程序开发工具 Mac 版同时开启多个项目的方法：</li> </ol> <pre><code>$ open -n /Applications/小程序开发者工具.app </code></pre> <ol start="22"> <li>微信小程序 <code><input /></code> 不支持自定义 <code>font-family</code>（<a href="https://developers.weixin.qq.com/miniprogram/dev/component/input.html#Bug-Tip">详见</a>）</li> </ol> </article> <article> <h1>微信小程序 Canvas 绘图存图</h1> <p>Sat, 25 Feb 2023 13:57:41 GMT</p> <p>使用 Canvas 画图，并保存至相册的过程，以下是踩过的坑：</p> <ol> <li>canvas 标签不可以设置为 <code>display: none</code>；若不想显示到页面，可以采用 <code>fixed</code> 布局视觉隐藏；</li> <li>context.draw(boolean reserve, function callback) 是异步的，<code>wx.canvasToTempFilePath</code>一定要写在回调里，否则会出现无法绘图的情况；</li> <li><code>wx.canvasToTempFilePath</code> 保存图片至相册，需要用户授权，所以保存前需要检查权限。一旦用户一次拒绝授权，第二次保存时是不会有授权弹窗的，可以使用 <code>wx.openSetting</code> 去引导用户授权。（插一句：支付宝小程序，只要没权限，每次调用都会弹出授权弹窗）</li> </ol> <p>代码片段：<a href="https://developers.weixin.qq.com/s/14RxPjmC7k50">canvas demo</a></p> <p>再放个采坑过程：<code>关于 HTML → Canvas → Image → 保存相册</code> 的过程。<a href="https://juejin.im/post/5a17c5e26fb9a04527254689">点我跳转</a>。（不是我写的，但过程跟我相同，懒得写了）</p> <p>▼ 效果图 </p> </article> <article> <h1>微信小程序转为百度小程序</h1> <p>Sat, 25 Feb 2023 13:56:24 GMT</p> <p>最近在做百度小程序开发需求，把原有的微信小程序快速迁移过去，从文档上看，两者相似度还是挺高的。</p> <p>现在网上有挺多的转换工具的，而我使用的是 <a href="https://www.npmjs.com/package/wx2swan">wx2swan</a> ，在实践过程中，转化完成度能到 80% ~ 90% 之间，挺不错的。</p> <h2>快速开始</h2> <ol> <li>全局安装</li> </ol> <pre><code class="language-shell">$ npm install -g wx2swan </code></pre> <ol start="2"> <li>转换</li> </ol> <pre><code class="language-shell">$ wx2swan input-path output-path # wx2swan ./projectA ./projectB </code></pre> <ol start="3"> <li>转化过程在 <code>log</code> 文件夹下查看</li> <li>转换完成</li> </ol> <h2>wx2swan 做了什么？</h2> <ul> <li>工具只做了静态语法上的转换，根据一些规则去转换代码，抹平微信小程序语法和百度小程序语法上的差异，避免大家踩坑</li> <li>搬家工具是离线的，没有运行时框架，所以有些没法抹平的运行时 diff ，需要二次开发调整</li> <li>使用中的任何问题，都可以提 <a href="https://github.com/yican008/wx2swan/issues">Issues</a> 或者加 wx2swan 作者微信小助手：<code>wx2swan-helper</code></li> </ul> </article> <article> <h1>购房有感：原来不仅仅要考虑首付问题...</h1> <p>Sat, 25 Feb 2023 13:55:42 GMT</p> <p></p> <p>近两周，工作之余一直在忙购房的事情，作一个简单的有感记录。</p> <p>早在 2021 年，家里人就让我抽空去看下房，但由于一直拖拖拖......就到 2023 年了。从网上看房、线下看房、交定金、给首付，整个过程也才三周不到的时间，人生大事之一就草草定下了。</p> <p>现在回想起来，有点不可思议，其实只在 2 月 12 日跑了两个楼盘，对比之下，然后感觉后者还不错，就交定金了。</p> <p>由于此前资料不全，按揭、网签还没处理完，还得抽空再跑一趟。</p> <blockquote> <p>在这个过程中，有些东西是经历过才知道：「哦，原来如此...」</p> </blockquote> <h2>要不要找中介？</h2> <p>像我这样，其实对购房很多东西都是不了解的，所以我是有找中介的。</p> <p>你也可以直接去售楼部/楼盘营销中心去看。中介的好处是整个购房过程，她会全程跟踪，有不懂的也可以直接问。</p> <p>但其实中介和楼盘肯定是有合作的，所以大家也要留个心眼，学会判断他们推介的好坏与否，心里要有数，小心被骗。</p> <p>然后我是在某 App 上咨询楼盘相关情况时，随意加上的中介，然后接触下来，感觉还是比较靠谱、专业的。</p> <blockquote> <p>至于线下看房，最好带上有购房经验的朋友同学，如果有的话。</p> </blockquote> <h2>是不是只需要考虑首付款？</h2> <p>既然考虑购房了，月供应该是在可接受范围的区间内，首付是第一道砍。</p> <p>或许你有刷到过，只需首付 5w 诸如此类的，目的是吸引更多年轻人去买房，但细想里面的利息肯定很高...</p> <p>其实更多的是，最低首付是房屋总价的 2 成或 3 成，各地政策会有所不同。我们这边的小城市是：</p> <ul> <li>商业贷款：首付最低 2 成。</li> <li>组合贷款（商业贷款 + 公积金贷款）：首付最低 3 成。</li> </ul> <p>然后，很多楼盘的套路是最低 2 成首付...... 我也是去谈价格的时候才知道，组合贷首付最低要 3 成，这也是有点超预算的。</p> <p>除了首付、月供还有哪些费用呢？</p> <ul> <li>按揭费用（含服务费、公证费、按揭律所代收）</li> <li>签约费（含服务费、产权登记费、工本费、印花税等）</li> <li>专项维修基金（每平方米建筑面积成本价 × 比例 × 面积，各地区维修基金的比例存在一定差异）</li> <li>契税（建筑面积 × 税率。以首套房为例，建筑面积小于 90㎡税率为 1%，大于 90㎡税率为 1.5%；二套房无论建站面积多少税率均为 3%）</li> </ul> <p>因此，除了多少成的首付比例之外，以上这些费用都是要考虑的，所以它们也算是首付的一部分。</p> <h2>关于贷款</h2> <p>由于商贷和公积金贷的利率可以相差很多，因此能用公积金一定要优先选择公积金贷款，剩余部分选择商业贷款。</p> <h3>公积金贷款额度</h3> <p>各地政策不一样，以当地的「住房公积金管理中心官网」最新的相关政策文件为准。政策是会调整的，比如我们这边去年 10 ~ 12 月个人可贷总额由 40w 调至 50w，现在又调整回 40w 了。</p> <p>主要考虑以下这些问题（<strong>以当地政策为准</strong>）：</p> <ul> <li>最高贷款额度是分个人、夫妻双方的，一般夫妻的额度较高；</li> <li>实际可贷额度按「公积金余额 × 一定的倍数」计算，且不能超过最高贷款额度；</li> <li>注意，「倍数」如何确定的问题，是按「累计缴存时间」还是「连续缴存时间」计算；</li> <li>注意，如果你是异地公积金，要清楚购房地能否使用你所缴存地的公积金进行贷款；</li> <li>注意，一般情况申请公积金贷款要求「连续」缴存 6 个月、1 年、甚至 2 年不等。</li> </ul> <p>以个人为例，在清远购房，用的是广州公积金，累计缴存时间超过 48 个月，但 2021 年中由于离职断缴过，目前连续缴存时间不到 24 个月。目前清远政策如下：</p> <blockquote> <ol> <li>需「连续」足额缴存住房公积金 6 个月（含）以上；</li> <li>在清远市区（清新区、清城区）购房；</li> <li>个人申请住房公积金贷款最高额度为 40w，夫妻双方为 50w；</li> <li>实际可贷额度（以首套房为例） a. 累计缴存时间在 24 个月（不含）以下的，可贷额度不超过公积金账户余额的 8 倍； b. 累计缴存时间在 24 个月以上，48 个月（不含）以下的，可贷额度不超过公积金账户余额的 10 倍； c. 累计缴存时间在 48 个月（含）以上的，可贷额度不超过公积金账户余额的 12 倍；</li> <li>申请住房公积金贷款购买首套房普通自住住房，最底首付比例为 30%；</li> <li>公积金贷款利率为 3.1%，商业贷款利率为 4.1%（LPR - 20 个浮动基点）；</li> </ol> </blockquote> <p>这其中发生了一些事情：看房前，从朋友转发的公积金贷款额度计算的推文看，我是可以贷 12 倍的。到售楼部看房之后，无论是置业顾问、中介、还是售楼部某工作人员（应该是贷款或公积金相关的），都说只能贷 8 倍，原因是我中间断缴了，目前连续缴存时间不足 24 个月，加上我是外市的公积金，只能按「连续缴存时间」计算。</p> <p>一开始，我想政策相关的他们肯定最熟悉，就只能认了，谁让我断缴了呢！但是，在去网签的当天，将相关资料交给做按揭的律所工作人员，她说或许能贷 12 倍，具体以公积金那边审批为准。那时候还有点希望，但隔天他们就来电说只能贷 8 倍，原因是异地公积金要按「连续缴存时间」计算，我中间断缴过，所以不行。</p> <p>由于一起一落的，心里很不爽、不服气，他们口中所说跟政策文件所示并不一致。于是我去清远、广州的住房公积金官网翻阅相关政策文件，以及给清远住房公积金管理中心的客服咨询，得出的结论是：<strong>公积金可贷额度是按照「累计缴存时间」去计算倍数的，并不是「连续缴存时间」</strong>。</p> <ul> <li><a href="http://gjj.gz.gov.cn/bsfw/qtfw/content/post_3476874.html">个人住房公积金贷款服务指南（广清互贷）</a></li> <li><a href="http://gjjzx.gdqy.gov.cn/dkyw/496.jhtml">清远市住房公积金贷款业务办事指南</a></li> <li><a href="https://mp.weixin.qq.com/s/olOl5v40wY9N1rYlfXVHFQ">公积金贷款可以贷多少额度？计算公式如下……</a></li> </ul> <p>以上文中所示，均表明应按「累计缴存时间」去计算可贷倍数。于是，我将以上链接发给律所，然后她那边再跟公积金贷款对接人员沟通确认一下。从中间反馈的一些内容看得出来，对接人员应该是一直按「连续缴存时间」去办理的，所以她当初「理所当然」地认为我只能贷 8 倍。从律所转发的截图看，对接的工作人员说是城区的审单人员就是这样跟他们说的。可能是因为我把政策文件链接给她了，整得她都不自信，不敢立马下结论。她说明天再问市区的科长确认。<strong>最后是我胜利了</strong>。</p> <p>回想起来，努力争取还是有用的。就这样看来，在我之前应该有部分购房者因断缴导致贷款倍数被误算的情况。</p> <p>未完待续...</p> </article> <article> <h1>Google Docs 代码块高亮</h1> <p>Sat, 25 Feb 2023 13:54:53 GMT</p> <p></p> <blockquote> <p>现在，我更推荐使用飞书个人版，观感、使用体验更佳。</p> </blockquote> <h2>2023.11.27 更新：</h2> <p>Google Workspace 于 2022.12.14 推出了内置的代码块功能。详见 <a href="https://workspaceupdates.googleblog.com/2022/12/format-display-code-google-docs.html">Easily format and display code in Google Docs</a>。</p> <p>但个人免费账号无法使用，所支持的语言并没有很丰富。</p> <p>使用方式：「插入 Insert - 组成要素 Building blocks - 代码块 Code block」</p> <h2>代码块高亮</h2> <p>如果使用 Google Docs 编写设计文档，少不了插入代码。</p> <p>但由于默认情况下，贴代码的阅读性很不好，那么 <a href="https://workspace.google.com/u/1/marketplace/app/code_blocks/100740430168">Code Blocks</a> 插件应该是你想要的。</p> <p></p> <p>安装之后，这样启动插件：</p> <p></p> <p>所支持的语言、主题众多：</p> <p></p> <p>格式化前后对比：</p> <p></p> <p></p> <p>The end.</p> </article> <article> <h1>地图 SDK 坐标系说明</h1> <p>Sat, 25 Feb 2023 13:54:31 GMT</p> <p></p> <h2>坐标系分类</h2> <p>常见坐标系有三种：</p> <ul> <li>地球坐标系（WGS84）：常见于 GPS 设备，Google 地图等国际标准的坐标体系</li> <li>火星坐标系（GCJ-02）：中国国内使用的被强制加密后的坐标体系，高德坐标就属于该种坐标体系</li> <li>百度坐标系（BD-09）：百度地图所使用的坐标体系，是在火星坐标系的基础上又进行了一次加密处理</li> </ul> <p>在不同坐标系中，同一经纬度所表示的实际位置是有偏差、不相同的，但一般各 SDK 平台都会提供坐标系转化的 API。</p> <ul> <li>谷歌地图使用的是 WGS84 坐标系</li> <li>高德地图、腾讯地图（包括微信、QQ、微信小程序 Map 组件等）使用的是 GCJ-02 坐标系</li> <li>百度地图采用的是 BD-09 坐标系</li> </ul> <p>需要注意的是：</p> <ul> <li>高德地图 SDK 在大陆、港澳使用的是 GCJ-02 坐标系，台湾省、海外地区使用的是 WGS84 坐标系。</li> <li>百度地图 SDK 在国内（包括港澳台）使用的是 BD09 坐标系，海外地区统一使用 WGS84 坐标系。</li> <li>腾讯地图 SDK 在大陆、港澳使用的是 GCJ-02 坐标系，台湾省、海外地区使用的是 WGS84 坐标。</li> </ul> <p>国内三大地图服务商在海外地区均使用的是 WGS84 坐标系，但在港澳台略有不同。</p> <h2>坐标拾取器</h2> <ul> <li><a href="https://lbs.amap.com/tools/picker">高德地图坐标拾取器</a></li> <li><a href="https://api.map.baidu.com/lbsapi/getpoint/index.html">百度地图坐标拾取器</a></li> <li><a href="https://lbs.qq.com/webDemoCenter/glAPI/glMap/mapPosition">腾讯地图坐标拾取器</a></li> <li><a href="https://www.google.com/maps">谷歌地图坐标拾取器</a>（右键复制）</li> </ul> <h2>参考链接</h2> <ul> <li><a href="https://lbs.baidu.com/index.php?title=yingyan/api/v3/coordtrans">百度地图坐标系说明</a></li> <li><a href="https://lbs.amap.com/faq/advisory/others/39840/">港澳台及海外，高德是否都会返回火星坐标系？</a></li> <li><a href="https://lbsyun.baidu.com/index.php?title=FAQ/iOS/map">百度地图 SDK 使用什么坐标系？</a></li> <li><a href="https://lbs.qq.com/FAQ/latlng_faq.html">腾讯位置服务 API 使用什么坐标体系？</a></li> <li><a href="https://lbs.qq.com/FAQ/latlng_faq.html">港澳台及海外，腾讯位置服务是否都会返回火星坐标系？</a></li> </ul> </article> <article> <h1>Stylish 给网页一键换肤，还去广告！</h1> <p>Sat, 25 Feb 2023 13:53:16 GMT</p> <h2>一、什么是 Stylish ？</h2> <p>先看效果图，Stylish 把百度首页变成了这样子:</p> <p></p> <p>Stylish 是一款浏览器插件，目前适用于 Chrome、Safari、Firefox 等主流浏览器。原理是通过替换网页本身的 CSS 样式来达到网页美化的效果。</p> <p><a href="https://userstyles.org/styles/browse">Stylish</a> 官网上有非常非常多的样式供用户下载，不仅能让百度、新浪微博变得极简、讨人喜欢，还能给新浪网、腾讯网、Google 、YouTube 、Facebook 、Wikipedia 等主流网站「换肤」。</p> <p>如果你懂 CSS 知识，还可以自定义样式，做一个属于自己的网页效果，也可以在已有样式的基础上进行修改完善。</p> <h2>二、安装使用 Stylish 插件</h2> <p>下面我将以 Chrome 浏览器为例子，其他浏览器的使用方法大同小异，不太浏览器效果也可能略有不同。</p> <ol> <li> <p>下载安装插件：前往 <a href="https://chrome.google.com/webstore/category/extensions?hl=zh-CN">Chrome 应用商店</a>下载安装。亦可去 <a href="http://www.cnplugins.com/devtool/stylish/">插件网</a>（不用翻墙）下载。</p> </li> <li> <p>在浏览器扩展程序页面启用 Stylish 插件后，前往 <a href="https://userstyles.org/styles/browse">Stylish 官网</a>下载模板。</p> </li> <li> <p>可以对已安装模板进行修改、禁用、删除、更新等。</p> </li> </ol> <p></p> <ol start="4"> <li>快捷启用、禁用、修改样式。</li> </ol> <p></p> <h2>三、常用模板推荐</h2> <h3>百度轻</h3> <blockquote> <p><a href="https://userstyles.org/styles/123858/baidu-lite">安装链接</a></p> </blockquote> <p>我用上 Stylish 后不再吐槽搜索界面丑、乱、广告多了，甚至有点喜欢了。</p> <p></p> <p>这套模板目前版本有一点点小瑕疵：“默认用户名颜色值为白色”。看着不顺眼，于是我改成了黑色，效果如上图。</p> <p></p> <h3>weibo_v6</h3> <blockquote> <p><a href="https://userstyles.org/styles/106272/weibo-v6">安装链接</a></p> </blockquote> <p>原来网页版微博也可以这么好看，全新布局，去广告，设计源自 “微博急简 WC”。效果很赞，最喜欢的样式（没有之一）。</p> <p></p> <h3>Flat_Zhihu v2.4.13</h3> <blockquote> <p><a href="https://userstyles.org/styles/108011/flat-zhihu-v2-4-13">安装链接</a></p> </blockquote> <p>字体大小、排版稍微调整，更合理，更好看。</p> <p></p> <h3>Taobao clean</h3> <blockquote> <p><a href="https://userstyles.org/styles/129300/taobao-clean-1-5-2">安装链接</a></p> </blockquote> <p>我只想安安静静地搜索，但是纯白色的背景，总觉得缺点什么...</p> <p></p> <h3>TieBa - Maverick</h3> <blockquote> <p><a href="https://userstyles.org/styles/124770/tieba-maverick">安装链接</a></p> </blockquote> <p>更现代化的贴吧页、隐藏广告和无用功能。</p> <p></p> <h3>Google Material</h3> <blockquote> <p><a href="https://userstyles.org/styles/109717/google-material">安装链接</a></p> </blockquote> <p>效果赞，看起来舒服，基于 Dribbble 设计师 <a href="https://dribbble.com/aureliensalomon">Aurélien Salomon</a> 的设计图。</p> <p></p> <h3>Dark is better for my eyes</h3> <blockquote> <p><a href="https://userstyles.org/styles/143766/dark-is-better-for-my-eyes-global-web-v1-12">安装链接</a></p> </blockquote> <p>黑色的背景，搭配淡蓝色字体，理论上适用于所有的网站，但它不会影响浏览器的菜单。</p> <p></p> <h3>更多</h3> <p>还有很多很多，可以去 <a href="https://userstyles.org/styles/browse">Stylish</a> 官网下载更多好看的模板，也可以自行 DIY！</p> <p></p> <h2>四、写在最后</h2> <p>无论你是否懂 CSS，Stylish 都能满足大部分用户的需求。可以帮你<strong>去广告</strong>、<strong>排版调整</strong>、<strong>全新布局</strong>等，给你的网页换「新皮肤」。</p> </article> <article> <h1>Google 新标签页打开搜索结果</h1> <p>Sat, 25 Feb 2023 13:52:11 GMT</p> <p></p> <h2>背景</h2> <p>使用 Google 作为搜索引擎，有个用得不顺手的地方：默认情况下，打开搜索条目是在「当前标签内」打开的。</p> <p>我更希望在新标签页打开。</p> <h2>原因</h2> <p>看了下，搜索条目上的 <code><a></code> 标签没有 <code>target="_blank"</code> 属性，因此不会用新标签页打开链接。</p> <p></p> <h2>解决方法</h2> <p>搜了下，有很多方法，安装 Chrome 插件之类的，但没必要...</p> <h3>方法一（不推荐）</h3> <p>按下 <strong>⌘ 键</strong>（Win 为 Ctrl 键），再用鼠标点击链接，也可在新标签页中打开。可每次都要点按，太麻烦了，故不推荐。</p> <blockquote> <p>原理：按下 ⌘ 键，可以使得 <code><a></code> 标签产生 <code><a target="_blank"></code> 的效果。</p> </blockquote> <h3>方法二</h3> <blockquote> <p>建议，先登录你的 Google 账号，再进行设置，以便于同步，否则有可能关掉浏览器重新打开设置被重置。</p> </blockquote> <p>步骤如图：</p> <p></p> <p></p> <p></p> <p></p> <blockquote> <p>PS：<strong>勾选上截图中的选项，确实是在“新标签页中”打开页面，而不是“新浏览器窗口”哦</strong>。英文选项是：Open each selected result in a new browser window</p> </blockquote> <p>刷新页面，可以看到 <code><a></code> 标签有 <code>target="_blank"</code> 属性了</p> <p></p> <p>The end.</p> </article> <article> <h1>Markdown 如何高亮反引号</h1> <p>Sat, 25 Feb 2023 13:50:55 GMT</p> <p></p> <p>在 Markdown 语法中，通常使用「反引号」（backquote，<code>`</code>）表示代码。它会产生高亮效果，语法形如 <code>`<some code>`</code>。</p> <p><strong>由于 Markdown 解析器中「反引号」都会被转义，那么如何显示反引号本身呢？</strong></p> <p>反引号的 HTML 转义字符为 <code>`</code>，但直接输入 <code>`</code> 字符或单个反引号，它们将会显示为（`），无高亮效果。</p> <blockquote> <p>若需高亮效果，需在外层连续使用「两个反引号」括起来，而且最好在两边使用「空格」隔开。</p> </blockquote> <p>以下效果为 <code>`Hello Markdown!`</code>：</p> <pre><code class="language-text">`` `Hello Markdown!` `` ✅ 有效 `` `Hello Markdown!``` ❌ 无效，末尾的三个反引号需空格隔开 </code></pre> <p>以下效果为 <code>`</code>：</p> <pre><code class="language-text">`` ` `` </code></pre> <p>The end.</p> </article> <article> <h1>一个短小却令人惊叹的 JavaScript 代码</h1> <p>Sat, 25 Feb 2023 13:50:19 GMT</p> <p></p> <p>简直是大呼惊叹，不得不佩服...</p> <pre><code class="language-js">try { something } catch (e) { window.location.href = `https://stackoverflow.com/search?q=[js] ${e.message}` } </code></pre> <p></p> <p></p> <p>面向 Stack Overflow Debug，简直了，帖子<a href="https://twitter.com/JordanHallWX/status/695744177557106688?s=20&t=50Jde_R7QN6iPXhF7xc73w">出处</a>，以上无营养，但值得一笑，哈哈~</p> <p>另外，可以看下这个知乎问题：<a href="https://www.zhihu.com/question/46943112">有哪些短小却令人惊叹的 JavaScript 代码？</a></p> </article> <article> <h1>你真的会使用数据库的索引吗？</h1> <p>Sat, 25 Feb 2023 13:49:31 GMT</p> <p></p> <blockquote> <p>转载自：<a href="https://developer.huawei.com/consumer/cn/forum/topic/0202699338499720961">你真的会使用数据库的索引吗？</a></p> </blockquote> <p>使用索引也很简单，然而，会使用索引是一回事，而深入理解索引原理又能恰到好处使用索引又是另一回事。</p> <h2>一、前言</h2> <p>无论是面试、还是日常工作中，或多或少都会使用或者听到别人谈论索引这个技术。</p> <p>然而很大一部份程序员对索引的了解仅限于到“加索引能使查询变快”这个概念为止。</p> <p>使用索引也很简单，然而，会使用索引是一回事，而深入理解索引原理又能恰到好处使用索引又是另一回事。</p> <p>这已经是两个相差甚远的技术层级了。</p> <h2>二、千万级数据表索引和无索引查询效率对比</h2> <p>现在有一个学生表 <code>student</code>，有 1000 万条数据</p> <p></p> <p>未加索引，查询 <code>class_id=2</code> 的学生信息的耗时：<code>SELECT \* FROM student WHERE class_id=2</code> 花费了 3.357 秒</p> <p></p> <p>加上索引，查询 <code>class_id=2</code> 的学生信息的耗时：<code>SELECT \* FROM student WHERE class_id=2</code> 花费了 0.017 秒</p> <p></p> <p>1000 万条数据下，两个查询的性能差了近 200 倍！！</p> <p>这个差距是特别大的！难怪需要加索引！！！</p> <h2>三、什么是索引</h2> <p>网上很多讲解索引的文章对索引的描述是这样的：</p> <p>索引就像书的目录，通过书的目录就可以准确的定位到书籍的具体的内容。</p> <p>这句话概述的非常正确！</p> <p>但说了跟没说一样，懂的人自然懂！不懂的人感觉懂了，但还是一脸蒙的状态！</p> <p>其实想要理解索引原理，必须清楚一种数据结构：</p> <p>「平衡树」(非二叉)，也就是 <code>B Tree</code> 或者 <code>B+Tree</code></p> <p>当然，有的数据库也使用哈希桶作用索引的数据结构，然而，主流的 RDBMS 都是把平衡树当做数据表默认的索引数据结构的。</p> <p>我们平时建表的时候都会为表加上主键，在某些关系数据库中，如果建表时不指定主键，数据库会拒绝建表的语句执行。</p> <p>事实上，一个加了主键的表，并不能被称之为“表”。一个没加主键的表，它的数据无序的放置在磁盘存储器上，一行一行的排列的很整齐。</p> <p>如果给表上了主键，那么表在磁盘上的存储结构就由整齐排列的结构转变成了树状结构，也就是上面说的“平衡树”结构，换句话说，就是整个表就变成了一个索引。</p> <p>没错，再说一遍，整个表变成了一个索引！</p> <p>也就是所谓的“聚集索引”。 <strong>这就是为什么一个表只能有一个主键，一个表只能有一个“聚集索引”，因为主键的作用就是把“表”的数据格式转换成“树（索引）”的格式。</strong></p> <p>未加索引时，之前执行的查询 SQL 会让数据库系统逐行的遍历整张表，对于每一行都要检查其 <code>class_id</code> 字段是否等于 <code>2</code>。因为我们要查找所有 <code>class_id</code> 为 <code>2</code> 的员工，所以当我们发现了一条 <code>class_id</code> 是 <code>2</code> 的记录后，并不能停止继续查找，因为可能还有 <code>class_id</code> 等于 <code>2</code> 的其他记录。</p> <p>这就意味着，对于表中的千万条记录，数据库每一条都要检查。这就是所谓的“全表扫描”（full table scan）</p> <p>而加上索引的最大作用就是加快查询速度，它能从根本上减少需要扫表的记录/行的数量。</p> <h2>四、Mysql 中的索引</h2> <p>在 MySQL 中，索引有两种分类方式：<strong>逻辑分类</strong>和<strong>物理分类</strong>。</p> <p>按照逻辑分类，索引可分为：</p> <ul> <li> <p>主键索引：一张表只能有一个主键索引，不允许重复、不允许为 NULL；</p> </li> <li> <p>唯一索引：数据列不允许重复，允许为 NULL 值，一张表可有多个唯一索引，但是一个唯一索引只能包含一列，比如身份证号码、卡号等都可以作为唯一索引；</p> </li> <li> <p>普通索引：一张表可以创建多个普通索引，一个普通索引可以包含多个字段，允许数据重复，允许 NULL 值插入；</p> </li> <li> <p>全文索引：让搜索关键词更高效的一种索引。</p> </li> </ul> <p>按照物理分类，索引可分为：</p> <ul> <li> <p>聚集索引：一般是表中的主键索引，如果表中没有显示指定主键，则会选择表中的第一个不允许为 NULL 的唯一索引，如果还是没有的话，就采用 Innodb 存储引擎为每行数据内置的 6 字节 ROWID 作为聚集索引。每张表只有一个聚集索引，因为聚集索引的键值的逻辑顺序决定了表中相应行的物理顺序。聚集索引在精确查找和范围查找方面有良好的性能表现（相比于普通索引和全表扫描），聚集索引就显得弥足珍贵，聚集索引选择还是要慎重的（一般不会让没有语义的自增 id 充当聚集索引）；</p> </li> <li> <p>非聚集索引：该索引中索引的逻辑顺序与磁盘上行的物理存储顺序不同（非主键的那一列），一个表中可以拥有多个非聚集索引。</p> </li> </ul> <p>在目前用的最多的 mysql 的 InnoDB 存储引擎中，是使用 B+Tree 索引方法来进行索引建立的。</p> <p>B+ 树索引是 B+ 树在数据库中的一种实现，是最常见也是数据库中使用最为频繁的一种索引。</p> <p>B+ 树中的 B 代表平衡（balance），而不是二叉（binary），因为 B+ 树是从最早的平衡二叉树演化而来的。先了解二叉查找树、平衡二叉树（AVLTree）和平衡多路查找树（B-Tree），B+ 树即由这些树逐步优化而来。</p> <blockquote> <p>具体的讲解可参考文章：<a href="https://www.cnblogs.com/wuzhenzhao/p/10341114.html">MySQL 索引机制（B+Tree）</a>。</p> </blockquote> <h2>五、索引的优缺点</h2> <p>优点：</p> <ul> <li>索引能够提高数据检索的效率，降低数据库的 IO 成本。</li> <li>通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性，创建唯一索引</li> <li>在使用分组和排序子句进行数据检索时，同样可以显著减少查询中分组和排序的时间</li> <li>加速两个表之间的连接，一般是在外键上创建索引</li> </ul> <p>缺点：</p> <ul> <li>创建索引和维护索引要耗费时间，这种时间随着数据量的增加而增加</li> <li>索引需要占物理空间，除了数据表占数据空间之外，每一个索引还要占一定的物理空间，如果要建立聚簇索引，那么需要的空间就会更大</li> <li>当对表中的数据进行增加、删除和修改的时候，索引也要动态的维护，降低了数据的维护速度</li> </ul> <h2>六、索引何时应该使用</h2> <p>需创建索引的情况：</p> <ul> <li>主键，自动建立唯一索引</li> <li>频繁作为查询的条件的字段</li> <li>查询中与其他表关联的字段存在外键关系</li> <li>查询中排序的字段，排序字段若通过索引去访问将大大提高排序的速度</li> <li>查询中统计或者分组字段</li> </ul> <p>避免创建索引的情况：</p> <ul> <li> <p>数据唯一性差的字段不要使用索引</p> <p>比如性别，只有两种可能数据。意味着索引的二叉树级别少，多是平级。这样的二叉树查找无异于全表扫描。</p> </li> <li> <p>频繁更新的字段不要使用索引</p> <p>比如登录次数，频繁变化导致索引也频繁变化，增大数据库工作量，降低效率。</p> </li> <li> <p>字段不在 where 语句出现时不要添加索引</p> <p>只有在 where 语句出现，mysql 才会去使用索引</p> </li> <li> <p>数据量少的表不要使用索引</p> <p>使用了改善也不大</p> </li> </ul> <h2>七、哪些 sql 能命中索引</h2> <ol> <li> <p>前导模糊查询不能使用索引，如 <code>name like '%涛'</code></p> </li> <li> <p><code>union</code>、<code>in</code>、<code>or</code> 可以命中索引，建议使用 <code>in</code>。</p> </li> <li> <p>负条件查询不能使用索引，可以优化为 <code>in</code> 查询，其中负条件有 <code>!=</code>、<code><></code>、<code>not in</code>、<code>not exists</code>、<code>not like</code> 等</p> </li> <li> <p>联合索引最左前缀原则，又叫最左侧查询，如果在 <code>(a, b, c)</code> 三个字段上建立联合索引，那么它能够加快 <code>a | (a, b) | (a, b, c)</code> 三组的查询速度。</p> </li> <li> <p>建立联合查询时，区分度最高的字段在最左边</p> </li> <li> <p>如果建立了<code>(a，b)</code>联合索引，就不必再单独建立 a 索引。同理，如果建立了<code>(a，b，c)</code>索引就不必再建立 <code>a，(a，b)</code> 索引</p> </li> <li> <p>存在非等号和等号混合判断条件时，在建索引时，要把等号条件的列前置</p> </li> <li> <p>范围列可以用到索引，但是范围列后面的列无法用到索引。</p> </li> </ol> <p>索引最多用于一个范围列，如果查询条件中有两个范围列则无法全用到索引。范围条件有：<code><</code>、<code><=</code>、<code>></code>、<code>>=</code>、<code>between</code> 等。</p> <ol start="9"> <li> <p>把计算放到业务层而不是数据库层。在字段上计算不能命中索引，</p> </li> <li> <p>强制类型转换会全表扫描，如果 <code>phone</code> 字段是 <code>varchar</code> 类型，则下面的 SQL 不能命中索引。<code>Select \* fromuser where phone=13800001234</code></p> </li> <li> <p>更新十分频繁、数据区分度不高的字段上不宜建立索引。</p> </li> </ol> <p>更新会变更 B+ 树，更新频繁的字段建立索引会大大降低数据库性能。</p> <p>“性别”这种区分度不太大的属性，建立索引是没有什么意义的，不能有效过滤数据，性能与全表扫描类似。</p> <p>一般区分度在 80%以上就可以建立索引。区分度可以使用 <code>count(distinct(列名))/count(\*)</code>来计算。</p> <ol start="12"> <li>利用覆盖索引来进行查询操作，避免回表。</li> </ol> <p>被查询的列，数据能从索引中取得，而不是通过定位符 <code>row-locator</code> 再到 <code>row</code> 上获取，即“被查询列要被所建的索引覆盖”，这能够加速度查询。</p> <ol start="13"> <li> <p>建立索引的列不能为 <code>null</code>，使用 <code>not null</code> 约束及默认值</p> </li> <li> <p>利用延迟关联或者子查询优化超多分页场景，</p> </li> </ol> <p>MySQL 并不是跳过 <code>offset</code> 行，而是取 <code>offset+N</code> 行，然后放弃前 <code>offset</code> 行，返回 <code>N</code> 行，那当 <code>offset</code> 特别大的时候，效率非常低下，要么控制返回的总数，要么对超过特定阈值的页进行 SQL 改写。</p> <ol start="15"> <li> <p>业务上唯一特性的字段，即使是多个字段的组合，也必须建成唯一索引。</p> </li> <li> <p>超过三个表最好不要用 <code>join</code>，需要 <code>join</code> 的字段，数据类型必须一致，多表关联查询时，保证被关联的字段需要有索引。</p> </li> <li> <p>如果明确知道查询结果只要一条，<code>limit 1</code> 能够提高效率，比如验证登录的时候。</p> </li> <li> <p>Select 语句务必指明字段名称</p> </li> <li> <p>如果排序字段没有用到索引，就尽量少排序</p> </li> <li> <p>尽量用 <code>union all</code> 代替 <code>union</code>。<code>union</code> 需要将集合合并后在进行唯一性过滤操作，这会涉及到排序，大量的 CPU 运算，加大资源消耗及延迟，当然，使用 <code>union all</code> 的前提条件是两个结果集没有重复数据。</p> </li> </ol> <h2>八、总结</h2> <p>索引是非常重要的技术！</p> <p>但每建立一个索引，实际上都需要在硬盘上开辟一块空间用于存储这个索引所需要的数据结构（虽然表述不太准确但是是这个意思），因此不建议对太长的字段建立索引。</p> <p>而且建立的索引并不是越多越好，因为索引虽然能够提高查询效率，但是会大大得影响插入、删除和修改的效率，因为每一次数据的更新都会牵涉到对索引的修改。</p> <p>综上所述，往往在对于大量数据的插入的情况的时候，我们需要先删除掉数据表的索引，等插入完毕后重新建立索引，这样才能最大限度地保证数据库的效率！</p> </article> </main></body></html>

Frankie's Blog

Cursor: Model not available

背景

解决方法

将剪贴板的图片保存至本地

Google Antigravity 登录成功无法跳转的解决方法

看，有架飞机 ✈️

使用 Raycast 搜索 Confluence 或 Jira

前言

背景

开始之前

使用指南

截图

其他

浅谈 CSS 3D Transform 与 Perspective

前言

从数学开始

坐标系

投影

CSS 中 2D 与 3D 的区别

perspective 与 translateZ

TS Check 与 JSDoc

参考链接

JS 类型检查

JSDoc

示例

断言

导入

函数

GIF 图片优化

背景

GIF 文件

相关工具

优化方向

1. 降低分辨率

2. 移除无用的扩展内容

3. 减色

3.1 移除本地颜色表

3.2 减少颜色表数量

4. 透明度存储

5. 有损压缩

6. 抽帧

直接抽帧 vs 先还原透明度再抽帧

重新分配 Delay Time（废弃）

小结

快速抽帧技巧

优化脚本

References

React Query 小记

Query Key

顺序

结构化

Select

References

在 Parallels Desktop 中使用 Node.js 遇到的问题

访问 macOS 文件

corepack enable 没有操作权限

问题二

问题三

问题四

在 Parallels Desktop 中通过 ISO 镜像文件升级 Windows

背景

方法

解决 Windows 启动错误代码 0x0000605

前情提要

失败的尝试

成功解决

记十月：珠海 - 澳门三日

简要

出发之前

浅谈 TypeScript 泛型

基础语法

体操演练场

为什么函数返回布尔类型不会触发类型收窄？

TypeScript 中 Object、object、{} 之间的区别

写在前面

迷之写法 🤯

object（小 o）

Object（大 O）

空对象 {}