长方形定义实战：从API崩溃到精通的避坑指南

版本升级后 API 全变了，代码直接报错让人崩溃，这种从入门到精通的断崖式体验，是每个开发者都躲不掉的劫。

别急着骂娘，这其实是技术栈演进的常态。就像我们今天要聊的长方形的定义，看似简单，但在工程化落地中，它往往成为连接业务逻辑与底层实现的枢纽。

很多新手以为长方形就是个 width 和 height 的容器，直到你接手一个老旧项目，发现它的属性被封装在三层继承里，或者在 TypeScript 类型系统中被 interface 和 class 撕扯得面目全非。

今天不讲虚的，我们直接用代码把长方形的定义剥开揉碎，看它如何在真实项目中从“玩具代码”变成“生产级组件”。

项目目标：不只是画个框

很多人对长方形的定义理解停留在几何学层面：对边相等且四个角都是直角的四边形。但在编程世界里，这个定义被赋予了更多工程意义。

我们的项目目标很明确：

构建一个高内聚低耦合的长方形模型：它不仅要能计算面积，还要能支持序列化、校验、以及未来可能的3D扩展。
解决版本升级带来的兼容性问题：模拟一个场景，旧版 API 是 new Rect(w, h)，新版变成了 Rect.create({ width, height, type: 'standard' })。我们要实现平滑迁移。
覆盖从入门到精通的核心知识点：包括 OOP 设计、TypeScript 类型体操、单元测试、以及性能优化。

为什么选长方形？因为它是 OOP 入门的经典案例，也是很多框架（如 Canvas、SVG、UI 组件库）的基础元素。把它的定义吃透，你对“对象”的理解就会上一个台阶。

目录结构：工程化的第一步

在写代码之前，先搭好骨架。一个没有目录结构的脚本，永远只是玩具。

project-rectangle/
├── src/
│   ├── core/
│   │   ├── Rectangle.ts      # 核心类定义
│   │   ├── types.ts          # 类型定义
│   │   └── validator.ts      # 数据校验逻辑
│   ├── api/
│   │   ├── legacy.ts         # 旧版 API 兼容层
│   │   └── modern.ts         # 新版 API 入口
│   └── index.ts              # 统一导出
├── tests/
│   └── Rectangle.test.ts     # 单元测试
├── package.json
└── tsconfig.json

关键点解析：

core/ 目录：存放纯逻辑代码，不依赖任何 UI 或网络库。这是“长方形定义”的核心，必须保持稳定。
api/ 目录：这是应对“版本升级 API 全变了”的缓冲层。旧代码调用 legacy.ts，新代码调用 modern.ts，内部都指向 core。
types.ts：在 TypeScript 项目中，类型即文档。把长方形的定义写成接口，比写在注释里靠谱一万倍。

核心代码实现：逐行拆解定义

现在进入正题。我们不用 JavaScript，直接用 TypeScript，因为现代前端和 Node.js 后端都离不开它。

1. 类型定义：什么是长方形？

// src/core/types.ts/*** 长方形的基础几何属性* 这里明确定义：长和宽必须是非负数*/
export interface IRectangleProps {width: number;height: number;// 预留扩展字段，比如颜色、透明度，为未来3D或UI场景做准备color?: string;opacity?: number;
}/*** 新版 API 的工厂参数* 注意：这里强制要求 type，区分标准长方形和特殊长方形（如正方形）*/
export interface ICreateParams extends IRectangleProps {type: 'standard' | 'square';
}

注意：很多人会在 Rectangle 类里直接写 width: number，但这是反模式。长方形的定义应该由类型系统来约束，而不是由运行时检查来兜底。

2. 核心类：封装逻辑

