本文我们将解释 V8 内部如何处理 JavaScript 属性（properties）。从 JavaScript 的角度来看属性只有少数的区别。JavaScript 对象通常跟字典（dictionaris）差不多，以字符串为键，任意对象为值。尽管规范确实对迭代过程中的整数索引属性与其他属性作了区分，但除此以外，不同属性表现基本是一致的，不管是不是整数索引。

然而，在底层 V8 的确依赖了一些不同的属性表示方式，这是出于性能和内存考虑的。本文我们将解释 V8 如何在提供快属性访问的同时支持动态添加属性。理解属性如何工作对解释 V8 内联缓存之类的优化原理是必不可少的。

本文解释了整数索引与命名属性的不同处理方式。随后我们展示了 V8 如何在添加命名属性同时维护隐藏类（HiddenClasses），以提供快速的方式识别一个对象的形状（shape）。接着我们继续深入了解命名属性是如何根据使用方式来进行优化，以支持快速访问和快速修改。最后部分我们详细介绍了 V8 如何处理整数索引属性或数组索引。

命名属性与元素

首先我们来分析一个简单的对象 {a: "foo", b: "bar"}。这个对象有两个命名属性，"a" 和 "b"，没有任何整数索引作属性名。数组索引属性（array-indexed properties），常叫元素（elements），在数组中非常重要。比如数组 ["foo", "bar"]有两个数组索引属性：0 与值 "foo" ，和 1 与值 "bar"。 这是 V8 如何处理属性的第一个主要区别。

下图展示了一个基本 JavaScript 对象在内存中是什么样的。

元素和属性被保存在两个独立的数据结构中。两者的使用方式通常不一样，故这能让添加和访问属性或元素更加高效。

元素主要被用在各种 Array.prototype 方法中，如 pop 或者 slice。考虑到这些函数都是连续地访问属性，V8 内部还将它们表示为简单的数组，大多数情况下都是如此。本文后面还会解释到有时我们如何切换到基于稀疏字典的表示来节省内存。

命名属性也是通过类似的方式存在另外的数组中。但是，跟元素不同，我们不能简单地通过键来推断出它们在属性数组中的位置，我们需要一些额外的元数据。在 V8 中每个 JavaScript 对象都关联了一个隐藏类（HiddenClasses）。隐藏类保存了对象的形状信息，以及从属性名称到属性索引的映射。复杂的使用情况下我们有时会用字典来存属性而不是简单的数组。我们会在专门的部分再作详细地解释。

本节要点:

• 数组索引属性被保存在独立的元素存储中。
• 命名属性被保存在属性存储中。
• 元素和属性可以是数组或者字典。
• 每个 JavaScript 对象都有相应的隐藏类来记录该对象的形状信息。

隐藏类和描述符数组

在解释了元素和命名属性的一般区别之后，我们需要看看隐藏类在 V8 中是如何工作的。隐藏类保存了与对象相关的元信息，包括对象上的属性数和对象原型的引用。隐藏类在概念上与典型面向对象编程语言中的类相似。但是，在基于原型的语言（如 JavaScript）中，通常不可能预先知道类。因此，在这种情况下，V8 的隐藏类是动态创建的，并随着对象的变化而动态更新。隐藏类充当了对象形状的标识符，因此是 V8 优化编译器和内联缓存非常重要的组成部分。比如优化编译器可以直接内联属性访问，如果它可以通过隐藏类来确保对象结构是兼容的。

我们来看看隐藏类的重要部分。

在 V8 中，JavaScript 对象的第一个字段指向隐藏类（事实上，任何在 V8 堆上且由垃圾收集器管理的对象都是这种情况）。在属性中，最重要的信息是第三位字段，它保存了属性数以及描述符数组的指针。描述符数组包含了有关命名属性的信息，例如名称本身以及值保存的位置。注意我们不会在此处跟踪整数索引属性，故描述符数组中没有相关条目。

对于隐藏类的基本判断标准是，具有相同结构的对象（如属性命名相同且顺序相同）共享相同的隐藏类。为了实现这一点，对象在添加属性后我们将使用不同的隐藏类。在下面的示例中，我们从一个空对象开始并添加三个命名属性。

每次添加新属性时，对象的隐藏类都会被更改。在引擎的底层，V8 创建了一个将隐藏类链接在一起的转换树（transiton tree）。当你向一个空对象添加属性（如“a”）时，V8 会知道要采用哪个隐藏类。如果以相同的顺序添加相同的属性，此转换树会确保最后得到的是相同的最终隐藏类。以下示例显示，即使我们在其间添加了简单的索引属性，我们还是得到了相同的转换树。

然而，如果我们创建一个添加了不同属性的新对象，如属性 "d"，则 V8 会为新的隐藏类创建一个单独的分支。

本节要点:

• 具有相同结构的对象（相同顺序相同属性）具有相同的隐藏类。
• 默认情况下，每添加新的命名属性都会导致一个新的隐藏类被创建。
• 添加数组索引属性不会创建新的隐藏类。

三种不同的命名属性

在概述了 V8 如何使用隐藏类跟踪对象的形状之后，让我们深入了解这些属性的实际存储方式。正如上面介绍中所解释的，属性有两种基本类型：命名和索引。以下部分先介绍命名属性。

一个简单的对象如 {a：1，b：2} 在 V8 中可以有多种内部表示。虽然 JavaScript 对象在外部看来或多或少类似于简单的字典，但 V8 试图避免使用字典，因为它们妨碍了某些优化，如内联缓存，我们会在其它文章中再作解释。

对象与普通属性： V8 支持所谓的对象内属性（in-object properties），指这些属性直接存储在对象本身上。它们在 V8 可用的属性中是最快的，因为它们不需要间接层就可以访问。对象内属性的数量由对象的初始大小预先确定。如果添加的属性超出了对象分配的空间，则它们将被保存在属性存储中。属性存储多了一层间接层，但可以自由地扩容。

快属性与慢属性： 下一个重要区别是快属性和慢属性。通常，我们将保存在线性属性存储中的属性定义为“快”。只需通过属性存储中的索引即可访问快属性。要从属性名称获取属性存储中的实际位置，我们必须查看隐藏类上的描述符数组，如前面所述。

但是，如果从对象中添加和删除大量属性，则可能会产生大量时间和内存开销来维护描述符数组和隐藏类。因此 V8 还支持所谓的慢属性。带慢属性的对象内部会有独立的词典作为属性存储。所有的属性元信息不再保存在隐藏类的描述符数组中，而是直接保存在属性字典中。因此无需更新隐藏类即可添加和删除属性。由于内联缓存不适用于字典属性，故后者通常比快属性慢。

本节要点:

• 有三种不同的命名属性类型：对象内属性、快属性和慢属性（字典）。
  1. 对象属性直接保存在对象本身上，并提供最快的访问。
  2. 快属性保存在属性存储中，所有元信息都存储在隐藏类的描述符数组中。
  3. 慢属性保存在内部独立的属性字典中，不再通过隐藏类共享元信息。
• 慢属性允许高效的属性删除和添加，但访问速度比其它两种类型慢。

元素与数组索引属性

到目前为止，我们一直在讨论命名属性，而忽略了常用于数组的整数索引属性。处理整数索引属性并不比命名属性简单。尽管所有索引属性都是在元素存储中单独保存，但不同类型的元素也有 20 种！

挤满的还是带空隙的元素： V8 做的第一个主要区分看是元素后备存储（elements backing store）是挤满的（packed）还是带空隙的（holey）。当索引元素被删除，又或者如，没有被定义，后备存储中就会出现空隙。如一个简单的例子 [1,,3]，其中的第二个条目就是一个空隙。以下示例说明了此问题：

1
2
3
4
5
6
7
8
9
10
11

const o = ['a', 'b', 'c'];
console.log(o[1]);          // 打印 'b'.

delete o[1];                // 在元素存储中引入空隙
console.log(o[1]);          // 打印 'undefined'，属性 1 不存在
o.__proto__ = {1: 'B'};     // 在原型中定义属性 1

console.log(o[0]);          // 打印 'a'.
console.log(o[1]);          // 打印 'B'.
console.log(o[2]);          // 打印 'c'.
console.log(o[3]);          // 打印 undefined

简而言之，如果接收方（receiver）上没有发现属性，我们就必须沿着原型链继续查找。鉴于元素是内部独立的（比如，我们不会在隐藏类上保存有关当前索引属性的信息），我们需要一个特殊值，称为 _hole，来标记不存在的属性。这对于数组函数的性能是至关重要的。如果我们知道没有空隙，即元素存储是挤满的，我们就可以直接在当前域执行操作而无需沿着原型链做昂贵的查找。

快元素还是字典元素： V8 对元素做的第二个主要区分是看它们是在快速模式还是字典模式。快元素是简单的虚拟机内部数组，其中的属性索引映射到元素存储中的索引。然而，这种简单的表示对于非常大的稀疏/带空隙的数组而言是相当浪费的，其中只有很少的条目被占用。在这种情况下，我们使用基于字典的表示来节省内存，但代价是访问速度稍慢：

1
2

const sparseArray = [];
sparseArray[9999] = 'foo'; // 创建了一个基于字典元素的数组

在这个例子中，开辟一个包含一万条目的完整数组会相当浪费。相反，V8 会创建一个字典来存储键-值-描述符三元组。在这个例子中，键是 '9999'，值是 'foo'，默认描述符被使用。由于我们没有办法在隐藏类上保存描述符的详细信息，故只要你使用了自定义描述符去定义索引属性，V8 就会采用慢元素：

1
2
3
4
5

const array = [];
Object.defineProperty(array, 0, {value: 'fixed' configurable: false});
console.log(array[0]);      // 打印 'fixed'。
array[0] = 'other value';   // 不能重写索引 0。
console.log(array[0]);      // 依然打印 'fixed'。

在这个例子中，我们在数组上添加了一个不可配置的属性。该信息保存在慢元素字典三元组的描述符部分中。需要注意的是，在带有慢元素的对象上数组函数的执行速度会慢很多。

小整数和双浮点元素： 对于快元素，V8 中还有另一个重要的区分。比如一个常见的例子，只在一个数组中放整数，那么垃圾回收器就不必查看数组，因为整数被直接编码为所谓的小整数（Smis）。另一个特例是只包含双浮点数（double）的数组。与小整数不同，浮点数通常表示为占据多个字（word）的完整对象。然而，在 V8 中，纯双浮点数的数组会使用原生双精度浮点数来保存，以减少内存和性能开销。以下例子列出了小整数和双浮点元素的四个示例：

1
2
3
4

const a1 = [1,   2, 3];  // 挤满小整数
const a2 = [1,    , 3];  // 带空隙小整数，a2[1] 从原型中读取
const b1 = [1.1, 2, 3];  // 挤满双浮点
const b2 = [1.1,  , 3];  // 带空隙双浮点，b2[1] 从原型中读取

特殊元素： 到目前为止，我们已经涵盖了 20 种不同元素中的 7 种。为简单起见，我们排除了 9 种 TypedArrays 相关的元素类型，2 种 String 包装器相关的，还有 2 种参数对象相关的特殊类型。

