Rust的设计思想

1. 所有权与借用 (Ownership and Borrowing)

Rust通过所有权系统管理内存，避免了常见的内存泄漏和数据竞争问题。

在JavaScript中的应用

虽然JavaScript是垃圾回收语言，但我们仍可以通过明确的资源管理和避免全局状态来借鉴Rust的所有权思想。

1
2
3
4
5
6
7
8
9
10
11

function createResource() {
  let resource = { data: 'important data' };
  return {
    useResource: () => console.log(resource.data),
    dispose: () => { resource = null; }
  };
}

const res = createResource();
res.useResource();
res.dispose();

2. 不可变性 (Immutability)

Rust鼓励使用不可变数据，减少了状态变化带来的复杂性。

Shared mutable state is the root of all evil（共享的可变状态是万恶之源）
– Pete Hunt

在JavaScript中的应用

在JavaScript中，我们可以使用const声明和不可变数据结构来实现类似的效果。

1
2

const data = Object.freeze({ name: 'John', age: 30 });
data.age = 31; // TypeError: Cannot assign to read only property 'age'

此外，我们还可以使用库如Immutable.js来帮助管理不可变数据。(在React前端应用中尤为重要)

1
2
3
4
5
6

const { Map } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3 });
const map2 = map1.set('b', 50);

console.log(map1.get('b')); // 2
console.log(map2.get('b')); // 50

Immutable 实现的原理是 Persistent Data Structure（持久化数据结构）:

用一种数据结构来保存数据
当数据被修改时，会返回一个对象，但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费
也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变，同时为了避免 deepCopy把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享）

如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享

如下图所示：

3. 类型系统 (Type System)

Rust的强类型系统在编译时捕获错误，提升了代码的安全性。

在JavaScript中的应用

虽然JavaScript是动态类型语言，但我们可以使用TypeScript来引入静态类型检查。

1
2
3
4
5
6

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(2, 3)); // 5
console.log(add('2', '3')); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

使用TypeScript可以在开发阶段捕获许多潜在的错误，提升代码的可靠性。

Rust特点

1. 安全性

Rust通过所有权和借用检查在编译时捕获内存安全问题，JavaScript可以通过严格的编码规范和工具（如ESLint）来提升代码安全性。

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

// ESLint配置示例
module.exports = {
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "off"
  }
};

2. 性能

Rust的零成本抽象和高效内存管理使其性能卓越。JavaScript可以通过避免不必要的对象创建和使用高效的数据结构来提升性能。

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

// 使用高效的数据结构
const arr = new Array(1000000).fill(0);
console.time('Array');
for (let i = 0; i < arr.length; i++) {
  arr[i] = i;
}
console.timeEnd('Array'); // Array: 3.83203125 ms

const map = new Map();
console.time('Map');
for (let i = 0; i < 1000000; i++) {
  map.set(i, i);
}
console.timeEnd('Map'); // Map: 65.27001953125 ms

3. 并发性

Rust的所有权系统天然支持安全的并发编程。JavaScript可以通过Web Workers和异步编程模型来实现高效并发。

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

// 使用Web Workers
const worker = new Worker('worker.js');
worker.postMessage('start');

worker.onmessage = function(event) {
  console.log('Worker said: ', event.data);
};

// worker.js
self.onmessage = function(event) {
  if (event.data === 'start') {
    self.postMessage('Hello from worker');
  }
};

通过这种方式，我们可以在不阻塞主线程的情况下执行耗时任务。

模式匹配 (Pattern Matching)

Rust中的模式匹配通过match表达式提供了一种强大且灵活的控制流机制。并且Rust 编译器清晰地知道 match 中有哪些分支没有被覆盖，这种行为能强制我们处理所有的可能性，有效避免传说中价值十亿美金的 null 陷阱。

在JavaScript中的应用

虽然JavaScript没有原生的模式匹配语法，但我们可以使用switch语句或第三方库（如match库）来实现类似的功能。

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

// 使用switch语句实现模式匹配
function match(value) {
  switch (value) {
    case 'a':
      return 'Matched A';
    case 'b':
      return 'Matched B';
    default:
      return 'No Match';
  }
}

console.log(match('a')); // Matched A
console.log(match('c')); // No Match

此外，我们还可以使用第三方库来实现更强大的模式匹配功能。例如，match库提供了类似Rust的模式匹配语法。

1
2
3
4
5
6
7
8
9
10
11

const { match, when, otherwise } = require('match');

