React + Flux - 如何避免全局变量答案

【问题标题】：React + Flux - How to avoid global variableReact + Flux - 如何避免全局变量
【发布时间】：2016-03-19 20:42:36
【问题描述】：

我一直在研究 React/Flux，对组件外部的变量声明感到困惑，如下面的代码。

CounterComponent.js

var count;
function getCount (){

}
var CounterComponent = React.createClass({
  getInitialState: function(){
    return getCount();
  },
  render:function(){
  }
})
module.exports = CounterComponent;

和上面的代码一样，怀疑是变量count和函数getCount在这里似乎是全局的。是否可以在此处声明变量和函数，在组件外部或需要放置在内部。这看起来像全球污染。

另外，如果我们考虑一个商店，已经看到了下面的例子，这里的变量 CHANGE_EVENT 似乎是全局的，可以吗。

CounterStore.js

var CHANGE_EVENT = 'change';
var MainStore = assign({},EventEmitter.prototype, {
  AppDispatcher.register(function(payload){ 
    var action = payload.action;
    switch(action.actionType){        
    }
  });
});
module.exports = MainStore;

我已经搜索过这个答案，但找不到正确的答案。从 javascript 的角度来看，它看起来像是污染全局的，但是在 React 中呢？

【问题讨论】：

标签： javascript reactjs global-variables reactjs-flux

【解决方案1】：

这取决于你使用的构建系统，如果你使用像browserify 或webpack 这样的系统，那么没有变量是全局的。

所以如果你不使用打包器库，我建议你用匿名函数包装你的源代码，这样你就不会污染全局命名空间。

但我强烈建议你看看使用 webpack 的现代方法，这似乎在 React 和 Flux 社区中更受欢迎。

【讨论】：

我正在使用 browserify，但是，如果我在开发工具中看到 js 文件，所有 js 文件都是连接的，并且变量看起来像是全局的。不是这样吗？
不，browserify 不只是合并文件。变量的范围绑定到定义它们的文件。您只能使用 module.exports 或 require 语句跨文件共享变量。这是 browserify（或 webpack）的一个非常好的属性，它允许您编写代码而不用担心变量冲突。如果你想测试它，只需打开你的控制台并输入你认为可能是全局的变量名。谢谢。
我刚刚编辑了我的问题并提供了更多细节，特别是 module.exports 的东西。请您看一下，看看您的答案是否仍然有效。
是的，它仍然成立。使用 browserify 和 webpack，除非您明确使用 window['variableName'] 将变量设置为全局范围，否则不会将变量声明为全局变量。这样做的全部原因是为了防止污染全局命名空间，以便您可以使用 module.exports 控制您公开的功能。
因此，请保持文件较小并尽可能多地使用文件范围的全局变量，以使代码更简洁、更易于推理。您会在许多流行的库源代码中看到类似的用法。如果您不使用 webpack 或 browserify，那么通常的做法是将整个代码封装在立即调用的匿名函数中以防止全局变量。这两种方法仍然有效，但前一种更符合标准，即 ES6 模块。