设计模式详解

已于 2022-11-10 20:50:47 修改
阅读量212 收藏
点赞数
文章标签： 设计模式 组合模式
于 2022-11-03 21:41:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73467167/article/details/127678980
版权

概述：

设计模式是一种固定的解决某个问题的一种方式，他是一个固定的模式（原理都是一样的），他不区分语言。常用的设计模式有23种，他分为三类（主要针对的是类和对象）。

设计模式分类

  • 创建型 （创建对象）单例模式、工厂模式

  • 结构型（将多个小结构变成一个大结构）组合模式 代理模式 装饰器模式 适配器模式

  • 行为型 （对应类和对象的行为进行相关处理）观察者模式

设计模式的原则

  • 开闭原则

  • 里式置换原则

  • 单一原则

  • 依赖倒置原则

  • 接口隔离原则

  • 迪米特原则

工厂模式讲解

  • 根据对应的工厂方法生成对应的对象（生产相关对象）

function factory(name){
    //手动构建对象
    var obj = new Object()
    //给对象进行属性赋值
    obj.name = name
    //手动返回对象
    return obj
}
//调用工厂生产对象
let obj1 = factory('jack')
let obj2 = factory('tom')

单例模式

  • 保证生成的对象实例只有一个

基础类

//基础类
class Person{
    constructor(){
        
    }
}

闭包实现

//闭包的单例模式
function closureSingleton(){
    //接收返回对象的变量
    var instance = null
    return function(){
        //如果当前的变量值为null
        if(!instance){
            //构建一个对象赋值给返回的变量
            instance = new Person()
        }
        return instance
    }
}
let single = closureSingleton()
let person1 = single()
let person2 = single()
console.log(person1==person2)

原型

//原型的单例
function prototypeSingleton(){
    //判断原型上是否具备newPerson这个属性
    if(!prototypeSingleton.prototype.instance){
        prototypeSingleton.prototype.instance = new Person()
    }
    return prototypeSingleton.prototype.instance
}
let person3 = prototypeSingleton()
let person4 = prototypeSingleton()
console.log(person3 == person4)

静态属性

//静态属性单例
function staticSingleton(){
    if(!staticSingleton.instance){
        staticSingleton.instance = new Person()
    }
    return staticSingleton.instance
}
let person5 = staticSingleton()
let person6 = staticSingleton()
console.log(person5 == person6)

全局属性实现

  • window是浏览器global对象 但是其他的global对象不是window

//全局对象实现
function globalSingleton(){
    if(!window.instance){
        window.instance = new Person()
    }
    return window.instance
}
let person7 = globalSingleton()
let person8 = globalSingleton()
console.log(person7 == person8)

组合模式 (*)

  • 将多个对象的相同方法或者属性组合到一块（将不同的方法组合在一块执行）

基础内容

class GoToHome{
    constructor(){
        this.action = ()=>{
            console.log('回家')
        }
    }
}
class OpenComputer{
    constructor(){
        this.action = ()=>{
            console.log('打开电脑')
        }
    }
}
class PlayGame{
    constructor(){
        this.action = ()=>{
            console.log('玩游戏')
        }
    }
}
new GoToHome().action()
new OpenComputer().action()
new PlayGame().action()

将多个的方法组合在一块进行统一调用

class Combiner{
    constructor(){
        this.list = []
    }
    //将对应的对象加入到list中
    push(obj){
        this.list.push(obj)
    }
    //统一执行相关函数
    execute(fnName,...arg){
        //遍历list
        this.list.forEach(item=>{
            //执行对应的函数
            item[fnName].call(this,...arg)
        })
    }
}
let combiner = new Combiner()
//将对象加入
combiner.push(new GoToHome())
combiner.push(new OpenComputer())
combiner.push(new PlayGame())
//执行action方法
combiner.execute('action')

组合模式在vue中的使用

  • Vue.use 方法（自动执行install）

  • install 方法

  • 如果在use里面传入的是一个函数 那么他会把这个函数直接当成install 如果传的是对象 他会自动去找里面的instal方法

模拟实现use和install

class Vue {
    constructor() {
        this.fnList = []
    }
    use(obj) {
        //如果他是一个函数 那么这个函数直接当成install
        if (typeof obj == 'function') {
            this.fnList.push(obj)
        }
        //如果他是对象就找里面的install
        if (typeof obj == 'object') {
            this.fnList.push(obj.install)
        }
        //调用执行
        this.execute()
    }
    execute() {
        //遍历对应的函数列表
        this.fnList.forEach((fn) => {
            fn()
        })
    }
}
var vue = new Vue()
vue.use({
    install() {
        console.log('你好')
    }
})
vue.use({
    install() {
        console.log('世界')
    }
})
vue.use(() => {
    console.log('哈哈哈哈')
})

