Чи можу я отримати доступ до змінних з іншого файлу?

Чи можна використовувати змінну у файлі, який називається first.jsвсередині іншого файла second.js?

first.jsмістить змінну, що називається colorcodes.

Як сказав Фермін, змінна в загальному масштабі повинна бути доступною для всіх скриптів, завантажених після її оголошення. Ви також можете використовувати властивість 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 };

Потім імпортуйте змінну у другий файл, використовуючи import .

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

експорт - MDN

Мені подобалося, що відповідь сказала вище, але, хоча, це не працювало зі мною

тому що я був declaringцими змінними insideJQuery$( document ).ready()

тому переконайтеся, що ви декларуєте свої змінні всередині <script>тегу не деінде

Це повинно працювати - визначте глобальну змінну у першому файлі та отримайте доступ до неї з другого файлу:

<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та exportз aproach з ES6 за допомогою Webpack / Babel, але в Node.js потрібно включити прапор і використовує розширення .mjs.

Я натрапив на amplify.js . Це дуже просто у використанні. Щоб зберегти значення, назвемо його "myValue", ви зробите:

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

І щоб отримати доступ до цього, ви робите

amplify.store("myKey")

Якщо ви зберігаєте свої кольорові коди в глобальній змінній, ви повинні мати доступ до нього з будь-якого файлу javascript.

Я, можливо, роблю це дещо інакше. Я не впевнений, чому я використовую цей синтаксис, скопіював його з якоїсь книги дуже давно. Але кожен мій 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-змінні та функції. Я зателефонував до нової ТД без поважних причин:

    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>