Symfony+Webpack环境下，如何在ES6类中传入Routing模块无需控制器介入

这里有几个实用的方案，能让你在Template类里用上Routing模块，完全不用依赖控制器：

方案1：构造函数注入（推荐，可测试性强） #

这种方式最直接，把初始化好的Routing实例通过构造函数传给Template类，保证类的依赖清晰。

修改Template.js #

module.exports = class Template {
  // 在构造函数里接收Routing参数
  constructor(routing) {
    // 把Routing存为实例属性，方便类内方法调用
    this.routing = routing;
  }

  // 示例方法：使用Routing生成URL
  generateUrl(routeName, params = {}) {
    return this.routing.generate(routeName, params);
  }
}

在index.js中传入Routing #

import Routing from '../../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
// 先初始化Routing数据
Routing.setRoutingData(routes);
// 导入Template类
const Template = require('../Template.js');

// 创建Template实例时，把初始化好的Routing传进去
const myTemplate = new Template(Routing);
// 现在就能调用类内方法使用Routing了
const userUrl = myTemplate.generateUrl('user_profile', { id: 123 });

方案2：静态属性赋值（适合单例场景） #

如果你整个应用里只需要一个Routing实例，且Template类不需要频繁实例化，可以给类设置静态属性，一次性赋值后全局可用。

修改Template.js #

module.exports = class Template {
  // 声明静态属性，用于存储Routing实例
  static routing;

  static generateUrl(routeName, params = {}) {
    // 直接通过类本身访问静态属性
    return Template.routing.generate(routeName, params);
  }
}

在index.js中赋值静态属性 #

import Routing from '../../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
Routing.setRoutingData(routes);
const Template = require('../Template.js');

// 给Template类的静态routing属性赋值
Template.routing = Routing;

// 调用静态方法使用Routing
const productUrl = Template.generateUrl('product_detail', { slug: 'my-product' });

方案3：简易依赖注入容器（适合多类共享服务） #

如果你的项目中有多个类都需要用到Routing（或者其他服务），可以建一个简单的依赖容器来管理这些实例，避免重复传参。

第一步：创建services.js #

// 存储服务实例的对象
const serviceContainer = {};

// 注册服务的方法
function registerService(serviceName, serviceInstance) {
  serviceContainer[serviceName] = serviceInstance;
}

// 获取服务的方法
function getService(serviceName) {
  if (!serviceContainer[serviceName]) {
    throw new Error(`Service ${serviceName} not registered!`);
  }
  return serviceContainer[serviceName];
}

module.exports = { registerService, getService };

第二步：在index.js中注册Routing #

import Routing from '../../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
const { registerService } = require('./services.js');

Routing.setRoutingData(routes);
// 把Routing注册到容器里，命名为'routing'
registerService('routing', Routing);

第三步：在Template.js中获取Routing #

const { getService } = require('./services.js');

module.exports = class Template {
  constructor() {
    // 从容器中获取Routing实例
    this.routing = getService('routing');
  }

  generateUrl(routeName, params = {}) {
    return this.routing.generate(routeName, params);
  }
}

每种方案都有自己的适用场景：

• 构造函数注入是最符合依赖倒置原则的写法，方便后续单元测试（可以轻松替换模拟的Routing实例）。
• 静态属性赋值最简洁，适合简单的单页应用或不需要多实例的场景。
• 依赖容器适合中大型项目，能统一管理所有共享服务，避免代码冗余。

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