JavaScript의 브리지 디자인 패턴하는 방법
교량 작업
이 기사에서는 JavaScript의 Bridge Design Pattern을 살펴보겠습니다. 이것은 softare 응용 프로그램에 상당한 영향을 미치는 가장 많이 사용되는 패턴 중 하나입니다. 구현 시 관심사의 분리를 쉽게 촉진하는 패턴이며 확장 가능한.
다음은 이 패턴을 나타내는 다이어그램입니다.
일반적으로 두 가지 주요 참가자들 (또는 실재호출하려는 것) 브리지 패턴과 관련된 것입니다.
첫 번째 및 맨 위 부분은 추상 레이어입니다. 이것은 단순히 클래스로 구현될 수 있습니다:
브리지 패턴에서 추상 레이어는 기본 인터페이스 메서드 및/또는 속성을 선언합니다. 그러나 구현 세부 사항은 그들의 일이 아니기 때문에 신경 쓰지 않습니다. 이 패턴의 이점을 얻을 수 있으려면 코드가 나중에 밀접하게 결합되지 않고 관리 가능한 상태로 유지되도록 이 패턴을 유지해야 합니다.
대신 추상 레이어 다리를 열다 그런 다음 패턴의 두 번째 주요 부분으로 이어집니다. 구현 레이어(종종 다음과 같이 구현됩니다. 클래스 실제로) 이 다리에 부착되어 있습니다. 고객 (또는 너) 샷을 호출합니다. "첨부된"이라는 단어는 다음과 같은 코드 용어를 이해하기 위해 사람이 읽을 수 있는 용어입니다. 참조 또는 포인터:
"브리지"는 다음과 같이 코드에서 눈에 띄게 나타날 수 있습니다.
다음과 같은 웹사이트를 방문했다면 https://dev.to 또는 https://medium.com 프로필 내에서 액세스할 수 있는 테마 기능이 있습니다. 일반적으로 있습니다 비녀장 테마 버튼. 테마는 추상 레이어입니다. 빛과 어둠 사이를 전환하는 실제 구현은 다음 위치에 있을 가능성이 가장 높습니다. 밖의 구현 계층 내의 추상 계층 위치.
실제 세계의 일부 구현은 "브리지 효과"가 실행되는 동안 "라이브"되는 방식으로 코딩됩니다. 실행 시간. 두 객체 사이에 이러한 유형의 결합/결합이 필요한 경우 브리지 패턴을 유리하게 사용할 수 있습니다.
이에 대한 좋은 예는 실시간 음성 및 비디오를 웹 애플리케이션(예: Zoom)에 추가할 수 있는 JavaScript 라이브러리인 twilio-video입니다. 이 라이브러리에서 The Room은 항상 빈 방으로 인스턴스화됩니다. 클래스는 포인터를 유지합니다. LocalParticipant(영상채팅방 참여 시 너 이다 LocalParticipant 화면에서) 하지만 LocalParticipant 실제로 실행되거나 인스턴스화되지 않습니다. 아직 실행 중인 코드에서만 가능한 방에 연결되고 구독이 완료될 때까지.
코드를 스캔하면 많은 영역에서 다리를 발견할 수 있습니다. 영상 채팅 세션은 없이 생성할 수 없습니다. Room그리고 방은 최소 두 명이 될 때까지 시작되지 않습니다. Participant에스. 하지만 Participant 로컬 오디오/비디오를 시작할 때까지 스트리밍을 시작할 수 없습니다. MediaTrack에스. 이러한 클래스는 하향식 계층 구조에서 함께 작동합니다. 여러 클래스가 함께 결합되기 시작하면 브리지 패턴을 고려하기에 좋은 시기이기도 합니다.
브리지 패턴이 유용한 또 다른 시나리오는 일부 개체의 구현을 여러 개체와 공유하려는 경우입니다.
예를 들어 MediaStreamTrack 클래스는 스트림에 대한 미디어 트랙을 나타냅니다. "연결"하는 가장 일반적인 두 가지 구현은 오디오 및 비디오 트랙입니다.
또한 구현 세부 정보는 일반적으로 파생 클래스 내에 숨겨져 있습니다.
문제와 그것이 테이블에 가져다주는 솔루션에 대한 좋은 느낌을 얻기 위해 Bridge Pattern의 우리 자신의 변형을 구현해 봅시다.
제네릭으로 시작하자 Thing 무엇이든 표현할 수 있는 클래스:
확장하는 고급 추상화 클래스를 만들 수 있습니다. Thing. 우리는 이것을 부를 수 있습니다 LivingThing 라는 메서드를 정의합니다. eat. 현실 세계의 모든 생명체는 살기 위해 먹을 수 있는 능력을 가지고 태어났습니다. 코드에서 이를 모방할 수 있습니다. 이것은 상위 수준 추상 레이어에 유지됩니다.
우리는 우리가 다리를 열었음을 알 수 있습니다 Mouth 수업. 다음으로 해당 클래스를 정의해 보겠습니다.
지금 고려해야 할 사항(말장난 없음)은 Mouth 입과 음식 사이의 통신을 위한 로직을 작성하는 구현 레이어가 될 것입니다.
이 구현은 전적으로 다음을 기반으로 합니다. Mouth. 그만큼 LivingThing 이러한 구현 세부 사항에 신경 쓰지 않고 대신 이 역할을 구현 클래스에 전적으로 위임합니다. Mouth.
잠시 멈추고 이 부분에 대해 이야기합시다. 만약에 LivingThing 구현에 관여하지 않습니다. 이것은 실제로 우리에게 유용한 개념입니다. 우리가 다른 것을 만들 수 있다면 LivingThing파생된 구현을 위한 인터페이스만 제공하면 되므로 다른 시나리오에 대해 더 넓은 범위의 클래스를 만들 수 있습니다.
MMORPG 게임에서 우리는 LivingThing 그리고 그들이 모두 있는 곳에서 그것들을 더 많이 만드십시오. 상속하다 ㅏ 바늘 ㅏ mouth 자동으로:
브리지 패턴은 개발자가 플랫폼 간 애플리케이션을 구축할 수 있도록 하는 것으로 잘 알려져 있습니다. 우리는 이미 우리의 예에서 이 기능을 볼 수 있습니다. 우리는 이것을 재사용하여 동일한 MMORPG 게임을 만들 수 있습니다. LivingThing 새로운 코드베이스에서. 다음과 같은 구현 계층만 다시 구현하면 됩니다. Mouth 다른 플랫폼에 대한 바인딩을 만들기 위해.
우리는 게임에 국한되지 않습니다. 우리 이후로 LivingThing 일반적이며 모든 것에 의미가 있습니다. 움직임 IoT 장치 프로그램으로 로봇과 같이 완전히 다른 것을 만들고 섭식 행동을 시뮬레이션하는 데 사용할 수 있습니다. LivingThing.
가상 MMORPG 게임으로 돌아가서 다리를 사용하여 더 많은 다리를 만들 수 있습니다. MMORPG에는 일반적으로 사용자가 설정을 편집할 수 있는 프로필 페이지가 있습니다.
이것 Profile 자체적으로 Bridge Design Pattern을 활용하여 프로필 API처럼 작동하도록 하는 조각 모음을 정의할 수 있습니다.
내 다른 기사를 읽은 경우 어댑터 또는 전략 패턴과 유사하게 느껴질 수 있습니다.
그러나 다른 문제를 해결하는 뚜렷한 차이점이 있습니다.
어댑터 패턴에서 해결하는 문제는 코드(또는 이전의 런타임에) 어댑터를 먼저 구성한 다음 나머지부터 즉시 시작합니다.
axios 모의 어댑터
이전 스니펫과 비교해 보세요. twilio-video 그리고 당신은 즉시 그 차이를 느낄 것입니다.
'Coding' 카테고리의 다른 글
| Python으로 웹 스크래핑 지역 타겟팅에서 프록시를 사용하는 방법 (0) | 2022.05.07 |
|---|---|
| 시니어 개발자가 되기 위해 내가 한 가장 중요한 일 (0) | 2022.05.02 |
| 동형 암호화에 대해 알아보자 (0) | 2022.04.28 |
| Linux chmod 및 chown – Linux에서 파일 권한 및 소유권을 변경하는 방법 (0) | 2022.04.28 |
| CSS 변수 정의 – CSS 변수란 무엇이며 사용하는 방법에 대해 (0) | 2022.04.26 |
댓글