別のファイルから変数にアクセスできますか?


178

と呼ばれるfirst.js別のファイル内で呼び出されるファイルで変数を使用することは可能second.jsですか?

first.jsという変数が含まれていますcolorcodes


@Roki:それらを処理するためのスクリプトをサイト上にある間たとえば、あなたは、他のウェブサイトからデータをロードすることができます<script src="http://datasource.example.net/first.js"></script><script src="second.js"></script>
Piskvorが構築左

データソースサイトにコールバックがありませんか?意味:ダウンロードsecond.jsに含まれるもの:... function secondscriptFn(o){//何かをする/ wデータ; } ... datasource.example.net/first.js?callback=secondscriptFnをダウンロードしてから、最初に次の内容を含めます:secondscriptFn({back: "#fff"、front: "#888"、side: "#369"}); あなたがfirst.jsスコープを制御することができますので...、グローバルスコープのバージョンよりも制御可能で堅牢
ロキ

4
jQueryを使用していて、これを実行しようとしている場合のメモと同じです。最初のファイルからアクセスしようとしている変数を '$(document).ready()'関数に入れないようにする必要があります。そうでなければ、少なくとも私の経験から、それは適切に読み込まれません。
Collin McGuire

回答:


195

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> 

5
ブラウザでwindow 、はグローバルスコープです。つまり、window.colorCodesと(グローバル)オブジェクトcolorCodesは同じオブジェクトです。
Piskvorが

確かに...私がそれを言及する理由は、非グローバルスコープからグローバル変数を設定する必要がある場合です。
Dagg Nabbit、2010

2
HTMLはどうですか?私が持っているhtmlで:<script>var variable1 = true;</script> <script src="first.js"></script>first.jsはその変数を見るでしょうか?Google Chrome拡張機能でテストしましたが、機能しませんでした
user25

@ user25、私は同じ問題を抱えていますが、解決策を見つけましたか?
マーキュリー

2
eslintを使用している場合は、/* global colorCodes */上の行に「...が定義されていません」というエラーメッセージを防ぐために追加できます
Joseph K.

41

exportを使用して、最初のファイルから変数をエクスポートできます。

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

次に、importを使用して2番目のファイルに変数をインポートします。

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

エクスポート-MDN


14

上記の答えが好きだったたが、それでもませんでした

私はdeclaringこれらの変数だったのでinsidejQuery$( document ).ready()

変数を<script>タグ内で宣言するようにしてください。


13

これは機能するはずです-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は確かに他のブラウザーも)


1
this.colors = colorsのように、その変数をオブジェクトにアタッチする必要があるかもしれません。列挙型ではなくオブジェクトの場合は、値を返すだけの関数を作成できます。this.getTextColor = function(){return colors.text; };
アガトン2013年

1
ロードされたページから変数をどのように更新しますか?<script type = "text / javascript"> colors.background = "new col"; </ script>が機能していないようです。
v3nt 2016年

6

Node.jsを使用すると、モジュールを介して変数をエクスポートできます。

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

次に、モジュール/変数をrequireを使用して2番目のファイルにインポートします。

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

あなたは使用することができるimportexportのWebPACK /バベルを使用してES6からaproachを、しかし、Node.jsの中で、あなたがする必要があるフラグを有効にして、.mjs拡張子を使用しています。



2

カラーコードをグローバル変数に保存すると、どちらのJavaScriptファイルからでもアクセスできるはずです。


2

私はこれを少し違ったやり方で行っているかもしれません。なぜこの構文を使用するのかはわかりません。昔の本からコピーしました。しかし、私の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のsepfunctionでR.somefunctionを呼び出していることがわかります。両方のスクリプトをロードする必要があるため、これは実行時の効率を向上させませんが、コードを整理しておくのに役立ちます。


0

最良の方法の1つは、ウィンドウを使用することです。初期状態

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

他の回答に対するこのアプローチの利点は何ですか?
ボリック
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.