const value = 'a';

const result = match(value)(
  when('a', () => 'Matched A'),
  when('b', () => 'Matched B'),
  otherwise(() => 'No Match')
);

console.log(result); // Matched A

Rust编译器的检查也可以通过引入工具函数实现开发时通过Chrome DevTool进行开发时debugger

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

const DCHECK_ALWAYS_ON = false;

const NOOP = () => {};

export const DCHECK =
  __DEV__ || DCHECK_ALWAYS_ON
    ? (condition, msg = 'DCHECK failed') => {
        if (!condition) {
          console.warn(new Error(msg));
          debugger;
        }
      }
    : NOOP;

export const UNREACHABLE = (msg = 'UNREACHABLE') => DCHECK(false, msg);

结论

Rust的设计思想为JavaScript开发提供了宝贵的借鉴。通过引入所有权管理、不可变数据和类型检查等理念，我们可以编写出更安全、高效和可维护的JavaScript代码。

参考阅读

• Rust官方文档
• Rust语言圣经
• Immutable 详解及 React 中实践
• Web Workers API

身处信息时代之中，我们最能明显感受到的一点就是密集数据大量爆发，人们积累的数据也越来越多。这些庞杂的数据出现在一起，传统使用的很多数据记录、查询、汇总工具并不能满足人们的需求。更有效的将这些大量数据处理，让计算机听懂人类需要的数据效果，从而形成更加自动化、智能的数据处理方式。

为了处理这些海量数据，出现了各种大数据引擎、搜索引擎、计算引擎、3D引擎等，用以更好解决数据庞杂带来人工无法处理的问题。而作为其中比较常用的就是Excel的计算公式引擎，本文主要是讲解计算引擎的前端实现方案。

二、核心问题

• 核心需求点：满足用户对表格数据的逻辑比较、逻辑运算和统计需求。
• 核心问题：1.建立表格各类区域和公式之间的复杂依赖关系并得到合理的计算更新顺序。2.公式字符串的词法解析生成结构化数据

三、功能分析

对于核心问题第一点来说，可以在以下两个资料中，学习到一些思想方法。

• 前端电子表格的计算引擎解密 - 前端电子表格的计算引擎解密
• [Leetcode] 631. 设计 Excel 求和公式

核心问题第二点：
如图，A8单元格的字段中存在一个公式SUM(1,5.512,B1,A1)，formula记录了两个信息，其中的10是公式表达式的索引，22、23是公式表达式中包含的引用位置的索引：

在元数据部分可以看到对应的数据：

exprs中的是表达式的模板，如果存在两个公式表达式只有引用位置不同，那它们共用一个模板：

refs中的即是引用位置，通过相对位置进行表示：（位置引用和公式字符串的转化关系参考这里）

由此可见钉钉表格完整的公式表达式由表达式模板(expres)+引用位置(refs)组合得出。
通过单元格上formula记录的索引，找到对应的表达式模板和引用位置，就能够完整表达整个公式。
公式之间的依赖关系并没有通过快照存储，需要在表格初始化时进行构建。

四、概要设计

公式的基本原理

在工作表中可以使用常量和算术运算符创建简单的公式。

公式以输入“＝”开始。
复杂一些的公式可能包含函数和常量。

函数：函数是预先编写的公式，可以对一个或多个值执行运算，并返回一个或多个值。函数可以简化和缩短工作表中的公式，尤其在用公式执行很长或复杂的计算时。

常量：不进行计算的值，因此也不会发生变化。

基本功能：

• 可以进行＋、－、、四则运算等计算
• 可以引用其他单元格中的数据。
• 可使用文本字符串，或与数据相结合。
• 可运用>、<之类的比较运算符比较单元格内的数据。
• 不仅可以用于公式的计算，还可以运用于其他情况中。

位置引用：

• A1 相对引用
• $A1 绝对引用列
• A$1 绝对引用行
• $A$1 绝对引用行和列

下面将介绍公式功能的基本实现原理。

公式的组成部分

1. 函数：PI() 函数返回 pi 值：3.142…
2. 引用：A2 返回单元格 A2 中的值。
3. 常量：直接输入到公式中的数字或文本值，例如 2。
4. 运算符：^（脱字号）运算符表示数字的乘方，而 *（星号）运算符表示数字的乘积。

公式中使用常量

