【设计模式】建造者模式和单例模式

建造者模式

建造者模式(builder pattern)属于创建型模式的一种,提供一种创建复杂对象的方式。它将一个复杂的对

象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。

建造者模式是一步一步的创建一个复杂的对象,它允许用户只通过指定复杂的对象的类型和内容就可以构建

它们,用户不需要指定内部的具体构造细节。

js 复制代码
class Navbar {
    init() {
        console.log('Navbar init')
    }
    getData() {
        console.log('Navbar getData')
    }
    render() {
        console.log('Navbar render')
    }
}
class List {
    init() {
        console.log('List init')
    }
    getData() {
        console.log('List getData')
    }
    render() {
        console.log('List render')
    }
}
class Creator {
    startBuild(builder) {
        builder.init()
        builder.getData()
        builder.render()
    }
}
const creator = new Creator()
creator.startBuild(new Navbar())
creator.startBuild(new List())

建造者模式将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示。工厂模式主

要是为了创建对象实例或者类簇(抽象工厂),关心的是最终产出(创建)的是什么,而不关心创建的过程。而建造者模式关心的是创建这个对象的整个过程,甚至于创建对象的每一个细节。

单例模式

  1. 保证一个类仅有一个实例,并提供一个访问它的全局访问点
  2. 主要解决一个全局使用的类频繁地创建和销毁,占用内存

es5 写法:

js 复制代码
function User(name, age) {
    this.name = name;
    this.age = age;
}
const Singleton = (function () {
    let instance = null;
    return function (name, age) {
        if (!instance) {
            instance = new User(name, age)
        }
        return instance;
    }
})()
console.log(Singleton() === Singleton()) // true 单例模式 使用同一个实例 同一份地址 避免占用内存

es6 写法:

js 复制代码
class Singleton {
    constructor(name, age) {
        if (!Singleton.instance) {
            this.name = name;
            this.age = age;
            Singleton.instance = this;
        }
        return Singleton.instance;
    }
}

console.log(new Singleton('张三', 18) === new Singleton('李四', 20)) // true
console.log(Singleton) // [class Singleton] { instance: Singleton { name: '张三', age: 18 } }

应用场景:

  1. 供全局使用的对话框
  2. Vuex、Pinia 全局状态管理
相关推荐
摘星编程12 分钟前
并发设计模式实战系列(3):工作队列
设计模式·并发编程
Pasregret39 分钟前
访问者模式:分离数据结构与操作的设计模式
数据结构·设计模式·访问者模式
Aniugel3 小时前
JavaScript高级面试题
javascript·设计模式·面试
不当菜虚困4 小时前
JAVA设计模式——(四)门面模式
java·开发语言·设计模式
Niuguangshuo4 小时前
Python设计模式:MVC模式
python·设计模式·mvc
Lei活在当下4 小时前
【现代 Android APP 架构】01. APP 架构综述
android·设计模式·架构
前端大白话4 小时前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
前端大白话4 小时前
前端必看!figure标签在响应式图片排版中的王炸操作,grid/flex布局实战指南
前端·设计模式·html
ApeAssistant4 小时前
Spring + 设计模式 (十四) 行为型 - 观察者模式
spring·设计模式
ApeAssistant4 小时前
Spring + 设计模式 (十三) 行为型 - 策略模式
spring·设计模式