Javascript 设计模式 - 02 - 单例模式
简介
单例就是保证一个类只有一个实例,实现的方法一般是先判断实例是否存在,如果存在直接返回,如果不存在就创建了再返回,确保了一个类只有一个实例对象,在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象
作用和注意事项
作用
- 模块间通信
- 在系统中某个类的对象只能存在一个
- 保护自己的属性和方法,创建一个命名空间,防止不同的人命名变量的冲突
注意事项
- 注意 this 的使用
- 闭包容易造成内存泄漏,不需要的要清理
- 注意 new 的成本
- 当超过一个县线程想要获取相同资源的时候,竞争就会出现,单例模式很容易受到竞争的影响,因此如果实例一开始没有被初始化,两个现象可能就会创建两个对象而不是返回实例,因此在开发者在多线程中实现单例时,必须要保证同步
类比: 如果有十个人在办公室,并且他们都需要用一台打印机,十台电脑共享了打印机(实例)通过共享了一个打印机,他们分享了相同的资源
个人理解
开创一个命名空间,对象实例创建在命名空间中,用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下次获取该实例的时候,直接返回之前创建的对象
代码
var student = (function (){
var myBook;
function Book(name) {
this.name = name;
}
function buyBook(book) {
// ...
return new Book(book);
}
return {
reading: function (book) {
if (!myBook) {
myBook = buyBook(book);
return 'Im going to read a book named' + myBook.name;
}
return 'I have been reading a book named' + myBook.name;
}
}
}())
var teacher = {
check: function (book) {
var results = student.reading(book);
console.log(results);
}
}
// 两次调用,只创建了一次
teacher.check('book-001'); // Im going to read a book namedbook-001
teacher.check('book-002'); // I have been reading a book namedbook-001
通过代理实现单例
将负责管理单例的逻辑,抽取到代理类中,这样原来的类就还是一个普通的类,需要的时候与代理的部分组合起来就是一个单例模式
var CreateDiv = function (html) {
this.html = html;
this.init();
}
CreateDiv.prototype.init = function () {
var div = document.createElement('div');
div.innerHTML = this.html;
document.body.appendChild(div);
}
// 引入代理类
var ProxySingleton = (function () {
var instance;
return function (html) {
if (!instance) {
instance = new CreateDiv(html);
}
return instance;
}
}())
var a = new ProxySingleton('xxx');
var b = new ProxySingleton('yyy');
console.log(a === b); //true
惰性单例
惰性单利是指只有在需要的时候才创建对象实例
// 封装获取单例函数
var getSingle = function (fn) {
var result;
return function () {
return result || (result = fn.apply(this, arguments));
}
}
// 避免事件重复绑定
var bindEvent = getSingle(function () {
console.log('bind click'); // 只有第一次执行
document.getElementsByClassName('btn')[0].onclick = function () {
alert('box is click');
}
return true;
})
bindEvent();
bindEvent();
bindEvent();
文章列表
- javascript设计模式 – 设计原则
- JavaScript设计模式–高阶函数
- Javascript 设计模式 - 01 - 原型模式
- Javascript 设计模式 - 02 - 单例模式
- Javascript 设计模式 - 03 - 建造者模式
- Javascript 设计模式 - 04 - 工厂模式
- Javascript 设计模式 - 05 - 外观模式
- Javascript 设计模式 - 06 - 代理模式
- Javascript 设计模式 - 07 - 观察者模式(发布订阅模式)
- Javascript 设计模式 - 08 - 策略模式
- Javascript 设计模式 - 09 - 命令模式
- Javascript 设计模式 - 10 - 迭代器模式
- Javascript 设计模式 - 11 - 职责链模式
- Javascript 设计模式 - 12 - 适配器模式
- Javascript 设计模式 - 13 - 模板方法
- Javascript 设计模式 - 14 - 组合模式
- Javascript 设计模式 - 15 - 享元模式
- Javascript 设计模式 - 16 - 中介者模式
- Javascript 设计模式 - 17 - 装饰者模式
- Javascript 设计模式 - 18 - 状态模式