常量是一个不是通过计算得出的值；它始终保持相同。
例如，日期 10/9/2008、数字 210 以及文本“季度收入”都是常量。
表达式或从表达式得到的值不是常量。
如果在公式中使用常量而不是对单元格的引用（例如 =30+70+110），则仅在修改公式时结果才会变化。
通常，最好在各单元格中放置常量（必要时可轻松更改），然后在公式中引用这些单元格。

公式中使用引用

引用的作用在于标识工作表上的单元格或单元格区域，并告知 程序 在何处查找要在公式中使用的值或数据。
你可以使用引用在一个公式中使用工作表不同部分中包含的数据，或者在多个公式中使用同一个单元格的值。
还可以引用同一个工作簿中其他工作表上的单元格和其他工作簿中的数据。
引用其他工作簿中的单元格被称为链接或外部引用。

• A1 引用样式
  默认情况下，程序 使用 A1 引用样式，此样式引用字母标识列（从 A 到 XFD，共 16,384 列）以及数字标识行（从 1 到 1,048,576）。 这些字母和数字被称为行号和列标。

  要引用某个单元格，请输入列标，后跟行号。
  例如，B2 引用列 B 和行 2 交叉处的单元格。

  若要引用	用途
  A 和行 10 交叉处的单元格	A10
  在列 A 和行 10 到行 20 之间的单元格区域	A10:A20
  在行 15 和列 B 到列 E 之间的单元格区域	B15:E15
  行 5 中的全部单元格	5:5
  行 5 到行 10 之间的全部单元格	5:10
  列 H 中的全部单元格	H:H
  列 H 到列 J 之间的全部单元格	H:J
  列 A 到列 E 和行 10 到行 20 之间的单元格区域	A10:E20

• 引用同一工作簿中另一个工作表上的单元格或单元格区域

  下例中，AVERAGE 函数将计算同一个工作簿中名为 Marketing 的工作表的 B1:B10 区域内的平均值。

  

  1、对名为 Marketing 的工作表的引用
  2、引用 B1 到 B10 的单元格区域
  3、感叹号 (！) 将工作表引用与单元格区域引用分开

• 绝对引用、相对引用和混合引用之间的区别

  相对引用 公式中的相对单元格引用（如 A1）是基于包含公式和单元格引用的单元格的相对位置。 如果公式所在单元格的位置改变，引用也随之改变。 如果多行或多列地复制或填充公式，引用会自动调整。 默认情况下，新公式使用相对引用。 例如，如果将单元格 B2 中的相对引用复制或填充到单元格 B3，将自动从 =A1 调整到 =A2。

  复制的公式具有相对引用：

  

  绝对引用 公式中的绝对单元格引用（如 $A$1）总是在特定位置引用单元格。 如果公式所在单元格的位置改变，绝对引用将保持不变。 如果多行或多列地复制或填充公式，绝对引用将不作调整。 默认情况下，新公式使用相对引用，因此您可能需要将它们转换为绝对引用。 例如，如果将单元格 B2 中的绝对引用复制或填充到单元格 B3，则该绝对引用在两个单元格中一样，都是 =$A$1。

  复制的公式具有绝对引用：

  

  混合引用 混合引用具有绝对列和相对行或绝对行和相对列。 绝对引用列采用 $A1、$B1 等形式。 绝对引用行采用 A$1、B$1 等形式。 如果公式所在单元格的位置改变，则相对引用将改变，而绝对引用将不变。 如果多行或多列地复制或填充公式，相对引用将自动调整，而绝对引用将不作调整。 例如，如果将一个混合引用从单元格 A2 复制到 B3，它将从 =A$1 调整到 =B$1。

  复制的公式具有混合引用：

  

公式的词法分析

语法分析

公式的语法分析使用开源库jison库，我们需要编写定义相关的语法规则，使用命令生成解析器。Jison 解析器会根据定义的语法规则对输入进行解析，并构建一个语法树。

首先，你需要使用 Jison 定义函数表达式的语法规则。这可以通过编写一个称为”Jison 文法”的规则文件来完成。Jison 文法使用类似于 BNF（巴科斯范式）的语法来描述语法规则。例如，下面是一个简单的 Jison 文法示例，用于解析简单的数学函数表达式：

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

%lex
%%
"+"             return '+';
"-"             return '-';
"*"             return '*';
"/"             return '/';
"("             return '(';
")"             return ')';
[0-9]+          return 'NUMBER';
[ \t\n]+        /* skip whitespace */
.               return 'INVALID';
/lex

%start expression

%%

