1、基于類的單例模式

// PageManager.js
class PageManager {constructor(config) {if (!PageManager.instance) {this.config = config;this.initialized = false;PageManager.instance = this;this.init();}return PageManager.instance;}init() {if (this.initialized) return;console.log('Initializing with config:', this.config);// 實際初始化邏輯this.initialized = true;}generatePage(instruction) {if (!this.initialized) {throw new Error('PageManager not initialized');}const page = {...this.config,...instruction,id: Date.now()};console.log('Generated page:', page);return page;}// 更新配置（新增方法）updateConfig(newConfig) {Object.assign(this.config, newConfig);}// 獲取實例的靜態方法（推薦方式）static getInstance(config) {if (!PageManager.instance) {PageManager.instance = new PageManager(config);}return PageManager.instance;}
}// 不立即初始化，而是導出類
export default PageManager;

使用方式

// 使用方可以決定何時初始化
import PageManager from './PageManager';// 第一次獲取實例時初始化（推薦方式）
const pageManager = PageManager.getInstance({defaultTemplate: 'advanced',baseStyles: true
});// 生成頁面
const homePage = pageManager.generatePage({ title: 'Home', content: 'Welcome' 
});// 后續獲取仍然是同一個實例
const sameManager = PageManager.getInstance();
console.log(pageManager === sameManager); // true// 可以更新配置
pageManager.updateConfig({defaultTemplate: 'custom'
});

2、更優雅的變體：模塊模式單例

如果你更喜歡模塊模式而不是類，這里有一個更符合JavaScript習慣的實現：

// pageManager.js
let instance = null;
let config = {};
let initialized = false;const init = (initialConfig) => {if (initialized) {console.warn('PageManager already initialized');return;}config = {defaultTemplate: 'standard',...initialConfig};initialized = true;console.log('PageManager initialized with config:', config);
};const generatePage = (instruction) => {if (!initialized) throw new Error('PageManager not initialized');return {...config,...instruction,id: `page-${Date.now()}`};
};const updateConfig = (newConfig) => {Object.assign(config, newConfig);
};// 導出單例對象
export default {init,generatePage,updateConfig
};

使用方式：

import pageManager from './pageManager';// 在使用前初始化
pageManager.init({defaultTemplate: 'custom'
});// 使用單例
const page = pageManager.generatePage({ title: 'About' });

3、使用工廠函數（更靈活）

// 使用示例
// createPageGenerator.js
export const createPageGenerator = (initialConfig) => {const config = {defaultTemplate: 'standard',basePath: '/',...initialConfig};const generate = (instruction) => {const pageId = `${config.basePath}${instruction.slug || `page-${Date.now()}`}`;return {...config,...instruction,id: pageId,fullPath: `${config.basePath}${instruction.path || ''}`,createdAt: new Date()};};const updateConfig = (newConfig) => {Object.assign(config, newConfig);};return {generate,updateConfig,getConfig: () => ({ ...config })};
};// 使用示例
// 可以創建多個實例或單個實例使用

基本使用

// 使用示例
import { createPageGenerator } from './createPageGenerator';// 1. 創建實例（簡單配置）
const simpleGenerator = createPageGenerator();
const page1 = simpleGenerator.generate({ title: 'Home' });
console.log(page1);

4、發布-訂閱模式 (Pub-Sub Pattern)

用途：觀察者模式的變體，使用主題/通道概念解耦發布者和訂閱者。

class EventBus {constructor() {this.events = {};}subscribe(eventName, callback) {if (!this.events[eventName]) {this.events[eventName] = [];}this.events[eventName].push(callback);}publish(eventName, data) {if (this.events[eventName]) {this.events[eventName].forEach(callback => callback(data));}}unsubscribe(eventName, callback) {if (this.events[eventName]) {this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);}}
}// 使用
const bus = new EventBus();// 訂閱
const logData = data => console.log('Received:', data);
bus.subscribe('dataUpdate', logData);// 發布
bus.publish('dataUpdate', { newData: 123 });// 取消訂閱
bus.unsubscribe('dataUpdate', logData);// 實際應用：Vue的EventBus、組件間通信

5、觀察者模式 (Observer Pattern)

// 主題（被觀察者）
class Subject {constructor() {this.observers = [];}subscribe(observer) {this.observers.push(observer);}unsubscribe(observer) {this.observers = this.observers.filter(obs => obs !== observer);}notify(data) {this.observers.forEach(observer => observer.update(data));}
}// 觀察者
class Observer {update(data) {console.log('Observer received:', data);}
}// 使用
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();subject.subscribe(observer1);
subject.subscribe(observer2);subject.notify('Hello observers!'); // 兩個觀察者都會收到通知// 實際應用：事件系統、狀態管理（如Redux）、數據綁定