Czy mogę uzyskać dostęp do zmiennych z innego pliku?

Czy można użyć zmiennej w pliku o nazwie first.jswewnątrz innego pliku o nazwie second.js?

first.jszawiera zmienną o nazwie colorcodes.

Jak powiedział Fermin, zmienna o zasięgu globalnym powinna być dostępna dla wszystkich skryptów ładowanych po jej zadeklarowaniu. Możesz także użyć właściwości windowor (w zakresie globalnym), thisaby uzyskać ten sam efekt.

// first.js
var colorCodes = {

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

};

... w innym pliku ...

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

... w Twoim pliku html ...

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

Możesz wyeksportować zmienną z pierwszego pliku za pomocą eksportu .

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

Następnie zaimportuj zmienną do drugiego pliku za pomocą importu .

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

eksport - MDN

Podobała mi się powyższa odpowiedź , ale mimo to nie zadziałała

bo ja byłem declaringtymi zmiennymi insideJQuery$( document ).ready()

więc upewnij się, że deklarujesz swoje zmienne wewnątrz <script>tagu, a nie gdzie indziej

To powinno działać - zdefiniuj zmienną globalną w firstfile i uzyskaj do niej dostęp z 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);

Zwróć uwagę, że kolejność, w jakiej ładujesz pliki skryptów, ma znaczenie dla niektórych przeglądarek (na pewno IE6, może inne)

Za pomocą Node.js możesz wyeksportować zmienną za pośrednictwem modułu.

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

Następnie zaimportuj moduł / zmienną w drugim pliku za pomocą require.

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

Możesz użyć importi exportaproach z ES6 używając Webpack / Babel, ale w Node.js musisz włączyć flagę i użyć rozszerzenia .mjs.

Natknąłem się na amplify.js . To naprawdę proste w użyciu. Aby zapisać wartość, nazwijmy ją „myValue”:

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

Aby uzyskać do niego dostęp, masz

amplify.store("myKey")

Jeśli przechowujesz kody kolorów w zmiennej globalnej, powinieneś mieć do niej dostęp z dowolnego pliku javascript.

Może robię to trochę inaczej. Nie jestem pewien, dlaczego używam tej składni, skopiowałem ją z jakiejś książki dawno temu. Ale każdy z moich plików js definiuje zmienną. Pierwszy plik, bez żadnego powodu, nosi nazwę 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();
    })

A potem, jeśli mam duży fragment kodu, który chcę posegregować, umieszczam go w osobnym pliku i pod inną nazwą zmiennej, ale nadal mogę odwoływać się do zmiennych i funkcji języka R. Zadzwoniłem do nowego TD bez żadnego powodu:

    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();
    })

Widać, że w miejscu, w którym w „funkcji” TD nazywam funkcję R. Zdaję sobie sprawę, że nie zapewnia to żadnej wydajności w czasie wykonywania, ponieważ oba skrypty muszą zostać załadowane, ale pomaga mi to uporządkować kod.

Najlepszym sposobem jest użycie okna. STAN POCZĄTKOWY

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