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

建造者模式

建造者模式(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 全局状态管理
相关推荐
用户938169125536020 分钟前
Head First 模板方法模式
设计模式
是糖糖啊4 小时前
OpenSpec 完整使用流程笔记 (SDD)
设计模式
程序员Terry1 天前
同事被深拷贝坑了3小时,我教他原型模式的正确打开方式
java·设计模式
刀法如飞2 天前
AI时代,程序员都应该是算法思想工程师
人工智能·设计模式·程序员
在西安放羊的牛油果2 天前
我把 2000 行下单代码,重构成了一套交易前端架构
前端·设计模式·架构
寅时码3 天前
React 正在演变为一场不可逆的赛博瘟疫:AI 投毒、编译器迷信与装死的官方
前端·react.js·设计模式
willow6 天前
Axios由浅入深
设计模式·axios
七月丶8 天前
别再手动凑 PR 了:这个 AI Skill 会按仓库习惯自动建分支、拆提交、提 PR
人工智能·设计模式·程序员
刀法如飞8 天前
从程序员到架构师:6大编程范式全解析与实践对比
设计模式·系统架构·编程范式