Angular如何临时替换JS文件函数为浏览器端用户修改版本

整套方案所有逻辑都在当前用户的浏览器内存中运行，不会修改服务端静态资源，天然实现用户间隔离，不会影响其他访问者，具体实现分三步：

1. 抽离公式代理层，移除硬编码依赖 #

不要在业务代码里直接import静态x.js/y.js里的函数——Angular构建时会把这类硬引入的代码打包进产物，无法在运行时灵活替换。

• 新建全局单例的FormulaService，内部维护一个Map<string, Function>结构存储所有计算公式，key为公式名（比如X/Y），value为对应的可执行函数
• 应用正常启动时，将默认打包的X、Y等静态函数初始化存入这个Map
• 所有业务场景需要计算参数时，统一从FormulaService取对应函数执行，不要直接引用静态文件里的函数
• 预览模式下只需要替换Map中对应key的函数引用即可，替换操作仅作用于当前用户当前标签页的服务实例，刷新页面就会恢复默认值，完全不会影响其他用户

2. 安全解析用户编辑的代码文本为可执行函数 #

不要直接用eval解析用户输入的代码，用new Function()构造沙箱化的可执行函数，既可以拿到函数引用，也能限制代码权限规避XSS风险：

/**
 * 解析用户编辑的公式代码为可执行函数
 * @param paramList 公式依赖的参数列表，比如X函数对应['A', 'B']
 * @param codeContent 编辑器中用户输入的函数体代码文本
 */
function parseUserFormula(paramList: string[], codeContent: string): Function {
  // 严格模式下执行，封锁敏感全局变量访问权限
  const functionBody = `"use strict";
  const window = undefined, document = undefined, localStorage = undefined;
  ${codeContent}
  `;
  return new Function(...paramList, functionBody);
}

// 示例：用户修改完X函数后，替换服务中存储的X引用
const newXFunc = parseUserFormula(['A', 'B'], 'return A + B * 1.5;');
formulaService.formulaMap.set('X', newXFunc);

解析前可以加一层语法校验，用try/catch包裹new Function的构造过程，用户代码存在语法错误时直接抛出提示，阻断试运行流程。

3. 维护公式依赖顺序，保证计算正确性 #

因为公式之间存在依赖关系（比如示例中Y依赖X的计算结果），需要维护依赖关系保证计算顺序正确：

• 每次新增/替换公式时，根据函数的参数列表构建依赖图，标记每个公式依赖的其他计算项
• 执行计算前对依赖图做拓扑排序，从用户手动输入的无依赖参数（比如A、B）开始，按顺序依次传入依赖参数执行对应函数
• 被依赖的公式更新后，后续关联公式的计算会自动使用新值，不需要额外修改关联公式的逻辑

补充说明 #

• 不需要修改Angular构建产物、不需要动态插入全局script标签，纯内存层面的替换性能最高、隔离性最好
• 如果需要支持用户保存自定义公式，只需要把用户编辑的代码字符串上传到后端存储，下次加载时拉取代码解析为函数存入Map即可
• 整个预览、试运行流程完全在用户本地浏览器完成，不需要请求后端执行计算，响应速度快也不会占用服务端资源

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