1、单例模式
保证一个类仅有一个实例,并提供一个访问它的全局访问点
1.1 传统的单例模式
var Singleton=function(name){ this.name=name; } Singleton.prototype.getName=function(){ alert(this.name); } Singleton.getInstance=(function(){ var instance=null; return function (name) { if(!instance){ instance=new Singleton(name); } return instance; } })(); var a=Singleton.getInstance('sven1'); var b=Singleton.getInstance('sven2'); alert(a===b);//true
1.2 JavaScript中的单例模式
单例模式的核心是确保只有一个实例,并提供全局访问
JavaScript中,可以把全局变量当成单例来使用
var a={};
以这种方式创建对象a,这个对象a是独一无二的,并且在全局作用域可以被访问
全局变量容易造成命名空间污染,使用命名空间可以减少全局变量的数量
var namespace1={ a:function(){ alert(1); }, b:function(){ alert(2); } };
1.3 应用举例--惰性单例
以点击“登陆”按钮弹出登陆框为例
<html> <body> <button id="loginBtn" >登陆</button> </body> <script> var createLoginLayer=(function(){ var div; return function(){ if(!div){ div=document.createElement('div'); div.innerHTML='我是登陆浮窗'; div.style.display='none'; document.body.appendChild(div); } return div; } })(); document.getElementById('loginBtn').οnclick=function(){ var loginLayer=createLoginLayer(); loginLayer.style.display='block'; }; </script> </html>
上述示例违反了单一职责原则,创建对象和管理单例逻辑耦合在一起了
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').οnclick=function(){ var loginLayer=createSingleLoginLayer(); loginLayer.style.display='block'; }; //当需要创建唯一的iframe用于动态加载第三方页面时 var createSingleIframe=getSingle(function () { var iframe=document.createElement('iframe'); document.body.appendChild(iframe); }); document.getElementById('loginBtn').οnclick=function(){ var loginLayer=createSingleIframe(); loginLayer.src='http://www.google.com'; };