js设计模式总结 —— 常用六种

工厂模式

在工厂模式中，我们在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。

class Product {constructor(name) {this.name = name}init() {alert('init')}fun1() {alert('fun1')}fun2() {alert('fun2')}}class Creater {create(name) {return new Product(name)}}// 测试let creater = new Creater()let p1 = creater.create('bb')p1.init()p1.fun1()

单例模式

这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。

class SingleObject {login() {console.log('login...')}}SingleObject.getInstance = (function () {let instancereturn function () {if (!instance) {instance = new SingleObject }return instance}})()let obj1 = SingleObject.getIns

适配器模式

适配器模式（Adapter Pattern）是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，它结合了两个独立接口的功能。

 class Adaptee {specific() {return '国外'}}class Target {constructor() {this.adaptee = new Adaptee()}request() {let info = this.adaptee.specific()return `${info} -> 转化 -> 中国`}}let target = new Target()target.request()

装饰器模式 （结合到es7的装饰器）

装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构，这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。

// readOnly （只读装饰器，不可更改
function readOnly(target, name, descriptor) {descriptor.writable = falsereturn descriptor}class Person {constructor () {this.first = 'A'this.last = 'B'}@readOnlyname() {return `${this.first} ${this.last}`}}let p = new Person()console.log(p.name()) // ABp.name = function () { // 报错alert(100)}

代理模式 （结合es6的proxy）

在代理模式中，我们创建具有现有对象的对象，以便向外界提供功能接口。一个类代表另一个类的功能

let star = {name: '马大大', age: 18, phone: '13149998888'}let agent = new Proxy(star, {get: function(target, key) {console.log('get =>', target, key)},set: function (target, key, value) {console.log('set =>', target, key, value)target[key] = valuereturn target}})// console.log('star =>', star)// console.log('agent =>', agent)console.log(agent.name)agent.name = '666'console.log('agent =>', agent)

观察者模式

当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。

// 主题，接收状态变化，触发每个观察者class Subject {constructor() {this.state = 0this.observers = []}getState() {return this.state}setState(state) {this.state = statethis.notifyAllObservers()}notifyAllObservers() {this.observers.forEach(observer => {observer.update()})}attach(observer) {this.observers.push(observer)}}// 观察者，等待被触发class Observer {constructor(name, subject) {this.name = namethis.subject = subjectthis.subject.attach(this)}update() {console.log(`${this.name} update, state: ${this.subject.getState()}`)}}let s = new Subject()let o1 = new Observer('o1', s)// 测试代码
let s = new Subject()
let o1 = new Observer('o1', s)
let o2 = new Observer('o2', s)
let o3 = new Observer('o3', s)s.setState(1)
s.setState(2)
s.setState(3)

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！