单例模式,策略模式,代理模式,迭代器模式,发布订阅模式

news/2024/7/19 13:36:19 标签: js

单例模式

1.什么是单例模式

是指在一个类只能有一个实例,即使多次实例化该类,也只返回第一次实例化后的实例对象。

2.主要解决:

一个全局使用的类频繁地创建与销毁。

3.js单例模式何时使用:

当您想控制实例数目,节省系统资源的时候。

4.如何解决:

判断系统是否已经有这个单例,如果有则返回,如果没有则创建。

5.js单例模式优点:

1、在内存里只有一个实例,减少了内存的开销,尤其是频繁的创建和销毁实例(比如管理首页页面缓存)。

2、避免对资源的多重占用(比如写文件操作)。

6.单例模式缺点:

没有接口,不能继承,与单一职责原则冲突,一个类应该只关心内部逻辑,而不关心外面怎么样来实例化。

7.js单例模式使用场景:

全局缓存。

弹窗

const singleton = function(name) {

    this.name = name

    this.instance = null

}

singleton.prototype.getName = function() {

    console.log(this.name)

}

singleton.getInstance = function(name) {

    if (!this.instance) { // 关键语句

        this.instance = new singleton(name)

    }

    return this.instance

}

// test

const a = singleton.getInstance('a') // 通过 getInstance 来获取实例

const b = singleton.getInstance('b')

console.log(a === b)

转自:https://www.php.cn/js-tutorial-408588.html

策略模式

1.什么是策略模式?

根据不同参数可以命中不同的策略

2.主要解决:

在有多种算法相似的情况下,使用 if…else 所带来的复杂和难以维护。

3.策略模式何时使用:

有许多种情况,而区分它们的只是他们直接的行为。

4.如何解决:

通过一个hash对象,来映射不同的策略。

5.js策略模式优点:

1、算法可以自由切换。

2、避免使用多重条件判断。

3、扩展性、复用性良好。

6.js策略模式缺点:

1、策略类会增多。

2、所有策略类都需要对外暴露。

7.策略模式使用场景:

1.需要动态地根据行为改变运行方法。

2.为了减少代码,同时为了让代码具有更好的可读性。

3.需要对策略进行统一管理。

const strategy = {

  'S': function(salary) {

    return salary * 4

  },

  'A': function(salary) {

    return salary * 3

  },

  'B': function(salary) {

    return salary * 2

  }

}

const calculateBonus = function(level, salary) {

  return strategy[level](salary)

}
calculateBonus('A', 10000) // 30000

转自:https://www.php.cn/js-tutorial-408589.html

代理模式

什么是代理模式

使用代理的原因是我们不愿意或者不想对原对象进行直接操作,我们使用代理就是让它帮原对象进行一系列的操作,等这些东西做完后告诉原对象就行了。

迭代器模式

什么是迭代器模式?

提供一种方法顺序访问一个聚合对象中各个元素, 而又无须暴露该对象的内部表示。

聚合 是将几个对象收集在一起生成一个新对象的行为

主要解决

不同的方式来遍历整个整合对象。

何时使用

遍历一个聚合对象。

如何解决

把在元素之间游走的责任交给迭代器,而不是聚合对象。

迭代器模式使用场景

1、访问一个聚合对象的内容而无须暴露它的内部表示。

2、需要为聚合对象提供多种遍历方式。

3、为遍历不同的聚合结构提供一个统一的接口。

function each(arr, fn) {    

for (let i = 0; i < arr.length; i++) {

        fn(i, arr[i])

    }

}
 
each([1, 2, 3], function(i, n) {

    console.log(i) // 0 1 2

    console.log(n) // 1 2 3
})

转自:https://www.php.cn/js-tutorial-408591.html

发布订阅模式

发布—订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知。

一个对象有很多属性,一些观察者监听其中一个属性,当这个属性发生改变的时候痛着这个观察者


http://www.niftyadmin.cn/n/1371458.html

相关文章

setup里面获取dom元素

注意&#xff1a;ref“变量” 变量ref&#xff08;null&#xff09;变量.value这里的变量名称要一致

深入理解vue生命周期

1.beforeCreate 组件实例被创建之初 干了什么事&#xff1f; 初始化vue实例&#xff0c;进行数据观测 能做什么&#xff1f; 1.执行时组件实例还未创建&#xff0c;通常用于插件开发中执行一些初始化任务 2.可以在这写一个Loading事件 2.created 组件实例已经完全创建 …

函数只执行第一次的执行一次 once函数

//只执行一次函数function once(fn){var ifFalse truereturn function(){if(ifFalse){ifFalse falsefn()}}}//调用function getName(){console.log(我叫吉娃娃)}getName once(getName)getName() //我叫吉娃娃getName() //不执行转自链接&#xff1a;https://www.nowcoder.co…

setInterval、setTimeout、requestAnimationFrame

setTimeout :设置某个时间后执行某个动作&#xff0c;表示延时执行某个动作 setInterval :设置每隔多久执行一次某个动作&#xff0c;它是循环的&#xff0c;如果想重复执行使用该方法 requestAnimationFrame :不需要设置时间间隔&#xff0c;要求浏览器在下次重绘之前调用指…

react借助消息订阅与发布实现兄弟组件的通信

1.安装 pubsub-js yarn add pubsub-js 使用 取消订阅 实践 1.订阅消息 只要有人发布了同名称的消息就可以接收到 2.发布消息 详情&#xff1a;https://github.com/mroderick/PubSubJS

react对props进行限制

1&#xff1a;使用npm安装prop-types包 npm install prop-types 2&#xff1a;导入工具包 import PropTypes from ‘prop-types’; 3&#xff1a;对传入的props进行限制&#xff08;这个是写在接收的位置&#xff09; isRequired&#xff1a;表示此类型是否必须 PropTypes.(你…

复习react-redux(2)

1.connect react不想让ui组件直接于react-reudux直接联系&#xff0c;所以要借助connect connect要写在ui组件中 获取的状态主要就是reducer通过一系列操作最后返回来的data 分发actions&#xff0c;每个reducer需要根据action来判断操作&#xff0c;store把action交给red…