装饰器模式

场景

我现在有三个车的类，这个三个车他都有对应的跑的方法，现在我需要给这个三个车加一个飞的方法（设计模式开闭原则，一个类一旦写完了不允许内部再进行修改），这个时候就可以使用对应的装饰器模式。

概述

装饰器模式是在不影响原本类的基础上，进行功能扩展。他又叫做包装模式。

实现

基础类

class Car{
    constructor(){
    }
    run(){
        console.log('跑')
    }
}

包装类

class Decorator{
    //将基础类传入包装类
    constructor(car){
        this.car = car
    }
    fly(){
        console.log('飞')
        this.car.run()
    }
}
new Decorator(new Car()).fly()

在typeScript中有个对应的装饰器修饰 @Decorator

观察者模式 (*)

概述：

观察者模式是前端最常用的模式，他又被称为发布者-订阅者模式。他的核心是一个对应的发布者进行发布，以及对应的有个订阅者（对于发布的内容进行监听），发布者将对应的内容发布，订阅者就会收到信息从而进行对应的处理。

观察者模式的核心内容

  • 发布者

  • 订阅者

  • 相关处理

其实我们的事件就是一个观察者模式（事件发布者 事件监听者 事件处理）

element.addEventListener('事件名',处理函数)
element.removeEventListener('事件名',处理函数)

简单的事件示例

<button>点我</button>
<script>
let btn = document.querySelector('button')
btn.addEventListener('click',handler)
function handler(){
    console.log('点击了')
}
</script>

  • 发布者 button

  • 订阅者 JavaScript引擎

  • 处理 handler

分析这个事件的相关内容

  • 发布者

  • 事件名

  • 处理函数

相关关系

  • 事件名和处理函数的关系 一对多 （一个事件可以有多个处理函数）click:[handler1,handler2]

  • 发布者和事件名的关系 一对多 （一个发布者可以发布多个事件） {事件名:[处理函数]}

根据对应的事件监听机制来模拟观察者

事件监听的过程

  • 事件发布 （有对应的事件名）on

  • 事件执行 （根据对应的事件名执行相关的处理函数） emit

  • 事件取消 （将对应的事件移除）off

代码构建

class obServer{
    constructor(){
        //{click:[handler1,handler2],mousemove:[handler1,handler2]}
        this.obj = {}
    }
    //事件发布 事件名  处理函数
    on(eventName,handler){
        
    }
    //事件执行 事件名  参数
    emit(eventName,...arg){
    
    }
    //事件取消 事件名  处理函数
    off(eventName,handler){
        
    }
}

代码完善

on方法

class ObServer{
    constructor(){
        //{click:[handler1,handler2],mousemove:[handler1,handler2]}
        this.obj = {}
    }
    //事件发布 事件名  处理函数
    on(eventName,handler){
        //判断这个eventName是否存在
        //如果当前的事件名不存在 给他赋值一个空数组
        if(!this.obj[eventName]){
            this.obj[eventName] = []
        }
        //将事件添加进去
        this.obj[eventName].push(handler)
    }
    //事件执行 事件名  参数
    emit(eventName,...arg){
    
    }
    //事件取消 事件名  处理函数
    off(eventName,handler){
        
    }
}

emit方法

class ObServer{
    constructor(){
        //{click:[handler1,handler2],mousemove:[handler1,handler2]}
        this.obj = {}
    }
    //事件发布 事件名  处理函数
    on(eventName,handler){
        //判断这个eventName是否存在
        //如果当前的事件名不存在 给他赋值一个空数组
        if(!this.obj[eventName]){
            this.obj[eventName] = []
        }
        //将事件添加进去
        this.obj[eventName].push(handler)
    }
    //事件执行 事件名  参数
    emit(eventName,...arg){
        //判断这个eventName是否存在
        if(!this.obj[eventName]) return
        //获取这个事件里面所有的处理函数 执行这些处理函数
        //遍历对应的处理函数数组
        this.obj[eventName].forEach(handler=>{
            //执行对应的处理函数 传入参数
            handler.call(this,...arg)
        })
    }
    //事件取消 事件名  处理函数
    off(eventName,handler){
        
    }
}

off方法