// src/core/Rectangle.tsimport { IRectangleProps } from './types';
import { validateDimensions } from './validator';/*** 长方形核心类* 设计原则：不可变性（Immutable）* 一旦创建，width 和 height 不可直接修改，必须通过方法生成新实例*/
export class Rectangle {private readonly _width: number;private readonly _height: number;private readonly _color: string;private readonly _opacity: number;constructor(props: IRectangleProps) {// 第一步：数据校验，拒绝非法输入// 这是防止 NaN 或负数进入计算的关键validateDimensions(props.width, props.height);// 第二步：赋值给私有字段this._width = props.width;this._height = props.height;this._color = props.color || '#000000';this._opacity = props.opacity ?? 1.0;}// 获取面积get area(): number {return this._width * this._height;}// 获取周长get perimeter(): number {return 2 * (this._width + this._height);}// 判断是否为正方形get isSquare(): boolean {return this._width === this._height;}/*** 缩放方法：返回一个新的 Rectangle 实例* 不修改原对象，避免副作用*/scale(factor: number): Rectangle {return new Rectangle({width: this._width * factor,height: this._height * factor,color: this._color,opacity: this._opacity});}/*** 序列化为 JSON，方便存储或传输*/toJSON(): IRectangleProps {return {width: this._width,height: this._height,color: this._color,opacity: this._opacity};}
}

逐行讲解重点：

private readonly：这是 TypeScript 提供的强约束。在编译阶段就阻止了 rect.width = 10 这种危险操作。很多老项目 API 崩溃，就是因为允许随意修改属性，导致状态不一致。
validateDimensions：我们把它抽离出去。如果未来长方形支持负坐标（比如从中心点向四周扩展），只需要改 validator，不用动核心类。
scale 返回新实例：这是函数式编程思想在 OOP 中的应用。旧代码可能习惯 rect.scale(2) 后直接复用 rect，新代码必须 const newRect = rect.scale(2)。这种不兼容正是“API 全变了”的根源之一。

3. 校验器：数据的守门员

// src/core/validator.tsexport function validateDimensions(width: number, height: number): void {// 检查是否为数字if (typeof width !== 'number' || typeof height !== 'number') {throw new TypeError('Width and height must be numbers');}// 检查是否为有限数（排除 NaN, Infinity）if (!Number.isFinite(width) || !Number.isFinite(height)) {throw new RangeError('Width and height must be finite numbers');}// 检查非负if (width < 0 || height < 0) {throw new RangeError('Width and height cannot be negative');}
}

运行与测试：用事实说话

代码写得再漂亮，没跑过就是空谈。我们用 Jest 来写测试，确保长方形的定义在边界情况下依然稳固。

// tests/Rectangle.test.tsimport { Rectangle } from '../src/core/Rectangle';describe('Rectangle Definition Tests', () => {it('should calculate area correctly', () => {const rect = new Rectangle({ width: 10, height: 5 });expect(rect.area).toBe(50);});it('should throw error for negative dimensions', () => {expect(() => new Rectangle({ width: -1, height: 5 })).toThrow(RangeError);});it('should be immutable after creation', () => {const rect = new Rectangle({ width: 10, height: 5 });// 尝试修改宽度，TS 编译会报错，JS 运行时虽然能改但属于脏操作// 这里我们测试 scale 是否返回新对象const scaledRect = rect.scale(2);expect(scaledRect).not.toBe(rect);expect(scaledRect.area).toBe(200);expect(rect.area).toBe(50); // 原对象不受影响});it('should handle serialization correctly', () => {const rect = new Rectangle({ width: 10, height: 5, color: 'red' });const json = rect.toJSON();const restored = new Rectangle(json);expect(restored).toEqual(rect);});
});

测试覆盖率要求： 核心类必须达到 100% 分支覆盖。任何没被测试到的逻辑，都是潜在的 Bug 源。

在 CSDN 等技术社区中，经常能看到开发者分享因缺少单元测试导致的线上事故。长方形的定义看似简单，但其边界条件（0 宽度、Infinity、NaN）往往是崩溃的重灾区。

优化扩展：从入门到精通的关键跃迁

现在，我们面临真实场景：版本升级后 API 全变了。

