美文网首页让前端飞Web前端之路
JS设计原则 —— 开闭原则

JS设计原则 —— 开闭原则

作者: snow_in | 来源:发表于2020-04-22 18:09 被阅读0次

    扩展性是衡量代码质量最重要的标准之一,代码的扩展性好了,出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判断很多很复杂的时候,自然要选用可扩展性更好的方式。

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

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

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

    相关文章

      网友评论

        本文标题:JS设计原则 —— 开闭原则

        本文链接:https://www.haomeiwen.com/subject/truwihtx.html