zoukankan      html  css  js  c++  java
  • 设计模式(2)[JS版]---JavaScript如何实现单例模式?

    目录

    1 什么是单例模式?

    2 单例模式的作用和注意事项

    3 代码实现

    4 案例应用

    4.1 使用单例模式管理命名空间

     4.2 使用单例模式为不同命名空间的button按钮添加click事件,并且使他们之间能够互相通信


    1 什么是单例模式?

    单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果

    存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。

    在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一

    的访问点来访问该对象。

    2 单例模式的作用和注意事项

     作用:

    1 模块间通信。

    2 系统中某个类的对象只能存在一个。

    3 保护自己的属性和方法。

    注意事项:

    1 注意this的使用。

    2 闭包容易造成内存泄露,不需要的赶快干掉。

    3 注意new的成本。(继承)

    3 代码实现

    JavaScript实现单例的方式很多种,只要符合定义即可。

    /*
     *1 创建两个独立的对象,xiaoLiu和xiaoWang
     *2 让xiaoLiu和xiaoWang通过电话进行通信
     *3 让xiaoLiu发起通话;判断xiaoWang有没有电话,如果没有先创建电话
     *4 两个单例之间进行通信
     */
    var xiaoWang = (function(argument) {
    	var xiaoWangPhone = function(message) {
    		this.lingsheng = message;
    	}
    
    	var phone;
    	var info = {
    		sendMessge: function(message) {
    			if (!phone) {
    				phone = new xiaoWangPhone(message);
    			}
    			return phone;
    		}
    	}
    	return info;
    })();
    
    var xiaoLiu = {
    	callXiaoWang: function(message) {
    		var _xw = xiaoWang.sendMessge(message);
    		alert(_xw.lingsheng);
    		_xw = null; //等待垃圾回收
    	}
    }
    xiaoLiu.callXiaoWang("请求通话");
    

    4 案例应用

    4.1 使用单例模式管理命名空间

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	</body>
    	<script>
    		function Namespace(name){     
    		    return window[name] || (window[name] = {});     
    		}
    		 
    		(function(){
    		           
    		    var myNamespace1 = Namespace("myNamespace1");
    		     
    		    myNamespace1.method = function(){
    		        console.log("XXXX");
    		    };
    		 
    		}())
    		 
    		myNamespace1.method();
    	</script>
    </html>
    

     4.2 使用单例模式为不同命名空间的button按钮添加click事件,并且使他们之间能够互相通信

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>单例应用</title>
    		<style>
    			* {
    				margin: 0;
    				padding: 0;
    			}
    
    			button {
    				padding: 10px;
    			}
    		</style>
    	</head>
    	<body>
    		<button id="btna">按钮a</button>
    		<button id="btnb">按钮b</button>
    	</body>
    	<script>
    		//为不同命名空间的button按钮添加click事件,并且使他们之间能够互相通信
    		var topHtml = {
    			a: 4,
    			init: function() {
    				this.render();
    				this.bind();
    			},
    			render: function() {
    				var me = this;
    				me.btna = document.getElementById("btna");
    			},
    			bind: function() {
    				var me = this;
    				me.btna.onclick = function() {
    					//业务逻辑取出去
    					me.test();
    				}
    			},
    			test: function() {
    				console.log(this.a);
    				this.a = 5;
    				console.log(this.a);
    			}
    		}
    
    
    		var bottomHtml = {
    			a: 1,
    			b: 4,
    			init: function() {
    				this.render();
    				this.bind();
    			},
    			render: function() {
    				var me = this;
    				me.btnb = document.getElementById("btnb");
    			},
    			bind: function() {
    				var me = this;
    				me.btnb.onclick = function() {
    					//业务逻辑取出去
    					me.test()
    				}
    			},
    			test: function() {
    				console.log(this.a);
    				this.a = 3;
    				console.log(this.a);
    				
    				console.log(this.b);
    				this.b = 6;
    				console.log(this.b);
    				
    				console.log(topHtml.a);
    				topHtml.a = 15;
    				console.log(topHtml.a);
    			}
    		}
    
    		topHtml.init();
    		bottomHtml.init();
    	</script>
    </html>
    
  • 相关阅读:
    POJ 2352 &amp;&amp; HDU 1541 Stars (树状数组)
    SSH三大框架的工作原理及流程
    稀疏表示
    Linux程序设计学习笔记----多线程编程线程同步机制之相互排斥量(锁)与读写锁
    [面经] 南京SAP面试(上)
    JAVA数组的定义及用法
    花指令
    计算机认证考试种类
    《C语言编写 学生成绩管理系统》
    spice for openstack
  • 原文地址:https://www.cnblogs.com/yangxianyang/p/13675553.html
Copyright © 2011-2022 走看看