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

Posted 2023-02-22

【中文标题】我可以从另一个文件访问变量吗？

【英文标题】：Can I access variables from another file?

【发布时间】：2011-03-15 17:37:29

【问题描述】：

是否可以在另一个名为 second.js 的文件中使用名为 first.js 的文件中的变量？

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

【问题讨论】：

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

数据源站点没有回调？我的意思是：下载 second.js 包含： ... function secondscriptFn(o) //do something /w data; ... 下载datasource.example.net/first.js?callback=secondscriptFn 然后首先包含： secondscriptFn(back:"#fff",front:"#888",side:"#369");比全局范围版本更可控和健壮，因为您可以控制 first.js 范围...

如果您正在使用 jQuery 并且您正在尝试这样做，请注意。您需要确保不要将尝试从第一个文件访问的变量放在“$(document).ready()”函数中；否则它将无法正确加载，至少根据我的经验。

【参考方案1】：

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

【讨论】：

在浏览器中，window 是全局范围 - 所以 window.colorCodes 和（全局）对象 colorCodes 是同一个对象。

是的......我提到它的原因是您需要从非全局范围设置全局变量的情况。

html 呢？在 html 中我有：<script>var variable1 = true;</script> <script src="first.js"></script> first.js 会看到那个变量吗？我在谷歌浏览器扩展中测试了它，它没有工作

@user25，我也有同样的问题，你找到解决办法了吗？

如果你使用的是eslint，可以在上面一行加上/* global colorCodes */，防止出现“...未定义”的错误提示

【参考方案2】：

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

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

然后，使用 import 将变量导入第二个文件。

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

export - MDN

【讨论】：

const 在示例中并谈论variable - 我错过了什么吗？如果我这样做并使用变量var 并尝试分配，那么至少在Chrome扩展程序中它会抱怨“无法设置#

const 是一种变量。 var 也是一种变量。它们是两种不同类型的变量，具有不同的特征。答案不会误导，您只是在用例中使用了错误类型的变量。这不能用 const 完成 - 它们在初始化后是不可变的。您可以在此处了解不同的变量声明：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【参考方案3】：

我确实喜欢answer above 所说的，但它对我没有用

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

所以请确保在<script> 标签内声明变量，而不是在其他地方

【参考方案4】：

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

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

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

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

你可以使用 Webpack/Babel 的 ES6 中的 import 和 export 方法，但在 Node.js 中你需要 enable a flag, and uses the .mjs extension.

【讨论】：

必须是 const 才能导出吗？

在 Node.js 中，情况不再如此。您可以简单地在 package.json 文件中添加 type: module 以使用本机导入/导出。

【参考方案5】：

这应该可行 - 在 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，也可能是其他浏览器）

【讨论】：

您可能需要将该变量附加到对象，例如：this.colors = colors。如果它是一个对象而不是枚举，则可以创建一个函数来仅返回值。 this.getTextColor = function() return colors.text; ;

如何从加载的页面更新变量？ 似乎不起作用。

【参考方案6】：

我遇到了amplify.js。使用起来真的很简单。要存储一个值，我们称之为“myValue”，你可以这样做：

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

要访问它，你可以这样做

amplify.store("myKey")

【参考方案7】：

如果您将颜色代码存储在全局变量中，您应该能够从任一 javascript 文件中访问它。

【参考方案8】：

我的做法可能有点不同。我不知道为什么我使用这种语法，很久以前从某本书中复制的。但是我的每个 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。 我意识到这并没有提供任何运行时效率，因为两个脚本都需要加载，但它确实帮助我保持我的代码井井有条。