JavaScript 모양 모드

php中世界最好的语言
풀어 주다: 2017-11-27 14:15:48
원래의
1574명이 탐색했습니다.

이번에는 JS의 디자인 컨셉과 어떤 측면에 주의해야 하는지에 대해 이야기하겠습니다. 해당 섹션은 차례대로 업데이트될 예정입니다. 이전에도 제안해 주셨는데요. .관심 있으신 분들은 확인해 보세요.

참고

JavaScript

디자인 패턴시리즈 github 주소

상세한 시리즈의 기사는

디렉터리 구조에 따라 순서대로 읽는 것이 가장 좋습니다.

정정 및 질문

궁금한 점이 있거나 오류를 발견한 경우 해당 문제에 대해 질문하거나 정정할 수 있습니다.

외관 모드

개념:

복잡한 하위 시스템 인터페이스 세트에 더 높은 수준의 통합 인터페이스 제공

,이 인터페이스를 통해 하위 시스템 인터페이스에 더 쉽게 액세스할 수 있도록 하세요

외관 모드를 외관 모드라고도 합니다.

사례 예

클릭 이벤트를 문서 요소에 바인딩해야 한다는 요구 사항이 있습니다. 이때 브라우저의 호환성을 고려해야 하지만 이벤트가 바인딩될 때마다 일부 브라우저가 호환되는지 여부를 판단해야 합니다. 그다지 합리적이지는 않습니다. 현재 우리는 통합 바인딩 이벤트 메서드를 캡슐화하기 위해 모양 모드를 사용해야 하며, 그런 다음 이 메서드에서 브라우저 호환성을 처리하고 외부 바인딩 이벤트에 대한 메서드를 균일하게 노출해야 합니다.

이것이 우리가 모양 모드라고 부르는 것입니다.

코드 구현

// 모양 모드 구현 함수 addEvent(dom, type, fn){ //

dom 레벨 2 이벤트 핸들러

를 지원하는 브라우저의 경우 addEventListener 메서드 if(dom .addEventListener){ dom.addEventListener(type,fn, false); }else if(dom.attachEvent){// addEventListener 메소드를 지원하지 않지만 attachmentEvent 메소드를 지원하는 브라우저의 경우 dom.attachEvent('on'+type,fn) }else { dom['on'+ type] = fn; } } // 바인딩 이벤트 호출 addEvent(document.getElementById('btn'),'click',function(){ console.log('I clicked Event'); });

장점 모양 모드

통일된 외부 인터페이스를 제공하고, 복잡한 로직을 통일된 방식으로 처리하며, 외부 호출을 더 쉽게 만듭니다.

모양 모드 요약

자바스크립트에서 모양 모드는 비교적 이해하기 쉬운 이런 종류를 많이 사용합니다. 브라우저 호환성 문제를 해결하려는 생각

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:


CSS 웹 페이지 정렬 오류를 처리하는 방법

CSS3 로딩 효과를 만드는 방법

CSS3에서 나비 비행 애니메이션을 만드는 방법

위 내용은 JavaScript 모양 모드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