什么是可能的Javascript惯例/模式，以避免React类/组件造成不必要的命名空间污染(What is a possible Javascript convention/pattern to avoid unnecessary namespace pollution with React classes/components)

 这似乎是一个相当愚蠢的问题，但就此而言，我一直未能找到明确的答案。 
 
 我正在寻找一种最佳实践来存储JavaScript中的变量和帮助函数。 我需要保持本地更新列表，所以我的第一本能是将它存储在全局反应类之外，但显然这是一个坏主意，因为我最终需要添加帮助函数和更多变量以用于我的组件。 
 
import React, { Component } from 'react';
import Select from 'react-select';


const list = ['1', '2', '3'] // is it acceptable to store this here?


export class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div className="well">
                <div className="row">
                    <div className="col-sm-4">
                        <h3>Device Type</h3>
                        <Select options={list}/>
                    </div>
                </div>
            </div>
        )
    }
}
 
 我已经阅读了Javascript中许多不同的设计模式（模块，单例，揭示等等），以避免污染全局命名空间，但我不确定我的最佳选择是什么。 
 
 再次，我的问题是，存储变量和帮助程序函数的最佳做法是需要由我的反应组件/类使用，而不必将所有内容都放入全局名称空间中。 
 
 编辑 
 
 显然，这是一个非常广泛的问题，我假设我会因为问这个问题而感到悲伤。 如果有更好的方法提问，请告诉我。 链接到解决问题的其他资源的链接也会非常有帮助。 
 
 评论中有人提到，使用ES6模块已经可以解决JavaScript之前存在的全球污染问题。 在我的课程外面存储帮助函数和变量是否没有任何影响，最终是否可行？ 

This seems like quite a silly question but to this point I haven't been able to find a clear answer.
 
I'm looking for essentially a best practice to storing variables and helper functions in JavaScript. I need to keep this list updated locally, so my first instinct is to store it outside the react class globally, but clearly this is a bad idea as I will eventually need to add helper functions and more variables to be used in my component. 
 
import React, { Component } from 'react';
import Select from 'react-select';


const list = ['1', '2', '3'] // is it acceptable to store this here?


export class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div className="well">
                <div className="row">
                    <div className="col-sm-4">
                        <h3>Device Type</h3>
                        <Select options={list}/>
                    </div>
                </div>
            </div>
        )
    }
}
 
I've read about many different design patterns (module, singleton, revealing, etc...) in Javascript to avoid polluting the global namespace, but I'm not sure what my best option is.
 
So again, my question is, what's the best practice for storing variables and helper functions that need to be used by my react component/class without just throwing everything into the global namespace.
 
EDIT
 
Obviously this is a very broad question and I'm assuming I'll receive some grief for asking it. If there's a better way to ask it please let me know. A link to some other resource that answers the question would also be very helpful.
 
Someone in the comments mentioned that using ES6 modules already handles the global pollution problems that existed in Javascript before. Is it ultimately okay for me to store helper functions and variables outside my class without any repercussions?

原文：https://stackoverflow.com/questions/48024719