JS 设计模式(2)-- 复习

news2024/12/25 12:52:25

目录

策列模式

代理模式

观察者模式

发布订阅模式

模块模式


策列模式

策略模式定义了一系列算法,并将每个算法封装起来,使他们可以相互替换,且算法的变化不会影响使用算法的用户,策列模式属于对象行为模式,它通过对算法进行封装,把使用算法的责任和算法的实现分割开来,并委托给不同的对象进行算法管理

    let startgry = {
        's': salary => salary * 5,
        'a': salary => salary * 4,
        'b': salary => salary * 3,
        'c': salary => salary * 2
    }
    function calBonus(level, salary) {
        // if (level == 'a') {
        //     return salary * 4
        // }
        // if (level == 'b') {
        //     return salary * 3
        // }
        // if (level == 'c') {
        //     return salary * 2
        // }
        return startgry[level](salary)
    }

    console.log(calBonus('a', 3000));

该模式主要解决多种算法相似的情况下,使用if...else所带来的复杂和难以维护,他的优点是算法可以自由切换,同时可以避免多重if else 判断 且具有良好的扩展性       

代理模式

代理模式,为其他对象提供一种代理,以控制这个对象的访问

代理模式使得代理对象控制具体对象的引用,代理几乎可以是任何对象,文件,资源,内存中的对象,或者是一些难以复杂的东西

class Star {
        play() {
            console.log('演戏');
        }
    }
    class StarProxy {
        constructor() {
            this.superStar = new Star()
        }
        talk(price) {
            if (price >= 10000) {
                this.superStar.play()
            } else {
                throw new Error{ '价格不合适' }
            }
        }
    }

es6的proxy

 let star = {
        name: 'zs',
        workPrice: 10000
    }
    let proxy = new Proxy(star, {
        get(target, key) {
            if (key == 'workPrice') {
                console.log('访问了');
            }
            return target[key]
        },
        set(target, key, value) {
            if (key == 'workPrice') {
                console.log('设置了');
                if (value >= 10000) {
                    console.log('可以合作');
                } else {
                    throw new Error('价格不合适')
                }
            }
        }
    })
    console.log(proxy.workPrice = 10000);

观察者模式

观察者模式包含目标和观察者对象两类对象

一个目标可以有任意数目的与之相依赖的观察者

一旦观察目标的状态发生改变,所有观察者都将得到通知

当一个对象的状态发生改变时,所有依赖它的对象都将得到通知并被自动更新,解决了主体对象与观察者之间功能的耦合,即一个对象状态改变给其他对象通知的问题

  // 被观察目标
    class Subject {
        constructor() {
            this.observer = []
        }
        add(observer) {
            this.observer.push(observer)
        }
        ontify() {
            this.observer.forEach(item => {
                item.update()
            })
        }
        remove(observer) {
            this.observer = this.observer.filter(item => item != observer)
        }
    }
    // 观察者
    class Observer {
        constructor(name) {
            this.name = name
        }
        update() {
            console.log('update', this.name);
        }
    }
    let subject = new Subject()
    let observer1 = new Observer('zs')
    let observer2 = new Observer('ls')
    subject.add(observer1)
    subject.add(observer2)
    subject.ontify()
    subject.remove(observer2)
    subject.ontify()
  • 优势:目标与观察者,功能耦合度降低,专注自身功能逻辑;观察者被动接收更新,时间上解耦,实时接收目标者的更新状态
  • 缺点:观察者虽然实现了对象间依赖关系的低耦合,但却不能对事件进行细分管理,如筛选通知指定主题事件通知

发布订阅模式

观察者和目标要相互知道

发布者和订阅者不用相互知道,通过第三方实现调度,属于经过解耦合的观察者模式

    const PubSub = {
        message: {

        },
        // 发布
        publish(type, data) {
            if (!this.message[type]) return
            this.message[type].forEach(item => item(data));
        },
        // 订阅
        subscribe(type, cb) {
            if (!this.message[type]) {
                this.message[type] = [cb]
            } else {
                this.message[type].push(cb)
            }

        },
        unsubscribe(type, cb) {
            if (!this.message[type]) return
            if (!cb) {
                this.message[type] && (this.message[type].length = 0)
            } else {
                this.message[type] = this.message[type].filter(item => item !== cb)
            }
        }

    }
    function testA(params) {
        console.log('testA', params);
    }
    function testB(params) {
        console.log('testB', params);
    }
    function testC(params) {
        console.log('testC', params);
    }
    PubSub.subscribe('A', testA)
    PubSub.subscribe('A', testC)
    PubSub.subscribe('B', testB)
    PubSub.publish('A', '消息来喽')
    PubSub.unsubscribe('A', testC)
    PubSub.publish('A', '消息来喽')
    PubSub.unsubscribe('A')
    PubSub.publish('A', '消息来喽')

