什么是设计模式
是一套经过反复使用、多人知晓的、经过分类的、代码设计经验的总结
为什么使用设计模式：
为了代码的可重用性、让代码更容易被他人理解、保证代码的可靠性。设计模式使代码的编写真正的工程化；设计模式是软件工程的基石脉络，如同大厦的结构
有哪些设计模式（来自W3Cschool，23种）：
构造器模式，模块化模式，暴露模块模式，单例模式，中介者模式，原型模式，命令模式，外观模式，工厂模式，Mixin模式，装饰模式，亨元(Flyweight)模式，MVC模式，MVP模式，MVVM模式，组合模式，适配器模式，外观模式，观察者模式，迭代器模式，惰性初始模式，代理模式，建造者模式
单个实例，只有一个对象
//多次创建，返回同一个对象
function fn(){
if(!fn.obj) { //给函数添加一个属性。 因为函数是全局的，所以该属性一旦添加一直存在;
fn.obj = {
name : “liyang"
};
}
return fn.obj;
}
var obj1 = new fn();
var obj2 = new fn();
console.log(obj1 == obj2);
//例如我们创建一个信息提示框，每一次执行toast方法，如果都创建一个新的元素，这样做太浪费了。
//因此，我们采取单例模式，确保无论调用多少次toast方法，都只创建一个DOM元素。
//我们只控制它的显示和隐藏，而不是每次创建每次销毁。
function Toast(){
var div = document.createElement("div");
div.className = "box";
document.body.appendChild(div);
setTimeout(function(){
div.remove();
},1000)
}
obtn.onclick = function(){
var a = new Toast();
var b = new Toast();
console.log(a == b)
}
function Toast(){
if(!Toast.div){
Toast.div = document.createElement("div");
Toast.div.className = "box";
document.body.appendChild(Toast.div);
clearTimeout(Toast.div.timer);
Toast.div.timer = setTimeout(function(){
Toast.div.style.display = "none";
},1000)
}else{
Toast.div.style.display = "block";
clearTimeout(Toast.div.timer);
Toast.div.timer = setTimeout(function(){
Toast.div.style.display = "none";
},1000)
}
return Toast;
}
obtn.onclick = function(){
var a = new Toast();
var b = new Toast();
console.log(a == b);
}
组合模式
组合模式：把多个对象组成树状结构来表示局部与整体，使得用户可以同时操作单个对象和对象的组合。
1.可以以相同的方法处理对象的集合与其中的特定子对象。组合对象与组成该对象的对象可实现同一批的操作，对组合对象执行的操作会向下传递到所有的组成对象，使得所有组成对象都会执行同样的操作。
2.可以将对象组织成树状结构，并且使整棵树可被遍历，所有组合对象都实现一个用来获取其子对象的方法，借助该方法可以隐藏实现的细节，组织子对象，使子对象内部的实现不形成依赖。
对于创建动态用户界面来说，组合模式可以算是为其量身定做的，因为HTML结构正好符合组合模式适用场景的结构。
1.存在一批组织成某种层次体系的对象
2.希望对这批对象或者其中某一部分对象实施一个操作
组合模式擅长对大批量对象进行操作，转为组织这类对象把操作从一个层次向下一个层次传递设计，借此可以弱化对象间的耦合关系并且可以互换使用一些类或者实例，使代码模块化程度更高，维护更容易。
function ImagesStore( id ){
this.children = [];
this.element = document.createElement("div");
this.element.id = id;
this.element.className = "imgs-store";
document.body.appendChild(this.element)
}
ImagesStore.prototype = {
constructor : ImagesStore,
add:function( child ){
this.children.push( child );
this.element.appendChild( child.getElement() );
},
remove:function( child ){
for( var node, i=0; node = this.getChild(i); i++ ){
if( node === child ){
this.children.splice( i, 1 );
break;
}
}
this.element.removeChild( child.getElement() );
},
getChild:function( i ){
return this.children[i];
},
show:function(){
this.element.style.display = '';
for( var node, i=0; node = this.getChild(i); i++ ){
node.show();
}
},
hide:function(){
for( var node, i=0; node = this.getChild(i); i++ ){
node.hide();
}
this.element.style.display = 'none';
},
getElement:function(){
return this.element;
}
}
//上面的组合对象中我们可以看出，原型上的hide和show方法不单单是对于当前element进行处理，还延伸到其包含的每一个叶对象上执行。这边就体现了组合模式的运行机制，一条命令在多个对象上激发复杂的或者递归的行为。
function ImageItem( src ){
this.element = document.createElement("img");
this.element.src = src;
this.element.className = "img-item";
}
ImageItem.prototype = {
constructor:ImageItem,
add:function( child ){
console.log("this is image object, no add function");
},
remove:function( child ){
console.log("this is image object, no remove function");
},
getChild:function( i ){
console.log("this is image object, no getChild function");
},
show:function(){
this.element.style.display = '';
},
hide:function(){
this.element.style.display = 'none';
},
getElement:function(){
return this.element;
}
}
使用组合模式组织起来的对象具有出色的层次结构，每当对顶层组合对象执行一个操作的时候，实际上是在对整个结构进行深度优先的节点搜索。但是这些优点都是用操作的代价换取的，比如每次顶级执行一次show方法，实际的操作就是整个树形结构的节点都会被遍历一次。但是组合对象的每个对象之间的耦合非常松散，可以简单的操作处理复杂的结果。
简单的说，组合模式是讲一批子对象组织为树形结构，一条顶层的命令会在操作树中所有的对象。提高了代码的模块化程度，对于动态的HTML界面具有很强的适用性
观察者模式
观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。
使用观察者模式的好处：
1.支持简单的广播通信，自动通知所有已经订阅过的对象。
2.页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。
3.目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
MVC模式
MVC模式，全名：Model View Controller，模型 视图 控制器
视图：用户直观看到的页面
模型：按照要求来取出数据
控制器：向系统发出指令的工具
工作流程：
1.浏览器，调用控制器，对他发出指令
2.控制器，按指令选取一个合适的模型
3.模型，按控制器指令取出相应的数据
4.控制器，按指令取出相应的视图
5.把第三步取到的数据按照用户想要的样子在视图显示出来
还有许多模式就不一一简单介绍了。