Snofly

多米诺骨牌分治法求最大合

Tue, 14 May 2024 00:00:00 GMT

前言

去年遇到的一道题目，不过当时还不能完全解决。经过这段时间对算法的理解，再来试试整个解题过程。

正文

题目

分析

用分治法求解问题，标准步骤为：

分解
解决
合并

显然，问题规模 n 小于 2 时，问题无意义。

问题规模 n 等于 2 时为最小子问题，可以简单求解。（解决）

对 n 大于 2 的问题，可以分解为规模为 2 的问题进行求解。（分解）

对于两个子问题的解进行合并，这是一个重点考虑的事情。（合并）

对于合并步骤，我们假设有个函数 merge 来实现，具体实现可以先忽略。

代码

function maxSumOfProducts(L, R) {
  function helper(L, R, left, right) {
    if (left === right) {
      // 只有一块骨牌的情况
      return { noRotate: 0, rotate: 0 }; // { 不旋转的最大值, 旋转的最大值 }
    }

    const mid = Math.floor((left + right) / 2);

    // 递归处理左右两部分
    const leftResult = helper(L, R, left, mid);
    const rightResult = helper(L, R, mid + 1, right);

    // 左右两部分不旋转和旋转的结果
    const maxLeftNoRotate = leftResult.noRotate;
    const maxLeftRotate = leftResult.rotate;
    const maxRightNoRotate = rightResult.noRotate;
    const maxRightRotate = rightResult.rotate;

    // 合并结果，计算跨越边界的最大值
    const maxNoRotate = Math.max(
      maxLeftNoRotate + R[mid] * L[mid + 1], // 左不旋转，右不旋转
      maxLeftRotate + L[mid] * L[mid + 1] // 左旋转，右不旋转
    );
    const maxRotate = Math.max(
      maxLeftNoRotate + R[mid] * R[mid + 1], // 左不旋转，右旋转
      maxLeftRotate + L[mid] * R[mid + 1] // 左旋转，右旋转
    );

    return {
      noRotate: maxNoRotate + maxRightNoRotate,
      rotate: maxRotate + maxRightRotate,
    };
  }

  const n = L.length;
  const result = helper(L, R, 0, n - 1);
  return Math.max(result.noRotate, result.rotate);
}

// 示例输入
const L = [5, 8, 4, 9, 3, 11];
const R = [8, 4, 2, 6, 9, 10];

const result = maxSumOfProducts(L, R);
console.log("最大乘积和:", result);

社区提问注意事项

Sat, 01 Jun 2024 00:00:00 GMT

前言

译者述

在技术领域，常用的检索信息的方式有（按照笔者的使用频率排序）：

搜索引擎
AI 问答
社区提问
查阅文献

多模态的 ai 对话模型真的令人惊艳，而传统搜索引擎则显得呆板和不智能。

值得注意的是，这两种工具的侧重点是不同的。

搜索引擎的优势在于关键字的检索，往往一两个词语，就能得到用户想要的结果。

ai 模型的优势在于，对完善的 prompt 能有非常出色的解答。

社区提问存在延迟性，可能过很长时间也没有回答。而且，往往到不了这一步，就可以在前两步得到答案。

查阅文献的时候，只有在大概知道答案在什么地方，才能有一点点效率，否则就是大海捞针。好消息是，知识是有来源的，我们总能找到问题的出处。

关于下文

1、原文来自 Amber 个人网站上的一篇文章：How to Ask for Programming Help。

2、这是一篇针对社区提问的一些建议, 发布于 2012 年 6 月 26 日。

3、翻译中会尽量遵照原意, 也会加入译者的技术注释, 以及选择更符合汉语文法的译句。

4、欢迎指正，非常感谢。

译文

先声明一下，在编程问题中我乐于助人。当别人学习编程时，如果能给予他们帮助，我会觉得很有趣、很开心。这个过程中，提供帮助的难易程度会受到多方面因素的影响。这里有一些建议可以帮助你提高问题的质量和你得到帮助的效率。

先自己尝试解决

简单来说，如果你在寻求帮助，你应该是"寻求帮助"，而不是"获得解决方案"。大多数人都乐意提供帮助建议，但是不会为你的工作或爱好负责。如果你有一个问题，先试试看你自己能做什么。如果你完全不会也没有关系，至少可以帮助你的上司给你安排工作时排除某些不适合的内容。

如果你遇到的问题有文档或手册，从那里去寻找答案。即使最后没有找到，你也能够找到很多其他问题的答案。

如果你的问题已经存在解决方案了，谷歌搜索、FAQs 等都可以提供帮助。

缩小问题范围

一旦你对这个问题有了一些思路，试着缩小你需要帮助的范围。一个路人可能不会想要遍历你的数千行代码来找出遇到的问题。如果可能的话，尝试创建问题的简要版本，只用最少的代码来显示遇到的问题(参见:SSCCE)。

提供足够的细节

例如，当你在询问解决 error 时，一定要包含错误信息的关键文本——最好直接从包含它的日志、控制台或网页中复制粘贴。通常，错误消息中的一个小细节可能是帮助其他人找出代码问题的关键，这样他们就可以指出如何修复它。

如果你是在请求对特定代码段的帮助，请务必提供代码示例。试图在没有真正看到代码的情况下回答有关代码的问题是很困难的。能够运行的代码可以更容易地理解所问的问题，也可以更容易地回答问题，因为答案可以在实际代码的上下文中调试出来。

类似地，当你提供代码样例时，尽量不要删除太多——理想情况下，代码样例应该能够独立运行，至少在语义上不应该与实际代码不同。例如，在代码中隐藏特定的敏感值是可以的，但不应该更改循环条件之类的东西。

描述所展示的代码的上下文通常也很有用，即使只展示了一小段代码。有的时候，你会得到一些建议，使用完全不同的方法来实现你的目标，这些方法完全绕过了最初的问题(并且通常更有效)。

别懒

如果你在寻求帮助，你其实是在要求别人用自己的时间来解决别人的问题。不要因为愚蠢的事情而浪费他们的时间：

检查你的问题是否有错别字
确保你发布的任何链接都有效
如果可以的话，尽量把内容格式化得合理而美观
如果你在没有内置代码共享功能的地方提问，可以使用Pastebin.com这样的服务来提供你的代码示例(并打开适当的语法高亮显示)

（译者补充：代码分享的话，我比较常用的是 codepen ）

有耐心

除非你为别人的时间付钱，否则他们没有义务帮助你。有很多人愿意回答问题，但他们往往不喜欢被纠缠。一旦你在某处陈述了你的问题或疑问，给它一些时间。一般来说，愿意帮助别人的人会在他们有能力的时候帮助别人。如果你在第一个地方没有得到回应，你可以在其他地方问问(但如果你在其他地方得到了回应，要有礼貌，让你问的其他地方知道——最好贴出答案)。

计算机组成原理知识体系

Sat, 25 May 2019 00:00:00 GMT

一、计算机系统概述

（一）组成部分

1.计算机硬件：CPU + MM + I/O

1）==中央处理器==（CPU，Central Processing Unit）是一块超大规模的集成电路，是一台计算机的运算核心（Core）和控制核心（ Control Unit）。 2）MM 是计算机硬件中的==主存储器==，即 Main Memory。 3）I/O==输入/输出==(Input/Output)，分为 IO 设备和 IO 接口两个部分。

2.计算机软件：系统软件+应用软件

（二）冯·诺依曼结构

1.计算机有运算器、控制器、存储器、输入和输出设备。 2. 各基本部件的功能是： ==存储器==存放数据和指令，形式上两者没有区别，但计算机应能区分数据还是指令； ==控制器==应能自动执行指令； ==运算器==应能进行加/减/乘/除四种算术运算和一些逻辑运算；操作人员通过==输入、输出设备==和主机进行通信。 3. 内部以二进制表示==指令和数据==。每条指令由==操作码和地址码==两部分组成。操作码指出操作类型，地址码指出操作数的地址。由一串指令组成程序。 4. 采用“==存储程序==”工作方式。将事先编好的程序和原始数据送入主存中，然后启动执行。计算机能自动完成逐条取出指令和执行指令的任务。

（三）计算机发展时间节点

第一代：真空管（电子管 Vacuum Tube ）1946 ～ 57 年第二代：晶体管 1958 ～ 64 年第三代：SSI/MSI 1965 ～ 71 年第四代：LSI/VLSI/ULSI 1972 ～至今

（四）典型计算机的硬件组成

（五）三种程序

汇编程序(Assembler)：汇编语言源程序 → 机器目标程序编译程序(Complier)：高级语言源程序 → 汇编/机器目标程序解释程序(Interpreter )：将高级语言语句逐条翻译成机器指令并立即执行,不生成目标文件。

二、计算机性能评价

（一）评价指标

两大分类 Tasks per day, hour, sec, ns.. – 吞吐率（throughput） – 带宽（bandwidth ） Time to do the task – 响应时间(response time) – 执行时间、等待时间(execution time， latency)

各项指标

1.==CPU 执行时间==：执行程序中每条指令的时间。意义：一般不考虑主存磁盘输入输出开销，只考虑 CPU 的执行时间。比较计算机的性能时，多用 CPU 执行时间来衡量。

2.==CPU 时间==：指 CPU 花在程序执行上的时间。包括 2 部分： ==用户 CPU 时间==：运行用户代码的时间。 ==系统 CPU 时间==：为了执行用户程序而需要运行操作系统程序的时间。

3.==CPI (Cycles Per Instruction)==： CPI = 时钟周期数 /指令 (每条指令单周期或多周期) 意义： CPI 用来衡量以下各方面的综合结果: 指令集、程序、计算机系统的设计

其他指标 1.==MIPS== Million Instructions Per Second （定点指令执行速度）

2.==MFLOPS== Million Floating-point Operations Per Second（浮点操作速度）

3.==性能评价基准程序==（Benchmarks） • 基准测试程序是专门用来进行性能评价的一组程序 • 基准程序通过运行实际负载来反映计算机的性能 • 最好的基准程序是用户实际使用的程序或典型的简单程序

（二）部分数值计算

计算式 CPI = (CPU 时间 × 时钟频率) / 指令条数 = 总时钟周期数 / 指令条数 CPU 执行时间 = CPU 时钟周期数 × 时钟周期 = CPU 时钟周期数 / 时钟频率 = 指令条数 × CPI × 时钟周期

三、数据的机器级表示

（一）数值数据表示

==数值数据==：无符号整数、带符号整数、浮点数（实数）、十进制数数值数据表示三要素：进位计数制(进制)，定点浮点表示，编码规则

定点数的表示

• 进位计数制二、八、十六、十

• 定点数的二进制编码 ==原码== ...... ==补码== 假定补码有 n 位，则 X 的补码为：定点整数：[X]补= 2^n^ + X （-2^n^≤X ＜ 2^n^，mod 2^n^）；定点小数：[X]补= 2 + X （-1≤X ＜ 1，mod 2）；

一个负数的补码等于模减去该负数的绝对值。

便捷计算：正数：符号位为 0，数值部分不变  负数：符号位为 1，数值部分“各位取反，末位加 1” ...... ==反码== 正数的反码与原码相同负数的反码符号不变，数值位取反 ...... ==移码== 定义：将每一个补码数值加上一个偏置常数得到移码。作用：主要用来表示浮点数阶码。 • 定点整数的表示

无符号整数、带符号整数

浮点数的规格化  ==IEEE754 浮点数标准== 非规格化参照表格

浮点数计算注意问题 很大的数与很小的数进行运算时，小的数将会被抹掉。（原因，浮点数计算第一步，阶码计算时，小数移位运算，全部变成 0 了）

十进制数表示 用 ASCII 码或 BCD 码表示。

（二）非数值数据表示

==非数值数据==：逻辑数（包括位串）、西文字符和汉字 逻辑数据 用一位表示。逻辑数据和数值数据在形式上并无差别，也是一串 0/1 序列，机器靠指令来别。

西文字符 拼音文字，用有限几个字母可拼写出所有单词；只对有限个字母和数学符号、标点符号等辅助字符编码；所有字符总数不超过 256 个，使用 7(或 8)个二进位可表示；常用编码为 ASCII 码。

汉字有以下几种汉字代码： ==输入码==：对汉字用按键进行编码，用于输入；

==内码==：用于在系统内存储、查找、传送等处理；

变化过程：码表区位码(加 20H)---> GB2312 国标码(高位变 1)--->内码

解释：码表由 94 行、94 列组成，行号为区号，列号为位号，各占 7 位；区号和位号各自加上 32（20H），得到其“国标码”；国标码中区号和位号各占 7 位，前面添一个 0，构成一个字节；为与 ASCII 码区别，将国标码的两个字节的第一位置“1”得到汉字内码。

==字模点阵或轮廓描述==: 描述汉字点阵或轮廓，用于显示/打印。

（三）数据的宽度、存储排列、纠/检错

==比特==（bit）是计算机中处理、存储、传输信息的最小单位； ==字节==(Byte)，也称“位组”。存储器按字节编址；字节是最小可寻址单位 (addressable unit )。 ==字长==：定点运算数据通路的宽度。字长等于 CPU 内部总线的宽度、运算器的位数、通用寄存器的宽度等。 ==字==用来度量数据类型的宽度。

储存 ISA 设计时要考虑的两个问题： • 大小端问题大端方式: MSB 的地址是数的地址；大端方式: MSB 的地址是数的地址。 • 字的边界对齐问题按边界对齐（假定字的宽度为 32 位，按字节编址）

字地址：4 的倍数(低两位为 0)
半字地址：2 的倍数(低位为 0)
字节地址：任意不按边界对齐好处：节约空间；坏处：可能会增加访存次数。

纠错、检错 元器件故障或噪音会使数据出现差错。措施： (1) 通过电路、布线等方面提高的抗干扰能力； (2) 进行数据检错和校正，发现并纠正错误。

例如：增大码距可提高检错纠错能力。

==码距==：若干位代码组成的一个字叫==码字==（数据校验中“码字”指数据位和校验位排列得到的代码）两个码字中不同位的个数叫它们的==距离==；码制中所有码字间最小距离为码距，即码制的距离。  常用的数据校验码有： ==奇偶校验码==、==海明校验码==、==循环冗余校验码==。 • 奇偶校验：适应于一字节长数据的校验，如内存 • 海明校验：各组内用奇偶校验，用于内存储器数据的校验 • 循环冗余校验：用在通信和外存中，适合于大批量数据校验

四、运算方法及部件

（一）高级语言和机器指令中的运算

算术运算 整数算术运算、浮点数算术运算 按位运算 用途：对位串实现“掩码”（mask）操作或相应的其他处理 逻辑运算 与、或、非与按位运算的差别

符号表示不同：& - && ......
运算过程不同：按位 - 整体
结果类型不同：位串 - 逻辑值 移位运算 • 用途
提取部分信息
扩大或缩小数值的 2、4、8…倍 • 操作
左移：x<<k; 右移： x>>k
由 x 的类型决定移位的类型
无符号数：==逻辑移位==（逻辑移位:空位补 0；）
带符号整数：==算术移位==（算术左移:低位补 0;算术右移: 高位补符号。）右移：低位移出，高位补符号，可能发生有效数据丢失。 位扩展和位截断运算 • 用途
类型转换时可能需要数据扩展或截断 • 操作
无专门运算符，由类型转换前后数据长短确定是扩展还是截断
==扩展==：短转长无符号数：0 扩展，前面补 0 带符号整数：符号扩展，前面补符
==截断==：长转短强行将高位丢弃，故可能发生“溢出”

实现 MIPS 定点和浮点运算指令的思路：先实现一个能进行基本算术运算（加/减）和基本逻辑运算的 ALU；再由 ALU 和移位器实现乘、除、浮点运算器。

（二）ALU（划重点）

话不多说，先上图： ==算术逻辑单元==(arithmetic and logic unit)，简称==ALU==。 ALU 可进行加/减算术运算和逻辑运算。其核心部件是加法器。

加法器 半加器；全加器；串行进位加法器；并行进位加法器。

==超前进位加法器==(Carry Look-Ahead)，简称==CLA==加法器。 CLA 加法器由进位生成/传递部件、CLA 部件和求和部件构成。实现 Si=Pi⊕Ci 的电路称为==求和部件==

==局部（单级）CLA 加法器== ==带标志加法器== 加法器需要增加逻辑门生成标志信息。溢出标志 OF= Cn⊕Cn-1 符号标志 SF=Fn-1 零标志 ZF 进位借位标志 CF=Cout ⊕ Cin ==ALU 的核心部件==是带标志位加法器。 A、B 为 n 位输入端。ALUop 操作控制端。下图中可进行与、或、加运算。

（三）定点数运算及其运算部件

无符号数的按位逻辑运算可用逻辑门实现；逻辑移位可用移位器实现；带符号数的算术移位、无符号和带符号数的位扩展和截断也可用简单电路实现。

加减公式 [A+B]补 = [A]补 + [B]补 ( mod 2n ) [A–B]补 = [A]补 + [–B]补 ( mod 2n )

[–B]补=[B]补取反+1 (取反时含符号位)

标志位作用 零标志 ZF、符号标志 SF、进/借位标志 CF、溢出标志 OF 称为==条件标志==。条件标志在运算电路中产生，记录到专门寄存器。称为程序状态字寄存器或==标志寄存器==。

零标志 ZF=1 当 F=0；有符号数的符号标志 SF：SF=Fn-1 (无符号数的符号位没有意义）有符号数溢出标志 OF：OF=Cn 异或 Cn-1 (不必关心无符号数溢出，模 2n）无符号数进位/借位标志 CF：CF=Cout 异或 Cin (不必关心有符号数进位/借位）

对加减运算电路认识 1.所有算术运算都基于加法器实现； 2.加法器不知道所算的是带符号数还是无符号数； 3.加法器不判定对错，总是取低 n 位作为结果，并生成标志信息。

原码乘法 可用 ALU 和移位器来实现乘法。

手工乘法的特点： ① 每步计算：X×y~i~，若 y~i~ = 0，则得 0；若 y~i~ = 1，则得 X ② 把 ① 求得的各项结果 X× yi 逐次左移，表示为 X× y~i~×2^-i^ ③ 对 ② 中结果求和，即 (X× y~i~×2^-i^)求和即为两数的乘积  计算机稍作改进： ① 每次得 X×y~i~后，与前面的结果累加得到 P~i~，称之为部分积，减少了保存各次相乘结果的开销。 ② 每次得 X×y~i~后，不是左移与 P~i~相加，而将 P~i~右移后与 X×y~i~相加。因为加法运算始终对部分积中高 n 位进行，故用 n 位加法器可实现二个 n 位数相乘。 ③ 对乘数中为“1”的位加并右移，对为“0”的位只右移，不加。

补码乘法 校正法 ...... 布斯算法 ......

快速乘法器 设计快速乘法部件的必要性： • 乘法运算耗时多 • 比例大，大约 1/3 是乘法运算 ==快速乘法器==的实现（由特定功能的组合逻辑单元构成）如：阵列乘法器 ==阵列乘法器==是原码乘去掉符号位，即为无符号数乘法。

除法运算 手算除法的基本要点 ① 被除数与除数相减，够减则上商为 1；不够减则上商为 0。 ② 每次得到的差为中间余数，将除数右移后与上次的中间余数比较。够减则上商为 1；不够减则上商为 0。 ③ 重复执行 ②，直到商的位数足够。 带符号除法 ==原码除法==： ==恢复余数法==； ==不恢复余数法==。

==补码除法==： ==补码恢复余数法==； ==补码不恢复余数法==。

（四）浮点数运算及其运算部件

浮点数运算 加减法要点 基本要点： 乘除法要点 基本要点 (1) 求阶： Xe + Ye - 127 或者 Xe - Ye + 127 (2) 尾数相乘除： Xm */Ym （原码乘/除） (3) 两数符号相同结果为正；相异为负； (4) 结果的尾数高位为 0 需左规；最高位有进位需右规。 (5) 若尾数比规定的长，则需舍入。 (6) 若尾数是 0，则阶码也置 0，结果为 0。 (7) 阶码溢出判断

五、指令系统

指令

一条指令须包含的信息 操作码：操作类型 (操作码长度：固定／可变) 源操作数：一个或多个源操作数的地址 (操作数来源：指令本身/寄存器/主存/I/O 端口）目的操作数：结果存放何处 (结果地址：寄存器/主存/I/O 端口) 下一条指令地址： (正常隐含在 PC 中，跳转时由指令给出）

（二）指令类型和格式

指令格式的基本原则 1 应尽量短 2 操作码位数要足够 3 有唯一的解释 4 指令长度应是字节的整数倍 5 地址字段的个数应合理 6 指令尽量规整

（三）数据类型

操作数的基本类型： ==地址==（指针）无符号整数，用来确定主(虚)存地址 ==数值数据== 定点数(整数)：用二进制补码表示浮点数(实数)：IEEE754 ==位、位串、字符和字符串== 用来表示文本、声音和图像等 ==逻辑(布尔)数据== 按位操作（0-假／1-真）

这些操作数都存放在寄存器或内存单元中

（四）操作数的寻址方式

– 立即 / 寄存器 / 寄存器间接 / 直接 / 间接 / 堆栈 / 偏移顾名思义。

（五）操作码的编码

操作码的编码有两种方式 -- 定长操作码 -- 扩展操作码

指令字也可定长或变长 --定长指令字 -- 变长指令字

• 代码长度更重要时：变长指令字、变长操作码，存储更紧凑； • 性能更重要时：定长指令字、定长操作码，访问和译码更快速。

指令长度与操作码长度是否可变没有绝对关系。操作码定长不一定指令字定长；操作码变长指令字一般变长。

（六）指令系统

指令设计风格 – 按操作数地址指定方式来分：累加器型、堆栈型、通用寄存器型、load/store 型 – 按指令的复杂度来分：复杂指令集计算机 CISC (Complex Instruction Set Computer) 精简指令集计算机 RISC (Reduced Instruction Set Computer)

指令系统举例 MIPS 特点概述： • 所有指令都是 32 位； • 有些指令有 26 位目标地址；有些只有 16 位。 • 所有动作在 1 个时钟周期内完成； • 所有运算都是 32 位的，没有字节和半字的运算； • MIPS 指令固定 4 个字节，x86 平均长度 3 个字节，所以一般二进制文件比 x86 大； • 寻址方式：只有一种内存寻址方式，即基地址加 16 位偏移地址； • 没有栈指令 PUSH 和 POP，对栈的操作都是统一的内存访问方式。 • 子函数的返回地址不存到栈中，而是存到$31 寄存器。

六、CPU

（一）单周期数据通路的设计

CPU 的功能 CPU 执行指令。

每条指令都由四种基本操作实现：主存 --->寄存器（取指，取数）寄存器 --->主存（存结果）寄存器 ---> 寄存器或者 ALU（取数，存结果）算术或逻辑运算（运算，计算地址，PC 计算）

操作功能用==RTL(Register Transfer Language)==描述 RTL 通常规定：（1）用 R[r]表示寄存器 r 的内容；（2）用 M[addr]表示主存单元 addr 的内容；（3）传送方向用“←”表示，传送源在右，传送目的在左；（4）直接用 PC 表示其内容。

数据通路的位置 ==数据通路==：指令执行过程中数据经过的路径，包括路径中的部件，是执行部件。（数据通路是由操作元件和存储元件通过总线方式或分散方式连接而成的进行数据存储、运算和传送的路径。） ==数据通路组成==： • 组合逻辑元件（也称操作元件） • 时序逻辑元件（也称状态元件，存储元件）数据通路中的状态元件有两种：寄存器(组) + 存储器 ==数据通路的功能==： • 进行数据传送、运算、存储

单周期数据通路的设计

单总线一个时钟只传一个数据，效率低。多总线同时传送数据，提高效率

选择 MIPS 指令集的一个子集作为 CPU 的实现目标

MIPS 的三种指令类型： °R: ADD and SUB • add rd, rs, rt • sub rd, rs, rt °I: OR Immediate: • ori rt, rs, imm16 °I: LOAD and STORE • lw rt, rs, imm16 • sw rt, rs, imm16 °I: BRANCH: • beq rs, rt, imm16 °J: JUMP: • j target

• 下条指令地址计算与取指令部件 30 位 PC，三路选择：顺序、Branch（结合标志 Zero）、Jump • R 型指令的数据通路 ALU 两个操作数来自 rs 和 rt，结果写到 rd • 访存指令的数据通路符号扩展，数据在 rt 和主存单元中交换 • 立即数运算指令的数据通路 0 扩展后的操作数送到 ALU 的一个输入端 • 分支和跳转指令的数据通路

综合所有指令的数据通路

一个单周期数据路径：

（二）单周期控制器的设计

控制器的功能：指令译码，生成控制信号，控制数据通路的动作，是控制部件。

考察每条指令的执行过程和涉及到的控制信号的取值 • 公共操作：取指令和计算下址 PC • R-Type 指令（add / sub） • 立即数指令（ori） • 访存指令（lw / sw） • 分支指令（beq） • 跳转指令（j） 汇总各指令的控制信号取值 • 分两类控制信号：直接送往数据通路 / 送往局部控制单元 分析 ALU 操作对应的控制信号与 func 字段之间的关系

设计 ALU 局部控制单元 局控的另一支路是 R 型指令，ALUctr 由 func 决定，需要根据 func 写出 ALUctr 的表达式

设计主控制单元

（三）微程序控制器设计与异常处理

**硬连线路控制器设计的优点和缺点 ** 优点：速度快，适合于简单或规整的指令系统，例如，MIPS 指令集。缺点：结构庞杂，实现困难；修改、维护不易；灵活性差。

**微程序设计控制器的基本思想 ** 基本思想： • 仿照程序设计，为每个指令编制微程序； • 每个微程序由若干条微指令构成，各微指令包含若干条微命令（一条微指令相当于一个状态，一个微命令就是状态中的控制信号） • 执行时依次取出微指令，译码产生微命令(即控制信号)。 • 存储器称为控制存储器(Control Storage)，简称控存 CS 。特点：灵活，但速度慢。适用于复杂指令集。

**微程序、微指令、微操作和微命令的概念及其关系 ** ==微程序==是一个微指令序列；每条==微指令==是一个 0/1 序列，其中包含若干个微命令（即：控制信号）； ==微命令==控制数据通路的执行

**微指令格式设计 ** • ==微操作码==字段

水平微程序：不译法、字段直接编译法、字段间接编译法
垂直微程序：垂直编译法 • 下条微指令地址确定方式
增量法（计数器法）
断定法（下址字段法）下条微指令有四种情况： • 取指微程序：每条指令一定先执行取指微程序。 • 第一条微指令：取指后转到该指令的第一条微指令。 • 顺序执行时：顺序取下条微指令。 • 分支执行时：根据不同指令选择下条微指令。

MIPS 指令子集的微程序控制器设计 ......

异常和中断的处理

° 程序执行被 “中断” 的事件有两类 • ==内部“异常”==：在 CPU 内部发生的意外事件或特殊事件按发生原因分为硬故障中断和程序性中断两类硬故障中断：如电源掉电、硬件线路故障等程序性中断：执行某条指令时发生的“例外(Exception)”，如溢出、缺页、越界、非法指令、除数为 0、堆栈溢出、访问超时、断点设置、单步、系统调用等 • ==外部“中断”==：在 CPU 外部发生的特殊事件，外部中断是一种 I/O 方式，通过“中断请求”信号向 CPU 请求处理。如实时钟、控制台、打印机缺纸、外设准备好、采样计时到、DMA 传输结束等。

内部“异常” 按处理方式分为故障、自陷和终止三类： ==故障(fault)== ：执行指令引起的异常事件，如溢出、缺页、堆栈溢出、访问超时等。 ==自陷(Trap)== ：预先安排的事件，如单步跟踪、系统调用(执行访管指令)等。是一种自愿中断。 ==终止系统(Abort)== ：硬故障事件，机器将“终止”，调出中断服务程序来重启操作系统。

外部中断处理： 1.关中断； 2.保护断点和程序状态； 3.识别异常事件。（软件识别（MIPS 采用）、硬件识别（中断向量）（80x86 采用））

（四）多周期处理器

特点: • 时钟周期短 • 不同指令所用周期数可以不同，如：

Load： 5 cycles
Jump： 3 cycles（前两个都一样） • 在一条指令中功能部件可以重复使用。如：
Adder + ALU（多周期时只用一个 ALU，在不同周期可重复使用）

软件体系结构

Fri, 06 Mar 2020 00:00:00 GMT

@[toc]软件体系结构

一、绪论

1、发展史

2、定义(组成派)

1993 年， D Garlan, M Shaw 提出软件架构包括 component、connector 和 constraint 三大要素。 软件设计过程中的一个层次，超越了计算过程中的算法设计和数据结构设计。 组件 component可以是一组代码，也可以是独立的程序； 连接件 connector用于表示组件之间的相互关系，可以是过程调用、管道和消息等； 约束 constraint为组件连接时的条件。

二、软件体系结构风格

1、体系结构风格

“风格”——经过长时间的实践，被证明具有良好的工艺可行性、性能与实用性，并可直接用来遵循与模仿 (复用)。

软件体系结构风格定义 描述特定领域中软件系统家族的组织方式的惯用模式(idiomatic paradigm)，反映了领域中众多系统所共有的结构和语义特性，并指导如何将各个模块和子系统有效地组织成一个完整的系统。

2、经典的体系结构风格

三、数据流体系结构风格

1、理解

2、批处理体系结构风格

定义 ➢ Components (processing steps) are independent programs (基本构件：独立的应用程序) ➢ Connectors are some type of media - traditionally tape (连接件：某种类型的媒质) ➢ Topology: Connectors define data flow graph (连接件定义了相应的数据流图，表达拓扑结构) ➢ Processing steps are independent programs（每个处理步骤是一个独立的程序） ➢ Each step runs to completion before next step starts（每一步必须在前一步结束后才能开始） ➢ Data transmitted as a whole between steps（数据必须是完整的，以整体的方式传递）

3、管道-过滤体系结构风格

直观理解 变换优点

➢ 使构件具有良好的隐蔽性和高内聚、低耦合的特点，可将整个系统的输入/输出行为看成多个过滤器的行为的简单合成； ➢ 支持软件复用，只要提供适合在两个过滤器之间传送的数据，任何两个过滤器都可被连接起来； ➢ 系统维护和增强系统性能简单，新的过滤器可以添加到现有系统中来，旧的可以被改进的过滤器替换掉； ➢ 允许对一些如吞吐量、死锁等属性的分析; ➢ 支持并行执行：每个过滤器是作为一个单独的任务完成，因此可与其它任务并行执行。

不足 ➢ 不适合处理交互的应用 ✓ 在早期对交互应用需求不高的情况下提出 ✓ 当需要增量地显示改变时，这个问题尤为严重 ➢ 系统性能不高，并增加了编写过滤器的复杂性 ✓ 数据传输缺乏通用标准，每个过滤器都增加了解析和合成数据的工作 ✓ 绝大部分处理时间消耗在格式转换上 ✓ 不适用于需要大量共享数据的应用设置

CSS 学习笔记

Thu, 26 Sep 2019 00:00:00 GMT

CSS 语法

CSS 结构

格式：镶嵌：

CSS 属性

background-color指定背景色

border段落边框

color改变字体颜色属性

font-family设置字体

border-bottom设置下边框

font-size字体大小

font-weight字体粗细

text-decoration更多样式

line-height行距

高级用法

link 外部链接

link 元素用来引入外部样式表

创建 first.css 文件

独立出 html，方便使用。

使用 class

用 class 属性将一个元素加入类中。使用“.”符号来选择类里的某个元素。

text-decoration

none取消文本修饰

line-through中划线

underline下划线

overline上划线

两个包含语义和文本修饰的 HTML 元素

ins插入内容，下划线。

del删除内容，中划线。

字体设置

盒模式

盒模式：CSS 控制元素显示的方式内容区、补白、边框、外边距

背景图片可以在内容和补白底下显示但是不能越过边框

设置补白、边框和外边距时可以分别设置各个侧面的属性 left, right, top, bottom

id 元素给元素设置页面唯一的名字使用“#”号选择 id 中的元素

页面

页面元素的结构化：div和span div 和 span 可以构建一些严格的支持结构 text-align：center 居中对齐

浮动布局设计

流

浏览器会一边走读文档，一边把路过的元素从左向右、从上向下放到合适位置。

内联元素：从左至右块元素：从上至下

display:none 把元素隐藏

CSS 基础

Sat, 07 Jan 2023 00:00:00 GMT

前言

作者述

众所周知啊，前端三件套是 HTML、CSS、JavaScript，浏览器只识别这三种规范，其他的任何高级技术都是先翻译（或编译）成这基础三样，再给浏览器处理的。

所以，只要把握住这三种规范，就能自然地理解新技术中到底节约了怎样的成本，也就能使用、改进、创造新的衍生技术，甚至为三件套新标准的制定建言献策。

加油吧~

预备知识

了解 HTML、CSS、JavaScript 基本语法
能用 CSS 实现简单样式

本文适合有一定使用经验的读者——能够在 web DevTools 中调整样式，但只是“能用而不能理解”的状态；或者能够实现并理解常用的代码功能，却对复杂要求和陌生（新规范）代码感到困惑。

本文目标

从历史宏观到技术细节的微观，全面提高理解力。我们将会学到：

CSS 版本区别与历史
代码编写规范与技巧
应用实例
衍生技术

CSS 历史版本

关于 web 标准

万维网联盟（W3C）创建于 1994 年，是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。它以工作组的方式，把某项技术的相关各方聚集起来，最终由他们来产出标准。

其中，CSS 规范通常是由 CSS 工作组的成员来编写的。该组的成员，九成左右是来自 W3C 会员公司的成员，余下小部分是“特邀专家”和“W3C 工作人员”。

web 标准中，每项规范从最初启动到最终成熟，都会经过以下阶段：

编辑草案（ED）
首个公开工作草案（FPWD）
工作草案（WD）
候选推荐草案（CR）
提名推荐草案（PR）
正式推荐规范（REC）

在 W3C 官网中可以查看到全部规范，以及他们的所处的阶段。比如 CSS 的各项规范，如下图所示：

关于 CSS 版本

CSS 1 的规范发表于 1996 年，大约能打印 68 页 A4 纸。

CSS 2 的规范发表于 1998 年，大约能打印 480 页 A4 纸。

CSS 2.1 纠正了 CSS 2 中的一些错误，并添加了一些已经被广泛实现的特性。

此时，已经不能用人脑全部记下来了。于是，查阅规范或文档就是常规操作了，这里推荐 MDN 的 CSS 文档，因为支持中文。如果没有解决疑问，仍建议到官网查看规范原文。

重大转折！

由于这门语言非常庞大，不再适合放在单个规范中，于是 CSS 工作组决定将 CSS 打散到多个不同的规范中，每个规范独立更新版本。

在 CSS 2.1 已有的特性，直接升级到 Level 3 这个版本号，而新添加的规范则从 Level 1 这个版本号开始。下面通过一些例子，来感受一下规范的拆分：

虽然 “CSS 3” 这种说法很流行，但是它并没有在任何规范中定义过。我们提到 “CSS 3”，指的是上面这些规范（还有更多没提及的）的集合。

由于独立更新，规范的版本号从 Level 1 到 Level 3 都存在，甚至后来还有 Level 4、Level 5 的版本。不过由于约定俗成，我们并没有 CSS 4、CSS 5 这种说法了，而是用 “CSS 3” 来指代一切新的 CSS 规范。

现在的 CSS 3 规范（其实是各个小的规范）仍在不断更新中，“浏览器支持 CSS 3”是指支持其中的 REC 阶段的规范，能用官方写法来编写代码。对某些实验阶段的规范（仍是草案阶段），浏览器想要支持，但又为了不和定稿的新规范冲突，所以采用加前缀的方法。比如 Firefox 的 -moz-，Opera 的 -o-，Safari 和 Chrome 的 -webkit-。

CSS 代码编写

关于编程理念

DRY（Don't Repeat Yourself）译为“不要重复已经做过的事”。

它是一种编程理念，旨在提高代码某方面的可维护性：在改变某个参数时，做到只改尽量少的地方，最好是一处。

在使用 CSS 代码时，通常需要考虑 DRY、可维护性、灵活性、轻量级、尽量符合标准。

举例：

// 视觉上，这两个总是一起改变的
font-size: 20px;
line-height: 30px;

// 新的写法，减少了修改的变量
font-size: 20px;
line-height: 1.5;

关于 @ 规则

应用举例： @media （媒体查询）可以针对不同的屏幕尺寸设置不同的样式。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

<style>
  /* 如果浏览器窗口小于 800px, 背景将变为浅蓝色： */
  @media screen and (max-width: 800px) {
    body {
      background-color: aqua;
    }
  }
</style>

关于预处理器

CSS 预处理器定义了一种新的语言，主要是通过用一种专门的编程语言，为 CSS 添加一些编程特性，再编译生成 CSS 文件。

现有流行库有 Sass(Scss)、Less、Stylus 等，目前，广泛使用的是 Less 和 Sass。

关于三种 CSS 预处理器的简介，除了官网文档，还推荐查阅这篇文章。

CSS 应用实例

有一个容易忽略的事情：CSS (Cascading Style Sheets)——层叠样式表，这名字怎么翻译的？该怎么去理解？

层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。

层叠是 CSS 的核心机制，理解了它才能以最经济的方式写出最容易改动的 CSS，让文档外观在达到设计要求的同时，也给用户留下一些空间，让他们根据需要更改文档的显示效果，例如调整字号。——摘自《CSS 设计指南》

肯定有读者会说："talk is cheap, show me the code。"那么，我们用两个例子来理解这个“层叠”。

梯形标签页

一般的标签可能是这样的方盒子样式：

如果想要更多的表现力，一般是修改边框，比如梯形的标签。

在这个在线示例中，有梯形标签页的实现参考。

先想想这样的样式怎样实现？

思路是：利用伪元素的 3D 旋转。

下面是逐步递进的样式实现例子，直接运行看看。

<style>
  html {
    background-color: rgb(151 90 219);
    display: flex;
    justify-content: space-around;
  }

  div {
    background: #58a;
    margin: 50px;
    float: left;
  }
</style>

<style>
  .div1 {
    transform: perspective(10px) rotateX(5deg);
  }

  .div2 {
    position: relative;
    display: inline-block;
    padding: 0.5em 1em 0.35em;
    color: white;
    background: blueviolet;
  }

  .div2::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #58a;
    transform: perspective(0.5em) rotateX(5deg);
  }

  .div3 {
    position: relative;
    display: inline-block;
    padding: 0.5em 1em 0.35em;
    color: white;
    background: bottom;
  }

  .div3::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #58a;
    transform: scaleY(1.3) perspective(0.5em) rotateX(5deg);
    transform-origin: bottom;
  }

  .div4 {
    position: relative;
    display: inline-block;
    padding: 0.5em 1em 0.35em;
    background: bottom;
  }

  .div4::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #ccc;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-bottom: none;
    border-radius: 0.5em 0.5em 0 0;
    box-shadow: 0 0.15em white inset;
    background-image: linear-gradient(
      hsl(327deg 96% 60% / 73%),
      hsl(232deg 61% 49% / 81%)
    );
    transform: scaleY(1.3) perspective(0.5em) rotateX(5deg);
    transform-origin: bottom;
  }
</style>

<!-- 如果直接3D旋转元素，则会导致内容非预期地变化 -->
<div class="div1">DIV1SNOFLY</div>
<!-- 文本没有变形了，只是背景的旋转轴在中心，导致上面凹陷、下面突出 -->
<div class="div2">DIV2SNOFLY</div>
<!-- 改变后不再突出，已经符合基本要求了 -->
<div class="div3">SNOFLYDIV3</div>
<!-- 添加更多样式 -->
<div class="div4">SNOFLYDIV4</div>

利用伪元素作为背景的梯形，留下了很大的灵活性，因为方便继续修改元素本身的样式。

各自负责一部分现在，最后再合起来一起达到目标效果。

简单饼图

先看看这个图，想想要怎么去实现：

直接打开代码运行看看，它也是分步骤去实现的，理解变化过程即可。

这里说一下思路：先用渐变画一个左绿右黑的圆，然后用绿色伪元素挡板绕着圆心旋转。

变个挡板颜色，看看实际的遮挡：

不一定要控制扇形图像本身，只要多层叠加起来的效果合理即可。

其他效果

问题很多，解决问题的办法也很多。

如果没有体会到层叠的好处，继续处理问题就好了。

推荐一个网站，有使用技巧讲解和实现效果。

CSS 衍生技术

前文提到的 CSS 预处理器，属于 CSS 的衍生技术之一，它是因为使用者遇到了某种困难而出现的。同样的，因为有其他困难需要面对，所以有其他衍生技术的出现。

主要问题

1、默认样式很丑，重新设计一套又很花时间，于是有了 UI 框架，基本上改改就能用。比如：bootstrap、Foundation、Less Framework、Pure、Skeleton、99lime HTML KickStart、Kube 等。

更进一步，结合 HTML 和 JS，干脆把功能封装，于是有了UI 组件库。比如下图所示：

2、当 CSS 代码难以维护时，可以通过编程的方式，减少代码、增加可维护性和复用性。

用 CSS 预处理器来写，就像用 react 来写 js 一样，易读易写，它们通常都支持“层级，mixin，变量，循环，函数”。

常见 CSS 预处理器：Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。

3、为了不用手动排查 CSS 代码的浏览器兼容性问题和性能问题，于是有了自动排查和优化 CSS 代码的 CSS 后处理器。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据 CSS 规范处理 CSS，让其更有效；目前最常做的是给 CSS 属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

另外还有 CSS 压缩工具，比如 clean-css，它可以删除 CSS 中一些无用的空格、评论以及每个选择器后面的分号等。

LESS 介绍

以 LESS 为例，看看预处理器的使用。

中文文档首页的概述非常建议阅读。

这里节选了两个功能：

导入（Importing）： “导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";

嵌套（Nesting）: Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

用 Less 语言我们可以这样书写代码：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。

你还可以使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示当前选择器的父级）：

.clearfix {
  display: block;
  zoom: 1;

  &::after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

还有很多特性和使用技巧...

结束语

本文很少提及 HTML 和 JS 相关的内容，为了降耦合，非必要不要用 JS 去控制 CSS 代码。但是一味降耦合，会导致 CSS 代码难以维护。在实际应用中，需要权衡取舍 JS 代码的使用。

JavaScript 事件循环深入

Tue, 21 Feb 2023 00:00:00 GMT

前言

作者述

笔者看了一个关于 JS 事件循环的视频——菲利普·罗伯茨：到底什么是 Event Loop 呢？ | 欧洲 JSConf 2014 。观后深有感悟，结合另一篇文章——浏览器是如何工作的：Chrome V8 让你更懂 JavaScript，整理思路、输出本文。

预备知识

具备 JS 基础理解
了解 JS 异步队列

注意：本文不适合零基础的读者。

本文目标

通过观察 JavaScript 代码在浏览器中的执行过程，理解 event loop ，顺便了解一下 JS 引擎的设计思路。

JS 引擎与 JS 代码

JS 引擎

众所周知啊，计算机的 CPU 只能执行其指令集所包含的机器指令或汇编指令，所以高级语言到机器语言的编译过程是不能省去的。

指令集的差异是客观存在的，为了使 JS 代码在不同环境中执行，就有了 JS 引擎去兼容各种指令集，然后编译出相应的汇编代码。

Google V8

浏览器中包含了渲染引擎和 JS 引擎，因为浏览器厂商很多，所以 JS 引擎也多种多样。

当然，优秀的技术和设计总是趋同的，这里介绍一款 JS 引擎：Google V8 。

V8 (Google)，用 C++ 编写，开放源代码，由 Google 丹麦开发，是 Google Chrome 的一部分，也用于 Node.js。

V8 最早被开发用以嵌入到 Google 的开源浏览器 Chrome 中，第一个版本随着第一版 Chrome 于 2008 年 9 月 2 日发布。

V8 率先引入了即时编译（JIT）的双轮驱动的设计（混合使用编译器和解释器的技术），这是一种权衡策略，混合编译执行和解释执行这两种手段，给 JavaScript 的执行速度带来了极大的提升。

为了优化 JS 代码的执行，V8 中还设计了更多的机制。感兴趣可以查看本文首段的那篇文章。

解释型语言

先引用《百度百科》的一段话：

解释型语言：程序不需要编译，程序在运行时才翻译成机器语言，每执行一次都要翻译一次。

相对于编译型语言存在的，源代码不是直接翻译成机器语言，而是先翻译成中间代码，再由解释器对中间代码进行解释运行。比如 Python/JavaScript / Perl /Shell 等都是解释型语言。

这种说法是很模糊的，举个例子：

对 JS 代码中的函数，V8 只会在函数调用时，编译一次函数然后执行。如果这个函数被多次调用，那么 V8 会缓存编译结果，以后就不用再编译了。

可以说，现代的 JS 均衡地混合了解释型语言和编译型语言的特点。

event loop

单线程

JavaScript 是单线程语言，它是不支持多线程并行执行代码的。

我们看到的异步代码的执行，比如处理 http 请求的同时执行其他代码，这个过程似乎是多线程的并行执行。

实际上不是的，因为支持多线程的是浏览器，而不是 JS 引擎。

JS 引擎只是依次处理执行栈中的帧，这个栈帧可能来自 JS 代码，也可能来自任务队列。

(图片来自另一篇文章，其描述的事件循环过程和前文视频中相同。也可以看看这篇译文。)

执行过程

一个有趣的事情：

setTimeout() 方法不是 ecmascript 规范定义的内容，而是属于 BOM 提供的功能。

我们可以在浏览器控制台中直接使用 setTimeout() 。

下面描述了一段示例代码的执行过程：（建议查看视频的第 12 分 40 秒）

1、开始执行：

2、入栈当前任务(假设是 main )：

3、入栈第一句代码，执行、出栈：

4、入栈第二句代码，执行：

5、第二句代码主体执行完成，定时器给 webapi 执行：

6、第二句代码出栈：

7、第三句代码入栈，执行、出栈：

8、当前任务执行完成，main() 出栈：

9、计时器执行完成，回调函数转入任务队列：

10、计时器函数清除：

11、当前任务——回调函数 cb 入栈：

12、第一句代码入栈，执行、出栈：

13、当前任务 cb 执行完成，出栈：

优先级考虑

上面的步骤就是这段代码的执行过程了。其中，值得注意的地方有：

1、定时器是 webapi 处理的，也就是说，定时器的等待时间是指 cb 在 webapi 中的等待时间，而 cb 再回到栈中执行的时间是不确定的。

2、当 main() 执行完成时，先查询任务队列。此时任务队列为空，于是 JS 引擎会再去取新的任务(比如 main2())执行。

3、当栈为空，且任务队列中有等待执行的任务时，会取任务队列中的任务入栈执行。

4、任务队列内部的任务，存在优先级（也就是插队）的机制。

宏任务和微任务

理论

JS 中的任务可以分为同步和异步。按照上图，同步代码会先于异步代码执行，栈空之后，才有可能执行异步代码。

这里有个问题：如果有段异步代码在 webpai 中处理很慢，但是它很重要，处理完后需要优先执行，于是就需要插队。

目前的设计是：将任务队列就分为两个子队列，分别存放需要优先执行的任务(微任务)，和不需要优先执行的任务(宏任务)。

这两个队列就是微任务队列和宏任务队列，只有微任务队列清空时，才会执行宏任务队列。

这样，就能更细粒度地控制任务队列的执行顺序。

常见的划分：宏任务:常见的定时器,用户交互事件等。微任务:Promise 相关任务, MutationObserver 等。

代码

结合上面的理论，下面看一段代码的执行顺序。

function app() {
  setTimeout(() => {
    console.log("1-1");
    Promise.resolve().then(() => {
      console.log("2-1");
    });
  });
  console.log("1-2");
  Promise.resolve().then(() => {
    console.log("1-3");
    setTimeout(() => {
      console.log("3-1");
    });
  });
}
app();

它的输出是：

1-2
1-3
1-1
2-1
3-1

可以自己推导一下。

下面笔者推导一下执行过程：

1、执行同步代码，打印 1-2；

2、检查到同步代码全部执行完毕，开始访问任务队列。

3、优先访问微任务队列，发现有一个任务。

4、微任务入栈，开始执行。

5、微任务执行第一句，打印 1-3；

6、微任务执行第二句，创建计时器，给 webapi；

7、微任务执行完成，再次访问任务队列。

8、优先访问微任务队列，为空。

9、最后访问宏任务队列，存在两个宏任务。

10、第一个宏任务入栈，开始执行。

11、执行宏任务第一句，打印 1-1；

12、执行宏任务第二句，创建一个微任务给 webapi 。

13、该宏任务执行完成再次访问任务队列。

14、优先访问微任务队列，发现有一个任务。

15、微任务入栈，开始执行。

16、执行微任务第一句，打印 2-1 。

17、该微任务执行完成，再次访问任务队列。

18、优先访问微任务队列，为空。

19、最后访问宏任务队列，发现有一个任务。

20、该宏任务入栈，开始执行。

21、执行宏任务第一句，打印 3-1 。

22、该宏任务执行完成，再次访问任务队列。

23、任务队列为空，持续等待新任务。

到此，当前代码全部执行完成。

结束语

技术更迭日新月异，希望本文能对你有所帮助。

如果谬误，欢迎指正。

后记

额外的讨论（2024.06.20 补充）

下面是一段是未经实际验证的问答（符合我的理解和预期）：

笔者提问：

关于宏任务与微任务的执行顺序，现在有个场景需要明确。当浏览器 API 执行 io 任务完成后，生成了一个新的微任务，假设为任务 3，此时调用栈中在不断产生新的微任务，假设为任务 1、2、4、5。这五个微任务产生的时间依次为：1、2、3、4、5；那么请问，实际微任务的执行顺序是 1、2、4、5、3 还是 1、2、3、4、5 ？

chatGPT 3.5 答：

在 JavaScript 中，事件循环（Event Loop）处理宏任务（macro task）和微任务（micro task）时，遵循一定的顺序。以下是详细的解释：

宏任务包括：setTimeout、setInterval、I/O 操作等。
微任务包括：Promise 的 .then 回调、MutationObserver 等。

事件循环的执行顺序是：

从宏任务队列中取出第一个宏任务执行。
执行完当前宏任务后，处理所有的微任务队列，直到微任务队列为空。
然后，再从宏任务队列中取出下一个宏任务执行。
重复上述步骤。

在你描述的场景中：

任务 1 和任务 2 在 I/O 操作完成前产生。
浏览器 API 执行 I/O 任务完成后生成任务 3（这是一个新的微任务）。
随后，调用栈中又产生了任务 4 和任务 5。

根据事件循环的机制和微任务的特性：

I/O 操作完成生成任务 3 后，该任务会立即进入微任务队列，并且会在下一个事件循环开始前的微任务队列中排队。
因为任务 4 和任务 5 是在任务 3 之后产生的，所以它们会排在任务 3 之后。具体执行顺序如下：
I/O 操作完成后，任务 3 进入微任务队列。
由于任务 1 和任务 2 已经在微任务队列中，因此先执行任务 1 和任务 2。
接下来执行任务 3。
然后执行任务 4 和任务 5。

因此，微任务的执行顺序是 1、2、3、4、5。

总结来说，在这个场景下，微任务的执行顺序是 1、2、3、4、5。

回答完毕

验证思路大概如下（这个没有成功验证，还需要控制浏览器 API 将微任务推到微任务队列的时机）：

const fs = require("node:fs");

function app() {
  fs.readFile("./test.txt", (err, file) => {
    Promise.resolve().then(() => {
      console.log("3");
    });
    if (err) {
      console.error(err);
    } else {
      console.log("read complete:", file.toString());
    }
  });

  Promise.resolve().then(() => {
    console.log("1");
    Promise.resolve().then(() => {
      console.log("2");
      Promise.resolve().then(() => {
        console.log("4");
        Promise.resolve().then(() => {
          console.log("5");
        });
      });
    });
  });
}

app();

HTML 学习笔记

Sun, 22 Sep 2019 00:00:00 GMT

HTML 语法

HTML 结构

理解 1

用包围文本的成对标记告诉浏览器网页的结构。

整个语句称为一个元素。

我们也称一对开始标记和结束标记为匹配标记。

元素=开始标记+内容+结束标记

理解 2

有的网页上只有开始标记，没有结束标记

<img src="drinks.gif" />

这是只用一个标记作为速记符号的元素

理解 3

CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

理解 4

HTML 和 CSS 是用来创建网页的语言

HTML 用来标记网页结构，CSS 指定显示样式

网页通常应该有一个 html 元素，下面有一个 head 和一个 body 元素

理解 5

用块元素来创建网页，然后用内联元素修饰。

理解 6

使用 bgsound 标记只能添加声音文件，而且也不能显示和调整播放软件的控制面板。使用 embed 标记则可以插入各种各样的多媒体。

HTML 标签

注释 标签 !- - 内容 - -

head标签用于定义文档的头部，它是所有头部元素的容器。

body 元素定义文档的主体。

title 元素可定义文档的标题。浏览器通常把它放置在浏览器窗口的标题栏或状态栏上。当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

h1- h6 标签可定义标题。 h1 定义最大的标题。 h6 定义最小的标题。

p 标签定义段落。 p 元素会自动在其前后创建一些空白。

img 元素向网页中嵌入一幅图像。 img 标签从网页上链接图像。 img 标签创建的是被引用图像的占位空间。 src 属性的值是文件的路径，即 URL。

style 标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。 style 元素位于 head 元素中。

style标签可选的属性，定义 style 元素的内容。唯一可能的值是 "text/css"，表示 CSS。

a元素的内容是链接的标签，浏览器也有默认样式。内容可以是文字或图像。 “两点”表示父目录，一般站内链接用相对路径，站外用网址。

0l或者ul里面嵌套li标签可以表示分句 ordered list 有序列表 unordered list 无序列表

br表示换行，可以单独使用，不需要对应的斜线标签。概念：空元素("void")

q元素，用来标记网页中的“引用”

**blockquote>**块引用注意：块引用也会被看成一个段落，所以，要放在 p 的外面。

dl dt和dd标签自定义列表

bgsound背景音乐--设置背景音乐的标记语法格式： bgsound src="url" loop=" " src 指定声音文件的 URL 来源，即其路径，为必选属性； loop 指定声音文件的循环播放次数，其值为正整数可指定播放次数，值为-1 或 infinite 指定循环播放无限次

对比 embed embed src=" url" loop="" width=" " height=" " autostart="" type="" pluginspage="" src：指定多媒体文件的 URL 来源，即其路径，为必选属性； loop指定声音文件的循环播放次数，值为 true 可循环播放无限次，值为 false 只播放一次，false 为默认值 autostart指定对媒体文件在下载完后是否自动播放； width和height分别指定多媒体窗口的宽和高。值都为 0 时，类似背景音乐可隐藏面板； type指定多媒体的播放类型； pluginspage指定插件页面。

HTML 标签属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

HTML 超链接

"Markup" 标记。 “hypertext” 超链接。

属性：关于内容的附加信息也叫元信息（meta-information）

网页中的字符表示

如 < 表示为 &/lt;(同样，中间的斜线不要在意)

HTML 协议

理解 1

一个域名下可以有多个网站

URL

URL: Uniform Resource Locators 统一资源定位符

http 协议

HTTP: HyperText Transfer Protocol 超文本传输协议

HTTP 是一个简单的 “请求—响应” 协议就是通过 URL 帮助你寻找服务器上的资源，响应完成就立即断开连接，不保持连接状态。资源：如 HTML 文件、图片等。

使用 a 元素创建登陆点：三步曲找到网页中需要创建登陆点的地方用 a 元素把他围起来使用 a 元素的 id 属性定义登陆点的标识名

链接到一个新窗口使用target属性取值为"_blank"：每次都打开新窗口。

严格的 HTML

HTML：必不可少的元素！

记得使用 head 和 body

head 里没有 title

body 里只有块元素

块元素不嵌入内联元素块元素不嵌入 p 元素

列表只能包括列表项列表项可以是任何内容

blockquote 里面必须是块元素

使用 JavaScript 调用 API

Wed, 04 Jan 2023 00:00:00 GMT

前言

译者述

1、原文来自 Tania Rascia 个人网站上的一篇文章：How to Connect to an API with JavaScript。

2、这是一篇较易的入门介绍文章，发布于 2017 年 12 月 7 日。

3、翻译中会尽量遵照原意，也会加入译者的技术注释，以及选择更符合汉语文法的译句。

作者述

众所周知啊，使用 JavaScript 的大部分工作都是调用 API 。作为一个菜鸡，你可能被告知：多用用 API 就能知道用法了。如果你看到 API 的文档，但仍举手无措，那么这篇文章正好适合你。

我们将使用纯粹的 javaScript 编写一个非常简单的 web app，它从 API 中检索信息并在页面上展示。不需要服务端、依赖、构建工具或者其他复杂的内容。

预备知识

基本了解 HTML 和 CSS
基本了解 JS 语法和数据类型
基本了解 JSON 和 JS 对象工作原理（这篇链接的文章有完全的介绍）

其他知识下文会提及。

本文目标

我们将从头开始编写这个链接到吉卜力工作室 API 的应用，检索数据并在网站前端展示。这并不意味着需要用到 APIs 或 REST 的大量资源——只需要最少可用的数据来构建应用即可。我们将会学到：

什么是 API 。
学会使用 JavaScript 发出 HTTP GET 请求。
学会使用 JavaScript 创建一个用于展示的 HTML 元素。

表现的效果如图所示：

下面就开始了。

快速浏览

API 全称为 Application Program Interface，可以定义为：各种软件组件之间的一组通信方法。换句话说，一个 API 允许一个软件和另一个软件通信。

我们将特别关注 Web API，它能允许 Web 服务器与第三方软件交互。在这种情况下，Web 服务器使用 HTTP 请求与包含 JSON 数据的公开可用 URL 端点通信。如果现在对此感到困惑，那么读完本文就会明白了。

你可能很熟悉 CRUD app 的概念，它代表 Create、Read、Update、Delete（创建、读取、更新、删除）。任何编程语言都可以用各种方法来实现 CRUD app。一个 Web API 使用的 HTTP 请求对应着 CRUD 的动词。

Action	HTTP Method	Description
Create	POST	Creates a new resource
Read	GET	Retrieves a resource
Update	PUT/PATCH	Updates an existing resource
Delete	DELETE	Deletes a resource

假如你听说过 REST 和 REST 风格 API，它其实只是指一组遵循特定的架构风格的标准。大多数 web 应用都是这样，或者以符合 REST 标准为目标。总而言之，有很多术语、缩写、概念需要理解：HTTP、API、REST，所以感到困惑和受挫是正常的，特别是当 API 文档默认你已经知道这些知识的时候。

配置

我们的目标是什么？得到所有吉卜力工作室电影的数据，然后在网格中展示标题和描述信息。这里有个背景知识，吉卜力工作室是一家日本动画工作室，制作了几部电影，例如《千与千寻》——我的朋友克雷格启发我用它作为例子。

我们将从在新目录中创建 index.html 文件开始。项目最后只会包含 index.html 、 style.css 和 scripts.js 。这个 HTML 结构只是链接到 CSS 和 JavaScript 文件，加载字体、包含一个 id="root" 的 div 元素。它是完整的，不用再更改。我们将使用 JavaScript 添加所有要出现的内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Ghibli App</title>

    <link
      href="https://fonts.googleapis.com/css?family=Dosis:400,700"
      rel="stylesheet"
    />
    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <div id="root"></div>
    <script src="scripts.js"></script>
  </body>
</html>

由于本文关注的是 APIs 和 JavaScript 的概念，所以我不会解释 CSS 的工作原理。我们将新建一个 style.css 来创建网格。为了简洁处理，我只在下面列出了最相关的 CSS 结构，但你可以在这里复制完整的 CSS 代码。

#root {
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  border: 1px solid gray;
}

@media screen and (min-width: 600px) {
  .card {
    flex: 1 1 calc(50% - 2rem);
  }
}

@media screen and (min-width: 900px) {
  .card {
    flex: 1 1 calc(33% - 2rem);
  }
}

现在我们已经配置了 HTML 和 CSS，然后你可以创建 scripts.js，我们将从那一步继续。

连接 API

先来看看吉卜力工作室 API 文档，他可以帮助开发人员了解怎样使用 HTTP 请求进行资源交互，这对我们来说是非常有帮助的。由于 API 可以通过许多不同的方法访问—— JavaScript, PHP, Ruby, Python 等等 —— 大多数 API 的文档往往不会给出如何连接的具体说明。

从文档中得知，我们可以通过 curl 和常规 REST 调用发出请求，只是目前可能还不理解怎么操作。

获得 API 端点

首先，让我们转到电影部分。在右边你能看到 GET /films，它会展示 API 端点的 url，https://ghibliapi.herokuapp.com/films。点击该链接将显示一个 JSON 格式的对象数组。

如果你的浏览器上没有用于查看 JSON 文件的扩展，那么现在就添加一个，例如 JSON View。这将使读取 JSON 变得非常非常容易。请记住，如果你从未使用过 JSON，先阅读这篇必备的文章。

通过 HTTP 请求检索数据

在数据放到网站前端之前，先打开一个 API 连接。我们使用 XMLHttpRequest 对象，它可以打开文件、创建 HTTP 请求。

创建一个 request 并分配一个 XMLHttpRequest 对象给它。然后用 open() 方法打开一个新的连接，其中的参数需要指定请求类型为 GET，以及设置 API 端的 URL。请求完成后，我们可以访问 onload 函数中的数据。做完这些后，就可以发送请求了。

// 创建一个 request 并分配一个 XMLHttpRequest 对象给它
var request = new XMLHttpRequest();

// 用 open() 方法打开一个新的连接，其中的参数需要指定请求类型为 GET，以及设置 API 端的 URL
request.open("GET", "https://ghibliapi.herokuapp.com/films", true);

request.onload = function () {
  // 访问 onload 函数中的数据
};

// 发送请求
request.send();

此外，也可以使用 fetch API 和 async/await 来实现。

function getData() {
  const response = await fetch('https://ghibliapi.herokuapp.com/films')
  const data = await response.json()
}

处理 JSON 响应

现在我们接收到了从 HTTP 请求返回的响应，然后就可以处理它了。但是，响应是 JSON 格式的，我们需要将 JSON 转换为 JavaScript 对象才能使用。

使用 JSON.parse() 来序列化响应，然后创建 data 变量 —— JavaScript 数组对象，包含全部 JSON。再使用 forEach() 打印出全部的电影标题，验证处理操作的正确性。

// 使用 JSON.parse() 来序列化响应
var data = JSON.parse(this.response);

data.forEach((movie) => {
  // 打印出全部的电影标题
  console.log(movie.title);
});

查看控制台，可以看到 20 条电影数据，这说明成功了。

还有一件事：缺少一些错误处理的方法。如果使用了错误的 URL，或者资源本身有问题，导致没有显示任何内容，该怎么办？当发出 HTTP 请求时，返回响应中会带有 HTTP 状态码。“404”是最常见的响应，表示资源未找到，“200 OK” 是表示请求成功。

让我们将代码包装在 if 语句中，对 [200,399) 范围内的任何响应进行处理，并在请求失败时打印错误。你可以把 URL 弄乱测试看看。

// 开始访问 JSON 数据
var data = JSON.parse(this.response);

if (request.status >= 200 && request.status < 400) {
  data.forEach((movie) => {
    console.log(movie.title);
  });
} else {
  console.log("error");
}

下面是到目前为止的全部代码，scripts.js 文件。

var request = new XMLHttpRequest();

request.open("GET", "https://ghibliapi.herokuapp.com/films", true);
request.onload = function () {
  // Begin accessing JSON data here
  var data = JSON.parse(this.response);

  if (request.status >= 200 && request.status < 400) {
    data.forEach((movie) => {
      console.log(movie.title);
    });
  } else {
    console.log("error");
  }
};

request.send();

我们已经成功地使用 GET HTTP 请求来检索(或使用) API 端点，该 API 端点由 JSON 格式的数据组成。但是，我们仍然停留在控制台上——想要在网站的前端显示这些数据，需要通过修改 DOM 来实现。

展示数据

为了在网站前端展示信息，我们将使用 DOM，它实际上是一种 API，允许 JavaScript 与 HTML 通信。如果你没有用过 DOM，我为 DigitalOcean 写了《用 JavaScript 理解和修改 DOM 》，阐明了 DOM 是什么以及 DOM 与 HTML 源代码的区别。

(译者补充：DigitalOcean 是一家成立于 2012 年的总部设置在纽约的云主机商家。)

最后，我们的页面将包含一个 logo 和多个卡片——每张卡片是一部电影，有一个标题和一个段落，包含了电影名称和简介。下面是它的样子，只加载了必要的 CSS: 还记得吗？我们的 index.html 现在只有一个 root div —— < div id="root" / >，用 getElementById() 来访问它。我们现在可以简单地删除之前编写的所有代码，稍后将重新添加这些代码。

const app = document.getElementById("root");

如果你不是 100%确定 getElementById() 做了什么，在上面的代码中打印 app: console.log(app)，有助于理解过程中发生的事情。网站首要的是 logo，这是一个 img 元素。我们将使用 createElement() 创建图像元素。

const logo = document.createElement("img");

一个空的 img 没什么用，所以我们用 src 属性设置图片。

logo.src = "logo.png";

我们将创建另一个 div 元素并将其 class 属性设置为 container。

const container = document.createElement("div");
container.setAttribute("class", "container");

现在我们有了一个 img 和一个 div，我们只需要把它们放在网站上。我们将使用 appendChild() 方法将 logo img 和容器 div 附加到 app root。

app.appendChild(logo);
app.appendChild(container);

下面是完整的代码：

const app = document.getElementById("root");

const logo = document.createElement("img");
logo.src = "logo.png";

const container = document.createElement("div");
container.setAttribute("class", "container");

app.appendChild(logo);
app.appendChild(container);

保存后，在网站的前端，你会看到以下内容。

<div id="root">
  <img src="logo.png" />
  <div class="container"></div>
</div>

这是 Elements 中显示的，而不是在 HTML 源代码中存在——正如我链接的 DOM 文章中所解释的那样。现在我们要把之前的代码粘贴回去。最后要根据之前控制台打印出来的东西创建卡片元素。虽然粘贴全部代码，但是我们只关注 forEach() 中的内容。

data.forEach((movie) => {
  console.log(movie.title);
  console.log(movie.description);
});

我们使用 textContent 将 API 返回数据中的文本设置到 HTML 元素中。为了保持卡片元素宽度一致，我们使用 substring() 来限制 p 元素中的段落长度。

data.forEach((movie) => {
  // Create a div with a card class
  const card = document.createElement("div");
  card.setAttribute("class", "card");

  // Create an h1 and set the text content to the film's title
  const h1 = document.createElement("h1");
  h1.textContent = movie.title;

  // Create a p and set the text content to the film's description
  const p = document.createElement("p");
  movie.description = movie.description.substring(0, 300); // Limit to 300 chars
  p.textContent = `${movie.description}...`; // End with an ellipses

  // Append the cards to the container element
  container.appendChild(card);

  // Each card will contain an h1 and a p
  card.appendChild(h1);
  card.appendChild(p);
});

同理，前端 error 打印部分也将被替换为 marquee 元素！（我这样做只是为了好玩和演示，不要在任何实际应用中使用 marquee，也不要把我的话当真。）

const errorMessage = document.createElement("marquee");
errorMessage.textContent = `Gah, it's not working!`;
app.appendChild(errorMessage);

我们做完了!下面是最终的 scripts.js 代码。

const app = document.getElementById("root");

const logo = document.createElement("img");
logo.src = "logo.png";

const container = document.createElement("div");
container.setAttribute("class", "container");

app.appendChild(logo);
app.appendChild(container);

var request = new XMLHttpRequest();
request.open("GET", "https://ghibliapi.herokuapp.com/films", true);
request.onload = function () {
  // Begin accessing JSON data here
  var data = JSON.parse(this.response);
  if (request.status >= 200 && request.status < 400) {
    data.forEach((movie) => {
      const card = document.createElement("div");
      card.setAttribute("class", "card");

      const h1 = document.createElement("h1");
      h1.textContent = movie.title;

      const p = document.createElement("p");
      movie.description = movie.description.substring(0, 300);
      p.textContent = `${movie.description}...`;

      container.appendChild(card);
      card.appendChild(h1);
      card.appendChild(p);
    });
  } else {
    const errorMessage = document.createElement("marquee");
    errorMessage.textContent = `Gah, it's not working!`;
    app.appendChild(errorMessage);
  }
};

request.send();

之后使用完整的 CSS 样式，这里是最终产品的样子。同样，这里有链接可以查看在线 app 和源代码。

总结

恭喜，你使用纯 JavaScript 通过 HTTP 请求连接到 API。希望你能够更好地理解什么是 API 端点，浏览器如何通过请求和响应与第三方 API 数据通信，如何将 JSON 解析为 JavaScript 能够理解的数组和对象，以及如何只用 JavaScript 构建前端。

我们做到了这一切，而不用担心 Node.js、npm、Webpack、React、Angular、构建工具、jQuery、Axios 和其他流行的开发术语、依赖项和框架，这些东西可能会让你对最简单的形式下发生的事情感到困惑。

我希望这篇文章对你有用，也欢迎分享。

从兴趣和收益的角度优化 javascript 代码

Mon, 18 Nov 2024 00:00:00 GMT

前言

译者述

1、原文来自 romgrk 个人网站上的一篇文章： Optimizing Javascript for fun and for profit。

2、这是一篇关于 js 编码优化的文章, 发布于 2024 年 3 月 21 日。

3、翻译中会尽量遵照原意, 也会加入译者的技术注释, 以及选择更符合汉语文法的译句。

4、感谢阅读，欢迎指正。

正文

关于基准测试

我经常觉得 js 代码的执行速度远远不及最佳速度，而这仅仅是因为缺少适当的优化。本文是我收集的一些常用优化技术的总结。

注意，性能和可读性总是难以兼顾的，而至于怎么权衡，则是留给读者自己的问题。

我也注意到，要讨论优化问题，必须要先讨论基准测试(benchmarking)。如果一个函数只占实际总运行时间的一小部分，那么即使花几个小时对该函数进行微优化(micro-optimizing)——使其运行速度提高 100 倍，也是没有意义的。如果要进行优化，最先最重要的一步就是基准测试。我将在后文的优化要点中讨论这个主题。

还要注意，微基准测试(micro-benchmarks)通常是有缺陷的，可能后文中提到的微基准测试也存在缺陷。我已经尽了最大努力避免这些陷阱，但不要在没有基准测试的情况下盲目地应用后文提出的任何优化要点。

关于可运行示例

我尽可能在每个部分都留下了可运行的示例。它们默认显示我在我的机器上得到的结果（在 archlinux 上是 brave 122），但你也可以自己运行它们试试。

（译者注：这些示例包含一个初始值（作者机器上跑出来的结果），还包含一个可在线运行的脚本，本译文不处理改脚本。如果读者想运行程序看看效果，可以复制代码本地运行，或者去原文运行在线示例。）

虽然我不想这么说，但火狐浏览器在优化方面有点落后，而且只占市场份额的很小一部分，所以我不建议使用火狐浏览器的结果作为衡量的指标。

0 避免工作

这听起来很简单，但却是最优先的优化步骤：如果你试图优化，你应该首先考虑避免工作。这里有一些概念：缓存(memoization)、惰性计算(laziness)、增量计算(incremental computation)。它们将根据上下文以合适的方式应用。比如说在 React 中，就是使用 memo 、useMemo 和其他合适的语法。

1 避免字符串比较

Javascript 悄无声息地隐藏了字符串比较的实际开销。

如果你需要在 C 语言中比较字符串，你需要使用 strcmp 函数。而在 Javascript 中，使用 === 运算符，这样就看不见 strcmp 函数了。但它是存在的，字符串比较通常需要将字符串中的每个字符与另一个字符串中的字符进行比较，时间复杂度为 Ο(n)。

要避免的一种常见写法是字符串作为枚举。但随着 TypeScript 的出现，这应该很容易避免，因为 enum 默认是整数。

// No
enum Position {
  TOP = "TOP",
  BOTTOM = "BOTTOM",
}

// Yes
enum Position {
  TOP, // = 0
  BOTTOM, // = 1
}

这里是一个实际开销的比较：

// 1. string compare
const Position = {
  TOP: "TOP",
  BOTTOM: "BOTTOM",
};

let _ = 0;
for (let i = 0; i < 1000000; i++) {
  let current = i % 2 === 0 ? Position.TOP : Position.BOTTOM;
  if (current === Position.TOP) _ += 1;
}

// 2. int compare
const Position = {
  TOP: 0,
  BOTTOM: 1,
};

let _ = 0;
for (let i = 0; i < 1000000; i++) {
  let current = i % 2 === 0 ? Position.TOP : Position.BOTTOM;
  if (current === Position.TOP) _ += 1;
}

基准测试结果：

1、string 50.35%
2、int 100%

关于基准(benchmarks): 百分比结果表示：两段程序在 1 秒内的操作次数，除以两个操作数中的最大值。百分比更大，表示性能更好。

如上所示，两者差距显著。这种差异不一定是使用 strcmp 函数的开销，因为 JS 引擎有时会使用字符串池，然后通过引用来比较。

在 JS 引擎中，整数通常是按值传递的，字符串则是按引用（指针）传递的。内存访问的代价是昂贵的（见第五节），在字符串很多的代码中，这会产生很严重的影响。

举个现实的例子，我能够使这个 JSON5 js 解析器（遗憾的是，这个改动并没有被合并，但这就是开源的魅力之处）运行速度提高两倍，而改变仅仅是将字符串常量替换为数字。

2 避免不同的结构/形状

JS 引擎有一种默认的优化：先假设对象具有相特定的结构，且假设函数的参数对象具有相同的结构，然后就只需要存储一次对象的 keys，然后单独用一个数据存储对象的 values。

如下所示：

// 比如这些对象的结构是一致的
const objects = [
  {
    name: "Anthony",
    age: 36,
  },
  {
    name: "Eckhart",
    age: 42,
  },
  {
    name: "a",
    age: 1,
  },
  {
    name: "b",
    age: 2,
  },
  {
    name: "c",
    age: 3,
  },
  {
    name: "d",
    age: 4,
  },
  {
    name: "e",
    age: 5,
  },
  {
    name: "f",
    age: 6,
  },
  {
    name: "g",
    age: 7,
  },
  {
    name: "h",
    age: 8,
  },
  {
    name: "i",
    age: 9,
  },
  {
    name: "j",
    age: 10,
  },
];

// 于是，使用这样的存储结构，显然能够减少很多重复字符
const shape = [
  { name: "name", type: "string" },
  { name: "age", type: "integer" },
];

const objects = [
  ["Anthony", 36],
  ["Eckhart", 42],
  ["a", 1],
  ["b", 2],
  ["c", 3],
  ["d", 4],
  ["e", 5],
  ["f", 6],
  ["g", 7],
  ["h", 8],
  ["i", 9],
  ["j", 10],
];

关于术语的说明：我使用了 shap 这个词来描述这个概念，但要注意，你也可以使用 hidden class 或 map 来描述它，这取决于引擎。

（译者注：为了增加对比性，译者增加了示例的内容。另外，原文使用 shap 这个单词，但是翻译不是“形状”，而是“结构”，因为“结构”这个词更能说明数量和类型。）

举个例子，在运行时，如果下面这个函数，接收到的两个参数的结构都是 {x:number,y:number}, 那么引擎将推测未来的参数都是这样的结构，然后就能生成针对性的机器代码。

function add(a, b) {
  return {
    x: a.x + b.x,
    y: a.y + b.y,
  };
}

一旦传递的对象结构不再是 {x,y} —— 比如改为 {y,x}, 那么引擎就会撤销它的推测（相当于放弃这种优化），然后函数就会突然变得相当慢了。

我尽量减少相关的解释，如果你想了解更多细节，你应该去看看 mraleph 文章的解释。

这里我要强调的是，V8 中有 3 种特别的模式，以对应不同的访问方式:

单态 —— 只有一种结构
多态 —— 有 2-4 种结构
亚态 —— 5 种以上的结构

(译者述：原文描述为 monomorphic (1 shape), polymorphic (2-4 shapes), and megamorphic (5+ shapes))

要我说，你就应该保持单态模式，因为它的效率最高。

// setup
let _ = 0;

// 1. monomorphic
const o1 = { a: 1, b: _, c: _, d: _, e: _ };
const o2 = { a: 1, b: _, c: _, d: _, e: _ };
const o3 = { a: 1, b: _, c: _, d: _, e: _ };
const o4 = { a: 1, b: _, c: _, d: _, e: _ };
const o5 = { a: 1, b: _, c: _, d: _, e: _ }; // all shapes are equal

// 2. polymorphic
const o1 = { a: 1, b: _, c: _, d: _, e: _ };
const o2 = { a: 1, b: _, c: _, d: _, e: _ };
const o3 = { a: 1, b: _, c: _, d: _, e: _ };
const o4 = { a: 1, b: _, c: _, d: _, e: _ };
const o5 = { b: _, a: 1, c: _, d: _, e: _ }; // this shape is different

// 3. megamorphic
const o1 = { a: 1, b: _, c: _, d: _, e: _ };
const o2 = { b: _, a: 1, c: _, d: _, e: _ };
const o3 = { b: _, c: _, a: 1, d: _, e: _ };
const o4 = { b: _, c: _, d: _, a: 1, e: _ };
const o5 = { b: _, c: _, d: _, e: _, a: 1 }; // all shapes are different

// test case
function add(a1, b1) {
  return a1.a + a1.b + a1.c + a1.d + a1.e + b1.a + b1.b + b1.c + b1.d + b1.e;
}

let result = 0;
for (let i = 0; i < 1000000; i++) {
  result += add(o1, o2);
  result += add(o3, o4);
  result += add(o4, o5);
}

基准测试结果：

1. monomorphic: 100%
1. polymorphic: 13.07%
1. megamorphic: 4.09%

对此，我到底应该怎么办？

只需要保证你的对象都有相同的结构就行了。

但是说起来容易做起来难，即使是编写 recat 组件 props 顺序不同这样的事情，也会导致退出单态模式。

举个例子：我在 React 的代码库中发现了一个简单的例子，但在几年前他们有一个更严重的类似的问题 —— 他们用整数初始化了一个对象，但是又存储浮点数。

没错，改变 number 类型也会改变结构，number 隐含着 integer 和 float 两种类型。这是需要处理的。

关于 number 的表示：引擎通常可以将整数编码为值。例如，V8 以 32 位表示值，小整数作为紧凑的 Smi值，但浮点数和大整数像字符串和对象一样作为指针传递。 JSC 使用 64 位编码，双标记，按值传递所有数字，其余的作为指针传递。

3 避免数组或对象方法

我和大多数人一样喜欢函数式(functional)编程，但除非你在 Haskell/OCaml/Rust 这种能将“函数式代码”高效编译成“机器代码”的环境中工作，否则函数式总是慢于命令式(imperative)的。

const result = [1.5, 3.5, 5.0]
  .map((n) => Math.round(n))
  .filter((n) => n % 2 === 0)
  .reduce((a, n) => a + n, 0);

这些方法的问题在于：

1、它们需要生成数组的完整副本，这些副本稍后需要由 gc 释放。（我们在第五节会讨论内存 I/O 的更多细节） 2、它们对 N 个操作遍历 N 次，而 for 循环只需要遍历一次。

// setup:
const numbers = Array.from({ length: 10_000 }).map(() => Math.random());

// 1. functional
const result = numbers
  .map((n) => Math.round(n * 10))
  .filter((n) => n % 2 === 0)
  .reduce((a, n) => a + n, 0);

// 2. imperative
let result = 0;
for (let i = 0; i < numbers.length; i++) {
  let n = Math.round(numbers[i] * 10);
  if (n % 2 !== 0) continue;
  result = result + n;
}

基准测试结果：

1. functional: 36.51%
1. imperative: 100%

例如 Object.values(), Object.keys() 和 Object.entries() 等方法也存在类似的问题，因为它们也会申请分配更多的数据空间，而内存访问是所有性能问题的根源。

No really I swear，我会在第五节讨论内存问题。

（译者注：原文是：“No really I swear, I’ll show you in section 5.”，总感觉作者很皮。）

4 避免间接访问(Avoid indirection)

另一个优化收益的点是减少使用间接源(source of indirection) —— 主要是这三种间接源：

使用代理
多层嵌套访问
多层函数调用

const point = { x: 10, y: 20 };

// 1.
// Proxy 对象难以被优化，因为它们的 get/set 函数可能会运行自定义逻辑，所以引擎无法做出他们的一般假设。
const proxy = new Proxy(point, {
  get: (t, k) => {
    return t[k];
  },
});
// 有些引擎可以使代理成本消失，但这些优化是昂贵的，并且容易出错。
const x = proxy.x;

// 2.
// 通常被忽视，但通过 `.` 或 `[]` 访问对象也是一个间接源。在简单的情况下，引擎可能会优化掉这些成本：
const x = point.x;
// 但是，每个额外的访问都将增加成本，并且使引擎难以做出关于 point 状态的一般假设：
const x = this.state.circle.center.point.x;

// 3.
// 最后，函数调用也可能有成本。引擎通常能够内联这些函数：
function getX(p) {
  return p.x;
}
const x = getX(p);
// 但是，这并不能确保优化。例如，如果这个函数调用不是来自静态函数：
function Component({ point, getX }) {
  return getX(point);
}

目前，Proxy 的基准测试结果在 V8 上非常糟糕。上次我检查时，代理对象总是从 JIT 回退到解释器，从这些结果来看，情况可能仍然如此。

// 1. proxy access
const point = new Proxy({ x: 10, y: 20 }, { get: (t, k) => t[k] });

for (let _ = 0, i = 0; i < 100_000; i++) {
  _ += point.x;
}

// 2. direct access
const point = { x: 10, y: 20 };
const x = point.x;

for (let _ = 0, i = 0; i < 100_000; i++) {
  _ += x;
}

基准测试结果：

1. proxy access: 2.8%
1. direct access: 100%

我还想展示访问深度嵌套对象与直接访问的对比，但是当存在热循环(hot loop)和常量对象时，引擎非常擅长通过 escape 分析优化对象访问。于是我插入了一点间接的东西来防止这种优化。

// 1. nested access
const a = { state: { center: { point: { x: 10, y: 20 } } } };
const b = { state: { center: { point: { x: 10, y: 20 } } } };
const get = (i) => (i % 2 ? a : b);

let result = 0;
for (let i = 0; i < 100_000; i++) {
  result = result + get(i).state.center.point.x;
}

// 2. direct access
const a = { x: 10, y: 20 }.x;
const b = { x: 10, y: 20 }.x;
const get = (i) => (i % 2 ? a : b);

let result = 0;
for (let i = 0; i < 100_000; i++) {
  result = result + get(i);
}

基准测试结果：

1. nested access: 42.08%
1. direct access: 100%

5 避免缓存未命中

This point requires a bit of low-level knowledge, but has implications even in javascript, so I’ll explain. From the CPU point of view, retrieving memory from RAM is slow. To speed things up, it uses mainly two optimizations.

虽然这一节讨论的是底层知识，但在 javascript 中也有同样的影响，所以我会解释一下。从 CPU 的角度来看，从 RAM 中检索内存是缓慢的。为了加速，它主要使用两种优化。

5.1 预取(refetching)

第一种是预取(refetching)：它提前获取更多的内存，并希望这是你感兴趣的内存。

它总是猜测，如果你请求一个内存地址，那么你将对紧随其后的内存区域感兴趣。所以按顺序访问数据是关键。

在下面的示例中，我们可以观察到随机访问内存的影响。

// setup:
const K = 1024;
const length = 1 * K * K;

// 这些点是一个接一个创建的，所以它们在内存中是按顺序分配的。
const points = new Array(length);
for (let i = 0; i < points.length; i++) {
  points[i] = { x: 42, y: 0 };
}

// 这个数组包含与上面相同的数据，但以随机顺序排列。
const shuffledPoints = shuffle(points.slice());

// 1. sequential
let _ = 0;
for (let i = 0; i < points.length; i++) {
  _ += points[i].x;
}

// 2. random
let _ = 0;
for (let i = 0; i < shuffledPoints.length; i++) {
  _ += shuffledPoints[i].x;
}

基准测试结果：

1. sequential: 100%
1. random: 26.22%

我应该怎么办？

这方面可能是最难付诸实践的，因为 javascript 没有在内存中放置对象的方法。

但是你可以使用上文例子中的知识去优化：例如在顺序改变之前对数据进行操作。

你不能假设顺序创建的对象在一段时间后会保持在同一位置，因为 gc 可能会移动它们。

有一个例外，它是数字数组，最好是 TypedArray 实例：

// from this
const points = [
  { x: 0, y: 5 },
  { x: 0, y: 10 },
];

// to this
const points = new Int64Array([0, 5, 0, 10]);

查看更多详细的例子，查看这个链接。

请注意，它包含一些现在已经过时的优化，但总体上仍然是准确的。

5.2 L1/2/3 缓存(Caching in L1/2/3)

第二种 CUP 使用的优化是 L1/L2/L3 缓存：它们好比更快的 RAM，但也更昂贵，所以也更小。它们包含 RAM 数据，但充当 LRU 缓存。数据在工作时进入，并在新的工作数据需要空间时写回主 RAM。因此，这里的关键是使用尽可能少的数据来将工作数据集保存在快速缓存中。

在下面的示例中，我们可以观察破坏每个连续缓存后的影响。

// setup:
const KB = 1024;
const MB = 1024 * KB;

const L1 = 256 * KB;
const L2 = 5 * MB;
const L3 = 18 * MB;
const RAM = 32 * MB;

// 对于所有测试用例，我们将访问相同的缓冲区。
// 但是不同的测试用例，只会访问部分区间。比如第一个用例只会访问到 buffer 的 0 - L1 区间，第二个用例只会访问到 0 - L2 区间，以此类推。
const buffer = new Int8Array(RAM);
buffer.fill(42);

const random = (max) => Math.floor(Math.random() * max);

// 1. L1
let r = 0;
for (let i = 0; i < 100000; i++) {
  r += buffer[random(L1)];
}

// 2. L2
let r = 0;
for (let i = 0; i < 100000; i++) {
  r += buffer[random(L2)];
}

// 3. L3
let r = 0;
for (let i = 0; i < 100000; i++) {
  r += buffer[random(L3)];
}

// 4. RAM
let r = 0;
for (let i = 0; i < 100000; i++) {
  r += buffer[random(RAM)];
}

基准测试结果：

1. L1: 100%
1. L2: 78.06%
1. L3: 65.89%
1. RAM: 29.33%

我应该怎么办？

消除每一个可以消除的数据或内存分配。数据集越小，程序的运行速度就越快。内存 I/O 是 95% 的程序的瓶颈。另一个好的策略是将你的工作拆分，确保你每次只处理一个小的数据集。

更多 CPU 和内存的细节信息，可以查看这个。

关于不可变数据结构对于清晰度和正确性来说，不可变性是很好的，但是在性能方面，更新不可变数据结构意味着创建容器的副本，这就需要更多的内存 I/O 来刷新缓存。你应该尽可能避免不可变数据结构。

关于解构运算 {...rest} 它非常方便，但每次使用它时都会在内存中创建一个新对象。更多的内存 I/O，更慢的缓存！（More memory I/O, slower caches!）

6 避免大型对象

Hashmaps are prone to this because their data is usually randomly & evenly distributed over the memory region they occupy. Let’s see how it behaves with this map of some users indexed by their ID.

如第 2 节所述，引擎使用结构(shapes)来优化对象。

但是，当结构变得太大时，引擎别无选择，只能使用常规的 hashmap（如 Map 对象）。

正如我们在第 5 节中看到的，缓存缺失会显著降低性能。

hashmap 很容易出现这种情况，因为它们的数据通常是随机且均匀地分布在它们所占用的内存区域上。

让我们看看它是如何处理这个由用户 ID 索引的用户映射的。

// setup:
const USERS_LENGTH = 1_000;

// setup:
const byId = {};
Array.from({ length: USERS_LENGTH }).forEach((_, id) => {
  byId[id] = { id, name: "John" };
});
let _ = 0;

// 1. [] access
Object.keys(byId).forEach((id) => {
  _ += byId[id].id;
});

// 2. direct access
Object.values(byId).forEach((user) => {
  _ += user.id;
});

基准测试结果：

1. [ ] access: 43.18%
1. direct access: 100%

我们还可以观察到，随着对象大小的增长，性能是如何不断下降的：

// setup:
const USERS_LENGTH = 100_000;

基准测试结果：

1. [ ] access: 20.67%
1. direct access: 100%

我应该怎么办？

如上所示，避免频繁索引大型对象。最好事先将对象转换为数组。组织数据以获得模型上的 ID 会有所帮助，因为可以使用 Object.values()，而不必引用键映射来获取 ID。

7 使用 eval

有些 javascript 模式(patterns)很难针对引擎进行优化，通过使用 eval() 或其衍生物，可以使这些模式消失。

在这个例子中，我们可以看到 eval() 是如何避免“创建带有动态对象键的对象”的开销的：

// setup:
const key = "requestId";
const values = Array.from({ length: 100_000 }).fill(42);

// 1. without eval
function createMessages(key, values) {
  const messages = [];
  for (let i = 0; i < values.length; i++) {
    messages.push({ [key]: values[i] });
  }
  return messages;
}

createMessages(key, values);

// 2. with eval
function createMessages(key, values) {
  const messages = [];
  const createMessage = new Function(
    "value",
    `return { ${JSON.stringify(key)}: value }`
  );
  for (let i = 0; i < values.length; i++) {
    messages.push(createMessage(values[i]));
  }
  return messages;
}

createMessages(key, values);

基准测试结果：

1. without eval: 53.2%
1. with eval: 100%

eval 的另一个好的用例可能是编译一个过滤器谓词函数，在该函数中丢弃你知道永远不会使用的分支。

一般来说，任何将在热循环中运行的函数都是这种优化的良好候选者。

显然，关于 eval() 的常见警告仍然适用：不要相信用户输入，对传递到 eval() 代码中的任何内容进行消毒，并且不要创建任何 XSS 的可能性。还要注意，有些环境不允许访问 eval()，例如带有 CSP 的浏览器页面。

8 谨慎使用字符串

我们已经在前文看到字符串比它们表面上开销更大。

现在我有一个好消息和一个坏消息，总所周知，当然是先说坏消息：字符串比它们看起来更复杂。然后是好消息：但它们也可以非常有效地被使用。

基于上下文关系，字符串的操作是 JavaScript 的核心部分。

为了优化存在大量字符串的代码，JS 引擎的作法必须具有创造性。

我的意思是，他们必须根据实际情况，使用 c++ 中的"多字符串形式"(multiple string representation)来表示 String 对象。

这里有两种一般情况值得关注，因为它们适用于 V8(到目前为止最常见的引擎)，通常也适用于其他引擎。

首先，用 + 连接字符串的操作，不会创建两个输入字符串的副本，而是创建一个指向每个子字符串的指针。

如果是 typescript 中的话，应该是这样的：

class String {
  abstract value(): char[] {}
}

class BytesString {
  constructor(bytes: char[]) {
    this.bytes = bytes
  }
  value() {
    return this.bytes
  }
}

class ConcatenatedString {
  constructor(left: String, right: String) {
    this.left = left
    this.right = right
  }
  value() {
    return [...this.left.value(), ...this.right.value()]
  }
}

function concat(left, right) {
  return new ConcatenatedString(left, right)
}

const first = new BytesString(['H', 'e', 'l', 'l', 'o', ' '])
const second = new BytesString(['w', 'o', 'r', 'l', 'd'])

// 看嘛，没有真的复制!
const message = concat(first, second)

其次，字符串切片的操作，也不需要创建副本：它们可以简单地指向另一个字符串中的范围。

继续用上面的例子：

class SlicedString {
  constructor(source: String, start: number, end: number) {
    this.source = source;
    this.start = start;
    this.end = end;
  }
  value() {
    return this.source.value().slice(this.start, this.end);
  }
}

function substring(source, start, end) {
  return new SlicedString(source, start, end);
}

// 这能表示 "He"，但它仍然不包含任何数据副本。
const firstTwoLetters = substring(message, 0, 2);

但这里有一个问题：一旦你需要去改变这些 bytes，那么就是开销复制成本的时刻。

让我们回顾 String 类，然后尝试添加一个 .trimend 方法：

class String {
  abstract value(): char[] {}

  trimEnd() {
    const bytes = this.value()
    const result = bytes.slice()
    while (result[result.length - 1] === ' '){
      result.pop()
    }
    return new BytesString(result)
  }
}

那么让我们来看一个例子，在这个例子中，我们比较了使用突变操作和只使用连接操作：

// setup:
const classNames = ["primary", "selected", "active", "medium"];

// 1. mutation
const result = classNames.map((c) => `button--${c}`).join(" ");

// 2. concatenation
const result = classNames
  .map((c) => "button--" + c)
  .reduce((acc, c) => acc + " " + c, "");

基准测试结果：

1. mutation: 37.43%
1. concatenation: 100%

我应该怎么办？

一般来说，尽量避免突变。这包括 .trim() .replace() 等方法。考虑一下如何避免这些方法。在某些引擎中，字符串模板也可能比 + 操作慢。目前在 V8 中是这样的，但将来可能不会，所以还得靠基准测试。

关于上面的 SlicedString 的注意事项：如果我们使用的字符串，是内存中的一个非常大的字符串的子字符串，它可能会阻止 gc 收集大字符串！

如果你正在处理大文本并从中提取小字符串，则可能会泄漏大量内存。

const large = Array.from({ length: 10_000 })
  .map(() => "string")
  .join("");
const small = large.slice(0, 50);
//    ^ will keep `large` alive

这里的解决方案是使用对我们有利的变异方法。

如果我们改变小字符串的一个字符，那么小字符串将被强制复制，并且原来指向大字符串的指针将丢失：

// replace a token that doesn't exist
const small = small.replace("#".repeat(small.length + 1), "");

有关更多细节，请参阅 V8 中的 string.h 或 JavaScriptCore 中的 JSString.h。

关于字符串复杂性: 我很快浏览了一遍，但是有很多实现细节增加了字符串的复杂性。每种字符串表示通常都有最小长度。例如，连接字符串可能不适用于非常小的字符串。或者有时存在限制，例如避免指向子字符串的子字符串。阅读上面链接的 c++ 文件可以很好地了解实现细节 —— 即使只是阅读注释。

9 使用专业化(specialization)

性能优化中的一个重要概念是专业化：调整代码逻辑以适应特定用例的约束。这通常意味着弄清楚哪些条件可能适合你的例子，并针对这些条件进行编码。

假设我们是一个商家，有时需要将标签添加到产品列表中。根据经验，我们知道标签通常是空的。知道了这些信息，我们就可以针对这种情况对函数进行专门的优化：

// setup:
const descriptions = ["apples", "oranges", "bananas", "seven"];
const someTags = {
  apples: "::promotion::",
};
const noTags = {};

// 将产品转换成字符串，再加上可能存在的标签
function productsToString(description, tags) {
  let result = "";
  description.forEach((product) => {
    result += product;
    if (tags[product]) result += tags[product];
    result += ", ";
  });
  return result;
}

// 现在来优化一下啊
function productsToStringSpecialized(description, tags) {
  // 我们知道 `tags` 很可能是空的，所以我们提前检查一次，然后我们就可以从内部循环中删除 `if` 检查
  if (isEmpty(tags)) {
    let result = "";
    description.forEach((product) => {
      result += product + ", ";
    });
    return result;
  } else {
    let result = "";
    description.forEach((product) => {
      result += product;
      if (tags[product]) result += tags[product];
      result += ", ";
    });
    return result;
  }
}
function isEmpty(o) {
  for (let _ in o) {
    return false;
  }
  return true;
}

// 1. not specialized
for (let i = 0; i < 100; i++) {
  productsToString(descriptions, someTags);
  productsToString(descriptions, noTags);
  productsToString(descriptions, noTags);
  productsToString(descriptions, noTags);
  productsToString(descriptions, noTags);
}

// 2. specialized
for (let i = 0; i < 100; i++) {
  productsToStringSpecialized(descriptions, someTags);
  productsToStringSpecialized(descriptions, noTags);
  productsToStringSpecialized(descriptions, noTags);
  productsToStringSpecialized(descriptions, noTags);
  productsToStringSpecialized(descriptions, noTags);
}

基准测试结果：

1. not specialized: 85.71%
1. specialized: 100%

这种类型的优化可以只给你适度的改进，但这些会累积起来。它们是对更关键的优化(如形状和内存 I/O)的一个很好的补充。

但请注意，一旦条件发生变化，反而可能造成负面效果，因此在应用此方法时要小心。

分支预测和无分支代码: 从代码中删除分支可以非常有效地提高性能。有关分支预测器的更多细节，请阅读经典的堆栈溢出回答为什么处理排序数组更快。

10 数据结构

我不会详细介绍数据结构，因为它们需要单开一章。

但是请注意，如果你的用例使用了不正确的数据结构，那么可能会产生比上述任何优化更大的负面效果。

我建议你熟悉一下原生的 Map 和 Set ，然后了解一下链表、优先级队列、树（RB 和 B+），最后尝试用一下。

但是作为一个简单的例子，让我们比较一下 Array.includes 和 Set.has 在一个小列表中的表现：

// setup:
const userIds = Array.from({ length: 1_000 }).map((_, i) => i);
const adminIdsArray = userIds.slice(0, 10);
const adminIdsSet = new Set(adminIdsArray);

// 1. Array
let _ = 0;
for (let i = 0; i < userIds.length; i++) {
  if (adminIdsArray.includes(userIds[i])) {
    _ += 1;
  }
}

// 2. Set
let _ = 0;
for (let i = 0; i < userIds.length; i++) {
  if (adminIdsSet.has(userIds[i])) {
    _ += 1;
  }
}

基准测试结果：

1. Array: 34.27%
1. Set: 100%

如你所见，数据结构的选择会产生非常大的影响。

我有一个真实的例子：将数组切换为一个链表，函数的运行时间从 5 秒减少到 22 毫秒。

11 基准测试(Benchmarking)

把这一节留到最后的原因是，我需要通过前面有趣的章节建立可信度。

现在我（希望）已经掌握了它，我要告诉你的是：基准测试是优化中最重要的部分。而且不仅是最重要的，也是最难的。

即使有着 20 年的经验，我有时仍然会创建有缺陷的基准，或者错误地使用分析工具。

所以无论你想做什么，请先尽力做正确的基准测试。

11.0 从最关键的开始(Start with the top)

你的首要优化任务，始终是针对运行时占比最大的函数或代码片段。

如果你花时间优化这些之外的任何东西，那么你就是在浪费时间。

11.1 避免微基准测试

在生产模式下运行你的代码，然后基于观察的结果进行优化。

JS 引擎非常复杂，在微基准测试(micro-benchmark)中的表现通常与在真实场景中的表现不同。

例如，以这个微基准测试为例：

const a = { type: "div", count: 5 };
const b = { type: "span", count: 10 };

function typeEquals(a, b) {
  return a.type === b.type;
}

for (let i = 0; i < 100_000; i++) {
  typeEquals(a, b);
}

如果你前文有注意看的话，就会意识到，这里 JS 引擎会专门为这个结构({type: string， count: number})优化函数。

但这个说法在实际用例中还能成立呢？a 和 b 总是那种结构吗，还是你会得到任何其他结构？

如果你的函数，在生产中接收到很多种结构，那么该函数的行为将有所不同。

11.2 怀疑结果

如果你刚刚优化了一个函数，现在它的运行速度提高了 100 倍，先怀疑一下。

尝试推翻你的结果，在生产模式下测试，给它增加负载。

同样地，也要对你的工具保持怀疑。

仅仅通过 devtools 观察一个基准测试就可能会改变它的行为。

11.3 选择你的目标

不同的引擎对某些模式的优化效果可能会有所不同。你应该针对与你相关的引擎进行基准测试，并优先考虑哪个引擎对你更重要。

这是 Babel 中的一个真实例子，其中改进 V8 意味着降低 JSC 的性能。

12 分析和工具

关于性能分析和开发工具的各种说明。

12.1 浏览器陷阱

如果你在浏览器中进行性能分析，请确保使用空白的浏览器配置文件。我甚至使用一个单独的浏览器来进行这项工作。

如果你在进行性能分析时启用了浏览器扩展，那么它们可能会干扰测量结果。尤其是 React devtools 会显著影响结果，渲染代码的速度可能比用户看到的更慢。

12.2 样品分析 vs 结构分析

浏览器分析工具(profiling tools)是基于样本的分析工具，它定期对你的堆栈进行采样。

这有一个很大的缺点：在这些样本之间可能会调用非常小但非常频繁的函数，并且可能在你得到的堆栈图中被严重低估。

可以使用 Firefox 开发者工具并设置自定义采样间隔，或使用 Chrome 开发者工具的 CPU 降速功能来缓解这个问题。

12.3 业内工具

除了常规的浏览器开发工具，了解这些选项可能会有所帮助：

Chrome 开发工具有很多实验性选项，可以帮助你找出性能缓慢的原因。样式失效跟踪器在需要调试浏览器中的样式或布局重新计算时非常有用。
deoptexplorer-vscode 扩展允许你加载 V8/chromium 日志文件以了解代码何时触发去优化，比如当你将不同的结构传递给函数的时候。虽然你不用该扩展也可以读取日志文件，但它让体验更加友好。
你可以为每个 JS 引擎编译 debug shell，以此更详细地了解其工作原理。这样可以运行 perf 等底层工具，还可以检查每个引擎生成的字节码和机器代。 V8 示例|示例 JSC 示例|示例 SpiderMonkey

最后

希望你学到了一些有用的技巧。如果你有任何评论、更正或问题，请在页脚发电子邮件。我总是很高兴收到读者的反馈或问题。

JavaScript学习笔记

Tue, 01 Oct 2019 00:00:00 GMT

零散笔记

web 前端三层：（w3c 规范）结构层 HTML 从语义的角度，描述页面结构。样式层 CSS 从审美的角度，美化页面。行为层 JavaScript 从交互的角度，提升用户体验。

加入 script 属性后，网页会产生弹窗。

script 属性

alter(""); 显示警告弹窗信息，双引号内信息即为弹窗内信息。如果页面上出现弹框，此时页面位置不能改变，并且不能关闭，进程被阻塞。

type="text/javascript" 可以省略。

sync="sync" 同步：理解为单线程

async="async" 异步：理解为多线程立即异步下载外部 js ，不影响其他页面操作，js 下载完毕立即执行。

defer="defer" 异步：区别于 async 脚本延迟到文档完全被解析和显示后再执行；只有外部脚本可以使用。

console.log(""); 在浏览器控制台中输出一句话。作用：进行代码的调试。

prompt(""); 在页面上弹出一个提示输入框，提示信息为双引号间内容。

JavaScript 语法

** 变量申明与赋值** JavaScript 是弱类型脚本语言。 var a = "123"; var b = 123; 变量的类型由内部的数据的类型决定。

变量规则与规范 规则： 1.由字母、数字、下划线、$组成 2.不能是关键字和保留字 3.区分大小写规范：驼峰命名法，第一个单词首字母小写，之后单词首字母大写。

数据类型

string 注意，字符串的不可变性。 var str = "one" var str = str + "two" //第二句会分配一个新的栈空间

number 数值范围：最小值：Number.MIN_VALUE 5e-324 最大值：Number.MAX_VALUE 1.7976931348623157e+308 无穷大：infinity 无穷小：-infinity

boolean 取值范围： true and false

undefined，变量声明但未赋值

null

数值检测 Number.NaN 是一个特殊值，说明某些算术运算（如求负数的平方根）的结果不是数字。函数 isNan() 返回值 boolean 。

类型转换 转换成字符串方法：

函数 toString()
函数 String
字符串拼接：string + number 得到 string 类型

转换成数字：

函数 Number()
函数 parseInt()
函数 parseFloat()

表达式 由数据、变量、运算符组成。

运算符

赋值运算符
算数运算符

转义符 右斜杠换行 \n

函数实例： function function_name(parmeter1,parameter2){ var variable = parmeter1 + parameter2 return variable } 注意：没有 return 时，默认返回 undefined。

对象封装、继承、多态定义： var object_name = { name:"Tim", age: 18, height: 180 }; 属性用键值对表示。

动态交互

按钮：input 或者 button 标签 点击事件：onclick 获取用户输入：prompt() 内容检测：if..else 提示操作：alert()

JavaScript 补充

<input type="button" value="变" id="btn" />
//创建一个按钮
<script type="text/javascript">
  var btn = document.getElementById("btn");
  //获取id
  btn.onclick = function () {
    alert("点击时弹出此框！");
  };
  //点击按钮时触发此框
</script>

单行注释 用双斜杠表示添加或删除注释的快捷键一般为 Ctrl+/ 多行注释 /**/ 中间包含注释内容

浏览器工作模式

很有深度的文章，不求一次看懂。（链接失效）

JavaScript 存放位置

如果没有 style，代码放在 title 标签下，反之，放在 style 下。

flex 实现时间轴

Sat, 12 Oct 2024 00:00:00 GMT

前言

译者述

1、原文来自 Jonas Hietala 个人网站上的一篇文章： A simple timeline using CSS flexbox。

2、这是一篇关于 CSS flex 布局的具体应用, 发布于 2024 年 8 月 25 日。

3、翻译中会尽量遵照原意, 也会加入译者的技术注释, 以及选择更符合汉语文法的译句。

4、欢迎指正，非常感谢。

正文

当我在个人网站中添加 now 页面时，我也觉得应该更新一下我的 about 页面。它应该有一个简洁的时间轴来表示我人生中的大事件。

令人惊喜的是，这并不是一件困难的事情，甚至能够很优雅的实现 —— CSS 的 flexbox 真是一个很棒的特性。在本文中，我会引导你来实现这样的时间轴：

<br/ >

注意：如果你使用屏幕阅读器来阅读本文，那么 HTML 示例（如上）将不能正常展示。

（译者注：这里是 iframe 的例子，里面就有完整的代码，直接 F12 查看接口就能获取 html 文件。）

HTML 结构

我喜欢先写 html，再引入样式。我用两层容器（timeline 和 events）来包装多种事件（event），每个事件包含一个记号（svg）和一份详情（content），每个详情包含了时间和文字。

如下结构：

<div class="timeline">
  <div class="events">
    <!-- The first `1989` event -->
    <div class="event life">
      <!-- The circle is an svg -->
      <svg
        class="marker"
        xmlns="http://www.w3.org/2000/svg"
        width="12"
        height="12"
      >
        <circle cx="6" cy="6" r="6"></circle>
      </svg>
      <!-- The event info -->
      <div class="content">
        <time>1989</time>
        <div class="text">
          <p>I was born in the north of Sweden</p>
        </div>
      </div>
    </div>

    <!-- etc ... -->
  </div>
</div>

一条简单的线

让我们来看看时间轴中实际的线。我选择使用 events::before 伪元素，设置一下宽高，然后模拟一条线。

.events::before {
  /* // We need some content for the element to show up. */
  content: "";
  /* // Use absolute positioning to place the timeline at the very top. */
  position: absolute;
  top: 0;
  /* // With a height and with the timeline will be a tall and thin box. */
  height: 100%;
  width: 1px;
}

注意：我们需要设置容器 events 的相对定位，否则时间轴会相对页面来定位。

.events {
  position: relative;
}

我还添加一些样式，这样更好看一点：

/* // For the tutorial I use slightly different colors, */
/* // but you get the idea. */
.events::before {
  background: white;
}
/* // Events use different classes to differentiate them. */
.event.life .marker {
  fill: yellow;
}
.event.programming .marker {
  fill: magenta;
}
.event.family .marker {
  fill: red;
}
/* // Make the time stand out */
.content time {
  font-family: concourse_4, Helvetica, sans-serif;
  font-weight: bold;
}
/* // Just some extra spacing to make the timeline not merge */
/* // with the surrounding text. */
.events {
  margin: 0.5em;
}

然后我们就得到了一个时间轴：

<br/ >

对齐

圆圈和事件信息没有对齐，我们来修复它。

通过使用 flexbox 布局，事件信息可以水平展示（圆圈在左，事件信息在右）。

<br/ >

.event {
  display: flex;
}

更接近了，但是圆圈似乎偏移了。注意，圆圈是一个宽高 12px 的 svg，默认是 (0,0)的定位。

通过相对定位，可以将圆心更好的对齐：

.event .marker {
  position: relative;
  left: -6px;
  top: 6px;
}

但如果你仔细观察，上面扔没有对齐。事实证明，确定中心问题是计算机科学中最难的问题，所以不必气馁。

为了解决这个问题，我发现 align-items: baseline 比微调 top 位置更有效：

.event .marker {
  position: relative;
  left: -6px;
  top: 0px;
}
.event {
  align-items: baseline;
}

(现在的对齐效果就差强人意了，至少这个字体上看起来是这样的。)

垂直间距

如果感觉有点狭窄，我们让间距更大一点。一种办法是简单地添加 margin-bottom:1em; 但是这会在最后一个事件消息后面加上无用的间距（并且还不能去除）。

我想到一个简洁的办法就是利用 flexbox 和 row-gap 去指定元素之间的间距。

.timeline-5 {
  .events {
    display: flex;
    /* // Lay out events column-wise instead of row-wise. */
    flex-direction: column;
    /* // Set some spacing between elements. */
    row-gap: 1em;
  }
}

设置响应式布局

我们现在的样式对于小屏幕来说很友好，但是对于大屏幕来说却不同。对于大屏幕，我想把这条线放在中间，把一些事件移到左边，另一些移到右边。

我使用媒体查询设置边界：

@media (min-width: 700px) {
  /* // Styling for wider screens goes here. */
}

Even though I won't include the media query in the following code snippets the media query should wrap them all.

下文我就不再重复写媒体查询的代码片段了，但是你应该知道，这些代码是被包含在媒体查询结构代码里面的。

事件移动靠左

首先我想要做的就是将时间轴移动到中间：

.events::before {
  /* // This centers the line horizontally. */
  /* // Remember that we used absolute positioning before. */
  left: 50%;
}

（可以试试使用更宽的屏幕来查看显示效果）

(译者注：手动拉伸一下，对比效果。)

Now, let's move the marker to the timeline. First lets move the marker to be after the content in the layout ordering:

现在，让我们把圈圈移动到时间轴上。

第一步，将圈圈移动到文本的后面：

.event .marker {
  order: 1;
}

第二步，我们会让内容占据左边的所有空间，这样圈圈就会被推到中间去：

.event .content {
  width: 50%;
}

第三步，我们让内容向右对齐。注意增加内边距，防止和圈圈重合:

.event .content {
  text-align: right;
  padding-inline: 1em;
}

事件移动到右侧

为了将事件移动到时间轴的右侧，我们需要修改 flexbox 布局，用从右到左的方式来布局元素。

/* // Use `nth-child(even)` to target every other event. */
.event:nth-child(even) {
  /* // Layout elements from right to left. */
  flex-direction: row-reverse;
}

(译者注：这里的 nth-child 是指选择第几个元素，偶数就是 even，奇数就是 odd。)

小提示：对于 blog 我不喜欢按照奇偶来分两侧，而是按照内容来分。
.event:is(.programming, .work, .projects) {
  flex-direction: row-reverse;
}

为了显示好看，右侧的事件内容需要坐对齐：

.event:nth-child(even) {
  .content {
    text-align: left;
  }
  /* // The marker used to be offset -6px, but now we */
  /* // move from the right. */
  .marker {
    left: 6px;
  }
}

完成

这就是我所使用的时间轴啦。当然，你可以进一步修改和扩展它，只是我个人非常喜欢这种简单的样式。

使用 flexbox，创建一个基本的时间轴是相当简单的。flex 是我最喜欢的 CSS 特性之一，它解决了许多以前难以处理的问题。

下面是全部的样式文件:

/* 略 */

（译者注：完整的样式文件从上面的示例（iframe 引入的 html 文件）中获取即可。）

由虚拟列表引发的思考

Wed, 25 Jun 2025 00:00:00 GMT

前言

作者述

一般认为：超过 1000 行 + 多列（10+），或者含复杂内容的表格，就可以开始视为“大数据量”，需要进行优化考虑。

对于大数据量的表格页面，我们一般考虑使用虚拟列表去渲染可视区域的行列 dom 元素，这样在性能上能够得到很大的提升。

本文将给出虚拟列表的实现原理，然后讨论在哪些方面提升了性能，以及到底提升了多少（量化）。

预备知识

前端三件套基础知识

本文使用 html、css、js 编写 demo 代码，专注研究虚拟列表的实现原理。

本文目标

理解虚拟滚动原理，提高对浏览器的认知。

能够实现虚拟列表代码
了解浏览器的渲染机制
了解性能测量方法

rc-virtual-list 中的实现原理

本文考虑两种情况下的虚拟列表：

列表项高度固定
列表项高度不固定

针对不同的情况，我们会采取不同的策略：

列表项高度固定：我们会根据可视区域的高度，计算出可视区域内最多能展示多少个列表项。然后我们只渲染这部分列表项，超出可视区域的列表项不渲染。
列表项高度不固定：在这种情况下，我们无法直接根据可视区域的高度来计算出最多能展示多少个列表项，还需要增加额外的处理逻辑。

首先看看常用工具库中，是怎么设计的。(本文使用 rc-virtual-list@3.19.1 版本，不同版本可能存在差异，建议使用同一版本，便于查看源代码)

列表项目高度固定

在 rc-virtual-list 中，做了这三件事：

计算可见区域索引
设置偏移量和虚拟容器总高度
只渲染 visible + buffer 的数据项

对列表项高度固定的情况，根据滚动条位置，它能很容易计算到需要显示的列表项的索引范围。

我们查看相关源代码：

1、从 /lib/index.js 打开工具包，看到实际引用的工具：

var _List = _interopRequireDefault(require("./List"));
var _default = (exports.default = _List.default);

2、查看 List 代码，会看到 .d.ts 中参数定义：

export interface ListProps<T>
  extends Omit<React.HTMLAttributes<any>, "children"> {
  // ... 其他代码
  height?: number;
  itemHeight?: number;
  // ... 其他代码
}

我们关注 height 和 itemHeight 这两个参数。

如果读者有使用经验，就知道 itemHeight 就是我们的列表项高度。

3、我们继续查看 List.js 代码：

有 500 多行，好在我们现在可以通过 itemHeight 参数快速了解代码流程，所以我们可以直接检索 itemHeight 的相关用法即可。

这里列出找到的关键代码 1 —— 虚拟滚动的开关：

var useVirtual = !!(virtual !== false && height && itemHeight);

其中 virtual 参数我们不传递，就是 undefined ，默认是开启的。height 和 itemHeight 是开启虚拟滚动的必要参数。

然后是相关变量的使用，这里给出关键代码 2 —— 计算显示的数据的区间：

var _React$useMemo = React.useMemo(function () {
      // ... 其他代码
      var itemTop = 0;
      var startIndex;
      var startOffset;
      var endIndex;
      var dataLen = mergedData.length;
      for (var i = 0; i < dataLen; i += 1) {
        var _item = mergedData[i];
        var key = getKey(_item);
        var cacheHeight = heights.get(key);
        var currentItemBottom = itemTop + (cacheHeight === undefined ? itemHeight : cacheHeight);

        // Check item top in the range
        if (currentItemBottom >= offsetTop && startIndex === undefined) {
          startIndex = i;
          startOffset = itemTop;
        }

        // Check item bottom in the range. We will render additional one item for motion usage
        if (currentItemBottom > offsetTop + height && endIndex === undefined) {
          endIndex = i;
        }
        itemTop = currentItemBottom;
      }
      // ... 其他代码
      return {
        scrollHeight: itemTop,
        start: startIndex,
        end: endIndex,
        offset: startOffset
      };
    }, [inVirtual, useVirtual, offsetTop, mergedData, heightUpdatedMark, height]),

显然，这里有个关键的触发逻辑：当滚动条高度变化的时候，重新计算需要显示的列表项的范围。

最后是对获取到的变量的渲染，这里是关键代码 3 —— 渲染：

(scrollHeight = _React$useMemo.scrollHeight),
  (start = _React$useMemo.start),
  (end = _React$useMemo.end),
  (fillerOffset = _React$useMemo.offset);
// ================================ Render ================================
var listChildren = (0, _useChildren.default)(
  mergedData,
  start,
  end,
  scrollWidth,
  offsetLeft,
  setInstanceRef,
  children,
  sharedConfig
);

了解这三段代码就能知道 rc-virtual-list 整体设计了，然后可以进一步阅读源代码。

列表项目高度不固定

对于不确定的高度的情况，仍然需要传递 itemHeight 参数，用于开启虚拟渲染。itemHeight 还有一个作用，作为初始化渲染时估算的高度。

var useVirtual = !!(virtual !== false && height && itemHeight);

我们查看源代码 .d.ts 中 List 的参数，并没有看到“标记是否是等高列表项”的参数。

所以 rc-virtual-list 并没有专门区分列表项是等高还是不等高，而是统一通过一套逻辑来处理。

于是，很容易想到，对于不确定的高度的情况，还有额外的逻辑处理。

从上面的“关键代码 2”中，我们关注这两句：

var cacheHeight = heights.get(key);
var currentItemBottom =
  itemTop + (cacheHeight === undefined ? itemHeight : cacheHeight);

可以看到，比 itemHeight 优先级更高的是 cacheHeight ，显然这是最终的列表项的高度。

我们可以在 List.js 中查找 heights 这个变量相关代码，就能找到对于不等高列表项的处理逻辑。

关键代码 4 —— 列表项最终高度的计算：

// ================================ Height ================================
var _useHeights = (0, _useHeights3.default)(getKey, null, null),
  _useHeights2 = (0, _slicedToArray2.default)(_useHeights, 4),
  setInstanceRef = _useHeights2[0],
  collectHeight = _useHeights2[1],
  heights = _useHeights2[2],
  heightUpdatedMark = _useHeights2[3];

进一步查看 _useHeights3 和 _slicedToArray2 的定义。

var _slicedToArray2 = _interopRequireDefault(
  require("@babel/runtime/helpers/slicedToArray")
);
var _useHeights3 = _interopRequireDefault(require("./hooks/useHeights"));

查阅网上资料：

_slicedToArray 是一个帮助函数，用于将一个可迭代对象（比如数组或类数组对象）转化为一个数组，并且允许你通过解构赋值的方式获取其中的元素。

显然，关键代码在 useHeights.js 文件中，它负责动态记录并更新每个列表项的实际高度。

关键代码 5 —— 缓存高度的更新方式：

// ... 其他代码
var instanceRef = (0, _react.useRef)(new Map());
var heightsRef = (0, _react.useRef)(new _CacheMap.default());
// ... 其他代码
function collectHeight() {
  var sync =
    arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  cancelRaf();
  var doCollect = function doCollect() {
    var changed = false;
    instanceRef.current.forEach(function (element, key) {
      if (element && element.offsetParent) {
        var offsetHeight = element.offsetHeight;
        var _getComputedStyle = getComputedStyle(element),
          marginTop = _getComputedStyle.marginTop,
          marginBottom = _getComputedStyle.marginBottom;
        var marginTopNum = parseNumber(marginTop);
        var marginBottomNum = parseNumber(marginBottom);
        var totalHeight = offsetHeight + marginTopNum + marginBottomNum;
        if (heightsRef.current.get(key) !== totalHeight) {
          heightsRef.current.set(key, totalHeight);
          changed = true;
        }
      }
    });

    // Always trigger update mark to tell parent that should re-calculate heights when resized
    if (changed) {
      setUpdatedMark(function (c) {
        return c + 1;
      });
    }
  };
  if (sync) {
    doCollect();
  } else {
    promiseIdRef.current += 1;
    var id = promiseIdRef.current;
    Promise.resolve().then(function () {
      if (id === promiseIdRef.current) {
        doCollect();
      }
    });
  }
}
// ... 其他代码

到这里，逻辑就很明确了：（朴实无华的操作）获取列表项元素的高度，然后缓存起来。

小结

我们查阅了 rc-virtual-list 源代码，根据 itemHeight 参数一路追踪相关代码逻辑，最终梳理得到了它的实现原理：

1、初始化计算可见区域根据传入的 height（容器高度）与 itemHeight（预估项高）计算出可视区域最多可展示多少项（visible count），并结合缓冲区（buffer）确定初始渲染范围。
2、设置容器偏移与占位高度通过 transform: translateY(...) 设置可见项的起始偏移位置，通过一个填充元素 (Filler) 设置虚拟列表总高度，确保滚动条正常。
3、监听滚动事件，实时计算渲染范围滚动时，根据 scrollTop 和（预估或真实）高度缓存，遍历计算可视区域的起始和结束索引，更新渲染项。
4、收集并缓存真实 DOM 高度利用 useHeights 钩子，监听每个 item 的 DOM 元素变化（包括高度和 margin），并缓存其实际高度，如果高度发生变化会触发重新计算。
5、动态同步滚动偏移，修正误差如果发现首项真实高度与 itemHeight 不一致，会在下一帧中自动调整 scrollTop，防止滚动跳动或错位。
6、默认开启虚拟滚动模式除非手动设置 virtual={false}，只要设置了 height 与 itemHeight，就会默认启用虚拟渲染逻辑。

其中，1、3、4 步骤就是我们主要追踪的源码的逻辑。

编码实现 demo

参考了别人的代码，我们可以自己尝试编写代码了。（不是 cv 不是 cv 不是 cv）

这是一份基于 原生 JavaScript 和 DOM 操作 实现的「虚拟列表」示例，支持 不等高列表项 和 平滑滚动体验，整体思路参考了 rc-virtual-list 的核心设计。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Virtual List - Smooth Scrolling with Better Buffer</title>
    <style>
      #container {
        height: 400px;
        overflow-y: auto;
        border: 1px solid #ccc;
        position: relative;
      }

      .item {
        box-sizing: border-box;
        padding: 10px;
        margin: 4px 0;
        background: #f9f9f9;
        border: 1px solid #ddd;
        position: absolute;
        width: calc(100% - 8px);
        left: 4px;
      }

      #spacer {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        z-index: -1;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <div id="spacer"></div>
      <div id="list"></div>
    </div>

    <script>
      // 总数据量
      const TOTAL = 10000;

      // 估算每项平均高度（未测量前使用）
      const ESTIMATED_HEIGHT = 50;

      // 向上向下缓冲渲染多少个额外元素（增加缓冲区以提高平滑度）
      const BUFFER = 15;

      // DOM 元素引用
      const container = document.getElementById("container");
      const list = document.getElementById("list");
      const spacer = document.getElementById("spacer");

      // 模拟不等高数据
      const data = Array.from({ length: TOTAL }, (_, i) => ({
        id: i,
        text: `Item ${i} - 这是一个测试项目，内容长度不同以模拟真实场景`,
        height: 30 + Math.floor(Math.random() * 50), // 高度 30~80 之间
      }));

      // 高度缓存（id => height）
      const heights = new Map();

      // 每一项的偏移位置（计算 top）
      const positions = [];

      // 当前渲染的元素范围
      let currentRange = { start: 0, end: 0 };

      // 已渲染的DOM元素缓存
      const renderedElements = new Map();

      // 计算所有项的 top 偏移位置
      function calcPositions() {
        positions.length = 0;
        let top = 0;
        for (let i = 0; i < data.length; i++) {
          const h = heights.get(i) || ESTIMATED_HEIGHT;
          positions.push(top);
          top += h;
        }
        spacer.style.height = top + "px"; // 设置撑高容器高度
      }

      // 使用二分查找快速定位当前 scrollTop 对应的可视起始项
      function findStartIndex(scrollTop) {
        let low = 0;
        let high = data.length - 1;
        while (low <= high) {
          const mid = Math.floor((low + high) / 2);
          const midTop = positions[mid];
          const midBottom = midTop + (heights.get(mid) || ESTIMATED_HEIGHT);
          if (midBottom <= scrollTop) {
            low = mid + 1;
          } else {
            high = mid - 1;
          }
        }
        return Math.max(0, low - BUFFER); // 加 buffer
      }

      // 创建单个列表项元素
      function createElement(index) {
        const item = data[index];
        const div = document.createElement("div");
        div.className = "item";
        div.innerText = item.text;
        div.style.height = item.height + "px";
        div.dataset.index = index;
        return div;
      }

      // 渲染可见范围内的项
      function render() {
        const scrollTop = container.scrollTop;
        const containerHeight = container.clientHeight;

        calcPositions();

        const start = findStartIndex(scrollTop);
        const visibleEnd = scrollTop + containerHeight;

        // 计算结束索引，增加更多缓冲
        let end = start;
        while (
          end < data.length &&
          positions[end] < visibleEnd + BUFFER * ESTIMATED_HEIGHT
        ) {
          end++;
        }
        end = Math.min(end + BUFFER, data.length);

        // 如果渲染范围变化不大，避免重新渲染
        if (
          Math.abs(currentRange.start - start) < BUFFER / 2 &&
          Math.abs(currentRange.end - end) < BUFFER / 2
        ) {
          return;
        }

        // 移除不再需要的元素
        const toRemove = [];
        renderedElements.forEach((element, index) => {
          if (index < start || index >= end) {
            toRemove.push(index);
            list.removeChild(element);
          }
        });
        toRemove.forEach((index) => renderedElements.delete(index));

        // 添加新需要的元素
        for (let i = start; i < end; i++) {
          if (!renderedElements.has(i)) {
            const element = createElement(i);
            element.style.transform = `translateY(${positions[i]}px)`;
            renderedElements.set(i, element);
            list.appendChild(element);
          } else {
            // 更新已存在元素的位置
            const element = renderedElements.get(i);
            element.style.transform = `translateY(${positions[i]}px)`;
          }
        }

        currentRange = { start, end };

        // 测量新添加元素的真实高度
        measureHeights(start, end);
      }

      // 获取真实 DOM 高度，更新缓存
      function measureHeights(start, end) {
        let needsRecalc = false;

        for (let i = start; i < end; i++) {
          const element = renderedElements.get(i);
          if (element) {
            const realHeight = element.offsetHeight;
            if (heights.get(i) !== realHeight) {
              heights.set(i, realHeight);
              needsRecalc = true;
            }
          }
        }

        // 如果高度有变化，重新计算位置
        if (needsRecalc) {
          calcPositions();
          // 更新所有已渲染元素的位置
          renderedElements.forEach((element, index) => {
            element.style.transform = `translateY(${positions[index]}px)`;
          });
        }
      }

      // 滚动监听
      // 滚动事件可能非常频繁触发（比如每毫秒多次）
      container.addEventListener("scroll", () => {
        // 但渲染只会在浏览器准备重绘时执行
        requestAnimationFrame(render); // 不会少于一帧的时间执行
      });

      // 窗口大小变化时重新渲染
      window.addEventListener("resize", () => {
        requestAnimationFrame(render);
      });

      // 初始渲染
      calcPositions();
      render();
    </script>
  </body>
</html>

直接运行上面的代码，打开开发者工具 Elements ，可以查看到这个 demo 的显示效果。

DOM 结构

<div id="container">
  <div id="spacer"></div>
  <!-- 撑起总高度，使滚动条正常显示 -->
  <div id="list"></div>
  <!-- 实际渲染的列表项区域 -->
</div>

#container 是设置固定高度的滚动容器；
#spacer 设置整个虚拟列表高度；
#list 中渲染真实可见的列表项。

实现原理

高度预估与测量
- 初始使用 ESTIMATED_HEIGHT 作为每项高度；
- 渲染后获取真实 DOM 高度并更新缓存；
- 每次变化后重新计算各项的偏移 top。
可见区域渲染
- 使用二分查找定位当前 scrollTop 对应的可视起始项；
- 加入上下 BUFFER 缓冲区，避免频繁增删导致的跳动；
- 对于不可见项及时卸载 DOM，提升性能。
渲染与更新
- 根据可见范围创建/更新 DOM 元素；
- 使用 transform: translateY(...) 设置 Y 轴偏移；
- 缓存已渲染元素，避免重复插入。
性能优化
- 使用 Map 存储已渲染 DOM；
- 使用 requestAnimationFrame 控制渲染频率；
- 如果滚动范围变化不大，则跳过更新。

关键函数说明

函数名	功能说明
`calcPositions()`	根据缓存高度计算每项的偏移 top
`findStartIndex(scrollTop)`	二分查找滚动位置对应的起始项
`render()`	控制渲染可见范围元素
`measureHeights(start, end)`	更新高度缓存并修正偏移位置
`createElement(index)`	创建单项 DOM 节点

小结

到此为止，我们已经能够理解并实现虚拟滚动列表了。

如果你的目标是学习虚拟列表，那么到此就可以结束了。

后文会介绍浏览器的渲染机制，然后进一步讨论虚拟列表带来的收益的量化测评。

浏览器的部分渲染机制

简单来说，就是地址栏输入地址后敲下回车，之后发生的一系列变化。

浏览器根据地址找到对应的资源；
解析 HTML 代码，构建 DOM 树；
解析 CSS 代码，构建 CSSOM 树；
合并 DOM 树和 CSSOM 树，生成渲染树；
布局渲染树，确定每个节点的位置和大小；
绘制渲染树，将每个节点转换为屏幕上的像素；
浏览器将像素发送到显卡，显示在屏幕上。

这里我们关注这一步骤：渲染树的生成和使用。

渲染树的生成

渲染树的使用

性能评测

接下来我们将对比使用虚拟列表和不使用虚拟列表的渲染树的差异。

渲染树直观上的比较

渲染树量化比较

性能优化量化指标

总结

文章谬误之处欢迎指正。

参考资料

rc-virtual-list
Web 性能优化权威指南
chatGpt

Webpack 入门

Sat, 04 Nov 2023 00:00:00 GMT

前言

作者述

随着技术的发展，新的工具不断出现，老的工具依然不过时。说到底，设计思想并没有革命性的变化。而工具，够用就行了。

本文通过 Webpack 来聊聊打包上的一些事情，结合实例来看看 Webpack 的使用和优化，最后做到能够按需自定义配置。

在官网有完整的说明，强烈建议之后去看一下。

预备知识

前端基础知识
了解项目部署基本知识
了解 npm 使用

本文适合有一定使用经验的读者 —— 能够创建一个简单的 app, 完成简单的模块代码开发。

本文目标

提高整体理解，对“打包”这件事和“打包工具 Webpack” 的认识。

了解到 Webpack 的历史发展
使用基本配置完成打包
了解常用的配置项及其含义
常用的配置项

最主要的是，在实际项目中用到 Webpack 时，能够用更高的视角来看待问题。

历史发展

基本概念

先介绍下三个概念的区别：

打包
- 打包是一个动作，是指处理某些⽂件并将其输出为其他⽂件的过程。
模块打包工具(module bundler)
- 模块打包工具 帮助生成用于部署的 js 脚本和样式表，可以通过配置提高代码性能和浏览器兼容性。
任务执行工具(task runner)
- 任务执行工具 用来自动化处理常见的开发任务，例如，lint(代码检测)、build(构建)、test(测试)。

相比模块打包工具（例如：Webpack、Browserify、Brunch），任务执行工具（例如：Make、Grunt、Gulp ）则聚焦在偏重上层的问题上面。

打包过程与模块开发

这个过程，随着时间的发展，不断出现新的问题和解决方案。

手动处理

在浏览器中运⾏ JavaScript 有两种⽅法。第⼀种⽅式，引⽤⼀些脚本来存放每个功能；此解决⽅案很难扩展，因为加载太多脚本会导致⽹络瓶颈。第⼆种⽅式，使⽤⼀个包含所有项⽬代码的⼤型 .js ⽂件，但是这会导致作⽤域、⽂件⼤⼩、可读性和可维护性⽅⾯的问题。

那时候还是 var 定义变量，在项目逐渐复杂之后，一系列问题凸显出来。

作用域冲突

为了解决作用域冲突问题，用立即执行函数 (IIFE - Immediately invoked function expressions) 来封装单个函数功能。

这个做法虽然不是很好看，但确实很有用。当然，现在基本不这么写了。

// foo.js
((param) => {
  var onlyThisFun = 0;
  console.log({ param });
  // other handle
  return "result";
})(param);

用 IIFE 的方法成功避免了作用域冲突，但是代码在 <script /> 中的加载仍然复杂且存在冗余代码。

精简引入

CommonJS 问世并引⼊了 require 机制，它允许你在当前⽂件中加载和使⽤某个模块。而 Node.js 中很好的实现了这一点。

npm + Node.js + modules 的方式几乎和现在的写法一致了。

// bar.js
module.exports = () => {
  // ...
};

const bar = require('./bar.js')

bar()

exports.foo = 'foo'

exports.fn = () => { ... }

可以只引入库中需要的函数，减少了非必要代码。

当然，这里有个关键的问题：CommonJS 在 Node.js 中被原生支持，而浏览器原生是不支持 CommonJS 的。

ECMA 模块

来⾃ Web 项⽬的好消息是，模块正在成为 ECMAScript 标准的官⽅功能，浏览器正在逐步⽀持中。

// NumCalc.js
const addCalc = (a, b) => a + b;
const delCac = (a, b) => a - b;
export { addCalc, delCac };

// index.js
import { addCalc, delCac } from "NumCalc";
console.log(addCalc(1, 2));
console.log(delCac(1, 2));

这种写法就很现代化了。

但是，ECMAScript 规范只是规定了最基本的事情需要怎么做，这里还有很多值得优化的地方。

例如：

// index.js
import { addCalc, delCac } from "NumCalc";
setTimeOut(() => {
  console.log(addCalc(1, 2)); // 1、提前很久引入很久以后才执行、甚至可能不执行的代码
}, 200000);
// console.log(delCac(1, 2)) // 2、引入不用的代码
// 3、图片等资源怎么处理
// 4、代码的浏览器兼容问题
// 5、import export 太多，眼睛疼，怎么提高开发效率

你可能会说我在吹毛求疵，眼睛疼关 Webpack 什么事？

我想说，Webpack 经过这么多年的发展，已经是很完善且稳定的打包工具了。它就是考虑到了各种情况 —— 虽然这样可能会让人觉得配置起来好麻烦。

如果开发者就用默认配置，当然也能完成开发工作，只是不能得心应手的话难免会有些许遗憾。

Webpack 发展史

此时从 Webpack github 上看到，最新的 release 版本是 v5.89.0 ，Webpack-cli 的版本是 v5.1.4 。

本文不关注版本的差别（一般都用新版本），只是稍稍了解一下 Webpack 是怎么出现的。

创作者

从 github 的 Webpack 上可以看到核心团队的信息。

其中，第一位，Tobias Koppers 就是这个仓库创建者，也就是最早的创作者。

Tobias 是一个德国人，网络昵称叫 sokra 。

sokra 之前是 Java 开发者。在 Java 里面有个很出名的技术 GWT（Google Web Toolkit）。GWT 里面有个 feature 叫「code splitting」。

2012 年 2 月 24 号，sokra 给 modules-webmake（前端项目打包的库）提了一个 issue ，希望他们能实现这个 feature。但是 modules-webmake 的维护者一直没有实现这个功能。

2012 年 3 月 10 号，sokra 去 follow 了一份 modules-webmake 代码，在 github 上开了一个新的项目 Webpack 。

「code splitting」这个 feature 就是 Webpack 现在提供的主要功能，也是当代前端的基石。

Webpack 的设计思想并不是独创的，但在当时的前端模块打包工具，它是最先进的 —— 特别是性能优化和热更新。

影响力扩大

2013 年，React 开源。

2014 OSCON 大会（OSCON 是动物书 O'Reilly 组织的），Instagram （React 开发的图片社交网站）的前端团队分享了他们对前端页面加载性能优化，其中很重要的一件就是用到的 Webpack 的 featere「code splitting」。

当时引起了很大的轰动，之后大家纷纷使用 Webpack，并给 Webpack 贡献了无数的 plugins ，loader。

2014 年后 Webpack 发展非常迅猛，版本更新非常快。

至今，Webpack 仍是主流之一。

示例讲解

专业术语

拉高视角 up up up ~~

在项目开发过程中，我们经常会用到很多工具，webpack 只是好用的工具之一。

实际项目中使用 webpack 时，常提到一些名词或操作：代理、打包、热更新、开发环境、生产环境、依赖等。

还有一些不常提及（因为不怎么修改）但一直使用的概念：打包入口、loader、输出目录、插件、懒加载等。

后文会结合配置文件内容解读来说明一下这些术语，现在不理解也没关系。

这里提出来是为了说明一下本文的核心思想，也就是前文这句：“这个过程，随着时间的发展，不断出现新的问题和解决方案。”。

上面这些既是术语概念也是解决方案，为了相继出现的问题而存在。

快速开始

webpack 以 npm 包的形式存在，所以像正常使用一个 npm 包一样就行了。

比如在一个简单的 npm 管理的项目中安装 webpack :

npm install webpack webpack-cli --save-dev

然后使用它：

npx webpack

ok, 完成，结束，你已经会了。🤪

虽然但是，到这一步，只使用默认配置，确实可以完成项目的 build 了。

对于前端初级工程师来说，一般是做项目模块的业务代码开发，是不会去做项目结构上的配置和优化的。比如项目技术栈选型、目录结构设置、项目流程优化（其中构建部分如果选用 webpack 工具，那么也涉及到 webpack 配置优化）等等，都是更有经验的高级工程师来做的。

本文到这里，后面的内容是从官网选了一部分，结合我的个人理解总结的。如果读者时间充裕的话，建议直接去官网阅读。

配置文件

和大多数工具一样，传递配置信息的入口无外乎两种：命令行参数、配置文件。

webpack 首先获取并合并命令行参数和配置文件内的参数。

为了便于管理，webpack 不使用全局安装，一个项目用一个专属的 webpack 配置文件。

我们先来看看最基本的配置都有什么。

// {项目根目录}/webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
};

一个程序最基本的当然是输入和输出啦，webpack 也一样。

其中 entry 是打包的入口，也就是主程序的入口。对于现在常用的单页应用程序（SPA: Single Page Application） 来说，通常只有一个 entry 入口文件。

而 output 就是打包结果输出的地方，一般都放在主目录的 dist 文件夹下面。

诶？有没有发现什么问题？

1、这个配置文件为什么是用 CommonJS 的模块写法？很多项目里也是这样的写法。 2、我们开发的时候不是 npm start 就能跑程序了吗？和 dist 文件夹有什么关系？

下面先回答一下这两个问题。

配置文件写法问题

先说结论：这个问题不重要，现在新版 webpack 对两种写法都是支持的了。

第一个原因是：webpack 在 es6（ECMAScript 6 约等于 JavaScript 2015，也就是 2015 年发布的）之前出现，所以一开始就是这么写的，后来就习惯了懒得改。

第二个原因是：webpack 在 node.js 环境中运行，而 node.js 就是实现的 CommonJs ，运行没问题没必要改。

热更新和 dist 文件问题

热更新：热更新通常用于实时预览代码更改的效果，无需手动刷新浏览器。这种机制可以加速开发过程，提高开发效率。

npm start 其实也会生成类似 dist 的文件，只是这个文件不像放在项目根目录的 dist 文件那样静态、精简和具体。

开发的时候关注点在代码更新上，也就是热更新和错误定位，这需要很快的读写速度。

npm start 启动的开发服务器在内存中运行，当进行代码更改并保存时，热更新机制会检测到这些更改，并实时更新正在运行的应用程序，相关页面自动刷新。

用热更新的方式去检测打包输出的 dist 文件，也可以做到不用重启 app 就更新模块的效果。但是一般不这么做（除非想观察和调整资源路径，比如图片放哪里比较好这种问题），因为磁盘读写比内存读写要慢。

因为关注点不同，这里就有两个概念：开发环境和生产环境，也是两种工作模式，需要相应的配置。

开发环境和生产环境

我们基于在上面的配置，添加一行配置，如下所示：

// {项目根目录}/webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  mode: "development", // 或者 mode: 'production',
};

这个 mode 有两个取值：development 或 production。用于指明当前 webpack 的一系列默认操作，可以简单而好用的帮助开发者应对不同场景。

还是之前一样，很多默认配置不关注也足够使用。也可以人为地控制各种细节功能应该怎么处理。

题外话：

在一个空白目录中执行 npm init，会生成 package.json 文件。

为了防止不必要的资源打包入最后的代码，依赖项也分为开发环境依赖和生产环境依赖。
{
  // ......
  "devDependencies": { // 开发环境依赖项
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  },
  "dependencies": { // 生产环境依赖项
    "lodash": "^4.17.21"
  }
}
仅用于开发的工具资源就放在 devDependencies 就行，生产环境中需要用到的工具资源就放在 dependencies 里面。这样也能优化打包过程，较少打包工具的负担。

添加包时，用参数指明添加到哪个下面：
npm install --save-dev webpack-merge // 开发
npm install --save lodash // 生产

更多配置，详见官网。

回答问题

之前有五个问题：

1、提前很久引入很久以后才执行、甚至可能不执行的代码
2、引入不用的代码
3、图片等资源怎么处理
4、代码的浏览器兼容问题
5、import export 太多，眼睛疼，怎么提高开发效率

根据实际项目经验，这里在补充两个：

6、开发环境时 api 请求的主机地址不在本机，怎么处理？

懒加载

问题：1、提前很久引入很久以后才执行、甚至可能不执行的代码

有时候下载了资源，但是全程没有使用，那么这时候所占用的下载时间和网络资源就浪费了，特别是资源本身很大的时候。

举个栗子 🌰：有一种情况，就是有个按钮的事件非常复杂，相应的 script 代码就很多，但是我们实际使用的时候只有很小的概率去点击它。

再举个栗子 🌰：一个网页的后半部分有很多不小的图片，但是用户可能根本不往后翻就切换了，这个时候仍然下载图片的话，也是一种浪费。

解决办法就是懒加载，达到某个条件才去加载相关资源，而不是一开始就去下载。

import _ from "lodash";

function component() {
  const button = document.createElement("button");

  button.innerHTML = "import while click";

  button.onclick = (e) =>
    import("./print").then((module) => {
      const print = module.default;
      print();
    });

  return element;
}

document.body.appendChild(component());

懒加载的特点就是，只在需要的时刻（或提前一点点）去获取资源。这会下降少数时候的一些用户体验，但是能提升多数时候的用户体验。

在 4G 基建完成、网速大幅度提升之后，懒加载仍然是优化用户体验不可或缺的手段之一。

在短视频 app 中，为了兼顾流畅的用户体验和减少网络负担，在用户查看第一个视频时，app 就开始加载下几个视频的前几秒钟的内容，当用户切换到某个视频时，再下载该视频的后续内容。这样用户体验上完全没有卡顿，但是也不会花占用太多网络资源。

tree shaking

问题：2、引入不用的代码

比如：

import { foo } from "foo.js";
import { bar } from "bar.js";
const res = foo();
console.log({ res });

这里没有使用 bar 函数，看起来最好的解决办法就是修改代码，不引入 bar 就行了。

但是注意这里是有坑的。

如果 bar.js 中有副作用，那么还需要更多的考虑。比如这么写：

// bar.js
window.isBarLoaded = true;
window.isBarCalled = false;

bar = () => {
  window.isBarCalled = true;
  console.log("did something");
};

export { bar };

其实这个时候，webpack 不能很容易的判断是否应该忽略 bar.js 这个文件，从而减少打包输出的文件体积。

当然，在 webpack 也中有相关的机制去处理，但是更需要手动配置。

{
  "name": "your-project",
  "sideEffects": ["./src/some-side-effectful-file.js"]
}

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。webpack 通过 sideEffects 来标记存在副作用的文件，然后他就能轻松地 tree shaking 了。

loader

3、图片等资源怎么处理

比如图片、字体这些静态资源，只要指明路径就可以加载了。但是 less、scss、ts 这种资源是需要翻译一下的，浏览器只支持他们翻译过来的 css、js 文件。

这个时候明显就需要打包之前执行某些翻译程序了。

回顾一下， webpack 是模块打包工具的一种。它处理以模块为单位的资源，这里的翻译程序就是将各种资源转化为 webpack 可以处理的模块的加载器 —— loader。

关于 loader 的配置，在 module.rules 中配置。

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
};

这里的 type: "asset/resource" 表示图片资源会被作为模块类型进行处理，最终会生成一个资源模块。在 dist 中可以看到文件名被改为 uuid 保证唯一性的图片资源。

对于 less 这种非标准的文件，需要专门的工具(例如 less-loader)去转化为 css 文件，然后再有 css-loader 解析 CSS 中的 @import 和 url() 等引用。最后，style-loader 将 CSS 样式通过 JS 模块的形式嵌入到 HTML 文档中。

得到模块之后，就是 webpack 的主场了。

4、代码的浏览器兼容问题

正如之前 less 翻译为 css 一样，es6 代码也可以用 hack 的写法翻译为 es5 代码。

我们常在项目中看到的 babel-loader 就是调用了 babel 工具来做翻译的事情。

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
        },
      },
    },
  ];
}

Plugin (插件)

5、import export 太多，眼睛疼，怎么提高开发效率

~~地点眼药水吧~~ 合理使用插件。

插件是扩展 webpack 功能的工具，它们并不直接操作文件，而是基于事件机制工作，监听 webpack 打包过程中的某些节点，执行广泛的任务。

这个非常广泛和庞杂，等用到了自行查询即可。也可以看看推荐较多的 webpack 插件。

代理 proxy

6、开发环境时 api 请求的主机地址不在本机，怎么处理？

使用 js 调用 API 时，我们一般用 http 访问。

如果前后端部署在同一个服务器上，那么自然使用 http://loacalhost:port/urlPath 来访问。

我们在代码中一般这么写访问路径，fetch('/api/urlPath'),这段代码由 webpack 先转换一下。

module.exports = {
  //...
  devServer: {
    proxy: {
      "/api": "http://localhost:3000",
    },
  },
};

然后由 http-proxy-middleware 提供的代理功能，请求先到本地前端开发服务器，再转到后端，这样就能解决前端直接访问后端 API 的跨域问题。

理解一下，前端开发时，往往前端程序在本地运行，而后端是已经部署的服务。那么前端直接访问外部资源的话，浏览器从安全因素考虑直接拒绝了。这个时候，本地有个受信任的服务器，就能让前端的请求交给该服务器帮忙处理发送和接受数据。

前端程序和后端程序一般部署在同一个机器上，自然没有问题。

总结

以上是笔者整理的 webpack 相关内容，希望能帮到你，不至于毫无头绪。

我们回顾一下目标，感受一下。

了解到 Webpack 的历史发展
使用基本配置完成打包
了解常用的配置项及其含义
常用的配置项

文章谬误之处欢迎指正。

参考资料

Java学习笔记一课件缝合怪

Thu, 24 Sep 2020 00:00:00 GMT

词语理解记录

JVM

2019/2/22 Java 虚拟机，为 Java 程序在各个平台使用运行提供一个中介。 2022/7/28 JVM: Java Virtual Machine, Java 虚拟机。对 java 程序员屏蔽了不同结构计算机之间的差异，使得 java 代码的编译和运行，经过 JVM 的转换，再到具体机器上。

计算机

2019/9/6 计算机是纯粹的工具，来源于生活，需要和其他东西结合起来才有用。 2022/7/28 (上文说的好，他和算盘没什么本质区别。)

框架

2020/9/24 为实际应用开发带来方便和规范的辅助程序。 2022/7/28 框架是指一个可用的应用，它几乎只有打开和关闭这样的简单功能，但是开发者可以方便地在其上添加需要的业务功能，而不用从零开始配置整个技术链。

数据类型

标识符 保留字（reserved word） 基本类型 ······整数类型：byte，short，int，long；（分别占位 8,16,32,64 位；都是有符号类型） ······浮点类型：float，double； ······字符类型：char（16 位，使用 Unicode 字符集）； ······布尔类型：boolean； 复合数据类型 ······class（类）； ······interface（接口）； ······数组；常量 ······用保留字 final 来实现；变量 ······作用域；变量的作用域可分为：局部变量、类属性变量、方法参数和异常处理参数。在一个确定的域中，变量名应该是唯一的。

数据类型注意点

1.Java 中不允许将数字转化为布尔值，所以

for(x = y) {}

编译报错。 2.Unicode 编码中的胆英豪必须使用半角输入法中的引号。

\\ 	'\b' 对应 '\u0008'

3.两个整数相加，结果会默认的转换为 int 型变量，注意使用 byte 和 short 进行运算时的类型转换问题。还有，注意加法溢出问题。

4.在十进制和科学计数法常熟后面可以跟 F 或 f 标识 float 类型，跟 D 或 d 标识 double 类型；如果没有跟任何修饰，那么默认为为双精度类型。

5.字符串变量用 String 标识，而 String 是类（class）。

6.关于包装类： Java 提供与基本数据类型对应的包装类； 引入包装类的目的： 基本数据类型不是类，在一些场合不能直接使用； 包装类的一些静态方法可以实现不同数据类型的转化； 包装类的静态属性中含有相应数据类型的范围。 API Doc：http://docs.oracle.com/javase/6/docs/api/overview-summary.html

表达式

1.算术表达式 + - * / % ++ -- -(取反) 补充：整数和浮点数都能进行取余运算，9%2=1,3.14%2=1.14000001； 2.关系表达式 ** != > < >= <= 3.逻辑表达式 & | ! ^(异或) && || 4.赋值表达式 = += -= *= /= %= ^= &= |= <<= >>= >>>= <<(左移，右补 0) >>(右移，左按符号位补 0 或 1) >>>(右移，左补 1) 5.条件表达式 布尔表达式 1 ? 表达式 2 : 表达式 3 补充：

public class b2_6 {
    public static void main(String[] args){
        float sum=1.5f;
        int num=2;
        System.out.println((sum<2 ? 1 : num/sum));
		int num1=3,sum1=2;
		System.out.println((sum1<3 ? 1 : num1/sum1));
		int num12=3,sum12=2;
        System.out.println((sum12<3 ? 1.0 : num12/sum12));
    }
}
发生隐式类型转换，最后结果为
1.0
1
1.0

6.运算符优先级 域运算"." > 数组下记“[]” > 分组括号“()” > 单目 > 双目 > 三目 > 赋值

控制语句

1.分支语句 if-else 注意 if 括号中应为布尔值，这里与 C 语言的区别。 switch 注意 switch(expression) 中的表达式 expression 返回值类型只能是 byte、shout、int、char 之一。 2.循环语句 while do-while for 同样注意条件表达式中的结果应为布尔值。 3.跳转语句 break; break lab; countinue; countnue lab; 标号 lab 的用意是完成多重循环的跳转。 return; return expression; 注意 return 语句后面的语句可能成为死鱼(永远无法执行)，然后编译器就会报错。 4.异常处理语句 try-catch-finally throw 5.注释语句：//，/* */， /_** _/

数组

分类 1：基本数据类型数组、对象数组。分类 2：一维数组声明、定义、初始化

int a[10];a=new int[10];
int[10] b=new int[10];
int c[]={3,4,5};
String[] s=new String[]{"ab","cd"};

二维数组声明、定义、初始化

int arr[][];	arr = new int[3][4];
int[][] brr;
brr = new int[2][];
brr[0] = new int[2];
brr[1] = new int[5];

小思考

Java for 循环简便写法

int[] a = {1,2,3,4};
for (int i : a) {
System.out.println(i);
}

基本数据类型相对包装类的优点 占空间小。

Java 程序工程规范

Java 程序编程规范

1.有多个 import 语句时，先写 Java 包（都是 Java 包时，依照字母先后顺序排序），后写 javax，最后写其他公司的包和自己定义的包。 2.命名规则：包名中字母一律小写，如 xxxyyyzzz。 类名、接口名每个单词首字母大写，如 XxxYyyZzz。（接口名加上大写“i”前缀） 方法名第一个单词的字母小写，后面每个单词的首字母大写，如 xxxYyyZzz。常量中的每个字母大写，如 XXXYYYZZZ。 3.程序{}强调匹配的同时，要保持适当的缩进，以便于阅读。 4.必要时要有一定的程序注释量（20%~50%），注释内容有：程序头说明，属性说明，方法说明。

关于帮助文档

帮助文档一般的格式信息： 类的继承层次；类和类的一般目的描述；成员变量列表；构造方法列表；方法列表；变量详细列表及目的和用途的描述；构造方法详细列表及描述；方法详细列表及描述。

面向对象基础

抽象

书上的原话： 抽象是从被研究对象中舍弃个别的、非本质的或与研究主旨无关的次要特征，而抽取与研究有关的共性内容加以考察，形成对研究问题正确、简明扼要的认识。 我的理解 抽象是动词；抽象是舍末逐本的方法；抽象是相对的。

类与对象

定义： 对象是对客观事物的抽象，类是对对象的抽象。

class 类名{}

关系： 对象是类的实例，类是对象的模板。

类的域和方法

定义： 域（也称属性或数据员）是对事物静态特征的抽象。

类型 域变量名

方法（也成操作或成员方法）是事物动态特征的抽象。

[修饰] 返回值类型 方法名(参数类型 参数1，[参数类型 参数2]...){方法体}

关系： 1.类中定义的域变量可以被类中的所有方法访问。 2.方法中的形式参数和定义的局部变量的作用域仅限于方法；局部变量在使用前必须初始化；如果局部变量和类中的域变量重名，则在方法中对同名变量的改变只作用在局部变量上； 3.类中定义的方法可以进行递归调用。

对象详解

对象的创建

FighterPlane fp;//声明对象引用
fp = new FighterPlane();//创建对象，并与对象引用fp关联

static 关键字 类中被 static 修饰的方法属于类，不被复制到对象中；可以说，static 修饰的方法（属性）是类方法（属性）。 堆栈内存分布 堆在应用程序生命周期内一直存在，栈在方法调用完毕后就释放；类和对象被分配到堆中，方法执行时用得局部变量和参数放到栈中； 所以，方法调用中产生的对象不会因调用结束而被释放掉。 声明能引用对象的实质是对象引用在栈中保留了堆中对象的实际地址。 对象参数 对象是引用传递，当对象作为参数传递时，传递的是对象的地址。 也就是说，对象只有一个，不生成副本 基本数据类型作为参数在方法中的传递是值传递。 对象数组 建立

MyClass [] mc = new MyClass[10];//产生一个MyClass数组对象mc
//mc可以容纳10个MyClass对象引用，每个单元初始值都为NULL
for(int i = 0 ; i < mc.length ; i++){
	mc[i] = new MyClass();
}//为每个单元赋值，即关联对象

特点

float f1[],f2[];
f1=new float[10];
f2 = f1;//f1和f2拥有相同的数组成员

一维数组数组名.length 可以得到单元个数二位数组数组名.length 可以得到行数数组名[0].length 可以得到第一行的列数 n 维数组 ......类推

简便方法 System.arraycopy()方法可以复制数组； Java 集合类可以调用相应的方法返回对象数组引用（见 JDK 文档）； Java 中有的类的方法可以针对某些基本数据类型进行排序（见 JDK 文档）；

构造方法

概念与特征 构造方法属于类，不属于任何对象；构造方法与类同名，且不能指定类型（其隐含的返回值由系统内部使用）；构造方法具有多态性；系统有一个默认的无参数的构造方法； 用 this 区分同名变量 当构造方法中的参数与域变量名相同时，此时在构造方法中需要使用 this 关键字来加以区分； 垃圾回收机制 垃圾定义：没有任何引用的对象；析构：finalize 方法；回收机制：系统在资源不够的情况下可能进行释放；　　　　　可以用 System.gc()方法“提醒”系统进行垃圾释放；　　　　　进行垃圾回收的线程级别很低，只有系统不忙时才会理睬提醒；何时调用析构函数？堆栈上的对象（系统自动）堆上的对象（delete 语句） 创建对象时的初始化顺序 1.系统会对数据成员进行默认初始化 2.执行数据成员定义处的初始化语句 3.调用构造方法为数据成员指定初值

类成员属性与方法的非访问修饰符

static 用static 修饰的域变量专属于类，保存在类的内存区（堆中）的公共存储单元中。因此,一个类的任何对象访问它时，存取到的都是相同的数值。用static 修饰的方法称为静态方法，属于类方法，不属于类的任何对象。（main 方法属于特殊的静态方法）

graph LR
A[static方法] --允许访问 --> a(static属性)
A --允许访问--> C(static方法)
C --不能访问--> D(非static属性)
D --允许访问--> C
D --允许访问--> a

静态代码块当类被装载时，静态代码块被执行，且仅执行一次。

class StaticCodeBlock{
  static int value ;
  static{
    value = 3;
    System.out.println("value="+value);
  }
  public static void main(String[] args){
  }
}

abstract （以后补充） final final 修饰的类属性为常量； final 修饰的类方法为最终方法，在子类当中不能被覆盖。 native native 修饰的方法称为本地方法，此方法的使用的目的是调用其他语言编写的代码块。缺点：Java 程序的跨平台性能受到限制或破坏。（暂时不明白工作原理）

包（package）

包是对 Java 类进行组织与管理的一种机制。

面向对象之封装、继承与多态

封装（encapsulation）：类与对象继承（inheritance）：基类与派生类多态（Polymorphism）：抽象类与接口

封装

定义：利用抽象数据类型将数据和基于数据的操作绑定在一起，数据被保存在抽象数据类型内部，系统只有通过被授权的操作方法才能够访问数据。特点：（1）数据和基于数据的方法构成一个统一体；（2）隐藏实现细节，只通过操作接口名称进行调用，操作内部的变动不会影响接口的使用。 访问控制符： public（接口访问权限） protected（包访问权限、继承访问权限） “默认”（包访问权限） private（无法直接访问） 这些修饰符可以用于 修饰类
修饰类的属性成员（域）修饰类的成员方法 访问权限：访问权限首先看类前的修饰符，当类的修饰符为 public 时，则类可以被所有的类所访问（可以 import），当为默认时，则只能为包中的类所访问。在此前提下，再看属性和方法前的修饰符。类前修饰符为 public 时，当属性和方法前的修饰符为 public 时，则该属性可以被所有类访问；当属性和方法前为 protected 修饰时，对于类定义而言，可以被同包中的类和所有子类访问（子类和父类可以不在同一个包中），但对于对象而言，只能被同一个包的类对象所访问；当为默认时，只能被同包中的类所访问（比 protected 访问权限小）；当为 private 时，只能被本类内部所访问。 面向对象程序 = 对象+ 消息 消息的实质就是引用向对象发出的服务请求，是对数据成员和成员方法的调用。 能否发送消息取决于 引用必须引用了特定的对象，否则会在运行时抛出 NullPointerException 异常。对象必须定义了相应的属性或方法，否则编译不会通过。被访问的属性或方法必须具有可访问的权限。

继承

1.通过 extends 关键字实现； 2.单一继承； 3.子类继承了父类的所有属性和方法，但只有 public、protected 的属性和方法在子类是可见的； 4.Object 类是所有类的共同祖先，即使定义类时没有写 extents Object 。 5.继承设计用途：功能复用；为引用带来新特点。组合设计用途：功能复用，同时不增加类之间的耦合性。 6.final 为最终类，不能有子类。

多态

1.多态是指一个程序中同名的不同方法共存的情况； 2.Java 中提供两种多态的机制：重载（overloading）与覆盖（overriding）； 3.覆盖与重载的区别：覆盖：方法名称相同，参数相同，返回类型相同；重载：方法名称相同，参数类型或个数不同，返回类型相同； 4.覆盖注意： 1）子类的访问修饰符权限应等于或大于父类； 2）同名的 static 方法和非 static 方法不能相互覆盖； 3）方法前有 final 修饰符，此方法不能在子类方法中进行覆盖； 4）在 JDK 中，很多父类的方法被子类重新覆盖，赋予了不同的含义，如 Object 类中的 boolean equals(Object obj)方法； 5）抽象类中如果存在抽象方法，则具体子类必须对抽象方法进行覆盖； 5.多态设计用途：功能复用，功能扩充。

面向对象之抽象类与接口思想

this，super 用法

this 用法： 1.表示当前对象引用，使用 this.成员名表示当前对象的成员；（常用于形参或局部变量与类的成员变量同名的情形） 2.指代当前对象； 3.调用当前类的构造方法； super super 访问当前类的直接父类。主要应用场合： 1.super.数据成员；super.成员方法 2.super(参数) , 表示调用父类构造方法

构造方法的多态

构造方法的重载 1.一个类的若干个重载的构造方法之间可以相互调用。 2.当一个构造方法需要调用另一个构造方法时，可以使用关键字 this，同时这个调用语句应该（必须？）是整个构造方法的第一个可执行语句。 3.使用关键字 this 来调用同类的其它构造方法，优点同样是以最大限度地提高对已有代码的利用程度，减少程序的维护工作量。 4.父类含参构造方法，子类可以在自己的构造方法中使用 super 来显式调用，但必须是子类构造方法的第一个可执行语句。 5.若子类构造方法中没有显式调用父类构造方法，则在产生子类的对象时，系统在调用子类构造方法的同时，默认调用父类无参构造方法。 4.子类的构造方法必定调用父类的构造方法。

子类对象实例化过程 1.为对象分配内存空间，对成员变量进行默认的初始化； 2.绑定构造方法，将 new 中的参数传递给构造方法的形式参数； 3.调用 this 或 super 语句(二者必居其一,不能同时存在)，执行流程如图所示: 4.进行实例变量的显式初始化操作，如：

     public class A{
         int value=4;       //显式初始化
         B b = new B();   //显式初始化，注：B为另一个类
      }

5.执行当前构造方法的方法体中的程序代码。

抽象类

抽象类形成的思维过程：客观事物—>对象—>类—>抽象类。

抽象类的概念： 用 abstract 修饰的类称为抽象类，用 abstract 修饰的成员方法称为抽象方法。 理解抽象类 1.抽象类和具体类的关系就是一般类和特殊类之间的关系，是继承和被继承的关系。 2.抽象类中可以有零个或多个抽象方法，也可以包含非抽象方法。只要有一个抽象方法，类前就必须有 abstract 修饰。 3.抽象类不能创建对象，创建对象由具体子类来实现，但可以有声明，声明能引用所有具体子类的对象。
4.对于抽象方法，在抽象类中只指定方法名及类型，而不写实现代码。抽象类必定要派生子类，若派生的子类是具体类，则具体子类中必须实现抽象类中定义的所有抽象方法（覆盖）。 5.在抽象类中，非抽象方法可以调用抽象方法。 6.abstract 不能与 final 并列修饰同一个类（产生逻辑矛盾）；abstract 不能与 private ,static（因为 static 修饰的方法必然被直接调用）,final 或 native 并列修饰同一个方法。 抽象类设计用途 1.在继承方面：简化子类定义，增加系统结构关系的清晰度。 2.在引用具体子类对象方面：其声明可以引用所有具体子类的对象。 设计注意事项 1.在设计抽象类的具体子类时，追求它们在实现抽象方法方面所表现的不同性。 2.在确定抽象类的抽象方法时，一定要确保这些抽象方法就是同类对象共同行为的抽取。 3.抽象类中的信息应尽可能和研究对象的本质相关。

接口（interface）

接口扮演将实现者和使用者有机联系到一起的角色

接口的两种含义： 1.可以被引用调用的方法（public 方法或同包中的 protected 方法或默认方法）； 2.另一种是同“类”概念地位相当的专有概念 interface， interface 是方法说明的集合。 interface 声明

  [public] interface 接口名［extends 父接口名列表］
  {
     //静态常量数据成员声明
     [public][static][final] 域类型 域名 = 常量值
　 //抽象方法声明
     [public][abstract]返回值 方法名(参数列表)[throw 异常列表]
  }

定义接口注意事项 1.接口定义用关键字 interface，而不是用 class，interface 前的修饰符要么为 public，要么为缺省。 2.接口定义的数据成员全是 public final static(静态常量)。即使没有修饰符。 3.接口中没有构造方法；所有成员方法都是 public abstract 方法（与抽象类有所不同）。即使没有修饰符，其效果完全等效。注：方法前不能修饰为 final。 4.接口具有继承性，可通过 extends 关键字声明接口的父接口。 5.不能有实例对象。

接口的设计用途： 通用可扩展代码，体现多态。

实现接口注意事项 1.在类中，用 implements 关键字来实现接口。一个类可以实现多个接口，在 implements 后用逗号隔开多个接口的名字。一个接口也可被多个类来实现。 2.接口中的字段（域）的值存储在该接口的静态存储区域内，使用接口名.字段或实现类.字段均可访问。 3.如果实现某接口的类不是 abstract 修饰的抽象类，则在类的定义部分必须实现接口的所有抽象方法，而且方法头部分应该与接口中的定义完全一致。 4.如果实现接口的类是 abstract 类，则它可以不实现该接口的所有方法。但对于抽象类的任何一个非抽象的子类而言，接口中的所有抽象方法都必须实现。 5.类在实现接口的抽象方法时，必须显式使用 public 修饰符，否则将被警告为缩小了接口中定义的方法的访问控制范围。

抽象类与接口的比较

引用

引用形成 先声明，后初始化（将对象赋给引用） //先声明，赋予对象后声明变为引用

抽象类声明引用的特点 抽象类声明可以引用所有具体子类对象，此概念可以推广到所有具有父子关系的类，以及接口和实现类。

引用替规则 父类引用可以指向子类对象，子类声明不能引用平行级别的其它类的对象,也不能引用父类对象。

父类声明和子类声明都引用同一个子类对象的区别 父类声明是从父类的角度去引用对象，子类声明是从子类角度引用对象。父类引用子类对象时，可以经过显式的转化赋给子类的声明，但子类的引用赋值给父类的声明则不需要。

引用比较 1.equals 方法比较 equals 方法是 Object 类的方法，比较本引用和参数指明的某个引用是否相等，即是否指向同一对象。返回 true 或 false。

class A{} class B{}
A a=new A();
B b=new B();
if( a.equals(b) ) {System.out.println("a与b相同");}
else {System.out.println("a与b不相");}

2.使用 " ** " 进行比较如果两边是对象引用则比较的是它们的引用是否相同；如果两边是数值，则比较的是它们的值(如果值类型不同，有可能发生类型转化，例如 10**10.0 将返回 true)；如果一边是引用，一边是值，则编译错误。

3.使用 instanceof 比较引用类型

class A{} class B{}
A a=new A();
B b=new B();
boolen result = a instanceof A;//result为true
boolen result = b instanceof A;//result为false

类的其他相关内容

类的完整定义形式

[修饰符] class 类名 [extends 父类]
                               [implements 接口名1,接口2]
{  类成员变量；
   类方法；}
注：其中修饰符为：public、缺省、abstract、final
                                外部类不能被private、protected所修饰。

内部类定义 定义在某个类 A 中的类 B，（可以是抽象类，也可以是静态类）。相应的，A 就称为外部类。

内部类相关要点 1.内部类可以直接访问外部类中的所有属性；外部内无法直接访问内部类。 2.内部类对象产生方法：

class Outer{public class Inner{}}//public修饰内部类
Outer outer = new Outer();
Outer.Inner inner = outer.new Inner();

class Outer{
	private class Inner{}//不是public修饰内部类
	Inner getInner(){return new Inner();}
}
Outer outer = new Outer();
Outer.Inner inner = outer.getInner();

class Outer{static class Inner{}}//static修饰内部类
Outer.Inner inner = new Outer.Inner();

3.static 修饰的内部类：相当于外部类的一个静态属性，其内部可以有静态方法或属性。不能使用外部类的非静态属性或方法。

4.内部类定义在方法体中时只能访问方法体内的常量，不能访问方法体内的局部变量；此时内部类前不能有修饰符。

匿名内部类与匿名对象 1.匿名对象就是在产生对象时没有显式地为这个对象建立引用。 2.匿名对象在两种情况下经常使用：如果对一个对象只需要进行一次方法调用。将匿名对象作为参数传递给一个函数调用。 3.匿名内部类使用规则：不能有构造方法；不能定以任何静态成员和方法；不能被 public、protected、private、static 修饰；只能创建一个实例。

Class 类

1.在 java.lang 包中有一个特殊的类——Class(注：同关键字 class 区别的地方是首字母大写)，它也继承 Object 类。 2.通过调用对象方法 getClass 而得到 Class 对象，进而我们可以知道类的相关的一些特性，如：类的名称、类的包、类的方法、类的父类等待。

异常

异常含义

正常情况以外的事件，具有不确定性。遇到异常后程序不能正常向下执行。

例如：用户输入错误、除数为 0，需要的文件不存在或打不开、数组下标越界、传入参数为空或不符合指定范围。

异常分类

（暂时也看不懂）

异常处理

graph LR
A(异常处理) --> B(声明抛出处理)
A --> C(程序捕获处理)
B --> D(隐式声明抛出)
B --> G(显式声明抛出)
C --> E(非嵌套捕获)
C --> F(嵌套捕获)

隐式异常抛出 特点：异常类型是 RuntimeException 或是子类时，程序方法可对异常不作任何声明抛出或处理，直接交给调用该方法的地方处理；程序能编译通过，不会给可能产生错误的代码行给出提示。 显式声明抛出 通过 throws 实现例如：

public class A{
	//public static void main(Sting[] args){}改为如下：
	public static void main(Sting[] args) throws IOException{}
	//发生IO异常时，main不负责处理，由调用main方法的地方处理异常
	//即Java虚拟机。
}

注意： 当子类覆盖父类的方法时，子类抛出的异常类应和父类抛出的相同，或为其子类，不能为其父类。

捕获处理 1.异常处理是由 try －catch 组成的一个异常处理块结构；最为完整的方式是 try-catch-finally 语句

2.多 catch 情况：异常类由上到下排布规则：由子到父，由具体到抽象，或为并列关系。执行过程类似于 switch case（但一个执行，其它不执行）。若无异常发生，则都不执行。有时不需要对异常进行细致分类处理，则可统一为 catch(Exception e){}。

3.finally：是这个组合语句的统一出口，一般用来进行一些“善后”操作，例如释放资源、关闭文件等。它是可选的部分，但一旦选定，必定执行。

4.显式异常抛出和程序异常捕获处理的关系（不好描述）

嵌套处理 （顾名思义）注意：最内层的 try 产生的异常对象，如果不能被对应的 catch 异常类声明引用，则转交给外层的 catch 去处理。

自定义异常

异常对象大部分由系统产生；在编程时也可以主动产生异常，相应的语句为：　　　 throw new 异常类； new 后面的异常类可以是 JDK 中定义好的异常，也可以是自定义异常（继承某个异常类的自制异常类）。

用途根据程序的需要而定义流程的跳转。（汇编语言中的断点）

Java 常用类库与工具

Java 类库概述

java.lang 包中的类不需要 import 就可以使用。

String 与 StringBuffer

Stirng

定义： String 不是简单类型，而是一个类，它被用来表示字符序列。字符本身符合 Unicode 标准，其基本的初始化方式如下：

方式一：String s1 = “abc";
       等价于
             char data[] = {'a', 'b', 'c'};  String s1 = new String(data);

方式二: String s2 = new String(“abc");
        等价于
       String s = “abc"; String s2 = new String(s);

对象特点： String 对象是不可变的，在 String 类中每一个看起来会修改 String 对象内容的方法，实质都是创建了一个全新的 String 对象。

//字符串比较
    String s1 = "abc";
    String s3 = "abc";
    System.out.println(s1**s3); // true
    String s2 = new String(“abc");
    String s4 = new String(“abc");
    System.out.println(s2===s4); // false
    System.out.println(s2.equals(s4)); // true
//String类对eqauls方法进行了覆盖，比较两个字符串对象的内容是否相同

作为参数传递的特点：尽管是传引用，但通过形参引用并未改变实参指向的字符串内容。优点：兼顾效率与安全

StirngBuffer StringBuffer 是一个具有对象引用传递特点的字符串对象。

StringBuffer 对象的值是可变的，对字符串的增加、插入、修改、删除等操作比 String 高效（不需多次创建新的对象）

String、StringBuffer、StringBuilder 不同之处 1、String 内部实现基于常量字符数组，内容不可变； StringBuffer、StringBuilder 基于普通字符数组，数组大小可根据
字符串的实际长度自动扩容，内容可变 2、性能方面，对于字符串的处理，相对来说 StringBuilder >StringBuffer>String 3、StringBuffer 线程安全；StringBuilder 非线程安全

系统类与时间类

System 和 Runtime 两个类封装了对系统进行的一些操作； Date 和 Calendar 封装了对日期和时间进行的操作。 System 不能实例化；有 in，out，err 三个域；类成员方法都是静态的。 Runtime 每一个 Java 应用程序都有一个 Runtime 类的实例，允许应用程序与其运行的环境进行交互。要得到该类的实例，不能用 new 的方法产生，只能调用该类的 getRuntime 方法。 Date JDK 当中有两个同名的 Date，一个存在与 java.util 包中，一个存在于 java.sql 包中。前者在 JDK1.0 中就出现，但是逐渐被弃用（被 Calendar 所取代）；而后者是前者的子类，用来描述数据库中的时间字段。 Calendar Calendar 类是对时间操作的主要类。要得到其对象引用，不能使用 new，而要调用其静态方法 getInstance，之后利用相应的对象方法。

格式化类

格式化数字：NumberFormat 和 DecimalFormat 格式化日期：SimpleDateFormat 对象的 format 方法是将 Date 转为 String，而 parse 方法是将 String 转为 Date

Java 高级特性之线程

线程概念

进程一个进程就是一个执行中的程序；每一个进程都有自己独立的一块内存空间、一组系统资源；每一个进程的内部数据和状态都是完全独立的。线程 Java 程序执行中的单个顺序的流控制称为线程；多线程则指一个进程中可以同时运行多个不同的线程，执行不同的任务。 区别比较 同类的多个线程共享一块内存空间和一组系统资源，而线程本身的数据通常只有微处理器的寄存器数据，以及一个供程序执行时使用的堆栈。所以系统在产生一个线程，或者在各个线程之间切换时，负担要比进程小的多。 线程意义 提高 CPU 利用率，即提高系统性能。

线程创建

方式一 通过继承 Thread 类创建线程，类 MyThread 声明为 Thread 的子类。

public class MyThread extends Thread {
    public static void main ( String args[] ) {
        Thread a = new MyThread();
        a.start();
        System.out.println("This is main thread.");
    }
    public void run() {
        System.out.println("This is another thread.");
    }
}

方式二 利用 Runnable 接口产生线程。

public class MyThread implements Runnable {
    public static void main ( String args[] ) {
        MyThread my = new MyThread();
        Thread a = new Thread(my);
        a.start();
        System.out.println("This is main thread.");
    }
    public void run() {
        System.out.println("This is another thread.");
    }
}

注意 1.要用 start() 来启动线程.

new MyThread().run();//没有新建线程
/*private Runnable target;
 *public void run() {
 *        if (target != null) {
 *            target.run();
 *        }
 *    }
 */
new MyThread().start();

2.子类应该覆盖 run()方法。

线程控制与调度

并发特性：可见性；有序性；原子性。

1.线程的生命周期和状态的改变 2.常用方法 join thread.Join 把指定的线程加入到当前线程，可以将两个交替执行的线程合并为顺序执行的线程。比如在线程 B 中调用了线程 A 的 Join()方法，直到线程 A 执行完毕后，才会继续执行线程 B。 t.join(); //调用 join 方法，等待线程 t 执行完毕 t.join(1000); //等待 t 线程，等待时间是 1000 毫秒。 3.调度 线程调度：当有多个线程处于就绪状态时，线程调度程序根据调度策略安排线程的执行。调度策略：抢占式调度(preemptive): 支持基于固定优先级的调度算法，高优先级线程抢占低优先级线程执行; 时间片轮转调度(round-robin)：对于同等优先级的线程，轮流分享 CPU 时间运行。 4.优先级 线程优先级： public static final int NORM_PRIORITY = 5; public static final int MIN_PRIORITY = 1; public static final int MAX_PRIORITY = 10; 可以用下面方法设置和返回线程的优先级。

   public final void setPriority(int newPriority); // 设置线程的优先级。
   public final int getPriority();  // 返回线程的优先级。

5.局限 Java 中，优先级高的线程只是比优先级低的线程更有机会执行，具体的执行情况还依赖于操作系统的支持，执行顺序并不是确定的。 6.volatile 用法：

volatile  public int i;

作用：为解决缓存不一致，禁止编译优化，只读写主存。问题：仍不能解决多线程并发中的安全问题。

线程同步机制

未解决同步问题，设置对象监视器，即锁。 一个对象只有一个锁 对象监视器（monitor）与关键字 synchronized

Synchronized 的三种用法：

synchronized 代码块：监视器就是指定的对象。

class A {
	void put(int i){
	 	while(ture){
	 		synchronized (this){
	 			if(ture) {...}
	 		}
	 	}
	}
}

synchronized 方法：监视器就是 this 对象。

class A { synchronized void put(int i){...} }

synchronized 静态方法：监视器就是相应的 Class 对象。

死锁（deadlock）

方法一：{
synchronized(A) {
     ….
    synchronized(B) {
        ….
    }
}
}

方法二：{
synchronized(B) {
     ….
    synchronized(A) {
        ….
    }
}
}

一般解决办法：CUP 老大站出来，kill 掉一个。

线程间的同步通信

使用 wait 和 notifyAll 实现线程间同步通信

《notify 和 notifyAll 的区别》原文：https://blog.csdn.net/u014658905/article/details/81035870

调用 notify 时，只有一个等待线程会被唤醒而且它不能保证哪个线程会被唤醒，这取决于线程调度器。虽然如果你调用 notifyAll 方法，那么等待该锁的所有线程都会被唤醒，但是在执行剩余的代码之前，所有被唤醒的线程都将争夺锁定，这就是为什么在循环上调用 wait，因为如果多个线程被唤醒，那么线程是将获得锁定将首先执行，它可能会重置等待条件，这将迫使后续线程等待。因此，notify 和 notifyAll 之间的关键区别在于 notify（）只会唤醒一个线程，而 notifyAll 方法将唤醒所有线程。

Java学习笔记二（温故知新）

Sun, 21 Feb 2021 00:00:00 GMT

说明

本文章记录的内容是零散的。我看书时候，遇到觉得有意思的地方、值得记录一下的知识点、被我以前忽略的地方，就写下来。

第四章面向对象上

1、类中局部变量在使用前必须进行赋值初始化。

2、this 用于区分局部变量和域变量。

3、方法在调用时，系统会开辟一个栈空间，存放局部变量和形式参数。执行时，访问复制到对象中的属性。方法执行完毕后，栈空间被释放。

4、static 修饰的属性专属于类，不复制到对象中；static 方法调用时，同样的开辟栈空间。执行时，只能访问专属于类的 static 的属性。执行后，栈空间释放。

5、ClassName cn = new ClassName();代码执行过程是，先产生对象，之后将对象赋予声明 fp。

6、内存空间分为堆和栈。堆在应用程序生命周期内一直存在；栈在方法调用完毕后被释放。类和对象分配在堆当中；方法执行时使用的局部变量和形式参数则放在栈空间中。

7、ClassName cn = new ClassName();语句在某个方法中执行时，声明 cn 存在于方法栈中，cn 相关的对象存在于堆中。方法栈空间释放后，cn 相关的对象仍会存在一段时间。

意义：本方法方法执行完毕后，产生的对象可能在其他地方仍然被使用。于是，可能有多个声明都和这个对象相关。如果每释放一个声明，就全部检索一遍是否仍有相关，这将是非常浪费资源的行为。当然，无用的对象在堆中也会消耗空间资源。没有十全十美。

8、数组名.length 中分 length 是属性，不是方法。

9、void 返回与没有返回的区别。void 只是用于标记该方法没有返回，与有返回的方法作区分。而构造方法与析构方法本身有隐含的返回值，该值由系统内部使用，所以就不写 void 标记，当然其他标记也不可以。

10、构造方法被系统自动调用，不能通过对象引用来调用。

11、System.gc() 方法提醒系统进行一次垃圾释放，但不一定释放，因为垃圾回收的系统线程级别很低。

根据 Java 文档，finalize() 是一个用于释放非 Java 资源的方法。例如本地方法——在 java 中调用的非 java 代码。

不重写 finalize 方法：使用 try...finally...代码块，将要执行的后续操作放入到 finally 块中。

12、static 方法只能访问到 static 属性或方法，非 static 方法可以访问全部。

13、如果 main 方法中缺少 static ，虽然编译能够通过，但它不能作为程序的入口。原理一：当类被装载时，静态代码块被执行，且只被执行一次。

14、final 修饰的类属性，相对于常量的值，有助记符。

15、包的特殊存在形式——默认包

16、package 是 Java 产生包路径的关键字，且应放在程序的第一句。

第五章面向对象中

1、面向对象的基本特征主要有封装、继承和多态。

2、封装内部的 set 方法可以加上数据合法性检测。例如，String.trim() 方法用于删除字符串的头尾空白符。

3、访问控制权限有四种，第四种是“默认”（无任何修饰符）。修饰类的有两种：public 和默认。修饰类属性成员和方法的有四种。

4、类的构造方法的修饰符为 private 时，外部无法直接产生其对象。

5、public 类的 protected 属性和方法并不安全，因为可以通过子类对象直接访问其属性和方法。但是又可以加强子类的安全性，从而都变得安全。

6、程序=数据结构+算法；程序=对象+消息

7、生产子类对象时，只将父类和子类的非静态属性复制到子类对象中。

8、父类中存在 private 属性时，子类对象是否复制 private 属性，区分点在于，父类中是否存在可被继承的可以访问 private 属性的方法。分两种情况：其一，不存在，不复制，不能访问；其二，存在，复制，但是子类内部甚至都不能直接访问。

9、jdk11 中，Object.finalize() 被弃用，理由是 The finalization mechanism is inherently problematic.

10、java 中，同名同参数不同返回值类型的方法，不是重载，也不是子类中的覆盖。编译不能通过。

11、子类方法覆盖父类方法时，子类的访问修饰符权限应等于或大于父类的。（public 最大）

12、静态和非静态方法不能互相覆盖。

13、抽象类中如果存在抽象方法，则具体子类必须对抽象方法进行覆盖。

第六章面向对象下

1、注意 this 指代当前对象这种用法。

2、构造方法可以通过 this 调用重载的其他构造方法。注意，这个调用语句放在第一个可执行语句位置。

3、注意语句执行顺序： System.ooutprintln("a + b + c =" + p1.add()); p1.add()完全执行完之后，才会打印前面的字符串"a+b+c="。

4、子类的构造方法必定调用父类的构造方法。至少会隐含调用 super() 。所以要注意：当父类只含有有参数的构造方法，子类自动调用时，可能出错。

5、思考：因为 super 的存在，那么子类在一定程度上，是可以控制父类属性的变化的。

6、构造方法中的代码要在显示初始化后执行。

7、抽象类的子类如果仍是抽象类，则不能定义和父类同名的抽象方法。

8、Java 中的借口有两种含义：其一，可以被引用调用的方法；其二，专有概念——interface 。

9、接口中的数据成员全部是 static final ，无论是否有修饰；接口中的成员方法全部是抽象方法，无论是否有修饰；接口没有构造方法，也并不能有自己的实例对象。

10、接口的作用：使功能的实现和使用以弱耦合的方式连接起来。

11、如果实现某接口的类不是抽象类，那么必须实现接口中的全部抽象方法；这里的实现，可以来自是实现类本身；也可以来自他的抽象父类中实现了一部分的方法。

12、如果接口的抽象方法的访问控制符是默认或 public，那么实现时必须显示地使用 public 修饰符。

13、面向抽象类和接口编程，这是各种设计模式的核心思想之一。

14、JDK1.1 之后，Java 事件实现机制，从层次模型改为委托模型，即监听者模式。

15、注意，Java 事件处理机制。一般有两种方式，但是都是相同的： 1）事物委托型（监听者模式） 2）观察者模式原理想通的。

16、灵活应用构造方法，来实现两个对象之间的互相链接。这是实现监听或观察的基本步骤。

17、当接口需要增加新功能方法时，完全可以通过接口的继承，将变化体现在子接口中，从而保证父接口的稳定。

18、父类申明看似比子类申明要更宽泛，因为父类声明所引用的子类对象在赋值给子类申明时，需要显示转换。这类似于，double 赋值给 float 时，要显示转换，防止溢出；反之，隐式转换。

在理解父类申明的使用时，不难发现，他不能调用子类新创的属性和方法，实际作用范围是小于子类申明的。

19、语句 a instanceof A 有三种结果： a 是 A 或其子类的实例，true； a 是 A 父类的实例，false；若无关系，编译不能通过。

20、上述 19 条中，a instanceof A 中的子类，可以是指多代之后的子类，子、孙、玄孙，也都是 true。

21、数据成员隐藏，父类声明引用子类对象，这时，父类引用访问的对象属性默认是父类的那个被隐藏的数据。而方法覆盖时，父类引用访问的对象方法，是子类的那个方法。（Java 方法没有隐藏的概念。）

22、内部类存在于两个位置： 1）外部类域——可以被全部 6 种修饰符修饰。 2）方法内部——不能被任何修饰符修饰。

23、static 内部类不能再使用外部类的非 static 属性和方法。这符合之前对 static 的理解。

24、注意匿名内部类的多种情形和写法。

25、匿名内部类继承了只含有有参构造方法的父类时，需要在创建时的括号类带上相应的参数。当然，这样只是统一了形式，其内部仍没有构造方法。

26、Object 中的 getClass() 获得 Class 对象。主要作用是获得一些周边信息。

第七章异常

1、稍稍注意异常 Exception 和错误 Error 的区分。 JDK 中关于 Error 的描述： An Error is a subclass of Throwable that indicates serious problems that a reasonable application should not try to catch. Most such errors are abnormal conditions.

举例：运行算式时除 0，是异常，IO 找不到文件，是异常； Java 虚拟机损坏或耗尽了继续运行所需的资源，是错误。

2、虚拟机系统产生异常对象。

3、异常隐式抛出的前提条件是，异常类型为 RuntimeException 或其子类。

4、语句 void functionName() throws IOException; 含义：此处的异常不由本方法处理，而是由调用本方法的地方处理。

5、子类覆盖父类的方法时，异常类应该一致或为其异常子类。

6、try 后的 catch 语句可能有多个，因为 try 中的异常可能抛出多个。这类似于 switch case 语句的作用，因此，catch 中异常类的排序一般是按照 F 从子类到父类顺序。

7、Finally 语句块一旦选中，必定执行。例如：rty{return;}finally{System.out.println("字符串");}仍会打印字符串。

8、异常嵌套似乎一直存在，比如第一个 try catch 和虚拟机之间就存在嵌套。

9、应用逻辑中的异常，不一定等于语言语法上的异常。于是，自定义异常，用来控制流程的跳转，就很有帮助了。

第八章 Java 常用类库与工具

1、稍稍注意顶层类和顶层包的概念。这里也解释了为什么文件同名类总是 pubic 开头。

2、java.lang 包中的类无须 import 。

3、注意理解集合类、反射包类。水很深啊。

4、String 定义时，编译器会优化代码（编译器的优化都是可以通过参数控制开关是），导致 String str1 = "s"; String str2 = "s" ; 中，str1 和 str2 指向同一个对象，而不会产生新的对象。

5、字符串方法使用时，本身不能为 null。即使调用的是增加后缀的方法。

6、返回新字符串的方法，不能改变原来的字符串。例如 b = b.newString(); c = b.newString(); 上述中，b 不改变，但是 c 会改变。

7、String 与 StringBuffer 的相互转化： StringBuffer sb = new StringBuffer(new String()); String s = new String(new StringBuffer());// 或者使用 toString()方法。

意义：String 转化为 StringBuffer 便于字符串的处理，同时不会增加过多的 String 对象。

8、System 类不能被实例化。它的类成员方法都是静态的。（估计设计出来就是避免 Java 虚拟机和外部操作系统直接相关的。）

9、每一个 Java 应用程序只允许有一个 Runtime 类实例。（它涉及到关键的控制点，进程）

第九章线程

1、线程本身的数据通常来自两个地方： 1）微处理器的寄存器； 2）程序运行时的堆栈。

2、Java 的产生线程的方法： 1）继承 Thread 类，并覆盖其 run 方法； 2）实现 Runnable 接口，并并将实现类对象传参到 Thread 类的构造方法。

3、Runnable 接口只有唯一的抽象方法 run(); 上述两种方法原理是相通的，都是手动覆盖或者实现 run()方法，再由 Thread 的 start() 方法启动线程。

// Thread 中的部分代码
private Runnable target;
public void run() {
        if (target != null) {
            target.run();
        }
    }
// ------------------------
public synchronized void start() {
        /**
         * This method is not invoked for the main method thread or "system"
         * group threads created/set up by the VM. Any new functionality added
         * to this method in the future may have to also be added to the VM.
         *
         * A zero status value corresponds to state "NEW".
         */
        if (threadStatus != 0)
            throw new IllegalThreadStateException();

        /* Notify the group that this thread is about to be started
         * so that it can be added to the group's list of threads
         * and the group's unstarted count can be decremented. */
        group.add(this);

        boolean started = false;
        try {
            start0();
            started = true;
        } finally {
            try {
                if (!started) {
                    group.threadStartFailed(this);
                }
            } catch (Throwable ignore) {
                /* do nothing. If start0 threw a Throwable then
                  it will be passed up the call stack */
            }
        }
    }

private native void start0();

start() 的 JDK11 描述： Causes this thread to begin execution; the Java Virtual Machine calls the run method of this thread.

4、两种方法的比较： 1）由于 Java 单继承的特性，所以通过继承覆盖 run() 的方式会有不小的局限性； 2）通过接口实现的方式，多线程可共享实现类对象的资源。

（其中第二条存疑，保留，暂时不做解释）

解释共享：观察语句 RunnableImplement m = new RunnableImplement(参数); Thread thread1 = new Thread(m); Thread thread1 = new Thread(m); 这里都是传递的 m 到 Thread 构造方法，那么之后这两个线程自然都是围绕着 m 在运行，也就是访问的对象是同一个，同时控制对象内部的数据成员变化。

对比继承覆盖的方式，观察语句： Thread a = new MyThread(); a.start(); 这里如果出现多次声明创建 MyThread 对象，这些对象之间毫无交叉，彼此独立。

5、注意 volatile 关键字的作用：让 JVM 总是从主存中读取数据，一定程度上防止共享的数据不一致。

6、一个具有生命的线程总是在五个态之一：创建、可运行（就绪）、运行中、阻塞、死亡。

这里的“具有生命”和生物上的理解有些不同，包括了创建和死亡状态。

7、Java 中，如果一个程序只有后台线程，那么这个程序就会立即结束。

（前台线程和后台线程的区分与联系）

1）后台线程不会阻止进程的终止。属于某个进程的所有前台线程都终止后，该进程就会被终止。所有剩余的后台线程都会停止且不会完成。 2）可以在任何时候将前台线程修改为后台线程，方式是设置 Thread.IsBackground 属性。 3）不管是前台线程还是后台线程，如果线程内出现了异常，都会导致进程的终止。 4）托管线程池中的线程都是后台线程，使用 new Thread 方式创建的线程默认都是前台线程。

用法：一般前台线程用于需要长时间等待的任务，比如监听客户端的请求；后台线程一般用于处理时间较短的任务，比如处理客户端发过来的请求信息。

8、阻塞状态的线程，仍可能继续占用同就绪状态一样的资源。

9、yield() 暂停线程时，系统是选择其他同优先级线程执行，最后再选用自己。这种设置，可以用来作为一种信息处理的手段。

10、Thread a; a.join(参数); 暂停的是这句话所在的线程（即当前线程），直到 a 线程执行完毕（或者一段时间，取决于参数）。

11、高优先级线程执行时，采用独占的方式调度。

12、多线程中程序执行顺序是多变的。

13、synchronized 工作原理、用法、区别。（之后补充）

基本解释： Java 语言为了解决并发编程中存在的原子性、可见性和有序性问题，提供了一系列和并发处理相关的关键字，比如 synchronized、volatile、final、concurren 包等。

用法：主要有两种用法，分别是同步方法和同步代码块。也就是说，synchronized 既可以修饰方法也可以修饰代码块。

原理：对于同步方法，JVM 采用 ACC_SYNCHRONIZED 标记符来实现同步。对于同步代码块。JVM 采用 monitorenter、monitorexit 两个指令来实现同步。

无论是 ACC_SYNCHRONIZED 还是 monitorenter、monitorexit 都是基于 Monitor 实现的，在 Java 虚拟机(HotSpot)中，Monitor 是基于 C++实现的，由 ObjectMonitor 实现。

ObjectMonitor 类中提供了几个方法，如 enter、exit、wait、notify、notifyAll 等。

（大坑！目前填不上了。）

参考文章

14、Java 死锁相关。 Java 不能发现和避免死锁问题，这需要靠程序员自己注意...... （之后补充）

死锁是这样一种情形：多个线程同时被阻塞，它们中的一个或者全部都在等待某个资源被释放。由于线程被无限期地阻塞，因此程序不可能正常终止。

java 死锁产生的四个必要条件：

1、互斥使用，即当资源被一个线程使用(占有)时，别的线程不能使用 2、不可抢占，资源请求者不能强制从资源占有者手中夺取资源，资源只能由资源占有者主动释放。 3、请求和保持，即当资源请求者在请求其他的资源的同时保持对原有资源的占有。 4、循环等待，即存在一个等待队列：P1 占有 P2 的资源，P2 占有 P3 的资源，P3 占有 P1 的资源。这样就形成了一个等待环路。当上述四个条件都成立的时候，便形成死锁。当然，死锁的情况下如果打破上述任何一个条件，便可让死锁消失。

15、wait 暂停当前线程，并释放该对象监视权；（注意区分）sleep 暂停当前线程，但是不释放该对象监视权。

16、notify() 释放该对象监视权，并唤醒队列中和它拥有同类型对象监视器标签的等待线程。

17、线程同步通信由三方面配合实现： 1）方法前的 synchronized 2）方法中的 wait 和 notify 3）一个布尔型的变量指示器

18、notifyAll() 和 notify 理解。（之后补充）

notify() 方法随机唤醒对象的等待池中的一个线程，进入锁池；notifyAll() 唤醒对象的等待池中的所有线程，进入锁池。

等待池：假设一个线程 A 调用了某个对象的 wait()方法，线程 A 就会释放该对象的锁后，进入到了该对象的等待池，等待池中的线程不会去竞争该对象的锁。

锁池：只有获取了对象的锁，线程才能执行对象的 synchronized 代码，对象的锁每次只有一个线程可以获得，其他线程只能在锁池中等待

第十章集合类

1、集合类和集合接口类似与对象数组，但是其中的元素类型可以不一致。这好像 C 语言中的联合体。（具体区别需要另外去查资料，这里只是方便理解。）

2、对集合类对象中的对象元素进行遍历常用 Iterator 迭代器接口，而枚举接口 Enumeration 仅限于特定类，如 Vector、Hashtable 等。

3、for 循环的增强写法竟然有规定的读法：写作：for (MyObject m: c) {} 读作：for each MyObject in c.

（有点 Python 的味道了）

4、注意五个类的关系：子接口 ListIterator 继承了接口 Iterator；子接口 List 和子接口 Set 继承了接口 Collection； Collection 中可以调用方法产生 Iterator 对象引用； List 中有额外的方法来生产 ListIterator。

5、ListIterator 可以说是 Iterator 的功能拓展，具有更多更强大的功能；但是相应的，他的使用范围被局限在 List 接口这一个地方。（这应当是列表和集合的不同特性决定的。）

6、基本数据类型的包装类都默认实现了 Collection 。

7、造型和泛型：造型：在取出对象时进行类型转化，不匹配时抛出异常；泛型：在定义时就加入类型标志，编译时自动检测类型匹配；

泛型在 JDK1.5 之后被引入，替代造型的使用。

8、Bitset 类是二进制类构成的集合，其中的元素都是 flalse 或 true 。于是，可以虚拟一个电脑了。

9、如果考虑类的性能问题，就一定要设置好集合对象的初始大小。（注意，它们自动增加容量的时候，是当前容量使用到一定程度——载入因子——的时候）

10、HashMap 对象遍历顺序与加入对象元素的顺序并不一致。而 TreeMap 的映像以关键字的字母顺序存储，单这却造成了额外的开销。

这两个配合使用，能够有效的坚固兼顾性能和排序需求。

第十一章 Applet 程序

虽然 Applet 不用了，但是学习一点基本概念也可以了解设计思想，触类旁通。

1、Applet 生命周期的四个状态：初始态、运行态、停止态、消亡态。

2、状态转化涉及的四个方法： init()、start()、stop()、destroy()

第十二章 AWT 图形界面

这一章也是简单了解基本概念即可。

1、容器（Container）继承自 Component ，所以其本身也是组件。但是他的主要功能是容纳其他组件和容器。

2、面板类（Panel ）是 Container 的子类，他实例化后必须装入到 Window 对象中。

3、Frame 对象创建后，如果要其可视，则必须调用 setVisible() 方法。

4、Frame 对象产生时，创建了一个前台线程——AWT 线程。

5、FileDialog 用于对文件读取和存储时指定路径和文件名。

6、组件是 Java 用户图形界面的基本单元。组件不能独立显示，必须放到特定的容器中。

7、组件文本框 Textfield 单行的文本输入框。

8、组件文本域 FileArea 是一个多行文本框。

9、单选按钮必须属于一个条目组，一个条目组中的按钮具有互斥关系。

10、列表与下拉列表的区别：列表条目的数量超过列表显示的行数时会自送出现滚动条；列表既可以多选也可以单选。

11、组件在容器中的位置可采用两种方式确定： 1）使用容器坐标系确定； 2）使用容器布局管理器确定。

容器默认采用的是布局管理器来进行组件布局。如果要使用 1），则需要执行 setLayout(null) 语句。

12、布局管理器的类型主要有 5 种：

1）FlowLayout Panel、Applet 容器的默认布局管理器；布局规律：上下左右。

2）BorderLayout （Border 边境） Window、Frame、Dialog 的默认布局管理器；布局规律：把容器分为东西南北中 5 各区域。

3）GridLayout （Grid 网格）布局规律：使容器中的各个组件呈网格状布局，平均占据容器的空间。

4）CardLayout 布局规律：把容器分为多层，每层显示空间占据整个容器大小，每层只放置一个组件。

5）GridBagLayout 布局规律：具有极强的灵活性。（自定义）每个组件都有一个 GridBagConstraints 对象来给出他的大小和希望摆放的位置。

13、Java 程序运行时，用户在界面上进行的操作会被系统捕捉，然后产生相应的事件对象 event 交由事件程序处理。

14、Java 事件处理模型有两种： 1）JDK1.0 的层次事件模型当事件产生时，它先被送往产生该事件的组件 (component), 如事件在这里未被处理，它就会被自动送往该组件的 Container, 如 Container 也未对事件进行处理，则还会递交给该 Container 的上一层 Container（如有的话）。

2）JDK1.1 以后的委托事件模型当事件产生时，该事件被送到产生该事件的组件去处理，而要能够处理这个事件，该组件必须登记(register)有与该事件有关的一个或多个被称为 listeners 的类，这些类包含了相应的方法能接受事件并对事件进行处理。在这种模式中，事件的产生者和事件的处理者分离开来了，它们可以是不同的对象。事件的处理者，即那些 listeners，是一些实施了 Listener 接口的类。当事件传到登记的 listener 时，该 listener 中必须有相应的方法来接受这种类型的事件并对它进行处理。

14、AWT 监听接口的四种实现方式： 1）在实现者之中给出接口的每个方法实现； 2）采用接口形式产生匿名对象给出实现； 3）采用事件适配器方式； 4）采用适配器形式产生匿名对象给出实现；

15、可利用事件对象提供的方法得到事件源对象信息： new ActionEvent().getSource() 返回事件源对象的引用。

16、书中原话：（当然 Swing 也凉凉了）虽然 AWt 在 Java 界面设计中的地位被 Swing 逐渐取代，但作为 Swing 理解和应用的基础，AWT 仍然很重要。

第十三章 Swing 图形用户界面

1、AWT 的组件都有 peer 组件，peer 与特定操作系统相关的内容；Swing 的大部分组件都有由纯 Java 实现的委托组件 ComponentUI 。

2、Swing 采用 MVC 设计模式。 Model，View，Controller。

3、大多数 AWT 组件名称前面加上“J”就是 Swing 中对应的组件。

4、Swing 的容器大致分为三类：顶层容器、中间容器、特殊容器。

5、编写 Swing 程序的步骤：引入 Swing 包；选择外观和感觉；设置顶层容器；设置 Swing 组件；进行实践处理。

第十四章 I/O 输入/输出

1、流的分类：

1）流动方向输入流、输出流

2）读取类型字节流：InputStream 和 OutputStream 派生的一系列类字符流：Reader 和 Writer 派生出的一系列类

3）发生的源头节点流：直接操作目标设备的流过滤流：程序可以通过过滤流去操作节点流

2、Java 标准输入/输出流标准输入：对象是键盘，Java 对应的类是 System.in 。标准输出：对象是屏幕，Java 对应的类是 System.out 。标准错误输出：对象也是屏幕，Java 对应的类是 System.err 。

3、输入输出流调用 close 的作用是释放占用的系统资源，不仅仅是释放一个文件引用。

4、常用字符流： 1）文件流 FileInputStream、FileOutputStream 2）字节数组流 ByteArrayInputStream、ByteArrayOutputStream 3）管道流 PipedInputStream、PipedOutputStream 4）对象流 ObjectInputStream、ObjectOutputStream 5）过滤流 FilterInputStream、FilterOutputStream 6）缓冲流 BufferedInputStream、BufferedOutputStream 7）数据流 DataInputStream、DataOutputStream 8）打印流 PrintStream

5、字符流和字节流的相互转化的过程叫做流的装配过程。

6、File 类不仅指系统中的文件，也指目录。因为目录也是特殊的文件。

7、File 的含义和提供的方法使其很容易应用于递归之中。

8、写入文件时，有覆盖和追加两种方式，在 FileOutputStream 的构造方法中指出。

9、调用 flush 方法一次性将缓冲区的数据写入到 FileOutputStream 中。如果用 PrintStream，则调用 println 方法或者自动检测换行符，都会自动调用 flush 方法。

10、流装配套路固定，但是可以灵活使用。

11、对象串行化的目的是，便于网络传输和介质传输。

12、对象持久化：内存中的对象保存在硬盘介质上。

13、编列（Marshaling）就是将参数（不同机器之间调用方法时的参数传输比本地要复杂一点）转化为可以传输的形式。串行化之后编列。

14、Interface Serializable 中没有任何方法。他是对象串行化的一个标志，表明一个实现类加入对象串行化协议。

第十五章 Java 网络通信

1、Java 网络编程从传输层开始，并分为高层次网络编程（基于应用层）和低层次网络编程（基于传输层）。

数据链路层的编程和通信与设备紧密相关；网络层编程和操作系统紧密相关。这都不适合具有平台移植性的 Java 。

2、URL 最后可精确到一个文件名，或者文件内部的一个锚点。

加上锚点可以指定到页面上的某个元素，例如网站登录之后，回到登录前点选中的某个标签上，可以使用锚点来跳转回来。

3、一个 URL 对象生成之后，其属性不能改变，只能访问（通过其提供的方法）。

4、Java 下 Socket 编程主要指基于 TCP/IP 协议的网络编程。注意：Socket 支持的协议种类不止 TCP/IP 协议一种，而可以操作 TCP/IP 协议的接口不止 Socket 一个。两者没有必然联系。

5、Socket 和 URL 应用场景不同。 Socket 面向内部网络通信； URL 适用于面向 Internet 通信。

6、在关闭 Socket 之前，还应该关闭与 Socket 相关的所有输入/输出流。

7、bind() 方法没有调用时，系统会自动绑定本地地址和一个可用的端口。

8、DatagramSocket 用于在程序之间建立传送数据报的通信连接，DataGramPacket 则用来表示一个数据报。

9、Socket 中的地址和端口号是目的机器的地址和端口号，而 DatagramSocket 中的则是本机的。

第十六章 JDBC

1、JDBC 全称为：Java DataBase Connectivity 他是一种规范，统一 Java 应用程序对关系数据库的访问。

2、数据库的种类：（6 种）

层次数据库（Hierarchical Database，HDB）

关系型数据库（Relational Database，RDB）

面向文档（Document-Oriented）数据库

列存储（Column-oriented）数据库

XML 数据库（XML Database，XMLDB）

键值存储数据库（Key-Value Store，KVS）

3、数据库的作用是存储数据，同一个应用程序对存储到数据库中的数据使用逻辑往往都是一样的。

4、先有 Java.sql 中的各种接口的定义，再由数据库厂商按照接口定义来做它们的驱动程序。

~~（好家伙！一次工作转嫁，一辈子编程吃香。）~~

5、JDBC 驱动类型有三类： 1）纯 Java 驱动 2）JDBC 调用客户端 3）JDBC/ODBC 桥

6、使用 JDBC 操作数据库的步骤：（五个步骤）

1）载入 JDBC driver // 类型不同，会有不同的载入操作。

2）得到数据库的 Connection 对象 // 注意，Connection、Statement、ResultSet 都是接口，要用特定的方式产生对象。

3）根据连接对象得到 Statement 进行查询或更新数据。

4）如果执行查询，则对记录集 ResultSet 进行遍历操；如果执行更新，则根据成功与否的返回结果进行数据库事务操作。 // 这里有很多细节操作值得注意，能够让运用更加灵活。

5）操作结束后，依次对 ResultSet、Statement、Connection 执行关闭操作。 // 注意，依次关闭，且由于容易发生异常，应该放在 finally 中执行。

7、在 finally 当中对接口引用对象关闭时，其接口声明应该在 try-catch-finally 之外。并且，finally 中也应该要进行异常捕获。

8、虽然 JDBC 面对不同数据库的代码不完全相同，但是已经做到了核心功能代码部分能够重用了。

第十七章 UML 简介

粗略的看了看，没什么记录。

第十八章设计模式

1、GoF 模式 Gang of Four 四人组系统的整理和描述了 23 种个精选的设计模式。

2、面向对象语言学习是一种规则学习，而设计模式学习则是进行面向对象设计思想的学习。

3、每个 GoF 模式都有四个要素：模式名称、问题、解决方案、效果。

4、GoF 模式根据范围可分为类模式和对象模式两种，根据目的可分为创建型、结构型、行为型三种。

5、模式原则：

1）开闭原则开闭原则是指软件系统对拓展开放，对修改关闭。开闭原则的具体实现方法是，依赖接口编程而不是依赖实现编程。

2）组合 /聚合复用原则继承是白箱复用，而组合聚合则是黑箱复用。在复用选择时应该优先选择黑箱复用，有四个优点。

3）高内聚松耦合原则耦合是指两个对象相互依赖对方的程度，内聚是指一个对象内部功能相联的程度。（注意两点：类的单一职责，以及接口隔离）

第十九章软件框架

1、软件框架（Software Framework）是对通用功能操作进行抽象的软件。

2、软件框架的四个特点： 1）基于框架的应用程序的流程控制在框架内部； 2）框架针对通用功能给出了默认实现； 3）框架内部代码不可被用户修改； 4）框架可以被应用程序有选择的覆盖和细化来实现功能。

3、框架是软件，设计模式是软件的知识。

4、常见的框架技术路线主要有两类： 1）微软的 .NET Framework； 2）基于 J2EE 的 Java 应用框架。

5、Srtuts 是实现 MVC （Model-View-Controller）架构的框架，分为 Struts1 和 Struts2。

6、Spring 是全方位的应用程序框架，功能强大。

7、AOP （Aspect-Oriented Programming）是相对于面向过程、面向对象编程而言一种新的编程思想。Spring 提供面向对象编程的 AOP 子框架。

8、应用过于依赖框架不是件好事。如果能做到应用不依赖于框架，控制关系就会反向（IoC，Inversion of Control）。

9、Struts1 框架负责为 Model、View、Controller 三者之间的关系调用提供一个基本的环境。

10、Struts1 有四个不足之处： 1）框架同应用是正向控制关系，即应用依赖于框架； 2）易产生线程安全问题； 3）ActionForm 的冗余问题； 4）表现层单一：只支持 JSP。

11、Struts2 源于 WebWork，可以看做是 WebWork 的升级版，而不是 Struts1 的升级版。

12、Struts1 和 Struts2 的编程思维截然不同。

13、模板技术是指将视图显示和业务规则代码分离的一种技术。

14、Struts2 的 Controller 室友核心控制器 FilterDispatcher 和 Action 组成的。

15、一个 Action 的拦截器数量无要求。

16、Struts2 核心功能放在拦截器（Interceptor）上。

17、Struts2 与 Struts1 的对比： 1）Struts2 是个 IoC 反向控制容器，大大降低两类框架和应用的耦合； 2）Struts2 为每一个请求单独建立一个 Action 对象，从而不会产生线程安全问题； 3）Struts2 视图通过支持模板技术拓展了表现类型；等等...

第二十章软件体系结构与分布式对象技术

1、软件体系结构：两种成分的集合：其一，具有一定形式的软件结构化元素；其二，他们之间的关系。

2、软件系统的分类： 1）从构成角度划分构件、他们之间的调用关系 2）从开发过程角度划分概念结构、物理结构 3）从运行角度划分静态结构、动态结构 4）从部署的角度集中式结构、分布式结构

3、常见的分布式系统结构： C/S 以及 B/S

4、C/S 的特点是必须在客户端安装数据库客户端。

5、客户端三种类型：胖客户端：C/S 结构中的客户端；瘦客户端：B/S 结构中的浏览器端；富客户端：介于二者之间。

6、富客户端又称富互联网应用程序（Rich Internet Application，RIA），其主要解决通信和界面表示两个问题。

7、RIA 技术主要有两类：其一是内嵌于浏览器中的 Ajax；其二是在浏览器中安装插件。

8、Ajax（Asynchronous JavaScript And XML，动态 JavaScript 和 XML）不是新的编程语言，而是一种使用现有标准的新方法。 Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

9、分布式软件系统就是将物理上分散的独立构件或系统，在使用逻辑上统一起来，相互合作来共同完成任务。

10、分布式软件系统需要解决的问题： 1）网络通信协议和通信方式的选择； 2）提供远程过程调用（Remote Procedure Call，RPC）接口； 3）名称查找，快速在网络上找到需要调用服务的计算机名称、地址、端口等； 4）安全机制，分布式软件系统彼此进行通信时需要确保数据传输和身份认证的安全性； 5）事务管理。

11、中间件是将不同软件构件或者操作者与多种应用程序连接起来的软件。

12、中间件的技术等级处于操作系统和应用程序“中间”。同框架相比，中间件是可以独立运行的成品软件。同操作系统相比，中间件只解决分布式软件系统某一类共性问题。

13、中间件的划分多种多样。

从中间件的应用类型上分 10 类：数据访问中间件、远程过程调用中间件、交易中间件、消息中间件、对象中间件、应用服务器中间件、工作流中间件、门户中间件、安全中间件、企业应用集成中间件。

从中间件的通信实现机制上分 3 类：远程过程调用（RPC）、利用消息进行通信、对象请求代理（ORB）。

14、消息是需要传递的数据。

15、消息分类： 1）按照参与者数量划分：点到点、发布/订阅； 2）按照传递方向：推、拉； 3）按照通信方式：同步、异步。

16、JMS （Java Message Service）是一组 Java 应用程序接口，它规定了创建、发送、接受、读取消息的一系列标准。

17、JMS 的应用的构成： 1）JMS 提供者 2）JMS 客户端 3）消息对象 4）管理对象

18、分布式对象技术是一种面向对象技术。作用是，将分布在网络上的资源按照对象的概念来组织。其有两方面内容：其一，分布式对象的标准规范；其二，对标准规范的实现。

19、OMG 的 CORBA 主要是对标准进行规定。 JavaRMI、JNDI、COM+ 既是标准也是实现。 WbeService 采用 XL 格式规定了一系列由 W3C 国际组织确认的标准规范。

20、CORBA（Common Object Request Broker Architecture）标准内容主要包括四个部分：对象模型、语言映射、互操作协议、对象服务。

21、CORBA 体系结构及对象模型主要由四部分组成： ORB 内核、对象适配器、客户端存根（Syub）、服务器端骨架（Skeleton）组成。

22、ORB（Object request Broker）是一种能将客户端对象请求转化为服务端对象调用的机制。

23、微软的分布式对象技术经历了 COM、DCOM、MTS、COM+ 几个主要阶段。

24、Java 2 平台提供了两种方法来构造分布式应用系统： Java RMI（Remote Method Invocation） Java IDL（Interface Definition Language）

25、JNDI （Java Namig and Directory Interface）是为 Java 应用程序提供目录命令和命名服务功能的接口，负责对 Java 分布式对象进行管理和检索。

26、RMI 可以说是 Java 的 RPC 技术，即一个 JVM 内存空间对象可以获得另一个 JVM 内存空间对象的远程引用，并向其发送消息。

27、WebService 结构层次有四层：发现服务——UDDI 服务描述——WSDL 服务调用——SOAP 传送协议——HTTP

28、WSDL（Web Services Description Language）是基于 XML 格式被 W3C 组织确认的标准协议，用于对 Web 服务接口和服务位置进行描述。

29、UDDI（Universal Description，Discovery and Integration）是一种独立于平台、基于 XML 格式、用于在互联网上描述 Web 服务的协议。

30、SOAP（Simple Object Access Protocol）是有微软、IBM 等公司发起由 W3C 组织确认的标准协议。它采用 XML 格式定义，可以将本地方法调用转为适合网络传输的形式（SOAP 请求），同时将 Web 服务经网络传输返回的调用结果转化为本地方法的返回值（SOAP 响应）。

Java 部分课后题及答案

Wed, 20 Feb 2019 00:00:00 GMT

版本

《Java 面向对象程序设计》（第 2 版）袁绍欣安毅生赵祥模葛玮编著清华大学出版社

声明

我自己写的答案，公布出来的用意在于方便与同学，与大家交流学习。我不希望这里出现那种只会抄作业的人，抄作业行为没有长远意义。

2021.02.20 回顾补充：没想到原来没完成的文章又有了动力去完成，只感叹时光如梭啊。这次重新学习，温故知新，或许有更多的体会，以及对细节的把握、对思想的理解。

2022.05.21 回顾补充：如果读者是学生，这篇文章可能会对你产生误导，因为这是一个缺乏工程应用经验的学生写的，过于偏重理论知识，但又说不清楚某个技术存在的意义是什么。建议对 Java 感兴趣的人去找经典书籍阅读。

第一章

1.Java 语言有哪些特点？

答：简单、面向对象、分布式、解释型、健壮、安全、与体系结构无关、可移植、高性能、多线程和动态执行。

Sun 公司对 Java 的定义： A simple, object-oriented, distributed, interpreted, robust, secure, architecture-neutral, portable, high-performance, multi-threaded, and dynamic language.

2.下载一个 JDK 和一个 JRE 版本，进行安装，并配置环境变量，建立编译和运行环境。

我遇到了问题，之后写了个问题总结。(链接失效)

（我直接下载的 jdk-11.0.2 版本，自带 jre。）

3.Java 平台分成几类？他们的适用范围各是什么？

答：目前 Java 平台分为 J2EE、J2SE、J2ME 三个平台。 J2EE 主要目的是为==企业==计算提供一个应用服务运行和开发平台。 J2SE 主要目的是为==台式机和工作站==提供一个开发和运行的平台。 J2ME 主要面向==消费电子产品==，为消费电子产品提供一个 Java 的运行平台。

4.分别编写 Application 和 Applet 程序，输出字符串“My frist Java!”。请记下编译和执行过程出现的问题。

Appliction 的 Java 程序

public class MyJava {
	public static void main(String args[]){
		system.out.println("My frist Java!");
	}
}

Applet 的 Java 程序

import java.awt.*;
//java.awt包含用于创建用户界面和绘制图形图像的所有分类
import java.applet.*;
public class MyJavaApplet extends Applet {
	public void init(){
	}
    public void paint(Graphics g){
		g.drawString("My frist Java!",25,25);
	}
}

对应的 html 代码

<applet code="MyJavaApplet" width="150" height="100"> </applet>

主要问题 文件命名是的统一关系； java 环境配置的相关问题；不会用浏览器运行小程序。

补充：因为历史原因，applet 在各种浏览器中支持是不同的，所以新手容易产生疑惑。背后的故事很有趣，可以了解一下 Applet 和 ActiveX 的发展历史。

5.改造第 4 题的程序，将两程序合为一个程序，既能作为 Application 执行，又能作为 Applet 程序执行。

目前不会。更新补充：成功合并且运行的代码：

import java.awt.*;
import java.applet.*;
public class HelloWorldApplet extends Applet{
	public void init(){
	}
	public static void main(String args[]){
		System.out.println("Hello World!");
	}
	public void paint(Graphics g){
		g.drawString("Hello World!",25,25);
	}
}

问题笔记 将 main()那一部分合并在同一个 class 类里就可以了（外层只保留了一个类），注意名称。

第二章

1.下面那些标识符是合法的？（D）。

A. 8ID 　　 S#160 　　 B. -MU 　　 C. SY#　　 D. _S9

（标识符是以字母、下划线 “_” 、美元符 “$” 开始的一个字符序列，后面可以接字母、下划线 “_” 、美元符 “$” 、数字。）

2.那些数据类型可以充当 swith 语句的条件？

必须是一下四种基本数据类型（不能是包装类）： byte 、short 、int 、char 。

3.下面片段的执行结果是__。

int x = 3;
int y = 1;
if(x = y){
	System.out.println("x = " + x);
}

A. x = 1 　　 B. x = 3 　　 C. 编译失败　　 D. 无输出

选 C，我猜的。

补充：答案选择 C。if 括号中只能是布尔型数据。

再补充：x = y 是赋值语句，结果类型是 int 类型，不是 boolean 类型。如果 x 和 y 本身就是 boolean 类型，那么 x=y 结果就为 boolean 类型，可以编译通过。

4.定义一个浮点变量 s ，写成“Float s = 2.3;” ，错在什么地方？如何修改正确？

用 2.3 赋值变量 s 时，默认产生的应该是 double 类型变量，于是类型错误。改正方法：

float s = 2.3f;//增加后缀
float s2 =(float)2.3;//类型强制转换

补充：
double s3 = 2.3f 这种“小变量赋值大变量“写法是允许的。

5.下面程序片段的执行结果是__。

int i = 0, j = 1;
if((i++ == 1) && (j++ == 2)){
	i = 42;
}
System.out.println("i = " + i + ",j = " + j);

A. i = 1, j = 2 　　 B. i = 1, j = 1 C. i = 42, j = 2 　 D. i = 42, j = 1 我选 A，就是个前后++问题。

补充：这里考虑的有两点：++运算符的前后缀；&&的判断机制与&的判断机制不同。

6.定义一个一维数组有几种方法？

一维数组声明有两种形式：

//类型标识符 数组名[];
type name [];
//类型标识符[] 数组名;
type [] name;

一维数组初始化有三种方式：

1、使用关键字new进行定义//未手动赋值，系统默认赋值
type name[] = new type[length];
type[] name = new type[length];
2、直接在声明的时候初始化//注意只能写在同一行代码中
String[] s = {"ab","bc","cd"};
int[] a = {3,4,5,6};
3、结合的方法
float f4[] = new float[]{1.0f,2.0f,3.2f};
String[] dogs = new String[]{
	new String("大黄"), new String("二黑")};

特别补充：声明和定义的区别在于是否建立变量空间：把建立空间的称为“定义”；把不需要建立存储空间的称为“声明”。

基本数据类型变量的声明和定义(默认初始化)是同时产生的；而对于类对象来说，声明和定义是分开的。

7.编写 JavaApplication，求出 e=1+1/1!+1/2!+1/3!+···+1/n!···的近似值，要求误差小于 0.00001。

public class fore(){
	public static void main(String[] args){
        double e=1.0,t=1.0;
        int i;
        //指数-6、-7也可，但没必要
        for(i=1;t>1e-5;++i){
        	t*=1.0/i;
            e+=t;
        }
        System.out.print(e);
    }
}

8.利用可变列数组实现乘法口诀打印。

样例： 1 X 1 = 1 2 X 1 = 2 　 2 X 2 = 4 ... ... 运行成功的代码

public class MultiplicationTable{
    public static void main(String[] args) {
        //确定每一行的列数
        String [][] arra;
        arra = new String[9][];
        for(int i=0;i < 9; i++) {
            arra[i]=new String[i+1];
        }
        //根据数组下标长度，直接打印，没必要存储
        for(int i = 0 ; i < 9 ; i++) {
            for(int j = 0 ; j < i + 1 ;j++) {
                int ji;
                ji = ++i*++j;//注意数组下标从0开始
                System.out.print(i + " " + "x" + " " + j + " = " + ji + "\t");
                i--;j--;
            }
            System.out.println("");
        }
    }
}

9.编程输出。

样例： * *.*. *. .*. .*. . *...*...*...*... (各个符号之间没有空格，求输出八阶图形，即共有 8 行输出)

运行成功的代码

public class mystart {
    public static void main(String[] args){
        int n = 8;//阶数控制
        System.out.println("*");
        for(int i = 1 ; i < n ; i++) {
            for(int k = i+1;k > 0;k--){
                System.out.print("*");
                for(int j = 1 ; j < i + 1 ;j++) {
                    System.out.print(".");
                }
            }
            System.out.println("");
        }
    }
}

补充说明：这里对 i=0 的情况单独处理的，逻辑上没问题，但是代码不够美观。

精修一下代码：

public class mystart {
    public static void main(String[] args){
        int n = 8;//阶数控制
        for(int i = 0 ; i < n ; i++) {
            for(int k = i+1;k > 0;k--){
                System.out.print("*");
                for(int j = 1 ; j < i + 1 ;j++) {
                    System.out.print(".");
                }
            }
            System.out.println("");
        }
    }
}//原来我以前写的代码还是挺好的嘛

第三章

1.编写程序为什么要写注释？

~~因为我高兴呀~~ 提高程序的可读性以及管理上的方便。

（2021 的我：“19 年的我挺皮的。”）

2.Java 都有哪些命名规范？

1.包名中的字母一律小写； 2.类名、接口名的每一个单词的首字母大写； 3.方法名中第一个单词首字母小写，其他单词首字母大写； 4.常量中的每一个字母都大写。

注：这些要求过于基础，我自己想跟着阿里的 java 开放规范来写程序。

3.Javadoc 生成帮助文档的时候，都有哪些命令行开关，他们的作用是什么？

以 javadoc 开头 : -d 文件存储位置
-head 文件头部名称
-version 显示文件版本
-author 显示作者
xxx.java 处理的 java 源文件

4.选择前两章的一道练习题，加上适当的注释，并帮助其产生文档。

第二章第 9 题，改写后得到的效果：

第四章

1.名词解释：构造方法、抽象。

1.构造方法是一个与类名相同的类方法。构造方法属于类，不属于任何对象；构造方法与类同名，且不能指定任何返回值类型（其隐含的返回值由系统内部使用），包括 void；系统有一个默认的无参数的构造方法，可以覆盖。

用途是，每当使用 new 关键字创建一个对象时，为新建对象开辟了内存空间之后，Java 系统将自动调用构造方法初始化这个对象。（不管有没有对象引用）

2.抽象：抽象是从被研究对象中舍弃个别的、非本质的或与研究主旨无关的次要特征，而抽取与研究有关的共性内容加以考察，形成对研究问题正确、简明扼要的认识。

2.对象位于内存何处？声明能引用对象的实质是什么？

对象在堆内存上；实质：对象引用在方法栈中保留了堆中对象的实际地址。

3.对象和基本数据类型作为参数传递时，有什么不同？

对象作为参数在方法中的传递是是引用传递，传递的是对象的地址；基本数据类型作为参数在方法中的传递是值传递，传递的是拷贝的值。

4.在自定义对象中写 finalize 方法，看看什么情况下 finalize 被调用。

当该对象成为垃圾之后，且系统 GC 机制触发，调用 finalize 方法释放资源。

5.对象在什么条件下成为垃圾？什么情况下释放垃圾对象，如何证明一个对象被释放了？

1.对象在没有任何引用的时候成为垃圾； 2.系统在资源不够的情况下可能进行释放，也可以用 System.gc()方法“提醒”系统进行垃圾释放，但是进行垃圾回收的线程级别很低，只有系统不忙时才会理睬提醒； 3.该对象占用的资源（对象在堆中占用的空间、对其他设备等资源的占用）被释放时。

6.final 修饰符都有什么作用？

final 修饰的类属性为常量，相比于直接使用常量数值，起着助记符的作用； final 修饰的类方法在子类当中不能被覆盖，作为最终方法，可以保证程序的安全性和正确性。

7.static 修饰的属性和方法有什么特点？

用 static 修饰的域变量专属于类，保存在类的内存区（堆中）的公共存储单元中。用 static 修饰的方法称为静态方法，属于类方法，不属于类的任何对象。

8.Application 程序执行时为什么不能带后缀名？

~~因为这是规定~~ 网络引用答案如下： 若写 java xxx.yyy 是代表要运行 package xxx 中的 class yyy 里面的 main(String[]) 所以当你写 java xxx.class 时, 它会以为要找一个叫 xxx 的 package 里面的一个叫 class 的 class 。

9.下面的代码中，Vector 是 java.util 包中的一个类，关于此类哪个叙述是正确的？（）

1）public void create(){ 2）Vector myVect; 3）myVect = new Vector(); 4）} A. 第二行的声明不会为变量 myVector 分配内存空间。 B. 第二行的声明分配了一个 Vector 对象内存空间。 C. 第二行语句创建一个 Vector 类对象。 D. 第三行语句创建一个 Vector 类对象。 E. 第三行语句为一个 Vector 类对象分配内存空间。

我选 D，暂时解释不清。

补充：DE 仍有不清晰的地方。补充解析： A 选项，变量 myVector 是有一定大小的，因为里面要存放将来引用的对象在堆中的地址。 B 选项，未分配。Java 中，需要 new 关键字来分配。 C 选项，只是声明，还不存在对象。 D 选项，我的理解第三行作用，创建 Vector 对象并将对象赋予声明 myVector。 E 选项，对象在创建的同时就在堆上分配空间了。

10.请在 display 函数中用递归方式输出如下图形。

n n n … n … 3 3 3 2 2 1 void display(n){…} 代码如下：

public class display{
    static void display(int n){
        if (n >= 1){
            for (int i = 0; i < n; i++){
                System.out.print(n + " ");
            }
            System.out.println();
            display(n - 1);
        }else{
            return ;
        }
    }
    public static void main(String[] args){
        display(5);
    }
}

11.象棋跳马。

国际象棋中，马的规则是每步棋先横走或直走一格，然后再斜走一格。在下图中根据马的当前位置，其可以走的位置共有 8 种，分别用 1 到 8 来表示。如果马以 0 方格为起点开始起跳，则跳满棋盘中所有位置为一趟，请问共有多少趟（种）跳法？请分别显示每趟跳法的轨迹。

这一题的代码，是我参考了同学的思路，简单改改得到的。最后没有完全解决问题。

文章链接 https://blog.csdn.net/weixin_44728197/article/details/88624747

//格式控制
import java.text.DecimalFormat;
public class test {
    static DecimalFormat df = new DecimalFormat("00");
    void printchess(test my)
    {
        int a,b;
        for(a=2;a<=9;a++)
        {
            for(b=2;b<=9;b++)
            {
                if(my.chessboard[a][b]!=0)
                System.out.print( df.format(my.chessboard[a][b])+" ");
                else{
                    System.out.print( "   ");
                }
            }
            System.out.println();
        }
    }
    int horse(test my,int x,int y)
    {
        int i;
        for(i=0;i<8;i++)
        {
            if(my.chessboard[x+my.move[i][0]][y+my.move[i][1]]==0)
            {
                if(my.chessboard[4][3]!=0 && my.chessboard[3][4]!=0
                && my.chessboard[6][3]!=0&& my.chessboard[3][6]!=0
                && my.chessboard[4][7]!=0&& my.chessboard[7][4]!=0
                && my.chessboard[7][6]!=0&& my.chessboard[6][7]!=0 )
                {
                    return 1;//八个格子跳完，返回1，sum加1
                }
                my.chessboard[x+my.move[i][0]][y+my.move[i][1]]=++my.cnt;//标记走了这一格
                my.horse(my,x+my.move[i][0],y+my.move[i][1]);//递归
            }
        }
        return 0;//中途断掉，sum不加
    }
    int[][] chessboard = new int[12][12];
    int cnt = 0;//标记马已走的方格数
    //int sum = 0;//标记马走完全程的具体方案数
    int[][] move = {{2,1},{1,2},{-1,2},{-2,1},{-2,-1},{-1,-2},{1,-2},{2,-1},};
    //每一种走法都可以中途变化，而不是move中按照固定顺序来，直到第一种走不通才会走下一步
    //每个马有8个位置可以跳，这是8中情况下x,y的偏移量
    public static void main(String[] args) {
        int sum=0;
        int control=0;
        while(control!=-1){
            test my = new test();
            int a,b;
            for(a=0;a<12;a++)
            {
                for(b=0;b<12;b++)
                {
                    my.chessboard[a][b]=0;
                }
            }
            for(a=0;a<12;a++)
            {
                for(b=0;b<12;b++)
                {
                    if(a==0||a==1||a==10||a==11||b==0||b==1||b==10||b==11)
                    {
                        my.chessboard[a][b]=-1;
                        //在8x8棋盘外面加两层，使得每个位置都有8种跳法，只不过这些多出来的位置标记为已跳
                    }
                }
            }
            my.chessboard[2][2]=++my.cnt;//开始位置为第一个已跳位置
            sum+=my.horse(my,2, 2);
            my.printchess(my);

            //while(control<(8*8*8*8*8*8*8*8))
            //一个简单但是效率极低的思路：
            //改变move数组，循环得到全部的解，中途每得到一个解，就对sum加1
            //control控制循环次数，即move排列组合的情况,循环次数为16777216次
            //然后就不用写了，我的计算机说它还想多活两年
            control=-1;//通过简单转变，控制循环次数
        }
        //System.out.println(sum);
    }
}

补充：这题目条件没有表达清楚。 1、能否跳在已经跳过的格子？只能默认为不能，这样问题的解才有限。

2、跳满所有位置，是指 64 个格子还是 8 个格子？ “8 个位置”这句话和“跳满”这句话是分开的两句话，前者更像是用于说明马的走法的。我选择默认为要求 8 个格子，反正解法都相当的。

3、跳马的规则描述是，先直走再斜着走，这个和中国象棋的走法是否不同？国际象棋跳一次马是经过了一个还是两个格子？我默认为只经过一个格子。

补充的（我认为）完整的解法：

// 沿着上述代码的单次结题思路，这里增加多次控制即可
coding

第五章

1.面向对象的主要特征是什么？

（抽象、）封装、继承和多态。

补充：注意这里的表述，是主要特征。

2.封装是如何实现的？

java 封装类通过三个步骤实现：（1）修改属性的可见性，限制访问。（2）设置属性的读取方法。（3）在读取属性的方法中，添加对属性读取的限制。

补充：书中原文为，“封装是通过访问控制符实现的。”

3.对象之间如何相互作用？作用的条件是什么？

通过对象引用、继承访问成员属性和方法；

作用条件：拥有合法访问权限。

4.protected 修饰符有何特点？

对 public 类中的 protected 属性和方法： 1）可以被子类（复制属性）直接访问； 2）可以被包内的所有类访问；

对默认（即 default，省却）类中的 protected 属性和方法：只能被包内的所有类访问。

（原答案有误，已删除。）

5.Object 都有哪些方法？

// 1 这个方法涉及到底层思想了，比较复杂。下面给出参考文章地址 https://blog.csdn.net/Saintyyu/article/details/90452826#commentBox
registerNatives()
// 2 返回此 Object 的运行类。
getClass()
// 3 用于获取对象的哈希值，对象的唯一编号，类似于人的身份证号。
hashCode()
// 4 用于确认两个对象是否“相同”。（String、包装类、URL、File 类中覆盖本方法后，多用于比较值而不是对象的异同）
equals(Object obj)
// 5 创建并返回此对象的一个副本。
clone()
// 6 返回该对象的字符串表示。
toString()
// 7 唤醒在此对象监视器上等待的单个线程。
notify()
// 8 唤醒在此对象监视器上等待的所有线程。
notifyAll()
// 9 直到其他线程调用此对象的 notify() 方法或 notifyAll() 方法，或者超过指定的时间量前，导致当前线程等待。
wait(long timeoutMillis)
// 10 直到其他线程调用此对象的 notify() 方法或 notifyAll() 方法，或者其他某个线程中断当前线程，或者已超过某个实际时间量前，导致当前线程等待。
wait(long timeoutMillis, int nanos)
// 11 用于让当前线程失去操作权限，当前线程进入等待序列
wait()
// 12 当垃圾回收器确定不存在对该对象的更多引用时，由对象的垃圾回收器调用此方法。
finalize()

6.重载的方法之间一般有什么关系？

外在表现上：返回值类型相同，方法名称相同，参数类型或个数不同。

方法的实现上：最终功能和目的相同或相似，根据具体情况其实现不同；多个方法之间往往存在调用关系。（体现程序共享的思想）

7.子类覆盖父类方法需要什么条件？子类中定义与父类同名的方法一定是覆盖吗？

条件： 1）子类的访问修饰符权限应等于或大于父类；（public 最大） 2）同名的 static 方法和非 static 方法不能相互覆盖； 3）方法前有 final 修饰符，此方法不能在子类方法中进行覆盖；

不一定：若名称相同，参数不同，则是重载；若名称相同，参数相同，而返回值类型不同，则编译不能通过。

8.封装、继承和多态在面向对象程序设计中的用途是什么？

封装与组合：实现类之间的高内聚低耦合。

继承：功能复用；为引用带来新特点。

多态：功能复用与扩充。

9.消息发送。

设计 Src 和 Dis 两个类，Src 中有一个被封装的属性，类型为 int（要求为非负值），每当通过特定的方法更改 Src 对象中的这个属性后，Dis 对象都能得到通知，并向 Src 发消息获得此属性值。（没读懂题目，以后再看。）

（2021.3.7 的我就是“以后”了。现在看懂了，反倒觉得这题目又没有表述清楚了。）

package com.company;

public class Src {
    private static int nonNegativeNumber = 0;
    public static void printNonNegativeNumber (){
        System.out.println(nonNegativeNumber);
    }
    Src (int nonNegativeNumber){
        this.nonNegativeNumber = nonNegativeNumber;
    }
    Src (){
        this.nonNegativeNumber = 0;
    }
    public void setNonNegativeNumber (int nonNegativeNumber) {
        if (nonNegativeNumber <0 ) {
            System.out.println("不能设置为负数");
        }else {
            new Src(nonNegativeNumber);
            Dis.flag = 1;
            Dis.checkFlag();
        }
    }
    public int getNonNegativeNumber() {
        return nonNegativeNumber;
    }
    public static void main(String[] args){
        Src src = new Src();
        src.setNonNegativeNumber(5);
    }
}

// ---------------------

package com.company;

public class Dis {
    public static int flag = 0;
    public static void checkFlag(){
        if (flag == 1) {
            Src.printNonNegativeNumber();
            flag = 0;
        }else {
            System.out.println("未变化");
        }
    }
}

上文代码存在的问题： 1）总是 new（），浪费空间； 2）只用到了 static 的特点。

第六章

1.this 和 super 各有几种用法？

this 三种用法： 1）指代本类对象。 2）this.域变量以及 this.成员方法特指本类对象的属性和方法。用以区分同名的局部变量。 3）this(参数)，调用本类重载的构造方法。

super 两种用法： 1）super.域变量，表示被隐藏的父类变量；super.成员方法，表示被覆盖的父类方法。 2）super(参数) ，调用父类构造方法。

注：this 和 super 的使用有很多值得注意的细节，灵活使用他们，能够写出简洁且高效的程序。

2.子类对象实例化的具体过程是什么？

实例化过程（简略）： 1）分配对象空间，域变量默认初始化； 2）绑定构造方法，传递参数； 3）调用 this 或 super； 4）实例变量显式初始化； 5）执行其他程序代码。

实例化过程（详细）： 0）装载类到堆中，执行一次静态代码块； 1）产生一个类的声明，声明存在于方法栈中； 2）产生该类对象——在堆上为其分配空间，并默认初始化域变量； 3）根据参数数量和类型，绑定（选择）构造方法； 4）传递参数，new ClassName(参数) 中的参数传到栈中构造方法的形式参数上； 5）执行构造方法内部代码第一句：根据 this、super、默认三种句子，选择跳转执行的其他构造方法，最后返回。（中间可能存在多次跳转执行） 6）进行全部或部分对象变量的显式初始化；（可能存在创建并引用类对象的情形，那么又会发生程序跳转执行） 7）执行构造方法内部的其他代码。

注意：默认初始化和显式初始化的时机不同、产生的影响（程序跳转执行）不同，注意区别。

3.类的域变量和方法中定义的局部变量在初始化上有何区别？

类的域变量有三次初始化机会： 1、类装载时，执行的静态代码块可能会初始化类的域变量； 2、类对象实例化，为对象分配空间时，会进行默认初始化； 3、类对象实例化，执行构造函数时，可能会进行显式的初始化。

方法中定义的局部变量初始化分两种：非 static 方法： 1、方法加载时，是在方法栈中分配空间，此时进行默认初始化； 2、之后执行方法内部代码，可能存在显式初始化； 3、当方法执行完毕后，释放其在栈中的全部空间，局部变量消失； 4、再次调用方法时，重新加载。 static 方法： 1、方法本身代码存在于堆中； 2、局部变量在调用时创建并初始化，结束后释放。补充：static 中创建 static 变量是非法的。

4.模仿形成抽象类的过程，自选角度，形成一个自己的抽象类，并在程序的类继承和引用中体现抽象类的作用。

~~上香不是~~上代码：

package com.company;

class CharmvOfSnofly {
    String charmTypes ;
    int charmValue ;
    public CharmvOfSnofly(String kindName, int value) {
        this.charmTypes = kindName;
        this.charmValue = value;
    }
    public CharmvOfSnofly(CharmvOfSnofly charmvOfSnofly) {
        this.charmTypes = charmvOfSnofly.charmTypes;
        this.charmValue = charmvOfSnofly.charmValue;
    }
    public void beGoodFriend(CharmvOfSnofly charmvOfSnofly) {}
}

class AppearanceGirlCharmvOfSnofly extends CharmvOfSnofly {
    public AppearanceGirlCharmvOfSnofly(CharmvOfSnofly charmvOfSnofly){
        super(charmvOfSnofly);
    }
    public void beGoodFriend() {
        System.out.print("关注 Appearance 女孩：");
        if (charmTypes != "Appearance") {
            System.out.println("除了你的颜值我都不关心。");
        }else {
            if (charmValue > 80) {
                System.out.println("太好了，我们做朋友吧！");
            }else {
                System.out.println("你的颜值有待提高。");
            }
        }
    }
}

class TemperamentGirlCharmvOfSnofly extends CharmvOfSnofly {
    public TemperamentGirlCharmvOfSnofly(CharmvOfSnofly charmvOfSnofly){
        super(charmvOfSnofly);
    }
    public void beGoodFriend() {
        System.out.print("关注 Temperament 女孩：");
        if (charmTypes != "Temperament") {
            System.out.println("除了你的气质我都不关心。");
        }else {
            if (charmValue > 80) {
                System.out.println("太好了，我们做朋友吧！");
            }else {
                System.out.println("你的气质有待提高。");
            }
        }
    }
}

public class GirlFriendOfSnofly {
    public static void main(String[] args) {
        CharmvOfSnofly charmvOfSnofly = new CharmvOfSnofly("Temperament",90);
        AppearanceGirlCharmvOfSnofly appearanceGirlCharmvOfSnofly = new AppearanceGirlCharmvOfSnofly(charmvOfSnofly);
        TemperamentGirlCharmvOfSnofly temperamentGirlCharmvOfSnofly = new TemperamentGirlCharmvOfSnofly(charmvOfSnofly);
        appearanceGirlCharmvOfSnofly.beGoodFriend();
        temperamentGirlCharmvOfSnofly.beGoodFriend();
    }
}

// ps:我也不知道我在写什么......

5.接口有什么作用？自己定义一个接口，并给出实现类和使用类。

接口的主要作用有两个： 1）分离功能的使用者和实现者，形成低耦合。 2）保留扩展性的同时维持系统稳定。

// 接口
package com.service;

public interface CallToHomePhone {
    void call1();
}

// 实现类
package com.implement;

import com.service.CallToHomePhone;

public class CallToHomePhoneImpl implements CallToHomePhone {
    public void call1() {
        System.out.println("完成打电话操作。");
    }
}

// 使用类
package com.user;

import com.implement.CallToHomePhoneImpl;
import com.service.CallToHomePhone;

public class useCall {
    public static void main(String[] args) {
        CallToHomePhone callToHomePhone = new CallToHomePhoneImpl();
        callToHomePhone.call1();
    }
}

6.抽象类与接口的异同点是什么？

相同点： 1）都含有抽象方法； 2）都需要实现类；

不通点： 1）前者可以有域变量等数据成员，后者最多只能存在静态常量； 2）前者可以有具体成员方法，后者全部为抽象方法； 3）前者扩展性较弱，后者较强。

补充：这两者看似很相似，包括写法、引用，但是有个根本性的区别：抽象类中涉及到的思想，只有抽象和继承，他的使用方式被局限在继承特性上了，特别是 Java 中的继承是单一继承；而接口中涉及到的思想，包括抽象、继承、实现，他比抽象类多出一整个能力，通过继承和实现的配合使用，接口的局限性将大大降低，他能有更广阔的天地。

7.引用比较方法有哪些？

引用比较有三种： 1）Object 类中的 equals() 方法，默认比较引用是否指向同一对象； 2）比较运算符中的连等符号 == ，具有重载功能，既可以比较引用的对象，也可以比较数值； 3）使用关键字 instanceof，主要作用是判断引用和类之间的亲属关系的辈分问题。

8.内部类的作用是什么？什么情况下使用匿名内部类？

内部类的作用： 1）作为封装好的类中的后门。因为内部类能够直接访问外部类的所有属性，包括 private 属性，那么这里就可以大做文章了。 2）简化代码，方便书写。

匿名内部类的使用，一般在这三个情况下使用： 1）只用到类的一个实例； 2）类在定以后马上用到； 3）类非常小（官方推荐是在 4 行代码以下）。

9.不上机，判断下面程序的输出结果。

答案见代码注释。

class X{
    Y b = new Y();
    X() {
        System.out.println("X");
    }
}
class Y{
    Y() {
        System.out.println("Y");
    }
}
public class Z extends X {
    Y y = new Y();
    Z() {
        System.out.println("Z");
    }
    public static void main(String [] args) {
        new Z();
    }
}

/**
 * 选项：A.Z　B.YZ　C.XYZ　D.YXYZ
 * 答案选D,输出为 YXYZ
 * 程序执行步骤：
 * 0) static void main 作为程序入口；
 * 1）new Z() 新建对象，执行属性默认初始化，无
 * 2）执行默认 supper(),即 X()
 * 3）执行默认 X() 中的 super(),无影响
 * 4）执行 X 类的显式初始化，这里只有一句 Y b = new Y();
 * 5）new Y() 新建对象，无其他变化，直接打印 Y
 * 6）返回到 X 类中，打印 X
 * 7）返回到 Z 类中，此时 Z 的 super()执行完毕
 * 8）显式初始化 Z ，只有一句 Y b = new Y();
 * 9）new Y() 新建对象，无其他变化，直接打印 Y
 * 10）返回到 Z 类中，打印 Z
 * 11）程序结束
 *
 * 注意：按执行步骤顺序分析
 * 1、默认初始化（给所有不确定变量赋初值，程序不应跳转）
 * 2、参数传递 (new ClassName(参数) 中的参数，传递给构造方法的形式参数，
 *     此时构造方法在方法栈上，准备执行。注意，这个参数可以大做文章。)
 * 3、调用构造方法中的this或super语句（注意默认的super()）
 * 4、对象变量显式初始化（可能会有程序跳转，注意与默认初始化区别）
 * 5、执行当前构造方法之后的其他代码
 * 补充：程序多次跳转执行，容易出错（特别是默认super()和显示初始化），一定要按着步骤来。
 */

10.什么是数据隐藏？如何证明子类对父类同名方法进行重新定义，只能是方法的覆盖而不是方法的隐藏？

数据隐藏：当子类定义的变量与其父类中定义的变量同名时，在子类中直接用该变量名访问到的只能是子类自己定义的变量，也就相当于，其从父类继承得到的同名变量隐藏了起来。（注意，这两个变量都客观存在。）

证明思路： 1、覆盖与隐藏决定性的区别是：（以下用“内容”这个词语来泛指属性与方法，便于说明。）隐藏的内容存在三份，父类中一份、子类中继承的一份、子类中自定义的同名内容一份。覆盖的内容存在两份，父类中一份、子类中自定义的同名内容一份。（注意，此时子类根本没有继承同名内容，子类中只有一份！）

2、易知，子类对象调用的 functionName() 方法必然来自子类，而子类对象调用的 super.function() 方法必然来自其父类。

3、正经内容：在 function() 方法中增加输出当前类名的功能，即可证明。（口胡内容：在 function() 方法中设置自爆功能——释放本类的所有对象空间，到时候观察一下是谁爆炸了就行。(ಡωಡ)）

11.A1、A2 分别是具体类 A 的子类，A3 为 A1 的子类，A1、A2 之间的关系为平行类。下面代码为连续的程序片段，请问哪些是正确的？

答案见代码注释。

A a = new A();
a = new A1();
a = new A2();
a = new A3();
A1 a1 = new A3();
A3 a3 = a1; // 错误，这里需要显示转换引用类型。
A2 a2 = new A1(); // 错误，A1 和 A2 平行，完全不能互相引用
a3 = new A2(); // 错误，a3 是 A2 的侄子，完全不能引用

12.借助 JDK 帮助，编写程序实现这样的功能：Applet 当中的 TextField，每输入任一字符，在一个 label 当中都能动态跟踪刷新。

本题答案来自网上：（我自己想学深入一点，但是太花时间——各种调用、继承、接口实现。如果这里查询着学习，难成知识系统。后面的章节学了之后再自己手动写一个吧。）

package applet.language.test.java;

import java.applet.Applet;
import java.awt.Label;
import java.awt.TextField;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;

public class Test extends Applet implements KeyListener{
    // 10列大小的空白TextField
    TextField tf = new TextField(10);
    // 一大串空白的Label组件
    Label l = new Label("                    ");
    public void init() {
        // 监听键盘按键
        tf.addKeyListener(this);
        // 添加组件TextField
        add(tf);
        // 添加组件Label
        add(l);
        // 设置TextField大小（长x高）
        tf.setSize(500, 100);
        // 设置Label大小（长x高）
        l.setSize(500, 100);
    }
    public void keyPressed(KeyEvent arg0) {}
    public void keyReleased(KeyEvent arg0) {}
    public void keyTyped(KeyEvent ke) {
        // Label中字符串随着TextField中动态变化
        l.setText(tf.getText() + ke.getKeyChar());
    }
}

第七章

1、“程序中凡是可能出现异常的地方必须进行捕捉或抛出”，这句话对吗？

（这个问句有疑问，这句话的主语没有明确。对隐式声明抛出，程序方法本身不作任何声明或处理。但是对虚拟机来说，只要检测到异常，一定是要处理的。）

2、自定义一个异常类，并在程序中主动产生这个异常对象。

package high.order.usage.exception;

/**
 * public Exception(String message) {
 *         super(message);
 *     }
 *
 * public class Exception extends Throwable {}
 *
 * public Throwable(String message) {
 *         fillInStackTrace();
 *         detailMessage = message;
 *     }
 */

public class SelfGenerateException extends Exception
{
	SelfGenerateException(String msg){
		super(msg);
	}

	static void throwOne() throws SelfGenerateException
	{
		int a = 1;
		if (a==1)
		{throw new SelfGenerateException("检测到异常，显示详细信息");}
	}

	public static void main(String args[])
	{
		try
		{throwOne();}
		catch(SelfGenerateException e)
		{e.printStackTrace();}
	}
}

3、借助 JDK 帮助，请举例发生 NullPointerException 异常的一些情况。

JDK 原文：

Thrown when an application attempts to use null in a case where an object is required. These include:

Calling the instance method of a null object.
Accessing or modifying the field of a null object.
Taking the length of null as if it were an array.
Accessing or modifying the slots of null as if it were an array.
Throwing null as if it were a Throwable value

（不翻译了，英文将就着看，毕竟是原文。）

4、不执行程序，指出下面程序的输出结果；如果将黑体代码去掉，写出输出结果；如果再将斜体代码去掉，写出结果。

public class TestSevenPointFour {
    public static void aMethod() throws Exception {
        try {
            throw new Exception();
        }
        // 黑体代码开始位置
        catch (Exception e) {
            System.out.println("exception000");
        }
        // 黑体代码结束位置

        // 斜体代码开始位置
        finally {
            System.out.println("finally111");
        }
        // 斜体代码结束位置
    }

    public static void main(String[] args) {
        try {
            aMethod();
        }
        catch (Exception e) {
            System.out.println("exception");
        }
        System.out.println("finished");
    }
}

执行结果：

1、直接执行： exception000 finally111 finished

2、去黑执行： finally111 exception finished

3、去黑去斜执行：报错，因为只有 try 不完整。

（实际运行效果：编译不能通过——找不到 class 文件；系统提示：java: 'try' 不带有 'catch', 'finally' 或资源声明）

补充：应该注意三点，其一，捕获的异常不向上层返回；其二，finally 中的代码必定执行；其三，注意 try-catch-finally 异常处理块的合法结构。

5、不执行程序，指出下面程序的输出结果。

public class TestSevenPointFive {
    public static String output = "";
    public static void foo(int i) {
        try {
            if (i == 1) {
                throw new Exception();
            }
            output += "1";
        }
        catch (Exception e) {
            output += "2";
        }
        finally {
            output +="3";
        }
        output += "4";
    }

    public static void main(String[] args) {
        foo(0);
        foo(1);
        System.out.println(TestSevenPointFive.output);
    }
}

输出结果： 134234

注意：try 中异常出现点之后的代码不执行。

==有趣的扩展思考== 补充：如果 try 中异常隐式抛出，返回上层，那么 finally 之后的代码不执行。题目代码修改如下,以证明上述补充：

public class TestSevenPointFive {
    public static String output = "";
    public static void foo(int i) {
        try {
            if (i == 1) {
                throw new RuntimeException();
            }
            output += "1";
        }
        finally {
            output +="3";
        }
        output += "4";
    }

    public static void main(String[] args) {
        try {
            foo(0);
            foo(1);
            System.out.println(TestSevenPointFive.output);
        }
        catch (RuntimeException e){
            System.out.println(TestSevenPointFive.output);
        }
    }
}

// 输出 1343

6、编写一个程序方法，对空指针异常、除数为零异常给出出错的中文提示。当有新异常发生时，可拓展该方法中的代码进行统一处理。

public class TestSevenPointSix {

    public static void foo() {
        int a = 1/0;
    }

    public static void main(String[] args) {
        try {
            foo();
        }
        catch (NullPointerException e){
            System.out.println("捕获到空指针异常");
        }
        catch (ArithmeticException e){
            System.out.println("捕获到算术异常");
        }
    }
}

（PS：又没看明白题目在问什么，出题人是“甲方”吗？）

7、从屏幕输入 10 个数，在输入错误的情况下，给出相应的提示，并继续输入。在输入完成的情况下，找到最大最小数。

import java.util.InputMismatchException;
import java.util.Scanner;

public class TestSevenPointSeven {
    public static void main(String[] args) {
        Scanner sn = new Scanner(System.in);
        int intVal, maxIntVal = 0, minIntVal = 0;
        int i = 0;
        while (i < 10) {
            try {
                // 不推荐用异常处理来控制程序结构
                intVal = sn.nextInt();
                i++;
                if (i == 1) {
                    maxIntVal = intVal;
                    minIntVal = intVal;
                }
                if (intVal > maxIntVal) {
                    maxIntVal = intVal;
                }
                if (intVal < minIntVal) {
                    minIntVal = intVal;
                }
            }
            catch(InputMismatchException e){
                System.out.println("这次输入了非整数，继续：");
                // 清理一下非数字字符
                sn.next();
            }
        }
        System.out.println("maxIntVal " + maxIntVal + "\nminIntVal " +minIntVal);
    }
}

注：数据输入方式有很多，在没看 IO 之前都不清楚原理，就随便找了个输入方式。

8、阅读下面程序，TimeOutException 为自定义异常，完成指定方法后面的部分。

public void method()____
    { success = connect();
        if (success==-1) {
            throw new TimeoutException();
        }
    }

（原题目代码如上，甚至格式都没有变化，共 6 行）

解题：（代码扩充）

public class TestSevenPointEight {
    public void method() {
        int success = connect();
        if (success == -1) {
            new TimeoutException();
        }
    }
    public int connect() {
        // 链接操作（鬼知道是什么！）
        return -1;
    }
    class TimeoutException {
        public TimeoutException() {
            System.out.println("超时异常");
        }
    }
    public static void main(String[] args) {
        new TestSevenPointEight().method();
    }
}

（PS：又来了又来了，又没看懂题目。）

第八章

1、Java 常用类库有哪些？其基本功能是什么？

（这里写的是常用的，但是常用这个词语又是相对的，是否常用取决于实际的应用环境。）

按层次记忆：等层包： com、java、javax、org java 中常用的子包九个：java.lang, java.util, java.awt, javaapplet, java.text, java.io, java.net, java.rmi, java.sql.

功能：顾名思义了。

2、JDK 中那些包有 Date 类，他们的区别是什么？

共有两个 Date 类：java.util.Date 以及 java.sql.Date

区别：前者用于时间操作，后者用来描述数据库中的时间字段；后者是前者的子类；前者逐渐被 java.util.Calendar 类取代，后者仍常使用。

3、String 类型有什么特点？

相比与一般的类，String 类型有如下特点：

1、申明和对象之间的引用关系很不可靠。一旦更改对象中的值，那么就会生产新的对象被原来的声明引用，而原来的对象就舍弃一旁了。（String 类型存储在常量池中）

2、初始化时，存在默认编译器优化。导致两个声明引用了同一个对象，即使代码书写上不是想表达这个用意。

3、参数传递时，是按对象引用传递，具有引用传递的一般特点。但不同的是，由于 String 改变值的时候生成新的对象（基于第一条），所以就会导致形式参数的指向发生变化，指向的地址发生变化。（简单来说，就是不能改变内存空间中 String 对象的值，当常量用就行。）

注：主要基于第一条，造成了一些 String 不同于其他类的变化。

4、String 什么时候进行值比较，什么时候进行引用比较？

解题思路： String 再特殊，他也是一个类，那么要按照类的一般特征去思考。

使用 == 自然是进行引用比较；使用 str1.equals(str2) 则是进行值比较。

5、String 与 StrinBuffer 的区别是什么？如何相互转化？

来自网上的说法，比较通俗和详细：

String 类型和 StringBuffer 的主要性能区别：String 是不可变的对象, 因此在每次对 String 类型进行改变的时候，都会生成一个新的 String 对象，然后将指针指向新的 String 对象，所以经常改变内容的字符串最好不要用 String ，因为每次生成对象都会对系统性能产生影响，特别当内存中无引用对象多了以后， JVM 的 GC 就会开始工作，性能就会降低。

使用 StringBuffer 类时，每次都会对 StringBuffer 对象本身进行操作，而不是生成新的对象并改变对象引用。所以多数情况下推荐使用 StringBuffer ，特别是字符串对象经常改变的情况下。

我的理解：

SringBuffer 才像 String，String 就很不合群。（虚假的字符串类型：String；真正的字符串类型：StringBuffer）

第二问

String 与 StringBuffer 的相互转化： StringBuffer sb = new StringBuffer(new String()); String s = new String(new StringBuffer());// 或者使用 toString()方法。

6、如果要在 Java 程序中启动另一个程序，什么包中的类能够完成此功能？

java.lang.Runtime

7、Calendaer 如何得到自己的一个实例？

只能通过其静态方法 getInstance()

// getInstance() 有四个重载，其中的无参方法如下：
public static Calendar getInstance(){
    return createCalendar(TimeZone.getDefault(), Locale.getDefault(Locale.Category.FORMAT));
}

8、格式化类的作用是什么？格式化数字的类有哪些？格式化日期的类又有哪些？

作用：获得原数据想要的格式，便于观察和提取信息。

格式化数字的类主要有： java.util.NumberFormat，java.util.DecimalFormat

格式化日期的类：（主要使用）java.text.SimpleDateFormat

第九章

1、线程和进程的联系和区别是什么？

1）概念线程是程序执行中的单个顺序流程；进程是一个执行中的程序。

2）空间每一个进程都有自己独立的一块内存空间、一组系统资源，其内部数据和状态完全独立；同类的多个线程共享一块内存空间和一组系统资源，其本身的数据通常来自寄存器和堆栈。

3）包含：一个进程可以运行多个线程。

2、什么是前台线程，什么是后台线程？

通俗的解释：后台线程就是 main 同生共死，当 main 退出，它将终止，而前台线程是在任务执行结束才停止。

详细的解释（以及拓展）：

后台线程会随着主线程(main 线程)的结束而结束，但是前台进程则不会(如果 main 线程先于前台进程结束，前台进程仍然会执行)；或者说，只要有一个前台线程未退出，进程就不会终止。
默认情况下，程序员创建的线程是用户线程；用 setDaemon(true)可以设置线程为后台线程；而用 isDaemon( )则可以判断一个线程是前台线程还是后台线程；
jvm 的垃圾回收器其实就是一个后台线程；
setDaemon 函数必须在 start 函数之前设定，否则会抛出 IllegalThreadStateException 异常;
所有的“非后台线程”结束时，程序也就终止了，同时会杀死进程中所有后台线程：main 就是一个非后台线程；
后台线程创建的子线程也是后台线程。

3、创建线程有几种方法？他们之间的区别是什么？

Java 的产生线程的两种方法： 1）继承 Thread 类，并覆盖其 run 方法； 2）实现 Runnable 接口，并并将实现类对象传参到 Thread 类的构造方法。

上述两种方法原理是相通的，都是手动覆盖或者实现 run()方法，再由 Thread 的 start() 方法启动线程。（Runnable 接口只有唯一的抽象方法 run();）

两种方法的比较： 1）由于 Java 单继承的特性，所以通过继承覆盖 run() 的方式会有不小的局限性； 2）通过接口实现的方式，多线程可共享实现类对象的资源。

4、线程的生命周期有哪些状态？哪些方法可以改变这些状态？

一共有五种状态： 1）创建状态：只是 new 创建对象，还没有分配活动线程的资源给它； 2）可运行（就绪）状态：除 CPU 之外的资源已经分配完成； 3）运行中状态：分配 CPU ，正在执行； 4）阻塞状态：因为某些原因退出执行状态，此时仍可能占用除 CPU 外的各种资源； 5）死亡状态：线程执行完 run() 方法，或者抛出未捕获的异常或错误。

状态转化示意： 1->2 start() 2->3 分配 CPU 及内存 3->2 yield() 或超过配额 3->4 sleep(), wait(), join() 3->5 完成或意外终止 4->2 引起阻塞原因消除

5、什么是线程安全？为什么会产生线程安全问题？如何解决线程安全问题？

线程安全问题：多线程共享资源时引起意料之外的数据变化。

如何解决：使用 synchronized 等关键字或包，解决程序的原子性、有序性、可见性问题，就能解决线程安全问题。

线程安全问题产生原因：原子性、有序性、可见性三个问题没有处理好。

补充拓展：这三种说法是对应于 Java 内存模型的，他们其实来自操作系统中内存模型原本就存在的问题或机制。

1）缓存一致性问题：在 CPU 和主存之间增加缓存，在多线程场景下会存在缓存一致性问题。 2）处理器优化：为了使处理器内部的运算单元能够尽量的被充分利用，处理器可能会对输入代码进行乱序执行处理。 3）指令重排：除了现在很多流行的处理器会对代码进行优化乱序处理，很多编程语言的编译器也会有类似的优化，比如 Java 虚拟机的即时编译器（JIT）也会做指令重排。

关联：缓存一致性问题其实就是可见性问题。而处理器优化是可以导致原子性问题的。指令重排即会导致有序性问题。

6、什么是线程同步通信？同步通信又是如何实现的？

线程同步通信概念：使隶属于同一进程的线程协调一致的工作就是线程间的==同步==。线程间==通信==：由于多线程共享地址空间和数据空间，所以多个线程间的通信是一个线程的数据可以直接提供给其他线程使用，而不必通过操作系统（也就是内核的调度）。

同步通信的实现：线程间的通信方式：使用全局变量、使用消息、使用事件 CEvent 类线程间的同步方式：临界区、互斥量、信号量、事件。

补充扩展：进程间的通信方式：管道（pipe）、有名管道 (named pipe) 、信号量( semophore ) 、消息队列( message queue ) 、信号（signal）、共享内存（shared memory）、套接字( socket )

7、什么是死锁？

死锁是这样一种情形：多个线程同时被阻塞，它们中的一个或者全部都在等待某个资源被释放。由于线程被无限期地阻塞，因此程序不可能正常终止。

java 死锁产生的四个必要条件：

当上述四个条件都成立的时候，便形成死锁。当然，死锁的情况下如果打破上述任何一个条件，便可让死锁消失。

8、如何让某个对象的 A 方法内的一个代码块和另一个方法 B 实现同步？

在 A、B 方法前使用 synchronized，代码块前后使用 wait() 和 notify() ，再配合变量指示器使用。

9、设计一个程序产生两个线程 A 和 B， B 线程执行 10 秒后，被 A 线程终止。

package high.order.usage.thread;

class AB {
	volatile private int runTime = 0;
	volatile private boolean Enough = false;
	public void waitTimeUntilEnough () throws RuntimeException{
		if(Enough == true) {
			runTime = 1/0;
		}
		try {
			Thread.sleep(100);
		}
		catch(Exception e) {}

		runTime ++;
		System.out.println("线程" +
				Thread.currentThread().getName() +
				"执行了"+ runTime + "秒");
	}

	public void checkRunTimeIsEnough () throws RuntimeException {
		if(runTime == 10) {
			Enough = true;
			runTime = 1/0;
		}
	}
}

class RunA implements Runnable {
	private AB ab;
	public RunA (AB ab) {
		this.ab = ab ;
	}
	public void run()
	{
		while (true) {
			try{
				ab.waitTimeUntilEnough();
			}
			catch (RuntimeException e) {
				System.out.println("运行线程" +
						Thread.currentThread().getName() +
						"结束运行");
				break;
			}
		}
	}
}

class OverseerB implements Runnable {
	private AB ab;
	public OverseerB (AB ab) {
		this.ab = ab ;
	}
	public void run()
	{
		while (true) {
			try{
				ab.checkRunTimeIsEnough();
			}
			catch (RuntimeException e) {
				System.out.println("观察者线程" +
						Thread.currentThread().getName() +
						"结束运行");
				break;
			}
		}
	}
}

public class TestCommunicate{
	public static void main(String[] args){
		AB ab = new AB();
		new Thread(new RunA(ab)).start();
		new Thread(new OverseerB(ab)).start();
	}
}

备注：由于代码写的不熟练，所以看着有点傻瓜。我一时间只想到用异常来控制程序跳转了，总所周知，这是很不合规范的事情，自我批评 ing...

第十章

1、Collection、List、Set 之间的联系和区别是什么？

1、List 和 Set 都是接口 Collection 的子接口，他们的父接口都是这两个：Collection 和 Iterable 。

2、List 中的元素要求具有可控的顺序；Set 中的元素要求不能重复。（这符合其名称在数据结构与数学中的意义。）

3、Collection 能通过 iterator() 获得 iterator 对象，List 和 Set 自然也可以。但值得注意的是，iterator 的子接口 ListIterator 具有更丰富的功能，只有 List 中的 listIterator(参数) 方法才能获得 ListIterator 对象。

2、遍历一个集合对象有哪些方法？

有三种方法： 1）非一般化的、局限很多的下标遍历法； 2）使用遍历接口 Enumeration； 3）使用遍历接口 Iterator 。例如：

for (Iterator it = c.iterator(); it.hasNext(); ) {
    MyObject o = (MyObject)it.next();
    // 对获取到的对象o 操作
}

3、同数组相比，Vector 有何特点？

Vector 可以自动增加容量来容纳不定数量的元素。而数组长度是确定的。

4、Vector 与 ArrayList、LinkedList 与 ArrayList、Hashtable 与 HashMap、TreeMap 与 HashMap 之间的共同点和区别是什么？

1）Vector 与 ArrayList 同：都是存储可变数量对象元素的集合。异： Vector 方法同步，线程安全；ArrayList 方法不同步，性能更好。

2）LinkedList 与 ArrayList 同：都是存储可变数量对象元素的集合，都是线程不安全。异： LinkedList 内部实现基于链表方式；ArrayList 内部实现基于数组方式。

3）Hashtable 与 HashMap 同：都可以实现多组 key 到 value 之间的映射。异： Hashtable 方法同步，线程安全；HashMap 方法不同步，效率更高。

4）TreeMap 与 HashMap 同：都可以实现多组 key 到 value 之间的映射，都是线程不安全。异： TreeMap 基于红黑树实现，HashMap 基于哈希表实现。

5、Map、Collection、Iterator 之间的关系如何？

Collection 能有方法够产生 Iterator； Map 能够有方法产生 Collection，也能间接产生 Iterator 。

6、Collection 和 Collections 各自的功能是什么？

Collection 是接口，用来说明作为一个集合类应有的结构特征属性和共性操作方法。 Collections 是类，有一些集合类的操作功能。

7、现需要选择集合类，它存储的对象可以被多个线程维护（增加、删除），请问应该选择什么样的集合类，为什么？如果多线程只是读取，而不是维护，应该选择什么样的集合类，为什么？

存在多线程，就需要线程安全；存在维护就优先选择链表方式实现的集合；如果是只是查看，那么优先选择数组方式实现的集合。

1）Hashtable 。 2）Vector 。

8、如何实现集合对象排序？定义一个复数类并按照复数的实部大小对复数对象进行排序。

使用 List 接口，因为 List 接口中，对象之间有指定的顺序。还有 TreeMap 修改时就自带排序功能。

代码如下：

package high.order.usage.Collections;

import java.util.*;

class complete {
   int realValue;
   int virtualValue;
   public complete (int realValue, int virtualValue) {
      this.realValue = realValue;
      this.virtualValue = virtualValue;
   }
}

public class ExampleTreeMap {
   Map calendar = new TreeMap();
   public ExampleTreeMap(List <complete> c){
         for (int i = 0; i < c.size(); i++) {
            calendar.put(c.get(i).realValue, c.get(i).virtualValue);
         }
   }
   public static void main(String args[]) {
      List <complete> c = new ArrayList <complete> ();
      c.add(new complete(1,165));
      c.add(new complete(9,165));
      c.add(new complete(5,165));
      System.out.println("输入的复数：");
      for (int i = 0; i < c.size(); i++) {
         System.out.println("实部：" + c.get(i).realValue + "虚部："+ c.get(i).virtualValue);
      }
      ExampleTreeMap example = new ExampleTreeMap(c);
      System.out.println("TreeMap 自带排序: " + example.calendar);
   }
}

9、集合类对象调用 remove 方法将某个对象删除，这个对象是否就一定是垃圾对象了？

不一定。

remove 删除的仅仅是集合类对象中保存的引用副本，而原引用的情况是无从得知的。所以 remove 执行后，该对象仍可能存在其他引用。

10、对第 7 章第 6 题进行适当改造，将异常类型与中文提示存储在一种集合类当中，从而实现相应的功能。

package high.order.usage.Collections;

import java.util.HashMap;
import java.util.Map;

public class TestTenPointTen {
    public static void foo() {
        int a = 1/0;
    }
    public static void main(String[] args) {
        Map calendar = new HashMap();
        calendar.put("java.lang.NullPointerException", "捕获到空指针异常");
        calendar.put("java.lang.ArithmeticException", "捕获到算术异常");
        try {
            foo();
        }
        catch (ArithmeticException e){
            System.out.println(calendar.get(e.getClass().getName()));
        }
    }
}

第十一章

题外话：虽然 Applet 凉了，但是触类旁通，简单学习一下也不错。

1、为什么要对 Applet 的安全性作限制？

这是 Applet 的运行机制决定的：客户端浏览器解释执行从服务器下载的 Applet 字节码，而这个字节码可能包含恶意程序，于是就存在安全隐患，需要进行安全性限制。

2、Applet 有哪几种状态，状态切换需要什么条件？

四种状态：初始态、运行态、停止态、消亡态。

切换条件：运行这四个方法；init()、start()、stop()、destroy()

3、如何刷新一个 Applet？

Appplet 的显式和刷新由一个独立的 AWT 线程控制。

有两种刷新的情况： 1）自动执行 paint 方法绘图； 2）调用 repaint 方法重新绘图。

4、Applet 如何获得 Image 资源，如何显示图像？

1）装载图像文件 public Image getImage(URL url) public Image getImage(URL url, String name)

2）显示图像通过类 Graphics 的方法来实现，6 个重载的 drawImage 。

abstract boolean	drawImage(Image img, int dx1, int dy1, int dx2, int dy2, int sx1, int sy1, int sx2, int sy2, Color bgcolor, ImageObserver observer)

abstract boolean	drawImage(Image img, int dx1, int dy1, int dx2, int dy2, int sx1, int sy1, int sx2, int sy2, ImageObserver observer)

abstract boolean	drawImage(Image img, int x, int y, int width, int height, Color bgcolor, ImageObserver observer)

abstract boolean	drawImage(Image img, int x, int y, int width, int height, ImageObserver observer)

abstract boolean	drawImage(Image img, int x, int y, Color bgcolor, ImageObserver observer)

abstract boolean	drawImage(Image img, int x, int y, ImageObserver observer)

5、Applet 程序当中，如果书写了一个含参数的构造方法，将会发生什么现象，如何解释？

无法实例化。

Applet 的实例化由系统决定，系统主动调用 Applet 的无参构造方法，但是没有无参构造方法。

第十二章

题外话：虽然 AWT 凉了，但是触类旁通，简单学习一下也不错。（这句话好像在前面说过...）

1、AWT 常用容器有哪些？如何将一个组件加入到容器当中？

常用容器： panel、Frame、Dialog、ScrollPanel

通过从 Component 继承得到的 add 方法。

2、AWT 容器对象或组件对象产生后，是否能立即显示？

不能。还必须要调用 Component 类中的 setVisible(true) 方法。

3、AWT 中如何产生单选按钮和复选框？

单选按钮： CheckboxGroup cbg = new CheckboxGroup(); add(new Checkbox("select1", cbg, true)); add(new Checkbox("select2", cbg, true));

(注意，他们必须属于一个条目组——一个条目组中的选项具有互斥关系。)

复选框：不规定在某个组中的多个单选按钮即为复选框，形如： add(new Checkbox("select2", null, true)); add(new Checkbox("select1", null, true));

4、如何实现在界面中让一组组件的位置相对固定？

使用 BorderLayout 布局管理器。

5、Menu 类中可以加入 MenuItem，但为什么 Menu 是 MenuItem 的子类？

因为 Menu 中包含的方法： public menuItem add(MenuItem mi);

6、AWT 都有几种布局管理器？Panel、Applet 默认的布局管理器是什么？Window、Frame 和 Dialog 默认的布局管理是什么？使用什么方法设置容器的布局管理器？

AWT 共有 5 种布局管理器： FlowLayout、BorderLayout、GridLayout、CardLayout、GridBagLayout

Panel、Applet 容器的默认布局管理器 FlowLayout； Window、Frame、Dialog 的默认布局管理器 BorderLayout 。

容器可设置布局管理器，管理容器中组件的布局： container.setLayout(new XxxLayout()) 。

7、容器尺寸变化时，不同的布局管理器对组件的大小、位置有何影响？

FlowLayout：大小不变，位置依次流动；

BorderLayout：大小改变，相对位置不变；

GridLayout：大小改变，相对位置不变；

CardLayout：大小改变，相对位置不变；

GridBagLayout：取决于具体的设置。

8、AWT 中都有什么方法设置组件在容中的位置？

两种方法： 1）绝对坐标确定 2）使用布局管理器设置

9、Java 委托事件模型比层次型模型有哪些优点？

事件源和监听者彼此独立，这样就可以更灵活的处理事件。

10、事件对象在编程中的作用是什么？

传递消息。

11、应用程序如何得到一个图像的引用？

Applet 直接通过 URL 得到图像引用。

Application 得到引用的方式有两个： Image img1 = Toolkit.getDefaultToolKit().getImage(URL 及名称) Image img2 = 组件引用.getToolKit().getImage(URL 及名称)

12、当产生一个 AWT 界面时，main 主程序已经完成，界面为什么不消失？

因为容器对象产生时，创建了一个 AWT 线程，他是一个前台线程。

13、组件重绘有哪些方式？

需要调用 paint 方法，分两种调用： 1）AWT 线程自动调用； 2）程序调用。

注意，程序不能直接调用 paint 方法，但是可以统计过调用 repaint 方法间接调用。

14、Graphics 对象都能进行什么类型的绘制？

三个方面：文字绘制、图形绘制、图像绘制。

15、双缓存技术解决的问题是什么？解决的方法是什么？

解决的问题：在 Component 及其子类的 paint 方法中进行图形图像绘制时，如果绘制内容复杂且频繁时，往往比较费时，常常出现绘制界面的抖动。

解决方法：利用额外的空间，将绘制好的图像保留在 Image 中，这样再次需要显示这个图像时，就不需要再计算一次了。

第十三章

1、Swing 与 AWT 有什么区别？

1）Swing 是轻量级组件，AWT 是重量级组件。 2）Swing 采用了 MVC 的设计模式。 3）Swing 保留了 AWT 中大多数对应名称的组件，此外还提供了更多新的组件。 4）Swing 的功能有所提高。

2、Swing 容器有几类？

Swing 容器大致可分为三类：顶层容器、中间容器、特殊容器。

3、组件加入 Swing 顶层容器与加入 AWT 容器有什么不同？

不能直接调用顶层容器的 add 方法添加 Swing 组件。

4、Swing 中的许多容器和组件都是继承于 JComponent 的，有哪些例外？

顶层容器例外：JFrame、JApplet、JDialog、JWindow 。

5、模仿例 13.1，编写 Swing 程序，并让外观呈现 Motif 风格。

package high.order.usage.swing;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.UIManager.LookAndFeelInfo;

public class JFrameDemo extends JFrame {
    Container ct;
    JButton jButton1 = new JButton();
    public JFrameDemo() {
        jbInit();
    }
    private void jbInit() {
        // 得到内容面板添加组件
        ct=getContentPane();
        // 设定Frame的宽度为200,高度为100
        this.setSize(new Dimension(200,100));
        // 设定Frame的标题
        this.setTitle("Frame Title");
        // 设定按钮的caption
        jButton1.setText("connect");
        Icon ic = new ImageIcon("local.gif");
        jButton1.setIcon(ic);
        // jButton1.setBorder(BorderFactory.createLineBorder(Color.red));
        // 将按钮加入Frame
        ct.add(jButton1,"Center");
        // 显示Frame
        this.setVisible(true) ;
    }
    public static void main (String []arg) throws ClassNotFoundException,
        InstantiationException, IllegalAccessException, UnsupportedLookAndFeelException {
        // 打印默认风格
        System.out.println("默认风格为： " + UIManager.getLookAndFeel().getName());
        LookAndFeelInfo[] lAndF = UIManager.getInstalledLookAndFeels();
        // 遍历风格种类
        for (int j = 0; j < lAndF.length; j++) {
            System.out.println("本机器第"+ (j + 1) + "种风格：" + lAndF[j].getClassName());
        }
        System.out.println("选择表现的风格为：motif ");
        // UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");
        // UIManager.setLookAndFeel("javax.swing.plaf.nimbus.NimbusLookAndFeel");
        UIManager.setLookAndFeel("com.sun.java.swing.plaf.motif.MotifLookAndFeel");
        // UIManager.setLookAndFeel("com.sun.java.swing.plaf.gtk.GTKLookAndFeel");

        JFrameDemo	jf =  new JFrameDemo();
        jf.addWindowListener(new WindowAdapter() {
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
}

第十四章

1、流有哪些分类？

三种分类方式： 1）按照流动方向分类：输入流、输出流 2）按照读取类型分类：字节流、字符流 3）按照发生源头分类：节点流、过滤流

2、常见的文件类和接口有哪些？

接口： FileFilter、FilenameFilter 类： File、FileDescription、 FileInputStream、FileReader、 FileOutputStream、FileWriter、 RandomAccessFile 。

3、完成下面方法中的代码，要求建立一个缓冲区，将字节输入流中的内容转为字符串。

static String loadStream (InputStream in) throws IOException {
	// ...
}

解题：

package high.order.io.java;

import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;

public class QuesionFourteenPointThree {
    static String loadStream (InputStream in) throws IOException {
        // ...
        StringBuffer returnString = new StringBuffer();
        int n = 512, c = 0;
        byte buffer[] = new byte[n];
        while ((c = in.read(buffer,0,n)) != -1) {
            String tempString = new String(buffer,0,c);
            System.out.print(tempString);
            returnString.append(tempString);
        }
        // 关闭输入流
        in.close();
        return returnString.toString();
    }
    public static void main (String[] args) {
        try {
            InputStream fileInputStream = new FileInputStream("Write1.txt");
            QuesionFourteenPointThree.loadStream(fileInputStream);
            System.out.println("完成");
        }
        catch (Exception e) {
            System.out.println("报告异常");
        }
    }
}

4、编写程序，将一个字符串转为字节数组输入流，将这个流中所有小写字母换成大写字母并写入字节数组输出流中，再将数组输出流转为字符串。

package high.order.io.java;

import java.io.*;

public class QuestionFourteenPointFour {
    public static void main (String[] args) {
        try {
            String testText = "Hi Guys! Good night!";
            System.out.println("原字符串：" + testText);
            byte[] bytes = new byte[30];
            ByteArrayInputStream byteArrayInputStream =
                new ByteArrayInputStream(testText.getBytes());
            byteArrayInputStream.read(bytes);
            System.out.println("字节显式：");
            for (int i = 0; i < bytes.length; i++) {
                System.out.print(bytes[i] + " ");
                if (bytes[i] >= 97 && bytes[i] <= 122) {
                    bytes[i] -= 32;
                }
            }
            ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
            byteArrayOutputStream.write(bytes);
            String a = byteArrayOutputStream.toString();
            System.out.println("\n" + "改变后字符：" + a);
            byteArrayInputStream.close();
            byteArrayOutputStream.close();
        }
        catch (Exception e) {
            System.out.println("报告异常");
        }
    }
}

5、完成下面方法中的代码，方法中的参数为一个文本文件的名称，要求将文件中的内容转为字符串。

static public String loadFile (String filename) {
	// ...
}

解题：

package high.order.io.java;

import java.io.ByteArrayOutputStream;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;

public class QuestionFourteenPointFive {
    static public String loadFile (String filename) {
        try {
            FileInputStream fileInputStream = new FileInputStream(filename);
            byte[] bytes = new byte[30];
            fileInputStream.read(bytes);
            ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
            byteArrayOutputStream.write(bytes);
            return byteArrayOutputStream.toString();
        }
        catch (FileNotFoundException e) {
            System.out.println("文件未找到");
        }
        catch (IOException e) {
            System.out.println("IO异常");
        }
        finally {
            System.out.println("方法调用完成");
        }
        return "我就是个凑数的~QAQ";
    }
    public static void main (String[] args) {
        String s = QuestionFourteenPointFive.loadFile("Write1.txt");
        System.out.println("显示文件内容：");
        System.out.println(s);
    }
}

6、完成下面方法中的代码，将字符串 contents 中的内容写入文件 filename 中。

static public boolean saveFile(String filename,String contents){}

解题：

package high.order.io.java;

import java.io.*;

public class QuestionFourteenPointSix {
    static public boolean saveFile (String filename,String contents) {
        boolean saveFileResult = true;
        try {
            FileOutputStream wf = new FileOutputStream(filename,true);
            wf.write(contents.getBytes(),0,contents.getBytes().length);
            wf.close();
        }
        catch (FileNotFoundException e){
            System.out.println("Not found the file!");
            saveFileResult = false;
        }
        catch (IOException e){
            System.out.println("IO Exception!");
            saveFileResult = false;
        }
        return saveFileResult;
    }
    public static void main(String[] args) {
        String filename = "Write1.txt";
        String contents = "The contents about something.";
        if (saveFile(filename, contents)) {
            System.out.println("Save File Success!");
        }else {
            System.out.println("Save File Failure!");
        }
    }
}

7、socket 套接字有一个方法 getInputStream() ，其含义是得到从网络上传过来的数据流。现要求编写一段程序，将接收的数据存入文件。

（绝对超纲了啊，网络通信明明是第十五章的内容。如果只是写文件的话，就和前面的题目重复了。socket 还没学呢...）

参考了网上内容：（好像是十五章的例子，早先看的了，现在不记得了）

服务器端：

package temp.text;

// 服务器端
import java.io.*;
import java.net.*;

public class MultiTalkServer {
    public static void main (String[] args) throws IOException {
        // 打开服务器制定端口, 等待客户端连接
        ServerSocket server = new ServerSocket(5000);
        // 获得与服务器相连的套接字对象——套接字:绑定ip地址和端口号的网络对象
        Socket socket = server.accept();
        // 查看该地址文件夹是否存在,如果不存在,创建一个
        String name = "Write1.txt";
        File file = new File(name);
        if (!file.exists()) {
            file.createNewFile();
        }
        // 套接字的字节输入流, 读取客户端传过来的数据
        InputStream in = socket.getInputStream();
        // 创建输出流对象
        FileOutputStream fos = new FileOutputStream(name);
        // 一次读取5字节，方便阅读，因为客户端传的就是5个字节
        byte[] data = new byte[5];
        int len = 0;
        // 如果客户端没有关闭socket输出流,这里的read方法会一直读取
        while ((len = in.read(data)) != -1) {
            fos.write(data, 0, len);
            System.out.println("客户端接受信息：" + fos.toString());
            // 写入一个系统通用换行符
            fos.write(System.lineSeparator().getBytes());
        }
        System.out.println("信息上传到文件!");
        server.close();
        fos.close();
    }
}

客户端：

package temp.text;

// 客户端
import java.io.*;
import java.net.Socket;

public class TalkClient {
    public static void main (String[] args) throws IOException {
        Socket socket = new Socket("127.0.0.1",5000);
        OutputStream out = socket.getOutputStream();
        int i = 10;
        try {
            while(i-- > 0) {
                out.write(("HELLO" + i).getBytes());
                out.flush();
                System.out.println("客户端发送消息：HELLO" + i);
                Thread.sleep(1000);
            }
        }
        catch (InterruptedException e) {}

        System.out.println("发送消息完毕！");
        out.close();
        socket.close();
    }
}

8、编写程序实现文件查找功能。提供两个参数，第一个参数为查找的起始路径，第二个参数为要查找的文件名称。如果找到，则给出文件的完整路径，否则提示文件不存在。

这里查找的内容为：其实路径目录及其子目录下的所有文件。

package high.order.system.IO;

import java.io.File;

public class SearchFileByName {
    public static StringBuffer fileAbsoluteFile;
    public static void main (String[] args) {
        String path = "/home/snofly/IdeaProjects/test/src/high/order/system/IO";
        String filename = "Input1.java";
        boolean searchResult = new SearchFileByName().search(path, filename);
        if (searchResult == true) {
            System.out.println("查找成功，路径为：" + fileAbsoluteFile);
        } else {
            System.out.println("查找失败");
        }
    }
    public boolean search (String path, String fileName) {
        File file = new File(path);
        if (file.isFile()) {
            System.out.println("当前文件路径：" + file.getAbsoluteFile());
            System.out.println("当前文件名称：" + file.getName());
            if (file.getName().equals(fileName)) {
                fileAbsoluteFile = new StringBuffer(file.getAbsoluteFile().toString());
                return true;
            } else {
                return false;
            }
        }
        if (file.isDirectory()) {
            System.out.println("当前目录路径：" + file.getAbsoluteFile());
            System.out.println("当前目录名称：" + file.getName());
            if (file.list().length == 0) {
                System.out.println("目录为空");
                return false;
            } else {
                for (int i = 0; i < file.list().length; i++) {
                    System.out.println("目录递归：" +  file.list()[i]);
                    if (search((file + "/" + file.list()[i]), fileName)) {
                        return true;
                    }
                }
            }
        }
        return false;
    }
}

写的有点不好看，但确实废了些心力——好久没写过递归了——类方法都不清楚，刚查的。

第十五章

1、网络协议分几层？各层解决的问题是什么？

网络协议层次的划分是多重的，因为历史原因并没有完全统一起来。不过，目前使用最广泛的、也是未来标准的划分，就是七层协议五层划分。

最底层：物理层通过电气设备，实现比特形式的信息传输。

第二层：数据链路层点到点通信，对数据进行检错和纠错。

第三层：网络层端到端通信。

第四层：传输层通信连接与管理。

第五层：应用、表示、会话层面向用户提供应用服务。

2、TCP 和 UDP 协议有什么不同，为什么称 TCP 是面向连接的可靠的协议？

有三个方面不同： 1）通信方式前者传输数据之前需要先建立连接；后者直接传输。

2）传输数量不同前者能够传输更大量的数据，后者只能传输单元很小。

3）可靠性不同前者保证连接和数据正确，后者只保证快速。

因为 TCP 先连接再传输数据，而且保证数据的正确与完整，所以说 TCP 是面向连接的可靠的协议。

3、在 Java 语言当中，网络编程是从协议的什么层次开始的？程序设计时，什么情况下选择 Java 高层次网络编程，什么情况下选择低层次网络编程？

Java 网络编程从传输层开始，并分为高层次网络编程（基于应用层）和低层次网络编程（基于传输层）。（数据链路层的编程和通信与设备紧密相关；网络层编程和操作系统紧密相关。这都不适合具有平台移植性的 Java 。）

Socket 和 URL 应用场景不同：Socket 面向内部网络通信；URL 适用于面向 Internet 通信。这也是选择 Java 编程方式的依据。

4、Socket 编程时，目的地址和端口号需要在什么地方指出？使用数据报时，又在什么地方指出？

Socket 构造方法参数中的地址和端口号是目的机器的，而 DatagramSocket 构造方法参数中的则是本机的。使用数据包时，应该在 DatagramPacket 构造方法中指出目的地址和端口号。

5、利用 URLconnetction 对象编写程序返回某网站的首页，并将首页内容存放到文件当中。

package high.order.net;
import java.net.*;
import java.io.*;

public class URLReader {
	public static void main(String[] args) throws Exception {
		URL tirc = new URL("https://www.chd.edu.cn");
		URLConnection urlConnection = tirc.openConnection();
		InputStream inputStream = new DataInputStream(urlConnection.getInputStream());
		BufferedReader in = new BufferedReader(new InputStreamReader(inputStream));
		FileOutputStream fileOutputStream = new FileOutputStream("Write1.txt", true);
		while (in.readLine() != null) {
			fileOutputStream.write(in.readLine().getBytes());
			fileOutputStream.write(System.getProperty("line.separator").getBytes());
		}
		inputStream.close();
		in.close();
		fileOutputStream.close();
	}
}

PS：我也不记得这几个流怎么连接装配的了，反正随便 new，有错误再解决，最后能实现功能。

6、利用串行化技术和 Socket 通信，将一个客户端构造的对象传送到服务器端，并输出该对象的属性值。

服务器端程序：

package high.order.net;

import java.io.*;
import java.net.ServerSocket;
import java.net.Socket;

public class QuestionFifteenPointSixTalkServer{
    public static void main(String args[]) {
        try{
            ServerSocket server = null;
            // 创建一个ServerSocket在端口4700监听客户请求
            server = new ServerSocket(4700);
            Socket socket = null;
            socket = server.accept();
            // 由Socket对象得到输入流
            ObjectInputStream os = new ObjectInputStream(socket.getInputStream());
            Photo photo = (Photo)os.readObject();
            System.out.println("photoId:" + photo.photoId + " photoSize:" + photo.photoSize);
            os.close();
            socket.close();
            server.close();
        }
        catch (Exception e) {
            System.out.println("Error:"+e);
        }
    }
}

客户端程序：

package high.order.net;

import java.io.*;
import java.net.Socket;

class Photo implements Serializable {
    public int photoId;
    public int photoSize;
    public Photo (int photoId, int photoSize) {
        this.photoId = photoId;
        this.photoSize = photoSize;
    }
}

public class QuestionFifteenPointSixTalkClient {
    public static void main(String args[]) {
        try{
            // 向本机的4700端口发出客户请求
            Socket socket = new Socket("127.0.0.1",4700);
            // 由Socket对象得到输出流，并构造ObjectOutputStream 对象
            ObjectOutputStream os = new ObjectOutputStream(socket.getOutputStream());
            // 创建并串行化对象
            Photo photo = new Photo(1,512);
            os.writeObject(photo);
            // 刷新输出流
            os.flush();
            os.close();
            socket.close();
        }
        catch(Exception e) {
            System.out.println("Error: "+e);
        }
    }
}

PS：这里只是表示一下对象串行化的使用，以及对象传输，所以程序比较简略。

第十六章

1、使用 JDBC 来操作数据库通常包含哪几个步骤？

使用 JDBC 操作数据库的步骤：（五个步骤）

1）载入 JDBC driver // 类型不同，会有不同的载入操作。

2）得到数据库的 Connection 对象 // 注意，Connection、Statement、ResultSet 都是接口，要用特定的方式产生对象。

3）根据连接对象得到 Statement 进行查询或更新数据。

5）操作结束后，依次对 ResultSet、Statement、Connection 执行关闭操作。 // 注意，依次关闭，且由于容易发生异常，应该放在 finally 中执行。

2、如何载入 JDBC driver？

分两种情形： 1）对类型三（JDBC/ODBC 桥这种情形）安装数据库客户端并配置 ODBC 数据源，驱动程序在 rt.jar 文件中，其路径由默认环境指出，无须在 classpath 中设置。

2）对类型一（纯 Java 驱动）和类型二（JDBC 调用客户端）首先从数据库厂商那里获取相应数据库的 JDBC driver 类库，再载入相应驱动。

3、java.sql 包中的主要接口 Connection、Statement 和 ResultSet 之间是什么关系？

ResultSet 实例只能由 Statement 实例的方法得到； Statement 实例只能由 Connection 实例的方法得到； Connection 实例只能通过 DriveManager 的方法得到。

4、数据库使用完毕之后，要进行哪些关闭操作？

操作结束后，依次对 ResultSet、Statement（或者 prepareStatement）、Connection 执行关闭操作。

（注意，依次关闭，且由于容易发生异常，应该放在 finally 中执行。）

5、对第 10 章第 10 题进行改造，使 HashTable 中的异常类型与中文提示均来源于数据库。

package high.order.jdbc;

import java.sql.*;
import java.util.ConcurrentModificationException;

public class TestSixteenPointFive {
    // MySQL 8.0 以下版本 - JDBC 驱动名及数据库 URL
    // static final String JDBC_DRIVER = "com.mysql.jdbc.Driver";
    // static final String DB_URL = "jdbc:mysql://localhost:3306/DBTest";

    // MySQL 8.0 以上版本 - JDBC 驱动名及数据库 URL
    static final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver";
    static final String DB_URL = "jdbc:mysql://127.0.0.1:3306/DBTest?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC";

    // 数据库的用户名与密码，需要根据自己的设置
    static final String USER = "root";
    static final String PASS = "root123456";

    public static void foo() {
        String str=null;
        str.length();
    }

    public static void main(String[] args) {
        Connection conn = null;
        Statement stmt = null;
        ResultSet rs = null;
        try{
            // 注册 JDBC 驱动
            System.out.println("注册 JDBC 驱动...");
            Class.forName(JDBC_DRIVER);

            // 打开链接
            System.out.println("连接数据库...");
            conn = DriverManager.getConnection(DB_URL,USER,PASS);

            // 执行查询
            System.out.println(" 实例化Statement对象...");
            stmt = conn.createStatement();
            String sqlFrist = "SELECT chinese_text FROM HashTableException WHERE hashtable_exception = '";
            String sqlLast = "'";

            try {
                System.out.println("运行功能程序主体...");
                foo();
            }
            catch (ConcurrentModificationException e){
                rs = stmt.executeQuery(sqlFrist + "ConcurrentModificationException" + sqlLast);
                System.out.println("出现异常：" + rs.getString("chinese_text"));
            }
            catch (IllegalArgumentException e){
                rs = stmt.executeQuery(sqlFrist + "IllegalArgumentException" + sqlLast);
                System.out.println("出现异常：" + rs.getString("chinese_text"));
            }
            catch (NullPointerException e){
                rs = stmt.executeQuery(sqlFrist + "NullPointerException" + sqlLast);
                rs.next();
                System.out.println("出现异常：" + rs.getString("chinese_text"));
            }
            finally{
                // 关闭资源
                try{
                    if(rs != null)  rs.close();
                }catch(SQLException se2){
                    System.out.println("不正常，结果集为空！");
                }
            }
        }
        catch (SQLException se) {
            // 处理 JDBC 错误
            se.printStackTrace();
        }
        catch (Exception e) {
            // 处理 Class.forName 错误
            e.printStackTrace();
        }
        finally {
            // 关闭资源
            try {
                if (stmt != null) stmt.close();
            }
            catch (SQLException se2) {}
            try{
                if(conn != null) conn.close();
            }catch(SQLException se){
                se.printStackTrace();
            }
        }
        System.out.println("结束");
    }
}

没有相应数据库的话，这个程序运行不起来。但是作为一个实例，还是挺规范的。

~~不信你看，我在 finally 里面关闭连接，你看他关得严不严实？~~

6、实现两个方法。

原题目：现有代码如下，ExeSql 类当中有三个方法，其中 getConnection 方法是得到数据库连接对象，本方法假定已经实现。现编写两个重载的方法 execSql，第一个方法的参数为字符串，用来执行数据库操作语句（插入、删除、修改），如果执行成功则返回 true，失败返回 false；第二个方法为一个字符串数组，每个单元存放一条数据操作语句，如果所有语句执行成功，则返回 true，有一条失败，返回 false，并输出出错语句。请将这两个方法给出相应的实现。

public class ExeSql{
	public boolean execSql(String sqlStr){
	}
	public boolean execSql(String[] sql){
	}
	private Connection getConnection(){
	// 得到同数据库相连的各种方法
	}
}

代码实现：

package high.order.jdbc;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Random;

public class ExeSql {
    static final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver";
    static final String DB_URL = "jdbc:mysql://127.0.0.1:3306/DBTest?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC";
    static final String USER = "root";
    static final String PASS = "root123456";
    private Connection getConnection(){
        Connection conn = null;
        try {
            Class.forName(JDBC_DRIVER);
            conn = DriverManager.getConnection(DB_URL, USER, PASS);
        }
        catch (SQLException se) {
            se.printStackTrace();
        }
        catch (Exception e) {
            e.printStackTrace();
        }
        return conn;
    }

    public boolean execSql(String sqlStr){
        boolean executeResult = true;
        Connection connection = new ExeSql().getConnection();
        Statement stmt = null;
        try {
            stmt = connection.createStatement();
            String randown = new Random().nextInt(100) + "";
            stmt.execute("" +
                    "insert into HashTableException(id,chinese_text) values(" +
                            randown +
                            ",'" +
                            sqlStr +
                            "')"
                    );
            executeResult = true;
        }
        catch (SQLException se) {
            // 处理 JDBC 错误
            // se.printStackTrace();
            executeResult = false;
        }
        catch (Exception e) {
            // 处理 Class.forName 错误
            // e.printStackTrace();
            executeResult = false;
        }
        finally{
            try{
                if(connection != null) {
                    // System.out.println("connection yes");
                    connection.close();
                }
            }
            catch (SQLException se2) {
                System.out.println("不正常，connection 为空！");
            }
            try{
                if(stmt != null)  stmt.close();
            }
            catch (SQLException se2) {
            }
            return executeResult;
        }
    }

    public boolean execSql(String[] sql){
        boolean executeResult = true;
        Connection connection = new ExeSql().getConnection();
        Statement stmt = null;
        try {
            stmt = connection.createStatement();
            for (int i = 0; i < sql.length; i++) {
                stmt.execute(sql[i]);
            }
            executeResult = true;
        }
        catch (SQLException se) {
            // 处理 JDBC 错误
            // se.printStackTrace();
            executeResult = false;
        }
        catch (Exception e) {
            // 处理 Class.forName 错误
            // e.printStackTrace();
            executeResult = false;
        }
        finally{
            try{
                if(connection != null) {
                    // System.out.println("connection yes");
                    connection.close();
                }
            }
            catch (SQLException se2) {
                System.out.println("不正常，connection 为空！");
            }
            try{
                if(stmt != null)  stmt.close();
            }
            catch (SQLException se2) {
            }
            return executeResult;
        }
    }

    public static void main(String[] args) {
        boolean bString = new ExeSql().execSql("str");
        System.out.println("String 调用返回：" + bString);

        String[] stringArray= {
                "insert into HashTableException(id,chinese_text) values(99,'sdg')",
                "UPDATE HashTableException SET chinese_text = 'change' WHERE id = 3"};

        boolean bStringArray = new ExeSql().execSql(stringArray);

        System.out.println("String[] 调用返回：" + bStringArray);
    }
}

PS：我好像没有理解清楚题意，多谢了一部分。

~~我才不会承认，是我懒得改了。~~

第十七章

1、简要回答 UML 的统一、建模、语言的三层含义。

统一：建模符号的统一。建模：捕捉、描述系统的核心。语言：可视化、拥有独特语法和语义的建模语言。

2、UML 的主要特点有哪些？

三个特点： 1）建模设计上的标准化与可视化的结合。 2）建模设计上的语言无关性。 3）建模设计上标准性与拓展性的统一。

3、UML 的建模工具有哪些？请选择一种安装和应用。

建模工具有非常多，比较流行的是 IBM 公司的 Rational Rose 和 Sybase 公司的 PowerDesigner。

（我选的是比较轻量的工具 DIA，因为我是想在 Ubuntu 系统下开发软件。我暂时用不到太好的功能。）

4、UML 的视图和图有哪些？它们的对应关系是什么？图都有哪些主要的分类？这些图在设计过程中的演化关系是什么？

4.1.1 UML 视图有 5 种，也被称为 4+1 结构的视图：逻辑视图、进程视图、构建视图、部署视图，再加上用例视图。

4.1.2 UML 图有 10 种：用例图、类图、对象图、包图、构件图、部署图、顺序图、协作图、状态图、活动图。

4.2 UML 视图由若干图进行描述，他们的对应关系为：用例图---用例视图对象图---用例视图、逻辑视图顺序图---用例视图、逻辑视图协作图---用例视图、逻辑视图活动图---用例视图、逻辑视图类图---逻辑视图包图---逻辑视图状态图---逻辑视图构件图---构件视图部署图---部署视图

4.3 图主要的分类：分为静态模型图和动态模型图两类。

4.4 演化逻辑关系：软件设计是一个由表及里、由浅入深、从外到内的一个逐渐深化的过程。 UML 的各类图反应了人们对软件系统的认识规律。

5、用例图都有哪些模型元素，它们的含义是什么？

用例图有 6 种模型元素： 1）用例用例是必须被驱动的功能，功能应完整，且外部可见、相互独立。 2）参与者（角色）参与者是驱动用例的角色，可以是人也可以是物品。 3）关联关系参与者和用例之间的沟通渠道。 4）包含关系用例与用例的一种依赖关系。 5）拓展关系用例与用例的一种依赖关系。 6）继承关系用例与用例，参与者与参与者之间的一种继承关系。

6、类图和对象图有哪些相同点和不同点？

类图用于描述类以及类之间的关系，对象图用于描述对象及对象之间的关系。

7、简要画出类图的类、泛化、关联、接口、依赖等模型元素的建模符号。

（都有，随便展示一下。）

8、默写出第 17.5.4 节中给出的关联对应的代码表示。

代码实现的基本模式：（相互引用）

Class A {
    B b;
}

Class B {
    A a;
}

9、关联的类型有哪些？四种特殊的关联各是什么？

关联的类型有四种：（按照相互关联的类的个数划分）一元关联（自关联或递归关联）、二元关联、三元关联、多元关联。

四种特殊的关联：关联类、受限关联、聚合关联、组合关联。

10、依赖的含义有哪些？对应的代码又是什么？

依赖的含义： 1）类和对象之间的依赖； 2）对接口的使用； 3）类之间的依赖。

代码实现：一个类中声明依赖目标的引用，然后使用其内，这就形成依赖关系了。

11、顺序图和协作图中的消息有哪些类型？请给出一个顺序图中的消息和代码的对应关系。

顺序图和协作图的消息类型有四种：简单消息、同步消息、异步消息、返回消息。

比如，同步消息就是调用方法：

Class A {
	// 调用之前的内容
    B b = new B().function();
    // 调用之后的内容
}

12、活动图和状态图的相同点和不同点是什么？

相同点： 1）图中的建模元素有相似之处； 2）对系统或对象在生存周期的状态和行为进行描述。

不同点： 1）状态图中迁移发生时，必须有事件发生或者条件满足；而活动图中迁移发生时，可以无条件或者没有事件发生。 2）状态图对于系统状态的描述可以横跨多个用例；而活动图则是针对同一用例内部的动作执行给出描述。

13、案例 2 的用例图中，图形的选择和图形的删除是包含关系，而图形的移动和改变是拓展关系，为什么？

删除图形之前必须选择图形，因为没有其他办法；而移动和改变图形则有其他办法。比如：通过整体缩放、软件移动，即可实现上述功能。

第十八章

1、设计模式的含义是什么？

设计模式的含义：设计模式描述了软件开发过程中若干重复出现问题的解决方案。

2、设计模式的原则有哪些？各自的含义是什么？

三个原则：

1）开闭原则开闭原则是指软件系统对拓展开放，对修改关闭。

2）组合 /聚合复用原则继承是白箱复用，而组合聚合则是黑箱复用。在复用选择时应该优先选择黑箱复用，有四个优点。

3）高内聚松耦合原则耦合是指两个对象相互依赖对方的程度，内聚是指一个对象内部功能相联的程度。

3、设计模式的分类依据是什么？模式构成的主要要素都有哪些？

设计模式依据范围或目的进行分类。

模式构成主要有四个要素：模式名称、问题、解决方案、效果。

4、结合第 17.12 节和第 17.13 节的代码，讨论都应用了哪些设计模式？

（这 23 种设计模式没有细看，无法回答。）

第十九章

1、软件框架的含义是什么？

软件框架（Software Framework）是对通用功能操作进行抽象的软件。

2、软件框架与设计模式的关系是什么？

框架是软件，设计模式是软件的知识。

3、主要的 Java 应用框架有哪些？

常见的框架技术路线主要有两类： 1）微软的 .NET Framework； 2）基于 J2EE 的 Java 应用框架。

4、软件框架与应用的正向控制和反向控制的含义是什么？

表示应用和软件框架之间的依赖关系：应用依赖于框架，控制关系就为反向；若应用不依赖于框架，控制关系就会反向。

5、MVC 的含义是什么？

MVC （Model-View-Controller）架构：应用程序通常需要处理数据及其界面表示这样的功能需求，需要处理的数据就是 Model，而数据的表现就是 View 。

6、简要介绍一下 Struts1 的框架结构。

Struts1 框架负责为 Model、View、Controller 三者之间的关系调用提供一个基本的环境。

Struts1 有四个不足之处： 1）框架同应用是正向控制关系，即应用依赖于框架； 2）易产生线程安全问题； 3）ActionForm 的冗余问题； 4）表现层单一：只支持 JSP。

7、Struts1 如何体现 MVC 的结构设计，设计和部署一个 Struts1 的主要步骤有哪些？

服务器端结构，由 Servlet（Controller）、JSP（View）、JavaBean（Model）构成。

步骤： Tomcat 配置；安装 JDK；Struts1 应用部署；应用类部署。

8、简要介绍一个 Struts2 的框架结构。

Struts2 源于 WebWork，可以看做是 WebWork 的升级版，而不是 Struts1 的升级版。Struts1 和 Struts2 的编程思维截然不同。

Struts2 的 Controller 室友核心控制器 FilterDispatcher 和 Action 组成的。

9、Struts1 和 Struts2 的区别点是什么？

Struts2 与 Struts1 的对比： 1）Struts2 是个 IoC 反向控制容器，大大降低两类框架和应用的耦合； 2）Struts2 为每一个请求单独建立一个 Action 对象，从而不会产生线程安全问题； 3）Struts2 视图通过支持模板技术拓展了表现类型；等等...

第二十章

1、软件体系结构的含义和主要类型有哪些？

软件体系结构：两种成分的集合：其一，具有一定形式的软件结构化元素；其二，他们之间的关系。

软件系统的分类： 1）从构成角度划分构件、他们之间的调用关系 2）从开发过程角度划分概念结构、物理结构 3）从运行角度划分静态结构、动态结构 4）从部署的角度集中式结构、分布式结构**

2、C/S 和 B/S 各自都有哪些优点和缺点？

C/S 的优缺点：优点是开发容易，部署简单，执行速度块，界面表现形式丰富。缺点是维护困难。

B/S 的优缺点：优点是维护拓展方便。缺点是开发和部署相对复杂。

3、软件客户端都有哪些主要类型？

客户端三种类型：胖客户端：C/S 结构中的客户端；瘦客户端：B/S 结构中的浏览器端；富客户端：介于二者之间。

4、分布式软件系统需要处理哪些共性问题？

1）网络通信协议和通信方式的选择； 2）提供远程过程调用（Remote Procedure Call，RPC）接口； 3）名称查找，快速在网络上找到需要调用服务的计算机名称、地址、端口等； 4）安全机制，分布式软件系统彼此进行通信时需要确保数据传输和身份认证的安全性； 5）事务管理。

5、中间件的含义是什么？消息模型的类型有哪些？

中间件是将不同软件构件或者操作者与多种应用程序连接起来的软件。

消息分类： 1）按照参与者数量划分：点到点、发布/订阅； 2）按照传递方向：推、拉； 3）按照通信方式：同步、异步。

6、JMS 的含义是什么？

JMS （Java Message Service）是一组 Java 应用程序接口，它规定了创建、发送、接受、读取消息的一系列标准。

7、主要的分布式对象技术有哪些？

OMG 的 CORBA 主要是对标准进行规定。 JavaRMI、JNDI、COM+ 既是标准也是实现。 WbeService 采用 XL 格式规定了一系列由 W3C 国际组织确认的标准规范。

8、RMI 通信原理是什么？结合书上的案例给出你的一个关于数据库操作的 RMI 设计。（提示：可将对数据库的查询和操作放到 RMI 的服务器端，客户端仅提交请求和得到返回结果）

RMI 可以说是 Java 的 RPC 技术，即一个 JVM 内存空间对象可以获得另一个 JVM 内存空间对象的远程引用，并向其发送消息。

（设计略）

9、JNDI 的含义是什么？

JNDI （Java Namig and Directory Interface）是为 Java 应用程序提供目录命令和命名服务功能的接口，负责对 Java 分布式对象进行管理和检索。

10、WebService、结构层次是什么？

WebService 结构层次有四层：发现服务——UDDI 服务描述——WSDL 服务调用——SOAP 传送协议——HTTP

11、简要介绍 WSDL、UDDI、SOAP 的含义。

WSDL（Web Services Description Language）是基于 XML 格式被 W3C 组织确认的标准协议，用于对 Web 服务接口和服务位置进行描述。

UDDI（Universal Description，Discovery and Integration）是一种独立于平台、基于 XML 格式、用于在互联网上描述 Web 服务的协议。

SOAP（Simple Object Access Protocol）是有微软、IBM 等公司发起由 W3C 组织确认的标准协议。它采用 XML 格式定义，可以将本地方法调用转为适合网络传输的形式（SOAP 请求），同时将 Web 服务经网络传输返回的调用结果转化为本地方法的返回值（SOAP 响应）。

12、参考本章的案例结合 XFire 设计一个你的 WebService 应用。

（设计略）

后记

卧槽，终于写完了（吧？）。出来混迟早要还的。还是珍惜当下，免得以后难受。

NLP-KD 课件学习笔记

Wed, 18 Mar 2020 00:00:00 GMT

一、基础理论

（一）基本概念

1、Natural Language(自然语言) 2、Artificial Language(人工语言) 3、Natural Language Processing(自然语言处理)：从应用系统实现和语言工程的角度开展语言信息处理方法的研究。 4、专门针对中文的语言信息技术研究称为中文信息处理。 5、Computation linguistic(计算语言学)：侧重于计算方法和语言学理论方面的研究。 6、BioNLP(Biomedical NLP,生物医学文本挖掘)

（二）NLP 的行业应用

1、Spell and Grammar Checking 其一：Checking spelling and grammar. 其二：Suggesting alternatives(替代选择) for the errors.

2、Word Prediction Predicting the next word that is highly probable to be typed(输入) by the user.

3、Information Retrieval(检索) Finding relevant information to the user’s query.

4、Text Categorization(分类) Assigning(分配) one (or more) pre-defined category to a text.

5、Summarization(摘要) Generating(生成) a short summary from one or more documents, sometimes based on a given query.

6.Question answering

7.Information Extraction(提取) Extracting important concepts(概念) from texts and assigning them to slot(位置) in a certain template(模板); named-entity recognition.

8.Machine Translation Translating a text from one language to another.

9.Sentiment Analysis

10.Speech recognition Recognizing a spoken language and transforming it into a text.

11.Speech synthesis( synthesis)

12.Spoken dialog(对话框) systems

（三）NLP 基础技术/研究内容

1、层次划分 2、Part-of-speech(词性) tagging 3、Syntatic Parsing(解析) 4、Dependency(依赖) Parsing 5、Named-entity recognition 6、Word sense disambiguation(消歧) 7、Semantic(语义) role labeling

（四）NLP 的语言学知识

NLP 结合了现代语音学/音系学、词法学、句法学、语义学、语用学的知识。

词法学(Morphology) 研究词(word) 由有意义的基本单位－词素(morphemes) 的构成问题。

句法学(Syntax) 研究句子结构成分之间的相互关系和组成句子序列的规则。

语义学(Semantics) 研究如何从一个语句中词的意义，以及这些词在该语句中句法结构中的作用来推导出该语句的意义。

语用学(Pragmatics) 研究通过语言达到目标，以及上下文对语义理解所产生的影响。

（五）NLP 的困难和挑战

歧义现象

1、词法歧义：词素组合成词产生歧义词素：词根、前缀、后缀、词尾 2、词法歧义(词性歧义) 3、句法歧义(结构歧义) 词(或短语)的组合导致的歧义 4、句法歧义(结构歧义) 5、语义歧义 6、语用层面(Discourse analysis) 和语境、上下文有关

未知语言现象 1、新词、人名、地名、术语等 2、旧词新意 3、新用法新句型

（六）NLP 研究方法

~~一般技术线路~~ 1、基于规则的方法 ~~实际技术路线~~ 2、基于统计的方法

二、NDarrays

优点：速度快！

（一）numpy 语句

numpy.array() 直接对应运算，例如哈达吗积。 numpy.dot() np.matmul() (暂时没发现有什么用)

（二）Broadcasting

一般规则 数组+数字二维数组+一维数组

（三）Mathematical Functions

维度合并

（四）最常用法合集

scipy.linalg.inv Inverse of matrix (numpy as equivalent) 矩阵的逆(与 numpy 等价)

scipy.linalg.ei Get eigen value (Read documentation on eigh and numpy equivalent) 获取特征值(阅读等效 eigh 和 numpy 的文档)

scipy.spatial.distance Compute pairwise distance 计算两两距离

np.matmul Matrix multiply 矩阵相乘

np.zeros Create a matrix filled with zeros (Read on np.ones) 创建一个满是 0 的矩阵(读 np.ones)

np.arange Start, stop, step size (Read on np.linspace) 启动、停止、步长(在 np.linspace 上阅读)

np.identity Create an identity matrix 创建一个单位矩阵

np.vstack Vertically stack 2 arrays (Read on np.hstack) 垂直堆栈 2 个数组(在 np.hstack 上读取)

array.shape Get shape of numpy array 获取 numpy 数组的形状

array.dtype Check data type of array (for precision, for weird behavior) 检查数组的数据类型(为了精确，为了古怪的行为)

type(stuff) Get type of a variable 获取变量的类型

import pdb; pdb.set_trace() Set a breakpoint (https://docs.python.org/3/library/pdb.html) 设置一个断点

print(f’My name is {name}’) Easy way to construct a message 构造消息的简单方法 f = "韩梅梅" print(f'My name is {f}')

~~Python scripting in the terminal is great for this!~~

三、隐马尔科夫模型

（一）Markov 模型

存在一类重要的随机过程一个系统有 N 个状态 S1, S2,…, SN，随着时间的推移，该系统从某一状态转移到另一状态。

如果用 𝑞𝑡 表示系统在时间 t 的状态变量，那么，t 时刻的状态取值为 𝑆𝑗(1 ≤ 𝑗 ≤ 𝑁)的概率取决于前 t-1 个时刻 (1, 2, …, t-1) 的状态，该概率为： 𝑝(𝑞𝑡 = 𝑆𝑗|𝑞𝑡−1 = 𝑆𝑖, 𝑞𝑡−2 = 𝑆𝑘, …)

根据 makov 模型(满足两个假设) 状态序列 S1, …, ST 的概率(乘法公式)：这样就可以判断某个序列出现的概率了。

（二）隐马尔科夫模型

HMM 三(五)要素 在一个岛上，这里没有天气预报(隐藏状态)，只有一片片的海藻(观察状态)。 S：隐藏状态集合。 O：观察状态集合。

（三）HMM 的三个问题和相应算法

1、评估：根据已知的 HMM 找出一个观察序列的概率。解决：前向算法，后向算法。

2、解码：根据观察序列 O 找到最可能的隐藏序列 Q。解决：Viterbi 算法。

3、参数估计/学习：解决：Baum-Welch 算法。

四、词法分析(Lexical)-分词&PoS

（一）词法分析概述

词是自然语言中能够独立运用的最小单位，是自然语言处理的基本单位。 自动词法分析就是利用计算机对自然语言的形态(morphology) 进行分析，判断词的结构和类别等。 词性或称词类(Part-of-Speech, PoS)是词汇最重要的特性，是连接词汇到句法的桥梁。

句法研究的是句子的结构，以词为单位。 词法研究的是词的结构，以词素为单位。

（二）英语词法分析

1.单词识别 2.形态还原 a.规律变化词还原 b.不规则词形态还原 c.数字形态还原 d.合成词的形态还原

（三）汉语分词

问题： 1.规范性问题 2.分词歧义问题 1）交集型歧义：词的交叉组合产生 2) 组合型歧义：覆盖歧义，多义歧义 3) 混合型歧义 3.未登录词的识别

方法： 1.基于词典（字符串匹配）的分词方法 1）最大匹配正向最大匹配算法 (Forward MM, FMM) 逆向最大匹配算法 (Backward MM, BMM) 双向最大匹配算法 (Bi-directional MM) 2）最小匹配 2.基于统计的方法 LM, HMM, CRF 3.基于规则需要领域专家来定义规则。

（四）词性标注

词性标注 词性(part-of-speech, POS)标注(tagging) 主要任务是消除词性兼类歧义。 词性兼类 在任何一种自然语言中，词性兼类问题都普遍存在。

机器学习入门实践

Wed, 19 Feb 2025 00:00:00 GMT

0 前言

本文是一个机器学习(Machine Learning, ML)的应用实践，适合初级编码水平的读者。

本文选择的实践内容是基于统计的自然语言处理(Natural Language Processing, NLP)，具体来说，是基于朴素贝叶斯算法训练的一个二分类器 —— 用于判断收到的邮件是否为垃圾邮件。

阅读完成之后，应该达到的目标:

1 理解朴素贝叶斯算法原理
2 了解基于统计的自然语言处理的原理
3 理解机器学习模型的原理
4 成功完成训练机器学习模型的实践
5 理解并运用模型评价指标(略)

1 算法原理

笔者：算法原理了解一下就行，不用担心现在看不懂，在后文中，会进一步结合代码理解。

1.1 贝叶斯定理

贝叶斯定理的数学表达式如下：

$$ P(A \mid B) = \frac{P(B \mid A) P(A)}{P(B)} $$

其中：

P(A|B) 表示在事件 B 发生的条件下，事件 A 发生的概率（后验概率）。
P(B|A) 表示在事件 A 发生的条件下，事件 B 发生的概率（似然）。
P(A) 是事件 A 的先验概率。
P(B) 是事件 B 的全概率。

1.2 定理的应用

如果我们得到 P(A|B) 的值，那么就能根据一些条件来预测某些事情的发生了。

举例 1， P(“I'm fine.” | “How are you ?”) ，根据经验，这两句话先后出现概率挺高的，其值假设为的 0.8 , 那么可以这样表述：当一个人对你说 “How are you ?” 时，你有 80% 的概率会回复他 “I′m fine.”

举例 2, P(“垃圾邮件” | “期待您的光临，电话号码：153xxxx1234”) = 0.7

举例 3, P(“垃圾邮件” | “我有朋友在那里工作。这个是个个人信箱亚，难道骗简历？”) = 0.01

总之，我们将 P 看作是一个函数（也就是模型），输入是字符串 B，输出是 P(A|B) 的值。

1.3 朴素贝叶斯

朴素贝叶斯是贝叶斯定理的一个特例，它简化了问题的假设前提，从而简化问题的解决过程。

简化的假设前提：假设特征之间是条件独立的，不考虑特征之间的关系（这也是“朴素”的含义）。

特征：事件 B 可能是由多个变量组成的一个集合，称为特征集。这些变量都能够影响最终的结果，被称为特征。

2 基于统计的 NLP

在 NLP 领域有两个研究方法：基于规则的方法和基于统计的方法。

本文对这两种方法的优劣不作评价，当然我们选择后者。

2.1 常规的处理流程

标准化的操作步骤是：

1、数据获取
2、数据预处理
3、特征提取
4、模型训练
5、模型评估

其中，第一步的数据获取，一般是用爬虫技术爬取数据，或者购买数据。我们这里准备好了<a href="/snofly-blog/files/nlp/data.zip" target="_blank">训练数据</a>，直接下载即可。严郑声明，仅用于学习用途！

第二步的数据预处理，我们的训练数据也已经做好了。我们拿到的数据就是有标记的数据。

第五步的模型评估，不是本文的重点，直接略过。感兴趣的读者可以查阅准确率、召回率、F1-score 等概念。

代码实践部分，我们只做第三步和第四步。

2.2 特征提取

2.2.1 观察数据

在 2.1 节下载训练数据 data.zip 后，解压查看内部结构，应当是这样的：

➜  data tree -L 1
.
├── normal
├── spam
├── test
└── 中文停用词表.txt

4 directories, 1 file

其中，normal、spam、test 三个文件夹下都有若干 txt 文件，每个 txt 文件的内容是爬取的文本信息。

normal 表示其内都是正常邮件（个人笔记、好友消息等），spam 表示其内都是垃圾邮件（广告邮件之类的），test 用于测试。

从 normal 和 spam 中各取一份文件展示一下：

<details> <summary>data/normal 文件 274.txt</summary>

Return-Path: <chi@rbl.ccert.edu.cn>
Received: from rbl.ccert.edu.cn (rbl.ccert.edu.cn [202.112.57.71])
	by sea.net.edu.cn (8.12.11/8.12.11) with ESMTP id i9G08rJt015597
	for <han@ccert.edu.cn>; Sat, 16 Oct 2004 08:08:53 +0800 (CST)
Received: from rbl.ccert.edu.cn (localhost.localdomain [127.0.0.1])
	by rbl.ccert.edu.cn (8.12.11/8.12.11) with ESMTP id i9G0EVlm030752
	for <han@ccert.edu.cn>; Sat, 16 Oct 2004 08:14:32 +0800
Received: (from qa@localhost)
	by rbl.ccert.edu.cn (8.12.11/8.12.11/Submit) id i9G0EVSi030751;
	Sat, 16 Oct 2004 08:14:31 +0800
Date: Sat, 16 Oct 2004 08:14:31 +0800
Message-Id: <200410160014.i9G0EVSi030751@rbl.ccert.edu.cn>
Subject: =?gb2312?B?ofEgztK1xMXz09Eg0uy12MG1x+kg0KHM7Lbsyq608w==?=
To: han@ccert.edu.cn
From: Tran Quang Anh <chi@cernet.edu.cn>
Content-Type: multipart/mixed; boundary="----------=_1097885672-2811-72"
MIME-Version: 1.0
X-UIDL: )+[!!?A)"!%/l"!~XO"!

大三了,我们的恋情维系了三年.
   可是,越来越不知道自己在坚持什么.
   坚信他是最适合我的人，因为在一起的时候很快乐.
   可是一旦开学,被分开----距离拉开了，美没了
   因为相信地久天长,因为拿不起,放不下
   身为射手女生,是不是有点名不副实呢?
   吵架的时间居多,怀疑是否相爱,是否在乎对方,
   有时候嘲笑自己的幼稚,可是脾气上来了,就忍不住去伤害
   有时候甚至佩服起自己来,竟然这么久!~
   身边出现了一些人,可是最终还是选择他.因为一份执着吧.
   那些可以天天在一起的恋人们,你们真的很幸福哦.要珍惜呢.
   那些和我一样,仍在坚持着的"单身恋人",你们怎么想呢?

</details>

Return-Path: <qian@163.com>
Received: from 163.com ([61.144.65.194])
	by spam-gw.ccert.edu.cn (MIMEDefang) with ESMTP id j6ALQwsR008055
	for <han@ccert.edu.cn>; Mon, 11 Jul 2005 05:26:59 +0800 (CST)
Message-ID: <200507110526.j6ALQwsR008055@spam-gw.ccert.edu.cn>
From: =?GB2312?B?wda6ow==?= <qian@163.com>
Subject: =?gb2312?B?1sKjqL6twO0vssbO8aOpytWjug==?=
To: han@ccert.edu.cn
Content-Type: text/plain;charset="GB2312"
Reply-To: qian@163.com
Date: Mon, 11 Jul 2005 05:40:52 +0800
X-Priority: 3
X-Mailer: Foxmail 4.2 [cn]

*******************广州市兴地贸易有限公司*********************

(负责人/经理/财务）您好：
    本公司代理多家公司操作帐务，具有丰富财务经验.可向贵司提供：
（普通销售/服务行业/广告行业/建筑行业/运输行业）发票，只收2%
的税点。若有意，请联系！

            联 系 人：林海
            联系电话：020-31946660    13824444525

承诺：发票一律通过正规手续从税务局办理领购，保证随时查询验证。

本邮件属群发邮件对你造成不便敬请原谅！！

************************欢迎来电咨询****************************

</details>

他们的区别很明显，一种是个人记录的，一种是推销产品的。

最后，还有一个“中文停用词表”，这里“停用词”的含义是：语句中的介词、转折词、语气词等，无法表达语句主要含义的词语。

<details> <summary>中文停用词表节选：</summary>

,
?
、
。
“
”
《
》
！
，
：
；
？
.
(
)
{
}
[
]
<
>
@
+
-
=
*
末##末
啊
阿
哎
哎呀
哎哟
唉
俺
俺们
按
按照
吧
吧哒
把
罢了
被
本
本着
比
比方
比如
鄙人
彼
彼此
边
别
别的
别说
并
并且

</details>

通过中文停用词表，可以对分词之后的文本进行过滤，最后得到有意义的部分，也就是能代表整个语句的特征。

分词释义: 将文本按照预设的语法规则进行分割。举例：

序号	原文	正向最长匹配	逆向最长匹配	双向最长匹配
1	项目的研究	['项目', '的', '研究']	['项', '目的', '研究']	['项', '目的', '研究']
2	商品和服务	['商品', '和服', '务']	['商品', '和', '服务']	['商品', '和', '服务']
3	研究生命起源	['研究生', '命', '起源']	['研究', '生命', '起源']	['研究', '生命', '起源']
4	当下雨天地面积水	['当下', '雨天', '地面', '积水']	['当', '下雨天', '地面', '积水']	['当下', '雨天', '地面', '积水']
5	结婚的和尚未结婚的	['结婚', '的', '和尚', '未', '结婚', '的']	['结婚', '的', '和', '尚未', '结婚', '的']	['结婚', '的', '和', '尚未', '结婚', '的']
6	欢迎新老师生前来就餐	['欢迎', '新', '老师', '生前', '来', '就餐']	['欢', '迎新', '老', '师生', '前来', '就餐']	['欢', '迎新', '老', '师生', '前来', '就餐']

当某个文本拥有类似的特征时，也就能类似的认为，该文本具有相同的结论——比如都是垃圾邮件。

2.2.2 编码实现

代码步骤如下：

1、读取中文停用词表，构造一个过滤字符的字符串数组；
2、读取某个文件，排除文件的非中文部分；
3、对中文文本进行分词，得到一个字符串数组（这就是描述该文件的特征）；
4、生成一个新的文件，存储特征字符串；
5、重复 2 ～ 4 步骤，得到全部文件的特征文件。

笔者原本打算使用 python 代码来表示，但是<a href="/snofly-blog/files/nlp/pythonCode.zip" target="_blank">源代码</a>是 2019 年写，既没有输出中间结果(特征放内存里面了)，又多了模型评估的部分，不太适合本文的节奏，所以现在改用 nodejs 重写一遍。

在 data 文件夹的同级目录下创建 vector 文件夹，并在其中创建 spam 和 normal 文件夹。

在 data 文件夹的同级目录下创建 vector.js 文件。

此时的文件结构是这样的：

➜  emailCode tree -L 2
.
├── data
│   ├── normal
│   ├── spam
│   ├── test
│   └── 中文停用词表.txt
├── vector
│   ├── normal
│   └── spam
└── vector.js

8 directories, 2 files

其中 vector.js 代码如下：

// vector.js
const fs = require("fs");
const iconv = require("iconv-lite");
const path = require("path");
const nodejieba = require("nodejieba");

function filterNonChinese(str) {
  return str.replace(/[^\u4e00-\u9fa5]/g, "");
}

function stringToVector(fileContent) {
  // 构造一个分割字符的字符串数组
  const buffer = fs.readFileSync("./data/中文停用词表.txt");
  const fileText = iconv.decode(buffer, "gbk");
  const stpoWords = fileText.split("\n");

  // 匹配非中文字符并删除
  const fileChineseContent = filterNonChinese(fileContent);
  // 根据 nodejieba 进行分词
  const tokens = nodejieba.cut(fileChineseContent);
  // 根据停用词表进行过滤
  const filteredData = tokens.filter((item) => !stpoWords.includes(item));
  return filteredData;
}

function generateVector(sourceDirPath, outDirPath, stpoWords) {
  const files = fs.readdirSync(sourceDirPath);
  // 遍历每个文件并读取它们的内容

  files.forEach((file, index) => {
    const filePath = path.join(sourceDirPath, file);
    // 读取文件内容
    const buffer = fs.readFileSync(filePath);
    const fileContent = iconv.decode(buffer, "gbk");
    // 获得特征向量
    const data = stringToVector(fileContent);
    // 将结果写入文件中保存
    fs.writeFileSync(path.join(outDirPath, file), data.join("\n"), "utf8");
    console.log(`处理进度：${index + 1}/${files.length}`);
  });
}

function main(params) {
  // 开始分割，输出在 vector 中
  generateVector("./data/normal", "./vector/normal");
  generateVector("./data/spam", "./vector/spam");
}

// 执行一次这个
// main();

module.exports = {
  stringToVector,
};

2.2.3 结果展示

经过处理之后，以 2.2.1 节中的两个文件为例，展示一下输出结果：

<details> <summary>vector/normal 文件 274.txt</summary>

[
  "大三",
  "恋情",
  "维系",
  "三年",
  "越来越",
  "知道",
  "坚持",
  "坚信",
  "最",
  "适合",
  "人",
  "一起",
  "快乐",
  "开学",
  "分开",
  "距离",
  "拉开",
  "美",
  "相信",
  "地久天长",
  "放不下",
  "身为",
  "射手",
  "女生",
  "是不是",
  "有点",
  "名不副实",
  "吵架",
  "时间",
  "居多",
  "怀疑",
  "是否",
  "相爱",
  "是否",
  "在乎",
  "对方",
  "有时候",
  "嘲笑",
  "幼稚",
  "脾气",
  "忍不住",
  "伤害",
  "有时候",
  "佩服",
  "这么久",
  "身边",
  "出现",
  "一些",
  "人",
  "最终",
  "选择",
  "一份",
  "执着",
  "天天",
  "一起",
  "恋人们",
  "真的",
  "幸福",
  "珍惜",
  "坚持",
  "单身",
  "恋人",
  "想",
];

</details>

<details> <summary>vector/spam 文件 793.txt</summary>

[
  "广州市",
  "兴",
  "贸易",
  "有限公司",
  "负责人",
  "经理",
  "财务",
  "您好",
  "公司",
  "代理",
  "多家",
  "公司",
  "操作",
  "帐务",
  "具有",
  "丰富",
  "财务",
  "经验",
  "贵",
  "司",
  "提供",
  "普通",
  "销售",
  "服务行业",
  "广告行业",
  "建筑行业",
  "运输",
  "行业",
  "发票",
  "只",
  "收",
  "税",
  "点",
  "有意",
  "请",
  "联系",
  "联系人",
  "林海",
  "联系电话",
  "承诺",
  "发票",
  "一律",
  "正规",
  "手续",
  "税务局",
  "办理",
  "领购",
  "保证",
  "随时",
  "查询",
  "验证",
  "邮件",
  "属",
  "群",
  "发邮件",
  "造成",
  "不便",
  "敬请原谅",
  "欢迎",
  "来电",
  "咨询",
];

</details>

2.3 模型训练

2.3.1 算法原理回顾

回顾 2.2.3 节中的特征，可以得到一个初步结论：当某个邮件中中，大量含有 spam 中的词语，那么可以认为这个邮件大概率是垃圾邮件；反之同理。

这里引出的一个问题是：这个“概率”该怎么去量化？

我们很自然的想到，邮件中的词语对结果影响的权重是不同的，也就是影响的力度和方向是不同的。

笔者：回顾“向量”的定义，同时具有方向和大小的量。在这个场景中，方向只有两个：是或不是垃圾邮件；而大小则表示对结果影响的权重。

进而想到，我们需要计算特征向量的具体值，从而能够判断输入的邮件最终具有怎样的结果倾向。

那么计算方法是什么？

再回顾 1.1~1.3 节中关于贝叶斯定理的描述。

我们能够基于已有的事实反过来推测它发生的概率：

$$ P(A \mid B) = \frac{P(B \mid A) P(A)}{P(B)} $$

这里直接变换为：

$$ P(是 \mid 特征1) = \frac{P(特征1 \mid 是) P(是)}{P(特征1)} \ P(是 \mid 特征2) = \frac{P(特征2 \mid 是) P(是)}{P(特征2)} \ ... \ ... \ ... \ P(是 \mid 特征n) = \frac{P(特征n \mid 是) P(是)}{P(特征n)} \ $$

于是我们需要计算等式右侧的变量。

再回顾 2 节介绍部分，在 NLP 领域有两个研究方法：基于规则的方法和基于统计的方法。

我们选择基于统计的方法，于是能够“通过频率来模拟概率”。

例如 P(特征 1 | 是) 的值，可以这样假设：

垃圾邮件中，假设全部特征词语有 m 个，特征 1 这个词语有 n 个，也就是出现了 n 次，那么它出现的频率就是 n/m。

所以 P(特征 1 | 是) = n/m 。

数据量越丰富，这个值也就越准确。从这里也可以感受一下大数据的含义。

2.3.2 算法实现

在 data 文件夹的同级目录下创建 train.js 文件。

此时的文件结构是这样的：

➜  emailCode tree -L 2
.
├── data
│   ├── normal
│   ├── spam
│   ├── test
│   └── 中文停用词表.txt
├── train.js
├── vector
│   ├── normal
│   └── spam
└── vector.js

8 directories, 3 files

其中 train.js 代码如下：

// train.js
const fs = require("fs");
const path = require("path");
const { stringToVector } = require("./vector");
const iconv = require("iconv-lite");

/**
 *
 * @param {string} sourceDirPath
 * @param {Map} map
 * @returns
 */
function addMap(sourceDirPath, map) {
  let count = 0;
  const files = fs.readdirSync(sourceDirPath);
  files.forEach((file) => {
    const filePath = path.join(sourceDirPath, file);
    // 读取文件内容
    const fileContent = fs.readFileSync(filePath, "utf-8");
    const words = fileContent.split("\n");
    count += words.length;
    words.map((word) => {
      map.set(word, (map.get(word) ?? 0) + 1);
    });
  });
  return count;
}

// 1、统计得到每个词语出现的次数、总词语个数
const normalWords = new Map();
const spamWords = new Map();
const normalWordsCount = addMap("./vector/normal", normalWords);
const spamWordsCount = addMap("./vector/spam", spamWords);

// 2、朴素贝叶斯算法——计算概率值
function calProb(word) {
  if (!normalWords.has(word) && !spamWords.has(word)) {
    return 0.47;
  }
  const pw_n = normalWords.has(word)
    ? normalWords.get(word) / normalWordsCount
    : 0.01;
  const pw_s = spamWords.has(word)
    ? spamWords.get(word) / spamWordsCount
    : 0.01;
  ps_w = pw_s / (pw_s + pw_n);
  return ps_w;
}

function calBayes(testVector) {
  let ps_w = 1;
  let ps_n = 1;
  testVector.forEach((word) => {
    const prob = calProb(word);
    ps_w *= prob;
    ps_n *= 1 - prob;
  });
  const p = ps_w / (ps_w + ps_n);
  return p;
}

// 3、简单测试
const testVector1 = stringToVector(
  iconv.decode(fs.readFileSync("./data/normal/274.txt"), "gbk")
);
const testVector2 = stringToVector(
  iconv.decode(fs.readFileSync("./data/spam/793.txt"), "gbk")
);
const testVector3 = stringToVector(
  iconv.decode(fs.readFileSync("./data/test/1.txt"), "gbk")
);
const testVector4 = stringToVector(
  iconv.decode(fs.readFileSync("./data/test/8000.txt"), "gbk")
);

console.log(calBayes(testVector1.slice(0, 15))); // 0.00327150967855315
console.log(calBayes(testVector2.slice(0, 15))); // 1
console.log(calBayes(testVector3.slice(0, 15))); // 9.756882688122813e-9
console.log(calBayes(testVector4.slice(0, 15))); // 1

2.3.3 代码解释

函数 calProb

传入参数是一个词语，返回值是一个概率值，表示“这个词语存在时，该邮件更倾向于垃圾邮件，或者更倾向于正常邮件”。

pw_n 表示该词在所有 normal 邮件中出现的频率，如果不存在，设置经验值 0.01； pw_s 表示该词在所有 spam 邮件中出现的频率，如果不存在，设置经验值 0.01； ps_w 表示了一个倾向，经验值为 0.47；

函数 calBayes

传入值是需要判断的邮件的特征向量，返回值是一个概率值，表示“综合来看，该邮件是垃圾邮件的概率”。

测试代码

因为数字计算精度问题，所以只取了一部分看看效果。

3 总结

好啦，到这里告一段落，可以简单总结下。

回顾本文目标：

1 理解朴素贝叶斯算法原理
2 了解基于统计的自然语言处理的原理
3 理解机器学习模型的原理
4 成功完成训练机器学习模型的实践
5 理解并运用模型评价指标(略)

主要内容都已经涉及到了。第 5 部分，可以使用 data 中 test 的数据去测试，它们的文件名称就是标记。

我们可以看到，算法实现部分的代码是相对很少的，更多的是对数据的处理，构造更好的输入。这也侧面说明了，很多人选择使用 python 的原因就是它有非常多好用的数据处理的库。为了说明朴素贝叶斯算法的作用，我们就没有直接调用“贝叶斯库”这样的 API 。

于是，我们可以基于现有的资料，向上包装一些业务代码，构建一个可执行文件。它的输入是邮件文本信息，输出是一个概率值。

最后，我们可以得到一个简单的二分类器（判断是或否），也就是一个机器学习模型了。

Python 基本语法

Wed, 29 May 2019 00:00:00 GMT

前言随笔

2019/5/29/20:25 1.做垃圾邮件分类，老师推荐语言是 Python, 因为书写简单。我们就决定先找资料学会 Python 基本语法，然后学习相关库使用，这里结合学习算法思想，最后综合起来，贯通知识。 2.预期最后效果，小组每人都能独立完成分类器设计与实现。三人分别用三种模型训练，比较效果，有能力改进最好。 3.学习步骤，一，Python 基本语法学习。学习资料目前有：中国大学 mooc《Python 语言程序设计》北京理工大学。

2019/7/6 经过昨天的努力，找到了路径去完成，我原计划明天出结果来着，老师要求今天就出结果，啊，想想就好累。

2022/7/28 当时做完之后好累的，然后文章就没有更新了。关于数据集、算法、模型和评价报告，资料都保留了的，以后有机会做个机器学习的入门教程吧。本文标题也从“综合实训--垃圾邮件分类”改为“Python 基本语法”了。

Python 语言学习笔记

Python 基础认识

==编译==：将源代码一次性转换成目标代码的过程；一次性翻译，之后不再需要源代码（类似英文翻译）。 ==解释==：将源代码逐条转换成目标代码同时逐条运行的过程；每次程序运行时随翻译随执行（类似实时的同声传译）。

执行编译过程的程序叫作==编译器==。执行解释过程的程序叫作==解释器==。

==静态语言==：使用编译执行的编程语言 C/C++语言、Java 语言优势：编译器一次性生成目标代码，优化更充分，程序运行速度更快。 ==脚本语言==：使用解释执行的编程语言 Python 语言、JavaScript 语言、PHP 语言优势：执行程序时需要源代码，维护更灵活；源代码可以跨多个操作系统平台运行。

Python 的两种编程方式 ==交互式==：对每个输入语句即时运行结果，适合语法练习 ==文件式==：批量执行一组语句并运行结果，编程的主要方式

Python 语法元素概述

程序的格式框架 ==缩进== 类似 C 语言中的{}作用，表示一个代码块。人为约定（或规定）缩进格式，一般为一个 Tab。 ==注释== 单行注释：以#开头，其后内容为注释。多行注释：以'''(三个单引号)开头和结尾。 命名与保留字 变量采用标识符(名字) 来表示，关联标识符的过程叫==命名==。命名规则与 C 语言类似，但是不用定义，直接用。 ==保留字==：类似 C 语言中的关键字。（红色表示更有深度） 数据类型 数据类型：字符串、整数、浮点数、列表。 语句与函数 赋值语句分支语句函数 Python 程序的输入输出 ==输入函数 input()==使用格式：<变量> = input(<提示信息字符串>) ==输出函数 print()==：以字符形式向控制台输出结果的函数。 ==评估函数 eval()==：去掉参数最外侧引号并执行余下语句的函数。

Python 数值数据类型

整数类型 1.可正可负，没有取值范围限制； 2.pow(x,y)函数：计算 x^y^，想算多大算多大。

浮点数类型 1.浮点数间运算存在不确定尾数，不是 bug； 2.取值范围数量级约-10307 至 10308，精度数量级 10-16。 3.科学计数法 <a>e<b> 表示 a*10^b^ 4.round(x, d)：对 x 四舍五入，d 是小数截取位数。

复数类型 ……

数值运算操作符 增强操作符及使用用 x op= y 来代替 x = x op y ；可以少写一个 x 。

数值运算函数 ==abs(x)== 绝对值，x 的绝对值； ==divmod(x,y)== 商余，(x//y, x%y)，同时输出商和余数； ==pow(x, y[, z])== 幂余，(x**y)%z，[..]表示参数 z 可省略 ==round(x[, d])== 四舍五入，d 是保留小数位数，默认值为 0； ==max(x1,x2, … ,xn)== 最大值，返回 x1,x2, … ,xn 中的最大值，n 不限 ==min(x1,x2, … ,xn)== 最大值，返回 x1,x2, … ,xn 中的最小值，n 不限 ==int(x)== 将 x 变成整数，舍弃小数部分 ==float(x)== 将 x 变成浮点数，增加小数部分 ==complex(x)== 将 x 变成复数，增加虚数部分

关系三种类型存在一种逐渐"扩展"或"变宽"的关系：整数 ---> 浮点数 ---> 复数

Python 字符串数据类型

==字符串== 由 0 个或多个字符组成的有序字符序列。

字符串表示方法：由一对单引号或双引号表示，仅表示单行字符串；由一对三单引号或三双引号表示，可表示多行字符串。

字符串序号 正向递增序号 0，1，2，3，，，N 反向递减序号 -（N+1），，，-4，-3，-2，-1

字符串使用 索引：返回字符串中单个字符 <字符串>[M] 切片：返回字符串中一段字符子串 <字符串>[M: N] 高级： <字符串>[M: N]，M 缺失表示至开头，N 缺失表示至结尾； <字符串>[M: N: K]，根据步长 K 对字符串切片。

字符串的特殊字符 转义符 \

字符串操作符 字符串处理函数 字符串处理方法

字符串类型的格式化 <模板字符串>.format(<逗号分隔的参数>)

槽的概念：（镶嵌对应内容）更精确的控制：

Python 控制结构

==顺序结构==

==分支结构==

单分支结构 if <条件> : <语句块>
二分支结构一般形式 if <条件> : <语句块 1> else :<语句块 2> 紧凑形式 <表达式 1> if <条件> else <表达式 2>
多分支结构 if <条件 1> : <语句块 1> elif <条件 2> : <语句块 2> …… else :<语句块 N>
条件判断及组合条件判断小于，小于等于，大于等于，大于，等于，不等于。条件组合逻辑与，逻辑或，逻辑非。and,or,not.
程序的异常处理

try :<语句块 1> except : <语句块 2>

try :<语句块 1> except <异常类型> : <语句块 2> （只响应对应类型异常）

try : <语句块 1> except : <语句块 2> else : <语句块 3> finally : <语句块 4> （ finally 对应语句块 4 一定执行）（else 对应语句块 3 在不发生异常时执行）

==循环结构==

遍历循环

for <循环变量> in <遍历结构> : <语句块> （每次循环，所获得元素放入循环变量，并执行一次语句块）

for i in range(N) : <语句块> （遍历由 range()函数产生的数字序列，产生循环）

for i in range(M,N,K) : <语句块> （M，N 是截取始尾，K 是截取步长。）

应用：计数循环(N 次) 计数循环(特定次) 字符串遍历循环列表遍历循环文件遍历循环等等

无限循环 while <条件> : <语句块>
循环控制保留字 ==break==跳出并结束当前整个循环，执行循环后的语句 ==continue==结束当次循环，继续执行后续次数循环
循环的高级用法 ==循环与 else== 当循环没有被 break 语句退出时，执行 else 语句块 else 语句块作为"正常"完成循环的奖励这里 else 的用法与异常处理中 else 用法相似

Python 函数使用

函数的理解与==定义==

def <函数名>(<参数(0 个或多个)>) : <函数体> return <返回值> （函数定义时，所指定的参数是一种占位符）

函数的==参数传递==

def <函数名>() : <函数体> return <返回值> （函数可以有参数，也可以没有，但必须保留括号）

def <函数名>(<非可选参数>, <可选参数>) : <函数体> return <返回值> （函数定义时可以为某些参数指定默认值，构成可选参数）

def <函数名>(<参数>, *b ) : <函数体> return <返回值> （函数定义时可以设计可变数量参数，既不确定参数总数量）

def fact(n, m) : fact( 10,5 ) fact( m=5,n=10 ) （函数调用时，参数可以按照位置或名称方式传递）

函数的==返回值==

函数可以有返回值，也可以没有，可以有 return，也可以没有； return 可以传递 0 个返回值，也可以传递任意多个返回值。（元组类型。）

局部变量和全局变量可以使用 global 保留字在函数内部使用全局变量；局部变量为组合数据类型且未创建，等同于全局变量；
==lambda 函数== <函数名> = lambda <参数>: <表达式> lambda 函数是一种匿名函数，即没有名字的函数；使用 lambda 保留字定义，函数名是返回结果； lambda 函数用于定义简单的、能够在一行内表示的函数。

Python 组合数据类型

集合类型及操作

集合类型定义集合用大括号 {} 表示，元素间用逗号分隔建立集合类型用 {} 或 set() 建立空集合类型，必须使用 set()
集合操作符
集合处理方法
集合类型应用场景包含关系比较数据去重：集合类型所有元素无重复

序列类型及操作

序列类型定义

序列是具有先后关系的一组元素序列是一维元素向量，==元素类型可以不同== 类似数学元素序列： s0, s1, … , sn-1 元素间由序号引导，通过下标访问序列的特定元素

序列处理函数及方法
元组类型及操作

元组是一种序列类型，一旦创建就不能被修改使用小括号 () 或 tuple() 创建，元素间用逗号 , 分隔可以使用或不使用小括号 def func(): return 1,2

列表类型及操作

列表是一种序列类型，创建后可以随意被修改使用方括号 [] 或 list() 创建，元素间用逗号 , 分隔列表中各元素类型可以不同，无长度限制

序列类型应用场景数据表示：元组和列表

Python 字典类型

字典类型定义

==映射==是一种键(索引)和值(数据)的对应 ==键值对==：键是数据索引的扩展字典是键值对的集合，键值对之间无序

采用大括号{}和 dict()创建，键值对用冒号: 表示 <字典变量> = {<键 1>:<值 1>, … , <键 n>:<值 n>} <值> = <字典变量>[<键>] <字典变量>[<键>] = <值> [ ] 用来向字典变量中索引或增加元素

字典处理函数及方法
字典类型应用场景统计数据出现的次数，数据是键，次数是值。

Python 文件使用

文件的类型 文件是数据的抽象和集合文件展现形态：文本文件和二进制文件

==文本文件== 由单一特定编码组成的文件，如 UTF-8 编码由于存在编码，也被看成是存储着的长字符串适用于例如：.txt 文件、.py 文件等

==二进制文件== 直接由比特 0 和 1 组成，没有统一字符编码一般存在二进制 0 和 1 的组织结构，即文件格式适用于例如：.png 文件、.avi 文件等

文件的打开和关闭 文件处理的步骤: 打开-操作-关闭

<变量名> = open(<文件名>, <打开模式>) <变量名>.close()

<变量名> ：文件句柄 <文件名> ：文件路径和名称（源文件同目录可省路径） <打开模式> ：文本 or 二进制，读 or 写 文件内容的读取

<f>.read(size=-1)
#读入全部内容，如果给出参数，读入前size长度
>>>s = f.read(2)

<f>.readline(size=-1)
#读入一行内容，如果给出参数，读入该行前size长度
>>>s = f.readline()

<f>.readlines(hint=-1)
#读入文件所有行，以每行为元素形成列表,如果给出参数，读入前hint行
>>>s = f.readlines()

数据的文件写入

<f>.write(s)
#向文件写入一个字符串或字节流
>>>f.write("中国是一个伟大的国家!")

<f>.writelines(lines)
#将一个元素全为字符串的列表写入文件
>>>ls = ["中国", "法国", "美国"]
>>>f.writelines(ls)
#中国法国美国

<f>.seek(offset)
#改变当前文件操作指针的位置，offset含义如下：
#0 – 文件开头； 1 – 当前位置； 2 – 文件结尾

涉及到的一些第三方库

==jieba 库== 原理：

利用一个中文词库，确定中文字符之间的关联概率
中文字符间概率大的组成词组，形成分词结果
除了分词，用户还可以添加自定义的词组

jieba 分词的三种模式精确模式、全模式、搜索引擎模式

精确模式：把文本精确的切分开，不存在冗余单词
全模式：把文本中所有可能的词语都扫描出来，有冗余
搜索引擎模式：在精确模式基础上，对长词再次切分

常用函数

jieba.lcut(s)
#精确模式，返回一个列表类型的分词结果
>>>jieba.lcut("中国是一个伟大的国家")
['中国', '是', '一个', '伟大', '的', '国家']

jieba.lcut(s,cut_all=True)
#全模式，返回一个列表类型的分词结果，存在冗余
>>>jieba.lcut("中国是一个伟大的国家",cut_all=True)
['中国', '国是', '一个', '伟大', '的', '国家']

jieba.lcut_for_search(s)
#搜索引擎模式，返回一个列表类型的分词结果，存在冗余
>>>jieba.lcut_for_search(“中华人民共和国是伟大的")
['中华', '华人', '人民', '共和', '共和国', '中华人民共和国', '是', '伟大', '的']

jieba.add_word(w)
#向分词词典增加新词w
>>>jieba.add_word("蟒蛇语言")

基于 NB 算法的中文垃圾邮件分类

模型评估

混淆矩阵： T/F(True/False)表示预测是否正确，P/N(Positive/Negative)表示预测的 label 而不是实际的 label。

React 设计原理导论

Fri, 23 May 2025 00:00:00 GMT

0 前言

本文适合具有 react 编码经验的读者，或者熟悉原生 js 的读者。

本文基于 react 18 版本，以“函数组件 + hooks”的形式，介绍 react 的设计思路。

本文是一个初步引导，更多详细的内容，可以参阅书籍《React 设计原理（卡颂）》，也可以进一步阅读源码。

本文目标

1、了解 react 整体设计思路
2、了解主要模块的设计思路
3、了解 react 源码结构

最终期望：读者能够深入对 react 设计的理解，并为后续学习打下基础。

1 正文

1.1 react 整体设计思路

1.1.1 简单的 jsx 代码 🌰

先看一段经典的计数器代码：

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
    </div>
  );
};

显然，这会在页面上显示一个按钮，点击按钮后，数字会加 1。

这里我们可能会回到的一些工作：

组件模块的导入导出
jsx 语法到 js 语法到转换
状态变量的定义与更新
element 的生成、事件加载、dom 挂载、重新渲染

总之，这个组件是能用了。

1.1.2 原生 js 代码 🌰

思考上面的计数器代码，如果用原生 js 代码实现，我们会怎么去实现？

随即我们能够想到，类似这样的代码：

const renderButton = () => {
  let count = 0;
  const button = document.createElement("button");
  button.textContent = `Count: ${count}`;
  button.addEventListener("click", () => {
    count++;
    button.textContent = `Count: ${count}`;
  });
};

const buttonElement = renderButton();
// appendChild(buttonElement)

基本思路是这样的，在点击按钮后，修改按钮的 textContent，从而实现数字的变化。

但是这里存在一些问题：

1、业务逻辑和 dom 操作耦合在一起，无法复用。
2、随着组件的规模的增加，代码会变得非常复杂，难以维护。
3、组件间的状态管理和交互逻辑不易共享和复用。

显然，这样的代码在实际的工程项目中，是不可取的。

1.1.3 react 的工作

我们做这样的实验（可以不用实际编码）：

1、基于 create-react-app 构建一个简单的 react 项目。
2、使用 1.1.1 中的计数器代码，引入到页面中。
3、编译运行。
4、点击按钮，页面中数字变化。

在这个过程中，react 帮我们做了什么？

这里需要分两种情况来讨论：

运行之前 —— 编码打包阶段
运行时阶段

1.1.3.1 运行之前

在运行之前，我们按照 react 的编码规范，完成 jsx 代码的编写（可以是 cra 工具生成的代码框架，也可以是手动修改的代码）。

这时，react 提供了一种 JSX 规范。

接下来，在打包流程中，使用 Babel 工具将 JSX 代码转换为 JavaScript 代码，然后就能在浏览器中运行。

例如：

// 原始 JSX
<button onClick={() => setCount(count + 1)}>Click me</button>;

// Babel 编译后（简化）
React.createElement(
  "button",
  { onClick: () => setCount(count + 1) },
  "Click me"
);

这个转换过程中，由 react 负责定义规则，并提供相关 API，例如 React.createElement 。

1.1.3.2 运行时阶段

转换后的 js 代码就可以直接运行在浏览器的 js 引擎中了。

这些 js 代码，除了业务相关代码，就是工具代码了，例如 react 、 lodash 等。

react 的核心模块代码执行之后，一些函数和对象会被加载到内存里面，在运行时发挥重要作用。

运行时分为两个时期来看待 react 的工作：

1、代码初始化时 —— 负责建立组件层级体系
2、状态更新时 —— 负责响应交互，更新 UI

我们常说的 react 设计原理，就是指这两个时期的代码逻辑。

其中包括了我们常见的一些概念：

fiber
hooks
虚拟 DOM
diff 算法

这些概念设计，在后续章节中会介绍到。

1.1.3.3 初始化时期

浏览器下载 js 代码，在执行 react 的工具代码之后，且在在状态更新之前，这段时间，react 会进行一系列的初始化操作。

这里有两个重要的变化：

1、通过 ReactDom.render() 方法，将组件渲染到页面上。

例如，将一个 App 挂载到指定的 root 元素上：

import React from "react";
import ReactDOM from "react-dom";
const App = () => {
  return <div>Hello World</div>;
};
ReactDOM.render(<App />, document.getElementById("root"));

这里的 App 挂载之后，页面上就能看到 Hello World 了，开发者工具中 Element 里面也能看到这个 div 元素。

2、在内存中加载了很多函数、对象、标记，等待之后使用。

这里比较关键的就是 Fiber Node。

此时，实际上一共会存在三个 App DOM 对象：

其中一个是真实 DOM, 也就是页面中的 root 元素。
另外两个是虚拟 DOM (也称为 Fiber node), 其实本质是相似于真实 DOM 的两个 js 对象，它们只会存在于内存中参与计算。

在真实的 App DOM 生成的时候，会有很多事项要处理：

基于 react 的事件加载机制，为其绑定事件。
如果有状态变量的话，会基于 react 的 hooks 机制，为其生成状态变量。
如果有副作用函数，需要订阅相关的状态变量。

至此，基本的 js 代码执行完成，页面进入一个待更新的状态。

1.1.3.4 更新时期

在状态更新时期， react 会不断推动工作流程的循环：

触发任务——>计算更新——>更新 DOM——>触发任务——>计算更新——>更新 DOM——>循环...

以用户点击计数器按钮为例，触发任务的过程大致如下：

用户点击按钮之后，触发事件
触发 onClick 回调函数
回调函数执行
函数内执行到 setCount() 函数
创建更新任务

到这里，点击事件的同步代码执行过程就结束了，后续是 react 的调度器的工作了。

后续工作流程是这样的：

调度阶段：调度器，根据优先级给出这一帧要执行的任务，给到渲染中心。
渲染阶段：渲染中心，根据当前的虚拟 DOM ，执行更新代码，得到下一帧要更新的虚拟 DOM 。
提交阶段：切换两个虚拟 DOM，使用 diff 算法确定 UI 更新的内容，然后执行 UI 更新。

再然后就是循环了，等待下一次用户操作，或者执行其他低优先级的更新任务。

1.1.4 小结

react 的设计原理，就是指它在运行时是怎么发挥作用的，主要包括初始化和更新两个时期。

我们了解了这些作用后，就能很好的理解我们写的计数器组件代码了。

下面重点介绍运行时阶段的状态更新时期，结合实例，了解 react 在工作流程中的每一步做了什么。

这是一个多模块协同的工作流程，数据在各个模块之间传递、共享。

1.2 初始化时期简介

js 中，一个工具函数被加载到调用栈中执行，它通常会做两件事：

1、进行一些运算；
2、申请一些内存空间。

在 react 的初始化时期，也相当于执行了一个函数，函数中同样会做这两件事。

在申请到的内存空间中，会加载各种模块 —— 一些函数和变量，然后等待更新。

在触发更新时期，这些模块和变量将发挥重要作用。

后文我们以计数器点击过程为例，逐步讲解涉及到的模块，及其相关功能。

我们会主要介绍这些模块的作用：

调度中心
渲染中心
提交中心

在这之前，先简要介绍一些初始化过程中建立的一些变量，因为更新时期会用到它们。

1.2.1 状态注册

初始化的过程中，这句代码做了什么：

const [count, setCount] = useState(0);

1、调用 useState(0)
2、创建一个 Hook 节点

const hook = {
  memoizedState: 0,     // 当前 state
  baseState: 0,         // 用于追踪上次的 state
  queue: {
    pending: null,      // 这里挂的是 Update 链表（setState 生成的 update 就在这里）
    dispatch: ...,      // 就是 setCount 本身
  },
  next: null            // 指向下一个 Hook（useState、useEffect 等）
}

3、把这个 Hook 节点加入当前函数组件对应的 fiber 的 Hook 链表中

如果 Hook 链表不存在，则会创建一个。

4、创建 setCount 函数（dispatch）

function dispatchSetState(action) {
  // 创建 update 对象
  const update = { action, lane, next };

  // 将 update 加入 queue.pending（环形链表）
  // 调用 scheduleUpdateOnFiber(fiber, lane)
}

上面提到的 fiber 是一个树结构的对象，这里面包含了很多属性，其中就有一个 Hook 链表。

fiber 在形式上，就是 DOM 节点在内存中的表示，也称为 Fiber Node，它和真实的 DOM 节点一一对应。

1.2.2 引申的问题：为什么不能在 if 中使用 hook

在函数组件中，不能使用这样的代码：

const [count, setCount] = useState(0);
if (condition) {
  const [num, setNum] = useState(0);
}

这样的代码会导致 Hook 链表的顺序不一致，从而导致状态管理的错误，所以 react 会直接报错。

更深层的原因是：

useState 本身没有“名字”概念，React 不知道你用的是什么变量名；
函数组件每次执行时会重新声明这些变量，变量名只是 JS 层的临时绑定；
链表和顺序，可以准确找到对应的状态；

1.3 更新时期的工作流程

1.3.1 触发更新

用户点击按钮，触发事件。我们来看这个过程：

function onClick() {
  setCount(count + 1);
}

其中只有一句代码，调用了 setCount() 函数，这个函数是 react 的 hooks 机制提供的。

源代码中的类型定义：

function useState<S>(
  initialState: S | (() => S)
): [S, Dispatch<SetStateAction<S>>];

从名称也可以看出，setCount 做的事情是发送(Dispatch)更新操作，而不是直接 change state。

执行这个函数之后，本质上是做了这三件事情：

创建一个更新任务对象（Update）
把任务放入组件的更新队列（Update Queue）
交给调度器（Scheduler）安排“重新渲染一次组件”

所以到这一步执行之后，内存中会多出一个 Update 对象，会由调度器去进一步处理。

Update 对象的结构大概是这样的：

{
  action: newState,      // 或者是一个函数
  next: null,            // 链表结构中的下一个 update
  lane: 优先级标记,
}

这里面的 action 就是用于计算新的 state 的函数。

调度时，如果存在多个更新，那么可能会进行合并。

总之，如果有这样的操作：

setCount(1);
setCount((prev) => prev + 2);

那么会产生这样的更新队列：

Update1: {
  action: 1,
  next: Update2,
  lane: ...
}

Update2: {
  action: prev => prev + 2,
  next: null,
  lane: ...
}

这个更新队列会被放在这个地方：

当前函数组件所对应的 fiber 节点的 memoizedState 属性，所指向的 hook 链表中的第一个 hook 节点的 queue 属性中的 pending 数组中。

举例说明：

如果有这样的代码：

function App() {
  const [count, setCount] = useState(0); // Hook 1
  const [name, setName] = useState("React"); // Hook 2

  return (
    <button onClick={() => setName("Vue")}>
      {count} - {name}
    </button>
  );
}

在执行到两个 hook 声明时，fiber 中会产生这样的变化：

fiber.memoizedState → Hook(count) → Hook(name)

初始化了 Hook 1 和 Hook 2，然后执行了 onClick 函数，产生了更新任务：

fiber.memoizedState → Hook(count=0, queue=null)
                    → Hook(name="React", queue.pending=[update:"Vue"])

如果有新的 UpDate 对象产生，它会被插入到 queue.pending 中。

比如：

fiber.memoizedState → Hook(count=0, queue=null)
                    → Hook(name="React",
                        queue.pending=[
                          update:"Vue"，
                          update:"js",
                          update:(pre)=>{pre+"something"}
                          ]
                        )

最后，把更新任务交给调度器，等待执行进一步处理。

1.3.2 调度器

调度器的核心目标是：按照优先级合理安排组件重新渲染的时间和方式。

如果把调度器理解为一个复杂函数，它的输入是：

Fiber
Lane
UpdateQueue
当前调度状态
当前时间戳
等等

它没有直接的输出，而是产生一些副作用：

标记组件为「有更新」
计算优先级，注册调度任务
启动渲染阶段

回到上面的一个例子，调度中心收到了更新队列，其中包含了两个 Update 对象：

UpdateQueue: Update1 -> Update2

下面看看调度器具体的工作。

1.3.2.1 将组件标记为待更新状态

我们之前提到了，我们在内存中有两个对应于真实 dom 的虚拟 dom。

这两个虚拟 dom 本质就是树结构的对象，我们也可以称其为两个 Fiber Node 。

我们常说的 Fiber 架构，就是基于这种树结构的设计。

首先，看第一个问题：为什么使用两个对象？

答案是：参考双缓存机制，获得极大的性能优化。

进一步，我们可以区分这两个对象：称一个为 current node，另一个为 workInProgress node。

current node 对应于当前的真实 dom ，它作用有两个： 1、渲染阶段，基于它生成 workInProgress node； 2、和真实 dom 作 diff 计算。

workInProgress node 是一个对象，react 将下一帧需要更新的内容，首先应用到这个对象上。

需要实际应用更新的时候，切换一下这两个 node 即可。

基于 Update 对象，调度器能够知道并标记需要更新的组件，然后会向上级组件递归传递，直到 root 节点。

1.3.2.2 计算优先级（Lane 模型）

我们知道，浏览器进程中的 js 线程和 UI 线程是互斥的。

为了防止 js 线程阻塞 UI 线程，在任务量很大时，只能分批执行，于是用到了 react 的优先级系统。

这里介绍一下 Lane 模型：它的本质是许多二进制数字的处理机制。

包括两部分：1、优先级定义——数字的定义；2、合并批量处理——优先级逻辑操作。

比如，不同的操作，优先级是不同的：

const SyncLane = 0b0000000000000000000000000000001; // 同步优先级
const InputContinuousLane = 0b0000000000000000000000000000010; // 连续输入
const DefaultLane = 0b0000000000000000000000000000100; // 默认优先级

{
  action: (count) => count + 1,
  lane: SyncLane, // 代表是“同步更新”，比如点击事件触发的
}

这样就是简单的标记了这个操作的优先级。

回到举例中，调度器标记了更新状态后，还会进一步计算和标记优先级状态。

1.3.2.3 合并更新

如果存在这样的代码：

setCount(1);
setCount(2);
setCount(3);

显然，在调度器中，会合并为一次更新操作，也就只会触发一次下一阶段的处理流程。

更复杂的情况，setCount(p=>p+1)，则会有更多处理的逻辑，本文略过。

小结

至此，调度器的大概工作就介绍完成了。

简单来说，调度器更新了 Fiber node，准备好了全部信息之后，等待下一阶段的执行。

下一阶段，在 react 中称为 render 阶段，中文翻译为渲染阶段，这里的渲染和浏览器中基于 cssom 和 dom 生成渲染树的过程类似。

注意：调度器在当前调度工作完成后，可能还有部分任务没有处理。这些任务，将会等待下一次调度的处理。

1.3.3 render 阶段

renderRoot 是一个纯计算过程，会：

根据旧的 fiber tree；
按顺序遍历每个 Hook
应用 queue.pending 中的 update，生成新的状态
得出新的虚拟 DOM fiber 树（workInProgress node）

至此，调度器的任务完成了，后续就是渲染中心的事。

注意：调度器代码执行期间，浏览器页面并不会发生变化，此时的操作都是内存中对象的修改。

1.3.4 commit 阶段

commit 阶段的整体目标是：

将渲染阶段生成的 fiber 树（workInProgress）中的变更，真正「提交」到浏览器的真实 DOM 中。

也就是说：

渲染阶段只是「算出」要干什么
提交阶段才「真正执行」这些事情：修改 DOM、触发副作用、调用生命周期

此时，内存中存在两个 fiber 树，我们之前提到过，一个是 current node，一个是 workInProgress node。

显然，current node 中的 dom 结构和真实 dom 一致，而 workInProgress node 中的 dom 结构就是下一帧会真实 DOM。

commit 阶段会把 workInProgress node 和 current node 做 diff 计算，得到变化的部分。然后，应用到真实 DOM 中，完成更新。

之后会根据变化的部分，执行生命周期函数和副作用函数。

1.3.4.1 diff 算法

注意之前提到的标记，diff 时能够更具变化标记，支剪大量遍历工作。

diff 算法会检查逐层变了 node，如果没有变化标记，就不再处理。

如果需要修改，则会确定修改的方式：新增、删除、修改。

在这个过程中，react 会根据 key 来选择复用某些节点，减少不必要的操作。

这里有个常见的问题：为什么不能推荐使用数组的 index 来做 key ?

答案是：React 在「列表渲染」中使用 key 来识别每个列表项，区分哪些元素被插入、删除、移动或复用。当数组发生变化（特别是中间插入/删除）时，会导致「错误的复用」，造成页面状态错乱！

1.3.5 小结

commit 之后，页面中的真实 DOM 就会被更新。

这一帧的更新就完成了，之后会等待下一次更新。

值得一提的是：虚拟 DOM 的设计，可以支持跨端。

在 commit 阶段之前的工作，都是在内存中进行的，不涉及具体的环境 —— pc 浏览器或手机屏幕。

于是，利用不同的 commit 工具（react native），既可以把 react 代码应用到其他终端上。

1.4 总结

react 设计原理的核心，是调度器、渲染中心和提交中心这三个核心模块的协同工作。

调度器负责管理更新任务，渲染中心负责计算更新，提交中心负责更新 DOM。

在这个过程中，react 会根据优先级，合并更新任务，提高更新效率。

这就是 react 的设计原理，它是一个复杂的系统，需要不断地学习和探索。

1.5 参考资料

《react 设计原理(卡颂)》
React 官网
chatGpt

浅谈 React 发展史

Fri, 24 Feb 2023 00:00:00 GMT

前言

对了，事情的经过大概是这样的：

所以，为了能够继续水群助人为乐，需要整理一下 React 的发展史。

下面从年份版本、背景故事、特性需求来讲讲 React 是怎么走到今天的。

React 编年史

最完整的历史，当然是在源代码中查看提交记录，这里也有文档说明各个释放版本的更新内容。

下面整理一个表格，列出年份和版本：

| 版本号                        | 版本更新时间   |
| ---------------------------- | ------------ |
| v0.3.0                       | Jul 03, 2013 |
| v0.3.3                       | Jul 03, 2013 |
| v0.4.0                       | Jul 20, 2013 |
| v0.4.1                       | Jul 30, 2013 |
| v0.5.0                       | Oct 20, 2013 |
| v0.5.1                       | Oct 30, 2013 |
| v0.4.2                       | Dec 20, 2013 |
| v0.5.2                       | Dec 20, 2013 |
| v0.8.0                       | Dec 20, 2013 |
| v0.9.0-rc1                   | Apr 19, 2015 |
| v0.9.0                       | Mar 05, 2014 |
| v0.10.0-rc1                  | Apr 19, 2015 |
| v0.10.0                      | Nov 21, 2014 |
| v0.11.0-rc1                  | Apr 19, 2015 |
| v0.11.0                      | Nov 21, 2014 |
| v0.11.1                      | Nov 21, 2014 |
| v0.11.2                      | Nov 21, 2014 |
| v0.12.0-rc1                  | Apr 19, 2015 |
| v0.12.0                      | Nov 21, 2014 |
| v0.12.1                      | Nov 21, 2014 |
| v0.12.2                      | Jan 06, 2015 |
| v0.13.0-rc1                  | Apr 19, 2015 |
| v0.13.0-rc2                  | Apr 19, 2015 |
| v0.13.0                      | Apr 19, 2015 |
| v0.13.1                      | Apr 19, 2015 |
| v0.13.2                      | Apr 19, 2015 |
| v0.13.3                      | Jun 18, 2015 |
| v0.14.0                      | Oct 09, 2015 |
| v0.14.1                      | Oct 29, 2015 |
| v0.14.2                      | Nov 03, 2015 |
| v0.14.3                      | Nov 25, 2015 |
| v0.14.4                      | Jan 07, 2016 |
| v0.14.5                      | Jan 07, 2016 |
| v0.14.6                      | Jan 07, 2016 |
| v0.14.7                      | Jan 29, 2016 |
| v0.14.8                      | Mar 30, 2016 |
| v15.0.0                      | Apr 09, 2016 |
| v15.0.1                      | Apr 09, 2016 |
| v15.0.2                      | Apr 30, 2016 |
| v15.1.0                      | May 21, 2016 |
| v15.2.0                      | Jul 02, 2016 |
| v15.2.1                      | Jul 09, 2016 |
| v15.3.0                      | Jul 30, 2016 |
| v15.3.1                      | Aug 20, 2016 |
| v15.3.2                      | Sep 20, 2016 |
| v15.4.0                      | Nov 16, 2016 |
| v15.4.1                      | Nov 23, 2016 |
| v15.4.2                      | Jan 07, 2017 |
| v15.5.0                      | Apr 08, 2017 |
| v15.5.1                      | May 02, 2017 |
| v15.5.2                      | May 02, 2017 |
| v15.5.3                      | May 02, 2017 |
| v15.5.4                      | May 02, 2017 |
| v15.6.0                      | Jun 14, 2017 |
| v15.6.1                      | Jun 15, 2017 |
| v15.6.2                      | Nov 15, 2017 |
| v16.0.0                      | Sep 27, 2017 |
| v16.1.0                      | Nov 09, 2017 |
| v16.1.1                      | Nov 14, 2017 |
| v16.2.0                      | Nov 29, 2017 |
| v16.3.0                      | Mar 30, 2018 |
| v16.3.1                      | Apr 04, 2018 |
| v16.3.2                      | Apr 16, 2018 |
| v16.4.0                      | May 24, 2018 |
| v16.4.1                      | Jun 14, 2018 |
| v16.4.2                      | Aug 02, 2018 |
| v16.5.0                      | Sep 07, 2018 |
| v16.5.1                      | Sep 14, 2018 |
| v16.5.2                      | Sep 19, 2018 |
| v16.6.0                      | Oct 24, 2018 |
| v16.6.1                      | Nov 07, 2018 |
| v16.6.3                      | Nov 14, 2018 |
| v16.7.0                      | Dec 20, 2018 |
| v16.8.0                      | Feb 06, 2019 |
| v16.8.1                      | Feb 09, 2019 |
| v16.8.2                      | Feb 15, 2019 |
| v16.8.3                      | Feb 22, 2019 |
| v16.8.4                      | Mar 06, 2019 |
| v16.8.5                      | Mar 23, 2019 |
| v16.8.6                      | Mar 28, 2019 |
| v16.9.0-alpha.0              | Apr 04, 2019 |
| v16.9.0-rc.0                 | Aug 06, 2019 |
| 16.9.0 (August 8, 2019)      | Aug 09, 2019 |
| 16.10.0 (September 27, 2019) | Sep 28, 2019 |
| 16.10.1 (September 28, 2019) | Sep 29, 2019 |
| 16.10.2 (October 3, 2019)    | Oct 04, 2019 |
| 16.11.0 (October 22, 2019)   | Oct 23, 2019 |
| 16.12.0 (November 14, 2019)  | Nov 15, 2019 |
| 16.13.0 (February 26, 2020)  | Feb 27, 2020 |
| 16.13.1 (March 19, 2020)     | Mar 20, 2020 |
| 0.14.10 (October 14, 2020)   | Oct 15, 2020 |
| 15.7.0 (October 14, 2020)    | Oct 15, 2020 |
| 16.14.0 (October 14, 2020)   | Oct 15, 2020 |
| 17.0.0 (October 20, 2020)    | Oct 21, 2020 |
| 17.0.1 (October 22, 2020)    | Mar 23, 2021 |
| 17.0.2 (March 22, 2021)      | Mar 23, 2021 |
| 18.0.0 (March 29, 2022)      | Mar 30, 2022 |
| 18.1.0 (April 26, 2022)      | Apr 27, 2022 |
| 18.2.0 (June 14, 2022)       | Jun 15, 2022 |

其中，某些版本需要特别注意，下文会指出。

背景故事

推荐两个视频，其一：《The Story of React》，从宏观上描述了前端技术的发展变化过程，包括 React 的出现。（我觉得值得另写一篇 blog 了，或者补充在这里。）

其二：《React 出现的历史背景及特性介绍》，大致介绍了 React 的出现解决的问题。

React 起源于 Facebook 的内部项目，于 2013 年 5 月开源，之后持续发展。

那么发生了什么事情呢？Facebook 干了啥？

问题的产生

一个小问题：为什么简单的功能也总是出现 BUG？即使 Facebook 的工程师也常遇到。

例如：显示未读消息。

当 BUG 被解决之后，一般人就认为结束了，但是 Facebook 的工程师会思考更多。

问题出现的根源是什么？两个原因：

传统 UI 操作关注太多细节。
应用程序状态分散在各处，难以追踪和维护。

第一个问题：传统 DOM API 关注了太多细节。

解决思路：React 始终整体“刷新”页面，无需关心细节。

/** 情景：原始数据新增时 */
{text:'message1'}，
{text:'message2'}，
------------------
{text:'message3'}，

/** 局部刷新 */
<ul>
  <li>message1</li>
  <li>message2</li>
</ul>
-------------------
// Append:
<li>message2</li>

/** React 整体刷新 */
// 第一步：
{text:'message1'}，
{text:'message2'}，
{text:'message3'}，
// 第二步：
<ul>
  <li>message1</li>
  <li>message2</li>
  <li>message3</li>
</ul>

状态变化时， React 自动刷新，于是就不需要关心细节实现了，而只需要关心状态和最终 UI 。

第二个问题：数据模型如何解决？

传统的 MVC 模型，view 层和 model 层关系复杂。当应用程序变大之后，就难以扩展和维护了。

解决思路：Flux 架构——单线数据流，只关心状态。

基于 Flux 出现的衍生项目：Redux、MobX ，都是优秀的状态管理框架。

著名版本

React 14

当时 React 的版本号是 0.14.X，被称为 “React 14” 。

在 React 0.14 前，浏览器端实现对 jsx 的编译依赖 jsxtransformer.js 。

在 React 0.14 后，这个依赖的库改为 browser.js 。

同时，页面 script 标签的 type 也由 text/jsx 改为 text/babel 。

React 15

Facebook 将 React 的版本号从 0.14 直接跳到 15 ，希望借此提升这个迅猛发展的项目的认可度。

React 15 架构可以分为两层：

Reconciler（协调器）—— 负责找出变化的组件。
Renderer（渲染器）—— 负责将变化的组件渲染到页面上。

特点：React 15 的更新流程是同步执行的，一旦开始更新直到页面渲染前都不能中断。

React 16

React 16 架构可以分为三层：

Scheduler（调度器）—— 负责调度任务的优先级，高优任务优先进入 Reconciler 。
Reconciler（协调器）—— 负责找出需要更新的组件。
Renderer（渲染器）—— 负责将需要更新的组件渲染到页面上。

新特性：

Fiber：将原本的同步更新过程碎片化，避免主线程的长时间阻塞，使应用的渲染更加流畅。
Hooks：解决状态逻辑复用问题——妙极了！（永远的神！）

React 17

作为一个过渡版本，承上启下，作为渐进式框架的首版本，在后续的 18、19 等版本中会进行渐进升级而不是强制进行硬切换。

特点：启发式更新算法。

React16 的 expirationTimes 模型只能区分是否 >=expirationTimes 决定节点是否更新。

React17 的 lanes 模型可以选定一个更新区间，并且动态的向区间中增减优先级，可以处理更细粒度的更新。

React 18

React 18 中的重大更改仅限于几个简单的 API 更改，以及对 React 中多个行为的稳定性和一致性的一些改进，比较重要的一点是，不再支持 IE 浏览器。

新特性：

客户端渲染 API：带有 createRoot() 的 root API，替换现有的 render() 函数，提供更好的人体工程学并启用新的并发渲染特性。
自动批处理：任何情况下都可以合并渲染，如果仍然希望 setState 之后立即重新渲染，只需要使用 flushSync 包裹，或者 async/awit 。
并发渲染器：允许并发渲染，即同时在后台准备多个版本的 UI，这意味着更好的性能和更平滑的状态转换。它提供了三个 API：startTransition()、useDeferredValue()、useTransition()。
服务端渲染：Suspense 可以运行在服务器端，Server Rendering 的性能不再受制于性能最差的组件。

前端技术发展史——React 的故事

对于没有经历过技术衍变（出生较晚或入行较晚）的人来说，入门时，摆在眼前的就是大量的新技术和新名词。

这常常使人感到疑惑：这玩意儿怎么冒出来的？

虽然只要学会运用最新的工具，就足以胜任工作了，但是笔者认为了解历史衍变是非常有必要的：

温故知新：新技术能取代旧技术，必然有其优点。相对的，那些旧技术的出现，也是因为比更早的技术有优势。
推陈出新：技术发展的规律是可以通过历史观察的，那么未来的新技术发展方向也是可以预测的。

下面让我们一起来看看，那过去的故事。

排名现状

先看看关于前端框架的一些统计数据。(数据来源：stateofjs)

1、2022 年前端框架用户调查

2、近几年前端框架的满意度、关注度、使用率、和认知率的排行。

不包含认知率低于 10％的技术。每个百分比定义如下：

满意率：会再次使用 / (会再次使用 + 不会再次使用)
关注率：想学习 / (想学习 + 不感兴趣)
使用率：(将再次使用 + 将不再使用) / 总计
认知率：(总计 - 从未听说过) / 总计

设计思想的变化

React 的诞生不是一蹴而就的，在更早之前存在着一些非常优秀的 JS 框架或库。

在设计思想的不断革新中，React 作为其中一环，出现了。

当热，React 之后也有更新的技术出现。(不断流的思想源泉，真是一件美事啊！)

React 之前

2011 年到 2013 年， jQuery、Backbone、Angular 占领了社区讨论空间。

而 jQuery 则是当之无愧的“天下第一”，是最流行的构建 web 网站的选择。

jQuery 便于操作真实 DOM 树，能够在任意 node 改变另一个 node 的状态。

John Resig (jQuery 创始人) 在 2011 年 6 月接受采访时被问到：对于 jQuery 你最初的目标是什么？<br/><br/> John 回答到：“......我想在 Firefox 开发我的 App，然后它也能在 IE 上运行......我想专注于改自己的 BUG，而不想处理浏览器的差异问题......我写了一点简洁的 API 来支持我写代码......嗯哼......”

但是后来发现 jQuery 最大的祝福也是它最大的诅咒：

它的是依赖共享可变状态的，更新 DOM 状态的简单方法，通常会导致难以预测和追踪的代码出现。

比如，多个 node 都去改变某一个 node 时，那么这段代码就难以维护了。

于是，backbone 闪亮登场!

backbone 引入了 MVC 模式，它是第一个流行的用于 web 构建的 JavaScript 框架。<br/><br/> backbone 允许将应用程序状态和 dom 分离，只要 model 改变，所有关心该 model 的 view 将重新呈现。

当然， MVC 的问题同样严重。

接下来登场的，就是大名鼎鼎的 Angular ！(看图片就有一种随性的感觉了——注意右下脚)

Angular 是用于构建 web app 的一体式框架，号称可以做任何事情，包括双向数据绑定、数据过滤器、路由控制器、依赖注入模板等。

在 2011 年，一个纯粹的前端工程师是稀有物种，因为大多做前端工作的还是悲催的后端工程师。<br/><br/> 所以说，Angular 的强大是对于后端工程师来说的。

看看这个“双向数据绑定”，写法简单明了。

但是 Angular 最大的问题也在于“双向数据绑定”（model 改变时 view 改变，view 改变时 model 改变）。

在实践中，自己手动操作隐式状态改变时，由于双向数据绑定的存在，会导致代码逻辑复杂、难以维护。也会导致新能问题，因为 Angular 要不算扫描代码来寻找状态变化。

React 的出现

前文提到的 jQuery、Backbone、Angular，还有没提到的 canjs、stapes.js、BATMAN.js、Knockout.js、soma.js、Spine.js、Chaplin、Knockback.js 等等，都是基于模型的修改和视图的修改来完成功能的，需要开发人员保证模型和视图的同步。

那么有新的解决思路吗？答案是 React 。

2013 年 7 月，React 团队的工程师经理 Tom Ochino 在 React 介绍会上说道： <br/><br/>我们发现构建视图的最简单的方法是：完全避免突变（直接 dom 操作修改内容），在需要数据变化的时候，直接摧毁视图，再重新渲染一个新的。对开发者来说，这会简单很多，因为只需要关心数据状态的变化。

React 的核心创新在于，使视图成为处理应用程序状态的函数，开发者只需要关心状态的更改，而由 React 来处理其余部分（视图更新等）。

“......没有更多明确的 dom 操作；一切都是申明性的。”—— Pete Hunt (React Core Team, Sep 2013)

使用过 React 的人也能感觉到，组件的使用就像搭积木一样：看起来像积木，用起来像积木，那他就是 React 。

React 之后

技术在发展，React 并非完美无缺。

更新的技术：Next.js, Remix 出现了。

感兴趣可以自行了解。

总结

由于 React 的易用性（吸引新人），以及各种第三方组件带来的强大生态圈（留住老人），目前 React 的地位是难以撼动的。

每个版本都有它的优缺点，新版本不断优化或解决旧版本的问题，这让人对未来感到非常期待！

React Router：单页应用程序实例

Fri, 30 Sep 2022 00:00:00 GMT

前言

译者述

1、原文来自Tania Rascia个人网站上的一篇文章：Using React Router for a Single Page Application。

2、这是一篇较易的入门介绍文章，发布于 2019 年 4 月 25 日。

3、翻译中会尽量遵照原意，也会加入译者的技术注释，以及选择更符合汉语文法的译句。

作者述

React 没有内置的路由器，但是我们很容易通过 react-router-dom 库实现路由。路由是指 web 应用怎样定位资源路径。（如果你知道路由是什么，可以跳过这一段。）

举例：对 Tania 的个人网站，如果访问 taniarascia.com 那么会到达首页，如果访问 taniarascia.com/me 那么会重定向到个人简介。如果再访问 taniarascia.com/categories/java-script 或者 taniarascia.com/categories/front-end 那么会出现文章列表。这些文章的路由就像这样：

/ 根目录
/:page-id 文章
/categories/:category_id 类别

实际上没有 categorie 文件夹，也没有 java-script.html 或者 front-end.html 这样的文件。这里只有一个模板，而路由器知道怎么选择合适的文章。当获取到模板，它就可以从 URL 中提取相关信息，从而知道要显示的内容——例如，java-script 或 front-end 相关的文章。

Tania 的个人网站正好也是单页应用(Single Page Application (SPA))——只有一个页面，每次点击新页面链接会加载额外的 JSON 数据，但是不会重新请求页面资源，比如请求 index.html 或者 about-me.html。

我将向你展示如何使用 react-router-dom 在 React 中设置一个简单的 SPA，并通过 URL 动态获取数据。下面是项目的全部源程序，如果你之后感到迷惑，可以查看。

查看项目源程序

预备知识

阅读 Getting Started with React 或者 Build a React App with Hooks，如果你不知道 React 或者 React Hooks.
阅读 How to Connect to an API in JavaScript，如果你一点也不知道 API 的使用。

创建

创建一个新的 React App。

npx create-react-app router-example

我们的项目有两个依赖——路由：react-router-dom，API 调用：axios。

(译者补充：记得 cd 先进文件，再执行安装依赖的命令。)

npm install react-router-dom axios

或者

yarn add react-router-dom axios

浏览器路由器

为了使用 react-router-dom，我们需要将整个 App 组件包裹在 BrowserRouter 中。这里有两种路由器：

BrowserRouter —— 制作漂亮的 URL，例如 example.com/about 。
HashRouter —— 使用 octothorpe（或 hashtag）制作 URL，例如 example.com/#about 。

这里我们选择使用 BrowserRouter 。

// src/index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.querySelector("#root")
);

(译者补充：结合之前下载的项目，参看并修改。)

路由选择

现在在 App.js 中，我们可以决定想要使用的路由并相应地引导。这次我们要使用 Route 和 Switch 。

Switch - 将所有路由组合在一起，并确保它们从上到下的优先级关系。
Route - 每个独立的路由。

(译者补充：react-router-dom' 从第 6 版开始已经没有 Switch 组件了，改用 Routes 组件，详细参考官方文档。下面的代码除了原文的写法，还有译者测试当前可用的写法。)

// App.js 原文写法
import React from "react";
import { Route, Switch } from "react-router-dom";
// 一会儿要创建这两个页面
import HomePage from "./pages/HomePage";
import UserPage from "./pages/UserPage";

export default function App() {
  return (
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route path="/:id" component={UserPage} />
    </Switch>
  );
}

其他写法

// App.js 新的写法
import React from "react";
import { Route, Routes } from "react-router-dom";
// 一会儿要创建这两个页面
import HomePage from "./pages/HomePage.js";
import UserPage from "./pages/UserPage";

export default function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<HomePage />}>
          <Route path=":id" element={<UserPage />} />
        </Route>
      </Routes>
    </>
  );
}

我们把根路由 / 匹配给 HomePage，把其他页面动态匹配给 UserPage 。对于这个简单的例子，只有一条路由，当然也可以配置更多:

// 原文写法
<Switch>
  <Route exact path="/" component={HomePage} />
  <Route path="/:id" component={UserPage} />
  <Route path="/categories" component={CategoriesPage} />
  <Route path="/categories/:id" component={IndividualCategoryPage} />
</Switch>

其他写法

// 新的写法
<Routes>
  <Route path="/" element={<HomePage />}>
    <Route path=":id" element={<UserPage />} />
    <Route path="categories" component={CategoriesPage}>
      <Route path=":id" element={<IndividualCategoryPage />} />
    </Route>
  </Route>
</Routes>

这样就能让 taniarascia.com/categories 去访问类别列表，让 taniarascia.com/categories/javascript 去访问另一种模板的页面。

Link（链接）

为了链接到 SPA 中的页面，我们使用 Link 。如果我们使用传统的 a 标签指定路由，它将发出一个全新的请求并重新加载页面，因此我们使用 Link 来解决问题。

// src/pages/HomePage.js
import React from "react";
import { Link } from "react-router-dom";

export default function HomePage() {
  return (
    <div className="container">
      <h1>首页</h1>
      <p>
        本站中的<Link to="/test"> test </Link>页面链接
      </p>
    </div>
  );
}

现在我们进入第一个路由，也就是加载首页的 / 根路径，然后就可以看到首页的文本和链接。

动态路由参数

上面的链接指向 /test ，它在路由中匹配 :id 参数。这种情况下，为了动态获取 URL 中的内容，我们使用 props 中的 match.params.id 参数。

我将使用 id 参数来调用 GitHub 接口，以获取相关数据。本例中会用到 Hooks，如果你不熟悉，请参看这篇文章：Building a CRUD App with Hooks 。

// src/pages/UserPage.js
import React, { useState, useEffect } from "react";
import axios from "axios";

export default function UserPage(props) {
  // Setting initial state
  const initialUserState = {
    user: {},
    loading: true,
  };

  // Getter and setter for user state
  const [user, setUser] = useState(initialUserState);

  // Using useEffect to retrieve data from an API (similar to componentDidMount in a class)
  useEffect(() => {
    const getUser = async () => {
      // Pass our param (:id) to the API call
      const { data } = await axios(
        `https://api.github.com/users/${props.match.params.id}`
      );

      // Update state
      setUser(data);
    };

    // Invoke the async function
    getUser();
  }, []); // Don't forget the `[]`, which will prevent useEffect from running in an infinite loop

  // Return a table with some data from the API.
  return user.loading ? (
    <div>Loading...</div>
  ) : (
    <div className="container">
      <h1>{props.match.params.id}</h1>

      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Location</th>
            <th>Website</th>
            <th>Followers</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{user.name}</td>
            <td>{user.location}</td>
            <td>
              <a href={user.blog}>{user.blog}</a>
            </td>
            <td>{user.followers}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

（译者补充：这里的结构有变化，暂时不能运行，只做参考，以后有空再改写为符合新版本的代码。）

总结

如果你感到迷惑，可以看看源代码整体结构。

查看源代码

另外，请注意：如果你想在 GitHub 上使用这个页面，只知道从 you.github.io/repo/:id 导向 /:id 是不够的。如果你想把主机放到在 GitHub 上，并且遇到了问题，那么这篇文章能够帮助到你：hosting your single page app on GitHub Pages 。

（译者补充：翻译不合理之处，欢迎指正。）

React 入门引导：理论概述与示例演练

Tue, 31 May 2022 00:00:00 GMT

前言

译者述

1、原文来自 Tania Rascia 个人网站上的一篇文章：React Tutorial: An Overview and Walkthrough。

2、这篇文章受到 React 官网的推荐，是一篇较易的入门介绍文章，发布于 2018 年 8 月 20 日。

3、翻译中会尽量遵照原意，也会加入译者的技术注释，以及选择更符合汉语文法的译句。

作者述

我刚开始学习 JavaScript 的时候就听说 React 了，但只看了一眼，就觉得惊讶无比。因为我看见它把 HTML 代码和 JavaScript 代码混合在一起，而这不正是我们一直以来需要尽量去避免的吗？所以说，React 到底有什么了不起的地方呢？

一直以来，我专注于学习原生 JS（vanilla JavaScript），并且在职业环境中使用 jQuery 。在经过数次失败挫折之后，我终于成功入门 React ，然后就明白了为什么我会更愿意使用 React ，而不是原生 JS 或者 jQuery 。

下面，我将尽量精简我所学会的知识，汇成一个优质简介，分享给大家。

预备知识

在学习使用 React 之前，你应当知道下面列举的知识。如果你之前从未使用过 JavaScript 或者 DOM 操作，额，我个人建议提前熟悉它们。

需要的知识：

熟悉基本的 HTML 和 CSS
知道基本的 JavaScript 和编程
基本理解 DOM
熟悉 ES6 语法及其特性
了解 Node.js 和 npm 全局安装

本文目标

学习 React 的重要概念和相关术语，例如 Babel, Webpack, JSX, components, props, state, lifecycle 。
创建一个简单地 React 应用，并演示上面的相关概念。

下面是实例应用的源代码和网页实际效果。

什么是 React ？

React 是一个 JavaScript 库，也是最受欢迎的库之一，他在 GitHub 上拥有超过十万的收藏！
React 不是一个框架（与“固执己见”的 Angular 大为不同）。
React 是 Facebook 创建的一个开源项目。
React 被用于在前端构建用户界面(UI)。
React 是 MVC 应用程序中的视图层(MVC: Model View Controller)。

事实上，React 最重要的一点就是，你可以创建组件(components) —— 类似于自定义的、可复用的 HTML 元素，然后借此高效地实现 UI。另一方面，React 通过 state 和 props 大大地简化了数据的存储和处理过程。

我们将在下文讨论这些内容，以及更多其他相关知识。那么，让我们开始吧！

Setup and Installation

有多种使用 React 的方法，这里我将展示其中的两种，以便于你理解到 React 的工作原理。

静态 HTML 文件

这是第一种方法，不过它是一种不受欢迎的写法，而且之后的内容重点也不是它。但是，它可以让你很容易地熟悉和理解 React ——即使你从未使用过 JS 库，比如 jQuery。甚至可以说，如果你一点也不熟悉 Webpack、Babel、Node.js，那么这将是最简单的入门方法。

我们先要创建一个 index.html 文件，然后在 head 元素中加载三个 CDN ：React、React DOM、Babel。之后要写个 div 元素，设置其 id 为 root，最后创建一个 script 标签用来写你自己的代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      // React code will go here
    </script>
  </body>
</html>

在撰写本文时，我正在加载这些库的最新稳定版本。

(译者补充：作者写文时，2018 年 React 是 16 版本，现在 2022 年是 18 版本。对于版本差异，读者暂时不必关心，React 核心思想是不变的。)

React - React 顶层 API React DOM - 提供了一些 DOM 方法 Babel - 一种 JavaScript 编译器，它能让 ES6+ 代码在旧浏览器上运行。

我们的程序入口是 id 为 root 的 div 元素，这是按照规范约定的命名。同时，你也要注意到 test/babel 这种类型，这是使用 Babel 必须的写法。

现在，让我们编写第一个 React 代码块。它将使用 ES6 的类来创建 React 组件，命名为 APP。

class App extends React.Component {
  //...
}

现在，我们添加 render() 方法，这是类组件中惟一强制要求实现的方法，它将用于渲染 DOM 节点。

class App extends React.Component {
  render() {
      return (
          //...
      );
  }
}

在 return 中，我们将放入一个好像 HTML 元素的东西。注意，这里并不是返回的字符串，所以不用引号来包裹元素。这种写法就被称为 JSX，后续我们将学习更多的相关知识。

（译者补充：传统 JS 代码，是基于字符串拼接来生成 HTML 代码，相当于一直在做字符串处理。JSX 中，直接在 JS 代码中插入有意义的 HTML 元素，这样的写法理解起来更直观。）

class App extends React.Component {
  render() {
    return <h1>Hello world!</h1>;
  }
}

最后，我们使用 ReactDOM.render() 方法，将我们创建的 App 类渲染到 HTML 的 root div 中。

ReactDOM.render(<App />, document.getElementById("root"));

下面是 index.html 的完整代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      class App extends React.Component {
        render() {
          return <h1>Hello world!</h1>;
        }
      }

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

现在在浏览器中浏览 index.html，你将看到我们创建的 h1 标签被渲染到了 DOM 中。

妙啊！

现在你完成这个代码，就能发现 React 入门并不是一样难以做到的事。它只是加载了一些 JS 库到我们的 HTML 中嘛。

（译者补充：可能有人觉得上面的代码很奇怪：在 HTML 代码里面放 JS 代码，再在 JS 代码里面放 HTML 代码，那为什么不直接写个 HTML 代码呢？想必聪明的你已经体会到了，当然是为了兼顾灵活性和可读性。到最后，一般的程序开发，就能像搭积木一样简单。）

到此为止的内容，都是为了简单演示。从下面开始，我们将使用另一种方法：Create React App。

Create React APP

上面使用的方法——将 JavaScript 库加载到静态 HTML 页面并动态渲染 React 和 Babel，效率不高且难以维护。

幸运的是， Facebook 做了一个好东西：Create React APP，它是一个预先配置完善的 React app 构建环境。它构建了一个热更新的开发环境服务器；通过 Webpack 来自动编译 React、JSX、ES6 代码；自动增加 CSS 文件的前缀；使用 ESLint 来测试代码和警告其中的问题。

（译者补充：这里可以简单理解为，有一个程序，自动帮你配置了各种依赖，减少了手动配置的麻烦。）

在你的终端运行以下命令，将会在当前目录下生成一个新的文件夹 react-tutorial，其中就是项目内容。

$ npx create-react-app react-tutorial

等待完成之后，进去到新的文件夹中，开始启动项目。

$ cd react-tutorial && npm start

一会儿之后，你的浏览器就会弹出新窗口，现实如下页面。

Create React App is very good for getting started for beginners as well as large-scale enterprise applications, but it's not perfect for every workflow. You can also create your own Webpack setup for React.

(译)Create React App 非常适合初学者的入门，以及大型企业应用程序的开始，但它并不适合每个工作情况。所以，你还可以为 React 自定义 Webpack 设置。

观察项目结构，你可以看到 /public 目录和 /src 目录，还有常规的 node_modules、.gitignore、README.md、package.json。

在 /public 中，最重要的文件是 index.html，它和前文中提到的静态 index.html 文件很像，都是一个 root div。不过这次，没有在文件中加载任何的依赖库和 script 标签。

在 /src 中，将会包含全部的 React 代码。

为了观察 React 代码的自动化编译与更新，在 /src/App.js 文件中找到这句话:

Edit <code>src/App.js</code> and save to reload.

然后随便写点字替换它，再然后保存文件，你就能看到 localhost:3000 中刷新了。

（译者补充，React 16 中的这句话是：To get started, edit src/App.js and save to reload. 而在 React 18 中，这句话是：Edit <code>src/App.js</code> and save to reload.）

现在，让我们删除 /src 目录下的全部文件，因为我们将要创建自定义的模板——非常简洁，只有 index.css 和 index.js 文件。

对于 index.css 文件，我就直接复制粘贴来自 Primitive CSS 的内容。当然，如果你想，也可以使用 Bootstrap 或者别的什么 CSS 框架，或者干脆什么都不写。我只是觉得这个更容易使用。

对于 index.js 文件，我们导入 React、ReactDOM，以及 CSS 文件。

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

让我们再来创建 App 组件。之前，我们只是写了一个 h1 标签，现在添加一个 div 元素包裹 h1 标签，并设置 div className=“App”。值得注意的是，我们使用 className 代替了 class。这是一个小提醒，说明这里的代码本质上是 JavaScript，而不是单纯的 HTML。

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    );
  }
}

最后，像之前一样，我们渲染 App 组件到 root div 中。

ReactDOM.render(<App />, document.getElementById("root"));

这里是 index.js 的完整代码。这次我们直接导入了 Component，所以就不需要再写 React.Component 了。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./index.css";

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

在 localhost:3000 网页上，你就能看到"Hello, React!" 了。就像之前一样，我们实现了一个简单的 React app。

React Developer Tools

有一个浏览器扩展，叫做 React Developer Tools，它能让你更轻松地使用 React。下载 React DevTools for Chrome ，或者在其他你更喜欢的浏览器里面下载。

安装之后，打开浏览器开发工具 F12，你能在 tab 列中看到 React。点击一下，你就能够在编写组件时进行检查。你也可以在 Elements 中查看实际的 DOM 输出。现在看起来用处不大，但是当 app 变得越来越复杂的时候，它就越来越有必要去使用了。

(译者补充：React Developer Tools 版本可能出现了大的变化，安装插件后，在 F12 的 tab 列中，没有 React ，而是 Component 以及 Profiler。所以这里图片有两张，一张是原文原图，一张是译者测试的图片。另外需要注意的是， React 18 中 render 用法发生改变，旧的写法会引发警告。)

此时此刻，我们已经拥有了真正开始使用 React 所需的全部工具和设置。

JSX: JavaScript + XML

如你所见，我们在 React 代码中编写的好像是 HTML，但它并不是正经的 HTML，而是 JSX，即 JavaScript XML。

使用 JSX，我们可以编写类似 HTML 的内容，还可以创建和使用自定义的类 XML 便签。下面是 JSX 变量赋值语句。

const heading = <h1 className="site-heading">Hello, React</h1>;

编写 React 代码并不一定要使用 JSX。引擎底层的实现，是通过 createElement 方法来创建标签、属性、子组件的，之后渲染它们。下面的代码具有相同的输出结果。

const heading = React.createElement(
  "h1",
  { className: "site-heading" },
  "Hello, React!"
);

事实上，JSX 更像 JavaScript 而不是 HTML，这里有一些编写代码时候需要注意的关键性差异：

在 CSS 类名指定时，className 被用来替换 class ，因为在 JavaScript 中 class 是关键字。
在 JSX 中的属性和方法采用小驼峰命名法，比如 onclick 变为 onClick。
自闭合标签必须使用斜杠结尾，例如 < img />

JavaScript 代码自然也能被嵌入 JSX 中，使用花括号{}就能嵌入变量、函数、属性。

const name = "Tania";
const heading = <h1>Hello, {name}</h1>;

JSX 创建和添加元素（大部分）比原生 JS 更容易理解和使用，这也是人们喜欢他的理由之一。

组件 (Components)

目前为止，我们只创建了一个组件：APP。几乎所有 React 组件可以分为两种：类组件（class components）和简单组件（simple components）。

大多数 React app 都包含了很多小组件，并且他们都会在 App 组件中被加载。小组件们拥有它们自己的文件，下面让我们一起来升级改造我们的项目吧。

jiang index.js 中的 App，如下所示：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";

ReactDOM.render(<App />, document.getElementById("root"));

接着新建一个文件 App.js，将组件放到这里：

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    );
  }
}

export default App;

我们导出 App 组件，然后在 index.js 中加载。将组件分离到其他文件里面，这并不是强制性的，但是如果你不这样做，一个应用程序就会变得非常臃肿且难以维护。

类组件（class components）

现在创建另一个组件，计划是做个表格组件。现新建一个 Table.js 文件，然后把下面的代码贴上去。

import React, { Component } from "react";

class Table extends Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Job</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Charlie</td>
            <td>Janitor</td>
          </tr>
          <tr>
            <td>Mac</td>
            <td>Bouncer</td>
          </tr>
          <tr>
            <td>Dee</td>
            <td>Aspiring actress</td>
          </tr>
          <tr>
            <td>Dennis</td>
            <td>Bartender</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

export default Table;

这就是我们创建的自定义类组件，它用大写字母开始，以区别于一般的 html 元素。回到 App.js 中，我们加载 Table 到里面。第一步是引入 Table ：

import Table from "./Table";

然后是在 App 的 render() 方法中加载它，就是之前写 “Hello, React!” 的地方。当然，也可以把 className 改为 container。

import React, { Component } from "react";
import Table from "./Table";

class App extends Component {
  render() {
    return (
      <div className="container">
        <Table />
      </div>
    );
  }
}

export default App;

最后回到运行环境中，在浏览器中就可以看到 Table 被加载了出来。

现在，我们已经见识了自定义类组件是什么东西了。我们可以多次复用这个组件，但是，因为里面的数据是写死的，所以其实也没什么用。

简单组件（simple components）

另一种 React 组件就是简单组件，其本质是一个函数，所以这种组件不需要使用关键字 class。现在让我们改造 Table，在里面做两个简单组件：一个表格标题、一个表格内容。

我们使用 ES6 的箭头函数来创建这些简单组件。首先，是表格标题。

const TableHeader = () => {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Job</th>
      </tr>
    </thead>
  );
};

然后是表格内容。

const TableBody = () => {
  return (
    <tbody>
      <tr>
        <td>Charlie</td>
        <td>Janitor</td>
      </tr>
      <tr>
        <td>Mac</td>
        <td>Bouncer</td>
      </tr>
      <tr>
        <td>Dee</td>
        <td>Aspiring actress</td>
      </tr>
      <tr>
        <td>Dennis</td>
        <td>Bartender</td>
      </tr>
    </tbody>
  );
};

现在我们的 Table 如下所示。注意，TableHeader 和 TableBody 组件在同一个文件中，都是被 Table 类组件使用的。

const TableHeader = () => { ... }
const TableBody = () => { ... }

class Table extends Component {
  render() {
    return (
      <table>
        <TableHeader />
        <TableBody />
      </table>
    )
  }
}

最后结果应该和之前一样。注意观察，组件是可以被嵌套在其他组件中的，并且简单组件和类组件可以混合使用。

A class component must include render(), and the return can only return one parent element.

(译) 一个类组件必须包含 render() 方法，并且 return 返回的最外层父元素只能有一个。

(译者补充：React 18 版本有较大变化，不用 render() 方法)

最后总结一下类组件和函数组件的区别。

/** Simple Component */
const SimpleComponent = () => {
  return <div>Example</div>;
};

/** Class Component */
class ClassComponent extends Component {
  render() {
    return <div>Example</div>;
  }
}

注意，如果 return 只有一行，就可以不用括号。

Props

现在，我们有了一个漂亮的 Table 组件，但是它的数据是硬编码的。React 的一大优化就是数据的处理，通过属性 props 和状态 state 来实现。接下来，我们将重点关注 props 中的数据处理。

首先，将 TableBody 中的数据移除。

/** src/Table.js */
const TableBody = () => {
  return <tbody />;
};

然后把数据都放到一个数组对象里面，就像自定义了一个 JSON 格式参数的 API。这个数组对象需要放在 render() 方法里面。

/** src/App.js */
class App extends Component {
  render() {
    const characters = [
      {
        name: "Charlie",
        job: "Janitor",
      },
      {
        name: "Mac",
        job: "Bouncer",
      },
      {
        name: "Dee",
        job: "Aspring actress",
      },
      {
        name: "Dennis",
        job: "Bartender",
      },
    ];

    return (
      <div className="container">
        <Table />
      </div>
    );
  }
}

现在，我们通过 Table 组件的元素特性将数据传到 Table 组件里面，这种传数据的用法类似 HTML5 中的 data-* 属性。

这个元素特性的命名是任意的，只要不与关键字重复即可，所以这里使用自定义的 characterData。

传递的数据是一个变量 characters，所以需要用花括号包裹起来——其本质上是作为一个 JavaScript 表达式存在的。

/** src/App.js */
return (
  <div className="container">
    <Table characterData={characters} />
  </div>
);

现在数据已经从外面开始传入 Table，那么就需要从里面接收数据。

/** src/Table.js */
class Table extends Component {
  render() {
    const { characterData } = this.props;

    return (
      <table>
        <TableHeader />
        <TableBody characterData={characterData} />
      </table>
    );
  }
}

这时打开 React 开发工具检查 Table 组件，你就能在其 props 中看到数组数据。这些数据是被存储在虚拟 DOM(virtual DOM) 中，这时一种快速同步数据到实体 DOM 方法。

此时数据还没有放到实际的 DOM 中。在 Table 中，我们可以通过 this.props 访问全部的属性。当然，这里只用到一个属性：characterData，所以我们使用 this.props.characterData 来取得那个数据。

我将使用 ES6 的结构方式来创建一个变量，用于包含 this.props.characterData 。

const { characterData } = this.props;

因为 Table 组件包含两个更小的简单组件，所以需要再次通过 props 将数据传递到 TableBody 中。

/** src/Table.js */
class Table extends Component {
  render() {
    const { characterData } = this.props;

    return (
      <table>
        <TableHeader />
        <TableBody characterData={characterData} />
      </table>
    );
  }
}

现在，在 TableBody 中没有参数，并且它也只返回了一个标签。

/** src/Table.js */
const TableBody = () => {
  return <tbody />;
};

我们将通过函数参数来传递 props，然后通过数组映射来返回构造

我们将 props 作为函数参数传递，并通过数组映射以返回数组中每个对象的表行。该映射将包含在 rows 变量中，我们将其作为表达式返回。

（译者补充：如果不知道 map 语法，建议先点击“数组映射”链接看看。这里相当于简化了一个循环拼接 HTML 元素的过程。）

/** src/Table.js */
const TableBody = (props) => {
  const rows = props.characterData.map((row, index) => {
    return (
      <tr key={index}>
        <td>{row.name}</td>
        <td>{row.job}</td>
      </tr>
    );
  });

  return <tbody>{rows}</tbody>;
};

现在去查看 app 的前端运行效果，就能看到数据加载了。

值得注意的是，我在每个表行中都加了 key。你也应该在生成 React 的列表时使用 keys，以便于区分每个列表条目。当我们想要操作列表条目时，key 就是必要的了。

在 React 组件中传递存在的数据，props 是一种高效的方式，然而组件不能修改只可读的 props。在下个章节，我们将学习使用状态(state) 来进一步控制 React 中的数据处理。

State

现在，我们已经将数据存储在一个数组变量中，并通过 props 传参。这样很容易使用，但是试想一种场景：如果我们想要删除数组中的条目呢？通过 props 我们得到了一个单向数据流；而通过 state 我们可以更新组件内部的私有数据。

你可以将 state 想象成这数据：能够被保存和修改，但是又不存入数据库。举个例子，在购物车中添加或删除物品，还没有进行结算提交。

(译者补充：简单理解为一种临时变量。)

为了说明入门，我们现创建一个 state 对象。

class App extends Component {
  state = {};
}

这个对象中要包含所有你想要存储的变量，这里就是 characters。

class App extends Component {
  state = {
    characters: [],
  };
}

移动实际的数据对象到 state.characters 中。

class App extends Component {
  state = {
    characters: [
      {
        name: "Charlie",
        // the rest of the data
      },
    ],
  };
}

这样数据就被包含在 state 中。因为我们想能够移除表格中的数据，所以在 App 中创建一个 removeCharacter 方法。

在 removeCharacter 中，为了取得相关数据，我们依然使用结构的方式，获得 this.state.characters。为了更新 state，我们使用 this.setState()，它是一种操作 state 的内置方法。最后基于传入的索引参数过滤数组，获取并返回一个新的数组。

You must use this.setState() to modify an array. Simply applying a new value to this.state.property will not work.

（译）你必须使用 this.setState() 来修改数组。简单地为 this.state.property 赋新值是无效的。

（译者补充：简单来说：通过内置方法来改值，不能直接写等号赋值。）

/** src/App.js */
removeCharacter = (index) => {
  const { characters } = this.state;

  this.setState({
    characters: characters.filter((character, i) => {
      return i !== index;
    }),
  });
};

filter 方法不会改变原来的数组，而是返回一个新的数组，它是 JavaScript 中修改数组的首选方法。上面这个特定的方法中，检测比较 index 和数组中的所有索引，然后返回了所有符合条件的索引。

现在，我们需要通过组件传递函数，然后在每行的后面渲染一个按钮，点击它可以调用这个函数。这里将 removeCharacter 作为 prop 传递到 Table 中。

/** src/App.js */
render() {
  const { characters } = this.state

  return (
    <div className="container">
      <Table characterData={characters} removeCharacter={this.removeCharacter} />
    </div>
  )
}

因为还需要将参数从 Table 传递到 TableBody 中，所以再来一次通过 prop 传值，和前文一样。

另外，在我们的项目中，只有 App 和 Form 两个组件拥有自己的 state，所以 Table 类组件最好转为简单组件。

/** src/Table.js */
const Table = (props) => {
  const { characterData, removeCharacter } = props;

  return (
    <table>
      <TableHeader />
      <TableBody
        characterData={characterData}
        removeCharacter={removeCharacter}
      />
    </table>
  );
};

下面就是 removeCharacter() 方法中我们定义的索引的来源。在 TableBody 组件中，我们传递 key/index 参数，所以 filter 函数知道那个条目是需要移除的。我们创建一个按钮 onClick 来传递这个参数。

/** src/Table.js */
<tr key={index}>
  <td>{row.name}</td>
  <td>{row.job}</td>
  <td>
    <button onClick={() => props.removeCharacter(index)}>Delete</button>
  </td>
</tr>

The onClick function must pass through a function that returns the removeCharacter() method, otherwise it will try to run automatically.

（意译）onClick 函数必须传入一个函数作为参数，且这个函数是返回的 removeCharacter() 方法，否则，如果直接传入 removeCharacter() 方法给 onClick，则会自动执行一次。观察下面两行代码的区别
<button onClick={() => props.removeCharacter(index)}>Delete</button>
<button onClick={props.removeCharacter(index)}>Delete</button>
后者在项目运行之后，会自动执行一次；前者只有在点击按钮的时候才会执行。

妙极了，现在我们有了 delete 按钮，然后就可以修改 state 来删除数据了。

删除 Mac. 试试。

现在你应该理解 state 的初始化和修改了吧。

表单数据提交

现在我们将数据存储在了 state 中，并且可以移除其中的任意条目。然而，如果我们想要添加新的条目呢？在一个实际的项目中，大概率是从一个空的 state 开始，然后往里面添加数据，例如任务手账或者购物车。

首先，移除 state.characters 中的硬编码数据，然后通过表单来更新数据。

class App extends Component {
  state = {
    characters: [],
  };
}

然后在新文件 From.js 中创建一个 Form 组件。

我们将 Form 的初始值设置为空属性对象 initialState，并将其配给 this.state。

import React, { Component } from "react";

class Form extends Component {
  initialState = {
    name: "",
    job: "",
  };

  state = this.initialState;
}

Previously, it was necessary to include a constructor() on React class components, but it's not required anymore.

（译）以前在 React 类组件中，必须包含 constructor() 方法，但是现在不用了。

（译者补充：这个可能是版本不一样，但是构造函数还是挺有用的）

我们这个表单的目标是，每当一个表单中的字段发生变化时，能够更新 Form 的 state，然后在提交时，所有数据都要传到 App state 中并更新 Table。

首先，创建一个函数，一旦发生了输入改变，它就会执行。这个事件被传递，然后通过设置 Form state 来获得输入的 name(key) 和 value。

/** src/Form.js */
handleChange = (event) => {
  const { name, value } = event.target;

  this.setState({
    [name]: value,
  });
};

在提交表单之前，需要完成下面的事情。在 render 中，获取 state 中的两个属性，并将他们作为 value 分配给对应的表单 key。将 handleChange() 作为 input 的 onChange，最后导出 Form 组件。

render() {
  const { name, job } = this.state;

  return (
    <form>
      <label htmlFor="name">Name</label>
      <input
        type="text"
        name="name"
        id="name"
        value={name}
        onChange={this.handleChange} />
      <label htmlFor="job">Job</label>
      <input
        type="text"
        name="job"
        id="job"
        value={job}
        onChange={this.handleChange} />
    </form>
  );
}

export default Form;

在 App.js 中，我们可以在表格的下方渲染表单。

import Form from "./Form";

return (
  <div className="container">
    <Table characterData={characters} removeCharacter={this.removeCharacter} />
    <Form />
  </div>
);

观察前端运行效果，会发现此时还没有提交按钮。更新表单字段，你会发现本地的 From 也被更新。

好极了！最后一步就是提交表单，然后更新父组件状态。我们在 App 组件中创建一个 handleSubmit() 方法，用来更新 App 的 state，数据来自原有的 this.state.characters 以及新添加 character 参数，这里用到了 ES6 扩展运算符。

handleSubmit = (character) => {
  this.setState({ characters: [...this.state.characters, character] });
};

然后确保把这个函数参数传递到了 Form 中。

<Form handleSubmit={this.handleSubmit} />

在 Form 组件中，创建一个 submitForm() 方法，由它来调用 handleSubmit() 并传参，实参就是 Form 中的 state ，形参就是前面定义的 character。之后，它会重置 state 为初始值，相当于表单重置。

submitForm = () => {
  this.props.handleSubmit(this.state);
  this.setState(this.initialState);
};

最后，我们添加一个表单提交按钮。注意，这里使用 onClick 而不是 onSubmit，因为我们并不使用标准的提交函数。这个点击事件会调用自定义的 submitForm 函数。

<input type="button" value="Submit" onClick={this.submitForm} />

大功告成！这样 app 就已经完成啦，我们可以创建和删除表格中的数据。因为 Table 和 TableBody 已经获取到了数据，所以会直接展示出来。

如果你不知所措，没有跟上，可以查看Github 中的源代码。

（译者补充：强烈建议初学者，一步一步修改到最终版，而不是直接使用最后的代码运行。）

Pulling in API Data

（译者补充：这一节看不懂，不用纠结，可以略过。）

React 有一个很常见的用法，就是从 API 中提取数据。如果你不熟悉 API 的概念或者不知道怎么链接 API，我推荐你阅读这篇文章：How to Connect to an API with JavaScript，它会让你知道什么是 API 以及怎样用原生 JavaScript 调用它。

（译者补充：关于 API，网上随便找几篇文章对照着看，简单了解下就行了。）

做个小测试，我们新建一个 Api.js 文件，然后创建一个新的 App。Wikipedia API 是一个公共接口，我们可以用来测试。这里有个 URL 可以用来做测试，直接点击这个链接，看看效果，如果用 JSONView 插件可以好看一点。

（译者补充：维基百科是不能直接打开的，嗯。）

我们计划使用 JavaScript 内置的 Fetch 方法从 URL 终端获取数据并展示。通过改变 index.js 中的 App 引入路径（例如：import App from './Api'），你可以在我们之前创建的 app 和这个测试的 app 之间切换。

我不会逐行解释这段代码，因为我们前面学过了通过 state 数组创建组件、渲染和映射。这里新的知识点是 componentDidMount()，它是 React 生命周期里面的方法，而生命周期是指 React 中的某些特定方法的执行顺序。挂载（Mount）是指某个条目被插入到 DOM。

当我们获取 API 的数据时，我们会选择使用 componentDidMount，因为我们想要确保组件在获取数据之前就被渲染出来。下文中，你将看到如何从 Wikipedia API 中引入数据，并将其显示在页面上。

/** src/Api.js */
import React, { Component } from "react";

class App extends Component {
  state = {
    data: [],
  };

  // Code is invoked after the component is mounted/inserted into the DOM tree.
  componentDidMount() {
    const url =
      "https://en.wikipedia.org/w/api.php?action=opensearch&search=Seona+Dancing&format=json&origin=*";

    fetch(url)
      .then((result) => result.json())
      .then((result) => {
        this.setState({
          data: result,
        });
      });
  }

  render() {
    const { data } = this.state;

    const result = data.map((entry, index) => {
      return <li key={index}>{entry}</li>;
    });

    return <ul>{result}</ul>;
  }
}

export default App;

在本地环境中运行，你就能看到 API 的数据被展示在了 DOM 中。

还有其他生命周期方法，但对它们的介绍超出了本文的范围。您可以在此处阅读有关 React 组件的更多信息。

构建和部署 React 应用

(译者补充：如果这一节看不懂，不必纠结，略过即可。这些内容，重要但不急迫，需要各种基础知识和经验，才能更好地理解这一部分内容。)

到目前为止，我们所做的一切都是在开发环境中进行的：编译、热加载、实时更新。在实际生产中，我们将希望加载的是最后的静态文件，也就是不需要源代码来编译。这个可以通过构建和部署来实现。

现在，如果你想要编译所有的 React 代码，然后把它放到根目录的某个地方，你需要运行这个命令：

npm run build

这会创建一个 build 文件夹来存放你的 app，其中的内容可以放到任何地方，然后就完成了！

我们还可以更进一步，用 npm 将它部署到某处。我们计划创建一个 GitHub 网页，所以你需要熟悉 Git ，然后将你的代码上传到 GitHub 中。

确保你已经退出本地运行环境，也就是代码没在运行。首先，在 package.json 中添加 homepage 字段，这个 URL 是我们想让这个 app 运行的地址。

/** package.json */
"homepage": "https://taniarascia.github.io/react-tutorial",

然后添加这两行到 package.json 的属性 scripts 中。

"scripts": {
  // ...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

在项目中，添加 gh-pages 包来到开发依赖中。

npm install --save-dev gh-pages

我们创建 build 静态文件，它能完成全部的编译。

npm run build

最后部署到 gh-pages 。

npm run deploy

完成！在 https://taniarascia.github.io/react-tutoria 中就能查看 app 了。

总结

本文应该很好地介绍了 React、简单组件、类组件、state、props、使用表单数据、从 API 中提取数据、部署应用程序。关于 React 的学习和使用，还有很多很多内容，但我希望你现在已经有一定信心，继续研究和运用 React 。

如果有任何不清楚的地方，或者想在这篇文章或后续文章中看到什么，请告诉我。

（译者补充：翻译不合理之处，欢迎指正。）

Redux 入门引导：理论概述与示例演练

Tue, 08 Aug 2023 00:00:00 GMT

前言

译者述

1、原文来自 Tania Rascia 个人网站上的一篇文章：Redux Tutorial: An Overview and Walkthrough。

2、这是一篇较易的入门介绍文章, 发布于 2020 年 3 月 9 日。

3、翻译中会尽量遵照原意, 也会加入译者的技术注释, 以及选择更符合汉语文法的译句。

正文

作者述

你有使用 React 的经验吗?你是否听说过 Redux, 但是因为它看起来很复杂且没有合适的入门指南而推迟学习？如果这是你的情况, 那么这篇文章正适合你。放下恐惧, 和我一起开始这段不算痛苦的学习旅程吧。

预备知识

对本文教程, 你必须已知如何使用 React, 我不会解释任何 React 方面的知识。

熟悉 HTML 和 CSS
熟悉 ES6 语法和特性
了解 React 术语：JSX, State(状态), Components(组件), Props, Lifecycle(生命周期) 以及 Hooks
了解 React Router
了解异步 JS 和创建 API 调用

另外, 可以下载 Redux 开发工具：谷歌浏览器插件或者火狐浏览器插件。

本文目标

在本文中, 我们会新建一个小的 blog app, 它会从一个 API 中获取文章和评论。我曾经通过普通版本的 Redux 和Redux Toolkit (RTK, 官方认可的 Redux 工具集) 创建过一个相同的 app。以下是普通版和 RTK 版的源代码和演示的链接。

React + Redux Application (Plain Redux)

React + Redux Toolkit Application

注意: 此 app 是通过 “JSON 占位符 API” 从真正的 API 中获取数据的的。由于 CodeSandbox 上的速率限制，API 可能会显得很慢，但这与 Redux app 本身无关。当然，还可以直接在本地克隆数据。

我们将学到：

什么是 Redux 以及为什么使用它
Redux 的术语：actions, reducers, store, dispatch, connect, 和 container
用 Redux Thunk 发起异步 API 请求
学会使用 React 和 Redux 制作轻巧、真实的 app
学会使用 Redux 工具简化 Redux app 的开发

什么是 Redux

Redux 是一个 JS app 的状态管理器。使用 React, 可以在组件级别管理状态, 并通过 props 传递状态。而使用 Redux, 整个 app 的状态都会在一个不可变对象中管理。对 Redux 状态的每次更新, 其结果是一个新的对象, 它复制了原对象中的部分状态, 并添加了改动状态。

Redux 的初创人是 Dan Abramov 和 Andrew Clark。

为什么使用 Redux

便于管理全局状态 —— 访问或更新任何 Redux 连接组件的状态的任意部分。
便于追踪状态更改(通过 Redux 开发工具) —— 任何 action 或状态改变都可以被轻松追踪。实际上，每次更改，app 的全部状态都会被记录，这意味着我们可以轻松的进行 time-travel debugging, 以便于在更改历史之间切换。

Redux 的缺点在于它有很多初始模板( initial boilerplate )需要设置和维护(特别是单纯使用 Redux 而没有使用 Redux 工具的时候)。因此，对一个简单的 app 而言，或许不需要使用 Redux, 而只需要简单使用 Context API 即可管理好全局状态。

根据我的个人经验，之前是只使用 Context 建立 app, 后来将所有内容转换为 Redux 以便于维护和组织。

(译者补充：这个状态追踪很像 git 的历史记录)

术语

我通常不喜欢单列出术语及其定义列表，但是 Redux 中有些概念就是很陌生的。所以我将在这部分简单描述一下其定义，便于在后文中使用。虽然读者也可以跳过这部分内容，但我认为最好先阅读所有的定义，以便了解它们并在脑海中形成一个概念。

Actions
Reducers
Store
Dispatch
Connect

我将使用经典的 todo app (待办事项) 来举例说明。

(译者补充：这几个术语单词就不翻译了，读写时都使用英文原文，以免造成误解。)

Actions

一个 action 从 app 将数据发送到 Redux store。一个 action 通常是一个对象，它有两个属性：type 和 payload(可选)。type 通常是一个大写的字符串，描述了 action (动作/事件)。payload 是可能被传输的附加数据。

// Action Type
const DELETE_TODO = "posts/deleteTodo";

// Action
{
  type: DELETE_TODO,
  payload: id,
}

Action creators

一个 action creator 是一个函数，他返回一个 action 。

Reducers

一个 reducer 是一个函数，有两个入参：state 和 action 。

一个 reducer 是不可变的，它的返回值是整个 state 的复制版本。

一个 reducer 通常由一个 switch 语句组成，该语句遍历所有可能的 action type 。

// Reducer
const initialState = {
  todos: [
    { id: 1, text: "Eat" },
    { id: 2, text: "Sleep" },
  ],
  loading: false,
  hasErrors: false,
};

function todoReducer(state = initialState, action) {
  switch (action.type) {
    case DELETE_TODO:
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.payload),
      };
    default:
      return state;
  }
}

(译者补充：通过不同的 action 触发特定功能的运行，于是 state 的更新逻辑可以不对外暴露，在业务逻辑中，只需要调用 action 即可。而 action 一般是多个子 action 的集合，通过 type 指定具体的值，这样便于以后增加新的 action。)

Store

Redux app 的 state 是存在于 store 中的，而 store 是由 reducer 初始化得到的。当和 React 一起使用时，用 Provider 标签包裹 app, 然后在 Provider 内部的任何东西就都可以访问 Redux 了。

// Store
import { createStore } from "redux";
import { Provider } from "react-redux";
import reducer from "./reducers";

const store = createStore(reducer);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Dispatch

dispatch 是一个函数，在 store 对象中。dispatch 接受一个对象参数：该对象用于更新 Redux state 。通常，此对象是调用 action creator 得到的结果。

const Component = ({ dispatch }) => {
  useEffect(() => {
    dispatch(deleteTodo());
  }, [dispatch]);
};

Connect

connect 是一个函数，它是连接 React 到 Redux 的一种典经方法，连接的组件有时被称为容器。

好了，这差不多涵盖了 Redux 的主要项。在没有任何上下文的情况下阅读术语可能会让人不知所措，所以让我们开始吧。

快速开始

为了简单，我们使用 create-react-app 来设置环境。

npx create-react-app redux-tutorial
cd redux-tutorial

Redux 需要一些依赖：

Redux ———— 核心库
React Redux ———— 绑定 React 和 Redux
Redux Thunk ———— Redux 异步中间件
Redux DevTools Extension ———— 连接 Redux app 和 Redux DevTools

你可以使用 yarn add 或者 npm i 安装这些依赖，我自己也会使用 react-router-dom 这个额外的依赖。

(译者补充：在不同 OS 中，读者注意下命令的变化。)

(由于本文原文是 2020 年写的，有些写法在新版本中可能不兼容，需要时切换到旧版本即可，或者直接使用译者的 packge.json 配置：)

"dependencies": {
   "@testing-library/jest-dom": "^5.16.5",
   "@testing-library/react": "^13.4.0",
   "@testing-library/user-event": "^13.5.0",
   "react": "^18.2.0",
   "react-dom": "^18.2.0",
   "react-redux": "^8.0.5",
   "react-router-dom": "^5.0.0", // 这一个要注意，后文中的写法，不兼容 6 及以上版本
   "react-scripts": "5.0.1",
   "redux": "^4.2.1",
   "redux-devtools-extension": "^2.13.9",
   "redux-thunk": "^2.4.2",
   "web-vitals": "^2.1.4"
 },

npm i \
redux \
react-redux \
redux-thunk \
redux-devtools-extension \
react-router-dom

下一步，删除所有模板文件。我们将从头开始添加我们需要的所有东西。

cd src && rm * # 进入 src 文件，然后删除里面的所有文件

下一步，创建四个目录: Redux 中的 reducers 和 actions，还有 React 中的页面目录 pages 和组件目录 components 。

mkdir actions components pages reducers

下一步，把 index.js, App.js 和 index.css 重建回来。

touch index.js index.css App.js

现在我们的工程目录树如下所示：

└── src/
    ├── actions/
    ├── components/
    ├── pages/
    ├── reducers/
    ├── App.js
    ├── index.css
    └── index.js

对于 index.css 文件，只需复制这个网站的内容。我只打算讨论功能而不是样式，所以我只写了一些非常基本的样式，以确保网站看起来不太糟糕。

现在我们有了足够的模板文件，让我们开始吧。

设置 Redux Store

当我第一次学习 Redux 时，感到非常茫然，因为我看到的每个 app 的 index.js 设置都有点不同。在观察了很多最新的 app 并对它们的共性进行分析之后，我能够很好地识别 Redux app 中真正需要包含的内容，或者人们为了与众不同而别出心裁的操作。

网上有很多教程展示了“如何使用 todo 设置一个非常基本的 Redux 存储”，但我认为这些教程对于了解“如何进行生产级设置”没有多大帮助，所以我将从一开始就使用完整项（你需要的所有东西）来设置它。尽管 Redux 非常灵活多变，但还是会有一些固定不变化的方面。

在 index.js 中，我们会引入一些东西：

createStore：创建 store 以维护 Redux 状态
applyMiddleware：能够使用中间件，这里中间件指 thunk
Provider：将整个应用程序封装在 Redux 中
thunk：一个中间件，允许我们在 Redux 中进行异步操作
composeWithDevTools：将应用程序连接到 Redux DevTools 的代码

// index.js
import React from "react";
import { render } from "react-dom";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";

import App from "./App";
import rootReducer from "./reducers";

import "./index.css";

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

(译者补充：在 index.js 中的 Provider 写法，和 React 中提供的 useContext 写法相似)

在 App.js 中添加一个组件。我们稍后会修改它，但我们现在只想让应用程序启动并运行。

// App.js

import React from "react";

const App = () => {
  return <div>Hello, Redux</div>;
};

export default App;

引入 reducers

最后一件事是引入 reducers —— reducer 是一个决定 Redux 状态变化的函数，它是一个纯函数，返回更新后的状态的复制。

Redux 的一个简洁特性是，我们可以有许多 reducer，并使用 combineReducers 将它们组合成一个给 store 使用的根 reducer。这使我们能够轻松地组织代码，同时仍然将所有内容放在一个根状态树中。

由于这个应用程序会类似一个博客，所以它会有一个文章列表，我们把列表放在 postsReducer 中。有了这个 combineReducers 方法，我们就可以引入任何我们想要的东西 —— commentsReducer 、authReducer 等。

在 reducers/index.js 中，创建一个文件来组合所有的 reducers。

// reducers/index.js

import { combineReducers } from "redux";

import postsReducer from "./postsReducer";

const rootReducer = combineReducers({
  posts: postsReducer,
});

export default rootReducer;

最后，我们将创建 postsReducer，它有一个初始状态。就像你对普通 React 组件的期望一样，我们将有一个 loading 和 hasErrors 状态，以及一个 posts 数组，文章列表将保存在 posts 里。在 switch 中，还没有设置 action，而只有一个返回整个 state 的 default case。

// reducers/postsReducer.js

export const initialState = {
  posts: [],
  loading: false,
  hasErrors: false,
};

export default function postsReducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

现在我们至少有了足够的配置，应用程序能够加载而不会崩溃了。

Redux 插件

加载完应用程序并设置好 Redux Provider 后，我们可以看一下 Redux DevTools。下载插件后，它将成为开发人员工具(F12)中的一个 tab。单击 State，能观察到到目前为止应用程序的整个状态。

这里内容比较少看不太明显，但当你获得了很多 reducers 和 actions 时， Redux DevTools 就会显得很神奇。它可以跟踪应用程序的所有更改，与普通 React 相比，它使调试变得轻而易举。

设置 Redux Actions

现在我们有一个 reducer，但我们没有任何 actions。这时 reducer 只会返回状态，但没办法修改状态。actions 是我们与 Redux 存储进行通信的方式。对于这个博客 app，我们将从 API 获取文章数据，然后把它们置于 Redux 状态中。

由于获取文章是一个异步操作，因此需要使用 Redux thunk。幸运的是，使用 thunk，我们只需要在 store 中设置 thunk （我们已经这样做了），而不必做任何特殊处理。

创建一个 postsActions.js 文件。首先，我们将 action type 定义为常量 —— 这不是强制要求的，但这是一种常见的约定，便于导出 action 和防止拼写错误。我们想做三件事：

getPosts - 开始告诉 Redux 我们将从 API 获取帖子
getPostsSuccess - 在成功的 API 调用时将帖子传递给 Redux
getPostsFailure - 通知 Redux 在调用期间遇到错误，API 调用失败

// actions/postsActions.js
// 创建 Redux action types
export const GET_POSTS = "GET_POSTS";
export const GET_POSTS_SUCCESS = "GET_POSTS_SUCCESS";
export const GET_POSTS_FAILURE = "GET_POSTS_FAILURE";

然后创建 action creators —— 返回 action 的函数。该 action 由 type 和 payload 组成（payload 是可选字段，它包含了数据）。

// actions/postsActions.js
// 创建 Redux action creators ，它返回一个 action
export const getPosts = () => ({
  type: GET_POSTS,
});

export const getPostsSuccess = (posts) => ({
  type: GET_POSTS_SUCCESS,
  payload: posts,
});

export const getPostsFailure = () => ({
  type: GET_POSTS_FAILURE,
});

最后，创建将上述所有三个 action 组合在一起的异步 thunk action。调用时，它将 dispatch(调度) 初始的 action (即 getPosts())以通知 Redux 准备 API 调用，然后在 try/catch 中执行所有必要的操作以获取数据，最后 dispatch 成功或失败的 action。

// actions/postsActions.js
// Combine them all in an asynchronous thunk
export function fetchPosts() {
  return async (dispatch) => {
    dispatch(getPosts());

    try {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts"
      );
      const data = await response.json();

      dispatch(getPostsSuccess(data));
    } catch (error) {
      dispatch(getPostsFailure());
    }
  };
}

太好了，我们现在都完成了创建 actions！剩下要做的就是告诉 reducer 如何处理每个 action 的状态。

响应 actions

回到我们的 postsReducers，其中有一个 switch，它还没有发挥作用呢。

// reducers/postsReducer.js
export default function postsReducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

现在我们有了 actions，我们可以从 postsActions 页面引入它们。

// Import all actions
import * as actions from "../actions/postsActions";

对于每个 action，我们将创建一个对应的 case ，它返回整个 state 以及我们对它所做的任何更改。例如 GET_POSTS ，我们要做的就是告诉应用程序将 loading 设置为 true，因为我们马上要进行 API 调用。

case actions.GET_POSTS:
  return { ...state, loading: true }

GET_POSTS - 开始加载
GET_POSTS_SUCCESS - 应用程序没有错误，应该停止加载
GET_POSTS_FAILURE - 应用程序有错误，应该停止加载

下面是整个 reducer：

// reducers/postsReducer.js
import * as actions from "../actions/postsActions";

export const initialState = {
  posts: [],
  loading: false,
  hasErrors: false,
};

export default function postsReducer(state = initialState, action) {
  switch (action.type) {
    case actions.GET_POSTS:
      return { ...state, loading: true };
    case actions.GET_POSTS_SUCCESS:
      return { posts: action.payload, loading: false, hasErrors: false };
    case actions.GET_POSTS_FAILURE:
      return { ...state, loading: false, hasErrors: true };
    default:
      return state;
  }
}

现在我们的 actions 和 reducers 已经准备就绪，所以剩下要做的就是将所有内容连接到 React 应用程序。

将 Redux 连接到 React 组件

由于我创建的 demo 使用 React Router 来提供一些路由，比如（仪表板）首页、文章列表页、单文章页面等。我现在将引入 React Router。此 demo 中，我将只引入首页和文章列表页。

(译者补充：注意 react-router-dom 版本，Switch 在 6 及以上版本无效，所以最好使用 5 版本。当然，你也可以自己修改代码，使用新版的 Routers 写法。)

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";

import DashboardPage from "./pages/DashboardPage";
import PostsPage from "./pages/PostsPage";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={DashboardPage} />
        <Route exact path="/posts" component={PostsPage} />
        <Redirect to="/" />
      </Switch>
    </Router>
  );
};

export default App;

我们可以创建首页 —— 常规的 React 组件。

// pages/DashboardPage.js
import React from "react";
import { Link } from "react-router-dom";

const DashboardPage = () => (
  <section>
    <h1>Dashboard</h1>
    <p>This is the dashboard.</p>

    <Link to="/posts" className="button">
      View Posts
    </Link>
  </section>
);

export default DashboardPage;

对于每个文章，让我们创建一个 Post 组件来显示文章的标题和文本摘录。在 components 子目录中创建 Post.js 。

// components/Post.js
import React from "react";

export const Post = ({ post }) => (
  <article className="post-excerpt">
    <h2>{post.title}</h2>
    <p>{post.body.substring(0, 100)}</p>
  </article>
);

未连接到 Redux 的组件仍然很重要且实用，特别是在较小的、可重用的领域，例如此处的 Post 组件。

现在，有趣的部分出现在文章页面 —— 将 Redux 引入 React。为此，我们将使用 react-redux 中的 connect。首先，我们将为页面创建一个常规组件：

// pages/PostsPage.js
import React from "react";

const PostsPage = () => {
  return (
    <section>
      <h1>Posts</h1>
    </section>
  );
};

export default PostsPage;

然后，我们将引入 connect —— 它是一个高阶函数，可以把 Redux store 连接到 React 组件。这个顾名思义的函数将从 Redux store 中获取任何 state，并将其传递给 React 组件的 props。对 connect 的参数 mapStateToProps，就是引入的 postsReducer 中的 loading 、 posts 和 hasErrors 。

(译者补充:

1、高阶函数：简单理解为，生成函数的函数。

2、注意 connect 的写法。connect(mapStateToProps) 的 return 是一个新的函数，它的参数是 PostsPage。

3、数据从哪里来的？还记得 Provider 的 store 属性吗？下面 mapStateToProps 中的参数 state 就是指数据流上游中的 store 中的 state。)

// pages/PostsPage.js
import React from "react";
import { connect } from "react-redux";

// Redux state is now in the props of the component
const PostsPage = ({ loading, posts, hasErrors }) => {
  return (
    <section>
      <h1>Posts</h1>
    </section>
  );
};

// Map Redux state to React component props
const mapStateToProps = (state) => ({
  loading: state.posts.loading,
  posts: state.posts.posts,
  hasErrors: state.posts.hasErrors,
});
// Connect Redux to React
export default connect(mapStateToProps)(PostsPage);

由于此组件使用来自同一 reducer 的状态，因此我们也可以简写为 state => state.posts 。但是，使用更长的写法也是有意义的：如果需要将多个 reducers 引入同一个组件中，可以明确其内容。

最后，我们将从 actions 中引入异步 fetchPosts ，它将“获取所有文章的整个生命周期”（译者注：就是 fetch 从开始到成功或失败的全过程）合并为一个 action。使用 Reat 的 useEffecct，在组件挂载时调用 dispatch(fetchPosts()) 来更新文章。在已连接的组件上，dispatch 将自动可用。

// pages/PostsPage.js
import React, { useEffect } from "react";
import { connect } from "react-redux";

// Bring in the asynchronous fetchPosts action
import { fetchPosts } from "../actions/postsActions";

const PostsPage = ({ dispatch, loading, posts, hasErrors }) => {
  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  return (
    <section>
      <h1>Posts</h1>
    </section>
  );
};

const mapStateToProps = (state) => ({
  loading: state.posts.loading,
  posts: state.posts.posts,
  hasErrors: state.posts.hasErrors,
});

export default connect(mapStateToProps)(PostsPage);

此时剩下要做的就是显示页面的所有三种可能状态：无论是正在加载、出现错误还是从 API 成功检索文章。

// pages/PostsPage.js
import React, { useEffect } from "react";
import { connect } from "react-redux";

import { fetchPosts } from "../actions/postsActions";
import { Post } from "../components/Post";

const PostsPage = ({ dispatch, loading, posts, hasErrors }) => {
  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  // Show loading, error, or success state
  const renderPosts = () => {
    if (loading) return <p>Loading posts...</p>;
    if (hasErrors) return <p>Unable to display posts.</p>;
    return posts.map((post) => <Post key={post.id} post={post} />);
  };

  return (
    <section>
      <h1>Posts</h1>
      {renderPosts()}
    </section>
  );
};

const mapStateToProps = (state) => ({
  loading: state.posts.loading,
  posts: state.posts.posts,
  hasErrors: state.posts.hasErrors,
});

export default connect(mapStateToProps)(PostsPage);

以上就是全部的内容啦 - 我们现在有一个已连接的组件，并将数据从 API 引入我们的 Redux store。使用 Redux DevTools，我们可以看到每个 action 的记录，以及每个状态更改后的变化。

结束语

使用纯 Redux 创建 app 的教程到此结束。如果查看 demo 的源代码，你会发现添加了很多内容 —— 单个文章以及评论的 reducer 和 actions。

我建议你逐步完善你的 project，以便它能和 demo app 对得上。后文没有新的概念需要学习，只是更灵活的运用技巧。你将创建两个甚至更多的 reducers 和 actions，并了解如何将两个 state 传入一个单文章页面组件中，该组件包含文章数据以及该文章的评论数据。

Redux 工具包

我还想介绍一件事 —— Redux 工具包。Redux Toolkit (RTK)是一种更新、更简单的官方使用 Redux 的方式。你可能会注意到 Redux 有很多用于设置的模板文件，并且需要比普通 React 更多的文件夹和文件。现在已经出现了一些模式试图轻量化配置，例如 Redux ducks 模式。但其实我们可以进一步简化它。

查看 Redux Toolkit demo app 的源代码，这与我们刚刚使用 Redux 创建的 app 相同，但使用的是 RTK。它要简单得多，所有相同功能的代码行数都大大减少。

使用 RTK 只需要一个依赖项，@reduxjs/toolkit。

npm i @reduxjs/toolkit

并且不再需要您安装 redux-thunk 或 redux-devtools-extension 依赖项。

Redux 工具包的优势

使用 RTK 的主要优点有：

更易于设置（更少的依赖）
减少模板代码（一个 slice vs. 多文件的 actions and reducers）
明智的默认值（内置 Redux Thunk 和 Redux DevTools）
更小粒度的 state 更新，这意味着不再需要在每个 reducer 中都 return { ...state } 。

(译者补充：第四个优点的原文不太好翻译，这里贴一下原文：

The ability to use direct state mutation, since RTK uses immer under the hood. This means you no longer need to return { ...state } with every reducer.

)

Store

由于 Redux Toolkit 已经内置了很多功能，比如 Redux DevTools 和 Redux Thunk，所以我们不再需要将它们放入 index.js 文件中。现在我们只需要 configureStore ，而不是 createStore 了。

// index.js
import React from "react";
import { render } from "react-dom";
import { configureStore } from "@reduxjs/toolkit";
import { Provider } from "react-redux";

import App from "./App";
import rootReducer from "./slices";

import "./index.css";

const store = configureStore({ reducer: rootReducer });

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Slices

RTK 不是将 “reducers、actions 和所有文件” 作为单独的文件处理并单独创建所有 action types，而是为我们提供了 slices 的概念。slices 自动生成 reducers、action types 和 action creators。因此，您只需创建一个文件夹 - slices 。

initialState 看起来是一样的。

// slices/posts.js
import { createSlice } from "@reduxjs/toolkit";

export const initialState = {
  loading: false,
  hasErrors: false,
  posts: [],
};

slices 中 reducers 的名称也将相同 —— getPosts 、 getPostsSuccess 和 getPostsFailure 。我们将进行所有相同的更改，但请注意，我们不再返回整个 state —— 我们只是改变状态。它在 hood 下仍然是不可变的，但这种方法对某些人来说可能更容易、更快捷。如果愿意，你仍然可以将整个 state 作为对象返回。

译者补充：这里 hood 的理解，和前文第四个优点一样，取查看更多资料吧。

// slices/posts.js
// A slice for posts with our three reducers
const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {
    getPosts: (state) => {
      state.loading = true;
    },
    getPostsSuccess: (state, { payload }) => {
      state.posts = payload;
      state.loading = false;
      state.hasErrors = false;
    },
    getPostsFailure: (state) => {
      state.loading = false;
      state.hasErrors = true;
    },
  },
});

生成的 actions 是相同的，我们只是不必再单独写出它们。从同一个文件中，我们可以导出所有 actions、reducer、异步 thunk 和一个新东西 —— selector。我们将使用 selector 来访问 React 组件中的任何状态，而不是使用 connect 。

// slices/posts.js
// Three actions generated from the slice
export const { getPosts, getPostsSuccess, getPostsFailure } =
  postsSlice.actions;

// A selector
export const postsSelector = (state) => state.posts;

// The reducer
export default postsSlice.reducer;

// Asynchronous thunk action
export function fetchPosts() {
  return async (dispatch) => {
    dispatch(getPosts());

    try {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts"
      );
      const data = await response.json();

      dispatch(getPostsSuccess(data));
    } catch (error) {
      dispatch(getPostsFailure());
    }
  };
}

译者补充:为了最低运行，还需要加上这个文件。完整代码地址在前文查看，可能需要重新 npm start 一下。
// slices/index.js
import { combineReducers } from "redux";

import postsReducer from "./posts";

const rootReducer = combineReducers({
  posts: postsReducer,
});

export default rootReducer;

在 React 组件中选择 Redux 状态

正如我们刚刚了解到的，传统的方法是与 connect() 函数一起使用 mapStateToProps ，这在代码库中仍然很常见，因此值得了解这种写法。你仍然可以在 RTK 中使用此方法，但较新的 React Hooks 写法是使用 react-redux 提供的 useDispatch 和 useSelector ，这种方法需要的代码较少。

正如下面的 PostsPage.js 文件中所示，Redux 状态不再连接到组件的 props 上，而是由我们在 slice 中导出的 selector(选择器)提供。

// pages/PostsPage.js
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

import { fetchPosts, postsSelector } from "../slices/posts";

import { Post } from "../components/Post";

const PostsPage = () => {
  const dispatch = useDispatch();
  const { posts, loading, hasErrors } = useSelector(postsSelector);

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  const renderPosts = () => {
    if (loading) return <p>Loading posts...</p>;
    if (hasErrors) return <p>Unable to display posts.</p>;

    return posts.map((post) => <Post key={post.id} post={post} excerpt />);
  };

  return (
    <section>
      <h1>Posts</h1>
      {renderPosts()}
    </section>
  );
};

export default PostsPage;

现在我们有和以前一样的应用程序，从 Redux Toolkit 进行了一些更新，并且需要维护的代码少了很多。

总结

我们成功了！如果你跟我一起读完了整个教程，你现在应该对 Redux 有一个不错的体会，无论是旧式写法还是使用 Redux Toolkit 来简化代码。

总而言之，Redux 允许我们轻松地在 React 应用程序中管理全局状态。我们可以从任何地方访问和更新状态，并使用 Redux Devtools 轻松调试应用程序的整个状态。

你可以将应用程序的大部分状态放在 Redux 中，但应用程序的某些区域（例如正在更新的表单）保持 React 组件状态本身仍然有意义。

希望你喜欢这篇文章！将两个完整的 demo 放在一起并在这里运行整个事情需要做很多工作，这篇文章很长，但希望这是你学习所有初级和中级 Redux 概念的一站式商店。

(译者补充：原文这里是捐款和订阅链接，感兴趣的读者可用前文地址自行访问。)

请让我知道你的想法，如果对你有所帮助，请分享这篇文章，并且随时欢迎捐款！

2023 into 2024

Sat, 30 Dec 2023 00:00:00 GMT

前言

之前看到过一个有意思的言论，大意是：人们往往更喜欢做新一年的计划，而不是做旧一年的总结，因为往事不堪回首。

我寻思了一下，这一年还是可堪回首的。

时间线

去年十二月可谓是承上启下了，毕竟疫情宣布结束，过年相聚时大家都会聊聊各自的“感冒”经历。

这次过年没什么不同，吐槽发泄一番，交换一下信息，结束。

对了，去年十月的“转岗风波”并未结束，我年初就未雨绸缪，开始准备找新工作了。

二月面试了几家，地理上限定在北京，最后三月初确定了新的工作。

紧接着就从武汉到北京了。有意思的是，我是在赶飞机的路上，才确定新工作的。

很开心，北京也有认识的人。

三月到十二月就是平平无奇的工作了，当然是从超级难受到游刃有余这样的。

十月份带女友回了趟重庆，感觉任重道远。

技术上，看了很多资料，获得了极大进步，现在一个吊打一年前的我两个。

另外补全了 css 基础，因为通读了《css 权威指南》。

自认为升级到中级水平了。

记忆深刻的事情

换工作

毕竟是第一次换工作诶，没想到过程意外的顺利。

二月陆续面试几家工作，第一次几乎裸面，回想起来真不好意思浪费了别人的时间。

另一个意外的是，我竟然不是我们小组第一个跑路的。

还有一个意外的是，赶飞机的下午去公司总部（离机场更近）找同事吃饭，接到了一个 offer。（我原计划想先过去再找工作的）

陆续走了不少人，后来我才知道有很多做法是严重违反劳动法的。

大学生又菜又好骗。

塑料友谊

和在北京的同学一起玩，说好很快下次，结果三月初见了一次面，下次见面竟然在九月底了。

唔，应该是我太宅了。

年底了再聚一聚。

规范性

我在武汉两次换房，都没有退押金，所以我会觉得押金退不了是正常的，于是我选了在线租房平台。

不得不说，北京这边对规范的遵守确实好一点。

十一月公司裁员，虽然有点突然，一下走了好多同事，但真的有赔偿啊。

新的计划

我经常在 QQ 空间发阶段性总结，主要是维护一个关于专业知识学习的任务主线。

明年要做的事情大概有了计划。

关于算法和数学基础

一年的时间不一定够。

本科的时候关注点没在这个上面，导致现在需要挤时间出来。

总之看看算法导论，刷刷算法题，从计算机的角度去拓展一下视野。

关于工作

“良禽择木而栖，岂能郁郁久居人下。”

其实我觉得生活挺好的，没什么追求，能看书进步一点点就很开心了。

可惜有各种压力，还要为社会做贡献，所以只能尽量发挥自己的价值了。

“学成文武艺，货与帝王家。”

能安心看书当然是最好的了。

关于身体健康、婚姻

有信心就有希望，或者是，有希望就有信心。

结束语

明年年底再来看看这篇文章吧。

2024 into 2025

Mon, 30 Dec 2024 00:00:00 GMT

0 前言

总的来说，今年是奋斗的一年。

虽然看起来和去年的处境相当，但是内在积累了更多的力量，各种意义上的。

1 时间线

年初，春节照旧。

3 月，前端同事离职，新入职同事补上。

4 月，开始了解市场环境，总结了大约 25 次经验，并修改了主线学习计划。

这期间，看了几本书，值得推荐的，列举一下。

《Hello 算法》
《图解 HTTP》
《深入浅出 Node.js》
《JavaScript 设计模式与开发实践》
《Webpack 实战入门、进阶、调优第二版》
《遥远的救世主》

最忙的时间段在 3-6 月，其他时候就陆陆续续的了。

6 月，去湖北襄阳参加了一场婚宴，干了点帮忙贴纸的活，顺便思考了下自己的未来。

7 月，奶奶、姐姐、外甥女来北京，主要陪同参观游玩了天安门、颐和园、环球影城。

8 月，上涨 18.75% 月薪。

9 月，和小舅舅见面，了解一下别人的打工人生活。

10 月，国庆初，老妈五十大寿。老家装修、父母养老等问题，参与计划决策。

国庆中后期，游览成都、四姑娘山，确似人间仙境。

10 月 - 11 月，参加健身房私教锻炼。

12 月，开始摆烂。

2 散碎的思考

2.1 关于工作

这是今年最重要的事情了，甚至今年的学习计划都是根据业内实践经验来制定的。

花了大约半年时间，去探索新工作、新学习计划、新的市场行情，虽然最后没有换工作，但是这个经历就是非常值得的积累了。

目前看来，前端欠缺的只有工程化和性能优化相关的系统性知识了，然后就是服务端的入门了。

这大概也是明年要完成的部分学习任务。

春节前还有一项工作内容需要完成，其他随缘。

技术水平的提高主要体现在，思维角度的拔高，用俯视的角度去设计完成工作、指导学习路线。

高级工程师，指日可待！

2.2 关于出行

今年主动出行挺多的，北京香山、植物园，河北大境门长城、张北麻田岭；天津；四川成都、四姑姑娘山、都江堰；湖北襄阳唐城。

另外还办理了护照，今年没时间了，预计明年会出国游玩。

在这些游览参观中，印象最深刻的莫过于，成都的悠闲、川西的美景，让人能剥离出俗世烦恼中。

奶奶来北京那次，可惜的是，没有完全完成“去北京见毛主席”的年初笑谈承诺————排队太久，没赶上毛主席纪念堂展出时间。

我现在感觉，旅行对我的意义是：

看看不一样地方的人的生活方式，对照自己的生活方式，思考有没有值得借鉴的地方；
欣赏别处的美景，增广见闻、谈资；
提高眼界高度，真正地俯瞰地图，做到顶天立地。

2.4 关于新事物的探索

1）积木

在一次公司活动中得了一套乐高积木，然后就对拼积木产生了兴趣。

后面陆续玩过一些，快乐点在于：内心的平静、小伙伴快乐传递。

2）switch

年中的时候，买了 switch oled 玩游戏，《塞尔达传说》确实很有创意，双人游戏也能促进交流。

3）社交技能

我去看了一些视频，感觉自己会变得很社牛。

4）摆地摊

冬天到了，我买个一些手套，去摆地摊，但是我太内向了，一双也没卖出去。

好消息是，成功和路人搭话聊天。

5）兼职媒婆

好多单身的同龄人，于是，有机会的时候就会很努力地去推荐——手动吃瓜。

3 新一年的计划

今年没做完的事情，明年继续。

明年估计也做不完，得后年去了。

根据学习计划，得 2026 年到 2027 年才能完成。

工作的话，暂时是稳定的，且稳中向好。

4 总结

今年上半年，最辛苦的那三个月，真就是没日没夜的学呀，就像第二天就要考试了一样 —— 从紧迫感的角度来看，确实是一样的。

下半年就比较平缓了，应该是因为涨薪，导致很多事情都不那么急迫了。

还有个没说的事情，12 月摆烂了两三周，现在不好分析原因，只能说表象是“逃避现实”。

瑕不掩瑜，总的来说，今年还是奋斗的一年。

2023 前端面试经验

Mon, 06 Mar 2023 00:00:00 GMT

前言

大约来说，就是《关于毕业不到两年却有两年划水工作经验的卑微初级 web 前端程序员在一个月内完成从武汉跳槽到北京继续认真划水工作这件事》。

咳咳。

就是说一下关于找工作的整个过程，以及给迷茫的读者一点点建议。

正文（正经的文）

找工作的几个步骤：

编写简历
投递简历
笔试、面试
谈 offer

其中，我自己写简历、投简历和谈 offer 的过程都比较简洁，主要时间花费在笔试和面试上了。

编写简历

招聘相关的 APP 都会提供简历编写模板，自己挑一个好看的就行。

至于具体写什么内容，我觉得能“让自己感觉到自信”就行了——（哟！我其实还不错嘛！）。

这里推荐一篇关于写简历的文章，阮一峰的《如何写一份有效的技术简历？》。

这篇文章的问题在于，初级工程师就一两个项目经历。如果写不出实践经验，那就多写点自己能干啥吧。

投递简历

部分企业可以从官网投递简历，部分认识的人可以内推一下，其他公司就从招聘软件里面看就行了。

主要看看工作环境、工资待遇、工作内容，自己或公司的晋升前途。

不要怕“已读不回”，换一家就行了。

笔试面试

这个我强烈建议，开始的时候一周两次面试就足够了。

我们要“以战养战”，从面试过程中吸取经验。

逐渐熟悉之后，就能不慌不忙了。

与一般人说的不同，我认为预约面试的公司都应该是自己想去的公司，这样能让自己更加重视。

如果面试结束后后悔没准备好，那么这种遗憾情绪能促进自己去好好准备下一场面试。

当然，也是不浪费大家的时间。

谈 offer

我自己不懂怎么谈，也不会讨价还价。

反正我投递简历的时候就设定了薪资待遇的下限，低于下限直接 pass 掉换一家。

总之，我谈 offer 的时候大概就是 hr 说得噼里啪啦，我回答嗯嗯啊啊。

正文其二

从我经历来说，2 月份找工作，一共联系面试或笔试了 6 家公司。

第一周 1 家，第二周 2 家，第三周 3 家。

第一次是没有准备就去面试的，因为我之前研究了很久的基础理论，有点自信了，同时也不知道要准备什么。

然后被打击得很惨，就像苍蝇被拍在墙上，就像身体被火箭射出地球。

不过这也让我拿到了一份“历年真题”，以及现在面试问题的主流倾向。

之后就是复盘一下面试问题，然后解决，最后看看出题思路。

到第二周的时候，重复如此。

到第三周的时候，已经能够侃侃而谈、滔滔不绝了。

当然，这里有我平时积累的功劳，所以才能短时间内理解大量原来不知道的知识。

然后新工作的事情就水到渠成了。

正文其三

这里是我之前记录下来的面试或笔试题目，可以参考一下。

投递的岗位都是北京 React 前端开发 1~3 年 ** k。

关于题目的答案，这里推荐两个网站：

这两个网站是总结得比较好的，然后其他的没收集的问题，在网上检索就行。

注意：问题都是冰上一角，还要有知识底蕴才好去理解。

总结

很多人遇到的问题就是：简历没有亮点、投了简历也没有约面试、约了面试也答不出来问题、开始谈 offer 不敢要价。

我想说的是，“把握自己的核心需求”，想想到底想要什么，然后坚持学习，不管是不是面试时期。

软件测试与质量保证笔记

Fri, 15 May 2020 00:00:00 GMT

一、概述引论

（一）缺陷

1、缺陷定义

缺陷：最终产品同用户的期望不一致。 1、功能错误 2、功能遗漏 3、超出需求的部分 4、性能不符合要求

2、缺陷产生原因

3、解决办法

通过软件测试尽可能减少缺陷。

（二）软件测试

1、软件测试定义

传统意义上的测试定义，是狭义的。 1979 年 Glenford J. Myers 在《软件测试艺术》（The art of software testing）书中给出的定义：软件测试是为了发现软件缺陷而执行程序或系统的过程。

1983 年 IEEE 的定义 ：使用人工或自动手段运行或测定某个系统的过程，其目的在于检验它是否满足规定的需求或是弄清预期结果与实际结果之间的差别。

软件测试也可以定义为是“验证（Verification）”和“有效性确认（Validation）”活动构成的整体。验证：是检验软件是否已正确地实现了产品规格书所定义的系统功能和特性。 有效性确认：是确认所开发的软件是否满足用户真正需求的活动。

2、区分缺陷、故障、失效

二、软件测试基础

（一）软件测试的原则

1.所有的测试都应追溯到用户的需求 系统中最严重的错误是那些导致程序无法满足用户需求的错误。

2.尽早地和不断地进行软件测试 问题发现越早，解决问题的代价就越小。

3.不可能完全的测试 输入量太大执行路径太多软件测试最致命的缺陷就是：不能进行彻底的测试

4 .Pareto 原则 Pareto 原则暗示着测试发现的错误中的 80%很可能起源于程序模块中的 20%。

5.软件缺陷的寄生虫性 找到的软件缺陷越多，就说明软件缺陷越多。

6.避免测试自己的程序 程序员轻易不会承认自己写的程序有错误；程序员的测试思路有局限性，做测试时很容易受到编程思路的影响；程序员测试不具有典型性。

7.设计周密的测试用例 软件测试的本质就是针对要测试的内容确定一组测试用例。测试用例至少应包括： a 执行测试用例前，应满足的前提条件 b 输入 c 预期输出设计测试用例时，应当包括合理的输入条件和不合理的输入条件。

8.回归测试 程序修改后必须进行回归测试，避免引入新的错误。

9.严格执行测试计划，排除测试的随意性。

10.确认 BUG 的有效性 对测试错误结果一定要有一个确认的过程。有时候测试人员提交的 BUG 并不是真正的 BUG。

11.妥善保存测试计划，测试用例，出错统计和最终分析报告，为维护提供方便。

（二）软件质量保证

1、质量定义

ISO 9000 ：质量是一组固有特性符合需求的程度。 IEEE 的定义：系统、部件或过程满足明确需求的程度。系统、部件或过程满足客户或用户需要或期望的程度。 六标准差（6σ）：10^6^次测试中的错误次数。 RUP 的定义：满足或超出认定的一组需求，并使用经过认可的评测方法和标准来评估，还使用认定的流程来生产。

2、软件质量的定义

ISO 14598-1999 定义：软件特性的总和，软件满足规定或潜在用户需求的能力。 ISO 9126-2001 定义：软件满足用户规定或潜在用户需求的能力，要从软件在内部，外部和使用过程中的表现来衡量，包含内部质量、外部质量、和使用质量。

3、质量的不同层面

符合性质量：能够满足国家或行业标准、产品规范的要求，最初的质量观念。 适用性质量：让客户满意，不仅满足标准、规范的要求，而且满足客户的其他要求。 广义质量：不仅要让客户满意，还要让客户愉快，也就是，想在客户的前面，超出客户的希望。

### 4、软件质量属性（特性）的定义定义：软件产品、过程或与质量要求有关的固有属性。 1、软件质量是许多质量属性的综合体现，各种质量属性反映了软件质量的方方面面。 2、质量要求只有转化为有指标的质量特性，质量才可以度量。 3、通过改善软件的各种质量属性，从而提高软件的整体质量。

5、软件质量保证（SQA）的定义

建立一套有计划，有系统的方法，来向管理层保证拟定出的标准、步骤、实践和方法能够正确地被所有项目所采用。 1、它使软件开发过程对于管理人员来说是可见的。 1、它通过对软件产品和活动进行评审来验证软件是合乎标准的。

6、软件质量保证方法

产品质量：工作成果产生时(马上)进行质量检查，及时找出并消除工作成果中的缺陷
1、技术评审 2、软件测试

过程质量：开发过程中有效地预防工作成果产生缺陷，将高质量内建于开发过程。
过程规范建立 1、过程检查 2、软件过程改进

（三）测试模型与基础

1、测试层次的传统观点

2、软件测试模型

3、软件测试流程

1、测试计划

测试计划是对每个产品，或是对各个开发阶段的产品开展测试的策略。一个完整的测试计划应该包含以下几个方面： a 对测试范围的界定； b 风险的确定； c 资源的规划； d 时间表的制定；

2、测试设计 测试设计阶段要设计测试用例和测试过程，要保证测试用例完全覆盖测试需求。测试设计阶段最重要的是如何将测试需求分解，如何设计测试用例。

3、测试开发

(1).准备测试环境 a 测试技术准备 b 配置软件、硬件环境 c 人员

(2).获得测试数据
a 正常事务的测试 b 使用无效数据的测试

(3).测试脚本所谓脚本，是完整的一系列相关终端的活动。一般测试脚本有 5 个级别： a 单元脚本 b 并发脚本 c 集成脚本 d 回归脚本 e 强度/性能脚本

(4).辅助测试工具 a 优秀的办公处理软件 b 错误跟踪系统 c 自动测试工具 d 软件分析工具 e 好的操作系统 f 多样化平台

4、测试执行

测试执行的过程由 4 个部分组成：输入：要完成工作所必须的入口标准或可交付的结果。执行过程：从输入到输出的过程或工作任务。检查过程：确定输出是否满足标准的处理过程。输出：推出标准或工作流程产生的可交付的结果。

5、评估测试

软件测试的主要评测方法包括： (1) 覆盖评测最常用的覆盖评测是基于需求的测试覆盖和基于代码的测试覆盖。

(2)质量评测在测试过程中，已发现缺陷的评估提供了最佳的软件质量指标。

(3)性能评测评估测试对象的性能时，侧重于获取与行为相关的数据，如响应时间、事务处理数、内存占用率、操作可靠性等。

三、软件测试方法与技术

主流测试技术

（一）黑盒测试之等价类划分

1、技术概述

2、黑盒测试的目标

黒盒测试试图发现以下类型的错误： 1、功能错误或遗漏； 2、界面错误，不美观； 3、外部信息访问错误； 4、初始化和终止错误； 5、在接口上，能否正确地接受输入数据，能否产生正确地输出信息； 6、性能错误；

3、等价类划分 A

等价类划分法：依据需求对输入的范围进行细分，然后再分出的每一个区域内选取一个有代表性的测试数据开展测试。 有效等价类：符合需求说明，合理地输入数据集合。 无效等价类：不符合需求说明，无意义地输入数据的集合。

操作步骤

4、等价类划分 B

单缺陷与多缺陷假设产生弱等价类与强等价类测试之分；是否进行无效数据的处理产生健壮与一般等价类测试之分。

于是有：

1、弱一般等价类测试测试用例设计：选取的测试用例覆盖所有的有效等价类（只有一个缺陷）。

2、强一般等价类测试测试用例设计：将每个变量的有效等价类做笛卡尔积，设计测试用例覆盖笛卡尔积的每个元素。

3、弱健壮等价类测试测试用例设计：对有效输入，使用每个有效等价类的一个值。对无效输入，测试用例将拥有一个无效值，并保持其余的值都是有效的。

4、强健壮等价类测试从所有等价类的笛卡尔积的每一个元素中获得测试用例。

“单缺陷”假设 失效极少是由两个或多个缺陷的同时发生引起的。

5、等价类测试指导方针和观察

1）弱形式不如对应的强形式的测试全面。 2）如果实现语言是强类型，则没有必要使用健壮形式的测试。 3）如果错误条件非常重要，则进行健壮形式的测试。 4）强等价类测试假设变量是独立的，相应的测试用例相乘会引起冗余问题。如果存在依赖关系，则常常会生成错误测试用例。

（二）黑盒测试之边界值测试

功能性测试的基本观点是：任何程序都可以看作是将输入定义域取值映射到输出值域的函数。

1、边界值分析

边界值分析(Boundary Value Analysis)

基本原理：边界值分析关注输入空间的边界，并从中标识测试用例。错误更可能出现在输入变量的极值附近。

基本思想 在最小值、略高于最小值、正常值、略低于最大值和最大值处取输入变量值；表示方法为 min、min+、nom、max-、和 max。单缺陷”假设是边界值分析的关键假设。

获得测试用例的方法：使所有变量取正常值，只使一个变量取极值。

归纳基本边界值分析方法 a 通过变量的个数 b 通过变量的取值范围（类型）

优缺点

2、健壮性测试

健壮性是指在异常情况下，软件还能正常运行的能力。健壮性有两层含义： a 容错能力 b 恢复能力

基本思想 健壮性测试是边界值分析的一种简单扩展，除了使用五个边界值分别取值，还要采用: 一个略超过最大值(max+)的取值一个略小于最小值(min-)的取值

健壮性测试的主要价值是观察异常情况的处理。软件质量要素的衡量标准：软件的容错性；软件容错性的度量:从非法输入中恢复。

3、最坏情况测试

基本思想 边界值测试分析采用了可靠性理论的单缺陷假设；最坏情况测试拒绝这种假设，关心当多个变量取极值时会出现的情况。

对每一个变量首先进行包含最小值、略高于最小值、正常值、略低于最大值、最大值五个元素集合的测试，然后对这些集合进行笛卡尔积计算，以生成测试用例。

4、随机测试

基本思想 不是永远选取有界变量的最小值、略高于最小值、正常值、略低于最大值和最大值，而是使用随机数生成器选出测试用例值。

5、边界值分析应遵循的原则

1）如果输入条件规定了取值范围，或规定了值的个数，测试用例选择：范围的边界内，刚刚超出范围的边界外的值；或者说：最小值、稍高于最小值、正常值、稍低于最大值、最大值。 2）针对规约的每个输出条件使用 1）原则。 3）如果规约中提到的输入输出是个有序的集合（如顺序文件、有序表等），就应注意选取有序集中的第一个和最后一个元素作为测试用例。 4）分析软件规约，找出其它的可能边界条件。

（三）黑盒测试之决策表法

优势决策表法能把复杂逻辑关系和多条件组合情况表达得较明确。适用：在程序中，若输入输出较多，且相互制约的条件较多。

决策表组成 任何一个条件组合的特定取值及其相应要执行的操作称为规则；在判定表中贯穿条件项和动作项的一列就是一条规则；判定表中列出多少组条件取值，即有多少条规则，即条件项和动作项有多少列。

步骤总结 优缺点. 优点：它能把复杂的问题按各种可能的情况一一列举出来，简明而易于理解，也可避免遗漏。缺点：不能表达重复执行的动作，例如循环结构。

（四）黑盒测试之因果图法

概述

计算步骤 应用场合：当软件的输入条件过多时，可以考虑输入的所有排列组合情况，考虑条件之间和条件结果之间关系，防止遗漏。局限性：测试用例数目可能会很大，不便于维护。

（五）白盒测试

1、白盒测试概念

白盒测试又叫结构测试，逻辑驱动测试或基于程序本身的测试。

2、基于控制流的测试

控制流图： 控制流图是退化的程序流程图，图中每个处理都退化成一个结点，流线变成连接不同结点的有向弧。控制流图将程序流程图中结构化构件改用一般有向图的形式表示。在控制流图中用圆“○”表示节点，一个圆代表一条或多条语句。

圈复杂度：是一种为程序逻辑复杂性提供定量测度的软件度量，将该度量用于计算程序的基本的独立路径数目。独立路径必须包含一条在定义之前不曾用到的边。（每一条新的路径都包含了一条新边）

程序的环路复杂性即 McCabe 复杂性度量，简单的定义为控制流图的区域数。程序环路复杂性又叫圈复杂度。 逻辑覆盖 路径测试

路径覆盖的困难：太复杂。

如果把覆盖的路径数压缩到一定限度内，例如程序中的循环体只执行零次和一次，就成为基本路径测试。

通过分析程序控制流图的环路的复杂性，导出基本路径集合，从而设计测试用例，保证这些路径至少通过一次。

3、循环测试

简单循环测试 嵌套循环测试 串接循环 非结构循环 不能测试，尽量重新设计给结构化的程序结构后再进行测试。

4、基于数据流的测试

DD 路径：决策对决策路径（Miller）。从决策语句的“出路”开始，到下一个决策语句的“入路”结束。 DD 链：有向图中一条起始和终止节点不同点路径。

（六）单元测试

1、基本概念

单元测试：是对软件基本组成单元进行的测试。是检验程序最小单位，即检查模块有无错误，它是在编码完成后必须进行的测试工作。

地位：

2、主要任务

单元测试针对每个程序的模块，主要测试如下 5 方面：
模块接口 对模块接口进行测试，检查进出程序单元的数据流是否正确。须在其它测试之前进行。 局部数据结构 测试模块内部的数据能否保持完整性，包括内部数据的内容、形式及相互关系不发生错误。 边界条件 采用边界值分析方法设计测试用例，重点关注程序边界处。 独立的路径（路径测试） 针对程序路径进行测试，尤为重要。重点关注由于计算错误、不正确的判定或不正常的控制流而产生的错误。 错误处理（出错处理） 重点关注模块在工作中发生错误时，出错处理设施是否有效。

3、执行过程

模拟一个大环境中的情况

（七）集成测试

1、概述

集成测试(Integration test) 也叫组装测试或联合测试，是在单元测试的基础上，将所有模块按照设计要求集成为系统或子系统，并进行测试。用于验证程序和概要设计说明的一致性。

2、基于分解的集成

非渐增式集成 定义：又叫大爆炸集成(Big-bang Integration)，把所有通过了单元测试的模块按设计要求，一次全部组装起来，然后进行整体测试。目的：尽可能缩短测试时间，使用最少的测试用例验证系统。特点：急于求成。 具体方法：假设要对某个系统的部分功能进行测试，其功能分解如图所示： 渐增式集成 定义：从一个模块开始，测一次添加一个模块，边组装边测试，以发现与接口相联系的问题。 集成方式： 1、自顶向下集成 2、自底向上集成适用范围：底层模块接口比较稳定的产品；高层模块接口变更比较频繁的产品；底层模块开发和单元测试工作完成较早的产品。

3、三明治集成一般对软件结构的上层使用自顶向下结合的方法；对下层使用自底向上结合的方法；

3、基于调用图的集成

基于调用图的集成有两种： 成对集成 相邻集成

1、成对集成 成对集成的思想就是免除桩/驱动器开发工作，使用实际代码来代替桩/驱动器。成对集成的方法就是对应调用图的每一个边建立并执行一个集成测试会话。 2、相邻集成 相邻节点：有向图中，节点邻居包括所有直接前驱节点和直接后继节点。相邻集成：可大大降低集成测试的会话数量，并可避免桩和驱动器的开发。相邻集成本质上是三明治集成。相邻集成具有“中爆炸”集成的缺陷：隔离困难。

4、基于路径的集成

1、基本概念 MM-路径 Paul C.Jorgensen 提出，Message Method； MM-路径是穿插出现模块执行路径和消息的序列；给定一组单元，其 MM-路径图是一种有向图，其中节点表示模块执行路径，边表示消息和单元之间的返回。

注意：MM-路径不是可执行路径，描述单元之间的控制转移。对于传统软件来说，MM-路径永远是从主程序开始，在主程序中结束。

2、MM-路径复杂度

MM-路径复杂度： V（G）= e – n + 2p V（G）= e – n + 2 （对于结构化过程代码，p=1）

优点： MM-路径是功能性测试和结构性测试的一种混合。基于路径的集成测试既适用于采用传统瀑布过程开发的软件，也适用于采用基于合成可选的生命周期模型开发的软件。缺点：需要更多的工作量标识 MM-路径。

（八）系统测试

1、基本概念

系统测试：将整个软件系统看做一个整体进行测试，包括对功能、性能等，以及将计算机硬件、某些支持软件、数据和人员等系统元素结合起来，在实际运行环境下对软件进行测试。

2、测试内容

1、功能测试

功能测试主要是对产品的各功能点进行验证。根据需求规格说明书和功能测试用例，逐项测试以检查产品是否达到用户的要求。 2、界面测试

思考范围风格（主色调、背景）正确性（标志、文字、图片、弹出的提示信息）一致性（单一页面、多个页面）合理性（布局、工具栏图标、放大缩放时）美观协调等等

3、易用性测试 易用性测试：从软件的使用合理性和方便性等角度对软件系统进行检查，来发现软件不方便用户使用的地方。

易见 Easy to discover：单单凭观察，用户就应知道设备的状态，该设备供选择可以采取的行动。 易学 Easy to learn：不通过帮助文件或通过简单的帮助文件，用户就能对一个陌生的产品有清晰的认识。 易用 Easy to use：用户不翻阅手册就能使用软件。

4、兼容性测试 软件兼容性：一般来说，兼容性指能同时容纳多个方面，在计算机术语上兼容是指几个硬件之间、几个软件之间或是软硬件之间的相互配合程度。 兼容性测试：指测试软件在特定的硬件平台上、不同的应用软件之间、不同的操作系统平台上、不同的网络等环境中是否能很好地运行的测试。 配置测试：配置测试是指验证在不同的硬件配置和软件配置下，应用程序能否正常工作。

（九）Web 系统测试

Web 系统的测试范围

功能测试性能测试（负载/压力）用户界面测试/易用性测试安全性测试兼容性测试接口测试

功能测试：

页面内容测试 内容测试用来检测 Web 应用系统提供信息：正确性、准确性、相关性 ** 页面链接测试** 链接是 Web 应用系统的一个主要特征。链接将作为一个独立的项目进行测试。 检查内容：测试所有链接是否能正确链接；测试所链接的页面是否存在；保证 Web 应用系统上没有孤立的页面，所谓孤立页面是指没有链接指向该页面。 表单测试 当用户注册、登录、信息提交等，必须测试提交操作的完整性，以校验提交给服务器的信息的正确性。 ** Cookies 测试、Session 测试** Cookies 通常用来存储用户信息和用户在某个应用系统的操作。 PHP 从 4.1 开始支持 Session 管理。 设计语言测试 Web 设计语言版本的差异可以引起客户端或服务器端严重的问题，例如使用哪种版本的 HTML 等。 数据库测试 在使用了数据库的 Web 应用系统中，可能发生两种错误： 数据一致性错误：由于用户提交的表单信息不正确而造成的。 输出错误：由于网络速度或程序设计问题等引起的。

安全测试

安全测试：检查系统对非法侵入的防范能力。目的：验证安装在系统内的保护机制能否在实际中保护系统且不受非法入侵，不受非法干扰。（应对入侵、自我防护和应变）

测试内容 目录正确设置目录。不能通过简单的 URL 替换和推测暴露整个 Web 目录。严格设置 Web 服务器的目录访问权限，不会显示该目录下的所有内容。登录验证用户身份，阻止非法用户登录。 日志文件 日志文件对保证 Web 应用系统的安全性是至关重要的。需要测试相关信息是否写进了日志文件、是否可追踪。在后台，要注意验证服务器日志工作正常。 数据加密 当使用了安全套接字时，还要测试加密是否正确，检查信息的完整性。 脚本语言 跨站点脚本执行过程 SSL 使用 SSL（Security Socket Layer）安全协议进行传送用户信息。使用 SSL 在 HTTP 层和 TCP 层之间建立用户和服务器之间的加密通信，利用公开密钥/私有密钥的加密技术，确保所传送信息的安全性。

易用性测试

导航测试 导航是否直观？ Web 系统的主要部分是否通过主页存取。 Web 系统的页面结构、导航、菜单、连接的风格是否一致。 Web 应用系统导航帮助要尽可能的准确。 图形测试 一个 Web 应用系统的图形可以包括图片、动画、边框、颜色、字体、背景、按钮等。 内容测试 检验 Web 提供信息的正确性；检验 Web 提供信息的准确性；检验 Web 提供信息的相关性。 整体界面测试 整体页面结构设计界面内容测试是否能给用户一个整体感

兼容性测试

1、跨平台测试 2、浏览器测试 3、分辨率测试 4、连接速率测试 5、组合测试

接口测试

1、服务器接口 2、外部接口 3、错误处理

性能测试

连接速度测试 Web 系统的响应时间超时的限制 负载测试 性能测试是通过自动化的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试。 时间性能：软件的一个具体事务的响应时间 空间性能：软件运行时所消耗的系统资源

一般性能测试：验证软件在正常环境和系统条件下重复使用时是否还能满足性能指标，如运行速度、响应时间、占有系统资源等，不施加任何压力。 可靠性测试：从验证的角度出发，检验系统的可靠性是否达到预期的目标，同时给出当前系统可能的可靠性增长情况。 负载测试 让被测系统在其能忍受的压力的极限范围之内连续运行，来测试系统的可靠性。

压力测试 概念：压力测试是持续不断地给被测系统增加压力，直到将系统压垮为止，用来测试系统所能承受的最大压力。实际破坏一个 Web 应用系统。压力测试是测试系统的限制和故障恢复能力，也就是测试 Web 应用系统会不会崩溃，在什么情况下会崩溃。

关注点：瞬间访问高峰每个用户传送大量数据长时间使用

内容： 重复测试 一遍又一遍地执行某个操作或功能。这将确定一个操作能否正常执行，并且能否继续在每次执行时都表现正常。 并发测试 就是在同一时间内执行多个操作。由并发引起的错误只能通过执行多个代码示例才能测出来，测试时要同时遍历多条代码路径。 量级增加 随机变化 改变数据的大小、改变时间延迟的长度、输入速度及变化.

测试工具 LoadRunner 性能测试工具原理：录制+回放模拟用户实际操作场景，监控并分析运行结果。

网页性能 Firefox 插件：Yslow，Findbug，PageSpeed Dynatrace 检查网页性能 前端性能检测工具 dynaTrace 是一个运行在 IE 下的免费的性能分析工具，可以分析页面渲染时间、DOM 方法执行时间、js 的解析时间等。

（十）自动化测试

1、基本概念与认识

概念：通过测试工具或其他手段来部分替代手工测试，并按照测试工程师预定计划进行自动测试的活动。

目的：提高测试质量；减少测试过程中的重复劳动；实现测试自动化；

自动化测试用于发现老缺陷；手工测试用于发现新缺陷。

优缺点： 测试自动化能：显著降低重复手工测试的时间建立可靠、重复的测试，减少认为错误增强测试质量和覆盖率 测试自动化不能：完全替代手工测试和手工测试工程师保证 100%的测试覆盖率弥补测试实践的不足

自动测试技术的发展

2、测试工具分类

白盒测试工具 黑盒测试工具 性能测试工具 用于测试管理（测试流程管理、缺陷跟踪管理、测试用例管理）的工具

3、自动化测试的基本原理

录制在测试者运行应用程序的时，把所有动作，包括键盘操作、鼠标点击等捕获下来，生成一个脚本文件。回放录制的脚本可以被“回放”。 脚本修改机制 根据测试需求，对脚本进行一些必要的修改。

Snofly

多米诺骨牌分治法求最大合

前言

正文

题目

分析

代码

社区提问注意事项

前言

译者述

译文

先自己尝试解决

缩小问题范围

提供足够的细节

别懒

有耐心

计算机组成原理知识体系

一、计算机系统概述

（一）组成部分

（二）冯·诺依曼结构

（三）计算机发展时间节点

（四）典型计算机的硬件组成

（五）三种程序

二、计算机性能评价

（一）评价指标

（二）部分数值计算

三、数据的机器级表示

（一）数值数据表示

（二）非数值数据表示

（三）数据的宽度、存储排列、纠/检错

四、运算方法及部件

（一）高级语言和机器指令中的运算

（二）ALU（划重点）

（三） 定点数运算及其运算部件

（四） 浮点数运算及其运算部件

五、指令系统

指令

（二）指令类型和格式

（三）数据类型

（四）操作数的寻址方式

（五）操作码的编码

（六）指令系统

六、CPU

（一）单周期数据通路的设计

（二）单周期控制器的设计

（三）微程序控制器设计与异常处理

（四）多周期处理器

软件体系结构

一、绪论

1、发展史

2、定义(组成派)

二、软件体系结构风格

1、体系结构风格

2、经典的体系结构风格

三、数据流体系结构风格

1、理解

2、批处理体系结构风格

3、管道-过滤体系结构风格

CSS 学习笔记

CSS 语法

CSS 结构

CSS 属性

高级用法

link 外部链接

创建 first.css 文件

使用 class

text-decoration

字体设置

盒模式

页面

浮动布局设计

流

CSS 基础

前言

作者述

预备知识

本文目标

CSS 历史版本

关于 web 标准

关于 CSS 版本

（三）定点数运算及其运算部件

（四）浮点数运算及其运算部件