单例模式的定义是:保证一个类仅有一个实例,并提供一个访问他的全局点。
我们经常在开发中遇到这种情况,比如要弹出一个页面上唯一的对话框,此时,单例模式节能很好地完成这个任务。
1.实现单例
比如我们需要实现一个类的唯一实例:
var Me = function(name,age) { this.name = name; this.age = age; }; Me.prototype.getName = function() { return this.name; }; Me.getInstance = (function() { var instance; return function(name,age) { if (!instance) { return instance = new Me(name,age); } return instance; } })(); var me1 = Me.getInstance('zyt','24'); var me2 = Me.getInstance('tyz','100'); me1 === me2; // true
以上就创建了一个唯一的实例。
2.简单单例
为了在页面上用js动态地创建一个弹出框(div),可以做以下的尝试:
var createDiv = (function() { var instance; var Div = function(html) { if (instance) { return instance; } this.html = html; this.init(); return instance = this; } Div.prototype.init = function() { var div = document.createElement('div'); div.innerHTML = this.html; document.body.appendChild(div); }; return Div; })(); var div1 = new createDiv('1111'); var div2 = new createDiv('2222'); div1 === div2; // true 以上代码没有遵循单一职责原则,将所有的类、方法封在一个函数之中,增加了程序的复杂度。
3.惰性单例
惰性单例是指在需要的时候才创建对象实例。还是创建div:
var createDiv = (function() { var div; return function() { if (!div) { div = document.createElement('div'); div.innerHTML = '你猜'; document.body.appendChild(div); } return div; }; })(); document.onclick = function() { createDiv(); }; 多次点击也只会创建一个div了。
4.通用单例
为了遵循单一职责原则和增加代码的复用,做出了改进。
首先将管理单例的逻辑抽离出来:
var getSingle = function(fn) { var result; return function() { return result || (result = fn.apply(this,arguments)); }; }; 创建div的逻辑代码就变成以下: var oDiv = function() { var div = document.createElement('div'); div.innerHTML = '我是谁?'; document.body.appendChild(div); return div; }; var createDiv = getSingle(oDiv); document.onclick = function() { createDiv(); };
此时,多次点击也不会创建多个div。而这样的好处就是以后如果创建的不是div,而是其他的元素,getSingle()函数也同样能适用,只需修改创建的逻辑代码。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。