javascript - 什么是可能的 Javascript 约定/模式来避免 React 类/组件不必要的 namespace 污染

Question

这似乎是一个相当愚蠢的问题，但到目前为止我还没有找到明确的答案。

我本质上正在寻找在 JavaScript 中存储变量和辅助函数的最佳实践。我需要在本地更新此列表，因此我的第一 react 是将其全局存储在 react 类之外，但显然这是一个坏主意，因为我最终需要添加辅助函数和更多要在组件中使用的变量。

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 中阅读了许多不同的设计模式(模块、单例、揭示等)，以避免污染全局命名空间，但我不确定我的最佳选择是什么。

所以，我的问题是，存储我的 react 组件/类需要使用的变量和辅助函数的最佳实践是什么，而不是将所有内容都扔到全局命名空间中。

编辑

显然这是一个非常广泛的问题，我想我会因为问这个问题而感到一些悲伤。如果有更好的提问方式请告诉我。指向回答该问题的其他资源的链接也会非常有帮助。

评论中有人提到，使用 ES6 模块已经可以处理之前 Javascript 中存在的全局污染问题。 我最终可以在类之外存储辅助函数和变量而不产生任何影响吗？

Answer 1

我在从事的项目中通常看到的是:

将此视为文件夹结构:

• 组件

  • 示例
    • index.js
    • helper.js(您可以使用其他名称，例如函数、常量等)

• 实用程序

  • functions.js
  • constants.js

因此，在助手内部，您将拥有只有示例组件(索引)才会使用的常量和函数。

在 utils 内部，您应该添加不同组件和容器将访问的函数和常量。

index.js

import React, { Component } from 'react';
import Select from 'react-select';
import { list, parseName } from './helper'

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>
        )
    }
}

helper.js

export const list = ['1', '2', '3'];
expor const parseName = (name) => `Sr ${name}`;

我添加了一个parseName，以便您可以了解可以在helper.js中添加什么内容，其中应该主要是纯函数