JS全栈项目中前后端共享类的跨环境差异化实现方案咨询

这确实是JS全栈开发里共享代码时很头疼的一个问题——既要复用大部分通用逻辑，又得处理服务端和客户端的差异化需求，现在靠命名约定加零散的环境判断，时间久了代码很容易变得混乱难维护。我分享几个在实际项目里验证过的更优方案，你可以根据自己项目的规模和技术栈来选：

1. 模块拆分：核心逻辑与环境逻辑彻底分离 #

把共享类拆成核心基类（只存放两端通用的常量、验证函数、元数据等）和环境专属子类（服务端/客户端各自实现差异化功能）。这种方式完全避免在核心代码里写环境判断，逻辑边界清晰，后期维护也更轻松。

举个实际代码例子：

// shared/base-model.js 核心基类：只保留通用逻辑
export class BaseModel {
  constructor(data) {
    this.validate(data);
    this.data = data;
  }

  validate(data) {
    // 通用验证逻辑，比如必填字段检查
    if (!data.id) throw new Error('ID is required');
  }

  get metadata() {
    return { version: '1.0' };
  }
}

// server/server-model.js 服务端专属子类
import { BaseModel } from '../shared/base-model.js';

export class ServerModel extends BaseModel {
  constructor(data) {
    super(data);
  }

  // 服务端专属方法：比如操作数据库
  async saveToDB() {
    await db.query('INSERT INTO models SET ?', this.data);
  }
}

// client/client-model.js 客户端专属子类
import { BaseModel } from '../shared/base-model.js';

export class ClientModel extends BaseModel {
  constructor(data) {
    super(data);
  }

  // 客户端专属方法：比如存储到localStorage
  saveToLocalStorage() {
    localStorage.setItem(`model-${this.data.id}`, JSON.stringify(this.data));
  }
}

之后在服务端直接导入ServerModel，客户端导入ClientModel即可，全程不用写环境判断。

2. 依赖注入：把环境逻辑作为参数传入 #

如果不想拆分类，可以把差异化功能抽象成函数/对象，在实例化类的时候根据环境注入进去。核心类只依赖约定好的接口，完全不用关心当前运行环境。

示例代码：

// shared/model.js 核心类：只处理通用逻辑，依赖注入的环境处理器
export class Model {
  constructor(data, envHandlers) {
    this.data = data;
    // 注入环境专属处理器，约定统一接口（比如save方法）
    this.envHandlers = envHandlers;
  }

  validate(data) {
    // 通用验证逻辑
    if (!data.name) throw new Error('Name is required');
  }

  // 统一调用入口，不用关心是服务端还是客户端实现
  async save() {
    await this.envHandlers.save(this.data);
  }
}

// server/index.js 服务端使用：注入服务端处理器
import { Model } from '../shared/model.js';

const serverHandlers = {
  async save(data) {
    await db.query('INSERT INTO models SET ?', data);
  }
};

const userModel = new Model({ id: 1, name: 'Oleg' }, serverHandlers);
await userModel.save();

// client/index.js 客户端使用：注入客户端处理器
import { Model } from '../shared/model.js';

const clientHandlers = {
  save(data) {
    localStorage.setItem(`user-${data.id}`, JSON.stringify(data));
    return Promise.resolve();
  }
};

const userModel = new Model({ id: 1, name: 'Oleg' }, clientHandlers);
await userModel.save();

这种方式还能方便单元测试——只需要注入mock处理器就能验证核心逻辑，不用依赖真实环境。

3. 环境专属文件+条件导入 #

利用JS模块的动态导入或者构建工具（Webpack/Vite等）的条件编译能力，把差异化代码放到单独文件，根据环境自动导入对应实现。

比如用原生JS的环境判断做动态导入：

// shared/model.js
let envImpl;

// 根据环境自动导入对应实现
if (typeof window === 'undefined') {
  // 服务端环境
  envImpl = await import('../server/model-impl.js');
} else {
  // 客户端环境
  envImpl = await import('../client/model-impl.js');
}

export class Model {
  constructor(data) {
    this.data = data;
    this.impl = new envImpl.ModelImpl(data);
  }

  validate() {
    // 通用逻辑
  }

  save() {
    return this.impl.save();
  }
}

// server/model-impl.js 服务端实现
export class ModelImpl {
  async save(data) {
    await db.query('INSERT INTO models SET ?', data);
  }
}

// client/model-impl.js 客户端实现
export class ModelImpl {
  save(data) {
    localStorage.setItem(`model-${data.id}`, JSON.stringify(data));
  }
}

如果用Vite/Webpack这类构建工具，还能通过条件编译在打包阶段就剔除不需要的代码，减少体积：

// shared/model-impl.js 条件导出
#if process.env.NODE_ENV === 'server'
export { ModelImpl } from '../server/model-impl.js';
#else
export { ModelImpl } from '../client/model-impl.js';
#endif

4. 封装环境工具，消除零散判断（过渡方案） #

如果暂时不想大规模重构，可以先把环境判断逻辑封装成工具函数，再把差异化方法集中管理，避免到处写this[(isServer ? '__save' : '_$save')]()这种晦涩的代码。

示例：

// shared/env-utils.js 封装环境判断工具
export const isServer = typeof window === 'undefined';
export const getEnvMethod = (obj, serverKey, clientKey) => {
  return isServer ? obj[serverKey] : obj[clientKey];
};

// shared/model.js 集中处理差异化方法
import { isServer, getEnvMethod } from './env-utils.js';

export class Model {
  constructor(data) {
    this.data = data;
  }

  validate() {
    // 通用逻辑
  }

  // 服务端专属方法
  __saveToDB() {
    return db.query('INSERT INTO models SET ?', this.data);
  }

  // 客户端专属方法
  _$saveToLocal() {
    localStorage.setItem(`model-${this.data.id}`, JSON.stringify(this.data));
    return Promise.resolve();
  }

  // 统一入口，调用对应环境的方法
  async save() {
    const saveMethod = getEnvMethod(this, '__saveToDB', '_$saveToLocal');
    await saveMethod.call(this);
  }
}

这种方式能快速提升代码可读性，也为后续的大规模重构打下基础。

内容的提问来源于stack exchange，提问作者Oleg Imanilov