zoukankan      html  css  js  c++  java
  • js设计模式——单例模式

    什么是单例模式

    保证一个类仅有一个实例,并提供一个访问它的全局访问点。

    实现单例模式需要有一个变量标记是否已经创建过实例。如果已经创建过实例,就返回之前创建的实例。没有,则返回新建的实例。

    实现方法可以考虑闭包,高阶函数等。

    需要注意单一变量原则:一个类只关注一种职责。

    javascript的单例模式

    javascript是一门无类型语言,所以我们只需要一个唯一的对象,无需创造出一个类。

    var

    var全局变量符合确保只有一个实例,并提供了全局访问。所以全局变量不是单例模式,但是我们可以将全局变量当做单例来使用。

    但是全局变量的大量使用容易造成命名空间的污染,不利于多人开发。我们可以通过全局对象创建命名空间和使用闭包来缓解问题。

    惰性单例

    惰性单例是指在需要的时候偶才创建对象实例。减少节点的浪费。比如WebQQ 的登录浮窗,我们只有在点击登录的时候使用。如果在页面加载的时候就创建浮窗,那么当我们只是想在webQQ页面看看天气,不会进行登录,那么久就白白浪费了一个DOM节点。

    <!DOCTYPE html>
    <html>
    <head>
    	<title>设计模式测试</title>
    	<script type="text/javascript" src="./单例模式.js"></script>
    </head>
    <style type="text/css">
    	
    </style>
    <body>
    	<div class="box">
    		<button id='btn'>登录</button>	
    	</div>
    </body>
    <script type="text/javascript">
    	
    	var createDiv=(function() {
    		var div=null;
    		return function(){
    			if(!div){
    				div=document.createElement('div');
    				div.innerHTML='登录浮框';
    				div.style.display = 'none';
    				document.body.appendChild(div);
    			}
    
    			return div;
    		}
    	})();
    	document.getElementById('btn').onclick=function(){
    		var login=createDiv();
    		login.style.display='block';
    	}
    </script>
    
    </html>
    

    考虑单一职责原则

    <!DOCTYPE html>
    <html>
    <head>
    	<title>设计模式测试</title>
    	<script type="text/javascript" src="./单例模式.js"></script>
    </head>
    <style type="text/css">
    	
    </style>
    <body>
    	<div class="box">
    		<button id='btn'>登录</button>	
    	</div>
    </body>
    <script type="text/javascript">
    	var createDiv=function(){
    		var	div=document.createElement('div');
    		div.innerHTML='登录浮框1';
    		div.style.display = 'none';
    		document.body.appendChild(div);
    		return div;
    
    	}
    
    	var getSingle=function(fn){
    		var element;
    		return function(){
    			return element||(element=fn.apply(this,arguments));
    		}
    	}
    
    	var createSingleDiv=getSingle(createDiv);
    	document.getElementById('btn').onclick=function(){
    		var login=createSingleDiv();
    		login.style.display='block';
    	}
    </script>
    
    </html>
    
  • 相关阅读:
    简单实用的Asp.net生成静态页方法
    第八章 、数据存储 Stroe
    第七章 、使用表格控件
    第九章 、 TreePanel
    mysql 安装时的第三第四步出错解决方法
    asp.net 水晶报表 VS2008 10.5版本
    关于log4net的使用
    SQL2000时安装挂起的解决方法
    linux下安装Sublime Text3并将它的快捷方式放进启动器中和卸载Sublime
    Linux下安装配置jdk
  • 原文地址:https://www.cnblogs.com/ellen-mylife/p/13633220.html
Copyright © 2011-2022 走看看