我可以从另一个文件访问变量吗?


177

是否有可能first.js在另一个文件内部使用一个变量second.js

first.js包含一个名为的变量colorcodes


@Roki:例如,您可能正在从另一个网站加载数据,而处理这些数据的脚本在您的网站上:<script src="http://datasource.example.net/first.js"></script><script src="second.js"></script>
Piskvor在2010年

数据源站点没有回调?我的意思是:下载second.js包含:... function secondscriptFn(o){//做一些/ w数据;} ...下载datasource.example.net/first.js?callback=secondscriptFn,然后首先包含:secondscriptFn({back:“#fff”,front:“#888”,side:“#369”}); 比全局作用域版本更具可控性和健壮性,因为您可以控制first.js范围...
Roki 2010年

4
请注意,如果您使用的是jQuery,并且正在尝试这样做。您需要确保不要将要从第一个文件访问的变量放在'$(document).ready()'函数中;否则,至少从我的经验来看,它将无法正确加载。
Collin McGuire

Answers:


192

正如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,我有同样的问题,您找到解决方案了吗?
水星

1
如果你正在使用eslint,您可以添加/* global colorCodes */在上面,以防止线“......没有定义”错误消息
约瑟夫K.

39

您可以使用export从第一个文件中导出变量。

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

然后,使用导入的变量在第二个文件导入

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

出口-MDN


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(){返回colors.text; };
2013年

1
您如何从已加载的页面更新变量?<script type =“ text / javascript”> colors.background =“ new col”; </ script>似乎不起作用。
v3nt

13

我确实喜欢上面的答案说,但是虽然,它没有和我一起

因为我是declaring这些变量的insideJQuery$( document ).ready()

因此,请确保您在<script>标记中声明了变量,而不是在其他地方


6

使用Node.js,您可以通过模块导出变量。

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

然后,使用require将模块/变量导入第二个文件。

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

您可以通过Webpack / Babel使用ES6中的importexport方法,但是在Node.js中,您需要启用一个标志,并使用.mjs扩展名。


3

我遇到了amplify.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();
    })

您可以看到在TD“分隔功能”中我将其称为R.somefunction。我意识到这并不能提高运行时效率,因为两个脚本都需要加载,但这确实有助于我保持代码井井有条。


0

最好的方法是使用窗口。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>

与其他答案相比,这种方法的优势是什么?
Boric
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.