《互联网产品的客户端架构·端形态与体验基础》4.1 视图、状态、领域与数据访问

// file: src/layers/responsibility.ts
// tier: L1
// verify: node --test test/layers/responsibility.test.ts

export type Layer = "view" | "state" | "domain" | "data";

export interface LayerDuty {
  /** 这一层拥有的关注点 */
  owns: string[];
  /** 这一层明确不负责的关注点 */
  forbids: string[];
}

/**
 * 四层的职责表。判断一个操作属于哪一层，先看它触碰了哪些关注点，
 * 再看这些关注点是否被目标层明确禁止。
 */
export const DUTIES: Record<Layer, LayerDuty> = {
  view: {
    owns: ["render", "input-events", "ephemeral-ui-state"],
    forbids: ["business-rule", "remote-io", "persistence"],
  },
  state: {
    owns: ["page-state", "commands", "projection"],
    forbids: ["render", "remote-io", "persistence", "business-rule"],
  },
  domain: {
    owns: ["business-rule", "invariant", "calculation"],
    forbids: ["render", "remote-io", "persistence", "import-view"],
  },
  data: {
    owns: ["remote-io", "local-persistence", "serialization", "cache"],
    forbids: ["business-rule", "render", "page-state"],
  },
};

export interface OperationFacts {
  /** 操作名，用于报告与测试定位 */
  name: string;
  /** 是否产出界面输出 */
  renders: boolean;
  /** 是否持有滚动位置、展开状态这类短命 UI 状态 */
  keepsEphemeralUiState: boolean;
  /** 是否负责协调一次页面级流程 */
  coordinatesPage: boolean;
  /** 是否包含业务规则、约束或不变量 */
  enforcesBusinessRule: boolean;
  /** 是否执行网络、存储或序列化 I/O */
  performsIo: boolean;
}

export interface Placement {
  operation: string;
  layer: Layer;
  reasons: string[];
  /** 与目标层冲突的关注点，非空表示这个操作应当拆分 */
  split: string[];
}

/**
 * 把操作事实判给唯一一层。
 * 判定顺序渲染 > I/O > 规则 > 编排，因为越靠前的关注点越难被其他层安全吸收。
 */
export function placeOperation(facts: OperationFacts): Placement {
  const reasons: string[] = [];
  const split = new Set<string>();
  let layer: Layer;

  if (facts.renders) {
    layer = "view";
    reasons.push("产出界面输出，归视图层");
    if (facts.performsIo) split.add("view+io");
    if (facts.enforcesBusinessRule) split.add("view+rule");
    if (facts.coordinatesPage) split.add("view+state");
  } else if (facts.performsIo) {
    layer = "data";
    reasons.push("执行 I/O，归数据访问层");
    if (facts.enforcesBusinessRule) split.add("data+rule");
    if (facts.coordinatesPage) split.add("data+state");
    if (facts.keepsEphemeralUiState) split.add("data+ui-state");
  } else if (facts.enforcesBusinessRule) {
    layer = "domain";
    reasons.push("包含业务规则，归领域层");
    if (facts.coordinatesPage) split.add("domain+state");
    if (facts.keepsEphemeralUiState) split.add("domain+ui-state");
  } else if (facts.coordinatesPage || facts.keepsEphemeralUiState) {
    layer = "state";
    reasons.push("只做页面编排或短命 UI 状态，归状态层");
  } else {
    layer = "state";
    reasons.push("没有命中渲染、I/O 或业务规则，按编排归入状态层");
    split.add("unclassified");
  }

  return {
    operation: facts.name,
    layer,
    reasons,
    split: [...split].sort(),
  };
}

/** 层等级：数字越大越靠外，依赖只允许从大指向小 */
export const LAYER_RANK: Record<Layer, number> = {
  view: 3,
  state: 2,
  domain: 1,
  data: 0,
};

export type CallViolationKind = "view-to-data" | "reverse-dependency" | "skip-layer";

export interface LayerCall {
  page: string;
  from: Layer;
  to: Layer;
  operation: string;
}

export interface CallViolation {
  page: string;
  operation: string;
  kind: CallViolationKind;
  path: string;
}

function classifyEdge(from: Layer, to: Layer): CallViolationKind | undefined {
  if (from === "view" && to === "data") return "view-to-data";
  if (LAYER_RANK[to] > LAYER_RANK[from]) return "reverse-dependency";
  if (LAYER_RANK[from] - LAYER_RANK[to] > 1) return "skip-layer";
  return undefined;
}

/**
 * 审计运行期调用边。只允许相邻向内：view -> state -> domain -> data。
 * 同层调用放行，因为层内协作不改变依赖方向。
 */
export function auditCalls(calls: LayerCall[]): CallViolation[] {
  const violations: CallViolation[] = [];
  for (const call of calls) {
    const kind = classifyEdge(call.from, call.to);
    if (!kind) continue;
    violations.push({
      page: call.page,
      operation: call.operation,
      kind,
      path: `${call.from}->${call.to}`,
    });
  }
  return violations.sort(
    (a, b) =>
      a.page.localeCompare(b.page) ||
      a.operation.localeCompare(b.operation) ||
      a.path.localeCompare(b.path),
  );
}

export interface PagePlan {
  page: string;
  placements: Placement[];
  violations: CallViolation[];
}

/** 为一个页面同时给出操作归属与调用审计结果 */
export function planPage(
  page: string,
  operations: OperationFacts[],
  calls: LayerCall[] = [],
): PagePlan {
  return {
    page,
    placements: operations.map(placeOperation),
    violations: auditCalls(calls.filter((call) => call.page === page)),
  };
}

node --test test/layers/responsibility.test.ts

✔ 四类单一职责操作分别落到四层 (0.559833ms)
✔ 渲染同时发请求时必须拆分，不能整体塞进视图层 (0.852833ms)
✔ 计算价格同时落库时必须拆分，数据层不吸收业务规则 (0.203ms)
✔ 没有任何关注点的操作被标为未分类，而不是假装有归属 (0.148458ms)
✔ 职责表把领域层的反向依赖写成明确禁止项 (0.179208ms)
✔ 逐层向内的调用链不产生违规 (0.187292ms)
✔ 视图直接访问数据层被判为 view-to-data (0.070791ms)
✔ 领域层反向依赖视图被判为 reverse-dependency (0.053958ms)
✔ 状态层绕过领域层直连数据层被判为 skip-layer (0.080542ms)
✔ 回声三个页面的越层调用可以被一次性列出来 (8.453584ms)
ℹ tests 10
ℹ suites 0
ℹ pass 10
ℹ fail 0
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 180.507959