expression
    : expression "+" expression   { $$ = $1 + $3; }
    | expression "-" expression   { $$ = $1 - $3; }
    | expression "*" expression   { $$ = $1 * $3; }
    | expression "/" expression   { $$ = $1 / $3; }
    | "(" expression ")"          { $$ = $2; }
    | NUMBER                      { $$ = Number($1); }
    ;

语法树

语法树是一个表示函数表达式结构的树状数据结构。每个节点代表一个语法规则的实例，例如函数调用、运算符、变量等。

例如：一个简单的数学表达式：2 + 3 * (4 - 1)可以解析成

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

{
  type: 'BinaryExpression',
  operator: '+',
  left: {
    type: 'NumericLiteral',
    value: 2
  },
  right: {
    type: 'BinaryExpression',
    operator: '*',
    left: {
      type: 'NumericLiteral',
      value: 3
    },
    right: {
      type: 'BinaryExpression',
      operator: '-',
      left: {
        type: 'NumericLiteral',
        value: 4
      },
      right: {
        type: 'NumericLiteral',
        value: 1
      }
    }
  }
}

计算表达式

计算表达式使用了开源库formula.js。
该开源库能够支持三百多种函数的运算，但不支持 excel 中数组公式的计算，例如”=A:C+1”，需要对其 IF 函数、加、减、乘、除等运算规则进行修改，使其支持参与运算的因子是数组的情况。

公式的相互依赖

公式可以存在单元格引用，而被引用的单元格值可能也是由公式计算得到的，例如：

C3 上的公式是=SUM(C1:D1)，F3 上的公式是=SUM(F1:G1)，E6 上的公式是=SUM(C3,F3).

如果我们将 C1 的值更新，依赖 C1 的 C3、依赖 C3 的 E6 需要重新计算并更新公式结果，并且根据依赖关系，必须先更新 C3 再更新 E6。

五、详细设计

假设在 A1 单元格位置键入以下公式

1

=SUM(B1:C1, B2:C2)

首先我们在单元格数据里记录公式信息/公式 ID（此处举例为“A”）

1
2
3
4
5
6
7
8

// 单元格数据
{
  "type": 9,
  // ...
  "formula": {
    "id": "A"
  }
}

另外，我们还需要在文档数据里更新公式信息，以及对应的引用区域。格式如下

1
2
3
4
5
6
7
8
9
10

"formulas": {
  "A": {
    // 引用范围, 仅记录refs中引用对象的id
    "refs": {
      "R1": "x",
      "R2": "y"
    },
    "expr": "SUM([R1, R2])"
  }
},

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

"refs": [
  {
    "id": "x",
    // sheetId，如果跨表，这里就是个链接
    "from": "GsuvR1",
    // range类型，下文讨论
    "type": 16,
    // range依旧保持为[4]int类型
    "range": [
      1,
      0,
      2,
      1
    ]
  },
  {
    "id": "y",
    "from": "GsuvR1",
    "type": 0,
    "range": [
      1,
      1,
      2,
      1
    ]
  }
]

公式的还原方法

在实际的应用程序中，我们还需要还原公式用以展示和编辑。

由于存在 相对引用 和 绝对引用，以及 混合引用 的场景，这使得引用位置的还原变得复杂。
我们通过 type 字段记录相关的位置信息，在还原时配合 ref 结构中的 type 字段，可以准确还原位置引用。

钉钉：使用 type 的二进制数字表示所有不同位置的$符号

我们也采用相同的做法。

可以看到 四种类型的区域 可以定四个不同的基数 0，4，8，16。

• 区域格式为$A$1，词法分析出单元格类型，则基数为 0，第一二个数字前面有$，type=0+1+2=3，二进制后四位 0011

• 区域格式为$A1:$B$1，词法分析出矩形区域类型，则基数为 16，第 1 第 3 第 4 字符前有$，type = 16+8+2+1=27，二进制后四位 1011

通过先判断 type 值的范围，确定出区域类型，得到基数。
其中二进制值去掉基数之后 1 的位数就是$符号出现的位置。
最后就能通过 [$符号位置、range、区域类型] 三个信息反推出原公式。

公式的链路计算

假设存在以下公式

A = B
C = A
D = A+B
E = A + B + C + D
B = A

注：红色公式会导致依赖链路成环。

基于上述公式信息，我们可以构建如下依赖关系。

