최근 몇 달 동안 최적의 JavaScript 이벤트 처리에 관한 중요한 토론이 목격되었습니다. Google의 JSAction Library 및 다가오는 ECMASCRIP 7 Object.Observe () 메소드 (이미 Chrome 36 및 Node.js Harmony에서 지원됨) 가이 논쟁을 불러 일으켰습니다. 이 기사는 다양한 이벤트 처리 패턴을 탐색하여 장점과 단점을 측정합니다.

키 포인트 :

• JSACTION 라이브러리 : 이 Google 라이브러리는 관리에서 논리를 처리하여 부분적으로 HTML로 이동합니다. 이는 브라우저 별 오류를 완화하고 글로벌 범위 오염을 줄임으로써 성능을 향상 시키며 메모리 누출을 최소화하는 것을 목표로합니다.
• object.observe () 메소드 : ECMAScript 7의 일부,이 메소드는 객체 변경의 기본 관찰을 가능하게하여 게시자/가입자 패턴을 간소화하여 반응성 프로그래밍에 중요합니다.
• 이벤트 처리 진화 : 전통적인 인라인 이벤트 처리는
addeventListener
• 로 진화하여 글로벌 범위 오염 및 XSS 취약점을 해결했습니다. jQuery와 같은 라이브러리는 이벤트 관리를 추가로 단순화하고 스케일링합니다. 성능 및 데이터 바인딩 : Object.Observe () 및 가상 DOM (React and Ractive에 사용)은 데이터 바인딩 및 UI 업데이트를 최적화하여 DOM 조작을 줄임으로써 성능을 크게 향상시킵니다.
• 세부 분석 :

Closure 라이브러리를 기반으로 구축 된 JSAction은 이벤트 청취자 관리에서 브라우저 불일치를 다룹니다. 사용자 정의 jsaction 속성을 사용하여 로직을 HTML로 이동시켜 이벤트와 핸들러를 분리합니다. 성능을 향상시키고 글로벌 범위 오염을 줄이기위한 반면, 복잡성과 직관적이지 않은 사용량이 많은 프로젝트의 이점을 능가 할 수 있습니다.

증가하는 추세는 이벤트뿐만 아니라 데이터 처리에도 영향을받는 DOM 요소 내에 직접 논리를 배치하는 것이 포함됩니다. Angular, Ractive 및 React Enforce MVC와 같은 프레임 워크를 통해 템플릿을 통한 데이터 바인딩 및 반응성 프로그래밍을 가능하게합니다. 이 접근법은 특정 상황에서 유지 유지 가능성을 잠재적으로 향상시킬 수 있지만 밀접하게 결합 된 프리젠 테이션과 논리의 함정을 피하기 위해 신중한 고려가 필요합니다. object.observe ()는 아직 ES6의 일부가 아니지만 이벤트 처리를 넘어 게시자/가입자 패턴을 기본적으로 지원함으로써 상당한 성능 향상을 약속합니다. 선언 프레임 워크는 이미 유사한 논리를 활용하고 있으며 Object.Observe ()는 효율성을 더욱 향상시킵니다.

역사적으로, 인라인 이벤트 처리 (

속성)는 표준이지만, 그 제한 (가독성, 유지 가능성, 글로벌 범위 오염, XSS 취약성)이

의 채택으로 이어졌습니다. jQuery와 같은 라이브러리는이 프로세스를 간소화하여 확장 성 및 디버깅을 개선했습니다. 그러나 addeventListener 는 특히 구형 브라우저에서 클로저가 신중하게 관리되지 않으면 메모리 누출로 이어질 수 있습니다. 선언 프레임 워크는 가상 Doms (React, Ractive) 또는 컨테이너 객체 (EMBER, 백본, 러브)와 같은 기술을 통해 효율적으로 데이터 바인딩 및 UI 업데이트를 효율적으로 관리하는 강력한 대안을 제공합니다. 이러한 프레임 워크는 종종 양방향 데이터 바인딩을 지원하고 업데이트를 단순화하며 DOM과 응용 프로그램 논리 간의 일관성을 유지합니다. 이것은 명시적인 DOM 조작을 요구하는보다 수동적이고 명령적인 접근 방식과 대조됩니다. object.observe ()는 객체 변경을 관찰하기위한 강력한 메커니즘을 제공하여 프레임 워크에만 의존하지 않고보다 효율적인 데이터 바인딩을 가능하게합니다. 현재 브라우저 지원이 제한되어 있지만 반응성 프로그래밍 기능의 상당한 발전을 나타냅니다.

최적의 JavaScript 이벤트 처리 방식은 프로젝트 세부 사항에 따라 다릅니다. 선언 프레임 워크는 유지 보수 및 성능 측면에서 상당한 이점을 제공하지만 JSAction 및 Object.Observe ()의 뉘앙스를 포함하여 다양한 패턴의 트레이드 오프를 이해하는 데 정보에 입각 한 결정을 내리는 데 중요합니다.

JavaScript의 Crockford - 에피소드 IV : Ajax의 변태

1. JavaScript Closures
2. github에서 jsaction repo
3. ractive와 angular의 차이
4. Ractive와 React의 차이
5. ember.js
의 컨테이너 및 의존성
6. Addy Osmani의 Object.Observe ()가있는 데이터 바인딩 혁명
8. faqs (요약) :

이 섹션에는 원래 텍스트에 제공된 FAQ에 대한 요약이 포함되어 있으며 간결하게 응축됩니다. 전체 설명은 원본 텍스트로 제공됩니다.

이벤트 처리 패턴 :

• 이벤트 전파 : 캡처 및 버블 링.
stopPropagation ()
• 및 expendDefault () . 캡처 대 버블 링 : Dom에서의 이벤트 흐름 방향
• 기본 조치 방지 :
expendDefault ()
• 메소드 이벤트 대표단 : 부모 요소의 이벤트 처리.
• 정규 표현식 :
regexp
• . 를 사용하여 문자열에서 패턴 일치 JavaScript 디자인 패턴 : 일반적인 문제에 대한 재사용 가능한 솔루션 (모듈, 프로토 타입, 관찰자 ​​등).
• 오류 처리 :
시도 시도 ... Catch ... MARCH ... MARCH
• 문. javaScript 디버깅 :
console.log ()
• , 브라우저 개발자 도구