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

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

📚 代码规范之痛

好的代码是怎样的？答案是模块清晰、逻辑连贯。
好书《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。