javascript - 从不同文件访问命名空间中的 JavaScript 变量

Question

我正在尝试编写“第 3 方加载”Javascript，类似于 Stripe、Disqus 等。这个想法是访问一个变量作为配置并能够与其交互。

所以，在我的应用程序的头部我有 2 个脚本:

<script type="text/javascript" src="http:/domain/ks.js" async></script>
<script type="text/javascript">
  Ks.setConfiguration("flow2");
</script>

ks.js

if (document.readyState === 'interactive') {
  // The document has finished loading. We can now access the DOM elements.
  Kb.setup();
}

var Kb = new function() {
  // public
  this.setConfiguration = function(key) {
    var APP_KEY = key;
  }

  this.setup = function() {
    checkConfiguration(APP_KEY);
    internalFunction();
  };

  // private
  var internalFunction = function() {
    console.log("calling private function from namespace");
  };

  var checkConfiguration = function(key) {
    // log message if key not set
    console.log(key);
  };
};

问题是我无法访问主脚本中的 APP_KEY 变量。我想要完成的是异步加载主脚本，设置配置，然后与配置项交互。

Answer 1

你可以

要么添加 this.getAppKey()，但您必须在 APP_KEY 内定义 var Kb = new function()，而不是在闭包内。

由于 var works 的方式，它仍然可以工作，但为了代码清晰起见，将其添加到“类”级别范围。

或者您可以将其声明为 this.APP_KEY 并从 <instance>.APP_KEY 访问它。

或者您可以将 Kb() 放入模块中，并将 APP_KEY 放在可以使用 export it 的范围内

示例:

一些文件.js

var Kb = new function() {
  var APP_KEY = null; // this is defined on a higher scope
  this.PUBLIC_APP_KEY = null; // with this you can call directly the key if you need to access it

  // public
  this.setConfiguration = function(key) {
    APP_KEY = key;
    this.PUBLIC_APP_KEY = key;
  }

  this.getKey = function() {
      return APP_KEY;
  }

  this.setup = function() {
    checkConfiguration(APP_KEY);
    internalFunction();
  };

  // private
  var internalFunction = function() {
    console.log("calling private function from namespace");
  };

  var checkConfiguration = function(key) {
    // log message if key not set
    console.log(key);
  };
};

现在你可以在其他文件中执行

if (document.readyState === 'interactive') {
  var kb = Kb();
   kb.setConfiguration(<somekey>);
   console.log(kb.getKey()); // <somekey>
   console.log(kb.PUBLIC_APP_KEY) // <somekey>
  // The document has finished loading. We can now access the DOM elements.
  Kb.setup(); 
}

或者，最后，你可以做这样的事情

// somefile.js
var key = "key";
// export it
exports.API_KEY = key;

以及其他一些文件

import { API_KEY } from "somefile.js"