Question

我将这些设置传递给我的组件，并在应用程序周围的各个位置使用它们。我没有随身携带它们，而是用它们初始化配置对象，然后在需要时导入它。

它有什么问题吗？

这不是依赖注入的工作原理吗？

如果导入位于同一个地方，Javascript会解析为同一个对象，对吗？

示例

// ./cmsSettings.js
const cmsSettings = {};
cmsSettings.initialise = (props) => {
  cmsSettings.settings = { ...props };
};

export default cmsSettings;

// ./App.jsx
import cmsSettings from './cmsSettings';
...

class App extends Component {
  constructor(props) {
    super(props);
    cmsSettings.initialise(props);
  }

  render() {
    return (
      <MyComponent />
    );
  }
}

export default App;

props包含具有站点传递的属性的对象（语言环境，语言，某些ID等）。当我获得语言翻译，使用特定ID等向API发出请求时，我需要它们在各个地方。

所以我有一个配置文件，我在加载组件时初始化，然后导入我需要它的文件。它将返回相同的对象，因为javascript。

即

// ./apiService
import cmsSettings from '../cmsSettings';
...

const get = () => {
  const url = `${BaseUrl}?id=${cmsSettings.settings.context.ee}&lang=${cmsSettings.settings.context.locale}`;

  return Request.get(url).then(response => response.body.data);
};

export default {
  get,
};

我的另一个问题是我有这个初始化函数，它还有一些好处，可以让我在单元测试中“模拟”对象。

任何意见，建议，反对？

Answer 1

为此我在React应用程序中使用dotenv。它使您能够使用配置变量指定.env文件。

例如：

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

然后，您可以在应用程序的任何位置引用这些变量，如下所示：

const db = require('db')
db.connect({
  host: process.env.DB_HOST,
  username: process.env.DB_USER,
  password: process.env.DB_PASS
})

此方法更简洁，允许您将私有设置，API密钥以及服务器或数据库信息保留在版本控制之外。

这也是create-react-app中处理环境变量的官方方式。有关详细信息，请参阅此处：adding-development-environment-variables-in-env

希望有所帮助！

Answer 2

它更像是Global \ Singleton模式，并且存在同样的问题，在您的情况下，最大的2个是：

难以测试（使用依赖注入，您可以传递自定义配置更方便）
难以维护\重写（如果更改文件名，则需要更改进口）

还有很多人......

依赖注入更好，或者您可以使用依赖容器框架当然这取决于项目规模，如果它很小，这个解决方案就可以了。

在javascript / react

2 个答案: