ตัวแปรส่วนกลางใน Javascript ในหลายไฟล์

130

รหัส JavaScript ของฉันจำนวนมากอยู่ในไฟล์ภายนอกชื่อ helpers.js ภายใน HTML ที่เรียกรหัส JavaScript นี้ฉันพบว่าตัวเองต้องการทราบว่ามีการเรียกใช้ฟังก์ชันบางอย่างจาก 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>

สิ่งที่ฉันพยายามทำให้เป็นไปได้หรือไม่

— Goro
แหล่งที่มา

1

คุณเพิ่งตั้งค่าเป็นเท็จใน<script>บล็อกแท็กที่สอง ฉันเพิ่งลอง 2 วิธีที่แตกต่างกัน (โดยไม่ต้องประกาศ var ก่อนไฟล์ helpers.js) และทั้งคู่ก็ได้ผล ฉันจะโพสต์คำตอบ แต่ดูเหมือนว่าจะต้องมีข้อมูลสำคัญบางอย่างที่ขาดหายไปในคำถามของคุณ

— Stephen P

window.onload = function () {// Start Your Code} จะเป็นทางออกที่ดีที่สุด - และนี่คือการพูดแบบ Slowpoke :)

— Schoening

125

คุณต้องประกาศตัวแปรก่อนที่จะรวมไฟล์ helpers.js เพียงสร้างแท็กสคริปต์ด้านบนรวมสำหรับ 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>

— tvanfosson
แหล่งที่มา

10

ไม่ได้ผลสำหรับฉันเพราะเมื่อพยายามเข้าถึงจาก js อื่นที่โหลดใน html อื่นมันบอกว่าตัวแปรไม่ได้รับการประกาศ

— 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 ภายนอกหนึ่งไฟล์ ... ใช้งานได้หรือไม่ - ฟังก์ชันสามารถสื่อสารผ่าน global var ได้หรือไม่
ไฟล์ HTML สองไฟล์ไฟล์ JS ภายนอกหนึ่งไฟล์เบราว์เซอร์หนึ่งแท็บสองแท็บไฟล์เหล่านี้จะรบกวนผ่าน global var หรือไม่
ไฟล์ HTML หนึ่งไฟล์เปิดโดย 2 เบราว์เซอร์จะใช้งานได้หรือไม่และจะรบกวนหรือไม่

ผลลัพธ์ทั้งหมดเป็นไปตามที่คาดไว้

มันได้ผล. ฟังก์ชั่น f1 () และ f2 () สื่อสารผ่าน global var (var อยู่ในไฟล์ JS ภายนอกไม่ใช่ในไฟล์ HTML)
พวกเขาไม่ยุ่งเกี่ยว เห็นได้ชัดว่ามีการสร้างสำเนาไฟล์ JS ที่แตกต่างกันสำหรับแต่ละแท็บเบราว์เซอร์แต่ละหน้า HTML
ทั้งหมดทำงานอย่างอิสระตามที่คาดไว้

แทนที่จะเรียกดูบทช่วยสอนฉันพบว่ามันง่ายกว่าที่จะลองใช้ฉันจึงทำ ข้อสรุปของฉัน: เมื่อใดก็ตามที่คุณรวมไฟล์ JS ภายนอกไว้ในหน้า HTML ของคุณเนื้อหาของ JS ภายนอกจะ "คัดลอก / วาง" ลงในหน้า HTML ของคุณก่อนที่หน้าจะแสดงผล หรือในหน้า PHP ของคุณถ้าคุณต้องการ โปรดแก้ไขฉันถ้าฉันผิดที่นี่Thanx

ไฟล์ตัวอย่างของฉันมีดังต่อไปนี้:

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

— partizanos
แหล่งที่มา

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;

— Sajith
แหล่งที่มา

1

หากคุณใช้โหนด:

สร้างไฟล์เพื่อประกาศค่าบอกว่าเรียกว่าvalues.js:

export let someValues = {
  value1: 0
}

จากนั้นนำเข้าตามต้องการที่ด้านบนของแต่ละไฟล์ที่ใช้ใน (เช่นfile.js):

import { someValues } from './values'

console.log(someValues);

— จาเร็ดวิลเบอร์
แหล่งที่มา

-1

// ไฟล์ Javascript 1

localStorage.setItem('Data',10);

// ไฟล์ Javascript 2

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

อย่าลืมเชื่อมโยงไฟล์ JS ของคุณเป็น html :)

— MRJ
แหล่งที่มา