我正在使用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次？
最佳答案
这是边界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);
通过将所有功能拆分为更易于管理的部分，您将避免遇到麻烦。
这也应该使您的代码更具可维护性，因为它变得更易于阅读，考虑，调试和更新。同情其他开发人员，并问：“如果我向我的朋友展示此代码，她可以轻松理解它的作用吗？”
如果您想更高级一些，而让您烦恼的是回调，请尝试promises。在我看来，它们在语义和功能上都更好，并且允许您执行以下操作：
ListCounties().then(function(counties){
// do something with the counties
});
承诺有不同的味道，但是此库是一个好的开始：https://github.com/petkaantonov/bluebird