[
{ id: ‘b’, dep: [ ‘a’, ‘d’, ‘e’ ] },
{ id: ‘a’, dep: [ ‘c’, ‘d’, ‘e’, ‘b’ ] },
{ id: ‘c’, dep: [ ‘e’ ] },
{ id: ‘d’, dep: [ ‘e’ ] }
]

当 B 节点数据变更之后，我们需要递归更新上游链路的所有节点。

更新逻辑如下：

1、清空更新链路

2、查询变更节点的上游

1
2
3

path: [b]

next: [a,d,e]  // path里的节点所有上游

发现 path 中的数据 b 不在 next 里（没有入度），则添加 b 到更新链路中（此时更新链路为 [b]）。

此处的检查是为了保证更新顺序（最小入度）。

对 next 去重后重复查询上游节点。

3、递归查询变更节点的上游

1
2
3

path: [a,d,e]

next: [c,d,e,b, e,]

发现 path 中的数据 a 不在 next 里（没有入度），则添加 a 到更新链路中（此时更新链路为 [b, a]）。

这里需要注意的是，如果 next 中的节点存在于更新链路中，则出现循环依赖，递归终止。

如果开启 N 次迭代计算，就使用当前的更新链路[b,a]进行 N 次重复计算。否则 b 和 a 所在的单元格就需要报引用错误。

如果 B = A 不存在（依赖成环），则重复上述步骤。

对 next 去重后重复查询上游节点。

1
2
3

path: [c,d,e]

next: [e,e]

发现 path 中的数据 c,d 不在 next 里（没有入度），则添加 c,d 到更新链路中（此时更新链路为 [b, a, c, d]）。

对 next 去重后重复查询上游节点。

1
2
3

path: [e]

next: []

发现 path 中的数据 e 不在 next 里（没有入度），则添加 e 到更新链路中（此时更新链路为 [b, a, c, d, e]）。

至此，公式递归完毕，按照更新链路依次更新单元格数据即可。

公式的冲突处理

由于存在冲突的情况：假设两个客户端基于同一个版本进行了不同的编辑操作，两种操作发生了冲突，没有经过冲突处理之前，两个客户端得到的计算结果都不是正确的。

因此，在发生公式编辑操作时，前端不会将计算结果进行上发到服务端，而是等到后端处理完op冲突收到op后，再进行计算结果。

公式的初始化

如果服务端快照不存储计算结果，服务端也没有计算能力的话，就需要前端在表格初始化时，进行一次全局公式计算。

如何进行初始化全局计算？

由于上方描述的算法是基于某个节点出现变更，再生成该节点变更之后需要更新的节点链路。项目初始化时就需要先得到入度最小的节点，并由该节点作为函数调动的发起者，得到完整的更新链路。然后再对更新链路中含有公式的单元格进行依次计算更新。

如何得到入度最小的节点？
表格初始化先使用快照model的单元格数据，转化成前端表格数据表。然后对前端表格数据表进行遍历，依据快照中的ref formula构建依赖图，在创建依赖图的方法中添加回调使用Map记录id出现次数。等数据初始化完毕，出现次数最少的节点即为入度最小的节点此案例为B）

进阶:

• 使用Web Worker，实现多线程计算？
• 采用C、C++、Rust实现编译代码， 使用WASM实现更好的计算速度?
• 服务端运算的支持?

参考阅读

• 前端电子表格的计算引擎解密 - 前端电子表格的计算引擎解密
• [Leetcode] 631. 设计 Excel 求和公式
• Univer公式引擎架构设计

编程范式

1. 异步编程 (Asynchronous Programming)

异步编程允许程序在等待某些任务完成时继续执行其他任务，从而避免阻塞。前端常见的异步操作包括网络请求、文件读取等。

使用回调函数

1
2
3
4
5
6
7
8
9
10

function fetchData(callback) {
  setTimeout(() => {
    const data = { id: 1, name: 'John' };
    callback(data);
  }, 1000);
}

fetchData(data => {
  console.log('Data received:', data);
});

使用Promise

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

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: 'John' };
      resolve(data);
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

使用async/await

1
2
3
4
5
6
7
8
9

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log('Data received:', data);
  } catch (error) {
    console.error('Error:', error);
  }
}

2. 面向对象编程 (Object-Oriented Programming, OOP)

面向对象编程通过对象来组织代码，核心概念包括封装、继承和多态。

基本类与继承

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

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // Rex barks.

多态

1
2
3
4
5
6
7
8
9
10

class Cat extends Animal {
  speak() {
    console.log(`${this.name} meows.`);
  }
}

