登录  /  注册
首页 > web前端 > js教程 > 正文

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

php中世界最好的语言
发布: 2018-03-14 14:02:33
原创
2161人浏览过

这次给大家带来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
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

深入JavaScript之DOM应用

深入JavaScript之定时器

深入JavaScript之基础应用

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

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号