一、什么是 ECS?

ECS 是一种在游戏开发中非常流行的架构模式。它的主要思想是组合比更好继承通过将实体的数据与逻辑完全分离，来获得极高的灵活性、可重用性和性能。

使用者痛点：很多开发者在传统面向对象模型里会遇到「类层次过深」导致代码难以维护，还有「对象实例化」带来的性能开销。ECS 正是为了解决这些痛点而生。

我将分步创建一个清晰的、带有详尽中文注释的实现，并最终给出一个完整的运行示例。

二、主要概念定义

ECS 的三个主要元素：

• 实体 : 仅仅是一个唯一的 ID。像一个空壳容器，用来关联一组组件。其实，
• 组件 : 纯粹的数据载体。不包含任何逻辑，例如 PositionComponent 只存储 x 和 y 坐标。
• 程序 : 包含所有逻辑的地方。它会查询所有拥有特定组件组合的实体，并对它们的数据处理一下。

使用者痛点：在实际项目中，往往会出现「组件耦合」或「程序重复遍历」的问题。下面的实现通过 Map 索引和 Set 判断，减少了全局遍历带来的性能瓶颈。

三、代码示例

我们将创建以下几个文件来建立我们的迷你 ECS 框架：

1. Entity.ts: 定义实体的类型。
2. Component.ts: 定义组件和一些具体的组件示例。
3. System.ts: 定义程序的抽象基类。
4. ECSWorld.ts: 整个 ECS 框架的主要管理器。
5. Main.ts: 使用我们框架的完整示例。

Entity.ts

在 ECS 模式中。实体仅仅是一个唯一的标识符，通常是一个数字。它本身不包含任何数据或逻辑。实体通过附加不同的组件来获得数据和行为。

export type Entity = number;

Component.ts

组件是纯粹的数据容器。只包含数据，不应包含业务逻辑。例如位置、速度、生命值等都可以作为组件。

// 通用组件类构造函数类型，方便程序进行类型约束
export type ComponentClass = new => T;

具体示例组件

// VelocityComponent.ts
/**
* 速度组件
* 存储实体在二维空间中的速度矢量。*/
export class VelocityComponent {
constructor {}
}
// RenderableComponent.ts
/**
* 可渲染组件
* 简化为一个字符，用于控制台“绘制”。*/
export class RenderableComponent {
constructor {}
}
// PositionComponent.ts
/**
* 位置组件
* 存储实体在二维空间中的坐标。*/
export class PositionComponent {
constructor {}
}
// HpComponent.ts
/**
* HP 组件
* 存储实体当前血量与最大血量。*/
export class HpComponent {
constructor {}
}

System.ts

程序负责遍历符合条件的实体并执领域务逻辑，是 ECS 中唯一包含行为代码的位置。

import { Entity } from './Entity';import { ComponentClass } from './Component';import { ECSWorld } from './ECSWorld';export abstract class System {
/** 构造函数 */
constructor {}
/** 子类必须声明感兴趣的组件集合 */
public abstract readonly requiredComponents: Set;/** 每帧调用一次 */
public abstract update: void;老实说，}

具体示例程序

