当前位置：首页 > wzjs >正文

ppt那个网站做的好建设网站总结

wzjs 2025/9/7 9:30:46

ppt那个网站做的好,建设网站总结,wordpress getterms,wordpress新建页面连接无法访问一、模式定义与核心价值单例模式（Singleton Pattern）是一种创建型设计模式，保证一个类仅有一个实例，并提供全局访问点。其核心价值在于： 资源控制：避免重复创建消耗性资源（如数据库连…

一、模式定义与核心价值

单例模式（Singleton Pattern）是一种创建型设计模式，保证一个类仅有一个实例，并提供全局访问点。其核心价值在于：

资源控制：避免重复创建消耗性资源（如数据库连接）
状态共享：维护全局唯一状态（如应用配置）
访问管控：集中管理共享资源访问（如日志系统）

二、经典实现方案对比

1. 闭包实现（ES5）

const Singleton = (() => {let instance = null;function createInstance() {// 私有方法和属性const privateMethod = () => console.log('Private method');let privateVar = 'Initial value';return {// 暴露的公共接口publicMethod: () => {privateMethod();console.log('Public method called');},getVar: () => privateVar,setVar: (value) => { privateVar = value }};}return {getInstance: () => {if (!instance) {instance = createInstance();}return instance;}};
})();// 使用示例
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

2. 类静态属性（ES6+）

class DatabaseConnection {static instance = null;connectionCount = 0;constructor() {if (DatabaseConnection.instance) {return DatabaseConnection.instance;}// 模拟耗时的连接初始化this.connectionCount = 0;DatabaseConnection.instance = this;}connect() {this.connectionCount++;console.log(`Active connections: ${this.connectionCount}`);}disconnect() {this.connectionCount = Math.max(0, this.connectionCount - 1);}
}// 使用示例
const db1 = new DatabaseConnection();
const db2 = new DatabaseConnection();
db1.connect(); // Active connections: 1
db2.connect(); // Active connections: 2
console.log(db1 === db2); // true

3. 模块模式（现代ES Module）

// config.js
let configInstance = null;export default class AppConfig {constructor() {if (!configInstance) {this.env = process.env.NODE_ENV || 'development';this.apiBase = this.env === 'production' ? 'https://api.example.com' : 'http://localhost:3000';configInstance = this;}return configInstance;}// 添加配置冻结防止修改freeze() {Object.freeze(this);}
}// 初始化并冻结配置
const config = new AppConfig();
config.freeze();

三、高级应用场景

1. 带生命周期的单例

class SessionManager {static instance = null;static getInstance() {if (!this.instance) {this.instance = new SessionManager();// 注册页面卸载清理window.addEventListener('beforeunload', () => {this.instance.cleanup();});}return this.instance;}constructor() {this.sessions = new Map();this.timeouts = new Map();}createSession(userId, ttl = 3600) {const sessionId = crypto.randomUUID();this.sessions.set(sessionId, { userId, created: Date.now() });// 自动过期处理this.timeouts.set(sessionId, setTimeout(() => {this.destroySession(sessionId);}, ttl * 1000));return sessionId;}destroySession(sessionId) {clearTimeout(this.timeouts.get(sessionId));this.sessions.delete(sessionId);this.timeouts.delete(sessionId);}cleanup() {this.timeouts.forEach(clearTimeout);this.sessions.clear();this.timeouts.clear();}
}// 使用示例
const sessionManager = SessionManager.getInstance();
const sessionId = sessionManager.createSession('user123');

四、实践建议与注意事项

1. 合理使用场景

✅ 适用场景：

全局状态管理（Redux/Vuex Store）
浏览器环境唯一对象（如全屏加载器）
共享资源访问（IndexedDB连接池）

❌ 避免滥用：

普通工具类（应使用纯函数）
短期使用的上下文对象（如表单数据）
需要多实例的场景（如弹窗工厂）

2. 性能优化技巧

class OptimizedSingleton {static #instance; // 私有字段static #initialized = false;constructor() {if (!OptimizedSingleton.#initialized) {throw new Error('Use getInstance() method');}// 初始化逻辑...}static getInstance() {if (!this.#instance) {this.#initialized = true;this.#instance = new OptimizedSingleton();this.#initialized = false;}return this.#instance;}
}

3. 测试友好方案

// 可重置的单例模式
class TestableService {static instance;static reset() {this.instance = null;}constructor() {if (TestableService.instance) {return TestableService.instance;}// 初始化逻辑...TestableService.instance = this;}
}// 测试用例示例
describe('Service Test', () => {afterEach(() => {TestableService.reset();});test('instance equality', () => {const a = new TestableService();const b = new TestableService();expect(a).toBe(b);});
});

五、常见陷阱与解决方案

模块热替换问题

// 热模块替换兼容方案
if (module.hot) {module.hot.dispose(() => {Singleton.cleanup();});module.hot.accept();
}

多窗口场景处理

// 使用BroadcastChannel实现跨窗口单例
class CrossTabSingleton {static instance;static EVENT_KEY = 'singleton-update';constructor() {this.channel = new BroadcastChannel(CrossTabSingleton.EVENT_KEY);this.channel.onmessage = (event) => {if (event.data === 'instance-created') {// 处理其他页面实例化的情况}};}static getInstance() {if (!this.instance) {this.instance = new CrossTabSingleton();this.instance.channel.postMessage('instance-created');}return this.instance;}
}

内存泄漏预防

class LeakSafeSingleton {static #weakRef;static getInstance() {let instance = this.#weakRef?.deref();if (!instance) {instance = new LeakSafeSingleton();this.#weakRef = new WeakRef(instance);// 注册清理回调this.#registerFinalizer(instance);}return instance;}static #registerFinalizer(instance) {const registry = new FinalizationRegistry(() => {// 实例被GC回收后的处理console.log('Instance cleaned up');});registry.register(instance, 'instance');}
}

六、架构层面的思考

依赖注入整合

interface IService {operation(): void;
}class RealService implements IService {operation() {console.log('Real operation');}
}class SingletonService {private static instance: IService;static provide(impl?: new () => IService) {if (!this.instance) {this.instance = impl ? new impl() : new RealService();}return this.instance;}
}// 在应用入口
const service = SingletonService.provide();// 测试时可注入mock实现
class MockService implements IService {operation() {console.log('Mock operation');}
}
SingletonService.provide(MockService);

微前端架构下的单例管理

class FederatedSingleton {static instances = new Map();static register(name, instance) {if (!this.instances.has(name)) {this.instances.set(name, instance);}}static get(name) {if (!this.instances.has(name)) {throw new Error(`Instance ${name} not registered`);}return this.instances.get(name);}
}// 主应用注册
FederatedSingleton.register('authService', new AuthService());// 子应用使用
const authService = FederatedSingleton.get('authService');