模块模式

模块化模式最初被定义在传统软件工程中为类提供私有和公共封装的一种方法

能够使一个单独的对象拥有公共/私有的方法和变量,从而屏蔽来自全局作用域的特殊部分,这可以减少我们的函数名与页面其他脚本区域内定义的函数名冲突的可能性

    let testModule = (function () {
        let count = 0
        return {
            incrment() {
                return ++count
            },
            decrment() {
                return --count
            }

        }
    })()
    console.log(testModule.incrment());
    console.log(testModule.incrment());

 es6模块化

 export default {
        name: 'moduleA',
        test() {
            return 'test'
        }
    }
<script type="module">
    import moduleA from './1.js'
    console.log(moduleA);
</script>

module模式使用了闭包封装“私有”状态和组织,它提供了一种包装混合公有/私有方法和变量的方式,防止起泄露至全局作用域,并与别的开发人员接口发生冲突,通过该模式。只需返回一个共有api,而其他一切都维持在私有闭包里

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/194706.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java面试题(自用-持续更新)

本文目录如下&#xff1a;Java面试题一、基础知识JDK 和 JRE 有什么区别&#xff1f;String 属于基础的数据类型吗&#xff1f;基础类型有哪些?String str"xqz"与 String strnew String("xqz")一样吗&#xff1f;java 中操作字符串都有哪些类&#xff1f;…

王佩丰 Excel 基础24讲 | 学习笔记(全)

第一讲&#xff1a;认识Excel 1.简介 excel能做什么&#xff1f; 数据存储 → 数据处理 → 数据分析 → 数据呈现 excel界面 补充&#xff1a;Excel数据分析步骤 ①提出问题&#xff1a;明确自己需要通过数据分析解决什么问题 ②理解数据&#xff1a;理解数据各个字段的含义…

【手写 Promise 源码】第十五篇 - 了解 generator 生成器

一&#xff0c;前言 上一篇&#xff0c;实现了 promisify 和应用场景介绍&#xff0c;主要涉及以下几个点&#xff1a; promisify 简介和测试&#xff1b;promisify 功能的实现&#xff1a;promisify、promisifyAll&#xff1b; 目前&#xff0c;Promise 部分已基本完成&…

FPGA实现图像任意位置显示,串口协议控制显示位置,提供工程源码和技术支持

目录1、图像任意位置显示理论基础2、设计思路和架构3、OV5640图像采集4、图像DDR3三帧缓存5、图像任意位置输出显示6、串口协议控制显示位置7、vivado工程介绍8、上板调试验证9、福利&#xff1a;工程源码获取1、图像任意位置显示理论基础 图像任意位置显示指的是在显示屏上的…

Linux新手渣渣上路史

时至2022年&#xff0c;IT行业的迅速发展大家也有目共睹&#xff0c;IT行业在社会的发展中起着举足轻重的作用。其中一角Linux系统&#xff0c;从诞生到开源&#xff0c;再到现在受大众的欢迎&#xff0c;是一个很好的例子。Linux和windows类似&#xff0c;是一个操作系统&…

java 微服务高级之分布式事务 Seata框架 CAP定理 BASE理论 XA模式 AT模式 TCC模式 SAGA模式

分布式事务问题 1.1.本地事务 1.2.分布式事务 一旦有一个失败了&#xff0c;其他两个不知情失败的情况&#xff0c;还是执行并成功 在分布式系统下&#xff0c;一个业务跨越多个服务或数据源&#xff0c;每个服务都是一个分支事务&#xff0c;要保证所有分支事务最终状态一致…

【JavaEE】线程安全的集合类

引言 在Java标准库中&#xff0c;大部分集合类都是线程不安全的。Vector(比ArrayList多了同步化机制就变得线程安全了)&#xff1b;Stack(继承Vector)&#xff1b;Hashtable(只比Hashmap多了线程安全)&#xff1b;以Concurrent开头的集合类&#xff1a;ConcurrentHashMap、Con…

Echarts 用图形纹理来填充颜色(color - pattern)

第006个点击查看专栏目录在上一篇文章中已经讲过 ECharts线性渐变色示例演示&#xff08;2种渐变方式&#xff09;&#xff0c;这个示例的颜色使用纹理来做填充&#xff0c;纹理填充&#xff1a; pattern color:{ //纹理填充 image: patternImg, repeat: ‘repeat’ } 示例效果…

