面试官：为什么现在的框架都爱用工厂模式了？为什么现在的框架都爱用工厂模式了？还记得几年前，我们初始化一个应用是多么"直

为什么现在的框架都爱用工厂模式了？

从 new Vue()到 createApp()，不仅仅是 API 的变化，更是前端框架架构思想的一次集体转向。

还记得几年前，我们初始化一个应用是多么"直接"吗？new Vue({...})、ReactDOM.render(...)。而如今，createApp()、createRoot()成为了主流。这背后，是前端开发从"单人项目"发展到"复杂系统"后，框架设计哲学的一次必然进化。而工厂模式，正是这一进化的核心实现手段。

一、旧时代的痛点：当 `new`遇到现代前端

以前，使用 new关键字直接调用框架的构造函数看似简单明了，但它隐藏了几个在大型项目中会爆发的问题。

🚨 致命问题：全局污染

以 Vue 2 为例，其核心问题在于暴露了构造函数本身。

import Vue from 'vue';

// 这些操作都是在修改全局唯一的 Vue 构造函数
Vue.directive('focus', {...}); // 注册全局指令
Vue.mixin({...});              // 注册全局混入  
Vue.use(MyPlugin);             // 安装插件，插件也可能修改Vue原型

// 结果：所有实例无一幸免
const appA = new Vue({...}); // 被迫携带全局指令、混入、插件
const appB = new Vue({...}); // 同样被污染，即使它不需要这些

💡 关键洞察：模块化救不了全局污染 模块化只能保证你从哪导入，但所有模块导入的都是同一个 Vue 构造函数对象。修改它，就是修改全局状态。在现代前端架构中，特别是微前端场景下，一个页面可能同时运行多个独立的应用或模块。如果每个部分都能修改全局的框架构造函数，那将是一场命名冲突和副作用扩散的噩梦。

🔴 其他痛点：

脆弱的安全边界：用户可能创建出配置错误、状态不一致的实例
僵化的配置机制：难以支持不同环境的动态配置
无法实现真正的沙箱隔离：微前端架构的基础设施缺失

二、工厂模式：现代框架的"安全卫士"

工厂模式通过一个"工厂函数"来创建对象，而不是直接暴露构造函数。这把"锁"带来了几个关键优势：

✅ 优势一：完美的实例隔离

这是最核心的收益。工厂函数为每个应用创建一个独立的上下文（Context）。

// Vue 3
import { createApp } from 'vue';

const appA = createApp(AppA);
appA.directive('focus', directiveA); // 只注册到 appA 的上下文中

const appB = createApp(AppB); 
appB.directive('confirm', directiveB); // 只注册到 appB 的上下文中

// appA 和 appB 完全隔离，它们的指令、组件、混入互不干扰。

🎯 微前端革命：主应用和子应用，甚至不同团队开发的应用，可以共享同一个框架版本，却拥有完全独立的运行环境。

✅ 优势二：坚固的安全边界

框架通过工厂函数收回了创建过程的控制权。

function createApp(rootComponent, rootProps = null) {
  // 1. 统一的校验和防护
  if (!isValidComponent(rootComponent)) {
    throw new Error('Invalid root component.');
  }

  // 2. 创建独立的上下文
  const context = createAppContext();
  
  const app = {
    _context: context,
    // 3. 只暴露安全的、受限的API
    use(plugin, ...options) {
      // 检查插件是否已安装等...
      plugin.install(app, ...options);
      return app;
    },
    component(name, component) {
      context.components[name] = component;
      return app;
    }
  };
  return app;
}

用户无法再直接操作框架内核，只能通过工厂函数提供的受限 API 进行交互。

✅ 优势三：无与伦比的灵活性

工厂函数是配置和定制的绝佳场所。

// 环境特定的配置
function createApp(component) {
  const baseApp = // ... 基础应用

  if (process.env.NODE_ENV === 'development') {
    baseApp.use(devTools); // 开发环境：调试工具
  } else {
    baseApp.use(sentryPlugin); // 生产环境：监控上报
  }

  return baseApp;
}

// 测试环境特殊配置
const testApp = createApp(TestComponent).use(mockServerPlugin);

三、不仅是 Vue：工厂模式已成行业标配

这种设计思想已经成为现代框架的共识：

框架/工具	工厂函数	说明
Vue 3	`createApp()`	应用实例工厂
React 18	`createRoot()`	并发特性基础
Vite	`createServer()`	开发服务器工厂
现代 CSS-in-JS	`createStyle()`	样式隔离

四、实战对比：微前端场景下的差异

Vue 2 的困境

// 团队A的应用
Vue.directive('team-a', directiveA); // 污染全局！

// 团队B的应用  
Vue.directive('team-b', directiveB); // 冲突！

// 结果：两个团队的应用互相干扰，无法独立部署

Vue 3 的解决方案

// 团队A的应用
const appA = createApp(TeamAApp);
appA.directive('team-a', directiveA); // 仅限appA

// 团队B的应用
const appB = createApp(TeamBApp); 
appB.directive('team-b', directiveB); // 仅限appB

// 结果：完美隔离，可独立开发和部署

五、总结：从"信任"到"契约"的架构进化

框架设计的演变，反映了一个深刻的变化：

旧时代（`new`）："完全信任"模式

框架"信任"开发者会正确地使用所有权力
适合小型项目，但随着复杂度提升变得脆弱
比喻：把整个厨房交给每个厨师，相信他们不会把调料搞混

新时代（工厂模式）："契约"模式

框架通过工厂函数与开发者建立清晰的"契约"
提供稳定、隔离的沙箱环境，开发者在此范围内创新
比喻：每个厨师有自己的工作台和调料架，互不干扰

工厂模式的成功，在于它用一种优雅的方式，解决了前端应用规模化带来的核心矛盾。 它让框架在变得更强健的同时，也为开发者构建大型、可维护的应用程序提供了坚实的基础。这就是为什么工厂模式成为了现代框架不可或缺的设计模式，也是前端开发走向成熟的重要标志。

面试官：为什么现在的框架都爱用工厂模式了？