여러 파일에서 Javascript의 전역 변수

130

내 JavaScript 코드는 helpers.js라는 외부 파일에 있습니다. 이 JavaScript 코드를 호출하는 HTML 내부에서 helpers.js의 특정 함수가 호출되었는지 여부를 알아야합니다.

다음을 정의하여 전역 변수를 만들려고했습니다.

var myFunctionTag = true;

내 HTML 코드와 helpers.js 모두 글로벌 범위에서.

내 HTML 코드는 다음과 같습니다.

<html>
...
<script type='text/javascript' src='js/helpers.js'></script>    
...
<script>
  var myFunctionTag = false;
  ...
  //I try to use myFunctionTag here but it is always false, even though it has been se t to 'true' in helpers.js
</script>

내가 가능한 일을하려고합니까?

— 고로
소스

1

두 번째 태그 블록 에서 방금 false로 설정 했습니다 <script>. 방금 helpers.js 파일 앞에 var를 선언하지 않고 2 가지 접근 방식을 시도했지만 모두 작동했습니다. 답변을 드리겠습니다. 질문에 누락 된 중요한 정보가있을 것 같습니다.

— Stephen P

window.onload = function () {// 코드를 시작합니다} 가장 좋은 해결책이 되겠습니다

— 이것은 Slowpoke입니다

125

helpers.js 파일을 포함시키기 전에 변수를 선언해야합니다. include for helpers.js 위에 스크립트 태그를 작성하고 정의하십시오.

<script type='text/javascript' > 
  var myFunctionTag = false; 
</script>
<script type='text/javascript' src='js/helpers.js'></script>     
... 
<script type='text/javascript' > 
  // rest of your code, which may depend on helpers.js
</script>

— 티 반포 손
소스

9

다른 HTML에로드 된 다른 JS에서 접근하려고 할 때,이 변수가 선언되지 말한다 때문에 나를 위해 작동하지 않습니다

— ACV

16

변수는 .js파일 에서 선언 될 수 있고 HTML 파일에서 간단하게 참조 될 수 있습니다 . 내 버전 helpers.js:

var myFunctionWasCalled = false;

function doFoo()
{
    if (!myFunctionWasCalled) {
        alert("doFoo called for the very first time!");
        myFunctionWasCalled = true;
    }
    else {
        alert("doFoo called again");
    }
}

그리고 그것을 테스트 할 페이지 :

<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="helpers.js"></script>
</head>

<body>


<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>

<script type="text/javascript">doFoo();</script>

<p>Some stuff in between</p>

<script type="text/javascript">doFoo();</script>

<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>

</body>
</html>

테스트에 alert()두 가지 다른 내용이 표시되고 페이지에 기록 된 값이 두 번째로 달라집니다.

— 스티븐 피
소스

15

자, 여기, 내 작은 시험도 있습니다. 비슷한 문제가 발생하여 3 가지 상황을 테스트하기로 결정했습니다.

하나의 HTML 파일, 하나의 외부 JS 파일 ... 전혀 작동하지 않습니다-함수가 전역 변수를 통해 통신 할 수 있습니까?
두 개의 HTML 파일, 하나의 외부 JS 파일, 하나의 브라우저, 두 개의 탭 : 전역 변수를 통해 방해합니까?
두 개의 브라우저로 열린 하나의 HTML 파일이 작동하며 방해합니까?

모든 결과는 예상대로였습니다.

효과가있다. f1 () 및 f2 () 함수는 전역 var를 통해 통신합니다 (var은 HTML 파일이 아닌 외부 JS 파일에 있음).
그들은 방해하지 않습니다. 각 브라우저 탭, 각 HTML 페이지에 대해 분명하게 구별 된 JS 파일 사본이 작성되었습니다.
모든 것은 예상대로 독립적으로 작동합니다.

튜토리얼을 탐색하는 대신 시험해 보는 것이 더 쉽다는 것을 알았습니다. 결론 : HTML 페이지에 외부 JS 파일을 포함 할 때마다 페이지가 렌더링되기 전에 외부 JS의 내용이 HTML 페이지에 "복사 / 붙여 넣기"됩니다. 또는 PHP 페이지로 이동하십시오. 내가 틀렸다면 정정 해주세요. 고맙습니다.

내 예제 파일은 다음과 같습니다.

외부 JS :

var global = 0;

function f1()
{
    alert('fired: f1');
    global = 1;
    alert('global changed to 1');
}

function f2()
{
    alert('fired f2');
    alert('value of global: '+global);
}

HTML 1 :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>

HTML 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index2.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>

— 남자 이름
소스

1

HTML 1과 HTML 2는 동일합니다 (페이지 제목 제외) ... 아직 물리적으로 분리되도록 두 개의 파일을 만들었습니다.

— Martin

1

전역 변수 대신 "로컬 스토리지"를 사용해야한다고 생각합니다.

아주 오래된 브라우저에서 "로컬 스토리지"가 지원되지 않을 경우 "로컬 스토리지"의 가용성을 확인하고 사용 불가능한 경우 다른 방법을 사용하는 기존 플러그인을 사용해보십시오.

나는 http://www.jstorage.info/를 사용 했고 지금까지 그것에 만족합니다.

— paulo62
소스

1

다음과 같이 json 객체를 만들 수 있습니다.

globalVariable={example_attribute:"SomeValue"};

fileA.js에서

다음과 같이 fileB.js에서 액세스하십시오. globalVariable.example_attribute

— 파티 자노
소스

1

하나의 js 파일에서 다른 js 파일로 값을 전달하기 위해 로컬 저장소 개념을 사용할 수 있습니다.

<body>
<script src="two.js"></script>
<script src="three.js"></script>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>

Two.js 파일

function myFunction() {
var test =localStorage.name;

 alert(test);
}

Three.js 파일

localStorage.name = 1;

— 사지 스
소스

1

노드를 사용하는 경우 :

값을 선언하는 파일을 작성하십시오 values.js.

export let someValues = {
  value1: 0
}

그런 다음 사용되는 각 파일의 상단에 필요한대로 가져 오십시오 (예 :) file.js.

import { someValues } from './values'

console.log(someValues);

— 자레드 윌버
소스

-1

// 자바 스크립트 파일 1

localStorage.setItem('Data',10);

// 자바 스크립트 파일 2

var number=localStorage.getItem('Data');

html로 JS 파일을 링크하는 것을 잊지 마십시오 :)

— MrJ
소스