좋은 코드를 위해 jQuery에서 .next() 도배는 하지 말아야할까요?

Question

좋은 코드의 요소 중 두 가지가 알아보기 쉽고 유지보수 하기가 쉬운코드인데 요즘 프로젝트를 하면서 제가 짠 코드가 남들이 알아보기 힘들고 유지보수도 어려울거같다는 생각이 들어서 궁금해졌습니다.좋아요 싫어요를 색깔로 구분해서 제이쿼리로 작동시키는데 코드를 이렇게 썻거든요제이쿼리로 동적 이벤트 대상코드가 ''+result.COMMENT_LIKE+''''+result.COMMENT_DISLIKE+''이거고 여기서 i 태크로 된 좋아요 이미지를 클릭하면 실행되는 동적이벤트가==>$(document).on('click','div[class=commentsOne] i[class~=fa-thumbs-up]',function(){ if('${loginUser}' != ''){ if( $(this).attr('class')=='fa-solid fa-thumbs-up' ){ $(this).attr('class','fa-solid fa-thumbs-up blue') $(this).next().text(Number($(this).next().text())+1); if($(this).next().next().attr('class') == 'fa-solid fa-thumbs-down red'){ $(this).next().next().next().text(Number($(this).next().next().next().text())-1); } $(this).next().next().attr('class','fa-solid fa-thumbs-down') $(this).parents('.commentsOne').next().next().attr('class','Y') }else{ $(this).attr('class','fa-solid fa-thumbs-up') $(this).next().text(Number($(this).next().text())-1); if($(this).next().next().attr('class') == 'fa-solid fa-thumbs-down'){ $(this).parents('.commentsOne').next().next().attr('class','N') } }이겁니다. 이 이후에 ajax를 날리는건데 작동은 잘 됩니다.그런데 남들이 보면 이 .next() 도배가 뭔지 잘 모를수도 있겠다는 생각이 들어서요.코드를 짤때 보통 next()나 prev()를 여러개 사용하는 코드들은 다른사람들이 굉장히 안좋게 보나요?제가 쓴 다른 코드들은 next()에 find()에 막 섞어서 써서 더 보기 힘들텐데 제가 너무 안 좋은 코드짜는 습관을 가지고 있는걸까요?

서리쨩 · Answer

아무래도 여기저기 왔다갔다 번갈아 보게 만드는 코드는 다른 사람들이 보기 어렵긴 하죠.제 전임자가 선생님처럼 생각했더라면 제가 덜 고생했을 거구요.

MuDaeng · Answer

바로 실행시키지 말고 let solidThumbsDown &#61; $(this).next().next();if(solidThumbsDown.attr)이런식으로 작성해도 되구요. 음... this.next에 콜백함수지옥인것도 가독성 안좋고 당장은 님말고 다른사람들이 이해를 못하겠지만 반년이나 3개월지나면 해당 코드를 보고 님도 바로 이해하기 어려울스도 있어요. 가독성 좋은 코드는 남을 위한 것일스도 있지만 자신을 위한것이기도 합니다. 예전에 누가 쓴 코드보고 누가 이따구로 작성한거야 라고 했는데 저였던것처럼요.

장독깨기 · Answer

html 구조가 바뀌게 되면 좀 곤란하지 않을까요.특정 아이디나 클래스를 찾아서 액세스하는게 나을거 같습니다.

좋은 코드를 위해 jQuery에서 .next() 도배는 하지 말아야할까요?

3개의 답변

Q&A 목록