前言
今天给大家带来几种常用的设计模式的讲解、
讲解设计模式之前，我们先来说说什么是设计模式，它有什么作用。
在我看来，设计模式就是前人工作经验的总结，工作中不用设计模式也能写，但是用了设计模式能够帮助我们写出更好的代码，
设计模式的好处
提高代码的复用性，解耦代码，提高代码质量，
同时也是深入理解框架，封装一些插件时候必备的
设计原则
开放封闭原则【OCP】 简单来说，就是可扩展，不可修改
单一功能原则【SRP】 一个方法只做一件事
最少知识原则【LKP】 尽量减少对其他类的依赖，松耦合
ok，了解了原则之后，就可以开始来
第一个设计模式
工厂模式
批量生产对象，就是函数内部，生成对象实例，然后return出去。
// 工厂模式
function factoryFn(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
}
var _obj = factoryFn('姚明','35');
console.log(_obj); // {name: "姚明", age: "35"}
原型模式
就是函数声明为空，利用prototype原型来定义些属性和方法
function ProtoFn() {}
// 原型上添加方法
ProtoFn.prototype = {
constructor: ProtoFn, // 修复原型链
say(_n){
console.log(_n);
},
sayFn2(_n){
console.log(_n);
}
};
// 实例化
var _protoObj = new ProtoFn();
_protoObj.say('你好呀');
_protoObj.sayFn2('这是原型模式');混合模式
就是 构造 + 原型 ，也是咱们常用的
function MixinFn(name,age) {
this.name = name;
this.age = age;
}
MixinFn.prototype.say = function(_n) {
console.log(_n);
}
var _mixin = new MixinFn('牛大力','20');
console.log(_mixin); // MixinFn {name: "牛大力", age: "20"}
_mixin.say('这是混合模式，工作中上用的多');单例模式
同一时间只有一个实例，jq就是典型的
var singleFn = (function() {
// 装载单例的对象
var _obj = null;
// 初始化方法
function initFn(args) {
// 批量添加属性
for (var key in args) {
this[key] = args[key];
}
}
// 返回对象
return {
getInstance: function(args) {
// 单例模式，判断是否存在
if(_obj === null) _obj = new initFn(args);
return _obj;
}
}
})();
// 生成实例
var _one = singleFn.getInstance({
name: '12',
age: 18
});
console.log(_one); // initFn {name: "12", age: 18}策略模式
简单来说，为了避免多次if，
// 加薪，a 级别 3倍，b 2倍，c 1倍
var obj = {
'A': function (money){
return money * 3;
},
'B': function (money){
return money * 2;
},
'c': function (money){
return money;
}
}
// 计算函数
var reducers = function (level,money) {
// 返回小钱钱
return obj[level](money);
}
var myMoney = reducers('A',10000);
console.log(myMoney); // 30000观察者模式
就是我干了什么，让别人来看，
/* 发布者（被观察者）
订阅者（观察者）
主题对象（订阅都在主题对象注册）
发布消息 */
// 发布者 - 被观察者 publish 发布
var pub = {
// 方法
publish() {
// 做的一些逻辑
var xxx = 11;
// 通知订阅至
_dep.notify();
}
};
// 订阅者 -观察者
var sub1 = {
update(){
console.log(111);
}
};
var sub2 = {
update(){
console.log(222);
}
};
// 主题对象，订阅者都在主题对象中被注册
function Dep() {
this.subscribe = [sub1,sub2];
}
// notify 通知
Dep.prototype.notify = function() {
for (const item of this.subscribe) {
// 执行每一项
item.update();
}
}
// 发布消息
var _dep = new Dep();
// 发布者发布消息，主题对象执行
pub.publish();代理模式
提供访问接口，隐藏原对象
// 主体对象
function sendMsg(msg) {
console.log(msg); //你好，是兄弟就来砍我
}
// 代理方法，过滤敏感字
function proxyFn(msg) {
if(typeof msg !== 'string') return;
var reg = /s/ig
// 过滤敏感字
msg = msg.replace(reg,'');
// 发送信息
sendMsg(msg);
}
proxyFn('你好s，是兄弟S就来砍我');这就是比较常用的几种设计模式了，还有更多的 中介者模式、装饰模式、迭代器模式，挺多的，这里就不一一来讲了。
谢谢大家观看，有问题可以评论提呀！
总结一句：
设计模式就是前人经验，为了解决业务问题存在，开发时候不用刻意追求，用到时候再说了。