2017-09-15 1 views
0

저는 최근에 ES6 모듈을 읽고 테스트 해왔고 이해의 원천으로 2ality와 MDN의 조합을 사용했습니다.자바 스크립트 모듈 (ES6)의 순환 종속성

현대적인 대규모 JS 웹 응용 프로그램에서 순환 의존성이 있으며 내 문제를 해결하는 방법에 대한 해결책을 찾지 못했습니다. 가능한 한 순환 종속성을 피해야하며 마이그레이션 후 내 다음 단계는 최대한 많이 정리해야 함을 알고 있습니다.

인 test.html :

<script type="module"> 
    import B from './B.js'; 

    console.log(B.moo()); 
</script> 

B.js :

// B.js 
import A from './A.js'; 

export default class B { 
    static moo() { 
     return A.boo(); 
    } 
} 

A.js :

// A.js 
import B from './B.js'; 

export default class A extends B { 
    static boo() { 
     return "Boo"; 
    } 
} 

에서 다음과 같이

내 테스트 케이스입니다 위, 나는 본질적으로 하 단 2 일을 진행했습니다 : Uncaught ReferenceError: B is not defined at A.js:3

나는 것을 얻을 :

  1. B.moo() 것은 A.boo()
  2. A 그러나 B

, 오류가 위의 코드 결과를 확장하는 정적 메소드를 호출 ES6 모듈이 정적으로 해결되고 오류가 발생합니다. 그러나 그들은 또한 (?) 순환 종속성을 지원합니다.

주위를 어지럽히고 난 후 작동하는 해결책을 찾았습니다. 그러나 더 좋은 방법이 있는지 궁금합니다. 여기

지금까지 내 작업 솔루션입니다 :

인 test.html :

<script type="module"> 
    import A from './A.js'; 
    import B from './B.js'; 

    console.log(B.moo()); 
</script> 

B.js :

import A from './A.js'; 

export const B = class B { 
    static moo() { 
     return A.boo(); 
    } 
} 

export {B as default}; 

A.js :

import B from './B.js'; 

export const A = class A extends B { 
    static boo() { 
     return "Boo"; 
    } 
} 

export {A as default}; 
+1

'가져 오기 A를'./A.js';*에서 b.js의 마지막 줄로 옮길 수 없었습니까? –

+0

@Jonasw 그것은 내가 생각해내는 것보다 확실히 깨끗합니다. 그러나 작동하는 것이 놀랍습니다. 나는 수입 된 모듈의 순서가 중요하지 않다는 것을 읽을 것이라고 생각했습니다. 나는 여전히 A와 B를 모두 test.html에 가져와야한다 - 나는 그것이 피하기를 희망했다. – Jarym

+0

"더 좋은 방법이 있는지 궁금합니다." - 네 디자인을 고쳐라. 기본 클래스는 결코 자손을 호출하면 안됩니다. 특정 문제에 대해 알려주십시오. – georg

답변

0

후 좀 더 검색하면이 arti를 보았습니다. cle : https://medium.com/@rohanjamin/using-scope-to-resolve-circular-dependency-dynamic-loading-issues-in-es6-2ef0244540fa - 내가 이전 Google 검색에서 왜 나타나지 않았는지 확실하지 않습니다.

오히려 가깝게 내가 함께 일하는 코드에서와 동일한 코드 배열을 닮은 및 그것은 잘 작동하는 것 같다. 나는 나무 떨림에 대한 미래의 문제가있을 것이라고 예상 할 수 있지만 Babel에게 다음 몇 개월 동안 수작업으로 리팩터링 할 수있는 순환 의존성 목록을 출력하도록했습니다.