原生js常用设计模式、单例，观察者、工厂

前言

今天给大家带来几种常用的设计模式的讲解、

讲解设计模式之前，我们先来说说什么是设计模式，它有什么作用。

在我看来，设计模式就是前人工作经验的总结，工作中不用设计模式也能写，但是用了设计模式能够帮助我们写出更好的代码，

设计模式的好处

提高代码的复用性，解耦代码，提高代码质量，

同时也是深入理解框架，封装一些插件时候必备的

设计原则

开放封闭原则【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就来砍我');

这就是比较常用的几种设计模式了，还有更多的 中介者模式、装饰模式、迭代器模式，挺多的，这里就不一一来讲了。

谢谢大家观看，有问题可以评论提呀😄！

总结一句：

设计模式就是前人经验，为了解决业务问题存在，开发时候不用刻意追求，用到时候再说了。