2016-11-23 1 views
0

localStorage를 기반으로 한 빠른 게시 - 서브 시스템을 만들려고했습니다. 이 과정을 통해 ES6 모듈의 작동 방식에 대한 나의 이해가 불완전하다는 것을 알게되었습니다.ES6 모듈 - 전역 변수

const subscribers = {}; 
export default { 
    subscribe (key, callback) { 
    if (!Array.isArray(subscribers[key])) { 
     subscribers[key] = [callback]; 
    } else { 
     subscribers[key] = [...subscribers[key], callback]; 
    } 
    }, 
    publish (key, value) { 
    window.localStorage[key] = value; 
    subscribers[key].forEach(cb => cb(value)); 
    } 
}; 

localStorage의 키로 구독/게시하고 싶을 때마다이 모듈을 가져 왔습니다. 문제는 모듈 객체를 가져올 때마다 구독자 객체가 다시 초기화된다는 점입니다.

창을 오염시키지 않으면 서 구독자 개체를 유지할 수있는 방법이 있습니까? import 문은 파일을 처음 가져올 때만 한 번만 실행한다고 가정했습니다.

감사합니다.

+0

현재 브라우저가 모듈을 지원하지 않으므로 어떤 포장 시스템을 사용하고 있습니까? –

+0

Webpack + Babel + ES6 모듈 –

+0

사용 방법을 보여줄 수 있습니까? 모든 가져 오기는 동일한 모듈 상태를 공유해야합니다 (바벨 노드에서 테스트 할 때도 마찬가지입니다). –

답변

1

이것은 제 마지막 부분의 감독입니다.

이 모듈을 가져올 때 대문자가 잘못 입력되었으므로 잘못된 파일 이름을 지정했습니다.

대소 문자를 무시하면 이름이 같은 다른 모듈이 있습니다. 이 은 다른 대소 문자 의미로 파일 시스템에서 컴파일 할 때 예기치 않은 동작을 일으킬 수 있습니다. 여러 모듈이 예상되는 경우 모듈의 이름을 바꾸거나 하나의 모듈이 예상되는 경우 동등한 케이싱을 사용하십시오.

이로 인해 모듈이 다시 초기화되었습니다.

내가 잘못했다면 문제를 해결해주세요.하지만 모듈을 처음으로 가져온 경우 전체 애플리케이션에 대해 한 번만 실행됩니다.

감사합니다.