.js 파일에서 전역 변수를 선언하는 방법

Question 1

모든 .js파일에 필요한 몇 가지 전역 변수가 필요 합니다.

예를 들어 다음 4 개의 파일을 고려하십시오.

global.js
js1.js
js2.js
js3.js

위의 4 개 파일을 모두 HTML 문서로로드하는 것을 고려 global.js하여 3 개의 전역 변수를 선언 하고 다른 3 개의 .js파일 에서 액세스 할 수있는 방법이 있습니까?

이것이 가능하거나이를 달성하기위한 해결 방법이 있는지 누군가 제게 말해 줄 수 있습니까?

Question 2

함수 범위 밖에서 global.js에서 변수를 정의하십시오.

// global.js
var global1 = "I'm a global!";
var global2 = "So am I!";

// other js-file
function testGlobal () {
    alert(global1);
}

이것이 작동하는지 확인하려면 해당 파일에 정의 된 변수에 액세스하기 전에 global.js를 포함 / 링크해야합니다.

<html>
    <head>
        <!-- Include global.js first -->
        <script src="/YOUR_PATH/global.js" type="text/javascript"></script>
        <!-- Now we can reference variables, objects, functions etc. 
             defined in global.js -->
        <script src="/YOUR_PATH/otherJsFile.js" type="text/javascript"></script>
    </head>
    [...]
</html>

물론 js 파일로드로 인해 초기 페이지로드가 중단되지 않도록하려면 닫기 <body>-태그 바로 앞에 스크립트 태그를 연결할 수 있습니다.

Question 3

권장되는 접근 방식은 다음과 같습니다.

window.greeting = "Hello World!"

그런 다음 모든 기능 내에서 액세스 할 수 있습니다.

function foo() {

   alert(greeting); // Hello World!
   alert(window["greeting"]); // Hello World!
   alert(window.greeting); // Hello World! (recommended)

}

이 방법은 두 가지 이유로 선호됩니다.

의도는 명시 적입니다. var키워드를 사용 vars하면 로컬로 또는 그 반대로 의도 된 글로벌 선언으로 쉽게 이어질 수 있습니다 . 이러한 종류의 변수 범위 지정은 많은 Javascript 개발자에게 혼란스러운 점입니다. 따라서 일반적인 규칙으로 모든 변수 선언 앞에 키워드 var또는 접두사 가 있는지 확인합니다 window.
이러한 방식으로 변수를 읽기 위해이 구문을 표준화합니다. 즉, 로컬 범위 var가 전역을 방해 하지 var않거나 그 반대의 경우도 마찬가지입니다. 예를 들어 여기서 일어나는 일은 모호합니다.

 greeting = "Aloha";

 function foo() {
     greeting = "Hello"; // overrides global!
 }

 function bar(greeting) {
   alert(greeting);
 }

 foo();
 bar("Howdy"); // does it alert "Hello" or "Howdy" ?

그러나 이것은 훨씬 깨끗하고 오류 발생 가능성이 적습니다 (모든 변수 범위 지정 규칙을 기억할 필요는 없습니다).

 function foo() {
     window.greeting = "Hello";
 }

 function bar(greeting) {
   alert(greeting);
 }

 foo();
 bar("Howdy"); // alerts "Howdy"

Question 4

시도해 보셨습니까?

당신이 할 경우 :

var HI = 'Hello World';

에서 global.js. 그리고 다음을 수행하십시오.

alert(HI);

에서 js1.js그것을 잘 그것을 알려줍니다. global.js나머지 부분을 HTML 문서에 포함 하기 만하면됩니다 .

유일한 문제는 창 범위 (함수 내부가 아님)에서 선언해야한다는 것입니다.

당신은 방금 닉스 수있는 var부분을 그들에게 그런 식으로 만들지 만, 그것은 좋은 방법이 아니다.

Question 5

위에서 언급했듯이 스크립트 파일에서 최상위 범위를 사용하는 데 문제가 있습니다. 여기에 또 다른 문제가 있습니다. 스크립트 파일은 일부 런타임 환경에서 전역 컨텍스트가 아닌 컨텍스트에서 실행될 수 있습니다.

글로벌을 window직접 할당하는 것이 제안되었습니다 . 그러나 그것은 또한 런타임 의존적 이며 Node 등에서는 작동하지 않습니다. 이식 가능한 전역 변수 관리에는 약간의 신중한 고려와 추가 노력이 필요하다는 것을 보여줍니다. 아마도 그들은 미래의 ECMS 버전에서 그것을 고칠 것입니다!

지금은 모든 런타임 환경에 대해 적절한 글로벌 관리를 지원하기 위해 다음과 같은 것을 권장합니다.

/**
 * Exports the given object into the global context.
 */
var exportGlobal = function(name, object) {
    if (typeof(global) !== "undefined")  {
        // Node.js
        global[name] = object;
    }
    else if (typeof(window) !== "undefined") {
        // JS with GUI (usually browser)
        window[name] = object;
    }
    else {
        throw new Error("Unkown run-time environment. Currently only browsers and Node.js are supported.");
    }
};


// export exportGlobal itself
exportGlobal("exportGlobal", exportGlobal);

// create a new global namespace
exportGlobal("someothernamespace", {});

좀 더 많은 타이핑이지만 글로벌 변수 관리를 미래 지향적으로 만듭니다.

면책 조항 :이 아이디어의 일부는 이전 버전의 stacktrace.js를 볼 때 나에게 왔습니다 .

나는 또한 Webpack이나 다른 도구를 사용하여 런타임 환경에 대한 더 안정적이고 덜 해킹적인 탐지를 얻을 수 있다고 생각합니다.

Question 6

예, 액세스 할 수 있습니다. '공용 공간'(모든 기능 외부)에서 다음과 같이 선언해야합니다.

var globalvar1 = 'value';

나중에 다른 파일에서도 액세스 할 수 있습니다.