【代码规范】一个好函数看起来应该是怎样的

image

好的模板能带来好结果,一般的模板则带来坏结果。

📚 代码规范之痛

好的代码是怎样的?答案是模块清晰、逻辑连贯。
好书《Clean Code》有阐述,还有市面上纷繁的概念(比如 Google 的 HTML 规范、CSS 的 BEM、Vue 的风格指南)也都明确地指向这个理念。
可是这些书籍或者文档,都有一个共同的缺点——太长了。

🛋️ 懒规范

为了推广这些规范,我用文档把林林总总的软件工程书籍、规范解释文档链接整理出来,满心欢喜地推广给其他程序员,一般也只能得到“有空会看”的回应。
“他们太懒了”,我心想。
对付懒人,只能用“懒办法”——归纳出一个简单易懂的、清晰可执行概念。

🔘 好函数

函数是我们编程中见得最多、写的最多的东西(搬砖工人的砖头)。
先看一个普通的函数,比如我们要把某个 id 加工一下,然后用它获取一个列表,对其所有元素加工后渲染。我见过最多的写法长这样:

function queryList(id){
    let list = foo.get('/path/list', 'boo' + id)
    for (let i =0; i < list.length; i ++){
        list[i].name = 'name:' + list[i].name
        list[i].desc = 'desc:' + list[i].desc
    }
    function render(list){
        for (let i =0; i < list.length; i ++){
            $('.list').find('li').text(list[i].name + ',' + list[i].desc)
        }
    }
    render(list)
}

这是典型的“想到哪写到哪”。
我们再来看看大牛 LucasHC 写的一个滚动渲染代码的设计思路:(这里简化了一些代码)

    (function() {
        var fetching = false; 
        var page = 1;
        var slideCache = [];

        function isVisible (id) {
            // ...判断元素是否在可见区域
        }
        function updateItemCache (node) {
            // ....更新DOM缓存
        }
        function handleScroll (e, force) {
            // ...滚动处理程序
        } 

        window.setTimeout(handleScroll, 100);
        fetchContent();
    }());

这是标准的“先设计再填充”。
分析一下,方法就是,把函数分割成 3 部分:变量、子函数、执行,视觉上就清晰明了(图片在文章头部)。就像建房子一样,准备好物料,规划好工序,最后动工。不信你拿出乐高积木玩具的说明书,也是这种构建方法(逻辑简洁明了到小孩子都能懂 :D)。
好,我们来把例子函数按照这个方法改造一下:

function queryList(id){
    const mergedId = 'boo' + id
    const url = '/path/list'
    
    function getListFromServer(url, id){} // 细节不展示
    function listItemHandle(list){} // 细节不展示
    function render(list){} // 细节不展示
    
    // 我们要关注的,不是细节,而是这个函数做了3件事:1.获取,2.加工,3.渲染
    let list = getListFromServer(url, mergedId)
    list = listItemHandle(list)
    render(list)
}

这是美好的“代码即逻辑”。
动用代码编辑器的“折叠”功能,就可以把所有子函数的细节收起来。等到需要维护&扩展的时候,我们可以迅速地找到并改造我们的代码。

☕️ 终归是懒

我保证,“懒规范”可以让你的编码速度至少提升 20%,可维护性提升 80%。
什么?你不信?
不信就去看看《Clean Code》和各种规范解释文档吧 :D。

阅读 266

推荐阅读