JavaScript 모양 모드

이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!