JavaScript 101의 의존 주입

제 글과'현대 웹 개발의 3D'를 보여드리면서 저는 현대 자바스크립트 프레임워크에서 성공하는 관건적인 요소를 설명했습니다.

Wait, you didn't see my presentation? That's OK ... when you have just under an hour of time to invest, I believe you will receive value by watching it here.

의존 주입이 그 중의 하나다.나는 개발자들이 그것이 무엇인지, 어떻게 일을 하는지, 그리고 왜 그것이 필요한지 이해하기 어렵다는 것을 발견했다.
나는 실천에서 배웠는데, 간단한 코드 예시가 해석에 도움이 되기를 바란다.우선, 나는 자동차를 조립하고 운행하기 위해 아주 작은 프로그램을 만들었다.종속성은 다음과 같습니다.

Car
|
|--Engine
|  |  
|  |--Pistons
|
|--Wheels

부품을 어셈블리 간의 종속성으로 간주합니다.이 곳에서 코드를 보고 상호작용으로 실행할 수 있습니다: https://jsfiddle.net/jeremylikness/gzt6o1L5/.

출력은 당신이 원하는 것이어야 합니다

너무 좋아요!지금까지 우리는 이미 일할 수 있는 물건들이 있었고, 심지어는 특이한 틀을 설치할 필요조차 없었다.그렇다면 문제는 무엇입니까

코드는 작동할 수 있지만 매우 간단합니다.이 문제들은 더욱 큰 응용에서 작용을 발휘한다.의존 관계를 가진 수백 개의 구성 요소를 가지고 있다고 상상해 보세요...이제

1. 이 부품들은 직접 서로 의존한다.모든 부품 (바퀴, 피스톤 등) 을 자신의 파일로 분해하려고 한다면, 모든 부품이 정확한 순서대로 배열되어야 정상적으로 작동할 수 있습니다.피스톤을 정의하기 전에 엔진을 만들거나 포함하면 코드가 실패합니다.
2. 구성 요소를 병행 개발할 수 없습니다.긴밀한 결합은 한 개발자가 엔진에서 일할 수 없고, 다른 개발자가 피스톤에서 일할 수 없다는 것을 의미한다.(따라서 엔진에서 일할 때 빈 대상을 피스톤의 차지 문자로 쉽게 사용할 수 없다).
3. 구성 요소는 자신들의 의존항을 만들기 때문에 의존항이 없으면 효과적으로 테스트할 수 없습니다.너는 쉽게 피스톤을 테스트 피스톤으로 바꿀 수 없다웹 응용 프로그램에서, 이것은 단원 테스트에 매우 중요하다.예를 들어 테스트에서 실제 HTTP 요청을 보내는 대신 웹 API 호출을 시뮬레이션할 수 있기를 원합니다.

조금만 재구성하면 세 번째 문제를 해결할 수 있습니다.당신은 반전을 제어하는 패턴이라고 들어 본 적이 있습니까?이것은 간단한 모델이다.현재, 구성 요소는 자신들의 의존 관계를 제어하고 있다.구성 요소가 더 이상 제어되지 않도록 그것을 뒤집어 놓자.다른 곳에서 의존항을 만들고 주입할 것입니다.제어 반전은 직접적인 의존을 없애고 의존 주입은 실례로 구성 요소에 전달하는 방식입니다

간단하게 보기 위해서 변경된 코드만 포함할 것입니다.이 의존항들은 직접 의존항을 만드는 것이 아니라 구조 함수에 전달됩니다.이 곳에서 전체 응용 프로그램을 보고 상호작용으로 실행할 수 있습니다: https://jsfiddle.net/jeremylikness/8r35saz6/

현재 우리는 에서 반전 제어 모드를 적용하고 간단한 의존 주입을 하고 있습니다.그러나, 우리는 방대한 코드 라이브러리에 여전히 문제가 존재한다.이전 문제(#1 및 #2)가 해결되지 않았습니다.객체를 올바른 순서로 작성해야 합니다.그것들을 포함하거나 만들면 실패할 수 있습니다.이것은 병행 개발이나 무질서한 개발을 복잡하게 만든다.팀의 새로운 개발자는 모든 의존항을 이해해야만 자신의 코드에서 구성 요소를 실례화할 수 있습니다

다시 한 번 말하지만, 우리가 무엇을 할 수 있겠는가

솔루션은 IoC 용기를 도입하여 의존 주입을 관리하는 것입니다.용기는 여러 종류가 있지만, 보통 이렇게 작동합니다:

• 용기의 전체적인 실례를 얻을 수 있습니다
• 컨테이너
에 구성 요소 등록
• 용기에서 구성 요소를 요청하면 의존 관계를 처리합니다

우선, 나는 내가 쓴 jsInject라는 아주 작은 라이브러리를 포함할 것이다.이것은 내가 쓴 라이브러리로, 전문적으로 학습과 이해 의존 주입에 쓰인다.너는 여기서 읽을 수 있다. Dependency Injection Explained via JavaScript. 그러나 나는 네가 이 문장 이후를 기다릴 것을 건의한다.DI와 IoC에 익숙해지면 용기를 어떻게 만드는지 더 깊이 이해할 수 있습니다.이 라이브러리는 많은 일을 할 수 있지만, 간단하게 말하면, 탭과 구조 함수를 전달해서 구성 요소를 등록할 수 있다.의존항이 있다면, 이 의존항을 포함하는 그룹을 전달합니다.다음은 내가 Pistons류를 어떻게 정의하는가이다.구성 요소를 등록한 코드 줄을 제외하고는 이 코드는 이전 교체와 거의 100% 같습니다

이 클래스의 실례를 가져오려면 직접 만들지 말고'요청'용기를 사용하십시오:

var pistons = $jsInject.get("pistons");

간단해!중요한 것은 당신이 지금 병행하고 독립적으로 개발할 수 있다는 것을 이해하는 것이다.예를 들어, 정의는 Engine입니다.피스톤에 따라 달라지지만, 명시적인 인용은 이루어지지 않으며, 탭만 인용합니다

사실 내가 만든 예시에서 나는 그들의 의존항에 앞서 Car와 Engine류의 를 정의했다. 이것은 전혀 문제없다!축소 코드의 하단에 포함된 전체 예제$$jsInject를 보실 수 있습니다.https://jsfiddle.net/jeremylikness/8y0ro5gx/

main.js
--engine.js 
--pistons.js

test.js
--engine.js
--testPistons.js