JavaScript 시리즈 심층 이해(22): S.O.L.I.D의 5가지 원칙의 종속성 역전 원리 DIP에 대한 자세한 설명

머리말

이 장에서 설명할 내용은 S.O.L.I.D JavaScript 언어 구현의 5가지 원칙 중 다섯 번째인 종속성 역전 원리 LSP(Dependency Inversion 원리)입니다.

영문 원문:http://freshbrerewedcode.com/derekgreer/2012/01/22/solid-javascript-the-dependent-inversion-principle/
의존성 역전 원칙

종속성 반전 원칙에 대한 설명은 다음과 같습니다.

A. 상위 수준 모듈은 하위 수준 모듈에 종속되어서는 안 됩니다.
높은 수준의 모듈은 낮은 수준의 모듈에 의존해서는 안 되며, 둘 다 추상화에 의존해야 합니다

B. 추상화는 세부 사항에 의존해서는 안 됩니다.
추상화는 세부 사항에 의존해서는 안 되며, 세부 사항은 추상화에 의존해야 합니다
종속성 역전 원칙의 가장 중요한 문제는 애플리케이션이나 프레임워크의 주요 구성 요소가 중요하지 않은 하위 수준 구성 요소 구현 세부 사항에서 분리되도록 하는 것입니다. 이렇게 하면 프로그램의 가장 중요한 부분이 변경 사항의 영향을 받지 않습니다. 낮은 수준의 구성 요소에서.

이 원칙의 첫 번째 부분은 상위 수준 모듈과 하위 수준 모듈 간의 결합 방법에 관한 것입니다. 전통적인 분할 아키텍처에서 상위 수준 모듈(프로그램의 핵심 비즈니스 로직을 캡슐화함)은 항상 일부 하위 모듈에 의존합니다. -레벨 모듈(일부 기본 사항). 종속성 역전 원칙을 적용하면 관계가 역전됩니다. 하위 수준 모듈에 의존하는 상위 수준 모듈과 달리 종속성 반전은 하위 수준 모듈이 상위 수준 모듈에 정의된 인터페이스에 종속되게 만듭니다. 예를 들어, 프로그램의 데이터를 유지하려는 경우 기존 설계에서는 핵심 모듈이 지속성 모듈의 API에 의존하는 것입니다. 종속성 반전 원칙에 따라 재구성한 후 핵심 모듈은 지속성 API 인터페이스를 정의해야 합니다. 그런 다음 지속성 구현 인스턴스는 핵심 모듈에서 정의한 이 API 인터페이스를 구현해야 합니다.

원칙의 두 번째 부분은 추상화와 세부 사항 간의 올바른 관계를 설명합니다. 이 부분을 이해하려면 C언어를 이해하는 것이 그 적용 가능성이 더 확실하기 때문에 더 도움이 됩니다.

일부 정적으로 유형이 지정된 언어와 달리 C는 인터페이스를 정의하는 언어 수준 개념을 제공하지 않습니다. 클래스 정의와 클래스 구현의 관계는 무엇입니까? C에서 클래스는 헤더 파일 형식으로 정의됩니다. 소스 파일이 구현해야 하는 클래스 멤버 메서드 및 변수입니다. 모든 변수와 비공개 메서드는 헤더 파일에 정의되어 있으므로 구현 세부 정보를 추상화하는 데 사용할 수 있습니다. 클래스를 구현하는 데에는 인터페이스라는 개념이 사용됩니다.

DIP 및 자바스크립트

JavaScript는 동적 언어이므로 분리를 위해 추상화할 필요가 없습니다. 따라서 추상화가 세부 사항에 의존하지 않아야 한다는 변경은 JavaScript에는 큰 영향을 미치지 않지만 상위 모듈이 하위 모듈에 의존해서는 안 된다는 변경은 큰 영향을 미칩니다.

정적 유형 언어의 맥락에서 종속성 역전 원칙을 논의할 때 결합 개념에는 의미론적 측면과 물리적 측면이 포함됩니다. 즉, 상위 수준 모듈이 하위 수준 모듈에 의존하는 경우 의미 체계 인터페이스뿐만 아니라 하위 수준 모듈에 정의된 물리적 인터페이스도 연결됩니다. 즉, 상위 수준 모듈은 타사 라이브러리뿐만 아니라 기본 하위 수준 모듈에서도 분리되어야 합니다.

이를 설명하기 위해 .NET 프로그램에 하위 수준 지속성 모듈에 의존하는 매우 유용한 상위 수준 모듈이 포함될 수 있다고 가정해 보겠습니다. 작성자가 지속성 API에 유사한 인터페이스를 추가해야 하는 경우 종속성 반전 원칙의 사용 여부에 관계없이 하위 수준 모듈의 새 인터페이스를 다시 구현하지 않으면 상위 수준 모듈을 다른 프로그램에서 재사용할 수 없습니다.

JavaScript에서 종속성 반전 원칙의 적용 가능성은 상위 수준 모듈과 하위 수준 모듈 간의 의미적 결합으로 제한됩니다. 예를 들어 DIP는 하위 수준에서 정의된 암시적 인터페이스를 결합하는 대신 필요에 따라 인터페이스를 추가할 수 있습니다. 모듈.

이를 이해하기 위해 다음 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