class ObServer{
    constructor(){
        //{click:[handler1,handler2],mousemove:[handler1,handler2]}
        this.obj = {}
    }
    //事件发布 事件名  处理函数
    on(eventName,handler){
        //判断这个eventName是否存在
        //如果当前的事件名不存在 给他赋值一个空数组
        if(!this.obj[eventName]){
            this.obj[eventName] = []
        }
        //将事件添加进去
        this.obj[eventName].push(handler)
    }
    //事件执行 事件名  参数
    emit(eventName,...arg){
        //判断这个eventName是否存在
        if(!this.obj[eventName]) return
        //获取这个事件里面所有的处理函数 执行这些处理函数
        //遍历对应的处理函数数组
        this.obj[eventName].forEach(handler=>{
            //执行对应的处理函数 传入参数
            handler.call(this,...arg)
        })
    }
    //事件取消 事件名  处理函数
    off(eventName,handler){
        //判断这个eventName是否存在
        if(!this.obj[eventName]) return
        //遍历对应的eventName里面处理函数数组 找到匹配的handler将他删除
        this.obj[eventName].forEach((v,i)=>{
            if(Object.is(v,handler)){
                this.obj[eventName].splice(i,1)
            }
        })
    }
}

注意事项

  • emit执行他可以传参传给对应的on方法里面处理函数（vue中父传子的实现及bus传值的实现）

  • off调用一定要emit之前

  • 观察者模式是vue2底层实现

代理模式（*）

概述：

在不改变原本的类的基础上，对于对象进行功能加强，代理模式代理出来的是对象。（代理模式低耦合）

示例

  • 你家里需要装修 但是你不想动手 这个时候你就会找一个装修队（代替你进行装修）

  • 代理对象和被代理对象是俩个不同的对象，但是实际操作的内容是一个

核心关键词

  • 被代理对象 你

  • 代理对象 装修对象

  • 操作内容 你家的房子

代理的实现

  • 在js中 es7新增了一个Proxy的类 这个类专门是用来做代理的 所以我们只需要掌握这个类的使用就ok了

Proxy的使用

新建代理对象（通过proxy的构造）

let proxy = new Proxy(被代理对象,处理对象)

基础使用

//被代理对象
let obj = {
    name: 'jack',
    age: 18
}
//通过proxy来新建代理对象 
//Proxy的构造函数需要传入被代理对象 以及相关的处理对象
//对于handler他是对于所有的属性进行操作
//get在获取属性的时候调用  他返回的结果就是你接收的结果
//set对于设置属性的时候调用
let proxy = new Proxy(obj,{
    //目标对象（被代理对象） 属性（实际访问的属性）  代理对象（当前proxy）
    get(target,attribute,proxyObj){ //这个里面返回的值就是当前的获取值
        console.log('调用了get');
        if(attribute == 'name'){
            return '姓名为'+target[attribute] 
        }else if(attribute == 'age'){
            return target[attribute]+'岁'
        }
        return target[attribute] 
    },
    //目标对象（被代理对象） 属性（实际访问的属性）值 代理对象（当前proxy）
    set(target,attribute,value,proxyObj){
        console.log('调用了set');
        target[attribute] = value
    },
    //定义属性 赋值新的属性  目标对象  属性名  属性的详情信息
    defineProperty(target,attribute,descriptor){
        console.log('新的属性定义');
    },
    //删除属性 delete的时候
    deleteProperty(target,attribute,proxyObj){
        console.log('删除属性');
        delete target[attribute]
    }
})

proxy的处理对象的四大属性

  • get 访问属性的时候调用

    console.log( proxy.name); //调用get
console.log( proxy.age); //调用get

  • set 设置属性的时候调用

    proxy.name = '你好' //调用set

  • defineProperty 定义属性的时候调用

    Object.defineProperty(proxy,'sex',{
    configurable:true,//是否可以删除
    enumerable:true,//是否可以遍历
    value:'男',//属性值
    writable:true//是否可以改变
})

  • deleteProperty 删除属性的时候调用

    delete proxy.name //调用deleteProperty

总结

  • Proxy是一个es7新增的一个类 他返回的是一个对象

  • Proxy里面传入被代理对象和对应的处理对象

  • 处理对象包含4个方法（get set defineProperty deleteProperty）

  • Proxy里面实际操作是被代理对象 （如果在里面操作代理对象会造成栈溢出）

  • 代理对象和被代理对象不是一个对象 但是操作的内容是一个都是被代理对象

  • Proxy是vue3的底层实现之一

适配器模式

概述

将旧的的内容进行新的适配，在原本的基础上做兼容处理。

常用的业务场景

  • 旧的接口替换新的接口（在不改变原本内容的情况下完成替换）

  • 表单验证 （根据场景切换相关的验证）

代码实现

