前端设计模式 策略模式

策略模式：不同策略分开处理，避免出现大量 if...else 或者 switch...case

 

class User {
    constructor(type) {
        this.type = type;
    }
    buy() {
        if (this.type === 'ordinary') {
            console.log('普通用户购买');
        } else if (this.type === 'member') {
            console.log('会员用户购买');
        } else if (this.type === 'vip') {
            console.log('vip 用户购买');
        }
    }
}

// 测试
var u1 = new User('ordinary');
u1.buy();
var u2 = new User('member');
u2.buy();
var u3 = new User('vip');
u3.buy();

这里可能有大量的 if...else。功能肯定没有问题，设计模式的存在不是解决bug，是提高设计能力，提高拓展性的

 

class OrdinaryUser {
    buy() {
        console.log('普通用户购买');
    }
}

class MemberUser {
    buy() {
        console.log('会员用户购买');
    }
}

class VipUser {
    buy() {
        console.log('vip 用户购买');
    }
}

// 测试
var u1 = new OrdinaryUser();
u1.buy();
var u2 = new MemberUser();
u2.buy();
var u3 = new VipUser();
u3.buy();

这里针对不同的用户，不同的类

设计原则验证

不同策略，分开处理，而不是混合在一块

符合开放封闭原则