在基于模块的 JavaScript 架构中，将语言翻译定义放在哪里？

Question

目前我有这样的构造。

id: data[i].id,
headers: ["Även åsnor", "försöker på engelska"],
columns: {
  userName: data[i].firstName + " " + data[i].lastName,
  finishOn: data[i].finishOn !== null 
    ? data[i].finishOn 
    : "pågår..."
  }

我希望对上面的构造进行类似于此的改造。

id: data[i].id,
headers: [Lang.userName, Lang.completedOn],
columns: {
  userName: data[i].firstName + " " + data[i].lastName,
  finishOn: data[i].finishOn !== null 
    ? data[i].finishOn 
    : Lang.holdYourPonnies
  }

然后，我可以将所有语言字段放在一个单独的模块中并保留在那里。我在 JavaScript 从未这样做过，我对此有顾虑。

每个导入它的模块是否需要一个单独的语言模块？
或者我应该有一个单一的语言模块并多次导入它，每个需要语言的模块一次？
或者有没有办法将它导入根模块并让树中的每个人都可以使用它？

Answer 1

您可以将语言定义作为对象从 JS 模块导出或将它们保存在 JSON 文件中。语法基本相同：

{
  "FOO": "foo"
}

对比

export default {
  "FOO": "foo"
}

但是模板文字可以用于 JS 文件中的多行字符串，这显着提高了可读性。

大多数时候在某些时候需要支持变量。通常需要一个简单的模板引擎。为了简单和性能模板文字也可以在这里使用：

export default {
  FOO: "foo",
  BAR: `multiline
        bar`,
  BAZ: (val) => `template baz: ${val}`
}

这可以通过简化本地化得到有效处理 API:

import en from './en';
import se from './se';

export class L10n {
  constructor() {
    this.lang = 'en';
    this.definitions = { en, se };
  }

  switch(lang) {
    this.lang = lang;
  }

  get(token, ...templateVars) {
    const val = this.definitions[this.lang][token];

    if (typeof val === 'function')
      return val(...templateVars);
    else
      return val;
  }
}

export default new L10n;

并像这样使用：

l10n.get('FOO');
l10n.get('BAZ', 'baz value');

在基于模块的 JavaScript 架构中，将语言翻译定义放在哪里？

Where to put the language translation definition in module based JavaScript architecture?

javascript

translation

ecmascript-6