idea's blog

过度封装是程序员最容易犯的错, 因为是否过度并没有固定的数值标准, 只能是有经验的程序员基于科学的判断. 过度封装的危害十分严重, 所以必须重视, 并且极力避免.

首先, 什么是"过度封装"? 我们知道, 计算机科学领域最称为经典也是最强大的思想便是递归, 分而治之. 但是, 递归本身最重要的因素是: 结束条件. 一生二, 二生三, 三生万物, 总要有终止的条件吧? 不然一辆车不停地急驰, 你怎样上车?

新手程序员, 特别是非科班出身的文科程序员, 最容易犯了过度封装的错误的原因就是不知道何时适可而止, 脑筋往往不断地分解分解再分解问题, 最后, 你看到的就是这个调用那个, 那个引用这个, 乱七八糟毫无头绪, 三两行代码的函数比比皆是, 自以为封装抽象, 其实是拿捏不好这个度.

一旦过度封装, 直接的危害往往是写了无数行代码, 封装了N多个类, 就是看不出一个完整的功能, 因为分裂起来收不住. 即使最终把功能实现了, 代码维护性也让人不忍直视.

如何判断是否过度封装? 如何避免过度封装? 我认为, 只要掌握了一个原则, 时刻以这个原则为准绳, 那便几乎不会犯过度封装的错误.

这个原则便是"直观优先"原则, 代码逻辑以直观为最优先的原则, 其它的原则均低于此原则, 即使有一百个考虑, 如果违反了直观原则, 都必须放弃掉而优先保证直观原则.

举一个例子:

function closeDialog() {
    login.close();
    message.close();
    ...close();
}

var action = {
    close: function () {
        closeDialog();
    },
    backout: function () {
        if (BACKOUT_ID) {
            ...
        }
    }
};

$(document).on('click', function (e){
    var $that = $(e.target);
    for ( var k in action) {
        if ( $that.hasClass('action-'+k) ) {
            action[k].call(e.target);
        }
    }
});

这样的代码就是过度封装的经典体现!

首先, closeDialog() 这个函数不应该存在, 而应该被展开, 因为函数只被调用一次, 而且没有逻辑上的独立性的必要.

其次, 上面的函数通过跳转表的方式来逃避直接的函数调用, 这是对跳转表技术的极大滥用! if-else 加函数调用是最直观的分支跳转方式, 完全没有必要在这个例子里使用跳转表技术.

先解释一下什么是跳转表技术, 这是一个非常古老而基础的计算机编程领域的技术. 跳转表包含很多层含义, 简单的说, 就是将逻辑代码块放到一个索引表中, 代码编写过程通过传递索引项来最终调用相应的逻辑代码块(因为多处引用).

第一次听到或者见到跳转表技术的程序员的心情, 如果你想体验的话, 你想想当你写了无数的 if-else 之后, 你发现了 switch-case 时的心情, 或者是你第一次听到函数指针这个事物时的心情.

但是, 像 js 之类高级语言, 已经把跳转表技术, 直接融合到了语言的语法本身, 如类(class). 你不需要实现自己的跳转表技术, 你只需要用好语言本身的特性即可.

所以, 上面的代码应该改成:

$(document).on('click', function (e){
    var $that = $(e.target);
    if ( $that.hasClass('action-close') ) {
        login.close();
        message.close();
        ...close();
    }
    if ( $that.hasClass('action-backout') ) {
        if (BACKOUT_ID) {
            ...
        }
    }
});

这是最直观, 最正常, 人人都应该写成这样的代码. 如果你还想显式地使用查找表技术以体现自己牛逼, 我是说, 如果你真想装逼的话(重新发明一套函数查找和调用的轮子), 你可以这样写:

var action = {
    close: function () {
        login.close();
        message.close();
        ...close();
    },
    backout: function () {
        if (BACKOUT_ID) {
            ...
        }
    }
};

$(document).on('click', function (e){
    var $that = $(e.target);
    var func_name = $(that).attr('action');
    if(func_name && action[func_name]){
        action[func_name]();
    }
});

如果都这样写了, 那和直接在 html 标签里写 onclick 属性有什么区别? 难道通过 class 绑定事件就高级, 写 onclick 指明回调函数的名字就不高级了?

关注微信号: udpwork

Related posts:

1. Nginx 499 错误码以及 AJAX 调用失败
2. 开发跨浏览器JavaScript—《Ajax基础教程》笔记
3. JavaScript 设置浏览器标题闪动
4. 最简单的JavaScript两级联动示例
5. 使用 SSDB 来实现操作频率限制