js实现单例模式的6种方案汇总表,js实现单例模式的6种方案汇总图

js实现单例模式的6种方案汇总表,js实现单例模式的6种方案汇总图,JS实现单例模式的6种方案汇总

singleton模式的定义是确保一个类只有一个实例。下面这篇文章主要介绍JS实现singleton模式的六种方案。有需要的朋友可以参考一下。

前言

今天复习了设计模式中的-creation模式,发现JS有很多实现singleton模式的方案。简单总结后,我列出了以下六种方式与大家分享。

内容一般分为两部分:ES5(函数)和ES6(类)。

单一模式的概念

Singleton模式是在系统中保存一个实例,这是一个全局变量。在团队开发中,为了实现一些类似的功能,比如不同页面之间的表单验证,需求可能不一样,但是名字可能一样,然后就会产生冲突。这个时候,singleton模式可以很好的解决这个问题。

一个实例只产生一次。

确保一个类只有一个实例,并提供一个全局访问点来访问它。

说说它的优点:

1.单例模式声明一个名称空间,它生成一个唯一的全局变量和一个名称空间,可以通过声明对象来声明:

var mapleTao={ name:'mapleTao ',init:function(){ console . log(this . name)} };

穆游发现这个有点类似于物体。事实上,name和init是它的属性。可以通过mapleTao.name获取其名称的值,也可以通过mapleTao.init()调用init方法。这样在处理多需求页面的时候,可以解决多人开发时的命名冲突问题,也可以更好的维护和控制代码。

2.singleton模式在整个世界中只声明一个变量。众所周知,在js中,假设你写了一个方法,比如函数aa(){},它会在window中生成一个名为aa的变量。在实现一个函数时,会在代码包中创建很多函数和函数,这会在window中创建很多变量,占用更多的内存单元。全局变量的范围很广,在很多处理函数中可能会发生变化,这样在出现bug的时候,不容易快速发现。而singleton模式创建的对象变量可以更快地发现问题并解决问题,大大减少了修复问题的时间和加载系统的时间。

3.在实现相同功能的情况下,通过内存占用资源比创建新对象更有利。

模式1

使用instanceof判断是否使用new关键字调用函数实例化对象。

函数用户(){

如果(!(用户的此实例)){

返回

}

如果(!用户。_instance) {

This.name='未知'

用户。_instance=this

}

返回用户。_实例

}

const u1=新用户()

const u2=新用户()

console . log(u1===U2);//真

2种方式

直接在函数上添加方法属性,以调用生成的实例。

函数用户(){

This.name='未知'

}

User.getInstance=function(){

如果(!用户。_instance){

用户。_instance=新用户()

}

返回用户。_实例

}

const u1=User.getInstance()

const u2=User.getInstance()

console . log(u1===U2);

3种方式

使用闭包,改进模式2。

函数用户(){

This.name='未知'

}

User.getInstance=(function () {

var实例

返回函数(){

如果(!实例){

实例=新用户()

}

返回实例

}

})()

const u1=User.getInstance()

const u2=User.getInstance()

console . log(u1===U2);

4种方式

它是以包装对象结合闭包的形式实现的。

const User=(function () {

函数_用户(){

this.name='xm '

}

返回函数(){

如果(!_user.instance) {

_user.instance=new _user()

}

return _用户.实例

}

})()

const u1=新用户()

const u2=新用户()

console . log(u1===U2);//真

当然,这里闭包的代码可以封装成一个函数。

在频繁使用单例的情况下,建议使用类似这种方法的方案。当然,上述任何方法都可以用于内部实现。

函数SingleWrapper(cons) {

//排除非函数和箭头函数

如果(!(cons instanceof函数)||!cons.prototype) {

抛出新错误('不是合法的构造函数)

}

定义变量实例

返回函数(){

如果(!实例){

instance=new cons()

}

返回实例

}

}

函数用户(){

this.name='xm '

}

const SingleUser=SingleWrapper(用户)

常数u1=新的单一用户()

常数u2=新的单一用户()

控制台。log(u1===U2);

方式5

在构造函数中利用新目标判断是否使用新的关键字

类别用户{

构造函数(){

if(new.target!==用户){

返回

}

如果(!用户. instance){

this.name='xm '

用户. instance=this

}

返回用户。_实例

}

}

常数u1=新用户()

常数u2=新用户()

控制台。log(u1===U2);

方式6

使用静电静态方法

类别用户{

构造函数(){

this.name='xm '

}

静态getInstance() {

如果(!用户. instance) {

用户. instance=新用户()

}

返回用户。_实例

}

}

const u1=User.getInstance()

const u2=User.getInstance()

控制台。log(u1===U2);

总结

到此这篇关于射流研究…实现单例模式的文章就介绍到这了,更多相关射流研究…单例模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令
  • 使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令,使用JS实现简单的图片切换功能
  • 使用js实现数据格式化命令,使用js实现数据格式化的方法
  • 使用js实现数据格式化命令,使用js实现数据格式化的方法,使用js实现数据格式化
  • js选择日期,js日期选择控件,JS实现时间选择器
  • js轮播图视频教程,html5幻灯片图片轮播,js实现幻灯片轮播图
  • js轮播图菜鸟教程,js实现轮播图原理及示例
  • js轮播图菜鸟教程,js实现轮播图原理及示例,JS实现轮播图效果的3种简单方法
  • js获取dom节点的方法,js移除dom元素,JS实现DOM删除节点操作示例
  • js自动复制,网页一键复制,JS实现一键复制
  • js自动切换图片效果,js实现图片切换效果怎么做
  • js用数组实现图片切换,js中图片切换效果怎么实现,js实现图片数组中图片切换效果
  • js星空特效,js流星雨特效,js实现星星闪特效
  • js日期加减算天数,js实现日期按月份加减
  • js日期加减算天数,js实现日期按月份加减,js中日期的加减法
  • 留言与评论(共有 条评论)
       
    验证码: