js设计模式之-单例模式的使用

这次给大家带来js设计模式之-单例模式的使用,使用js单例模式的使用注意事项有哪些,下面就是实战案例,一起来看一下。

1、概念:
       在传统的开发工程师眼里,单利模式就是保证每一个类只有一个实例,我们在实现时首先判断实例是否存在,如果存在,则直接返回,如果不存在就创建了再返回,这就确保了每一个类只有一个实例对象。在javascript里单例作为一个命名空间的提供者,从全局里提供一个唯一的访问点来访问对象。123
2、作用以及注意事项:
   作用:1.模块间通信
        2.系统中某个类的对象只能存在一个
        3.保护自己的属性和方法
   注意事项:1.注意this的使用
           2.闭包容易造成内存泄漏    
           3.使用继承时注意new的使用。    

3、实现 
最简单的一种办法就是使用是对象字面量的方法,其字面量里可以包含大量的属性和方法。

var firstObject = {    property1: "something",    property2: "something else",    method1: function () {        console.log('hello web!');    }};

登录后复制

如果你要扩展该对象,我们可以提供自己的私有成员,然后我们通过闭包在其内部封装这些变量和函数声明。我们可以实现私有或者公有的方法。我们再看下面这一段代码:

var firstObject= function () {    /* 这里声明私有变量和方法 */    var privateVariable = 'something private';    function showPrivate() {        console.log(privateVariable);    }    /* 公有变量和方法(可以访问私有变量和方法) */    return {        publicMethod: function () {            showPrivate();        },        publicVar: 'the public can see this!'    };};var single = firstObject();single.publicMethod();  // 输出 'something private'console.log(single.publicVar); // 输出 'the public can see this!'

登录后复制

如果我们想做到只有在使用的时候才初始化,那该如何做呢?为了节约资源的目的,我们可以另外一个构造函数里来初始化这些代码,如下:

var firstjObiect= (function () {    var instantiated;    function init() {        /*这里定义单例代码*/        return {            publicMethod: function () {                console.log('hello world');            },            publicProperty: 'test'        };    }    return {        getInstance: function () {            if (!instantiated) {                instantiated = init();            }            return instantiated;        }    };})();/*调用公有的方法来获取实例:*/firstjObiect.getInstance().publicMethod();

登录后复制

我们来看一下他的使用场景,单例一般是用在系统间各种模式的通信协调上

var firstObjectTester = (function () {    //参数:传递给单例的一个参数集合    function Singleton(args) {        //设置args变量为接收的参数或者为空(如果没有提供的话)        var args = args || {};        //设置name参数        this.name = 'SingletonTester';        //设置pointX的值        this.pointX = args.pointX || 6; //从接收的参数里获取,或者设置为默认值        //设置pointY的值        this.pointY = args.pointY || 10;    }    //实例容器    var instance;    var _static = {        name: 'SingletonTester',        //获取实例的方法        //返回Singleton的实例        getInstance: function (args) {            if (instance === undefined) {                instance = new Singleton(args);            }            return instance;        }    };    return _static;})();var singletonTest = firstObjectTester .getInstance({ pointX: 5 });console.log(singletonTest.pointX); // 输出 5

登录后复制

下面给大家链接一下单例模式实现的一个例子,这里把那链接给大家: 
解决Textarea的数据存储时的Html转Txt和展示时Txt转Html

上面这种方式主要实现的方法,还有其他的一些实现方法(来自汤姆大叔的博客) 
方法一、

function Universe() {    // 判断是否存在实例    if (typeof Universe.instance === 'object') {        return Universe.instance;    }    // 其它内容    this.start_time = 0;    this.bang = "Big";    // 缓存    Universe.instance = this;    // 隐式返回this}// 测试var uni = new Universe();var uni2 = new Universe();console.log(uni === uni2); // true

登录后复制

方法二、

function Universe() {    // 缓存的实例    var instance = this;    // 其它内容    this.start_time = 0;    this.bang = "Big";    // 重写构造函数    Universe = function () {        return instance;    };}// 测试var uni = new Universe();var uni2 = new Universe();uni.bang = "123";console.log(uni === uni2); // trueconsole.log(uni2.bang); // 123

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

深入JavaScript之DOM应用

深入JavaScript之定时器

深入JavaScript之基础应用

以上就是js设计模式之-单例模式的使用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2782988.html

(0)
上一篇 2025年3月8日 16:42:17
下一篇 2025年2月22日 22:14:58

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript中的插入排序详解

    本篇文章讲述了javascript中的插入排序,大家对javascript中的插入排序不了解的话那么我们就一起来看看本篇文章吧,本文章利用javascript简单的实现了插入排序,好了废话少说进入正题吧 JavaScript中的插入排序 插…

    2025年3月8日
    200
  • JS的设计模式之构造函数模式详解

    这次给大家带来js的设计模式之构造函数模式详解,使用js构造函数模式的注意事项有哪些,下面就是实战案例,一起来看一下。 概念 构造函数用于创建特定类型的对象,我们在里面不仅声明了使用的对象,构造函数还可以接受参数以便于第一次创建的时候设置对…

    编程技术 2025年3月8日
    200
  • JavaScript中的希尔排序详解

    本篇文章讲述了javascript中的希尔排序,大家对javascript中的希尔排序不了解的话或者对javascript中的希尔排序感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧! JavaScript中的希尔排序 希…

    编程技术 2025年3月8日
    200
  • JS设计模式之建造者模式详解

    这次给大家带来js设计模式之建造者模式详解,使用js建造者模式的注意事项有哪些,下面就是实战案例,一起来看一下。 概念 建造者模式可以将一个复杂的对象的构建与其表示相分离,使同样的构建过程可以创建不同的表示。如果我们用了建造者模式,那么用户…

    编程技术 2025年3月8日
    200
  • JS设计模式之工厂模式详解

    这次给大家带来js设计模式之工厂模式详解,使用js工厂模式的注意事项有哪些,下面就是实战案例,一起来看一下。 概念:工厂模式定义了一个用于创建对象的接口,这个接口由子类决定实例化哪一个类,该模式是一个类的实例化延迟到了子类。而子类可以重写接…

    编程技术 2025年3月8日
    200
  • JS设计模式之代理模式详解

    这次给大家带来js设计模式之代理模式详解,js代理模式的注意事项有哪些,下面就是实战案例,一起来看一下。 概念:代理模式就是为一个对象提供一个代用品或者占位符,以便控制对它的访问。也就是为了保障当前对象的单一职责,而需要创建另一个对象来处理…

    编程技术 2025年3月8日
    200
  • JS设计模式之命令模式详解

    这次给大家带来js设计模式之命令模式详解,使用js命令模式详解的注意事项有哪些,下面就是实战案例,一起来看一下。 概念 命令模式用于将一个请求封装成一个对象,从而可以用不同的参数对客户进行参数化,该模式将函数的调用请求和操作封装成一个单一的…

    编程技术 2025年3月8日
    200
  • JavaScript中的堆排序详解

    本篇文章讲述了javascript中的堆排序,大家对javascript中的堆排序不了解的话或者对javascript中的堆排序感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 堆排序可以说是一种利用堆的概念来排序的选择排…

    2025年3月8日
    200
  • JavaScript中的计数排序详解

    本篇文章讲述了javascript中的计数排序,大家对javascript中的计数排序不了解的话或者对javascript中的计数排序感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 计数排序的核心在于将输入的数据值转化为…

    2025年3月8日
    200
  • JS设计模式之原型模式详解

    这次给大家带来js设计模式之原型模式详解,使用js原型模式的注意事项有哪些,下面就是实战案例,一起来看一下。 概念:原型模式是指用原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象。对于原型模式,我们利用javascript原型继承…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论