JavaScript 프레임워크는 너무 많은 기능을 제공하므로 주의하지 않으면 해당 기능에 빠지기 쉽습니다. 도구 라이브러리에 더 많이 의존할수록 수정이나 유지 관리 중 작은 변경이 다른 기능에 영향을 미칠 가능성이 높습니다(일반적으로 도처에 광산이 있으므로 걸을 때 주의해야 합니다). 특히 수년 전 레거시 코드를 유지 관리할 때는 더욱 그렇습니다. 내가 자주 보는 실수 중 하나는 개발자가 특정 이벤트를 수동으로 트리거할 수 있도록 하는 jQuery의 트리거에 관한 것입니다. 이 기능은 정말 강력하고 사용하기 쉽지만 규칙을 준수하고 JS에서 해당 기본 이벤트 이름을 트리거하지 마세요.
참고: 다른 JS 프레임워크에서도 이 기능을 제공한다는 것을 알고 있습니다. 저는 단지 예시로만 jQuery를 사용합니다. , 그 인기를 보고 최근에 이 문제가 발생했기 때문입니다. 모든 도구 라이브러리는 동일한 문제를 일으킬 수 있습니다. 예를 들어 MooTools는 fireEvent 등을 사용합니다.
다음은 트리거를 사용하여 작업을 완료하는 일반적인 예입니다.
// 클릭 이벤트 수신
jQuery('.tabs a').on('click', function() {
// 인터페이스 전환과 같은 특정 작업 수행 , 콘텐츠 로드 등
})
// 마지막 a 태그에서 클릭 이벤트를 트리거합니다
jQuery('.tabs a').last().trigger('click' );
위 코드는 해당 인덱스의 탭 태그를 엽니다. 나는 개발자가 이러한 일을 처리하기 위해 트리거를 사용하는 이유를 완전히 이해합니다. 일반적으로 트리거되는 함수는 전역적으로 사용할 수 없지만 이벤트 트리거는 쉽고 항상 사용할 수 있기 때문입니다. 문제는 기본 이벤트 이름을 사용하여 트리거할 수 있다는 것입니다... 말할 수 없는 피해를 유발할 수 있습니다. 사이트 다른 곳에 추가된 내용을 살펴보겠습니다.
// 본문 내부의 모든 클릭 이벤트 듣기
jQuery('body').on('click', 'a', function() {
// 일부 비즈니스 로직 처리는 여기서 수행..
// 조건 충족(Condition Met)이 충족되면 다른 작업을 수행합니다!
if(conditionMet) {
// 페이지를 새로 고칠까요
// 하위 메뉴를 열까요?
// 양식을 제출하시겠습니까?
// ... Deng Deng Deng, Intel
}
})
이제 문제가 발생했습니다. - 탭 클릭 이벤트는 완전히 독립적인 다른 부분에 의해 모니터링되므로 처리하기가 더 까다롭습니다. 하하, 가장 좋은 해결책은 기본 이벤트 다음에 맞춤 이벤트 이름을 사용하는 것입니다.
// 클릭 이벤트 수신 시 맞춤 이벤트 가져오기
jQuery('.tabs a').on('click tabs-click', function() {
// 탭 전환, 콘텐츠 로드 등...
})
// 마지막 탭에서 "false" 이벤트 트리거
jQuery('.tabs a' ).last().trigger ('tabs-click');
이제 이벤트 트리거가 더 이상 페이지의 다른 리스너와 충돌하지 않습니다. 보수적인 개발자들은 트리거 사용을 피하고 싶지만(다른 라이브러리와 동일) 어쨌든 사용자 정의 이벤트 이름을 추가해야 한다고 말합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
