jQuery의 이벤트 바인딩에 대한 몇 가지 생각(보충)_jquery

먼저 다음과 같은 매우 일반적인 이벤트 바인딩 코드를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

//예
$('#dom').click(function(e){
//무언가
})

$(' #dom2 ').click(function(e){
//뭔가
});

이 코드에는 이벤트 바인딩 처리에 몇 가지 결함이 있습니다.

과도한 이벤트 바인딩은 메모리를 소모합니다
나중에 생성된 HTML에는 이벤트 바인딩이 없으므로 다시 바인딩해야 합니다
구문이 너무 복잡합니다

해결 방법

1번과 2번에 대한 해결 방법으로 먼저 jQuery의 이벤트 바인딩에 대해 알아 보겠습니다.

jQuery의 이벤트 바인딩에는 호출할 수 있는 여러 메서드가 있습니다. 클릭 이벤트를 예로 들어 보겠습니다.

click 메소드

bind 메소드
delegate 메소드
on 메소드

어떤 메소드를 사용하든(클릭/바인드/위임) 결국 jQuery의 하위 레이어는 항상 on을 호출합니다. 최종 이벤트 바인딩을 완료하는 방법입니다. 그러므로 어떤 관점에서는 글쓰기의 편리성과 습관을 바탕으로 선택하는 것 외에 행복하고 직접적으로 on 방식을 직접 사용하는 것이 더 좋습니다.

메서드에 대한 자세한 설명과 사용 사례는 jQuery 공식 홈페이지를 직접 방문하시기 바랍니다. 여기서는 하나씩 설명하지 않겠습니다. api.jquery.com

성능

먼저 다양한 이벤트 바인딩 방법 간의 메모리 사용량 격차를 명확하게 이해해야 합니다.

성능 분석에는 Chrome의 개발자 도구를 사용합니다.
프로필 --> 힙 스냅샷을 찍습니다. 이 도구를 사용하면 Javascript가 차지하는 메모리를 확인하고 성능 문제를 분석할 수 있습니다.

DEMO HTML

코드 복사 코드는 다음과 같습니다.

복사 code


코드는 다음과 같습니다.

$(function(){ $('.ul a').click(function(e){ alert(' click event'); }); });

다음은 방법 1의 메모리 분석 차트입니다. 사용량은 약 340만




방법 2

코드 복사

코드는 다음과 같습니다.

$ (function(){ $('.ul').on('click', 'a', function(e){ alert('click event'); }) ; });

다음은 방법 2의 메모리 분석 차트입니다.

메모리 사용량은 약 2.0M입니다

결론

방법 1은 분명히 방법 2보다 1.4M 더 많은 메모리를 소비합니다.

방법 1은 DOM 추가 버튼을 클릭하여 이벤트를 새 이벤트에 바인딩할 수 없습니다. , 방법 2가 가능합니다.
on의 위임 객체가 HTML 페이지의 원본 요소인 한, 이벤트의 트리거링은 Javascript의 이벤트 버블링 메커니즘을 통해 모니터링되므로 모든 하위 요소(나중에 JS를 통해 생성된 요소 포함)의 모든 이벤트는 )가 모니터링됩니다. 모두 유효하며 이벤트를 여러 요소(이 예에서는 2000 a 태그)에 바인딩할 필요가 없으므로 메모리 소비를 효과적으로 절약할 수 있습니다.

생각하기
코드는 시와도 같지만 쉽게 똥같은 코드로 변할 수 있다. 코드의 우아함을 향상시키는 방법 또한 매우 흥미로운 일입니다.
다음은 매우 일반적이고 일반적인 JS 파일의 코드 조각입니다(일반 웹사이트에 사용됨)



코드 복사


코드는 다음과 같습니다.

$('#btn-add').click(function(){
//무엇인가
})
$('.action-box #btn-delete' ).click(function(){
//뭔가를 하세요
})
$('.action-box #btn-sort').mouseenter(function(){
//do Something
});
/**
**더 많은 동일한 코드
*/

js 파일이 수백 줄이면 비슷하다고 해도 과언이 아닙니다. 위의 코드에서는 패턴을 찾기가 어렵습니다.

1. 아마도 A는 #btn-add를 쓰는 것을 좋아하고 B는 .action-box #btn-add를 선택자로 쓰는 것을 좋아할 것입니다.
2. 다양한 종류의 이벤트가 쌓여 있고, 순서가 없습니다.
3. 방금 이야기한 이벤트 바인딩에 대한 이벤트 버블링 사용은 적용되지 않습니다

개선
기존 JS코드를 차근차근 개선해보자

버전 1

코드 복사 코드는 다음과 같습니다.

$('. action-box ').on('click', '#btn-add', function(){
//뭔가를 하세요
});
$('.action-box').on ('클릭', '#btn-delete', function(){
//뭔가
});

이벤트 버블링을 사용하긴 했지만, 여전히 다소 번거로운 느낌이 듭니다. .action-box가 여러 번 나타나서 불편한 느낌이 듭니다.

버전 2

코드 복사 코드는 다음과 같습니다.

$('. 액션 박스 ').on('클릭', '#btn-add， #btn-delete', function(){
if($(this).attr('id') == 'btn-add '){
//뭔가를 한다
} else{
//뭔가를 한다
}
});

이전보다 훨씬 나아진 느낌이지만 그에 따라 처리하려면 여전히 요소에 대한 판단이 필요합니다. 허용되지만 완벽하지는 않습니다.

영감

먼저 CSS의 향상된 버전과 CSS 구문의 sass 개선을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다:

/*bed CSS code*/
.action-box { width: 100%; color: #000 }
#btn-add { color : 파란색 }
#btn- 삭제 { 색상: 빨간색 }

/*좋은 CSS 코드*/
.action-box { width: 100%; color: #000; }
.action-box #btn-add { color: blue }
. 액션박스 #btn-delete { 색상: 빨간색 }

/*sass 코드*/
.action-box {
너비: 100%;
색상: #000;
#btn-add {
색상: 파란색;
}
#btn-삭제 {
색상: 빨간색;
}
}

좋은 CSS 코드와 Sass 코드에서 문서 구조를 명확하게 볼 수 있습니다. 액션 박스 아래에 두 개의 버튼이 있습니다.

이렇게 하면 sass와 같은 코드 구조를 js에 적용할 수 있나요? 대답은 물론 그렇습니다.

코드 복사 코드는 다음과 같습니다.

$('.action-box') .coffee( {
클릭: {
'#btn-add': function(){
//뭔가를 하세요
},
//jQuery를 지원하기 위한 것입니다.':last / [attr ] / :eq(0)' 및 기타 방법
'#btn-delete': function(){
//뭔가를 수행
}
},
mouseenter: {
'#btn-sort': function(){
//뭔가를 하세요
}
}
});

이 구조가 마음에 드시나요?

1. 명확한 문서 구조
2. 이벤트 버블링을 사용하여 메모리 사용량을 효과적으로 줄입니다
3. 첫 번째 수준은 이벤트 이름으로 구분됩니다.
4. 선택자.

커피 기능 소스코드

코드 복사 코드는 다음과 같습니다.

$ .fn.coffee = function(obj){
for(var eName in obj)
for(var selector in obj[eName])
$(this).on(eName, selector, obj[eName ][selector] );
}

코드 몇 줄만 이야기해도 멋진 구문을 만들 수 있습니다

즐기세요! ^_^

작성자: CoffeeDeveloper