北京网站托管的公司哪家好,青岛网站建设与管理,做企业网站价格,百度竞价什么时候开始的前端常见的设计模式#xff1a;
单例模式观察者模式工厂模式适配器模式装饰器模式命令模式迭代器模式组合模式策略模式发布订阅模式
单例模式【创建型设计模式】#xff1a;
单例模式是确保一个类只有一个实例#xff0c;并提供一个全局访问点。这个模式非常适合那些需要…前端常见的设计模式
单例模式观察者模式工厂模式适配器模式装饰器模式命令模式迭代器模式组合模式策略模式发布订阅模式
单例模式【创建型设计模式】
单例模式是确保一个类只有一个实例并提供一个全局访问点。这个模式非常适合那些需要共享资源的场景。常用于全局状态管理、全局配置对象如Redux或Vuex的store或者全局的弹窗、日志服务等。
类是什么
类是面向对象编程中的一个基本概念它是对具有相同属性和方法的一组对象的抽象描述。类定义了对象的属性数据和行为方法或函数。ES6之后JavaScript引入了**class 关键字**使得类的定义更加直观和简洁。
实例是什么
实例是根据类创建的具体对象。每个实例都有自己的属性值和可以调用的方法但它们共享类定义的行为和结构。
类中有很多实例的代码示例
class NonSingleton {constructor(name) {this.name name;}
}const obj1 new NonSingleton(Alice);
const obj2 new NonSingleton(Bob);obj1.name; // Alice
obj2.name; // Bob
// obj1 和 obj2 是两个独立的实例更改一个不会影响另一个类中只有一个实例的代码示例单例模式
在单例模式中无论你尝试创建多少次实例都会得到同一个对象。因此如果你更改了这个对象的某个属性所有引用这个对象的地方都会感知到这个更改。
class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}this.name Default Name;Singleton.instance this;}
}const singleton1 new Singleton();
const singleton2 new Singleton();singleton1.name Changed Name;singleton1.name; // Changed Name
singleton2.name; // 也是 Changed Name因为它们引用的是同一个实例class Singleton {constructor(name) {// 如果实例已经存在则直接返回它忽略传入的参数if (Singleton.instance) {return Singleton.instance;}// 否则使用传入的参数初始化实例this.name name || Default Name;// 将当前实例存储为类的静态属性Singleton.instance this;}// 静态方法用于获取实例可选static getInstance(name) {if (!Singleton.instance) {new Singleton(name);}return Singleton.instance;}
}// 首次创建实例并传入参数
const singleton1 new Singleton(Alice);
console.log(singleton1.name); // 输出: Alice// 尝试再次创建实例但传入不同的参数
const singleton2 Singleton.getInstance(Bob);
console.log(singleton2.name); // 输出: Alice因为实例已经存在所以参数被忽略// 验证两个引用是否指向同一个实例
console.log(singleton1 singleton2); // 输出: true单例模式的实现方式
饿汉式在类加载时就初始化实例因此线程安全。优点是实现简单、线程安全缺点是类加载时就实例化可能造成资源浪费。懒汉式在第一次使用时才初始化实例不是线程安全的需要加锁。优点是延迟加载、节省资源缺点是需要加锁、性能较差。双重校验锁在懒汉式的基础上进行了优化减少了不必要的同步开销。优点是延迟加载、节省资源、线程安全、性能较高缺点是代码较复杂。静态内部类利用静态内部类的特性实现单例模式线程安全且延迟加载。优点是延迟加载、节省资源、线程安全、利用类加载机制保证初始化时只有一个线程缺点是代码较简单、易读性好。枚举利用枚举实现单例模式天生线程安全防止反序列化创建新实例。优点是实现简单、防止反射和序列化破坏单例缺点是不能延迟加载。
Vue单例模式示例
在Vue中单例模式通常不是直接应用于Vue组件本身的因为Vue组件的实例是由Vue框架自己管理的。但是我们可以在Vue应用中使用单例模式来管理某些全局状态或服务。例如我们可以创建一个全局的事件总线Event Bus或者一个全局的配置管理器。
首先我们定义一个单例模式的配置管理器
// ConfigManager.js
const ConfigManager (function() {let instance;// 构造函数包含一些配置信息function Config() {this.apiKey your-api-key;this.featureFlag true;// 其他配置...}// 获取单例对象的方法检查instance变量是否已经被初始化function getInstance() {if (!instance) {instance new Config();}return instance;}// 公开getInstance方法其他方法或属性可以根据需要添加return {getInstance: getInstance};
})();export default ConfigManager;接下来我们在Vue组件中使用这个配置管理器
// SomeComponent.vue
templatedivAPI Key: {{ apiKey }}button clicktoggleFeatureToggle Feature Flag/button/div
/templatescript
import ConfigManager from ./ConfigManager;export default {data() {return {apiKey: ,featureFlag: false};},created() {const config ConfigManager.getInstance();this.apiKey config.apiKey;this.featureFlag config.featureFlag;},methods: {toggleFeature() {const config ConfigManager.getInstance();config.featureFlag !config.featureFlag;this.featureFlag config.featureFlag;}}
};
/script
