当前位置: 首页 > Web前端 > HTML

单例模式

时间:2023-03-28 13:39:14 HTML

确保一个类只有一个实例,并提供一个全局访问点。如何实现单例模式无非就是用一个变量来标记某个类是否已经创建了对象。如果是这样,下次获取该类的实例时,将直接返回之前创建的对象。第一种方法varSingleton=function(name){this.name=name;this.instance=null;};Singleton.prototype.getName=function(){console.log(this.name);};Singleton.getInstance=function(name){if(!this.instance){this.instance=newSingleton(name);}returnthis.instance;};lettest1=Singleton.getInstance('name1');lettest2=Singleton.getInstance('name2');控制台日志(测试1==测试2);第二种方法varSingleton=function(name){this.name=name;};Singleton.prototype.getName=function(){console.log(this.name);};Singleton.getInstance=(function(){//使用匿名函数闭包防止全局变量污染letinstance=null;returnfunction(name){if(!instance){instance=newSingleton(name);}returninstance;};})();lettest1=Singleton.getInstance('name1');lettest2=Singleton.getInstance('name2');console.log(test1==test2);在JavaScript中,单例模式的核心是保证只有一个实例,并提供全局访问。全局变量不是单例模式。在js中,我们经常把全局变量当作单例来使用。避免对全局变量使用命名空间varMyapp={};Myapp.namespace=function(name){};Myapp.namespace('event');//上面的代码等价于下面的代码varMyApp={event:{},};使用闭包封装私有变量varuser=(function(){var_name;return{getUserInfo(){return_name;},};})();惰性单例实例对象总是在我们调用它创建时调用,而不是在加载时调用。假设我们是一个博客开发者,他的网站是http://blog.niumingxin.com/当点击一个用户名时,会出现一个悬浮窗。显然,这个悬浮窗在页面中永远是唯一的,不可能同时有两个。窗口条件。当用户单击它时,将创建叠加层。//单例模式的现实vargetSingle=function(fn){varresult;返回函数(){返回结果||(result=fn.apply(this,arguments));};};//弹窗测试varcreateLoginLayer=function(){vardiv=document.createElement('div');div.innerHTML='我是浮窗';div.style.display='无';文档.body.appendChild(div);返回div;};varcreateSingleLoginLayer=getSingle(createLoginLayer);document.getElementById('loginBtn').onclick=function(){varloginLayer=createSingleLoginLayer();loginLayer.style.display='block';};//ifame测试varcreateSingleIframe=getSingle(function(){variframe=document.createElement('iframe');document.body.appendChild(iframe);returniframe;});document.getElementById('loginBtn').onclick=function(){varloginLayer=createSingleIframe();loginLayer.src='http://blog.niumingxin.com/';};