web-dev-qa-db-ja.com

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

first.jsという別のファイル内のsecond.jsというファイルで変数を使用することは可能ですか？

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

javascriptscope
138
SAK

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>
155
Dagg Nabbit

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

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

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

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

エクスポート-MDN

18
Germa Vinsmoke

これは動作するはずです-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は確かに、おそらく他のブラウザー）にとって重要です。

13
Piskvor

上記の答え が言ったことは好きでしたが、私にはうまくいきませんでしたが

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

そのため、変数を<script>タグ内で宣言してください。

10
Basheer AL-MOMANI

amplify.js に出会いました。使い方はとても簡単です。値を保存するには、「myValue」と呼びます。

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

そしてそれにアクセスするには

amplify.store("myKey")
4
Ben Leitner

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

2
Fermin

私はこれを少し違ったやり方でやっているかもしれません。この構文を使用する理由がよくわかりませんが、昔からいくつかの本からコピーしました。しかし、私の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を呼び出すかがわかります。両方のスクリプトをロードする必要があるため、これによりランタイムの効率性が得られないことがわかりますが、コードを整理するのに役立ちます。

2
Alan

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

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

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

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

Webpack/Babelを使用してES6から import および export を使用できますが、Node.jsでは フラグを有効にし、.mjsを使用する必要があります拡張子

0
Xinton

最良の方法の1つは、windowを使用することです。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>
0
Karan Shaw