javascript - 有没有一种方法可以编写 JavaScript，使其在处理许多回调时更具可读性？

Question

我在 JavaScript 工作。由于代码的外观，我越来越沮丧。代码如此嵌套，我很快就需要投资第三台 37"显示器，以防止一直损坏我的手指。

这是我现在正在处理的一些工作代码:

$(function () {
    var mainContainer = $('#mainContainer'),
        countyContainer = $('#countyContainer'),
        workAreaContainer = $('#workAreaContainer');
    $('body').fadeIn(400, function() {
        mainContainer.slideDown(400, function() {
            ShowLoader();
            ListCounties(function(counties,success) {
                if (success) {
                    HideLoader();
                    for (var i = 0; i < counties.length; i++) {
                        if (counties[i] != "") {
                            countyContainer.append(
                                '<div class="col-md-3 county-result-item">'+
                                    '<h3>'+counties[i]+'</h3>'+
                                    '<i class=" '+FA('fa-folder-open','3x')+' text-center" style="color:'+RandomColor()+'"/>'+
                                '</div>'
                            );
                        }
                    }
                    var countyResultItem = $('.county-result-item');
                    countyResultItem.on('click', function(event) {
                        event.preventDefault();
                        var county = $(this).text().split("(")[0];
                        if (county != "") {
                            ShowLoader();
                            countyContainer.slideUp(400);
                            FetchWorkAreas(county,function(workAreaData,success) {
                                if (success) {
                                    for (var i = 0; i < workAreaData.workAreas.length; i++) {
                                        workAreaContainer.append(
                                            '<div class="col-md-3 workArea-result-item">'+
                                                '<h3>'+workAreaData.workAreas[i]+'</h3>'+
                                                '<i class=" '+FA('fa-folder-open','3x')+' text-center" style="color:'+RandomColor()+'"/>'+
                                            '</div>'
                                        );
                                    }
                                    HideLoader();
                                    workAreaContainer.slideDown(400, function() {
                                        var workAreaResultItem = $('.workArea-result-item');
                                        workAreaResultItem.on('click', function(event) {
                                            event.preventDefault();
                                            var selectedWorkArea = $(this).text().split("(")[0];
                                            FetchJobListings(workAreaData.countyID,selectedWorkArea,function(jobListings,success) {
                                                if (success) {
                                                    console.log(jobListings);
                                                }
                                            });
                                        });
                                    })
                                }
                            });
                        }
                    });
                }
            });
        });
    });

    function FetchJobListings(countyID,selectedWorkArea,callback) {
        $.post('Fetch.php', {fetch: 'jobListings',countyID : countyID, selectedWorkArea: selectedWorkArea}, function(data) {
            if (data) {
                callback(data,true);
            }
        });
    }

    function FetchWorkAreas(county,callback)
    {
        $.post('Fetch.php', {fetch: 'workAreasID',county:county}, function(data) {
            if (data && data.workAreas.length > 0) {
                callback(data,true);
            }
        });
    }

    function ListCounties(callback)
    {
        $.post('Fetch.php', {fetch: 'counties'}, function(data) {
            if (data) {
                if (data.length > 0) {
                    callback(data,true);
                }
            }
        });
    }

    function RandomColor() {
        var colors = ["#cea547","#7e8b58","#002c44","6da6a7"];
        var rand = Math.floor(Math.random()*colors.length);
        return colors[rand];
    }

    function FA(icon,size) {
        var iconSize = '';
        if (typeof size != undefined) {
            iconSize = size;
        }
        return 'fa '+ icon+' fa-'+size;
    }

    function ShowLoader() {
        if ($('.imgLoader').length === 0) {
            var loaders = ["loading1.gif","loading2.gif","loading3.gif","loading4.gif"];
            var rand = Math.floor(Math.random()*loaders.length);
            $('#mainContainer').append('<div class="imgLoader"><img class="imgLoader img-responsive img-center" src="imgs/'+loaders[rand]+'" /><h3 class="text-center">Laster</3></div>');
        }
    }

    function HideLoader() {
        $('.imgLoader').fadeOut(400,function() {
            $(this).remove();
        });
    }
});

这只会伤到我的眼睛，我真的有点难过，因为对我来说，代码可读性和美观性很重要，而不是最终看起来像鱼梯:

                                            }
                                        });
                                    });
                                })
                            }
                        });
                    }
                });
            }
        });
    });
});

在 JavaScript 方面，我仍然是我所说的新手，这可能是我没有注意到的根本问题。但基本上，有没有办法保留代码，使其在我完成时不会缩进 1000 次？

Answer 1

这是边界线的例子 Spaghetti Code .

您可以做几件事，首先是拆分所有功能，使它们作为较小的流程独立存在。例如:

ListCounties(function(counties,success) {
    if (success) {

与其创建内联函数(不可重用)，不如问问自己我想对县列表做什么，然后独立构建它。

// write a nice comment here to explain what the function does and what the arguments mean
function handleCountyList(countries, success){

}

现在您可以按如下方式调用您的 ListCounties:

ListCounties(handleCountyList);

通过将所有功能拆分为更易于管理的部分，您将避免梯子。

这还应该使您的代码更易于维护，因为它变得更易于阅读、思考、调试和更新。换位思考其他开发者，并问，“如果我向我的 friend 展示这段代码，她能轻易理解它的作用吗？”

---

如果您想更高级一点，而回调又让您烦恼，请尝试使用 promises。在我看来，它们在语义上和功能上都更好，并且允许您执行以下操作:

ListCounties().then(function(counties){
    // do something with the counties
});

Promises 有不同的风格，但这个库是一个好的开始:https://github.com/petkaantonov/bluebird