Kann ich aus einer anderen Datei auf Variablen zugreifen?

178

Ist es möglich, eine Variable in einer Datei zu verwenden, die in einer first.jsanderen aufgerufenen Datei aufgerufen wird second.js?

first.jsenthält eine Variable namens colorcodes.

SAK
quelle
@Roki: Zum Beispiel könnten Sie Daten von einer anderen Website laden, während sich das Skript zur Verarbeitung auf Ihrer Website befindet:<script src="http://datasource.example.net/first.js"></script><script src="second.js"></script>
Piskvor verließ das Gebäude
Die Datenquellen-Site hat keinen Rückruf? was ich meine: download second.js enthält: ... function secondcriptFn (o) {// etwas tun / w Daten; } ... download datasource.example.net/first.js?callback=secondscriptFn enthält dann zuerst: secondcriptFn ({back: "# fff", front: "# 888", side: "# 369"}); kontrollierbarer und robuster als globale Scope-Versionen, da Sie den first.js-Scope steuern können ...
Roki
4
Nur als Hinweis, wenn Sie jQuery verwenden und dies versuchen. Sie müssen sicherstellen, dass Sie die Variable, auf die Sie von der ersten Datei aus zugreifen möchten, nicht in die Funktion '$ (document) .ready ()' einfügen. Andernfalls wird es nicht richtig geladen, zumindest aus meiner Erfahrung.
Collin McGuire

Antworten:

195

Wie Fermin sagte, sollte eine Variable im globalen Bereich für alle Skripte zugänglich sein, die nach ihrer Deklaration geladen werden. Sie können auch eine Eigenschaft von windowoder (im globalen Bereich) verwenden this, um den gleichen Effekt zu erzielen.

// first.js
var colorCodes = {

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

};

... in einer anderen Datei ...

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

... in Ihrer HTML-Datei ...

<script type="text/javascript" src="first.js"></script> 
<script type="text/javascript" src="second.js"></script> 
Dagg Nabbit
quelle
5
In einem Browser window ist der globale Bereich - also sind window.colorCodes und das (globale) Objekt colorCodes dasselbe Objekt.
Piskvor verließ das Gebäude
Richtig ... der Grund, den ich erwähne, ist für Fälle, in denen Sie eine globale Variable aus einem nicht globalen Bereich festlegen müssen.
Dagg Nabbit
2
Was ist mit HTML? in html habe ich: <script>var variable1 = true;</script> <script src="first.js"></script>wird first.js diese Variable sehen? Ich habe es in der Google Chrome-Erweiterung getestet und es hat nicht funktioniert
user25
@ user25, ich habe das gleiche Problem, hast du eine Lösung gefunden?
Merkur
1
Wenn Sie eslint verwenden, können Sie /* global colorCodes */die obige Zeile hinzufügen , um die Fehlermeldung "... ist nicht definiert" zu verhindern
Joseph K.
41

Sie können die Variable aus der ersten Datei mithilfe des Exports exportieren .

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

Importieren Sie dann die Variable mit import in die zweite Datei .

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

Export - MDN

Germa Vinsmoke
quelle
14

Mir hat gefallen, was die Antwort oben gesagt hat, aber obwohl es bei mir nicht funktioniert hat

weil ich declaringdiese Variablen insideJQuery war$( document ).ready()

Stellen Sie daher sicher, dass Sie Ihre Variablen innerhalb des <script>Tags nicht an einer anderen Stelle deklarieren

Basheer AL-MOMANI
quelle
13

Dies sollte funktionieren - definieren Sie eine globale Variable in der ersten Datei und greifen Sie von der zweiten Datei darauf zu:

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

Beachten Sie, dass die Reihenfolge, in der Sie die Skriptdateien laden, für einige Browser von Bedeutung ist (IE6 sicher, vielleicht auch andere).

Piskvor verließ das Gebäude
quelle
1
Möglicherweise müssen Sie diese Variable wie folgt an das Objekt anhängen: this.colors = colours. Wenn es sich eher um ein Objekt als um eine Aufzählung handelt, können Sie eine Funktion erstellen, um nur den Wert zurückzugeben. this.getTextColor = function () {return colours.text; };
Aggaton
1
Wie würden Sie eine Variable von einer geladenen Seite aktualisieren? <script type = "text / javascript"> colours.background = "new col"; </ script> scheint nicht zu funktionieren.
v3nt
6

Mit Node.js können Sie die Variable über ein Modul exportieren.

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

Importieren Sie dann das Modul / die Variable mit require in die zweite Datei.

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

Sie können das importund den exportAnsatz von ES6 mit Webpack / Babel verwenden, aber in Node.js müssen Sie ein Flag aktivieren und die Erweiterung .mjs verwenden.

Xinton
quelle
3

Ich bin auf amplify.js gestoßen . Es ist wirklich einfach zu bedienen. Um einen Wert zu speichern, nennen wir ihn "myValue".

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

Und um darauf zuzugreifen, tun Sie es

amplify.store("myKey")
Ben Leitner
quelle
2

Wenn Sie Ihre Farbcodes in einer globalen Variablen speichern, sollten Sie über eine der beiden Javascript-Dateien darauf zugreifen können.

Fermin
quelle
2

Ich mache das vielleicht etwas anders. Ich bin mir nicht sicher, warum ich diese Syntax verwende, die ich vor langer Zeit aus einem Buch kopiert habe. Aber jede meiner js-Dateien definiert eine Variable. Die erste Datei heißt ohne Grund 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();
    })

Und wenn ich dann einen großen Code habe, den ich trennen möchte, füge ich ihn in eine separate Datei und einen anderen Variablennamen ein, kann aber trotzdem auf die R-Variablen und -Funktionen verweisen. Ich habe den neuen TD ohne guten Grund angerufen:

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

Sie können sehen, dass ich in der TD 'sepfunction' die R.somefunction nenne. Mir ist klar, dass dies keine Laufzeiteffizienz bringt, da beide Skripte geladen werden müssen, aber es hilft mir, meinen Code organisiert zu halten.

Alan
quelle
0

Ein bester Weg ist die Verwendung von Fenster. AUSGANGSZUSTAND

<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>
Karan Shaw
quelle
Was ist der Vorteil dieses Ansatzes gegenüber den anderen Antworten?
Boric