집 > 기사 > 웹 프론트엔드 > JavaScript 디자인 패턴 개발의 브리징 패턴에 대한 자세한 해석(고급)

JavaScript 디자인 패턴 개발의 브리징 패턴에 대한 자세한 해석(고급)

亚连원래의: 2018-05-21 14:12:021457검색

브릿지 모드는 다양한 상황에 적용 가능하며, 이벤트 콜백 함수와 인터페이스를 연결하는 것 외에도 공개 API 코드와 비공개 구현 코드를 연결하는 데에도 사용할 수 있습니다. 패턴 브릿지 패턴은

브릿지 패턴을 사용하여 추상적인 부분과 구현 부분을 분리하여 둘 다 독립적으로 변경되고 함께 조화롭게 작동할 수 있도록 합니다. 추상 부분과 구현 부분 모두 서로 영향을 주지 않고 독립적으로 변경할 수 있으므로 코드의 결합이 줄어들고 코드의 확장성이 향상됩니다.
GoF의 정의에 따르면 브리지 패턴의 역할은 "두 가지가 독립적으로 변경될 수 있도록 구현에서 추상화를 분리"하는 것입니다. 이 패턴은 Javascript에서 일반적인 이벤트 중심 프로그래밍에 큰 이점을 제공합니다.

브리지 모드의 가장 일반적이고 실용적인 응용 프로그램 중 하나는 이벤트 리스너 콜백 기능입니다. 예: 이벤트 리스너는 이벤트 처리 명령문을 콜백 함수로 캡슐화하고 구현이 아닌 인터페이스를 통해 프로그래밍을 수행합니다.

기본 이론

브릿지 패턴 정의: 추상적인 부분과 구현 부분을 분리하여 둘 다 독립적으로 변경할 수 있습니다.
브릿지 모드는 주로 4가지 역할로 구성됩니다:
(1) 추상 클래스
(2) 확장 추상 클래스
(3) 구현 클래스 인터페이스
(4) 구체적인 구현 클래스
JavaScript 언어의 특성에 따라 단순화합니다. 2개의 각 역할로:
(1) 확장 추상 클래스
(2) 구체적인 구현 클래스
브리지 모드를 이해하는 방법은 무엇입니까? 다음은 브리지 패턴 구현의 예를 들어보겠습니다

브리지 패턴의 개념을 이해하려면 추상적인 부분과 구현적인 부분을 분리하는 개념을 이해하는 것이 핵심입니다. 예를 들어 설명하겠습니다

가장 간단한 브리지 모드

실제로 우리가 가장 자주 사용하는 jQuery의 각 기능은 다음과 같이 구현을 시뮬레이션합니다.

var each = 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];
each(arr, function (i, v) {
  arr[i] = v * 2;
})

이 예에서는 각 함수 arr 배열은 이 예가 매우 일반적이지만 일반적인 브리지 모드를 포함합니다.

이 예에서 추상 부분은 위에서 언급한 확장 추상 클래스인 Each 함수이고, 구현 부분은 구체적인 구현 클래스인 fn입니다. 추상적인 부분과 구현적인 부분은 독립적으로 변경될 수 있습니다. 이 예는 간단하지만 일반적인 브리지 모드 애플리케이션입니다.

플러그인 개발의 브리지 모드

브리지 모드에 적용 가능한 시나리오는 구성 요소 개발입니다. 우리는 일반적으로 다양한 상황에 맞게 구성 요소를 개발하며 그에 따라 구성 요소는 다양한 차원으로 변경됩니다. 여기에 브리지 패턴을 적용하여 추상화와 구현을 분리하여 구성 요소의 확장성을 높일 수 있습니다. 팝업 창 플러그인을 개발한다고 가정해 보겠습니다. 팝업 창에는 일반 메시지 알림, 오류 알림, 각 알림의 표시 방법이 다릅니다. 이는 전형적인 다차원적 변화 시나리오입니다. 먼저 일반 메시지 팝업 창과 오류 메시지 팝업 창이라는 두 가지 클래스를 정의합니다.

function MessageDialog(animation) {
  this.animation = animation;
}
MessageDialog.prototype.show = function () {
  this.animation.show();
}
function ErrorDialog(animation) {
  this.animation = animation;
}
ErrorDialog.prototype.show = function () {
  this.animation.show();
}

이 두 클래스는 앞서 언급한 추상 부분, 즉 확장 추상 클래스입니다. 둘 다 멤버 애니메이션을 포함하고 있습니다.
두 개의 팝업창은 show 방식으로 표시되지만 표시되는 애니메이션 효과는 다릅니다. 우리는 두 가지 디스플레이 효과 클래스를 다음과 같이 정의합니다.

function LinerAnimation() {
}
LinerAnimation.prototype.show = function () {
  console.log("it is liner");
}
function EaseAnimation() {
}
EaseAnimation.prototype.show = function () {
  console.log("it is ease");
}

이 두 클래스는 특정 디스플레이 효과를 구현하는 특정 구현 클래스입니다. 그럼 어떻게 부르나요?

var message = new MessageDialog(new LinerAnimation());
message.show();
var error = new ErrorDialog(new EaseAnimation());
error.show();

애니메이션 효과를 추가하려면 다른 효과 클래스를 정의하여 전달할 수 있습니다.

요약

브릿지 패턴 학습의 핵심은 추상적인 부분과 구현적인 부분의 분리를 이해하여 두 부분이 형태에 얽매이지 않고 독립적으로 바뀔 수 있도록 하는 것입니다. JS 플러그인의 유연한 변경과 적용 가능한 시나리오의 변경은 이 모드를 구현하는 데 매우 적합합니다. 브리지 패턴을 사용할 때 가장 중요한 점은 시스템 변화의 다양한 차원을 식별하는 것입니다.

(1) 브리지 모드의 장점:

추상화와 구현을 분리하여 소프트웨어의 각 구성 요소를 독립적으로 관리하는 데 도움이 됩니다.
(2) 브리지 모드 단점: 브리지 요소를 사용할 때마다 함수 호출이 추가되므로 애플리케이션 성능에 부정적인 영향을 미칠 수 있습니다. 시스템 복잡성이 증가했습니다. 브리지 기능을 사용하여 두 기능을 연결하고 함수 중 하나가 브리지 기능 외부에서 호출되지 않는 경우 현재 브리지 기능은 필요하지 않습니다.
브릿지 패턴은 "추상화와 구현을 분리하여 독립적으로 변경할 수 있습니다." 코드 모듈성을 촉진하고 보다 깔끔한 구현을 가능하게 하며 추상화 유연성을 높입니다. 클래스와 함수 그룹을 함께 연결하는 데 사용할 수 있으며 권한 있는 함수를 통해 개인 데이터에 액세스하는 수단을 제공합니다. 위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

JavaScript 디자인 패턴 개발의 브리징 패턴에 대한 자세한 해석(고급)

관련 기사