zencart 网站换域名,北京建设网站官网,wordpress地图,小学学校网站建设计划JavaScript设计模式是指在面向对象编程中#xff0c;通过对类和对象进行抽象和泛化#xff0c;提取出一些通用的设计思路和解决方案#xff0c;以解决常见的软件设计问题。这些设计模式可以分为以下几类进行详细介绍#xff1a;
一、创建型模式
1. 工厂模式#xff08;F…
JavaScript设计模式是指在面向对象编程中通过对类和对象进行抽象和泛化提取出一些通用的设计思路和解决方案以解决常见的软件设计问题。这些设计模式可以分为以下几类进行详细介绍
一、创建型模式
1. 工厂模式Factory Pattern
定义定义一个创建对象的接口但让子类决定要实例化的类是哪一个。工厂方法让类的实例化推迟到子类中进行。实现方式可以通过简单工厂、工厂方法和抽象工厂等方式进行实现。 简单工厂通过一个专门的工厂类来创建对象客户端不需要知道具体的产品类只需要知道产品类的公共接口。工厂方法将工厂的职责分配到了具体的产品类中每个具体的产品类都有一个对应的工厂类。抽象工厂提供一个创建一系列相关或相互依赖对象的接口而无需指定它们具体的类。示例工厂方法模式的示例代码如下。 // 定义产品接口
class Product { constructor() {} operation() {}
} // 定义具体产品类
class ConcreteProductA extends Product { constructor() { super(); } operation() { return ConcreteProductA; }
} class ConcreteProductB extends Product { constructor() { super(); } operation() { return ConcreteProductB; }
} // 定义工厂接口
class Factory { constructor() {} createProduct() {}
} // 定义具体工厂类
class ConcreteFactoryA extends Factory { constructor() { super(); } createProduct() { return new ConcreteProductA(); }
} class ConcreteFactoryB extends Factory { constructor() { super(); } createProduct() { return new ConcreteProductB(); }
} // 调用具体工厂
const factoryA new ConcreteFactoryA();
const productA factoryA.createProduct();
console.log(productA.operation()); // 输出: ConcreteProductA
2. 单例模式Singleton Pattern 定义确保一个类仅有一个实例并提供一个全局访问点。实现方式通常通过创建一个对象并在需要时返回这个对象的引用来实现。示例 class Singleton { static instance null; constructor() { if (Singleton.instance) { return Singleton.instance; } Singleton.instance this; // 初始化代码 this.data I am the singleton instance; } getData() { return this.data; }
} // 使用
const instance1 new Singleton();
const instance2 new Singleton();
console.log(instance1 instance2); // 输出: true
console.log(instance1.getData()); // 输出: I am the singleton instance
3. 建造者模式Builder Pattern
定义将一个复杂对象的构建与它的表示分离使得同样的构建过程可以创建不同的表示。实现方式通过一个构造器或配置函数来实现该函数接受多个参数来逐步构建复杂对象。示例 // 定义一个建造者类
class PersonBuilder { constructor() { this.person {}; } setName(name) { this.person.name name; return this; } setAge(age) { this.person.age age; return this; } build() { return this.person; }
} // 使用建造者创建对象
const personBuilder new PersonBuilder();
const person personBuilder.setName(Alice).setAge(20).build();
console.log(person); // { name: Alice, age: 20 } 二、结构型模式 原型模式Prototype Pattern
定义用原型实例指定创建对象的种类并且通过拷贝这个原型来创建新的对象。在JavaScript中的特点由于JavaScript本身就是基于原型的语言因此这个模式在JavaScript中非常自然。 2. 适配器模式Adapter Pattern 定义将一个类的接口转换成客户希望的另一个接口适配器模式让原本接口不兼容的类可以一起工作。实现方式可以通过函数或对象来实现这些函数或对象包装了不兼容的接口并提供一个统一的接口。示例 // 定义一个不兼容的接口
class IncompatibleApi { fetchData() { console.log(Fetching data from the incompatible API.); }
} // 定义一个适配器类将不兼容的接口转换为兼容接口
class Adapter { constructor(incompatibleApi) { this.incompatibleApi incompatibleApi; } fetch() { this.incompatibleApi.fetchData(); }
} // 使用适配器调用兼容接口
const incompatibleApi new IncompatibleApi();
const adapter new Adapter(incompatibleApi);
adapter.fetch(); // Fetching data from the incompatible API. 3. 装饰者模式Decorator Pattern 定义动态地给一个对象添加一些额外的职责就增加功能来说装饰者模式相比生成子类更为灵活。实现方式可以通过高阶函数接收函数作为参数或返回一个函数的函数或代理模式Proxy来实现。示例 // 定义一个被装饰的对象
class Component { operation() { console.log(Component); }
} // 定义一个装饰器类增强被装饰的对象
class Decorator { constructor(component) { this.component component; } operation() { this.component.operation(); console.log(Decorator added new behavior.); }
} // 使用装饰器增强被装饰的对象
const component new Component();
const decorator new Decorator(component);
decorator.operation(); 4、代理模式Proxy Pattern 定义为其他对象提供一种代理以控制对这个对象的访问。在JavaScript中的特点ES6引入了Proxy对象它允许定义基本操作的自定义行为如属性查找、赋值、枚举、函数调用等。 5. 模块模式Module Pattern
定义提供了一种封装私有变量和函数的方法但同时又提供了一个公共的接口来访问这些私有成员。实现方式通常通过函数和闭包来实现。
三、行为型模式
1、观察者模式Observer Pattern
定义定义对象间的一种一对多的依赖关系当一个对象的状态发生改变时所有依赖于它的对象都得到通知并被自动更新。实现方式可以通过事件监听和发布/订阅模式来实现。示例 // 定义一个主题对象
class Subject { constructor() { this.observers []; } addObserver(observer) { this.observers.push(observer); } removeObserver(observer) { const index this.observers.indexOf(observer); if (index ! -1) { this.observers.splice(index, 1); } } notify(data) { this.observers.forEach(observer { observer.update(data); }); }
} // 定义一个观察者对象
class Observer { constructor(name) { this.name name; } update(data) { console.log(${this.name} received data: ${data}); }
} // 使用主题对象通知观察者对象
const subject new Subject();
const observer1 new Observer(Alice);
const observer2 new Observer(Bob);
subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notify(Hello world!);
// Alice received data: Hello world! Bob received data: Hello world! 2、策略模式Strategy Pattern 定义定义一系列的算法把它们一个个封装起来并且使它们可相互替换。此模式让算法的变化独立于使用算法的客户。实现方式可以通过函数或对象字面量来实现策略。示例 // 定义一系列的算法
function addStrategy(a, b) { return a b;
} function subtractStrategy(a, b) { return a - b;
} function multiplyStrategy(a, b) { return a * b;
} // 定义一个策略上下文类
class Context { constructor(strategy) { this.strategy strategy; } executeStrategy(a, b) { return this.strategy(a, b); }
} // 使用策略模式
const context new Context(addStrategy);
console.log(context.executeStrategy(2, 3)); // 输出 5 context.strategy subtractStrategy;
console.log(context.executeStrategy(5, 2)); // 输出 3 context.strategy multiplyStrategy;
console.log(context.executeStrategy(4, 3)); // 输出 12
