第一章 --- 关于Javascript 设计模式 之 单例模式

首先我们对单例模式先进行理论上的讲解，接下来，我们再通过具体的代码示例，来讲解，这个单例模式的使用场景和这种模式的优缺点

（这个系列的所有关于设计模式的都是面向Javascript）

一、理论定义:

    单例模式  --- 保证一个类仅有一个实例，并提供一个访问它的全局访问点 (是不是有点懵逼了，其实我第一次看到这句话的时候也是懵逼的，继续往下看呗)

二、话不多说直接上一个最简单的单例模式的代码:

	var SingleDog = function(name){				//创建构造函数
		this.name = name;
		this.instance = null;
	}

	SingleDog.prototype.getName = function(){	//SingleDog对象获取当前name方法
		return this.name;
	}

	SingleDog.getInstance = function(name){		//获取实例化方法
		if(!this.instance){
			this.instance = new SingleDog(name);
		}
		return this.instance;
	}

	var a = SingleDog.getInstance('Zigzag');	//实例化 并将结果对象 赋值给a
	var b = SingleDog.getInstance('Bing');		//实例化 并将结果对象 赋值给b			

	console.log(a.getName());	//这个大家一看很明显就知道了（Zigzag）
	console.log(b.getName());	//这个 呢？

	console.log(a === b); 		// true

今天先写这么多吧，明天回来继续

回来继续~

二、上面的代码，通过长时间的阅读和理解。其实就是在 实例化的过程中，我们去改变一个我们事先定义好的变量值，从而达到控制且只有一个单例的目的。

接下来，我们再看一段，我们开发过程中应用的更多的有一些实际作用的代码。

/*
*功能： 实现点击显示或者创建一个 浮层（div）
*对比： 这里会写 两种方法 来实现这个需求
*/

1、第一种就是我们 常常使用的  display 的方法。
<button id="login">登陆</button>

	var loginlayer = (function(){
		var div = document.createElement('div');
		div.innerHTML = "我的登陆浮层";
		div.style.display = 'none';
		document.body.appendChild(div);
		return div;
	})();

	document.getElementById('login').onclick = function(){
		loginlayer.style.display = 'block';
	}

虽然这种方法我们常常用，而且也实现了我们想要的需求，但是，在页面一被加载的时候就 创建了一些 DOM 这样是不可取的。 因为浪费。（太洁癖了吧）

2、第二种方法来实现这个需求， 我们一步步来优化这段代码。

	var loginlayer = function(){
		var div = document.createElement('div');
		div.innerHTML = "我的登陆浮层";
		div.style.display = 'none';
		document.body.appendChild(div);
		return div;
	};	

	document.getElementById('login').onclick = function(){
		var loginlayers = loginlayer();
		loginlayer.style.display = 'block';
	}
    //这样的话，我们是不是只有在用户去点击 btn 的时候，我们才会去创建我们的DOM 。
    // 虽然需求是 实现了，但是并木有用到我们的 单例模式。并且如果我们点击关闭并删除这个layer 的话，这样频繁的创建和删除节点明显也是不合理的。
    //（但是这里切记，我们只是为了学习单例模式才去，进行下一步的 优化，学习设计模式是为了学习这些模式的思想，而不是为了去 生搬硬套这些代码。）

3、第三种方法来实现这个需求，使用我们的 单例模式来实现这个需求，大家可以先别看下面的代码， 先想一想怎么去构建自己的代码来实现单例模式。

	var Createloginlayer = function(){
		var div;
		return function(){
			if(!div){
				var div = document.createElement('div');
				div.innerHTML = "我的登陆浮层";
				div.style.display = 'none';
				document.body.appendChild(div);
			}
			return div;
		}
	};	

	document.getElementById('login').onclick = function(){
		var loginlayers = Createloginlayer();
		loginlayer.style.display = 'block';
	}

看完第三种 实现这个需求的代码之后会不会觉的 很高大上，而且也很合理。

这里我们就是应用了单例模式的 一个 特性，即： 我们用了一个变量来判断时候已经创建了我们的节点，这样在重复这些操作的时候，我们可以仅仅只创建一次节点。

这里就是我们 常常会用到的 ##惰性单利模式。

今天就到这里了，明天继续~ 明天会写一些 通用的 惰性单例.