元素访问器： 正如你所想的，我们并不太热衷于在 C++ 中给元素种类一个个对应地写 20 多遍数组函数。这里就需要一些 C++ 魔术。我们不是一遍又一遍地实现数组函数，而是构建了元素访问器 ElementsAccessor，这样我们大多情况下只需要实现简单的函数来从后备存储中访问元素。ElementsAccessor依赖于 CRTP 来创建每个数组函数的专用版本。因此，如果在数组上调用类似 slice 的方法，V8 内部会调用 C++ 编写的内置函数，并通过 ElementsAccessor 调度到函数的专用版本：

本节要点:

• 索引属性和元素有快速和字典模式。
• 快属性可以是挤满的（packed），也可以包含空隙（holes）表示索引属性被删除。
• 不同类型的元素根据其内容专门优化，以加速数组函数并减少垃圾回收器开销。

了解属性如何工作是 V8 中许多优化的关键。对于 JavaScript 开发者来说，许多这样的内部决策都不是直接可见的，但它们解释了为什么某些代码模式比其它的更快。更改属性或元素类型通常会导致 V8 创建一个不同的隐藏类，这可能导致类型污染阻止 V8 生成最优代码。请继续关注有关 V8 虚拟机内部工作原理的更多文章。

其实 commit message 的作用远不止如此，经过简单的配置便可无痛成为代码提交的文明公民。

Commit Message 的作用

最起码的一点，项目的提交历史是其他人（包括未来的自己）了解项目的一个重要途径。好的提交历史可以方便其他人参与进来，也可以方便自己快速定位问题。

此外，提交信息还可以用来触发 CI 构建，自动生成 CHANGELOG ，版本自动语义化提升…… 只需要一点点配置就可以干这么多，真是懒人必备。

选择风格

跟 Code Style 一样，Commit Message 也有各种风格。如果没什么特殊癖好推荐用基于 Angular ， 后独立开来的 Conventional Commits 风格。 它也基本是各个工具的默认配置，所以搭配起来不需要折腾。

才不要又记什么规则

虽然规则不多，但不一定能随时记住，特别是对新人，必须要有友好的方式提交。

commitizen 是一个很好的选择，通过命令行回答几个问题即可填完信息，减轻了记忆负担。 它是一个通用的工具，通过插件方式支持各种风格。我们选择 Conventional 需要安装 cz-conventional-changelog 。

1

npm install --save-dev commitizen cz-conventional-changelog

然后配置 package.json 就可以通过 npm run commit 提交。

1
2
3
4
5

{
  "scripts": {
    "commit": "git-cz"
  }
}

另外 VSCode 用户也可以用 vscode-commitizen ， 通过 ctrl+shift+p 或 command+shift+p 提交。

Lint 一 Lint 万无一失

没错，Commit Message 也有 Linter ，可对 Commit Message 进行检验，杜绝打字手残和浑水摸鱼。

这里用 commitlint 配合 husky 实现自动检测。

commitlint 也是通用的工具，需要同时安装风格配置。 husky 可以方便使用 git hooks ，在 commit 时触发 commitlint 。

1

npm install --save-dev @commitlint/cli @commitlint/config-conventional husky

项目根新建 commitlint.config.js

1
2
3

module.exports = {
  extends: ['@commitlint/config-conventional']
}

配置 package.json

1
2
3
4
5
6
7

{
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
}

自动更新

最后安装 standard-version 实现自动生成 CHANGELOG 和版本自动语义化提升。

1

npm install --save-dev standard-version

配置 package.json

1
2
3
4
5

{
  "scripts": {
    "release": "standard-version"
  }
}

第一次发布时可以用以下命令重置

1

npm run release -- --first-release

以后直接 npm run release 即可。

也可以手动指定版本：

1
2
3
4

# npm run script
npm run release -- --release-as minor
# Or
npm run release -- --release-as 1.1.0

小红花贴起来

在 README 中加入小徽章可方便其他人了解风格。

1
2

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?maxAge=2592000)](http://commitizen.github.io/cz-cli/)
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-brightgreen.svg?maxAge=2592000)](https://conventionalcommits.org)

完整配置

安装

1

npm install --save-dev commitizen cz-conventional-changelog @commitlint/cli @commitlint/config-conventional husky standard-version

配置 package.json

1
2
3
4
5
6
7
8
9
10
11

{
  "scripts": {
    "commit": "git-cz",
    "release": "standard-version"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
}

项目根新建 commitlint.config.js

1
2
3

module.exports = {
  extends: ['@commitlint/config-conventional']
}

【完】

1. <iframe> 内外事件不通。
2. <iframe> 内外环境不一样，变量不能共用，需要 postMessage 交流。
3. Vue 组件必须要有一个根元素，且 v-if 隐藏之后元素原地还是会留下注释标记。在浏览器审查元素时看起来不太干净。

当然这个不影响呈现效果，所以当时也不怎么纠结了。然而后来在逛 React 文档的时候，意外发现了 Portal 这个神器。

Portal 精妙的地方在于从 React 的角度（也是代码作者的角度），组件可以保持原来的结构，但实际可以渲染到任意地方（甚至是其它窗口！）。

更令人拍案叫绝的是， SyntheticEvent 也是抽象到 React 层的，所以组件事件捕获冒泡全正常使用。

对于 <iframe> 需要做些小改变，有人发现，只需要把 <body> 组件上所有事件 null 掉即可。

这样就方便地解决了前两个小痛点了！

最后一点的解决方式是在组件不显示的时候将 Portal 的载体元素 remove 掉，显示时再 appendChild 回去。甚至配合动画也非常简单，在动画结束时 remove 即可。

最后如果对实现感兴趣的话可以参考：

• 封装的 PortalFrame 组件。
• 在 PortalFrame 外部监听内部事件。
• 与动画组件配合移除载体元素。

值得一提的是，也有人吸取灵感实现了 Vue 版的 Portal。然而这个功能没有得到官方青睐，只是社区实现。由于没有内核权限，相比于 React Portal 这仅是部分实现。

初尝试

这个需求其实很早就被人提 issue 了，当时做了一番搜索，最后尝试了 document.caretPositionFromPoint / document.caretRangeFromPoint ，效果不太理想。

如果看 mdn 给的例子，就会发现，它是遍历每个元素添加事件的。这么做的原因是当使用这个方法的时候，如果鼠标指向元素空白的地方，它会就近取位置。所以例子通过给粒度更细的元素绑定来避免这个问题。然而实际上这么做还是不足够的，一个段落末行也许只有几个字符，这时空出接近一行，也会有上面的问题。

所以当时就搁置了这个功能。

灵感

直到最近，看到一个同类的开源划词翻译扩展 FairyDict 实现了取词功能，遍观摩了一番源码。

它的原理是深度优先递归遍历这个元素以及其子元素，通过不断试探选中区域，并与鼠标座标对比来定位确切位置。

有没有发现问题，这个遍历过程不正是上面 document.caretPositionFromPoint 干的事么，那么我们只需要最后量一下鼠标是否在取词范围中即可。

原理

现在总结一下原理：

1. 通过 document.caretPositionFromPoint 获得鼠标所指最接近的元素以及文本位置 offset。
2. 找出 offset 最接近的单词。
3. 通过 Range 获得部分文本（单词）的尺寸和座标。
4. 验证鼠标此时在单词区域范围中。
5. 选中这个单词。Selection 支持直接添加 Range 。

实现

按原理来实现就很简单了。本文上按 alt 可体验取词效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

/**
 * @param {MouseEvent} e
 * @returns {void}
 */
function selectCursorWord (e) {
  const x = e.clientX
  const y = e.clientY

  let offsetNode
  let offset

  const sel = window.getSelection()
  sel.removeAllRanges()

  if (document['caretPositionFromPoint']) {
    const pos = document['caretPositionFromPoint'](x, y)
    if (!pos) { return }
    offsetNode = pos.offsetNode
    offset = pos.offset
  } else if (document['caretRangeFromPoint']) {
    const pos = document['caretRangeFromPoint'](x, y)
    if (!pos) { return }
    offsetNode = pos.startContainer
    offset = pos.startOffset
  } else {
    return
  }

  if (offsetNode.nodeType === Node.TEXT_NODE) {
    const textNode = offsetNode
    const content = textNode.data
    const head = (content.slice(0, offset).match(/[-_a-z]+$/i) || [''])[0]
    const tail = (content.slice(offset).match(/^([-_a-z]+|[\u4e00-\u9fa5])/i) || [''])[0]
    if (head.length <= 0 && tail.length <= 0) {
      return
    }

    const range = document.createRange()
    range.setStart(textNode, offset - head.length)
    range.setEnd(textNode, offset + tail.length)
    const rangeRect = range.getBoundingClientRect()

    if (rangeRect.left <= x &&
        rangeRect.right >= x &&
        rangeRect.top <= y &&
        rangeRect.bottom >= y
    ) {
      sel.addRange(range)
    }

    range.detach()
  }
}

交互

最后，如果要提供功能开关或者设置不同按键的话，简单的处理可以参考 FairyDict 让事件处理空转。但对于 mousemove 这类比较频繁的事件，在关闭的时候取消事件监听可能更好一些。这里 Saladict 借助 RxJS 来处理复杂的逻辑，可参考源码。

基础

先看官方给出的简单例子：

1
2
3

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

加个 DataProvider 的简单实现，

1
2
3
4
5
6
7
8
9
10
11

class DataProvider extends React.Component {
  state = { target: '' }
  handleMouseMove = e => this.setState({ target: e.target.title })
  render() {
    return (
      <div style={{ height: '1vh' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    )
  }
}

这里是将一个返回 React 元素的函数传给 DataProvider 的 props.render，DataProvider render 的时候调用 this.props.render(this.state) 渲染这个函数。

这也是“render props”名字的来源，而现在更流行的是“children props”，虽然依然沿用 render props 的说法。

Children props 即将 render 换为 children ，同时 JSX 中不需要显式写 chidlren ，所以成了这个样子：

1
2
3

<DataProvider>
  {data => <h1>Hello {data.target}</h1>}
</DataProvider>

子组件通过 render props 传进父组件渲染，让父组件不再依赖子组件，达到重用父组件的目的，即依赖反转。

Render Props 与 SFC

前面提到的“返回 React 元素的函数”，一看是不是跟无状态函数组件（Stateless Fuctional Component）的签名很接近。这么看：

1
2
3

<DataProvider>
  {props => <h1>Hello {props.target}</h1>}
</DataProvider>

但不一样的地方在于 render props 只是一个普通函数，是直接函数调用。且 inline render props 可以跳过 DataProvider 直接访问其它父组件：

1
2
3
4
5

const App = props => (
  <DataProvider>
    {data => <h1>Hello {data.target} {props.target}</h1>}
  </DataProvider>
)

这就造成了 DataProvider 不能优化为纯组件。这也是非常不好的习惯，一个解决方式是人为限制 render props 为 SFC 从而让只有一个数据来源。理想很美好，但没法强制所有人这么干。

Render Props 与 HOC

如果将 render props 限制为传入子组件，其实很容易联想到高阶组件（Higher-Order Components）。高阶组件是一个函数，接受一个组件，返回新的组件。

所以可以用高阶组件包装起来，并隐藏 render props 接口。

1
2
3
4
5
6
7

const withData = Base => () => <DataProvider>{Base}</DataProvider>

const BaseTarget = props => <h1>Hello {props.target}</h1>

const EnhancedComponent = withData(BaseTarget)

const App = () => <EnhancedComponent />

这样就限制了 DataProvider 的使用方式。如果需要多方数据，可以修改 DataProvider 为 this.props.render({ ...this.props, ...this.state }) 将其它数据作为 props 传入 DataProvider。

1
2
3
4
5
6
7

const withData = Base => props => <DataProvider {...props}>{Base}</DataProvider>

const BaseTarget = props => <h1>Hello {props.target}</h1>

const EnhancedComponent = withData(BaseTarget)

const App = props => <EnhancedComponent {...props} />

「完」

为什么需要 RxJS

RxJS 属于响应式编程，其思想是将时间看作数组，随着时间发生的事件被看作是数组的项，然后以操作数组的方式变换事件。其强大的地方在于站在四维的角度看问题，这就像是拥有了上帝视野。

在处理事件之间的关系时，对于传统方式，我们需要设置各种状态变量来记录这些关系，比如对点击 Shift 键进行计数，需要手动设置一个 let shiftPressCount: number，如果需要每 600ms 清零，又需要添加计时的状态，这些状态都需要手动维护，当它们变得复杂和庞大的时候我们很快就会乱了，因为没有明确的方向，不好判断这些状态同步了没有。

而这正是 RxJS 发光发热的地方。因为从四维的角度看，这些状态就不是单个变量，而是一系列变量。比如对按键计数：

1
2
3
4

Rx.Observable.fromEvent(document, 'keydown')
  .filter(({ key }) => key === 'Shift')
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`按了 ${count} 遍 Shift 键`))

相信有使用过数组方法的人第一次看也大概能知道这里干了些什么（把 scan 看作是会输出中间结果的 reduce）。中间状态都在变换的过程中被封装起来，每一次事件的 count 都是独立的，不容易乱，也使得可以用纯函数去表达状态的变换。链式调用（或者 RxJS5 的 pipeable）在一定程度上限制了状态数据的流动方向，增加了可预测性，更加容易理解。

理解 RxJS

基本概念

使用 RxJS 前先理解它要做什么，这里引入了两个概念，Producer （生产者）和 Observer （观察者）。

先看一个熟悉的例子：

1
2
3

document.addEventListener('click', function handler (e) {
  console.log(e.clientX)
})

这里的 Producer 是 DOM 事件机制，会不定期产出 MouseEvent 事件。Observer 就是 handler，对事件作出反应。

再看前面的例子：

1
2
3
4

Rx.Observable.fromEvent(document, 'keydown')
  .filter(({ key }) => key === 'Shift')
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`按了 ${count} 遍 Shift 键`))