旧版代码可能是这样：

// 旧版风格：命令式、可变
const oldRect = new OldRectangle(10, 5);
oldRect.width = 20; // 危险操作！
console.log(oldRect.area);

新版代码要求：

// 新版风格：声明式、不可变
import { Rectangle } from './src';const newRect = Rectangle.create({width: 10,height: 5,type: 'standard'
});// 修改尺寸？不行，必须创建新实例
const updatedRect = newRect.scale(2);

兼容层设计：平滑迁移的桥梁

我们不能让所有旧代码一次性重构，太痛苦了。所以我们在 api/legacy.ts 中做一个适配器：

// src/api/legacy.tsimport { Rectangle } from '../core/Rectangle';/*** 模拟旧版 API 的兼容类* 继承自新的 Rectangle，但暴露可变接口* 警告：此层仅用于过渡，禁止在新代码中使用*/
export class LegacyRectangle extends Rectangle {constructor(width: number, height: number) {super({ width, height });}// 重写 setter，内部通过 scale 或重新创建来模拟可变性// 注意：这里为了兼容旧逻辑，我们允许直接赋值，但内部做代理set width(val: number) {// 实际上，真正的不可变对象不应该有 setter// 这里我们抛出一个警告，或者在内存中维护一个“虚拟”状态// 为了演示，我们直接修改内部引用（非推荐做法，仅用于兼容）console.warn('Legacy API: Direct modification is deprecated. Use scale() instead.');// 在真实项目中，这里应该触发一次重新实例化，或者使用 Proxy 拦截}
}

更高级的兼容方案：Proxy 拦截

// src/api/legacy.ts (优化版)import { Rectangle } from '../core/Rectangle';export function createLegacyRectangle(width: number, height: number) {const coreRect = new Rectangle({ width, height });// 使用 Proxy 拦截属性访问和赋值return new Proxy(coreRect, {get(target, prop) {const value = target[prop];if (typeof value === 'function') {return value.bind(target);}return value;},set(target, prop, value) {if (prop === 'width' || prop === 'height') {console.warn(`[Deprecation] Setting ${prop} directly is deprecated.`);// 这里无法真正修改 readonly 属性，但可以记录日志或抛出异常// 在严格模式下，应该抛出 TypeErrorthrow new TypeError(`Cannot modify property '${prop}' on immutable object`);}return true;}});
}

这个兼容层的价值：

渐进式迁移：旧代码可以暂时运行，但每次调用都会打印警告，提醒开发者重构。
零风险：核心 Rectangle 类保持纯净，不受旧逻辑污染。
数据支撑：你可以统计警告日志的频率，量化哪些模块迁移最慢，从而制定优先级。

性能优化：大列表渲染场景

如果你的项目中有一个“画布”组件，需要渲染 10,000 个长方形，直接 new Rectangle 10,000 次会有 GC 压力。

优化策略：对象池（Object Pool）

// src/core/Pool.tsimport { Rectangle, IRectangleProps } from './Rectangle';class RectanglePool {private pool: Rectangle[] = [];private readonly maxSize: number;constructor(maxSize: number = 1000) {this.maxSize = maxSize;}acquire(props: IRectangleProps): Rectangle {if (this.pool.length > 0) {const rect = this.pool.pop()!;// 重置属性，复用实例// 注意：由于 Rectangle 是不可变的，这里需要修改类设计以支持“重置”// 或者，池化只适用于可变对象// 对于不可变对象，池化意义不大，除非是高频创建销毁的场景return new Rectangle(props); }return new Rectangle(props);}release(rect: Rectangle): void {if (this.pool.length < this.maxSize) {this.pool.push(rect);}}
}

注意：对于不可变对象，池化通常不是最佳实践。但在高频动画帧中，可以考虑复用 Float32Array 等底层数据结构，而不是对象本身。这是从“入门”到“精通”的分水岭：理解何时该用 OOP，何时该用底层数据结构。