const animals = [new Dog('Rex'), new Cat('Whiskers')];
animals.forEach(animal => animal.speak());
// Rex barks.
// Whiskers meows.

3. 函数式编程 (Functional Programming, FP)

函数式编程强调使用纯函数、不可变数据和函数组合，避免可变状态和副作用。

纯函数与不可变性

1
2
3
4
5
6

const add = (a, b) => a + b;

const numbers = [1, 2, 3];
const newNumbers = numbers.map(num => num * 2);
console.log(newNumbers); // [2, 4, 6]
console.log(numbers); // [1, 2, 3] - 原数组不变

高阶函数

1
2
3
4
5
6
7
8

const withLogging = fn => (...args) => {
  console.log(`Calling ${fn.name} with args:`, args);
  return fn(...args);
};

const multiply = (a, b) => a * b;
const loggedMultiply = withLogging(multiply);
console.log(loggedMultiply(3, 4)); // Logs: Calling multiply with args: [3, 4], 12

4. 反应式编程 (Reactive Programming)

反应式编程处理动态数据流和异步事件，常用于构建响应式UI和处理事件流。

使用RxJS处理事件流

1
2
3
4
5
6
7
8
9
10

import { fromEvent } from 'rxjs';
import { throttleTime, map } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');
const positions = clicks.pipe(
  throttleTime(1000),
  map(event => ({ x: event.clientX, y: event.clientY }))
);

positions.subscribe(position => console.log('Clicked at:', position));

设计模式

1. 单例模式 (Singleton Pattern)

单例模式确保一个类只有一个实例，并提供全局访问点。

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

class Logger {
  constructor() {
    if (Logger.instance) {
      return Logger.instance;
    }
    Logger.instance = this;
    this.logs = [];
  }

  log(message) {
    this.logs.push(message);
    console.log(`LOG: ${message}`);
  }

  printLogCount() {
    console.log(`${this.logs.length} logs`);
  }
}

const logger1 = new Logger();
const logger2 = new Logger();

logger1.log('This is the first log');
logger2.log('This is the second log');
logger1.printLogCount(); // 2 logs

2. 工厂模式 (Factory Pattern)

工厂模式通过定义一个接口或抽象类来创建对象，而不指定具体类。

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

class Shape {
  constructor(type) {
    this.type = type;
  }

  draw() {
    console.log(`Drawing a ${this.type}`);
  }
}

class ShapeFactory {
  createShape(type) {
    return new Shape(type);
  }
}

const factory = new ShapeFactory();
const circle = factory.createShape('circle');
const square = factory.createShape('square');

circle.draw(); // Drawing a circle
square.draw(); // Drawing a square

3. 观察者模式 (Observer Pattern)

观察者模式定义对象之间的一对多依赖关系，当一个对象状态改变时，所有依赖对象会收到通知并更新。

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

class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log(`Observer received data: ${data}`);
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notify('Some data');

4. 装饰者模式 (Decorator Pattern)

装饰者模式允许向现有对象添加新功能，而不改变其结构。

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

class Coffee {
  cost() {
    return 5;
  }
}

class MilkDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }

  cost() {
    return this.coffee.cost() + 1;
  }
}

class SugarDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }

  cost() {
    return this.coffee.cost() + 0.5;
  }
}

let coffee = new Coffee();
coffee = new MilkDecorator(coffee);
coffee = new SugarDecorator(coffee);
console.log(coffee.cost()); // 6.5

前端中的依赖注入

参考阅读这篇文章

总结

这些编程范式和设计模式各有其独特的应用场景，理解并掌握它们能够帮助开发者编写出更高效、可维护和可扩展的代码。在实际开发中，根据具体需求选择合适的范式和模式是提升项目质量的重要一环。

在现代Web开发中，性能优化是一个重要的议题。WebAssembly（WASM）作为一种新兴的技术，为Web应用带来了显著的性能提升。在需要高性能计算的Web应用程序，例如音视频、协作冲突中起着非常重要的作用。本文将探讨C语言编译为WASM在计算斐波那契数列时相较于JavaScript的性能优势。

什么是WebAssembly？

WebAssembly（WASM）是一种新的二进制格式，可以在现代Web浏览器中高效地运行。这种格式可以将C、C++、Rust等编译型语言编译为高效的字节码，然后在浏览器中执行，从而提升了计算性能。

斐波那契数列简介