Producer 还是 DOM 事件机制，Observer 是 subscribe 的参数。所以可以理解 RxJS 为连接 Producer 和 Observer 的纽带。

于是这个纽带的成分叫 Observable （可被观察的）就不难理解了。Observable 就是由事件组成的四维数组。RxJS 将 Producer 转换为 Observable，然后对 Observable 进行各种变换，最后再交给 Observer。

对 Observable 进行变换的操作符叫做 Operator，比如上面的 filter 和 'scan'，它们输入 Observable 再输出新的 Observable。RxJS 有巨量的 Operators ，这也是学习 RxJS 的第二难点，我已经分类整理了六十多个，整理完会再写一篇文章介绍，敬请关注。

创建 Observable

RxJS 封装了许多有用的方法来将 Producer 转换为 Observable，比如 fromEvent、fromPromise，但其根本是一个叫create 的方法。

1
2
3
4
5
6
7
8
9

var observable = Rx.Observable.create(observer => {
  observer.next(0)
  observer.next(1)
  observer.next(2)
  setTimeout(() => {
    observer.next(3)
    observer.complete()
  }, 1000)
})

这其实跟 Promise 的思路很像，Promise 只能 resolve 一遍，但这里可以 observer.next 很多个值（事件），最后还能 complete（不是必须的，可以有无限事件）。官方把这个类 resolve 的参数也叫做 observer，因为 observer.next(0) 的意思是“Subscribe 我的那个 Observer 接下来会获得这个值0”。我认为这是一个不好的决定，重名对于新人太容易混淆了，这个其实可以从另一个角度看，把它叫做 producer，“产生”了下个值。

Subscribe 不是订阅者模式

一个常见的误解是认为 RxJS 就是 addEventListener 那样的订阅者模式，subscribe 这个方法名也很有误导性。然而两者并不是一回事，订阅者模式会维护一个订阅者列表，事件来了就一一调用列表上的每个订阅者传递通知。但 RxJS 并没有这么一个列表，它就是一个函数，可以跟 Promise 类比，Promise 的 executor 是在 new Promise(executor) 时马上执行的，而 RxJSRx.Observable.create(observer) 的 observer 则是在每次执行 subscribe 后都调用一遍，即每次 subscribe 的 Observables 都是独立的，都会重新走一遍整个流程。

这个时候你也许会想，这样每次都完整调用一遍岂不是很浪费性能？没错，如果需要多次 subscribe 同个 Producer 这么做会比较浪费，但如果只是 subscribe 一遍，维护一个订阅者列表也没有必要。所以 RxJS 引入了 Hot 和 Cold Observable 的概念。

Hot & Cold

Observable 冷热概念其实就是看 Producer 的创建受不受 RxJS 控制。

前面我们知道，create 会将 Producer 转化为 Observable 。如果这个 Producer 也是在 create 回调里面产生的，那么就是 Cold ，因为 Producer 还不存在，只有 subscribe 了之后才会被创建。

但如果 Producer 在之前就创建了，比如 DOM 事件，create 回调里仅仅是对 Producer 添加 listener，那么这就叫做 Hot ，因为不需要 subscribe 来启动 Producer 。

只有 Hot Observable 才可以实现订阅者模式。可以通过一个特殊的 Observable 叫 Subject 来创建，其内部会维护一个订阅者列表。通过 share方法可以将一个 Cold 的 Observable 转换为 Hot 。原理是内部用 Subject subscribe 上流的 Observable 实现转接。

使用 RxJS

理解了基本概念之后就可以直接开写了，本身没有什么魔法，参考一下 api 依样画葫芦即可。

使用 RxJS 最常见的问题是不知道什么时候该用哪个 Operator 。这其实跟数组操作是一样的，RxJS 提供了数量庞大的 Operators ，基本覆盖了各种可以想到的数组操作，建议先从 JavaScript 常见的数组操作开始，如 map、filter、scan（也有 reduce ，但这个通常不是我们想要的，我们一般不需要在 complete 之后才输出结果，而是每次都输出阶段性的结果）。

多翻官方文档，常用的 Operators 都描述得非常详细，有弹珠图（Marble Graph）和一句话总结；缺点是措辞有时可能会比较抽象，不是那么好理解。

另外就是第三方的 learnrxjs 和 Rxjs 5 ultimate，按作者的思路组织，更通俗易懂些，可以作为补充理解；缺点是可能跟官方不同步，以及不全。

我整理完也会再写一篇文章介绍，敬请期待。

• 可访问性 Accessibility
  为障碍用户提供同等用户体验。使障碍用户能对产品感知、理解、定位和交互，并能平等地参与贡献。

• 可用性 Usability
  可用性和用户体验设计（User Experience Design）是为了让目标用户使用产品高效、满意地达到特定目标。

• 包容性 Inclusion
  包容性设计（Inclusive Design）、通用设计（Universal Design）和人性化设计（Design For All）尽可能让每个人都能容易地用上产品。包容性要解决的问题非常广，包括软、硬件的可访问性和质量、互联网连通性、计算机文化和技能、经济状况、教育、地理位置、语言、以及年龄和残障。

体验屏幕阅读

要解决问题首先得知道问题是怎样的，体验屏幕阅读器：

• ChromeVox ，Chrome 扩展
• NVDA ，开源跨平台
• VoiceOver (MacOS)

工具

• 校验
  • Chrome 自带 Audits
  • aXe 扩展、命令行工具等。
  • webaim.org
• 调试
  • Chrome 自带实验性 Accessibility Inspector chrome://flags/#enable-devtools-experiments
  • Web Developer 扩展
  • Accessibility Developer Tools 扩展
• 颜色
  • Color-Oracle 模拟色盲，开源跨平台
  • Lea Verous Contrast Ratio
  • WCAG Color Contrast Analyzer

参考规范

有什么问题查规范准没错。在自行实现支持 ARIA 的元素时很有用。

• Web Content Accessibility Guidelines (WCAG) 2.0
• Accessible Rich Internet Applications (WAI-ARIA)
• HTML 5.1 2nd Edition

其它资料

文章

• Accessibility, Usability, and Inclusion: Related Aspects of a Web for All
• Accessibility - W3C
• Web Fundamentals - Accessibility
• Common idioms without dedicated elements
• 本文原文 Web 可访问性整理

视频