// MovementSystem.ts
import { ComponentClass } from '../Component/Component';import { System } from '../System/System';import { PositionComponent } from '../Component/PositionComponent';import { VelocityComponent } from '../Component/VelocityComponent';import { Entity } from '../Entity/Entity';/** 移动程序：更新拥有 Position 与 Velocity 的实体位置 */
export class MovementSystem extends System {
public readonly requiredComponents = new Set;public update: void {
console.log;for {
const pos = this.world.getComponent!，const vel = this.world.getComponent!，pos.x += vel.dx * dt;pos.y += vel.dy * dt;console.log},${pos.y.toFixed})`);}
}
}
// RenderSystem.ts
import { ComponentClass } from '../Component/Component';import { System } from '../System/System';import { PositionComponent } from '../Component/PositionComponent';import { RenderableComponent } from '../Component/RenderableComponent';import { Entity } from '../Entity/Entity';/** 渲染程序：打印拥有 Position 与 Renderable 的实体信息 */
export class RenderSystem extends System {
public readonly requiredComponents = new Set;public update: void {
console.log;for {
const pos = this.world.getComponent!，const rend = this.world.getComponent!，console.log},${pos.y.toFixed}) 渲染出 ${rend.sprite}`);}
}
}
// DamageSystem.ts
import { ComponentClass } from '../Component/Component';import { System } from '../System/System';import { HpComponent } from '../Component/HpComponent';import { Entity } from '../Entity/Entity';/** 伤害程序：每帧让拥有 HP 的实体受到固定伤害 */
export class DamageSystem extends System {
public readonly requiredComponents = new Set;public update: void {
console.log;for {
const hp = this.world.getCompone nt!，说起来，hp.current -= 10 * dt;// 每秒扣除10点血量
console.log}`);if {
console.log;this.world.destroyEntity;}
}
}
}

ECSWorld.ts

ECSWorld 是整个框架的心脏，负责管理实体、组件还有程序之间的数据流动。它提供创建/销毁实体、增删改查组件还有统一调度程序的方法。

import { Entity } from './Entity/Entity';import { System } from './System/System';不过，import { ComponentClass } from './Com ponent/Compone nt';export class ECSWorld {
// 唯一 ID 自增生成器
private nextEnt ityId : Entity =1;
// 活跃实体集合
private entities :Set = newSet;// componentStores => Map
private componentStores :Map ,Map =newMap;// 注册好的程序列表
private systems : System =;// ---------- 实体 ----------
public createEn ti ty: Entity{
const e=this.nextEnt ityId++;this.entities.add;return e，}
public destroyEnti ty:void{
if) return;for){
store.delete;按理说，}
this.entities.delete;}
// ---------- 组 件 ----------
public addCompon ent:void{
const ctor=component.constructor as ComponentClas s;if){
this.componentStores .set);}
this.componentStores .get!.set，}
public removeComp onent:void{
const store=this.componentStores .get;store，怎么说呢，.delete;}
public getComp one nt:T|undefin ed{
const store=this.componentStores .get;return store?store.get:undefined;}
public hasCompon ent:boolean{
const store=this.componentStores .get;return，!store，.has;}
// ---------- 程序 ----------
publi c addS ystem:void{
this.systems.push;}
/** 主循环入口：遍历所有注册程序并传递符合条件 的实体集合 */
pu blic upda te:void{
for{
const relevant=newSet 

Main.ts

下面演示如何使用上面的框架搭建一个简易游戏场景。包括玩家、敌人和静态物体，并让移动、渲染还有伤害三套程序协同工作。怎么说呢，

/** 完整演示入口 */
import{ECSWorld}from'./ECSWor ld';import{HpC omponent}from'./Com ponent/HpC omponent';import{Rend erabl eComp onent}from'./Co mponent/Re nd ableC omp o nent';import{Pos itionC omponent}from'./Co mponent/P osi tionC om p o nent';import{Vel ocityC omp onent}from'./Co mponent/V el ocity C omp onent';import{Movemen tSys tem}from'./Sy stem/Mo vemen tSys tem';老实说，import{Ren derS ystem}from'./Sy stem/Re nd erS ystem';import{Dama geS ystem}from'./Sy stem/Dam ageS ystem';老实说，function main{
console.log;const world=new EC SWorld;
 // ---------- 创建实体 ----------
const player=world.c reateEnt ity;world.addCo mp o nent);world.addCo mp o nent);world.addCo mp o nent);world.addCo mp o nent);const enemyA=world.crea teEnt ity;world.addCom pon ent);world.addCo mp o nent);world.addCo mp o nent);world.addCom pon ent);const tree=world.crea teEnt ity;world.addCo mp o n ent);world.addCo mp o n ents);console.log，// ---------- 注册系 統 ----------
world.addSys tem);world.addSys tem);world.addSys tem);说起来，console.l og;// ---------- 简易游戏循环 ----------


let frame=0;说起来，const loop=setIn terval=>{
frame++;不过，const dt=0.5;// 假设每帧间隔0.5秒
 console.l og ===`);wor ld.upda te;if{clearInt erv al;console.l og;}


},500);// 每500ms模拟一次帧

}
main;


四、常见痛点与解决思路


痛点一：找不到某个实体是否拥有所需组件？手动遍历数组会导致 O 性能下降。再看方法，在 ECSWorld.hasCompone nt 中使用 Map 快速 O 判断。实现了高效过滤，

痛点二：调试时不知道哪些程序正在处理哪些实体 容易产生“黑盒”感。从方法来看，每个程序在 .update 开头打印日志。并展示匹配到的实体 ID 与关键属性，让调试过程透明化。

痛点三：新增业务需求时要改动大量已有类 ——典型“侵入式”修改导致回归风险。方法这方面，ECS 天然支持“组合”。只需新建一个 Component 与对应 System。即可无缝
功能，无需触碰已有代码。

痛点四：大规模实例化导致 GC 压力 ——频繁创建 / 销毁对象会拖慢帧率。至于方法，采用轻量级结构并把实例复用放在 ObjectPool。显著降低 GC 次数，



五、完整源码概览

以下为项目目录结构及全部文件内容：


/src/Entity.ts 

/src/Comp onent/Comp onent.t s 

/src/C omp onent/Po si tionC omp onents.t s 

/src/C omp onen t/V elocity Co mponents.t s 

/src/C ompon en t/Ren d able C omponents.t s 

/src/C omp onen t/H p C omp one nts.t s 

/src/Sys tem/Sy stem.t s 

/src/Sys tem/M ovemen tSys tem.t s 

/src/Sys tem/Re nd erS ystem.t s 

/src/Sys tem/D amage Sys tem.t s 

/src/E CSWor ld.t s 

/src/Mai n.t s 


六、

ECS 把数据与行为彻底解耦让你可以像搭积木一样自由组合功能；凭借 Map+Set 的索引结构，有效规避了传统 O 的遍历成本。这样就能实现高性能、高可维护性的游戏或仿真引擎。如果你仍然卡在「如何组织复杂业务？」或者「性能瓶颈在哪里，」这两个常见痛点上，不妨尝试这篇文章提供的 TypeScript 实现。一键上手并逐步迭代你的项目结构。

如果你喜欢本教程，记得点赞+收藏！关注我获取更多 JavaScript / TypeScript 开发干货 🚀​.