js设计模式:什么是单例模式?js单例模式的介绍
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js设计模式:什么是单例模式?js单例模式的介绍,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2128字,纯文字阅读大概需要4分钟。
内容图文
![js设计模式:什么是单例模式?js单例模式的介绍](/upload/InfoBanner/zyjiaocheng/286/6d6d2ef31d8b46559717187e9b8563b1.jpg)
什么是单例模式
定义:1.只有一个实例。2.可以全局访问
主要解决:一个全局使用的类频繁地创建与销毁。
js单例模式何时使用:当您想控制实例数目,节省系统资源的时候。
如何解决:判断系统是否已经有这个单例,如果有则返回,如果没有则创建。
js单例模式优点: 1、在内存里只有一个实例,减少了内存的开销,尤其是频繁的创建和销毁实例(比如管理首页页面缓存)。 2、避免对资源的多重占用(比如写文件操作)。
单例模式缺点:没有接口,不能继承,与单一职责原则冲突,一个类应该只关心内部逻辑,而不关心外面怎么样来实例化。
js单例模式使用场景: 1.全局缓存。2.弹窗
实现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)
JavaScript 中的单例模式
因为 JavaScript 是无类的语言,而且 JS 中的全局对象符合单例模式两个条件。很多时候我们把全局对象当成单例模式来使用
var obj = {}
弹框层的实践
实现弹框的一种做法是先创建好弹框,然后使之隐藏,这样子的话会浪费部分不必要的 DOM 开销,我们可以在需要弹框的时候再进行创建,同时结合单例模式实现只有一个实例,从而节省部分 DOM 开销。下列为登入框部分代码:
//弹框层的实践 const createLoginLayer = function() { const myDiv = document.createElement('div') myDiv.innerHTML = '登入浮框' // myDiv.style.display = 'none' document.body.appendChild(myDiv); return myDiv } //使单例模式和创建弹框代码解耦 const getSingle = function(fn) { let result = null; return function() { if(!result){ result = fn.apply(this, arguments); } return result; } } const createSingleLoginLayer = getSingle(createLoginLayer) document.getElementById('loginBtn').onclick = function() { createSingleLoginLayer() }
相关推荐:
JS设计模式之构造器模式详解
php 设计模式,设计模式
php设计模式之单例模式代码,php设计模式
以上就是js设计模式:什么是单例模式?js单例模式的介绍的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的js设计模式:什么是单例模式?js单例模式的介绍全部内容,希望文章能够帮你解决js设计模式:什么是单例模式?js单例模式的介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。