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 - 状态模式