Rumah > hujung hadapan web > tutorial js > js设计模式之-单例模式的使用

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

php中世界最好的语言
Lepaskan: 2018-03-14 14:02:33
asal
2410 orang telah melayarinya

这次给大家带来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!');
    }
};
Salin selepas log masuk

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

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!'
Salin selepas log masuk

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

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();
Salin selepas log masuk

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

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
Salin selepas log masuk

下面给大家链接一下单例模式实现的一个例子,这里把那链接给大家:
解决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
Salin selepas log masuk

方法二、

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
Salin selepas log masuk

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

推荐阅读:

深入JavaScript之DOM应用

深入JavaScript之定时器

深入JavaScript之基础应用

Atas ialah kandungan terperinci js设计模式之-单例模式的使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan