jQuery 코드 단순화 - 슬라이드 및 슬라이드 토글

Question

어떻게하면 현재 JavaScript 코드를 간단하게 할 수 있습니까? 너무 복잡해 보입니다.

// Data from AJAX response 
var errorsJSON = { 
    "name-pl": ["The name-pl field is required."], 
    "name-en": ["The name-en field is required."] 
} 

var errorString = $(this).data('validate-multiple'); 
var errorNamesArray = errorString.split(", "); 
var ul = $('<ul class="list-unstyled">'); 

$.each(errorNamesArray, function(key, value) { 
    if (errorsJSON.hasOwnProperty(value)) { 
     ul.append(`<li><span class="help-block">${errorsJSON[value]}</span></li>`); 
    } 
}); 

if (! $(this).is(':visible') && ul.children('li').length > 0) { 
    $(this).find('div.controls').empty().append(ul); 
    $(this).slideDown(500); 
} else if ($(this).is(':visible') && ul.children('li').length === 0) { 
    $(this).slideUp(500); 
} else if ($(this).is(':visible') && ul.children('li').length > 0) { 
    $(this).slideUp(500, function() { 
     $(this).find('div.controls').empty().append(ul); 
     $(this).slideDown(500); 
    }); 
} 

여기에 나는 HTML과 JS 코드 http://jsfiddle.net/ecLjnnhm/ 내가 입력 필드에 넣어 어떤 사용자 errorsJSON 변경하고 따라 할 수 있음을 지적하고 싶습니다 을 붙여.

Answer 1

가독성 : 매번 길게 선언하는 대신 변수를 사용하여 if 문의 조건을 저장하십시오.

효율성 : 캐시 $(this) : 변수 jQuery는 한 번만 작업해야합니다.

개인 취향 : 나는 그들이 jQuery를 개체임을 나타 내기 위해 $ 어떤 jQuery를 개체 변수를 (귀하의 경우 ul을 같은) 앞에 추가 건의 할 것입니다.

// Data from AJAX response 
var errorsJSON = { 
    "name-pl": ["The name-pl field is required."], 
    "name-en": ["The name-en field is required."] 
} 

var errorString = $(this).data('validate-multiple'); 
var errorNamesArray = errorString.split(", "); 
var $ul = $('<ul class="list-unstyled">'); 
var $t = $(this); 
var isVisible = $t.is(':visible'); 
var hasErrors = false; 

$.each(errorNamesArray, function(key, value) { 
    if (errorsJSON.hasOwnProperty(value)) { 
     $ul.append(`<li><span class="help-block">${errorsJSON[value]}</span></li>`); 
     hasErrors = true; 
    } 
}); 

if (!isVisible && hasErrors) { 
    $t.find('div.controls').empty().append(ul); 
    $t.slideDown(500); 
} else if (isVisible && !hasErrors) { 
    $t.slideUp(500); 
} else if (isVisible && hasErrors) { 
    $t.slideUp(500, function() { 
     $t.find('div.controls').empty().append(ul); 
     $t.slideDown(500); 
    }); 
}