• Google 的 A11ycasts
• Accessibility by Thomas Bradley
• Pragmatic Accessibility: A How-To Guide for Teams (Google I/O '17)

课程

• 官方教程 Web Accessibility Tutorials
• Web Accessibility

Tab

对于纯键盘使用者来说， Tab 键承担了重要责任。

Tab 顺序

要点： Tab 顺序是按照 DOM 结构，而不是 CSSOM 结构。

所以通过 CSS 将元素提前（如 flex order）并不会影响 tab 顺序。在排版的时候需要考虑。

其它元素

Tab 默认只会识别部分元素，如果需要让其它元素也被识别，加上 tabindex="0" 属性。

不鼓励使用大于 0 的其它数字，除了会造成混乱，一些屏幕阅读器也不一定会遵循。应该用 DOM 顺序来体现 tab 顺序。

忽略 Tab

要让 tab 忽略一个元素，即直接跳过去，设置 tabindex="-1" 属性。

或者用还在草稿阶段的 inert 属性 (polyfill)。

侧导航栏问题

在一些响应式的网页，侧导航栏在宽度变小时可能会隐藏起来，这时用户如果使用 tab 跳转可能会发现焦点突然不见了，怎么按也没反应。其实是因为 tab 跳到导航栏的链接去了。

解决方式要么改变 DOM 结构，将导航栏移到最后；要么使用前面提到的 inert 属性。

Skip Link

将导航的每个项目绝对定位到屏幕之上，再设置 :focus 样式移下来。就可以实现用户按 tab 时一次只显示一个导航链接，用户再按回车即可跳到该位置。可以参考 Github 网页。

原生元素

尽可能使用原生支持的元素，如 <button> ，而不是用 <span> 或 <div> 模拟。原因：

• 原生符合语义。
• 原生对屏幕阅读友好，否则需要写一堆 ARIA 属性来提示阅读器。
• 原生不需要 JS 支持。
• 原生元素用键盘可以代替鼠标点击，否则还要监听键盘事件。
• Focus Ring 浏览器自动识别原生元素，否则要另外写 CSS 隐藏。
• CSS 很容易就能改变原生元素的样式，与整体设计统一。

语义标签

使用符合语义的标签，辅助设备会自动理解。

• <article>：完整、独立的内容。
  • 每篇 <article> 应该包含一个标题（<h1>-<h6>）。
  • 嵌套的 <article> 主题应该跟父 <article> 相关联。
  • 考虑使用 <article> 应该看其内容是否会出现在文档的提纲（outline）中。
  • 辅助设备会将其 role 理解为“article”。
• <section>：按主题归在一起的部分内容。
  • 每块 <section> 应该包含一个标题（<h1>-<h6>）。
  • 如果内容是完整、独立的，应该考虑使用 <article>。
  • 不要将 <section> 当 <div> 使用，只为样式时应该用 <div> 。
  • 考虑使用 <article> 应该看其内容是否会出现在文档的提纲（outline）中。
  • 辅助设备会将其 role 理解为“region”，见下方。
• <nav>：包含一系列链接可以跳转到其它页面或者本页面的某部分。
  • 使用列表元素帮助辅助设备理解。
  • 只为主要导航使用。
  • 辅助设备会将其 role 理解为“navigation”，见下方。
• <aside>：侧边栏，其内容应该不属于主体内容的一部分。
  • 可以放导航组、广告等。
  • 辅助设备会将其 role 理解为“complementary”，见下方。
• <h1>-<h6>：一个块或子块的标题。
  • 请勿为了样式而用标题来表示副标题、子标题、额外标题、标语等，变通可参考这里。
  • 辅助设备会将其 role 理解为“heading”加上“1”到“6”。
• <header>：对最近的父 sectioning content 或 sectioning root 的介绍。
  • 如果父 sectioning root 是 <body>，辅助设备会将其 role 理解为“banner”，见下方。
• <footer>：代表其最近的父 sectioning content 或 sectioning root 的页脚。
  • 如果父 sectioning root 是 <body>，辅助设备会将其 role 理解为“content information”，见下方。
• <address>：为其最近的父 <article> 或 <body> 元素提供联系信息。
  • 只提供必要的联系信息，不要包含其它信息。

sectioning root 包括 <blockquote>, <body>, <details>, <fieldset>, <figure>, <td>.

Sectioning content 包括 <article>, <aside>, <nav>, <section>.

Landmarks

Landmark roles 定义网页的几个主要部分，可以让辅助设备快速跳转。

总共有八个。

1. banner：唯一。跟网站相关的内容，如 logo 、赞助商、站内搜索等。
2. complementary：对主体内容的补充。与主体内容相关，但本身独立。如相关文章。
3. contentinfo：唯一。版权信息、隐私声明等。
4. form：表单。应该设置可见的标题，并用 aria-labelledby 引用标题来告知辅助设备这个表单是干什么的。如果用 JS 提交表单，没有触发 onsubmit 事件，则应该用其它方式通知表单提交。
5. main：唯一。主体内容。
6. navigation：导航栏。
7. region：认为用户可能会感兴趣的，需要让用户可以快速跳转的内容。辅助设备会收集它来生成一个概要页面。每个 region 必须有可见的标题，并用 aria-labelledby 引用。
8. search：搜索框。

视觉隐藏

使用视觉隐藏而不是 display: none; 来隐藏元素同时让辅助设备识别。

1
2
3
4
5
6
7
8
9
10

.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
}

【完】

原理分析

获取选择文本

通过 window.getSelection() 即可获得一个 Selection 对象，再利用 .toString() 即可获得选择的文本。

锚节点与焦节点

在 Selection 对象中还保存了两个重要信息，anchorNode 和 focusNode，分别代表选择产生那一刻的节点和选择结束时的节点，而 anchorOffset 和 focusOffset 则保存了选择在这两个节点里的偏移值。

这时你可能马上就想到第一个方案：这不就好办了么，有了首尾节点和偏移，就可以获取句子的头部和尾部，再把选择文本作为中间，整个句子不就出来了么。

当然不会这么简单哈😛。

强调一下

一般情况下，anchorNode 和 focusNode 都是 Text 节点（而且因为这里处理的是文本，所以其它情况也会直接忽略），可以考虑这种情况：

1

<strong>Saladict</strong> is awesome!

如果选择的是“awesome”，那么 anchorNode 和 focusNode 都是 is awesome!，所以取不到前面的 “Saladict”。

另外还有嵌套的情况，也是同样的问题。

1

Saladict is <strong><a href="#">awesome</a></strong>!

所以我们还需要遍历兄弟和父节点来获取完整的句子。

遍历到哪？

于是接下就是解决遍历边界的问题了。遍历到什么地方为止呢？我的判断标准是：跳过 inline-level 元素，遇到 block-level 元素为止。而判断一个元素是 inline-level 还是 block-level 最准确的方式应该是用 window.getComputedStyle()。但我认为这么做太重了，也不需要严格的准确性，所以用了常见的 inline 标签来判断。

1
2
3
4
5
6

const INLINE_TAGS = new Set([
  // Inline text semantics
  'a', 'abbr', 'b', 'bdi', 'bdo', 'br', 'cite', 'code', 'data', 'dfn', 'em', 'i',
  'kbd', 'mark', 'q', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'small',
  'span', 'strong', 'sub', 'sup', 'time', 'u', 'var', 'wbr'
])

原理总结

句子由三块组成，选择文本作为中间，然后遍历兄弟和父节点获取首尾补上。

实现

选择文本

先获取文本，如果没有则退出

1
2
3

const selection = window.getSelection()
const selectedText = selection.toString()
if (!selectedText.trim()) { return '' }

获取首部

对于 anchorNode 只考虑 Text 节点，通过 anchorOffset 获取选择在 anchorNode 的前半段内容。

然后开始补全在 anchorNode 之前的兄弟节点，最后补全在 anchorNode 父元素之前的兄弟元素。注意后面是元素，这样可以减少遍历的次数，而且考虑到一些被隐藏的内容不需要获取，用 innerText 而不是 textContent 属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

let sentenceHead = ''
const anchorNode = selection.anchorNode
if (anchorNode.nodeType === Node.TEXT_NODE) {
  let leadingText = anchorNode.textContent.slice(0, selection.anchorOffset)
  for (let node = anchorNode.previousSibling; node; node = node.previousSibling) {
    if (node.nodeType === Node.TEXT_NODE) {
      leadingText = node.textContent + leadingText
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      leadingText = node.innerText + leadingText
    }
  }

  for (
    let element = anchorNode.parentElement;
    element && INLINE_TAGS.has(element.tagName.toLowerCase()) && element !== document.body;
    element = element.parentElement
  ) {
    for (let el = element.previousElementSibling; el; el = el.previousElementSibling) {
      leadingText = el.innerText + leadingText
    }
  }

  sentenceHead = (leadingText.match(sentenceHeadTester) || [''])[0]
}

最后从提取句子首部用的正则是这个

1
2

// match head                 a.b is ok    chars that ends a sentence
const sentenceHeadTester = /((\.(?![ .]))|[^.?!。？！…\r\n])+$/

