前端常见设计者模式

工厂模式

一个简单的工厂模式

function CreatePerson(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
}

let person1 = new CreatePerson("张三", 18, '男')
let person2 = new CreatePerson("李四", 20, '女')
let person3 = new CreatePerson("王五", 18, '男')

console.log(person1);
console.log(person2);
console.log(person3);

复杂工厂模式需要借助原型继承来实现

// 复杂工厂模式
// 要求：
// 父类：是一个抽象类：不可以直接实例
// 子类：实现自身的实例方法
function BicyclicShop(name) {
    this.name = name;
    this.methode = function () {
        return this.name;
    }
}
BicyclicShop.prototype = {
    constructor: BicyclicShop,
    sellBicycle: function () {
        const bicycle = this.createBicycle();
        bicycle.a();
        bicycle.b();
        return bicycle;
    },
    createBicycle: function () {
        throw new Error("父类不能直接实例，需要子类来实例"); //商店并不会自己生产自行车
    }
}

function extend(Sub, Sup) {
    const F = function () { };
    F.prototype = Sup.prototype;
    Sub.prototype = new F();
    Sub.prototype.constructor = Sub;
    Sub.sup = Sup.prototype;
}

function BicycleChild(name) {
    this.name = name;
    BicyclicShop.call(this, name);
}

extend (BicycleChild,BicyclicShop);


BicycleChild.prototype.createBicycle = function () {
    const a = function () {
        console.log("执行a任务");
    }
    const b = function () {
        console.log("执行b任务");
    }
    return {
        a,
        b
    }
}

const bicycleChild1 = new BicycleChild("凤凰牌")
const bicycleChild2 = new BicycleChild("柏林牌")

console.log(bicycleChild1);
bicycleChild1.createBicycle()
bicycleChild1.sellBicycle()

console.log(bicycleChild2);
bicycleChild2.createBicycle()
bicycleChild2.sellBicycle()

单例模式

单例模式，只是实例化一次，之后每次实例化的对象为同一对象

class Singleton {
    static instance
    constructor(name) {
        this.name = name;
    }

    static getInstance(name) {
        if (this.instance) {
            return this.instance;
        }
        this.instance = new Singleton(name)
        return this.instance
    }
}

const single1 = Singleton.getInstance('张三');
const single2 = Singleton.getInstance('李四');
console.log(single1);
console.log(single2);
console.log(single1 === single2);

策略模式

下面是一个计算年终奖的函数，但是当前函数违背了设计模式中的开发封装性，当有更多的绩效评级考核时，我们去修改它就会往这个函数中添加更多的逻辑分支，这样会使代码变得更加混乱，于是我们使用策略模式，将其修改：

const caluateBonus = function (performanceLevel, salary) {
    if (performanceLevel === "S") { //绩效为S的薪酬
        return salary * 4;
    }
    if (performanceLevel === "A") {//绩效为A的薪酬
        return salary * 3;
    }
    if (performanceLevel === "B") {//绩效为B的薪酬
        return salary * 2;
    }
}

const strategies = {
    S: (salary) => {
        return salary * 4;
    },
    A: (salary) => {
        return salary * 3;
    },
    B: (salary) => {
        return salary * 2
    },
    C: (salary) => {
        return salary * 1
    }
}

const caluateBonus = function (performanceLevel, salary) {
    return strategies[performanceLevel](salary)
}
// 测试:
console.log(caluateBonus("S", 20000)); //80000
console.log(caluateBonus("A", 20000)); //60000
console.log(caluateBonus("B", 20000)); //40000
console.log(caluateBonus("C", 20000)); //20000

发布者订阅模式

发布者订阅模式是一种一对多的关系，当被订阅者状态发生改变的时候，就会通知订阅者

class User {
    constructor(name) {
        this.name = name;;
        this.status = "offline";
        this.followers = [];
    }
    subscribe = (user, notify) => {
        user.followers.push({ user, notify });
    }
    online = () => {
        this.status = "online";
        this.followers.forEach(({ notify }) => {
            // console.log(notify);
            notify(this)
        })
    }
}


const user1 = new User("张三");
const user2 = new User("李四");
const user3 = new User("王五");

const mockNotifyUser = (user) => {
    // console.log(user);
    console.log(`您关注的${user.name}上线了`);
};

user1.subscribe(user3, mockNotifyUser);// 张三关注王五
user2.subscribe(user3, mockNotifyUser);// 李四关注王五
user3.online();//王五上线

适配器模式

适配器模式是指将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。

const getBeijingCity = function () {
    const beijingCity = [
        { name: '朝阳', id: 11 },
        { name: "号店", id: 12 }
    ];
    return beijingCity;
}

const render = function (fn) {
    console.log("渲染北京地图");
    console.log(JSON.stringify(fn()));
}

// 适配器
const addressAdapter = function (oldAddress) {
    const address = {};
    let oldAddressd = oldAddress();
    let item;

    for (let i = 0; i < oldAddressd.length; i++) {
        item = oldAddressd[i];
        address[item.name] = item.id;
    }
    return function () {
        return address;
    }
}
render(addressAdapter(getBeijingCity))