$.fn.trackMap = 기능(옵션) {
    var 기본값 = {
        /* 기본값 */
    };
    옵션 = $.extend({}, 기본값, 옵션);

    var mapOptions = {
        중심: 새로운 google.maps.LatLng(options.latitude,options.longitude),
        확대/축소: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
        지도 = 새로운 google.maps.Map(this[0], mapOptions),
        pos = 새로운 google.maps.LatLng(options.latitude,options.longitude);

    var marker = new google.maps.Marker({
        위치: 위치,
        제목: 옵션.제목,
        아이콘: options.icon
    });

marker.setMap(map);

    options.feed.update(function(위도, 경도) {
        marker.setMap(null);
        var newLatLng = new google.maps.LatLng(위도, 경도);
        marker.position = newLatLng;
        marker.setMap(map);
        map.setCenter(newLatLng);
    });

이것을 돌려주세요.
};

var updater = (function() {
// 개인 속성

    반품 {
        업데이트: 함수(콜백) {
            updateMap = 콜백;
        }
    };
})();

$("#map_canvas").trackMap({
    위도: 35.044640193770725,
    경도: -89.98193264007568,
    아이콘: 'http://bit.ly/zjnGDe',
    제목: '추적번호: 12345',
    피드: 업데이터
});

feed의 接口可能按Photo装, 也可能没가 있는 사진은 trackMap에 있습니다.需要와 Google Maps这么依赖。介于trackMap语义上耦了Google Maps API, 如果需要切换는 다른 지역의 공급자와 다릅니다.

Google 지도를 사용하여 Google 지도를 사용하세요.商provider的接口)进行语义耦合，我们还需要一个适配Google Maps API는 기본적으로 trackMap에 포함되어 있습니다.

复代码代码如下:

$.fn.trackMap = 기능(옵션) {
var 기본값 = {
/* 기본값 */
};

옵션 = $.extend({}, 기본값, 옵션);

options.provider.showMap(
이[0],
options.latitude,
옵션.경도,
옵션.아이콘,
옵션.제목);

options.feed.update(function(위도, 경도) {
options.provider.updateMap(위도, 경도);
});

이것을 돌려주세요;
};

$("#map_canvas").trackMap({
위도: 35.044640193770725,
경도: -89.98193264007568,
아이콘: 'http://bit.ly/zjnGDe',
제목: '추적번호: 12345',
피드: 업데이터,
제공자: trackMap.googleMapsProvider
});

이 버전에서는 trackMap 기능과 필수 지도 제공자 인터페이스를 재설계한 다음 구현 세부정보를 별도의 JavaScript 모듈에 독립적으로 패키징할 수 있는 별도의 googleMapsProvider 구성요소로 옮겼습니다. 다음은 내 googleMapsProvider 구현입니다.

코드 복사 코드는 다음과 같습니다.

trackMap.googleMapsProvider = (function() {
var 마커, 지도;

반환 {
showMap: 함수(요소, 위도, 경도, 아이콘, 제목) {
var mapOptions = {
중심: 새로운 google.maps.LatLng(위도, 경도),
확대/축소: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
pos = new google.maps.LatLng(위도, 경도);

지도 = 새로운 google.maps.Map(element, mapOptions);

마커 = 새로운 google.maps.Marker({
위치: 위치,
제목: 제목,
아이콘: 아이콘
});

marker.setMap(map);
},
updateMap: 함수(위도, 경도) {
            marker.setMap(null);
var newLatLng = new google.maps.LatLng(위도, 경도);
            marker.position = newLatLng;
            marker.setMap(map);
             map.setCenter(newLatLng);
}
};
})();

위와 같이 변경하면 trackMap 함수는 매우 유연해지며 Google Maps API에 의존할 필요가 없습니다. 반대로 다른 지도 제공자를 마음대로 대체할 수 있습니다. 즉, 다음과 같이 모든 지도 제공자에 적응할 수 있습니다. 프로그램의 요구 사항.

의존성 주입은 언제 하나요?

실제로 종속성 주입의 개념은 종속성 역전의 원리와 혼동되는 경우가 많습니다.

종속성 주입은 제어 반전의 특별한 형태로, 구성 요소가 종속성을 얻는 방법을 의미합니다. 종속성 주입은 종속성을 얻는 구성 요소가 아닌 구성 요소에 종속성을 제공하는 것을 의미합니다. 이는 종속성의 인스턴스를 생성하고, 팩토리를 통해 종속성을 요청하고, 서비스 로케이터 또는 구성 요소 자체의 초기화를 통해 종속성을 요청하는 것을 의미합니다. 종속성 반전 원칙과 종속성 주입은 모두 종속성에 중점을 두고 반전에 사용됩니다. 그러나 종속성 반전 원칙은 구성 요소가 종속성을 얻는 방법에 초점을 맞추지 않고 상위 수준 모듈이 하위 수준 모듈에서 분리되는 방식에만 중점을 둡니다. 어떤 의미에서 종속성 반전 원칙은 제어 반전의 또 다른 형태입니다. 여기서 반전되는 것은 어떤 모듈이 인터페이스를 정의하는지(저수준 정의에서 고급 정의까지)입니다.

요약

5가지 원칙 중 마지막 기사입니다. 이 다섯 가지 기사에서는 JavaScript에서 SOLID가 어떻게 구현되는지 다양한 관점에서 살펴보았습니다. (삼촌 주: 사실 설명이 좀 부족하지만 다른 차원에서 보면 다양한 언어에서 일반적인 원칙은 실제로 동일하다고 생각합니다.)

JavaScript 시리즈 심층 이해(22): S.O.L.I.D의 5가지 원칙의 종속성 역전 원리 DIP에 대한 자세한 설명_기본 지식