这似乎是一个非常愚蠢的问题,但到目前为止,我还没有找到一个明确的答案。
我正在寻找在JavaScript中存储变量和辅助函数的最佳实践。我需要在本地更新此列表,所以我的第一直觉是将它全局存储在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中存在的全球污染问题。我最终可以在我的课堂外存储辅助函数和变量而不会产生任何影响吗?
我通常在我工作的项目中看到的是:
将其视为文件夹结构:
所以在内部帮助器中,您将拥有仅使用示例组件(索引)的那些常量和函数。
在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
中添加什么,它应该主要是纯函数