依赖注入在前端应用中的巧妙运用

坐地铁通勤时，总能看到有人对着手机皱眉改代码。前端开发不像写文档，改一处可能牵动全身。尤其项目一变大，组件之间互相调用，逻辑缠得像耳机线。这时候，依赖注入就像个智能收纳盒，把乱糟糟的依赖关系理得清清楚楚。

什么是依赖注入

简单说，依赖注入就是不自己创建对象，而是由外部把需要的服务“递”给你。比如你去便利店买早餐，不用从种小麦开始，直接付钱拿货。前端里，一个组件要调用 API，传统做法是自己 new 一个服务实例，但现在更流行让框架把服务“塞”进来。

在 Vue 中的使用场景

比如你在做一个旅行路线推荐页，多个子组件都要获取用户定位。如果每个都自己写一次定位逻辑，既重复又难维护。用 Vue 的 provide/inject，父组件把定位服务交给“上下文”，子组件直接申领：

// 父组件
export default {
  provide() {
    return {
      locationService: this.locationService
    };
  },
  data() {
    return {
      locationService: new LocationAPI()
    };
  }
}

// 子组件
export default {
  inject: ['locationService'],
  mounted() {
    this.locationService.getCurrent().then(pos => {
      console.log('当前位置：', pos);
    });
  }
}

React 里的实现方式

React 虽然没有原生支持，但可以用 Context + Hook 模拟。假设你在开发一个酒店比价工具，不同城市的数据源可能来自不同接口。通过 Dependency Injection 思路，你可以动态切换数据服务：

const ServiceContext = React.createContext();

function App() {
  const hotelService = new HotelAPIService();
  
  return (
    <ServiceContext.Provider value={hotelService}>
      <CityList />
    </ServiceContext.Provider>
  );
}

function CityList() {
  const service = useContext(ServiceContext);
  useEffect(() => {
    service.fetchCities().then(data => {
      setCities(data);
    });
  }, []);
}

这样换服务就像换电池，插上就能用，不用动其他代码。

实际好处不止解耦

你在咖啡馆调试 H5 页面，突然产品经理说要加个离线模式。如果之前用了依赖注入，直接换个本地存储的服务实现就行。测试时也方便，mock 一个假服务，组件照样跑。

有次朋友做自驾游路线规划应用，地图模块一开始用高德，后来想切百度。因为用了依赖注入结构，改了两处配置就完成了切换，没碰业务逻辑。

这种设计看起来多绕一步，实则省下后期大把时间。就像出门旅行，提前分装好洗漱包，到哪儿打开行李箱一拎就走，不用每次现找牙刷。