용레스
20
2019-06-23 22:18:20
7
551

jquey 효율적으로 쓰는법...



$('.edit_btn').on('click',function(){
    $(this).parents('li').find('.comment_box').show();
    $(this).parents('li').siblings().find('.comment_box').hide();
    $(this).parents('li').find('.edit_btn').addClass('hide_btn');
    $(this).parents('li').siblings().find('.on').css({display: 'block'})
    $('.counter').html('('+0+ '/100)').show(); 
 });

선배님들 안녕하세요

퍼블리셔 초짜입니다.

초보적인 질문인데요

궁금한게 있는데 위코드를 효율적으로 줄여쓰는 방법이 궁금합니다....

사수 분이 중복이 많아서 보기힘들다고 해서요 제가 초짜다 보니 

생각나는게

var $reviews = $('#review_list'),

      $reviewList = $('#review_list').find('li)

이렇게 쓰는건데 선언을 하고 갔다 붙이니까 작동이안되네요 $(this)이거 써서 그런거같기도 하구....

중복적인거 줄이면서 쓰는 방법좀 알려주시면 감사하겠습니다 

0
0
  • 답변 7

  • 콰스웩스익조트
    440
    2019-06-23 22:35:26 작성 2019-06-23 22:37:02 수정됨
    $('.edit_btn').on('click', function () {
    var $li = $(this).parents('li');
    $li.find('.comment_box').show();
    $li.find('.edit_btn').addClass('hide_btn');

    var $siblings = $li.siblings();
    $siblings.find('.comment_box').hide();
    $siblings.find('.on').css({display: 'block'});

    $('.counter').html('(' + 0 + '/100)').show();
    });


    돔 접근은 최소화 하는게 좋습니다.

    1
  • 용레스
    20
    2019-06-23 22:38:57
    콰스님 감사합니다!! 초보인데 도움이 많이 되었어요!
    0
  • 전재형
    4k
    2019-06-24 08:08:14

    둠 접근을 최소화하는게 정석이긴 한데.


    어짜피 모든 브라우저에서 클래스 접근이나 아이디 접근은 해싱하고 있을거에요. 별로 상관 없을듯.


    만약 돔의 갯수가 천개이상 만개쯤 되는 경우가 예상된다면 효율적으로 짜야하는데. 이벤트 단위로 돔접근이 발생한다면 무시해도 된다고 생각합니다.

    0
  • 전재형
    4k
    2019-06-24 08:10:48

    조금더 확장해서 DB를 조인하는 경우도.. 레코드 갯수가 100개 미만이면 정말 최악의 쿼릴짜도 무방합니다. 조인에 서브쿼리에 먼짓을 다해도 상관 없어요 


    레코드가 백만개쯤 되는 단위부터는 인덱스를 잘타는지 확인도 해야하고 조인을 더 줄일수 없는지 고민도 해야하지만..

    1
  • 전재형
    4k
    2019-06-24 08:14:30

    아 그렇다고 일부로 그렇게 짜라는 말이 아니라.


    성능에 문제 없을 것같은 경우에는 성능보다 더 중요한 코딩 포인트들이 있다는걸 말하려다 보니 이야기가 산으로 몬저 갔네요.


    코드가 읽기 편하고 이해하기 편한가가 더 중요한 것같아요.


    특히 지금 짜신 코드는 사용자 이벤트로부터 트리거되기 때문에 특히나 성능 의미 없어요.

    1
  • satis
    2019-06-24 10:07:03

    줄이는것도 중요하지만 이것고 고려해주세요.


    잘 짜여진 코드는 남이 보기 편한(쉬운)코드다
    0
  • 용레스
    20
    2019-06-24 11:22:28

    댓글들 감사합니다. 많은 도움이 되었습니다

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.