JavaScript 和 ES6,“全局”变量
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/33875322/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript and ES6, "global" variables
提问by vicaba
I've been working with little snippets of JavaScript during 3 years, but now I'm building a React application and I'm getting into it. There is a basic thing that I don't understand. React uses a Dispatcher and Stores to build its Flux pattern, the thing that I don't get is that this Dispatcher is visible in all the application, because Actions use the dispatcher to dispatch actions and Stores register to the Dispatcher to get notified (so it's not a new Dispatcher every time). So, how can I achieve this "global" scope or whatever it is called? How can achieve this using ES6 classes (modules)?
3 年来,我一直在使用 JavaScript 的小片段,但现在我正在构建一个 React 应用程序并且我正在进入它。有一个基本的东西我不明白。React 使用 Dispatcher 和 Stores 来构建它的 Flux 模式,我不明白的是这个 Dispatcher 在所有应用程序中都是可见的,因为 Actions 使用 Dispatcher 来分发 Actions,Stores 注册到 Dispatcher 以获得通知(所以它不是每次都是新的调度员)。那么,我怎样才能实现这个“全局”范围或它的名字呢?如何使用 ES6 类(模块)实现这一点?
This question may be unclear due to my lack of experience programming real JavaScript, I hope that with the hep of community comments I'll be able to arrange that.
由于我缺乏真正的 JavaScript 编程经验,这个问题可能不清楚,我希望通过社区评论我能够安排。
回答by David Zorychta
You can always assign variables to window.MyClass = whatever
(global.MyClass
for nodejs) no matter where you are, and access these values from any other file in your application. That's not always the best way to go about sharing data globally in your application though. The module loader in nodejs (or AMD in ES6) takes whatever you export and caches it. Lets say you have a file like:
无论您身在何处,您始终可以将变量分配给window.MyClass = whatever
(global.MyClass
对于 nodejs),并从应用程序中的任何其他文件访问这些值。但这并不总是在您的应用程序中全局共享数据的最佳方式。nodejs 中的模块加载器(或 ES6 中的 AMD)接受你导出的任何内容并缓存它。假设您有一个文件,例如:
MyModule.js:
我的模块.js:
class MyClass {
constructor() {
this.someData = 55;
}
}
export default (new MyClass);
now whenever we require this file from elsewhere, we're ALWAYS being given the SAME instance of MyClass
. This means:
现在每当我们从其他地方需要这个文件时,我们总是得到相同的MyClass
. 这意味着:
file1.js:
文件1.js:
import MyClass from './MyModule'
MyClass.someData = 100;
file2.js:
file2.js:
import MyClass from './MyModule'
console.log(MyClass.someData);
This is called the singleton pattern, where we pass around one common instance of your class all throughout your application. So in this manner we're able to access the same instance of MyClass
from different files, all without polluting the global scope (we avoid making assignments to global.MyClass
but accomplish the same functionality).
这称为单例模式,我们在整个应用程序中传递类的一个公共实例。因此,通过这种方式,我们能够访问MyClass
来自不同文件的同一个实例,而不会污染全局范围(我们避免分配global.MyClass
但完成相同的功能)。
回答by J. Mark Stevens
What you are looking for is to create a singleton. From http://amanvirk.me/singleton-classes-in-es6/.
您正在寻找的是创建一个单身人士。来自http://amanvirk.me/singleton-classes-in-es6/。
let instance = null;
export default class Cache{
constructor() {
if (!instance) { instance = this; }
this.time = new Date()
return instance;
}
}
I tested this and it works. You would simply replace the this.time = new Date() with this.singletonFunction = function(){}. Where you want to use it do your import then
我测试了这个并且它有效。您只需将 this.time = new Date() 替换为 this.singletonFunction = function(){}。你想在哪里使用它然后做你的导入
let aSingleton = (new importName()).singletonFunction;