前面的 ((\.(?![ .])) 主要是为了跳过 a.b 这样的特别是在技术文章中常见的写法。

获取尾部

跟首部同理，换成往后遍历。最后的正则保留了标点符号

1
2

// match tail                                                    for "..."
const sentenceTailTester = /^((\.(?![ .]))|[^.?!。？！…\r\n])+(.)\3{0,2}/

压缩换行

拼凑完句子之后压缩多个换行为一个空白行，以及删除每行开头结尾的空白符

1
2
3

return (sentenceHead + selectedText + sentenceTail)
  .replace(/(^\s+)|(\s+$)/gm, '\n') // allow one empty line & trim each line
  .replace(/(^\s+)|(\s+$)/g, '') // remove heading or tailing \n

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

const INLINE_TAGS = new Set([
  // Inline text semantics
  'a', 'abbr', 'b', 'bdi', 'bdo', 'br', 'cite', 'code', 'data', 'dfn', 'em', 'i',
  'kbd', 'mark', 'q', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'small',
  'span', 'strong', 'sub', 'sup', 'time', 'u', 'var', 'wbr'
])

/**
* @returns {string}
*/
export function getSelectionSentence () {
  const selection = window.getSelection()
  const selectedText = selection.toString()
  if (!selectedText.trim()) { return '' }

  var sentenceHead = ''
  var sentenceTail = ''

  const anchorNode = selection.anchorNode
  if (anchorNode.nodeType === Node.TEXT_NODE) {
    let leadingText = anchorNode.textContent.slice(0, selection.anchorOffset)
    for (let node = anchorNode.previousSibling; node; node = node.previousSibling) {
      if (node.nodeType === Node.TEXT_NODE) {
        leadingText = node.textContent + leadingText
      } else if (node.nodeType === Node.ELEMENT_NODE) {
        leadingText = node.innerText + leadingText
      }
    }

    for (
      let element = anchorNode.parentElement;
      element && INLINE_TAGS.has(element.tagName.toLowerCase()) && element !== document.body;
      element = element.parentElement
    ) {
      for (let el = element.previousElementSibling; el; el = el.previousElementSibling) {
        leadingText = el.innerText + leadingText
      }
    }

    sentenceHead = (leadingText.match(sentenceHeadTester) || [''])[0]
  }

  const focusNode = selection.focusNode
  if (selection.focusNode.nodeType === Node.TEXT_NODE) {
    let tailingText = selection.focusNode.textContent.slice(selection.focusOffset)
    for (let node = focusNode.nextSibling; node; node = node.nextSibling) {
      if (node.nodeType === Node.TEXT_NODE) {
        tailingText += node.textContent
      } else if (node.nodeType === Node.ELEMENT_NODE) {
        tailingText += node.innerText
      }
    }

    for (
      let element = focusNode.parentElement;
      element && INLINE_TAGS.has(element.tagName.toLowerCase()) && element !== document.body;
      element = element.parentElement
    ) {
      for (let el = element.nextElementSibling; el; el = el.nextElementSibling) {
        tailingText += el.innerText
      }
    }

    sentenceTail = (tailingText.match(sentenceTailTester) || [''])[0]
  }

  return (sentenceHead + selectedText + sentenceTail)
    .replace(/(^\s+)|(\s+$)/gm, '\n') // allow one empty line & trim each line
    .replace(/(^\s+)|(\s+$)/g, '') // remove heading or tailing \n
}

【完】

在使用过程中走了不少弯路，一部分是因为当时扫两眼文档就动手，对 MobX 机制理解得不够；其它原因是 MobX 终究只是一个库，会受限于 React 机制，以及与其它非 MobX 管理组件的兼容问题。当中很多情况在文档已经给出了说明（这里和这里），我根据自己遇到的再做一番总结。

与非响应式组件兼容问题

与非响应式的组件一起工作时，MobX 有时需要为它们提供一份非响应式的数据副本，以免 observable 被其它组件修改。

observable.ref

使用 React Navigation 导航时，如果要交由 MobX 管理，则需要手动配置导航状态栈，此时用 @observable.ref “浅观察”可避免状态被 React Navigation 修改时触发 MobX 警告。

当 Navigator 接受 navigation props 时代表导航状态为手动管理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

import { addNavigationHelpers, StackNavigator } from 'react-navigation'
import { observable, action } from 'mobx'
import { Provider, observer } from 'mobx-react'
import AppComp from './AppComp'

const AppNavigator = StackNavigator({
  App: { screen: AppComp },
  // ...
}, {
  initialRouteName: 'App',
  headerMode: 'none'
})

@observer
export default class AppNavigation extends Component {
  @observable.ref navigationState = {
    index: 0,
    routes: [
      { key: 'App', routeName: 'App' }
    ],
  }

  @action.bound dispatchNavigation = (action, stackNavState = true) => {
    const previousNavState = stackNavState ? this.navigationState : null
    this.navigationState = this.AppNavigator.router.getStateForAction(action, previousNavState)
    return this.navigationState
  }

  render () {
    return (
      <Provider
        dispatchNavigation={this.dispatchNavigation}
        navigationState={this.navigationState}
      >
        <AppNavigator navigation={addNavigationHelpers({
          dispatch: this.dispatchNavigation,
          state: this.navigationState,
        })} />
      </Provider>
    )
  }
}

observable.shallowArray() 与 observable.shallowMap()

MobX 还提供其它方便的数据结构来存放非响应式数据。

比如使用 SectionList 的时候，我们要为其提供数据用于生成列表，由于 Native 官方的实现跟 MobX 不兼容，这个数据不能是响应式的，不然 MobX 会报一堆警告。

MobX 有个 mobx.toJS() 方法可以导出非响应式副本；如果结构不相同还可以使用 @computed 自动生成符合的数据。但这两个方法每次添加项目都要全部遍历一遍，可能会存在性能问题。

这时其实可以维护一个 observable.shallowArray，里面只放 key 数据，只用于生成列表（像骨架一样）。传给 SectionList 的 sections props 时 slice 数组复制副本（shallowArray 里的数据非响应式，所以只需浅复制，复杂度远小于上面两种方式）。

然后 store 维护一个 observable.map 来存放每个项的数据，在项（item）组件中 inject store 进去，再利用 key 从 map 中获取数据来填充。

通过 shallowArray 可以让 MobX 识别列表长度变化自动更新列表，利用 map 维护项数据可以使每个项保持响应式却互不影响，对长列表优化效果很明显。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// store comp
class MyStore {
  @observable sections = observable.shallowArray()
  @observable itemData = observable.map()

  @action.bound appendSection (section) {
    const data = []
    section.items.forEach(action(item => {
      this.itemData.set(item.id, item)
      data.push({key: item.id})
    }))
    this.sections.push({
      key: section.id,
      data
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// MyList comp
import { SectionList } from 'react-native'
@inject('myStore')
@observer
class MyList extends React.Component {
  _renderItem = ({item}) => <SectionItem id={item.key} />

  render () {
    return (
      <SectionList
        getItemLayout={this._getItemLayout}
        sections={this.props.myStore.sections.slice()}
        renderSectionHeader={this._renderSectionHeader}
        renderItem={this._renderItem}
      />
    )
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

// SectionItem comp
@inject('myStore')
@observer
class SectionItem extends React.Component {
  render () {
    const {myStore, id} = this.props
    const itemData = myStore.itemData.get(id)
    return (
      <Text>{itemData.title}</Text>
    )
  }
}

computed

利用 @computed 缓存数据可以做一些优化。

比如有一个响应式的数组 arr，一个组件要根据 arr 是否为空更新。如果直接访问 arr.length，那么只要数组长度发生变化，这个组件都要 render 一遍。

此时利用 computed 生成，组件只需要判断 isArrEmpty 就可以减少不必要的更新：

1
2
3

@computed get isArrEmpty () {
  return this.arr.length <= 0
}

observable.map

因 JS 机制 MobX 不能检测属性的增删，所以最好用 observable.map 取代简单 {} 对象。另外 MobX 没有提供 Set 支持，可以用 key 和 value 一样的 Map 代替。

避免在父组件中访问子组件的属性

这条规则在文档也提到，原因很简单，MobX 对于一个 observer 组件，是通过访问属性来记录依赖的。所以哪怕父组件里没有用到这个属性，只是为了作为 props 传给子组件，MobX 还是算它依赖了这个属性，于是会产生不必要的更新。最好的方式是将数据统一放在 store 中，子组件通过 inject store 方式获取数据。

小组件

由于 React 的机制，MobX 只能在组件层面发光发热，对于组件内部就无能为力了。所以大组件用 MobX 很容易卡死（用其它也会😅），小组件才能真正发挥 MobX 自动管理更新的优势。

【完】

代码很短，就是维护了一个事件队列。核心在 onFn 和 offFn 上。后者同理，便主要看 onFn的实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

/**
 * Add watcher.
 * @param {array} cssSelectors - List of CSS selector strings
 * @param {Function} callback - The callback function
 */
function onFn(cssSelectors, callback, extraAnimations) {
  if (!callback) return;

  // initialize animationstart event listener
  if (!isInitialized) init();

  // listify argument
  cssSelectors = Array.isArray(cssSelectors) ? cssSelectors : [cssSelectors];

  // add css rules and cache callbacks
  cssSelectors.map(function(selector) {
    var animId = selectorToAnimationMap[selector];

    if (!animId) {
      // add new CSS listener
      var css, i;

      animId = 'sentinel-' + Math.random().toString(16).slice(2);

      // add keyframe rule
      css = '@keyframes ' + animId +
        '{from{transform:none;}to{transform:none;}}';
      i = styleSheet.cssRules.length;
      styleSheet.insertRule(css, i);
      styleSheet.cssRules[i]._id = selector;

      // add selector animation rule
      css = selector + '{animation-duration:0.0001s;animation-name:' + animId;
      if (extraAnimations) css += ',' + extraAnimations;
      css += ';}';
      i += 1;
      styleSheet.insertRule(css, i);
      styleSheet.cssRules[i]._id = selector;

      // add to map
      selectorToAnimationMap[selector] = animId;
    }

    // add to callbacks
    var x = animationCallbacks[animId] = animationCallbacks[animId] || [];
    x.push(callback);
  });
}

先生成一个随机的带前缀的 animId 来区分每个事件。

1

animId = 'sentinel-' + Math.random().toString(16).slice(2);

styleSheet 为一个事先挂载的 <style> 元素，所有的 animation 样式都会插入到这里。

插入 @keyframes 之后在这条规则上面以选择器做了一个私有的标记 _id，为了在移除事件的时候找到这条规则。

1
2
3
4
5
6

// add keyframe rule
      css = '@keyframes ' + animId +
        '{from{transform:none;}to{transform:none;}}';
      i = styleSheet.cssRules.length;
      styleSheet.insertRule(css, i);
      styleSheet.cssRules[i]._id = selector;

接下来再插入一个持续 0.0001s 的动画，监听搞定。

接下来初始化的时候在 document 上监听 animationstart 事件：

1

doc.addEventListener(event, animationStartHandler, true);

通过事件的 animationName 来匹配 animId，成功则取消其它监听这个事件的回调。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/**
 * Animation start handler
 * @param {Event} ev - The DOM event
 */
function animationStartHandler(ev) {
  var callbacks = animationCallbacks[ev.animationName] || [],
      l = callbacks.length;

  // exit if a callback hasn't been registered
  if (!l) return;

  // stop other callbacks from firing
  ev.stopImmediatePropagation();

  // iterate through callbacks
  for (var i=0; i < l; i++) callbacks[i](ev.target);
}

这个 stopImmediatePropagation 学到了！结合 window 上用 capture 方式监听事件，就可以保证点击植入的特定元素不会受其它事件影响。马上用在了这个 rarbg-monitor 扩展上，在 rarbg 资源页面上放一个跳转豆瓣相应页面的按钮，优先级比它的一个全局广告要高。

-EOF-

先理解两者的一个本质区别，prototype 是函数独有的，是人为设定的；__proto__ 是所有对象都有的，是继承的。

然后来看一个两个神的故事：

首先在 ECMAScript 星球，万物起源于 the Engineers，哦不，是一个叫 %ObjectPrototype% 的 intrinsic object，也就是 Object.prototype。它是万物的尽头，继承于虚无， Object.prototype.__proto__为 null。

接着由其衍生出第二神，另外一个 intrinsic object %FunctionPrototype%，也就是 Function.prototype。于是有

1

Function.prototype.__proto__ === Object.prototype // true

Function.prototype 本身也是个函数对象，这是为了兼容 ES5。也估计是让人引起误解的源头。但两者还是不同的，这是个特殊的函数对象，它忽略参数总是返回 undefined，且没有 [[Construct]] 内部方法。

搞清楚了这两个 Ancient Gods 接下来就很容易了，相信也听过“函数在 JS 里是一等公民”这类的说法，其实是因为它们都是 %FunctionPrototype% 的子民（这里不用 Function.prototype 是为了避免混淆，记得 prototype 是人为设定的），包括 Function 本身。

所以你可以看到，Object、Function、String、Number、Boolean 等等等的 __proto__ 都是 Function.prototype。

所以接下来的问题就更容易了，比如 Object instanceof Object。前面我们知道 Object.__proto__ 是 %FunctionPrototype%，而它的 __proto__ 是万物之源 %ObjectPrototype%，恰好也是 Object.prototype，所以就是 true 啦。

其它的也是同理，举一反三很简单了。

相信很多人第一反应是 resize 事件，但这个只是 document view 变化才会触发。

然后就是轮询，反复查询值变化了没有。开销不是一般的大，但像这样的库（比如这个七年前的）现在还有人用。

最后便是这个，号称 event based 无性能问题，便去观摩了一番源码。代码本身没什么惊喜，所以本文不会像之前一样逐行逐块地分析，而是着重原理，对应这部分的源码。

整体思路

这个方法的主要思想是在被监测元素里包裹一个跟元素位置大小相同的隐藏块。隐藏块可以滚动，并有一个远远大于它的子元素。当被监测元素尺寸变化时期望能触发隐藏块的滚动事件。

这个方法听起来很简单是不是，但如果你直接这么实现会发现时而行时而不行，问题就在于触发滚动事件的条件。

如何计算滚动？

这是我觉得这个话题值得写成文章的一个有趣点。我们理所当然地看待滚动，但有没有想过它是怎么计算的呢？

发生滚动的时机

有问题当然要去请教规范老师。

第一步我们需要知道什么时候才会发生滚动，首先一个题外话，overflow 为 hidden 也是可以滚动的，另外一篇分析里也遇到过。

在这里提到滚动事件发生的时机，但说得有点笼统

Whenever an element gets scrolled (whether in response to user interaction or by an API)

但从这段我们可以知道，每次发生滚动的时候，浏览器会先收集起来，在下次 event loop 到达时统一地处理。

滚动的描述在这里：

To scroll an element element to x,y optionally with a scroll behavior behavior (which is "auto" if omitted) means to:

1. Let box be element’s associated scrolling box.
2. • If box has rightward overflow direction Let x be max(0, min(x, element scrolling area width - element padding edge width)).
   • If box has leftward overflow direction Let x be min(0, max(x, element padding edge width - element scrolling area width)).
3. • If box has downward overflow direction Let y be max(0, min(y, element scrolling area height - element padding edge height)).
   • If box has upward overflow direction Let y be min(0, max(y, element padding edge height - element scrolling area height)).
4. Let position be the scroll position box would have by aligning scrolling area x-coordinate x with the left of box and aligning scrolling area y-coordinate y with the top of box.
5. If position is the same as box’s current scroll position, and box does not have an ongoing smooth scroll, abort these steps.
6. Perform a scroll of box to position, element as the associated element and behavior as the scroll behavior.

最后一步“perform a scroll”才会真正触发滚动事件。

第五步便是问题关键，位置相同的时候，滚动事件不会发生。

重排

根据前面的整体思路，当被监测元素尺寸发生变化时，隐藏元素也跟着变化。于是引发了 Layout/Reflow 使到重新计算滚动位置 position。

但这时也许你会发现 position 根本没有变化，如图一。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<body>
<style>
  .parent {
    height: 100px;
    width: 100px;
    overflow: scroll;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }

  .child {
    height: 200%;
    width: 200%;
    background: blue;
  }

  .msg {
    position: absolute;
    top: 370px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
</style>

<div class="parent">
  <div class="child"></div>
</div>
<div class="msg">
  <div class="msg1"></div>
  <div class="msg2"></div>
</div>

<script>
  var parent = document.querySelector('.parent')
  var child = document.querySelector('.child')
  var msg1 = document.querySelector('.msg1')
  var msg2 = document.querySelector('.msg2')

  parent.scrollTop = 1000
  parent.scrollLeft = 1000

  var eventCount = 0
  function log () {
    msg1.innerText = `scrollTop: ${parent.scrollTop}, scrollLeft: ${parent.scrollLeft}`
    msg2.innerText = `${eventCount} scroll event${eventCount > 1 ? 's were' : ' was'} triggered`
  }

  log()

  parent.addEventListener('scroll', () => {
    eventCount += 1
    log()
  })
</script>
</body>

为什么？上面的第二、三步有答案。一般来说，我们的设备都是上到下、左到右，所以属于右下方向溢出，对应上面的 2.1 和 3.1 公式。每次计算滚动距离都会跟可滚动的空间比较取最小值。

因为子元素的尺寸是固定的，且远远大于容器，故两者的差非常大，所以最小值一直是 x 和 y，每次重排都会在同个位置，触发了上面的第五步。

同时根据公式易得：当可滚动空间一开始不比 x 和 y 大，且随滚动不断变小时，就可以让 position 发生变化。

于是，我们先让元素滚到最尽头，那么 x 和 y 达到了最大值。当容器尺寸变大时，因为子元素的尺寸是固定的，故 scrolling area 的大小不变，所以两者的差变小了，x 和 y 得到新的最小值，发生了滚动。见图二。

1
2
3
4
5
6

/* ... */
.child {
  height: 200px;
  width: 200px;
}
/* ... */

1
2
3
4
5
6
7
8

// .....
var msg2 = document.querySelector('.msg2')

parent.scrollTop = 1000
parent.scrollLeft = 1000

var eventCount = 0
// ....

初始的 1 个事件就是上面提到的 event loop 导致的。

可以观察滚动发生，我们期望容器达到最大时 x 和 y 都没有达到最小值，所以子元素的大小须比容器最大值要大。

动图同时也可观察到容器变小时没反应。按上面的公式也很容易知道，容器变小了，差值变大了，所以最小值还是 x 和 y，故不触发滚动。

怎么办呢？

物尽其用

再看回公式，我们希望容器变小时，差值也变小。那么只能是让 scrolling area 也跟着变小了。如果子元素大小改为百分比行不？我们来证明一下。

设容器宽度为 x1 或者 x2，其中 x2 > x1，子元素大小为 n * x1 或 n * x2，因我们不设 padding，则有

1
2
3
4
5

n * x1 - x1 < n * x2 - x2
↓
(n - 1) * x1 < (n - 1) * x2
↓
n > 1

证明了通过百分比是可行的。

同时我们期望容器达到最小时 x 和 y 都没有达到最小值，容器为 0 时无意义，故设最小为 1，则

1
2
3

(n - 1) * 1 >= 1
↓
n >= 2

故我们只需让子元素大小至少为 200% 就可以！见图三

1
2
3
4
5
6

/* ... */
.child {
  height: 200%;
  width: 200%;
}
/* ... */

1
2
3
4
5
6
7
8

// .....
var msg2 = document.querySelector('.msg2')

parent.scrollTop = 1000
parent.scrollLeft = 1000

var eventCount = 0
// ....

同时也说明百分比不能监测容器变大，因为 0 < n < 1 与 n >= 1 + 1/Max 矛盾，可自行证明。

所以，结合两个方式就可以监测元素扩大与缩小变化。

代码

原理搞通之后代码就不难了，我这里另外重新实现了一遍，修改了隐藏块的创建方式以及加入 passive events 优化滚动。Demo 里拖动一个块改变大小另一个会同步变化，可以看到非常的流畅。

视频推荐看这个，觉得是最清晰易懂的：

整体思路

这个算法的主要思路是维护一个跟原串 str 一样长的数组 lens。lens[i] 表示以 str[i] 为中点的回串其中一边的长度。这里有的人把中点算进去，有的人记录两边的长度，其实都一样，我这里是只记录一边的长度，不包括中点。比如 "CDCDE"

1
2

str:  [C, D, C, D, E]
lens: [0, 1, 1, 0, 0]

那么 lens 里最大的自然就对应最长回串的中点了。所以这个算法的核心就是如何快速计算 lens。

预处理

回文有奇偶长度两种情况，通过补充间隔符可以将这两种情况化简为奇数长度。

比如 ABA 补充为 #A#B#A# 中点还是 B，ABBA 补充为 #A#B#B#A# 中点为 #，最后可以去掉。

算法用 JavaScript 写，我将原串转为数组，间隔符就用 null。

最后在两侧补上哨兵点方便遍历中止。我用了 NaN。所以看起来是这样

1
2
3
4
5
6

var arr = [NaN, null]
for (let i = 0; i < str.length; i += 1) {
  arr.push(str[i])
  arr.push(null)
}
arr.push(NaN)

计算长度数组

朴素计算方法

以一个中心计算回串，最直接的方法当然是左右遍历对比了，比如以 i 为中心：

1
2
3
4

lens[i] = 0
while (arr[i + lens[i] + 1] === arr[i - lens[i] - 1]) {
  lens[i] += 1
}

这个就是计算长度基本方式。n 个点，每个点最多计算 n/2 遍，所以是 n 平方复杂度。

手背手心都是肉

看回上面的算法，可以发现，lens[i] 是从 0 开始的，这个很正常，一开始当然是 0 ，回串嘛，从中心开始两侧都要一一比较相等才行。

但再进一步看，0 代表从头开始，即对于每个中心点，我们都是从什么都不知道开始，什么情况都没有掌握。

事实是这样吗？

既然有了这个算法，事实当然不是。这时就很容易联系到回串的特性，对称。

先来一个简单的例子 OABAXABAO。两个 B 是 X 的对称点，左边 B 对应的 lens[j] 长度显然是 1，当我们计算右边 B 的 lens[i] 时候，是不是可以把 lens[j] 的值直接复制过来。因为它们是镜面对称的，所以都是一样，不过是反过来而已。

最右中心

我们维护一个已知最右的回串，设其中心点 iCenter 以及其最右点 iRight。显然两者有这么的关系 iRight = iCenter + lens[iCenter]。

这个回串是最右的，也就是说 iRight 是最大的。有更右的就不断更新。

为什么要维护最右回串？

当我们一个个遍历中点 i 时，因 iCenter 已知，故必然是已经遍历过了，所以 i 肯定是在 iCenter 的右边，这就保证了两种情况：

1. i <= iRight，在最右回串的范围内，可以应用上面的镜面复制；
2. i > iRight，超出了最右，在未知区域，只能用朴素方式计算。

这就是这个算法的核心思想了，最后引入两个边界情况：

右贴界

像简单例子的 OABAXABAO 可以明确知道 X 和 O 不相等，所以复制过来就行。但如果是 OABAXABA... 就不知道下一个是不是 X 了。我们只能知道下一个肯定不是 O，因为最右串 X 的范围到 A 就截止了。

所以右边 B 对应的 lens[i] 得到了 1 之后，在这基础上继续用朴素方式比较两侧。

意思是“我现在可以确定右 B 两侧 1 个长度内是对称的，其它未知，继续比较下去看如何”。

如果右 B 比较下去有戏的话，那么右 B 就是新的最右串了，更新 iCenter 和 iRight 值。

右贴界的条件是 i + lens[i] === iRight。

左越界

对于串 XABAXABA...。两个 B 还是 X 的对称点，但是左边的 B 对应的 lens[j] 长度是 2，右边 B 的 lens[i] 可以看到是 1。

为什么？

理解上面提到的镜面对称就很简单了，X 为中心的回串是 ABAXABA，也就是左边到了 A 就截止了，左 X 是超出的，所以不对称。因为如果最右的下一个位也是 X 的话，最右回串就应该是 XABAXABAX 了是不是。

所以，当左边的 B 超出了中心 X 的范围时，我们只复制在最右回串范围内的部分。

即对于左边的 B，我们知道范围内的是 ABA ，为 1，复制给右边 B 对应的 lens[i]，再按右贴界处理。

设左 B 的索引为 iMirror，因为左右 B 对称，故 iMiiror = iCenter - (i - iCenter) = 2 * iCenter - i。

左 B 到 iCenter 左边界的距离我们用镜面对称过来就是右 B 到 iCenter 右边界的距离 iRight - i。

于是左越界的条件就是 lens[iMiiror] > iRight - i。

整合

可以看到，我们复制镜面值要考虑三种情况，范围内、右贴界、左越界，其中左越界又包含了右贴界。于是简洁起见，我们全部当右贴界处理，因为如果在范围内比较下去自然不相等，相当于去掉了 if 判断。

然后整合范围内和左越界，范围内指 lens[iMiiror] <= iRight - i，直接复制 lens[iMiiror]；左越界指 lens[iMiiror] > iRight - i，取 iRight - 1。故整合为 min(iRight - i, lens[iMirror])。

完整算法

所以完整算法如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

function manacher (str) {
  str = String(str)

  var arr = [NaN, null]
  for (let i = 0; i < str.length; i += 1) {
    arr.push(str[i])
    arr.push(null)
  }
  arr.push(NaN)

  var iCenterMax = 1
  var lens = []
  var iCenter = 0
  var iRight = 0
  for (let i = 1; i < arr.length - 1; i += 1) {
    if (arr.length - 1 - i <= lens[iCenterMax]) {
      break
    }

    lens[i] = 0

    if (i < iRight) {
      let iMirror = 2 * iCenter - i
      lens[i] = Math.min(iRight - i, lens[iMirror])
    }

    while (arr[i + lens[i] + 1] === arr[i - lens[i] - 1]) {
      lens[i] += 1
    }

    if (i + lens[i] > iRight) {
      iCenter = i
      iRight = i + lens[i]
    }

    if (lens[i] > lens[iCenterMax]) {
      iCenterMax = i
    }
  }

  return arr.slice(iCenterMax - lens[iCenterMax], iCenterMax + lens[iCenterMax] + 1)
    .filter(item => item !== null)
    .join('')
}

一个属性的值在计算时会经过 4 个阶段

1. Specified values
2. Computed values
3. Used values
4. Actual values

Specified values

这里有 3 种可能，满足一种就可以

• 计算 cascade 有结果
• 否则，若这个值可以继承，继承父元素的 computed value（根元素除外）
• 还是没有，则用默认值

计算 cascade

这里就是重点，经历 4 个步骤：

1. 匹配 Media Type 的筛选
2. 按来源排序（低到高）
   1. user agent declarations
   2. user normal declarations
   3. author normal declarations
   4. author important declarations
   5. user important declarations
3. 同个来源的按权值（specificity）排序，收集选择器里的属性个数比较
   • "style" 属性（attribute）里的属性 * 1000
   • ID 属性 * 100
   • 其它属性、类、伪类 * 10
   • 元素名、伪元素 * 1
4. 如果前面得出并列结果，则按位置排序
   • 越靠后越高
   • import 进来的样式看做在本样式表前面

可以看到来源总共有三个，user agent、user 和 author。User important 最高是因为用户的自定义样式一般是为了覆盖 user agent 作为默认样式，但有时候用户也想覆盖 author 即网站本身的样式，于是让 user important 最高。

注意 <style> 与 <link> 引入的 CSS 同属 author declarations 也就是说两者的等级是一样的，按先后顺序覆盖。

HTML 里若有非 CSS 的样式属性（presentational attributes），比如 font 之类，UA 可能将其翻译为 CSS 属性，放在 author style sheet 开端，并赋予权值 0。

Computed values

在排版前就可以确定的值。在元素定义的 Computed Value 区域可以查到，如

• URI 计算绝对路径
• 'em' 和 'ex' 计算成 px 或绝对长度。

比如

1
2

body { font-size: 10px; }
h1 { font-size: 120%; }

h1 先计算 cascade 按继承得到了 10px ，再在本阶段计算得 12px。

Used values

排版之后才能确定的值，如百分比宽度，必须排版才能知道父容器宽度。

Actual values

实际用于渲染的值，由于设备环境等因素，一些值可能不能用，需要作出变化。

Element 与 Box

• 第一个概念是 Element （元素）与 Box （盒子）。用 Element 的时候是指 document tree （文档树）的节点，Box 则是指元素根据 VFM 和 Box Model 生成的盒子。一个元素可能生成零个或多个盒子。

• Box Model 描述了一个矩形的盒子。每个盒子都有 content area，可能有 padding, border, margin areas。

Block-level Element

• display 值为 'block/list-item/table' 的元素叫 block-level element。

• 每个 block-level element 都会生成一个 principal block-level box （list-item 还会生成其它盒子）。

• 除了 table box 和 replaced element，block-level box 都是 block container box。

  Block container box 要么只包含 block-level boxes （宣布了 BFC），要么只包含 inline-level boxes （宣布了 IFC）。（BFC: Block Formatting Context, IFC: Inline Formatting Context）

  （Block-level box 指的是这个盒子本身，它参与的是 BFC；而 block container box 说的是这个盒子内部，宣布了 BFC 或 IFC）。

  反过来 block container box 则不一定是 block-level box，还可以是 non-replaced inline block 和 non-replaced table cell（即这些盒子参与 IFC ，内部也可以宣布 BFC 或 IFC）。

• 同时是 block-level box 和 block container box 的盒子也叫做 block box。

Inline-level element

• display 值为 'inline/inline-table/inline-block' 的元素叫 inline-level element。

• Inline-level element 会生成 inline-level box。

• display 为 'inline' 的 non-replaced element 生成的盒子也叫 inline box，指其内部参与的与其自身所在的是同个 IFC。

  （同样，Inline-level box 说的是盒子本身，inline box 说的是盒子内部）。

• 不是 inline box 的 inline-level box （如 replaced inline-level element, inline-block element, inline-table element）叫做 atomic inline-level box，它们以不透明的方式参与到 IFC 中，内部不参与自身所在的 IFC。

• Inline-level boxes 打横排成一行行的 line boxes。

Flow

• Out-of-flow 的元素指 absolutely positioned elements, floated elements 和 root element。

• In-flow 指不是 out-of-flow 的元素。

先上效果，下面是模仿的样子。由于详细介绍一般比设置本身要长，它使用了隐藏、按需显示的方式减少了高度。

看了开发者后台的代码，它是使用 JavaScript 响应鼠标事件并计算高度和显示。作为 CSS 洁癖，我第一反应当然是先考虑用 CSS 实现。

这里主要的问题其实就是如何让鼠标在设置（body）上响应介绍（aside）的显示。

在实现 iPhone 滑块开关的时候，就是通过 <input> 的 :check 来控制 <label> 的变化，方法是利用 + 选择符选择兄弟姐妹元素。

像这种控制其它元素的情况都可以用这个方法。

1
2
3
4
5
6
7
8
9

.item-aside {
  z-index: -1;
  opacity: 0;
}

.item-body:hover + .item-aside {
  z-index: 1;
  opacity: 1;
}

全部的代码，也火速使(tou)用(shi)在了 Saladit 的设置界面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<ul class="menu">
  <!--  (li.item>((.item-header>lipsum1)+(.item-body>lipsum5)+(.item-aside>lipsum10)))*10  -->
  <li class="item">
    <div class="item-header">Lorem.</div>
    <div class="item-body">Lorem ipsum dolor sit amet.</div>
    <div class="item-aside">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, vitae.</div>
  </li>
  <li class="item">
    <div class="item-header">Nesciunt.</div>
    <div class="item-body">Sit doloremque repellat natus libero.</div>
    <div class="item-aside">Pariatur quibusdam voluptas, vero accusamus itaque. Neque magni autem sunt.</div>
  </li>
  <li class="item">
    <div class="item-header">Animi!</div>
    <div class="item-body">Similique voluptas, sint quam eligendi.</div>
    <div class="item-aside">Unde repudiandae, mollitia voluptatum similique repellendus eum. Ut, quae! Deleniti.</div>
  </li>
   <!--  ......  -->
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

* {
  box-sizing: border-box;
}

.menu {
  margin: 15px 10%;
}

.item {
  display: flex;
  position: relative;
  margin-bottom: 15px;
  line-height: 1.6;
  word-wrap: break-word;
}

.item-header {
  width: 2 / 12 * 100%;
  padding: 0 10px;
  text-align: right;
  font-weight: bold;
}

.item-body {
  flex: 1;
  width: 10 / 12 * 100%;
  margin-right: 4 / 12 * 100%;
  padding: 10px;
  background-color: #fafafa;
  
  &:hover + .item-aside {
    z-index: 1;
    opacity: 1;
  }
}

.item-aside {
  width: 4 / 12 * 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  padding-left: 10px * 2 + 1px;
  padding-right: 10px;
  opacity: 0;
  transition: all 400ms;
  
  // left line
  &::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    border-left: 1px #ddd solid;
  }
  
  &:hover {
    z-index: 1;
    opacity: 1;
  }
}

在写一个划词翻译扩展 Saladict 时，有一个需求：用户选择一段文本之后，会在鼠标附近显示一些元素。

这个初看很简单，监听一个 mouseup 事件，获取 clientX 和 clientY 就行。这也是 Saladict 前几版用的方法。

但这个方法有个缺陷：iframe 里的鼠标事件不会传到父窗口上。

解决方法也很简单，就难在把它们都联系起来。

iframe 里插入脚本

在 manifest.json 里，content_scripts 有个选项 all_frames，可以让脚本插入到所有的 frame 里。

1
2
3
4
5
6
7
8
9

{
  "content_scripts": [
    {
      "js": ["selection.js"],
      "matches": ["<all_urls>"],
      "all_frames": true
    }
  ]
}

检测点击

现在可以检测 iframe 里的点击事件

1
2

// selection.js
document.addEventListener('mouseup', handleMouseUp)

上传坐标

当点击发生在 iframe 里时，获取的坐标是相对于 iframe 窗口的，所以把这个坐标交给上层，再加上 iframe 本身的坐标，就可以算出点击相对上层的坐标。

Chrome 里可以放心使用 postMessage

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// selection.js
function handleMouseUp (evt) {
  if (window.parent === window) {
    // 到了顶层
    doAwesomeThings(evt.clientX，evt.clientY)
  } else {
    // 把坐标传上去
    window.parent.postMessage({
      msg: 'SALADICT_CLICK',
      mouseX: evt.clientX,
      mouseY: evt.clientY
    }, '*')
  }
}

计算偏移

上层怎么知道是哪个 iframe 传来坐标？很简单，message 事件里携带了 iframe 的 window，对比一下就可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// selection.js
window.addEventListener('message', evt => {
  if (evt.data.msg !== 'SALADICT_CLICK') { return }

  let iframe = Array.from(document.querySelectorAll('iframe'))
    .filter(f => f.contentWindow === evt.source)
    [0]
  if (!iframe) { return }

  // 计算偏移
  let pos = iframe.getBoundingClientRect()
  let mouseX = evt.data.mouseX + pos.left
  let mouseY = evt.data.mouseY + pos.top

  if (window.parent === window) {
    // 顶层
    doAwesomeThings(mouseX, mouseY)
  } else {
    // 继续上传
    window.parent.postMessage({
      msg: 'SALADICT_CLICK',
      mouseX,
      mouseY
    }, '*')
  }
})

拖动 iframe

Saladict 另外一个需求就是拖动一个 iframe 查词面板。

实现拖动的常识

实现拖动的一种常用方式就是检测 mousedown, mousemove 和 mouseup。分别对应开始、拖动、结束。然后计算偏移值应用到 left 和 top 上。

第一次实现很容易犯的一个错误就是监听元素本身的 mousemove。当然这个也可以正确计算出偏移，问题在于如果鼠标移动稍快超出了元素，拖动就卡掉了。所以应该监听全局的 mousemove 获取偏移值。

iframe 特色的拖动

iframe 的拖动同理，只是因为发生在 iframe 里的事件不能传到上层，需要手动打包一下。

iframe 部分

拖动由 iframe 里的某个元素触发，为了节省资源，在触发的时候才监听拖动和结束，并在结束的时候解绑。

在 iframe 里监听 mousemove 就是为了把偏移值传回上层，因为上层的 mousemove 事件到这里中断了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// iframe.js
var baseMouseX, baseMouseY

$dragArea.addEventListener('mousedown', handleDragStart)

function handleDragStart (evt) {
  baseMouseX = evt.clientX
  baseMouseY = evt.clientY

  window.parent.postMessage({
    msg: 'SALADICT_DRAG_START',
    mouseX: baseMouseX,
    mouseY: baseMouseY
  }, '*')

  document.addEventListener('mouseup', handleDragEnd)
  document.addEventListener('mousemove', handleMousemove)
}

function handleMousemove (evt) {
  window.parent.postMessage({
    msg: 'SALADICT_DRAG_MOUSEMOVE',
    offsetX: evt.clientX - baseMouseX,
    offsetY: evt.clientY - baseMouseY
  }, '*')
}

function handleDragEnd () {
  window.parent.postMessage({
    msg: 'SALADICT_DRAG_END'
  }, '*')

  document.removeEventListener('mouseup', handleDragEnd)
  document.removeEventListener('mousemove', handleMousemove)
}

上层部分

主要增加了handleFrameMousemove 补上中断的偏移。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

// parent.js
var pageMouseX, pageMouseY

var frameTop = 0
var frameLeft = 0
$iframe.style.top = frameTop + 'px'
$iframe.style.left = frameLeft + 'px'

window.addEventListener('message', evt => {
  const data = evt.data

  switch (data.msg) {
    case 'SALADICT_DRAG_START':
      handleDragStart(data.mouseX, data.mouseY)
      break
    case 'SALADICT_DRAG_MOUSEMOVE':
      handleFrameMousemove(data.offsetX, data.offsetY)
      break
    case 'SALADICT_DRAG_END':
      handleDragEnd()
      break
  }
})

function handleDragStart (mouseX, mouseY) {
  // 得出鼠标在上层的位置
  pageMouseX = frameLeft + mouseX
  pageMouseY = frameTop + mouseY

  document.addEventListener('mouseup', handleDragEnd)
  document.addEventListener('mousemove', handlePageMousemove)
}

function handleDragEnd () {
  document.removeEventListener('mouseup', handleDragEnd)
  document.removeEventListener('mousemove', handlePageMousemove)
}

function handleFrameMousemove (offsetX, offsetY) {
  frameTop += offsetY
  frameLeft += offsetX
  $iframe.style.top = frameTop + 'px'
  $iframe.style.left = frameLeft + 'px'

  // 更新鼠标在上层的位置，补上偏移
  pageMouseX += offsetX
  pageMouseY += offsetY
}

function handlePageMousemove (evt) {
  frameTop += evt.clientX - pageMouseX
  frameLeft += evt.clientY - pageMouseY
  $iframe.style.top = frameTop + 'px'
  $iframe.style.left = frameLeft + 'px'

  // 新位置直接可以更新
  pageMouseX = evt.clientX
  pageMouseY = evt.clientY
}

例子

这里实现了一个例子，下面的正方形 iframe 是可以拖动的：

兼容性

可以看到，这里主要就是传鼠标的坐标偏移值。所以需要兼容老浏览器的话，用繁琐的旧方式与 iframe 交流就行。如果是同域的话也可以直接从 iframe 里获取偏移。

I wrote a Chrome extension Saladict, an inline translator, which involved such requirement: When user makes a text selection, something will pop up nearby the cursor.

It looks simple at first view. Just listen to a mouseup event and get clientX and clientY from it.

But there is a flaw in it - mouseup events inside iframes won't bubble up to the top frame.

The solution is actually quite simple. If you know how to connect the dots.

iframe script injection

Using the all_frames property in manifest.json, a content script can run in all frames.

1
2
3
4
5
6
7
8
9

{
  "content_scripts": [
    {
      "js": ["selection.js"],
      "matches": ["<all_urls>"],
      "all_frames": true
    }
  ]
}

Mouse Event Detection

Now you can listen to mouseup event in all iframes.

1
2

// selection.js
document.addEventListener('mouseup', handleMouseUp)

Upload Cursor Coordinates

clientX and clientY of the mouse events that are triggered in iframes are coordinates within iframe windows. Upload these coordinates as offsets to the upper frame, then plus the iframe position you will get the cursor positionwithin the upper frame window.

On Chrome you can boldly use postMessage.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// selection.js
function handleMouseUp (evt) {
  if (window.parent === window) {
    // Top frame
    doAwesomeThings(evt.clientX，evt.clientY)
  } else {
    // Pass the coordinates to upper frame
    window.parent.postMessage({
      msg: 'SALADICT_CLICK',
      mouseX: evt.clientX,
      mouseY: evt.clientY
    }, '*')
  }
}

Add offsets

How does the upper frame know which iframe is sending coordinates? Well, the message event contains the content window of the iframe. Use it to match the iframe element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// selection.js
window.addEventListener('message', evt => {
  if (evt.data.msg !== 'SALADICT_CLICK') { return }

  let iframe = Array.from(document.querySelectorAll('iframe'))
    .filter(f => f.contentWindow === evt.source)
    [0]
  if (!iframe) { return }

  // calculate coordinates within current window
  let pos = iframe.getBoundingClientRect()
  let mouseX = evt.data.mouseX + pos.left
  let mouseY = evt.data.mouseY + pos.top

  if (window.parent === window) {
    // Top frame
    doAwesomeThings(mouseX, mouseY)
  } else {
    // Keep uploading
    window.parent.postMessage({
      msg: 'SALADICT_CLICK',
      mouseX,
      mouseY
    }, '*')
  }
})

iframe Dragging

Another requirement for Saladict is to drag an iframe panel.

Dragging 101

Before getting into iframe dragging. There are few basic ideas of implementing a draggable element.

One of the most common approaches is to listen to mousedown, mousemove and mouseup events, which handle drag start, dragging and drag end. And apply the offsets to the element's left and topstyle properties.

If this is your first time implementing this feature, you are likely to listen to mousemove events of the element itself.

You can indeed get the correct result in the way. The problem is, if the curser moves a bit too fast and leaves the element, the dragging will stop. That's why you should listen to global mousemove event instead.

Dragging with iframe

The theory behind iframe dragging is the same. Only the mouse events triggered in iframes will not bubble up to the upper frame. You need to wrap it up yourselves.

iframe Part

Drag start is triggered by a draggable element inside iframe. For better performance, dragging and drag end event listeners are attached in drag start and are detached in drag end.

Dragging event listener is required here because the mousemove event of the upper frame breaks inside the iframe. We need to let upper frame know what is happening inside iframe.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// iframe.js
var baseMouseX, baseMouseY

$dragArea.addEventListener('mousedown', handleDragStart)

function handleDragStart (evt) {
  baseMouseX = evt.clientX
  baseMouseY = evt.clientY

  window.parent.postMessage({
    msg: 'SALADICT_DRAG_START',
    mouseX: baseMouseX,
    mouseY: baseMouseY
  }, '*')

  document.addEventListener('mouseup', handleDragEnd)
  document.addEventListener('mousemove', handleMousemove)
}

function handleMousemove (evt) {
  window.parent.postMessage({
    msg: 'SALADICT_DRAG_MOUSEMOVE',
    offsetX: evt.clientX - baseMouseX,
    offsetY: evt.clientY - baseMouseY
  }, '*')
}

function handleDragEnd () {
  window.parent.postMessage({
    msg: 'SALADICT_DRAG_END'
  }, '*')

  document.removeEventListener('mouseup', handleDragEnd)
  document.removeEventListener('mousemove', handleMousemove)
}

Upper Frame Part

Use handleFrameMousemove to handle the offsets from iframe.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

// parent.js
var pageMouseX, pageMouseY

var frameTop = 0
var frameLeft = 0
$iframe.style.top = frameTop + 'px'
$iframe.style.left = frameLeft + 'px'

window.addEventListener('message', evt => {
  const data = evt.data

  switch (data.msg) {
    case 'SALADICT_DRAG_START':
      handleDragStart(data.mouseX, data.mouseY)
      break
    case 'SALADICT_DRAG_MOUSEMOVE':
      handleFrameMousemove(data.offsetX, data.offsetY)
      break
    case 'SALADICT_DRAG_END':
      handleDragEnd()
      break
  }
})

function handleDragStart (mouseX, mouseY) {
  // get the coordinates within the upper frame
  pageMouseX = frameLeft + mouseX
  pageMouseY = frameTop + mouseY

  document.addEventListener('mouseup', handleDragEnd)
  document.addEventListener('mousemove', handlePageMousemove)
}

function handleDragEnd () {
  document.removeEventListener('mouseup', handleDragEnd)
  document.removeEventListener('mousemove', handlePageMousemove)
}

function handleFrameMousemove (offsetX, offsetY) {
  frameTop += offsetY
  frameLeft += offsetX
  $iframe.style.top = frameTop + 'px'
  $iframe.style.left = frameLeft + 'px'

  // Add the missing coordinates
  pageMouseX += offsetX
  pageMouseY += offsetY
}

function handlePageMousemove (evt) {
  frameTop += evt.clientX - pageMouseX
  frameLeft += evt.clientY - pageMouseY
  $iframe.style.top = frameTop + 'px'
  $iframe.style.left = frameLeft + 'px'

  pageMouseX = evt.clientX
  pageMouseY = evt.clientY
}

Demo

You can drag the iframe square below:

Browser Compatibility

As you can see, nothing fancy here, just passing coordinates around. So for older browsers, just use the old ways to communicate. You can also manipulate the values directly if they are same-origin.

To get all the images in DOM there are actually three places we are going to look at: <img> element, background-image CSS property and, <iframe>. Yes, every iframe hides a magical kingdom.

img

If you only want to get images in <img>, two options for you to choose:

You can either search the DOM for img tag:

1
2
3
4
5
6
7
8
9
10

function getImgs (doc) {
  return Array.from(doc.getElementsByTagName('img'))
    .map(img => ({
      src: img.currentSrc, // img.src if you want the origin
      width: img.naturalWidth,
      height: img.naturalHeight
    }))
}

getImgs(document)

Or just use document.images:

1
2
3
4
5
6
7
8
9
10

function getImgs (doc) {
  return Array.from(doc.images)
    .map(img => ({
      src: img.currentSrc, // img.src if you want the origin
      width: img.naturalWidth,
      height: img.naturalHeight
    }))
}

getImgs(document)

background-image

For background-image, we need to check every node in DOM:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function getBgImgs (doc) {
  const srcChecker = /url\(\s*?['"]?\s*?(\S+?)\s*?["']?\s*?\)/i
  return Array.from(
    Array.from(doc.querySelectorAll('*'))
      .reduce((collection, node) => {
        let prop = window.getComputedStyle(node, null)
          .getPropertyValue('background-image')
        // match `url(...)`
        let match = srcChecker.exec(prop)
        if (match) {
          collection.add(match[1])
        }
        return collection
      }, new Set())
  )
}

getBgImgs(document)

We can't simply get the width and height of a background image. If you need them, you have to load it.

Since the images you get in DOM are most likely already in the browser cache, the loading process should be fairly quick.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function loadImg (src, timeout = 500) {
  var imgPromise = new Promise((resolve, reject) => {
    let img = new Image()
    img.onload = () => {
      resolve({
        src: src,
        width: img.naturalWidth,
        height: img.naturalHeight
      })
    }
    img.onerror = reject
    img.src = src
  })
  var timer = new Promise((resolve, reject) => {
    setTimeout(reject, timeout)
  })
  return Promise.race([imgPromise, timer])
}

function loadImgAll (imgList, timeout = 500) {
  return new Promise((resolve, reject) => {
    Promise.all(
      imgList
        .map(src => loadImg(src, timeout))
        .map(p => p.catch(e => false))
    ).then(results => resolve(results.filter(r => r)))
  })
}

loadImgAll(getBgImgs(document)).then(imgs => console.log(imgs))