JS设计原则 —— 开闭原则

扩展性是衡量代码质量最重要的标准之一，代码的扩展性好了，出bug的几率就小很多。在经典的设计模式中，大部分设计模式都是为了解决代码的扩展性而存在的，主要遵从的原则就是开闭原则，所以理解开闭原则并能灵活应用很重要。

如何理解开闭原则

英文全称：Open Closed Principle（OCP）。开闭原则是对什么开放又是对什么关闭呢？是对扩展开放，对修改关闭。详细描述一下就是：添加一个新的功能时，应该在已有代码的基础上扩展代码（新增模块、类、方法等），而非修改已有代码（修改模块、类、方法等）。

这条原则的意义是什么呢？对扩展开放是为了应对需求变化，对修改关闭是为了保证原有代码的稳定性。在识别出代码可变部分和不可变部分之后，要将可变部分封装起来，隔离变化，提供抽象化的不可变接口，给上层使用。

我们来看一个栗子，理解一下这个原则。

我们在登陆一个系统的时候，都会输入用户名和密码然后点击登陆。在正式登陆之前，都会对输入的用户名和密码做校验，看是否符合规则，比如：

function checkLogin() {
    const username = document.querySelector('#username').value;
    if (!username) {
        // ...
    } else {
        // ...
    }
    
    const pwd = document.querySelector('#pwd').value;
    if (!pwd){
        // ...
    } else {
        // ...
    }
    
}

我们只提取了主要的业务逻辑check函数，里面对两个字段做了规则校验。

现在我们需要增加一个在登陆前输入验证码的功能。该如何改动代码呢？在这里就是在checkLogin函数中再增加一段对验证码做校验的代码。

function checkLogin() {
    const username = document.querySelector('#username').value;
    if (!username) {
        // ...
    } else {
        // ...
    }
    
    const pwd = document.querySelector('#pwd').value;
    if (!pwd){
        // ...
    } else {
        // ...
    }
    
    const captcha = document.querySelector('#captcha').value;
    if (!captcha) {
        // ...
    } else {
        // ...
    }
    
}

这样实现的问题是什么呢？一方面，如果验证规则很多，那这段代码就会很长很复杂，降低了可读性和可维护性。再者，如果有对应的单元测试，那每次修改单元测试也要修改。

上面的代码是基于“修改”的方式来实现新功能的，因为新功能的实现是在原有的方法中进行了修改，而非新增模块、类、方法等。那如何通过扩展的方式实现上面的功能呢？

class Verification {
    private verifiedHandlers: VerifiedHandler[] = [];

    public addVerifiedHandler(handler: VerifiedHandler) {
        this.verifiedHandlers.push(handler)
    }

    public checkAll() {
        for (let i = 0; i < this.verifiedHandlers.length; i++) {
            this.verifiedHandlers[i].check();
        }
    }
}

interface VerifiedHandler {
    check(): void;
}
class UsernameVerifiedHandler implements VerifiedHandler {
    public check() {
        console.log('username');
    }
}
class PwdVerifiedHandler implements VerifiedHandler {
    public check() {
        console.log('pwd');
        
    }
}
class CaptchaVerifiedHandler implements VerifiedHandler {
    public check() {
        console.log('captcha');
        
    }
}

在上面的实现中，定义接口VerifiedHandler，里面包含一个check方法，将对各个字段的校验移到每个handler中，并实现接口VerifiedHandler。

定义Verification类，暴露出addVerifiedHandler方法，以便添加不同的handler，并定义checkAll方法，调用所有handler的check方法。

各个handler已经定义好了，具体该如何使用呢？

class ApplyVerification {
    private verification: Verification = new Verification();
    private static instance: ApplyVerification;

    private constructor() {
        this.init();
    }
    public init() {
        this.verification.addVerifiedHandler(new UsernameVerifiedHandler());
        this.verification.addVerifiedHandler(new PwdVerifiedHandler());
        this.verification.addVerifiedHandler(new CaptchaVerifiedHandler());
    }

    public getVerification() {
        return this.verification;
    }

    public static getInstance() {
        if (!ApplyVerification.instance) {
            ApplyVerification.instance = new ApplyVerification();
        }
        return ApplyVerification.instance;
    }
}

function checkLogin() {
    ApplyVerification.getInstance().getVerification().checkAll();
}

ApplyVerification是一个单例类，创建Verification并添加不同的handler。

现在的代码再想添加新的校验逻辑只需要创建新的handler即可，最容易变化的部分是基于扩展的方式添加新功能而非修改原有代码。

如果觉得上述实现方式太过复杂，把不同的校验逻辑封装到不同的方法中也是可以的。

有时候，代码的可扩展性跟可读性不能两者兼顾，要做一些权衡和取舍。在if判断不是很多的时候，写在一起也没有太大问题，当if判断很多很复杂的时候，自然要选用可扩展性更好的方式。

如何做到“对扩展开放、对修改关闭”

最常用来提高代码扩展性的方法有：多态、基于接口而非实现编程、依赖注入，以及大部分设计模式（比如：装饰、策略、模板、职责链、状态等）。

最重要的是要时刻具备扩展意识、抽象意识、封装意识。写代码的时候多向前思考，可能会有哪些需求变更。不过也经常会有考虑不全的情况，只能通过不断重构来保持代码的可扩展性。