Vue 中使用到的设计模式

vue 中运用了那些设计模式：

1、单例模式，确保一个类只有一个实例对象，并提供一个全局访问点供其访问
2、工厂模式，是用来创建对象的一种模式，不必暴露构造函数的具体逻辑，而是将逻辑封装在一个个函数之中
3、装饰器模式，允许向现有的函数添加新的功能，同时不改变其结构
4、策略模式，就是定义一系列的算法，把他们一个个封装起来，并且使他们可以相互替换
5、观察者模式
6、发布订阅者模式

1、单例模式

// 单例模式
function Person(name, age){
    this.name = name;
    this.age = age;
    this.info = function(){
        console.log(`我的名字叫${this.name},我今年${this.age}岁了`)
    }
}

Person.getInstance = function(name, age){
    if(!instance){
        this.instance = new Person(name, age);
    }
    console.log(this.instance)
    return this.instance;
}

let b1 = Person.getInstance('单例1', 18);
let b2 = Person.getInstance('单例2', 20);
b1.info();
b2.info();

2、工厂模式

function Factory(name, age){
    let obj = {};
    obj.name = name;
    obj.age = age;
    return obj
}

Factory.prototype.say = function(){
    console.log(`我的名字叫${this.name},我今年${this.age}岁了`)
}

let zs = new Factory('张三', 18);
let ls = new Factory('李四', 20);
zs.say();
ls.say();

3、装饰器模式

function before(fn, callback){
    let _this = this;
    return function(){
        callback.apply(this, arguments);
        return fn.bind(this, arguments);
    }
}

function after(fn, callback){
    let _this = this;
    return function(){
        let res = fn.apply(this, arguments);
        callback.apply(this, arguments);
        return res;
    }
}

// before 和 after 是两个高阶函数，让我们一起回忆一下什么是高阶函数
// 还知道 call，apply，bind 的区别吗
let getName = function getName(){
    // 假如这是你同事写的烂代码，看不下去的那种，那么别动他的代码
    console.log('这是 getName 函数');
}

before(getName, function(){
    // 这个就是你要写的新的逻辑
    console.log('切入前代码');
})();

after(getName, function(){
    // 这个也是你要写的新逻辑
    console.log('切入后代码');
})();

4、策略模式

let strategy = {
    'A': function(bonus){
        return bonus * 4;
    },
    'B': function(bonus){
        return bonus * 3;
    }
}
function fn (level, bonus){
    return strategy[level](bonus);
}

let result = fn('A', 4000)
console.log(result, 'result');
// 策略模式提供开放-封闭原则，将算法或者方法封装在一个类中，使他们易于切换，易于替换
function func(a, b){
    let f = function f(){
        return a + b
    }
    return f
}