设计模式
一、概念
设计模式
-是经过大量验证,实验,总结,形成的一套固定的用来解决某类问 题的方法
- 是一套经过反复使用、多人知晓的、经过分类的、代码设计经验的总结
二、设计模式有哪些
构造器模式,模块化模式,暴露模块模式,单例模式,中介者模式,原型模式,命令模式,外观模式,工厂模式,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