Могу ли я получить доступ к переменным из другого файла?

180

Можно ли использовать переменную в файле с именем first.jsвнутри другого файла с именем second.js?

first.jsсодержит переменную с именем colorcodes.

SAK
источник
@Roki: Например, вы можете загружать данные с другого сайта, в то время как скрипт для их обработки находится на вашем сайте:<script src="http://datasource.example.net/first.js"></script><script src="second.js"></script>
Писквор покинул здание
сайт источника данных не имеет обратного вызова? что я имею в виду: скачать second.js содержит: ... function secondscriptFn (o) {// сделать что-то / w data; } ... скачать datasource.example.net/first.js?callback=secondscriptFn, а затем сначала содержать: secondscriptFn ({back: "# fff", front: "# 888", side: "# 369"}); более управляемый и надежный, чем глобальные версии области видимости, потому что вы можете контролировать область first.js ...
Roki
4
Просто как примечание, если вы используете jQuery и пытаетесь это сделать. Вам нужно убедиться, что вы не поместили переменную, к которой вы пытаетесь обратиться из первого файла, в функцию '$ (document) .ready ()'; иначе это не будет загружаться должным образом, по крайней мере, из моего опыта.
Коллин МакГуайр

Ответы:

199

Как сказал Фермин, переменная в глобальной области видимости должна быть доступна всем сценариям, загруженным после ее объявления. Вы также можете использовать свойство 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> 
Дагг Наббит
источник
6
В браузере window это глобальная область видимости - поэтому window.colorCodes и (глобальный) объект colorCodes - это один и тот же объект.
Писквор покинул здание
Верно ... причина, по которой я упоминаю это для случаев, когда вам нужно установить глобальную переменную из неглобальной области.
Дагг Наббит
2
как насчет HTML? в HTML у меня есть: <script>var variable1 = true;</script> <script src="first.js"></script>first.js увидит эту переменную? Я проверил его в расширении Google Chrome, и оно не сработало
user25
@ user25, у меня та же проблема, ты нашел решение?
Меркурий
2
Если вы используете eslint, вы можете добавить /* global colorCodes */в строку выше сообщение об ошибке «... не определено»
Джозеф К.
41

Вы можете экспортировать переменную из первого файла, используя экспорт .

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

Затем импортируйте переменную во второй файл, используя import .

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

экспорт - MDN

Герма Винсмоук
источник
14

Мне понравилось то, что ответил выше, но со мной это не сработало

потому что я declaringэти переменные insideJQuery$( document ).ready()

поэтому убедитесь, что вы объявляете свои переменные внутри <script>тега, а не где-то еще

Башир Аль-Момани
источник
13

Это должно работать - определите глобальную переменную в первом файле и получите доступ к нему из второго файла:

<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; };
Аггатон
1
как бы вы обновили переменную с загруженной страницы? <script type = "text / javascript"> colors.background = "new col"; </ script> не похоже на работу.
v3nt
6

Используя Node.js, вы можете экспортировать переменную через модуль.

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

Затем импортируйте модуль / переменную во второй файл, используя require.

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

Вы можете использовать importи exportподход из ES6 с помощью Webpack / Babel, но в Node.js вам нужно включить флаг и использовать расширение .mjs.

Xinton
источник
это должно быть const, чтобы экспортировать это?
BKSpurgeon
3

Я наткнулся на ampify.js . Это действительно просто в использовании. Чтобы сохранить значение, назовем его «myValue», вы делаете:

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

И чтобы получить к нему доступ, вы делаете

amplify.store("myKey")
Бен Лейтнер
источник
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();
    })

Вы можете видеть, что где в «seffunction» TD я называю R.somefunction. Я понимаю, что это не дает никакой эффективности во время выполнения, потому что нужно загружать оба сценария, но это помогает мне сохранять мой код организованным.

Алан
источник
0

Одним из лучших способов является использование окна. НАЧАЛЬНОЕ СОСТОЯНИЕ

<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>
Каран Шоу
источник
В чем преимущество этого подхода перед другими ответами?
Борич