ฉันสามารถเข้าถึงตัวแปรจากไฟล์อื่นได้หรือไม่?

เป็นไปได้หรือไม่ที่จะใช้ตัวแปรในไฟล์ที่เรียกว่าfirst.jsภายในไฟล์อื่นที่เรียกว่าsecond.js?

first.jscolorcodesมีตัวแปรที่เรียกว่า

ดังที่ Fermin กล่าวว่าตัวแปรในขอบเขตทั่วโลกควรจะสามารถเข้าถึงได้โดยสคริปต์ทั้งหมดที่โหลดหลังจากมีการประกาศ คุณสามารถใช้คุณสมบัติของwindowหรือ (ในขอบเขตทั่วโลก) thisเพื่อให้ได้ผลเหมือนกัน

// first.js
var colorCodes = {

  back  : "#fff",
  front : "#888",
  side  : "#369"

};

... ในไฟล์อื่น ...

// second.js
alert (colorCodes.back); // alerts `#fff`

... ในไฟล์ html ของคุณ ...

<script type="text/javascript" src="first.js"></script> 
<script type="text/javascript" src="second.js"></script> 

คุณสามารถส่งออกตัวแปรจากไฟล์แรกที่ใช้การส่งออก

//first.js
const colorCode = {
    black: "#000",
    white: "#fff"
};
export { colorCode };

จากนั้นนำเข้าตัวแปรในแฟ้มที่สองโดยใช้การนำเข้า

//second.js
import { colorCode } from './first.js'

ส่งออก - MDN

ฉันชอบคำตอบที่กล่าวไว้ข้างต้นแต่ก็ไม่ได้ผลกับฉัน

เพราะฉันเป็นdeclaringตัวแปรเหล่านี้insideJQuery$( document ).ready()

ดังนั้นให้แน่ใจว่าคุณประกาศตัวแปรภายใน<script>แท็กไม่ใช่ที่อื่น

สิ่งนี้ควรใช้งานได้ - กำหนดตัวแปรโกลบอลใน firstfile และเข้าถึงจาก secondfile:

<script src="/firstfile.js"></script>
<script src="/secondfile.js"></script>

firstfile.js:

var colors = {
   text:'#000000',
   background:'#aaaaaa',
   something_else:'blue'
};

secondfile.js:

do_something_with(colors.background);

โปรดทราบว่าลำดับที่คุณโหลดไฟล์สคริปต์นั้นมีความสำคัญสำหรับเบราว์เซอร์บางตัว (แน่นอนว่า IE6 อาจจะเป็นอื่น ๆ )

การใช้ Node.js คุณสามารถส่งออกตัวแปรผ่านโมดูล

//first.js
const colorCode = {
    black: "#000",
    white: "#fff"
};
module.exports = { colorCode };

จากนั้นนำเข้าโมดูล / ตัวแปรในไฟล์ที่สองโดยใช้ต้องใช้

//second.js
const { colorCode } = require('./first.js')

คุณสามารถใช้importและexportaproach จาก ES6 โดยใช้ Webpack / Babel แต่ใน Node.js คุณต้องเปิดใช้งานการตั้งค่าสถานะและใช้ส่วนขยาย. mjs

ฉันมาข้ามamplify.js มันใช้งานง่ายมาก ในการจัดเก็บค่าลองเรียกมันว่า "myValue" คุณต้อง:

amplify.store("myKey", "myValue")

และเพื่อเข้าถึงคุณทำ

amplify.store("myKey")

หากคุณเก็บรหัสสีของคุณในตัวแปรทั่วโลกคุณควรจะสามารถเข้าถึงได้จากไฟล์จาวาสคริปต์

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

    var R = 
    { 
        somevar: 0,
        othervar: -1,

        init: function() {
          ...
        } // end init function

        somefunction: function(somearg) {
          ...
        }  // end somefunction

        ...

    }; // end variable R definition


    $( window ).load(function() {
       R.init();
    })

แล้วถ้าฉันมีรหัสชิ้นใหญ่ที่ฉันต้องการแยกฉันใส่มันในไฟล์แยกต่างหากและชื่อตัวแปรที่แตกต่างกัน แต่ฉันยังสามารถอ้างอิงตัวแปร R และฟังก์ชั่น ฉันเรียก TD ใหม่ว่าไม่มีเหตุผลที่ดีเลย:

    var TD = 
    { 
        xvar: 0,
        yvar: -1,

        init: function() {
           ...
        } // end init function

        sepfunction: function() {
           ...
           R.somefunction(xvar);
           ...
        }  // end somefunction

        ...

    }; // end variable TD definition


    $( window ).load(function() {
       TD.init();
    })

คุณจะเห็นว่าใน 'การแยกเสียงรบกวน' ของ TD ฉันเรียกว่า R.somefunction ฉันรู้ว่าสิ่งนี้ไม่ได้ให้ประสิทธิภาพรันไทม์ใด ๆ เพราะสคริปต์ทั้งสองต้องโหลด แต่มันช่วยฉันจัดการโค้ดของฉันให้เป็นระเบียบ

วิธีที่ดีที่สุดคือใช้หน้าต่าง INITIAL_STATE

<script src="/firstfile.js">
    // first.js
    window.__INITIAL_STATE__ = {
      back  : "#fff",
      front : "#888",
      side  : "#369"
    };
</script>
<script src="/secondfile.js">
    //second.js
    console.log(window.__INITIAL_STATE__)
    alert (window.__INITIAL_STATE__);
</script>