斐波那契数列是一种经典的数列，其中每一个数都是前两个数的和。即：

• F(0) = 0
• F(1) = 1
• F(n) = F(n-1) + F(n-2) (n ≥ 2)

计算斐波那契数列常常用来测试编程语言和计算平台的性能，因为它具有简单而计算量大的特性。

使用JavaScript计算斐波那契数列

在JavaScript中，我们可以通过递归或者迭代的方法来计算斐波那契数列。以下是一个使用递归方法的JavaScript代码示例：

1
2
3
4
5
6

function _fibonacciJS(n) {
    if (n == 1 || n == 2) {
        return 1;
    }
    return _fibonacciJS(n - 1) + _fibonacciJS(n - 2);
}

使用C语言编译为WASM计算斐波那契数列

C语言是一种高效的编译型语言，编译为WASM后，其性能相较于JavaScript会有显著提升。以下是一个使用C语言计算斐波那契数列的示例代码：

1
2
3
4
5
6
7
8

int fibonacci(int n)
{
    if (n == 1 || n == 2)
    {
        return 1;
    }
    return fibonacci(n - 1) + fibonacci(n - 2);
}

然后，使用 emcc 编译器将其编译为Wasm：

1

emcc -O3 -o fibonacci.js -s EXPORTED_FUNCTIONS='["_fibonacci"]' fibonacci.c

在HTML网页中进行测试

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

<!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>fjb Wasm</title>
</head>

<body>
    <p>num: <input type="number" id="num"></p>
    <p>JS: <span id="JSresultDom"></span></p>
    <p>Wasm: <span id="WasmresultDom"></span></p>
    <script src="fibonacci.js"></script>
    <script>
        function _fibonacciJS(n) {
            if (n == 1 || n == 2) {
                return 1;
            }
            return _fibonacciJS(n - 1) + _fibonacciJS(n - 2);
        }
        num.onchange = () => {

            const jsStart = performance.now();
            const jsResult = _fibonacciJS(num.value);

            const jsEnd = performance.now();
            JSresultDom.textContent = ` (JS: ${(jsEnd - jsStart).toFixed(2)}ms)   jsResult: ${jsResult}`;


            const wasmStart = performance.now();
            const wasmResult = Module._fibonacci(num.value);
            const wasmEnd = performance.now();
            WasmresultDom.textContent = ` (Wasm: ${(wasmEnd - wasmStart).toFixed(2)}ms)   wasmResult: ${wasmResult}`;
        }
    </script>
</body>

</html>

性能对比：

源码参考

• fib-wasm

• 每个模块或函数应该只负责一件事情。新增接口的职责就是接收新数据并插入数据库，而不是处理自动生成的字段。

2. 最小惊讶原则（Principle of Least Astonishment, POLA）

• 系统应该按照用户或开发者预期的方式工作。自动生成的字段不应该由客户端提供，因为这会违反常规做法，容易导致混淆和错误。

3. 安全性原则

• 不让客户端传递自动生成的字段可以避免潜在的安全问题，例如数据伪造和篡改。确保数据的真实性和完整性。

4. 简化设计（KISS - Keep It Simple, Stupid）

• 保持设计简单，避免不必要的复杂性。只处理需要的字段，减少代码中的冗余和潜在错误。

5. 封装（Encapsulation）

• 封装数据库操作细节，客户端不需要关心数据库是如何生成id和创建时间的，只需要得到结果。这也是一种信息隐藏的方式。

实践中的体现

在实际开发中，遵循这些原则可以提高代码的可维护性、安全性和可读性。例如：

• 数据库自动生成字段：让数据库来生成id、创建时间等字段，可以保证数据的一致性和唯一性，避免手动处理带来的错误。
• API设计：在API设计中，明确哪些字段是客户端需要提供的，哪些是由服务器生成的，保证接口的清晰性和可靠性。

Talk is cheap. Show me the code.

​ -Linux 创始人 Linus Torvalds

从请求体上下文ctx.user中只取该接口控制器AuthController需要的字段数据，其中创建上下文的中间件verifyAuth可以应用在不同的路由/业务接口中。

cos的上传需要返回https链接，符合高版本chrome浏览器的安全策略以及最佳做法

扩展阅读

代码整洁之道 中文完整版-带书签.pdf

九年总结：优秀程序设计的18大原则

注: 本文基于 univer-sheet 源码，对其复制粘贴解析逻辑进行核心优化解读。

效果图：

• 变更前:

  

• 变更后:

  

