JavaScript设计模式-单体模式

        JavaScript设计模式是一种使代码提升逼格的书写方法。

        在这里说一下设计模式中的单体模式。

        单体模式

        单体模式是提供了一种代码组织为一个逻辑单元的手段，这个逻辑单元中的代码可以通过单一变量进行访问。

        说一下单体的优点：1.可以划分命名空间，2.是代码的阅读性、维护性很好，3.可以实例化，但是只能实例化一次。

        第一个优点：划分命名空间

        当在做项目的时候，肯定不是一个人在做，而是一伙人，当一个页面中包含多个js文件的时候，由于每个人的变量命名不同，很大程度上会发生变量覆盖的情况，而用单体模式，把变量保存在对象中，很好的避免了这一点。

var a = {
	str : "123",
}
var b = {
	str : "234",
}

        第二个优点：提高代码的阅读性，维护性。

        使用单体模式，每个方法都被封装在对象中，而且每个方法只做一件事，所在在后期代码维护上，只需要维护特定位置的代码就可以了。

        第三个优点：可以实例化，但只能实例化一次。

        先来个例子：

var CreateDiv = function(html){
	this.html = html;
	this.init();
}
CreateDiv.prototype.init = function(){
	var oDiv = document.createElement("div");
	oDiv.innerHTML = this.html;
	document.body.appendChild(oDiv);
}
var proxyMode = (function(){
	var run;
	return function(){
		if(!run){
			run = new CreateDiv("这是一个单体");
		}
		return run; 				
	}
}());
proxyMode();

   上面方法是创建一个div放在body里面，并且构造函数之被实例化一次。

    再来个只能实例化一次的例子：

var createDiv = (function(){
	var oDiv;
	return function(){
		if(!oDiv){
			oDiv = document.createElement("div");
			oDiv.innerHTML = "这是一个格子";
			oDiv.style.display = "none";
			document.body.appendChild(oDiv)
		}
		return oDiv;
	}
}());
document.getElementById("btn").onclick = function(){
	var ele = createDiv();
	// console.log(ele);
	ele.style.display = "block";
}

    这个例子是在页面中点击按钮创建一个格子，如果有则不会创建，如果没有则会创建。

--主页传送门--