关于javascript:单例模式

42次阅读

共计 1971 个字符,预计需要花费 5 分钟才能阅读完成。

保障一个类仅有一个实例,并提供一个拜访它的全局拜访点。

如何实现

实现单例模式无非是用一个变量来标记以后是否曾经为某个类创立过对象,如果是,则在下一次获取该类的实例时,间接返回之前创立的对象。

  1. 第一种办法
var 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;
};

let test1 = Singleton.getInstance('name1');
let test2 = Singleton.getInstance('name2');

console.log(test1 == test2);
  1. 第二种办法
var Singleton = function (name) {this.name = name;};

Singleton.prototype.getName = function () {console.log(this.name);
};

Singleton.getInstance = (function () {
    // 应用匿名函数闭包避免全局变量的净化
    let instance = null;
    return function (name) {if (!instance) {instance = new Singleton(name);
        }
        return instance;
    };
})();

let test1 = Singleton.getInstance('name1');
let test2 = Singleton.getInstance('name2');
console.log(test1 == test2);

JavaScript 中的单例模式

外围是确保只有一个实例,并提供全局拜访。全局变量不是单例模式,在 js 中咱们常常把全局变量当成单例应用。

防止全局变量

  1. 应用命名空间
var Myapp = {};
Myapp.namespace = function (name) {};
Myapp.namespace('event');

// 以上代码等同于如下代码
var MyApp = {event: {},
};
  1. 应用闭包封装公有变量
var user = (function () {
    var _name;

    return {getUserInfo() {return _name;},
    };
})();

惰性单例

实例对象总是在咱们调用的时候才被创立,而不是在加载好的时候创立。

  • 假如咱们是 博客 的开发人员网址是 http://blog.niumingxin.com/ 当点击用户名的时候呈现一个浮窗,
    很显著这个浮窗在页面里总是惟一的,不可能呈现同时存在两个窗口的状况。用户点击的时候才开始创立该浮窗。
// 单例模式的实现
var getSingle = function (fn) {
    var result;
    return function () {return result || (result = fn.apply(this, arguments));
    };
};

// 弹窗测试
var createLoginLayer = function () {var div = document.createElement('div');
    div.innerHTML = '我是浮窗';
    div.style.display = 'none';
    document.body.appendChild(div);
    return div;
};
var createSingleLoginLayer = getSingle(createLoginLayer);
document.getElementById('loginBtn').onclick = function () {var loginLayer = createSingleLoginLayer();
    loginLayer.style.display = 'block';
};

// ifame 测试
var createSingleIframe = getSingle(function () {var iframe = document.createElement('iframe');
    document.body.appendChild(iframe);
    return iframe;
});
document.getElementById('loginBtn').onclick = function () {var loginLayer = createSingleIframe();
    loginLayer.src = 'http://blog.niumingxin.com/';
};

正文完
 0