如何导入为对象的新副本？答案

【问题标题】：How to import as a new copy of object?如何导入为对象的新副本？
【发布时间】：2018-06-27 08:20:09
【问题描述】：

在我的 react 应用程序中，我想在 2 个具有不同设置的组件中使用库 (money.js)。

这个库：
http://openexchangerates.github.io/money.js/
http://openexchangerates.github.io/money.js/money.js

我检查了 javascript 正在使用引用，因此这两个组件实际上引用了相同的东西。

Does import create a new copy of imported library?

ES6 variable import by reference or copy

是否可以在不更改源代码的情况下（理想情况下），我可以执行以下操作

// a.js
import fx from 'money'
fx.rates={USD:1, EUR: 2.001}

// b.js
import fx from 'money'
fx.rates={USD:1, EUR: 2.002}

在我的情况下，我注意到在 b.js 中更改费率也会影响 a.js。

【问题讨论】：

可以在这里找到对 JS 模块生态系统的一个很好的解释 - medium.freecodecamp.org/…。由于 ES6 模块是实时且只读的副本，因此您必须在另一个 jS 对象（如果可能的话，服务）中维护您的“速率”或任何特定于模块的配置。只需在这样创建的服务中使用我为您的特定库提供的实用程序即可。希望对您有所帮助！
How do I correctly clone a JavaScript object?的可能重复
@AmanshuKataria - 不，模块比简单对象复杂得多。
@ShobhitChittora - ES2015 模块不是只读的。它们是共享的。

标签： javascript reactjs webpack ecmascript-6

【解决方案1】：

不，没有通用的万能方法来克隆一个模块或加载它的单独副本。你也许可以做到，但这取决于模块的具体编码方式。

不幸的是，您使用的库没有实例的概念，而不是使所有内容都对库全局化。您可以考虑将该概念添加到库中并向原始存储库发送拉取请求（如果他们拒绝，您始终可以创建一个分支）。

【讨论】：

谢谢。我想我将只使用一个额外的变量来存储和恢复费率，只要我想使用 fx

【解决方案2】：

您可以在每个文件中克隆该比率对象：-

var localRatesVariable = Object.assign({}, fx.rates);

【讨论】：

这不是深度克隆。每个引用属性都将指向原始对象中的相同属性。

【解决方案3】：

模块被评估一次，这是它们的主要属性之一。可以在某些支持它的环境（Node.js）中重新评估模块，但不能在客户端应用程序中重新评估。

在这种情况下，库是hard-coded to use fx.rates object。即使被复制了，它也会继续使用它。

正确的方法是修改库源代码以支持多个实例。

另一种方法是创建一个包装器，该包装器可以破解库以使其行为符合预期。考虑到它是convert 方法使用fx.rates 并且是同步的，可以在调用期间对其进行修补以交换rates 属性：

import fx from 'money'

export default function fxFactory(rates) {
  return Object.assign({}, fx, {
    convert(...args) {
      let convertResult;
      const ratesOriginal = fx.rates;
      try {
        fx.rates = rates;
        convertResult = fx.convert(...args);
      } finally {
        fx.rates = ratesOriginal;
      }
      return convertResult;
    }
  });
}

// a.js
import fxFactory from './fx'
const rates={USD:1, EUR: 2.001};
const fx1 = fxFactory(rates);

【讨论】：

【解决方案4】：

你可以深拷贝对象：

let localRatesVariable = JSON.parse(JSON.stringify(fx.rates));

【讨论】：

【解决方案5】：

您只需将查询参数添加到模块文件路径即可：

// a.js
import fx from 'money?first'
fx.rates={USD:1, EUR: 2.001}

// b.js
import fx from 'money?second'
fx.rates={USD:1, EUR: 2.002}

【讨论】：