首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js的几种设计模式

JavaScript 中常见的设计模式有以下几种:

1. 单例模式

  • 概念:确保一个类只有一个实例,并提供一个全局访问点来获取该实例。
  • 优势:节省系统资源,避免重复创建对象。
  • 应用场景:例如全局配置对象、日志记录器。
  • 示例代码:
代码语言:txt
复制
const Singleton = (function () {
    let instance;
    function createInstance() {
        const object = new Object("I am the instance");
        return object;
    }
    return {
        getInstance: function () {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();

2. 工厂模式

  • 概念:定义一个用于创建对象的接口,让子类决定实例化哪一个类。
  • 优势:增加代码的灵活性和可扩展性。
  • 应用场景:根据不同的条件创建不同类型的对象。
  • 示例代码:
代码语言:txt
复制
function Car(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
}

function Truck(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
}

function VehicleFactory() {}

VehicleFactory.prototype.vehicleClass = Car;

VehicleFactory.prototype.createVehicle = function (make, model, year) {
    if (this.vehicleClass) {
        return new this.vehicleClass(make, model, year);
    } else {
        throw new Error('Invalid vehicle class');
    }
};

3. 观察者模式

  • 概念:定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象,当主题对象发生变化时,它的所有依赖者(观察者)都会收到通知并自动更新。
  • 优势:实现对象间的松耦合,当一个对象状态改变时自动通知其他依赖对象。
  • 应用场景:事件监听和处理、实时数据更新。
  • 示例代码:
代码语言:txt
复制
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 {
    update(data) {
        console.log('Received data:', data);
    }
}

4. 模块模式

  • 概念:通过闭包来封装私有变量和方法,只暴露必要的接口。
  • 优势:保护内部数据,避免全局污染。
  • 应用场景:创建具有私有属性和方法的对象。
  • 示例代码:
代码语言:txt
复制
const Module = (function () {
    let privateVar = 'I am private';

    function privateMethod() {
        console.log(privateVar);
    }

    return {
        publicMethod: function () {
            privateMethod();
        }
    };
})();

5. 代理模式

  • 概念:为其他对象提供一种代理以控制对这个对象的访问。
  • 优势:可以在访问对象时进行一些额外的操作,如权限控制、缓存等。
  • 应用场景:延迟加载、访问控制。
  • 示例代码:
代码语言:txt
复制
class Image {
    constructor(url) {
        this.url = url;
        this.loadImage();
    }

    loadImage() {
        console.log(`Loading image from ${this.url}`);
    }
}

class ImageProxy {
    constructor(url) {
        this.url = url;
        this.image = null;
    }

    showImage() {
        if (!this.image) {
            this.image = new Image(this.url);
        }
        this.image.loadImage();
    }
}

这些设计模式在不同的场景中可以帮助开发者更有效地组织和管理代码,提高代码的可维护性和可扩展性。但过度使用或不恰当使用也可能导致代码复杂性增加。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

13分19秒

095-尚硅谷-图解Java设计模式-代理模式(5)-几种变体

3分47秒

69_docker network网络模式有几种

17分0秒

028-尚硅谷-图解Java设计模式-设计模式概述和分类

11分12秒

001-尚硅谷-图解Java设计模式-设计模式面试题(1)

11分20秒

002-尚硅谷-图解Java设计模式-设计模式面试题(2)

21分31秒

003-尚硅谷-图解Java设计模式-何时会用到设计模式

12分23秒

java设计模式之策略模式搭配SPI(一)

34分24秒

java设计模式之策略模式搭配SPI(二)

33分6秒

java设计模式之策略模式搭配SPI(完结)

1分12秒

常用的jQuery事件有几种?

15分15秒

Golang教程 数据结构和设计模式 54 设计模式简介 学习猿地

36分33秒

Golang教程 数据结构和设计模式 71 模板设计模式 学习猿地

领券