由上图可以看到在提交变更之前，粘贴解析长任务耗时 27.5 秒并且内存没有得到回收，出现了内存泄漏问题。在变更之后，耗时仅需要 2.68 秒，对应的内存也得到释放。

注: 内存泄漏问题也可以通过堆快照定位。

PR 请求可以 点此查看。

耗时原因分析:

通过开发者工具结合源码分析，我们能发现 windows.getComputedStyle().getPropertyValue 出现了大量耗时的情况。

为什么 getComputedStyle() 和 getPropertyValue() 方法会大量耗时造成页面卡死？

• 强制重排（reflow）: getComputedStyle() 方法会导致浏览器计算元素的所有样式，这可能需要重新计算整个文档的布局。这是因为浏览器需要确保样式是最新的，并且在一些情况下可能会重新布局页面。这种重排操作是非常耗时的，特别是当页面上有大量的元素时。

• 同步操作: getComputedStyle() 方法是同步的，这意味着浏览器必须在返回结果之前完成所有的计算。这会阻塞主线程，导致页面的其他操作变慢或卡顿。

• 布局树的生成: 浏览器需要生成和更新布局树（layout tree），以便计算每个元素的最终样式。这些操作通常非常复杂，涉及大量的计算和内存操作。

• 复杂的 CSS 规则: 如果页面中有大量复杂的 CSS 规则，或者样式表层级嵌套较深，浏览器计算每个元素的最终样式时会更加复杂和耗时。

解决方案

DOM 树是树结构，我们可以采用深度优先遍历的方式，将上层样式传递到下层节点模拟计算样式，来避免使用 getComputedStyle。节点样式是通过样式选择器的优先级，来确定最终的样式。了解这两个基础逻辑后，我们就可以开始编码了。

解析 style 标签，将标签的样式存储在 Map 中

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

const style = this._dom.querySelector('style');
if (style) {
    const shadowHost = document.createElement('div');
    const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
    document.body.appendChild(shadowHost);
    shadowRoot.appendChild(style);
    for (const rule of style.sheet!.cssRules) {
        const cssRule = rule as CSSStyleRule;
        const selectorText = cssRule.selectorText;
        const style = cssRule.style;
        this._styleMap.set(selectorText, style);
    }
    style.remove();
    shadowHost.remove();
}

注: style 标签只有挂载到 DOM 上，才会实现 CSSStyleSheet 接口。而使用 shadow DOM 的目的是为了样式隔离，避免造成全局样式污染。

获取样式函数

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

private _getStyle(node: HTMLElement, styleStr: string) {
    const recordStyle: Record<string, string> = turnToStyleObject(styleStr);
    const style = node.style;
    // retrieve multiple sources for a node and compile them into a cohesive new style string. eg.`background`、`background-color`
    ···
    ···
    // style represents inline styles with the highest priority, followed by selectorText which corresponds to stylesheet rules, and recordStyle pertains to inherited styles with the lowest priority.
        value =
            style.getPropertyValue(key) ||
            this._getStyleBySelectorText(`#${node.id}`, key) ||
            value ||
            this._getStyleBySelectorText(node.nodeName.toLowerCase(), key) ||
            recordStyle[key] ||
            '';
        value && (newStyleStr += `${key}:${value};`);
    }
    return newStyleStr;
}

详细函数实现请翻阅 packages/sheets-ui/src/services/clipboard/html-to-usm/converter.ts。函数实现时需要注意在各类 html 中，例如 background、background-color 在表格中均可代表背景颜色，应该补充边界处理。

内存泄漏问题

参考 StackOverflow 上的 这篇帖子。

1
2
3
4
5
6
7
8
9
10

export default function parseToDom(rawHtml: string) {
-const parser = new DOMParser();
- const html = `<x-univer id="univer-root">${rawHtml}</x-univer>`;
- const doc = parser.parseFromString(html, 'text/html');

- return doc.querySelector('#univer-root');
+ const template = document.createElement('body');
+ template.innerHTML = rawHtml;
+return template;
}

在解决内存泄漏时，剔除了 DOMParser API 的使用，并去除了将 html 字符串挂载到 DOM 上的行为。在粘贴行为结束后的调用dispose函数回收解析过程中使用的 Map 和临时变量。经过这样处理，不仅解决了内存泄漏的问题，还节约了挂载构建 DOM 树的时间。

参考阅读

• Univer 架构
• Chromium 渲染流水线——字节码到像素的一生