常用的设计模式

设计模式

一、概念
设计模式
-是经过大量验证，实验，总结，形成的一套固定的用来解决某类问 题的方法
- 是一套经过反复使用、多人知晓的、经过分类的、代码设计经验的总结
二、设计模式有哪些
构造器模式，模块化模式，暴露模块模式，单例模式，中介者模式，原型模式，命令模式，外观模式，工厂模式，Mixin模式，装饰模式，亨元(Flyweight)模式，MVC模式，MVP模式，MVVM模式，组合模式，适配器模式，外观模式，观察者模式，迭代器模式，惰性初始模式，代理模式，建造者模式等
注：不同的平台给出的设计模式种类不同叫法不同，设计模式并不是一成不变的
三、列举几种常用的设计模式

1.单例模式

特点
1. 单个实例
2. 在面向对象方式编程时，经过多次操作，只有一个对象被创建，是单例模式
3. 多次new只有一个实例被创建

方式一: 配合闭包实现单例模式,

new的原理如果当前函数主动返回对象时
不再返回new的新对象，而是返回obj
			var Fn = (function(){
   
			    var obj = {
   };
			
			    return function(n){
   
			        obj.name = n;
			        obj.sex = 123;
			
			        return obj;
			    }
			})();
			
			var f1 = new Fn("admin");
			var f2 = new Fn("root");
			// 1.
			// Fn是
			// var obj = {};
			// function(n){
   
			//         obj.name = n;
			//         obj.sex = 123;
			
			//         return obj;
			//     }
			// 2.
			// new Fn("admin")相当于执行
			// function(n){
   
			//         obj.name = n;
			//         obj.sex = 123;
			
			//         return obj;
			//     }
			// }
			// 而对象已经在Fn时创建过，而且相对于new是全局变量，所以每次返回的就是var 的obj，new只是为该对象添加属性
			console.log(f1 === f2);     // t
			console.log(f1.name);       // 有值
			
			console.log(f1);			//{name: "root", sex: 123}
			console.log(f2);			//{name: "root", sex: 123}
			// 创建的同一个对象，36行的值root覆盖35行的值admin
			
			
			
		

方式二:配合当前的构造函数，将构造函数自身作为变量使用，给个对象的属性…

			function Fn(n){
   
			    // 不能出现新的全局变量，那能不能找一个代码中现有的全局变量
			    // var obj = {};
			    // Fn自身就是一个全局，函数也是变量，函数也可以作为对象使用
			
			    if(!Fn._qfobj){
   
			        Fn._qfobj = {
   };
			    }
			
			    Fn._qfobj.name = n;
			
			    return Fn._qfobj;
			}
			
			var f1 = new Fn("admin");
			var f2 = new Fn("root");
			
			console.log(f1 === f2);     // t
			console.log(f1.name);       // 有值
			
			console.log(f1);			//{name: "root", sex: 123}
			console.log(f2);			//{name: "root", sex: 123}
		
		
		
			// 案例
				// 单击按钮弹出模态框，3秒后自动隐藏
				// 单例模式
				function Toast(msg){
   
				    // 判断全局变量的身上是否被创建对象属性，如果没有，创建
				    if(!Toast._qfobj){
   
				        Toast._qfobj = {
   };
				        Toast._qfobj.ele = document.createElement("dialog");
				        document.body.appendChild(Toast._qfobj.ele);
				    }
				    // 如果有，跳过上面的if，直接设置内容，设置显示
				    Toast._qfobj.ele.innerHTML = msg;
				    Toast._qfobj.ele.style.display = "block";
				    // 计时器开启之前关闭
				    clearTimeout(Toast._qfobj.t);
				    Toast._qfobj.t = setTimeout(()=>{
   
				        Toast._qfobj