禾川HCQ ModBUS+485主从站调试

硬件&#xff0c;485转usb&#xff0c;如果主站是plc&#xff0c;不需要这个线&#xff0c;我现在主站是电脑&#xff0c;调试用。 HCQ0 禾川控制器。 软件 modbus tools 调试软件&#xff0c;自行下载吧&#xff0c;社区传不上去。 硬件连接时注意交叉连接&#xff0c;HCQ0 A端…

MATLAB 逻辑数组

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…

Java⽇志框架学习笔记

目录 1.⽇志概述 1.1 ⽇志是⽤来做什么的&#xff1f; 1.2 为什么要⽤到⽇志框架&#xff1f; 1.3 现有的⽇志框架有哪些&#xff1f; 1.4 ⽇志⻔⾯技术 2.logback 2.1 logback介绍 2.1.1 logback 模块 2.1.2 logback 组件 2.1.3 logback 配置 2.1.4 logback.xml 配…

2023网络爬虫 -- 获取动态数据

一、网站的正常界面1、网址https://movie.douban.com/typerank?type_name%E5%8A%A8%E4%BD%9C%E7%89%87&type5&interval_id100:90&action2、正常的页面二、爬取数据1、源代码import requests头{"User-Agent": "Mozilla/5.0 (Windows NT 10.0; WOW64…

首屏加载速度慢怎么解决?

一、什么是首屏加载 首屏时间&#xff08;First Contentful Paint&#xff09;&#xff0c;指的是浏览器从响应用户输入网址地址&#xff0c;到首屏内容渲染完成的时间&#xff0c;此时整个网页不一定要全部渲染完成&#xff0c;但需要展示当前视窗需要的内容 首屏加载可以说是…

分享156个ASP源码,总有一款适合您

ASP源码 分享156个ASP源码&#xff0c;总有一款适合您 下面是文件的名字&#xff0c;我放了一些图片&#xff0c;文章里不是所有的图主要是放不下...&#xff0c; 156个ASP源码下载链接&#xff1a;https://pan.baidu.com/s/1Mc-zWjUyk9Lx8TXv5cvZTg?pwds2qi 提取码&#x…

Office 365用户登录审核

黑客访问端点设备&#xff0c;以窃取公司特定数据、员工个人数据或任何其他可能对他们有任何用处的有价值的信息。 为了帮助您防止这种攻击&#xff0c;我们编写了一个参数列表&#xff0c;可以帮助您识别异常日志&#xff0c;这通常是攻击的第一个标志。异常登录活动是安全漏洞…

Vue使用ElementUI的确认框进行删除操作(包含前后端代码)

前言 今天做自己项目的时候&#xff0c;有一个删除的业务&#xff0c;正好遇到了确认框&#xff0c;在此纪念一下。 这里我是使用的ElementUI的确认框&#xff01; 首先ElementUI的确认框是这么说明的&#xff1a; 从场景上说&#xff0c;MessageBox 的作用是美化系统自带的 …

Java程序员跳槽,三面全过,面试官:你这样的,我们招不起

程序员小李在沿海城市工作了8年&#xff0c;那里涨幅飞快的房价限制了程序员小李在一线城市安家的想法&#xff0c;再加上突然发生的疫情暴露了远在他乡工作的不便&#xff0c;在种种因素下&#xff0c;程序员小李决定回家工作。 既然已经下定决心告别一线城市回家乡发展&…

数据分析面试-sql练习

SQL汇总1. SQL执行顺序2. 开窗函数3. 经典SQL题3.0 数据准备3.1 ☆ 查询‘01’课程比‘02’课程成绩高的学生3.2 查询平均成绩大于等于60分的同学的学生编号和学生姓名和平均成绩3.3 查询在SC表存在成绩的学生信息3.4 查询所有同学的学生编号、学生姓名、选课总数、所有课程的总…

Github每日精选(第96期):微软的机器学习课程ML-For-Beginners

12 周&#xff0c;26 节课&#xff0c;52 道测验&#xff0c;适合所有人的经典机器学习。 添加链接描述 初学者机器学习 - 课程 Microsoft 的 Azure Cloud Advocates 很高兴提供为期 12 周、26 节课的全部关于机器学习的课程。在本课程中&#xff0c;您将了解有时称为经典机器…

【C++】面向对象:继承

&#x1f431;作者&#xff1a;傻响 &#x1f431;专栏&#xff1a;《C语法》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 目录 C中的继承 1.继承的概念及定义 1.1继承的概念 1.2 继承定义 1.3 继承关系和访问限定符 1.4 继承基类成…