JavaScript单例模式是什么及怎么实现
今天小编给大家分享一下JavaScript单例模式是什么及怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
创新互联网站建设公司,提供网站建设、成都网站设计,网页设计,建网站,PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,是专业的做网站团队,希望更多企业前来合作!
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
上,下面做的是登录按钮的一个点击事件,点击登录按钮就会创建登录浮窗并将display
从none
改为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
,如果result
是null
或者undefined
就执行后面的逻辑,将这个传进来的函数的返回值也就是这个div赋给result
,这样我们下面的函数就执行一次就可以了,下次调用的时候result
有值,所以就直接返回了,不会在执行后面的逻辑。
以上就是“JavaScript单例模式是什么及怎么实现”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。
网站名称:JavaScript单例模式是什么及怎么实现
URL标题:http://pwwzsj.com/article/gohojg.html