Ping 2019-09-03
《JavaScript设计模式与开发实践》的学习笔记
设计模式-用JavaScript实现单例模式
定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。
使用场景:全局缓存、Windows对象、登录浮窗等
关键:用一个变量来标志是否已经为某个类创建对象,没有则创建,有则返回这个对象
代码实现:
javascript code
/** * 标准单例模式 * 缺点是使用者必须知道这是个单例类,本来可以直接new xxx,现在变成了xxx.getInstance */ var Singleton = function (name) { this.name = name this.instance = null }; Singleton.prototype.getName = function () { alert(this.name) } Singleton.prototype.getInstance = function (name) { if(this.instance!==null){ this.instance = new Singleton(name) } return this.instance }
javascript code
/** * 利用闭包和IIFE实现了透明单例模式 * 但违反了单一职责原则 * 缺点是,当不再需要单例时,需要改写构造函数 */ var CreateDiv = (function() { var instance var CreateDiv = function(html) { if (instance) { return instance } this.html = html this.init() // 执行init方法 return (instance = this) // 保证只有一个一个对象 } CreateDiv.prototype.init = function() { var div = document.createElement('div') div.innerHTML = this.html document.body.appendChild(div) } return CreateDiv })()
javascript code
/** * 代理实现单例 * 将负责管理单例的逻辑移到proxySingletonCreate */ var CreateSpan = function(html) { this.html = html this.init() } CreateSpan.prototype.init = function() { var span = document.createElement('span') span.innerHTML = this.html document.body.appendChild(span) } var proxySingletonCreate = (function() { var instance return function(html) { if (!instance) [(instance = new CreateSpan('test'))] return instance } })()
由上可以看出,创建单例的核心即为使用一个变量表示这个对象是否被创建,即:
javascript code
var instance if(!instance) { instance = xxx }
具体代码实现即为:
javascript code
/** * 创建单例的抽象方法 * @param {function} fn */ var getSingle = function(fn) { var result return function() { return result || (result = fn.apply(this, arguments)) } }