class phone{
    constructor(){
        
    }
    fn(){
        return 22
    }
}
class Adaptive{
    constructor(){
        
    }
    fn(){
        return '220转为'+new Phone().fn()
    }
}
//实际使用的是对于的适配的内容
new Adaptive().fn()

贩剑小达人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
设计模式讲解
09-17
采用简单、移动的语言对目前23种设计模式进行讲解。
day24-设计模式
m0_71706639的博客
11-02 149
day24-设计模式
23 种设计模式详解（3.7万字带你了解设计模式）
最新发布
小电玩
04-10 748
设计模式分为三大类： 创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。 结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。 行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。
设计模式详解（总纲）
v5browser
05-30 184
作者：zuoxiaolong8810（左潇龙），转载请注明出处。 最近一直在学习设计模式相关的知识，还是老规矩，和各位一起学习，一起探讨，本系列所发表所有内容仅代表个人观点。 《简介》 说到设计模式，当初第一次听到时，第一反应就是很深奥，完全理解不了这个概念到底是什么意思，下面我先从网上摘录一份定义。 设计模式（Designpattern）是一套被反复使用、多数人知...
设计模式
03-19 678
                             设计模式      设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。      毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一
java23种设计模式详解
01-19
java23种设计模式详解附带所有代码实现，适合初学者，请点个赞，谢谢
常见的软件设计模式详解
09-22
常见的软件设计模式详解，包括策略模式、装饰者模式、适配器模式、观察者模式
22种设计模式详解
weixin_44577346的博客
07-23 1804
目录设计模式分类创建型模式1、单例模式2、工厂模式 设计模式分类 创建型模式 用于描述怎么创建对象，主要特点是将对象创建与使用分离。 有单例、工厂方法、抽象工厂、原型和建造者这五种模式。 结构型模式 用于描述如何将类或对象按某种布局组成更大的结构。 有代理、适配器、桥接、装饰、外观、享元和组合这七种模式。 行为型模式 用于描述类或对象之间怎样相互协同，共同完成单个对象无法完成的任务，以及怎样分配职责。 有模板方法、策略、命令、职责链、状态、观察者、中介者、迭代器、访问者、备忘录、解释器等 11
设计模式之介绍/23类型/6大原则
LJW874362735的博客
10-15 172
设计模式简介 设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。 设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可...
设计模式全解析（一）——带你搞懂设计模式
一个手艺人
08-26 379
各位朋友，一提到“设计模式”四个字，是不是有一种若隐若现的朦胧感，“我知道设计模式，我知道单例、工厂、观察者、策略...”，但是设计模式到底是什么呢？解决了什么问题呢？接下来我会一步一步解析一下设计模式，以及各个不同的设计模式到底要做的是什么。 我们先看一个完整设计模式的minmap。 是不是看着还挺多的，但其实内容并没有多少，本篇给大家罗列一个大纲，针对每一种设计模式，再单独深入探究讨论，通过实践的形式让设计模式轻快简单易懂。（在此感谢@小傅哥|bugstack.cn 以及其他各位前辈的指导，
java种设计模式
青春的小白
08-29 1095
创建型模式 这些设计模式提供了一种在创建对象的同时隐藏创建逻辑的方式，而不是使用 new 运算符直接实例化对象。这使得程序在判断针对某个给定实例需要创建哪些对象时更加灵活。 1.工厂模式（Factory Pattern） 2.抽象工厂模式（Abstract Factory Pattern） 3.单例模式（Singleton Pattern） 4.建造者模式（Builder Pattern）
设计模式实用讲解
m0_37609239的博客
02-20 439
随着代码写的越来越多，关于设计模式的学习和思考也日益增多。 那么究竟什么是设计模式呢？
23种设计模式
humorious的博客
04-08 257
23种设计模式 创建型模式 单例模式，工厂模式，抽象工厂模式，建造者模式，原型模式。 结构型模式 适配器模式，桥接模式，装饰模式，组合模式，外观模式，享元模式，代理模式。 行为型模式 模版模式，命令模式，迭代器模式，观察者模式，中介者模式，备忘录模式，解释器模式，状态模式，策略模式，职责链模式，访问者模式。 单例模式 核心作用：保证一个类只有一个实例，并且提供一个访问该实例的全局访问点。 常用应用场景： Windowsd 的Task Managed（任务管理器）就是一个典型的单例模式 Windows的Re
JavaScript的设计模式详解
09-07
JavaScript的设计模式详解是一本由涂根华所写的书籍，它非常详细地介绍了JavaScript的设计模式。这本书以单例模式为开篇，单例模式保证一个类只有一个实例，并提供一个全局访问点。这是一种常用的模式，可应用于许多...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值