모듈에서 변수를 다시 선언하거나 별도의 모듈에서 참조하는 것이 더 좋습니까?

Question

좋아요, "Revealing Module Pattern"에서 설정 한 웹 앱 (Javascript)이 있고 똑같은 데이터를 사용하는 두 개의 모듈이 있다고 가정 해 봅시다.

예 :

(.이 두 가지 기능은 별도의 모듈에 있어야 할 이유가 척 수 있습니다 그냥 예를 들어 결국입니다)

var modOne = (function() { 
    var foos = document.getElementsByClassName("foo"); 

    var hideFoos function() { 
    var i; 
    for (i=0; i < foos.length ; i++) { 
     foos[i].style.visibility = "hidden"; 
    } 
    } 

    return { 
    hideFoos: hideFoos 
    }; 
})(); 

var modTwo = (function() { 
    var foos = document.getElementsByClassName("foo"); 

    var showFoos function() { 
    var i; 
    for (i=0; i < foos.length ; i++) { 
     foos[i].style.visibility = "visible"; 
    } 
    } 

    return { 
    showFoos: showFoos 
    }; 
})(); 

당신이 동일한 변수를 볼 수 있듯이 (var foos)는 각 모듈에서 선언됩니다. 이것은 중복 된 것처럼 보이지만 다른 변수에서 변수를 참조하면 한 모듈이 다른 변수에 의존하게됩니다. 그래서 당신도 그들을 결합 할 수 있습니다. 세 번째 옵션은 공유 변수를 글로벌 변수로 생성하는 것입니다.이 변수는 모듈을 갖는 목적을 상실합니다.

그래서이 세 가지 옵션에 따라 각 모듈에서 변수를 따로 정의하는 것이 최선의 선택이라고 말할 수 있습니다.

이 정보가 맞습니까?

Answer 1

여기에 모두 맞는 답변이 하나도 없습니다. 모든 접근 방식에는 이점이 있습니다.

예를 들어, modOne과 modTwo는 모두 DOM 요소 (자식 노드를 표시하거나 숨기는 메소드 있음)를 사용하는 것으로 보입니다. 두 모듈 모두 자신이 작업하는 DOM 요소와 매우 관련이 있습니다. 즉, 모듈을 다시 사용하여 다른 요소를 처리 할 수 ​​없습니다. 이런 식으로 생각할 때, 그들이 행동하는 요소 (모듈이 작동하는 데이터)는 외부 소스에 의해 제공되어야하므로 각 모듈에 전달되는 전역 변수를 갖는 것이 더 낫습니다. 더 나은 것은 모듈에 필요한 데이터를 전달하는 데이터 서비스 모듈입니다.

이 경로에서 계속 진행하면 간단한 쇼/하이덴더가 전체 시스템을 철저히 이해하지 않으면 서 태클을하기에 너무 복잡한 monstruous 다층 아키텍처로 변하는 것을 확인할 수 있습니다.

그 점을 염두에두고 대답하면 코드가 무엇이든지 명확하게 만들어야합니다. 복잡한 응용 프로그램은 복잡한 솔루션을 필요로하므로 간단한 응용 프로그램은 간단한 솔루션을 가져야합니다.