当前位置:首页 > JavaScript

js实现模式

2026-03-13 20:35:32JavaScript

JavaScript 设计模式的实现

JavaScript 设计模式是解决常见问题的可重用方案。以下是几种常用模式的实现方式。

单例模式

确保一个类只有一个实例,并提供全局访问点。

const Singleton = (function() {
    let instance;

    function createInstance() {
        return new Object('I am the instance');
    }

    return {
        getInstance: function() {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

观察者模式

定义对象间的一对多依赖关系,当一个对象状态改变时,所有依赖它的对象都会得到通知。

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!');

工厂模式

创建对象时不指定具体类,而是通过工厂方法决定实例化哪个类。

class Car {
    constructor(options) {
        this.wheels = options.wheels || 4;
        this.color = options.color || 'white';
    }
}

class Truck {
    constructor(options) {
        this.wheels = options.wheels || 6;
        this.color = options.color || 'black';
    }
}

class VehicleFactory {
    createVehicle(options) {
        if (options.type === 'car') {
            return new Car(options);
        } else if (options.type === 'truck') {
            return new Truck(options);
        }
    }
}

const factory = new VehicleFactory();
const car = factory.createVehicle({ type: 'car', color: 'red' });
const truck = factory.createVehicle({ type: 'truck' });

装饰器模式

动态地给对象添加额外的职责,相比继承更加灵活。

class Coffee {
    cost() {
        return 5;
    }
}

class MilkDecorator {
    constructor(coffee) {
        this.coffee = coffee;
    }

    cost() {
        return this.coffee.cost() + 2;
    }
}

class SugarDecorator {
    constructor(coffee) {
        this.coffee = coffee;
    }

    cost() {
        return this.coffee.cost() + 1;
    }
}

let coffee = new Coffee();
coffee = new MilkDecorator(coffee);
coffee = new SugarDecorator(coffee);
console.log(coffee.cost()); // 8

策略模式

定义一系列算法,封装每个算法,并使它们可以互相替换。

js实现模式

const strategies = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b
};

class Calculator {
    constructor(strategy) {
        this.strategy = strategy;
    }

    execute(a, b) {
        return this.strategy(a, b);
    }
}

const addCalculator = new Calculator(strategies.add);
console.log(addCalculator.execute(5, 3)); // 8

const multiplyCalculator = new Calculator(strategies.multiply);
console.log(multiplyCalculator.execute(5, 3)); // 15

这些模式提供了解决特定问题的标准化方法,可以根据具体需求选择合适的模式。

标签: 模式js
分享给朋友:

相关文章

js实现继承

js实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js实现dh

js实现dh

JavaScript 实现 DH(Diffie-Hellman)密钥交换 Diffie-Hellman(DH)密钥交换是一种安全协议,允许双方在不安全的通信信道上建立一个共享密钥。以下是如何在 Jav…

js钟表实现

js钟表实现

实现JavaScript钟表的基本方法 创建一个简单的JavaScript钟表可以通过以下步骤完成,涵盖数字和模拟两种形式。 数字钟表实现 HTML结构只需一个显示时间的容器: <div i…

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…