工厂模式三种变体与前端应用
请用JavaScript实现简单工厂、工厂方法和抽象工厂三种模式，并说明各自在前端开发中的典型应用场景。
回答
小字辈
// 1. 简单工厂
function createButton(type) {
const buttons = { primary: PrimaryButton, danger: DangerButton };
return new (buttons[type] || DefaultButton)();
}
// 2. 工厂方法
class ButtonFactory {
createButton() { throw new Error('子类实现'); }
}
class PrimaryButtonFactory extends ButtonFactory {
createButton() { return new PrimaryButton(); }
}
// 3. 抽象工厂
class UIFactory {
createButton() {}
createDialog() {}
}
class MaterialUIFactory extends UIFactory {
createButton() { return new MaterialButton(); }
createDialog() { return new MaterialDialog(); }
}
应用场景：简单工厂→根据type创建不同组件(antd Button类型)；工厂方法→组件库主题切换；抽象工厂→跨平台UI框架(React Native/Web)，一组配套组件的创建保证风格统一。