브리지 패턴은 추상 부분을 구현 부분과 분리하여 둘 다 독립적으로 변경 될 수 있으며 조화롭게 함께 작동 할 수 있습니다. 추상 부분과 구현 부분은 서로 영향을 미치지 않고 독립적으로 변경하여 코드의 커플 링을 줄이고 코드의 확장 성을 향상시킬 수 있습니다.
GOF의 정의에 따르면, 브리지 모드의 역할은 "두 가지가 독립적으로 변할 수 있도록 구현에서 추상화를 분리하는 것"입니다. 이 패턴은 JavaScript에서 공통적 인 이벤트 중심 프로그래밍에 큰 도움이됩니다.
브리지 모드의 가장 일반적이고 실용적인 응용 중 하나는 이벤트 리스너 콜백 기능입니다. 예 : 이벤트 리스너, 이벤트 처리 문을 콜백 함수로 캡슐화하고 구현 대신 인터페이스를 통해 프로그래밍합니다.
기본 이론
브리지 패턴 정의 : 구현 부품과는 별도로 독립적으로 변경할 수 있습니다.
브리지 모드는 주로 4 가지 역할로 구성됩니다.
(1) 초록 수업
(2) 초록 수업을 확장하십시오
(3) 클래스 인터페이스를 구현하십시오
(4) 특정 구현 클래스
JavaScript 언어의 특성에 따르면, 우리는 그것을 두 가지 역할로 단순화합니다.
(1) 초록 수업을 확장하십시오
(2) 특정 구현 클래스
브리지 모드를 이해하는 방법? 다음 예를 들어 봅시다
브리지 모드 구현
브리지 패턴의 아이디어를 이해하는 열쇠는 추상 부품을 분리하고 부품을 실현한다는 아이디어를 이해하는 것입니다. 설명 할 예제를 제시합시다
가장 쉬운 브리지 모드
실제로, 우리가 가장 자주 사용하는 각 함수는 일반적인 브리지 모드입니다. 다음과 같이 시뮬레이션합니다.
var eary = function (arr, fn) {for (var i = 0; i <arr.length; i ++) {var val = arr [i]; if (fn.call (val, i, val, arr)) {return false; }}} var arr = [1, 2, 3, 4]; 각 (arr, function (i, v) {arr [i] = v * 2;})이 예에서는 각 함수를 통해 ARR 어레이를 루프합니다. 이 예제는 매우 일반적이지만 일반적인 브리지 패턴이 포함되어 있습니다.
이 예에서, 추상 부분은 각 함수이며, 위에서 언급 한 확장 된 추상 클래스이며, 구현 부분은 FN, 즉 구체적인 구현 클래스입니다. 추상 부분과 구현 부분은 독립적으로 변경 될 수 있습니다. 이 예제는 간단하지만 브리지 모드의 일반적인 응용 프로그램입니다.
플러그인 개발의 브리지 모드
브리지 모드에 적합한 시나리오 중 하나는 구성 요소 개발입니다. 다른 행사에 적응하기 위해 구성 요소는 다른 차원에서 많은 변화를 가질 것입니다. 브리지 모드는 여기에 적용하여 구현과의 추상화를 분리하여 구성 요소의 확장 가능성을 높일 수 있습니다.
일반 메시지 알림, 오류 알림 및 각 알림의 디스플레이 메소드가 다릅니다. 이것은 일반적인 다차원 변경 시나리오입니다. 먼저 두 가지 클래스라는 두 가지 클래스를 정의합니다. 정상 메시지 팝업 창과 오류 메시지 팝업 창.
function messagedialog (animation) {this.animation = animation;} messagedialog.prototyp.show = function () {this.animation.show ();} function errordialog (animation) {this.animation = animation;} errordialog.prototype.show = function () {this.animation.show ();};이 두 클래스는 위에서 언급 한 추상 부분, 즉 확장 된 추상 클래스이며, 둘 다 멤버 애니메이션이 포함되어 있습니다.
두 개의 팝업 창이 쇼 메소드를 통해 표시되지만 애니메이션 효과는 다릅니다. 두 개의 디스플레이 효과 클래스를 다음과 같이 정의합니다.
함수 LinerAnimation () {} lineranimation.prototype.show = function () {console.log ( "it is liner");} function easeAnimation () {} easeAnimation.prototype.show = function () {console.log ( "편안함");}이 두 클래스는 특정 디스플레이 효과를 달성하는 특정 구현 클래스입니다. 그래서 우리는 그것을 어떻게 부르나요?
var message = new MessageDialog (new lineranimation ()); messag
애니메이션 효과를 추가하려면 다른 효과 클래스를 정의하고 전달할 수 있습니다.
요약
브리지 모델을 학습하는 열쇠는 추상 부분과 구현 부분 사이의 분리를 이해하여 양식에 집착하지 않고 독립적으로 변경 될 수 있도록하는 것입니다. JS 플러그인은 유연한 변경 사항을 가지고 있으며 다양한 해당 시나리오 가이 모델을 사용하여 달성하는 데 매우 적합합니다. 브리지 모드 사용에있어 가장 중요한 것은 시스템의 다양한 차원을 찾는 것입니다.
(1) 브리지 모드의 장점 :
구현에서 추상화를 분리하면 소프트웨어의 다양한 구성 요소를 독립적으로 관리하는 데 도움이됩니다.
(2) 브리지 모드의 단점 :
각 브리지 요소는 기능 호출을 추가하는 데 사용되며 응용 프로그램의 성능에 부정적인 영향을 미칩니다. 시스템의 복잡성을 증가시킵니다. 브리지 함수가 두 함수를 연결하는 데 사용되고 브리지 기능 외부 기능 중 하나가 전혀 호출되지 않으면 현재 브리지 기능이 필요하지 않습니다.
브리지 모드는 "두 가지가 독립적으로 변경되도록 구현에서 추상화를 분리합니다." 코드의 모듈성을 촉진하고 더 깨끗한 구현으로 이어지고 추상적 유연성을 향상시킬 수 있습니다. 클래스 및 기능 세트를 연결하는 데 사용할 수 있으며 권한있는 기능으로 개인 데이터에 액세스 할 수있는 수단을 제공합니다.