JavaScript中的设计模式 单例模式

作者:Ned 时间:2024-05-05 09:05:54 

前言:

设计模式在我们编程中是十分重要的!

设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

最近在学习设计模式,铁铁们一起来卷嘛?

1、什么是设计模式

在软件设计过程中,针对特定问题的简洁而优雅的解决方案。

把之前的经验总结并且合理运用到某处场景上,能够解决实际的问题。

2、设计模式五大设计原则(SOLID)

S-单一职责原则

即一个程序只做好一件事

O-开放封闭原则

可扩展开放,对修改封闭

L-里氏置换原则

子类能覆盖父类,并能出现在父类出现的地方

I-接口独立原则

保持接口的单一独立

D-依赖导致原则

使用方法只关注接口而不关注具体类的实现

3、为什么需要设计模式?

易读性

使用设计模式能够提升我们的代码可读性,提升后续开发效率

可拓展性

使用设计模式对代码解耦,能很好的增强代码的yi修改性和拓展性

复用性

使用设计模式可以复用已有的解决方案,无需重复相同工作

可靠性

使用设计模式能够增加系统的健壮性,使代码编写真正工程化

4、单例模式

定义:唯一&全局访问。保证一个类仅有一个实例,并提供一个访问它的全局访问点。

另外一种多例模式,通过一个类构造出多个不一样的实例,这就是多例模式。

单例模式与多例模式最本质的区别:实例的数量。

单例模式永远只有一个实例,这个实例可以被缓存起来,可以复用。

应用场景:就是能被缓存的内容,例如登录弹窗。

我觉得就是一个地方如果在你的项目中可以用到两次或两次以上,都可以尝试一下这个,能够减少很多代码。

来看这段伪代码:


const creatLoginLayer = () => {
   const div = document.createElement("div");
   div.innerHtml = "登录浮窗";
   div.style.display = "none";
   document.body.appendChild(div);
   return div;
};

document.getElementById("loginBtn").onclick = () => {
   const loginLayer = creatLoginLayer();
   loginLayer.style.display = "block";
};

creatLoginLayer的作用是创建一个登录浮窗并将节点添加到body上,下面做的是登录按钮的一个点击事件,点击登录按钮就会创建登录浮窗并将displaynone改为block,将他显示出来。

这个逻辑是没毛病的,但是我们想一下,每点击一下登录按钮就要执行这些代码,一个项目中如果有很多地方要呢?我们上面这短短几行而已,如果是上百上千甚至上万呢?是不是就非常损耗性能,这个时候,我们的单例模式就派上了用场。

使用单例模式后:


const getSingle = (fn) => {
   let result;
   return (...rest) =>{
       return result || (result = fn.apply(this.rest));
   };
};

const creatLoginLayer = () => {
   const div = document.createElement("div");
   div.innerHtml = "登录浮窗";
   div.style.display = "none";
   document.body.appendChild(div);
   return div;
};

const createSingleLoginLayer = getSingle(createLoginLayer);

document.getElementById("loginBtn").onclick = () => {
   const loginLayer = createSingleLoginLayer();
   loginLayer.style.display = "block";
};

可以见到,增加了一个getSingle函数,这里有个闭包的概念,result变量只要一直在引用就不会被销毁,起到了一个缓存的作用,函数的参数是一个function,如果resultnull或者undefined就执行后面的逻辑,将这个传进来的函数的返回值也就是这个div赋给result,这样我们下面的函数就执行一次就可以了,下次调用的时候result有值,所以就直接返回了,不会在执行后面的逻辑。

来源:https://juejin.cn/post/7011458744437440542

标签:JavaScript,设计模式,单例模式
0
投稿

猜你喜欢

  • 有效LOGO设计的最重要的提示

    2010-06-09 12:05:00
  • Python常见异常的处理方式浅析

    2022-05-14 17:32:37
  • 配置SQL Server数据库恢复模式(2种方法)

    2024-01-16 12:17:42
  • php之二维数组排序问题

    2023-07-15 06:44:42
  • JS实现点击掉落特效

    2023-09-12 12:50:33
  • MySQL存储过程的查看与删除实例讲解

    2024-01-23 06:14:11
  • ASP同一站点下gb2312和utf-8页面传递参数乱码的终极解决方法

    2011-02-20 11:00:00
  • vue3 自定义指令详情

    2024-05-09 15:08:31
  • MySql带OR关键字的多条件查询语句

    2024-01-21 22:39:25
  • MySQL数据同步Elasticsearch的4种方案

    2024-01-28 18:10:49
  • 使用Python中的cookielib模拟登录网站

    2022-01-20 08:54:26
  • python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法

    2023-10-06 12:13:03
  • Python获取单个程序CPU使用情况趋势图

    2021-11-19 02:36:59
  • JavaScript实现的背景自动变色代码

    2024-04-16 09:02:17
  • 对有自增长字段的表导入数据注意事项

    2024-01-22 17:54:51
  • 经测试最好用的mysql密码忘记的解决方法

    2024-01-27 17:12:57
  • JavaScript实现鼠标经过显示下拉框

    2024-04-28 09:52:36
  • Web 前端优化最佳实践之 Cookie 篇

    2008-06-25 13:00:00
  • 详解Python连接oracle的问题记录与解决

    2021-04-07 09:38:41
  • golang 用msgpack高效序列化的案例

    2024-04-26 17:32:52
  • asp之家 网络编程 m.aspxhome.com