Biến toàn cục trong Javascript trên nhiều tệp

130

Một bó mã JavaScript của tôi nằm trong một tệp bên ngoài có tên là helpers.js. Trong HTML gọi mã JavaScript này, tôi thấy mình cần biết liệu một hàm nhất định từ helpers.js đã được gọi chưa.

Tôi đã cố gắng tạo một biến toàn cục bằng cách xác định:

var myFunctionTag = true;

Trong phạm vi toàn cầu cả trong mã HTML của tôi và trong helpers.js.

Đây là mã html của tôi trông như thế nào:

<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>

Là những gì tôi đang cố gắng để làm thậm chí khả thi?

— Goro
nguồn

1

Chà, bạn vừa đặt nó thành false trong <script>khối thẻ thứ hai . Tôi chỉ thử 2 cách tiếp cận khác nhau (không khai báo var trước tệp helpers.js) và cả hai đều hoạt động. Tôi sẽ đăng câu trả lời, nhưng dường như phải có một số thông tin chính bị thiếu trong câu hỏi của bạn.

— Stephen P

window.onload = function () {// Bắt đầu mã của bạn} Liệu giải pháp tốt nhất - Và đây là Slowpoke speak :)

— Lập trình

125

Bạn cần khai báo biến trước khi bạn bao gồm tệp helpers.js. Chỉ cần tạo một thẻ script phía trên bao gồm cho helpers.js và xác định nó ở đó.

<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>

— tvanfosson
nguồn

9

không hoạt động với tôi vì khi cố gắng truy cập từ một js khác được tải trong một html khác, nó nói rằng biến không được khai báo

— ACV

16

Biến có thể được khai báo trong .jstệp và được tham chiếu đơn giản trong tệp HTML. Phiên bản của tôi về helpers.js:

var myFunctionWasCalled = false;

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

Và một trang để kiểm tra nó:

<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>

Bạn sẽ thấy bài kiểm tra alert()sẽ hiển thị hai điều khác nhau và giá trị được ghi vào trang sẽ khác lần thứ hai.

— Stephen P
nguồn

15

OK, các bạn, đây cũng là bài kiểm tra nhỏ của tôi. Tôi gặp vấn đề tương tự, vì vậy tôi quyết định thử nghiệm 3 tình huống:

Một tệp HTML, một tệp JS bên ngoài ... hoàn toàn có hoạt động - các chức năng có thể giao tiếp qua một var toàn cầu không?
Hai tệp HTML, một tệp JS bên ngoài, một trình duyệt, hai tab: chúng có can thiệp thông qua var toàn cầu không?
Một tệp HTML, được mở bởi 2 trình duyệt, nó có hoạt động không và chúng có can thiệp không?

Tất cả các kết quả đã được như mong đợi.

Nó hoạt động. Các hàm F1 () và f2 () giao tiếp qua var toàn cầu (var nằm trong tệp JS bên ngoài, không phải trong tệp HTML).
Họ không can thiệp. Rõ ràng các bản sao riêng biệt của tệp JS đã được tạo cho từng tab trình duyệt, từng trang HTML.
Tất cả hoạt động độc lập, như mong đợi.

Thay vì duyệt hướng dẫn, tôi thấy thử nó dễ hơn, vì vậy tôi đã làm. Kết luận của tôi: bất cứ khi nào bạn đưa tệp JS bên ngoài vào trang HTML của mình, nội dung của JS bên ngoài sẽ được "sao chép / dán" vào trang HTML của bạn trước khi trang được hiển thị. Hoặc vào trang PHP của bạn nếu bạn muốn. Xin hãy sửa tôi nếu tôi sai ở đây. Thanx.

Các tập tin ví dụ của tôi làm theo:

BÊN NGOÀI:

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>

— Martin
nguồn

1

HTML 1 và HTML 2 giống hệt nhau (ngoại trừ tiêu đề trang) ... tuy nhiên, tôi đã tạo hai tệp, chỉ để chúng tách biệt về mặt vật lý.

— Martin

1

Tôi nghĩ bạn nên sử dụng "lưu trữ cục bộ" thay vì các biến toàn cục.

Nếu bạn lo ngại rằng "bộ nhớ cục bộ" có thể không được hỗ trợ trong các trình duyệt cũ, hãy xem xét sử dụng một trình cắm hiện có để kiểm tra tính khả dụng của "bộ nhớ cục bộ" và sử dụng các phương pháp khác nếu không có sẵn.

Tôi đã sử dụng http: //www.jst Storage.info/ và tôi hài lòng với nó cho đến nay.

— paulo62
nguồn

1

Bạn có thể tạo một đối tượng json như:

globalVariable={example_attribute:"SomeValue"};

trong fileA.js

Và truy cập nó từ fileB.js như: globalVariable.example_attribute

— partizanos
nguồn

1

Xin chào để chuyển các giá trị từ một tệp js sang một tệp js khác, chúng ta có thể sử dụng khái niệm lưu trữ cục bộ

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

Tệp Two.js

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

 alert(test);
}

Tệp Three.js

localStorage.name = 1;

— Kim cương
nguồn

1

Nếu bạn đang sử dụng nút:

Tạo tập tin để khai báo giá trị, giả sử nó được gọi là values.js:

export let someValues = {
  value1: 0
}

Sau đó, chỉ cần nhập nó khi cần ở đầu mỗi tệp được sử dụng trong (ví dụ file.js:)

import { someValues } from './values'

console.log(someValues);

— Jared Wilber
nguồn

-1

// Tệp Javascript 1

localStorage.setItem('Data',10);

// Tệp Javascript 2

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

Đừng quên liên kết các tệp JS của bạn trong html :)

— MrJ
nguồn