简介
@rpapeters/app-localize-behavior是一个基于Polymer的NPM包，可以实现Web应用程序的本地化。 它提供了一个通用的行为，允许将文本翻译为多种语言，以及将图像等其他文件根据国家地区进行本地化。
使用方法
在你的网站中使用@rpapeters/app-localize-behavior，你需要遵循以下步骤：
步骤 1：安装依赖项
首先，我们需要安装@rpapeters/app-localize-behavior和Polymer，将其作为我们的项目的依赖项：
npm install --save @rpapeters/app-localize-behavior polymer
步骤 2：导入行为
在您的Web组件中，您需要从@rpapeters/app-localize-behavior中导入本地化行为。 另外，为了更好地组织代码，我们还将在此处创建一个locales目录，并在其中放置我们的本地化资源。
-- -------------------- ---- -------
------ - ----- -------------- - ---- --------------------------------------
------ - -------------- - ---- ---------------------------------------
------ - ------------------- - ---- ------------------------------------------------------------
----- ----------- ------- ------------------------------------- --------------- -
------ --- ---------- -
------ -----
--------------------------------------
--
-
------ --- ------------ -
------ -
--------- -
----- -------
------ ----
-
--
-
------------- -
--------
------------------------------------
-
-
------------------------------------- -------------在本例中，我们将AppLocalizeBehavior用作我们的组件行为。我们的组件将显示一个“hello-world”的本地化字符串，其中“hello-world”是我们在locales.json文件中定义的本地化资源的键。
步骤 3：定义本地化资源
在locales目录中创建一个locales.json文件，并在其中定义所需语言的本地化资源:
{
"en": {
"hello-world": "Hello, World!"
},
"fr": {
"hello-world": "Bonjour le monde!"
}
}在本例中，我们定义了英语（"en"）和法语（"fr"）版本的"hello-world"字符串。
步骤 4：切换语言
要切换语言，可以通过将language属性设置为所需的语言来轻松修改应用程序语言。
this.language = 'fr';
在这种情况下，AppLocalizeBehavior将加载locales.json文件中法语的本地化资源，并在应用程序中使用。
示例应用程序
我们通过一个示例应用程序来说明@rpapeters/app-localize-behavior如何工作。示例应用程序将显示两个文本字符串（“hello-world”和“current-date”），并显示一个图像，具体取决于所显示的语言。
步骤 1：创建HTML文件
首先，我们需要创建一个HTML文件来定义我们的示例应用程序。 在本例中，我们将使用Polymer框架，因此需要从Polymer中导入所需的元素和混合物。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------------------- --------------- ------- ------------- ------------------------------------------------------------- ------- ------------- ---------------------------------- ------- ------ ----------------------------- ------- -------
在此示例中，我们将使用MyComponentWeb组件来显示我们的文本和图像。 我们还将在文件头部导入我们的本地化资源文件。
步骤 2：创建Web组件
我们需要创建MyComponentWeb组件来托管我们的字符串和图像。 为此，我们将创建一个新的HTML文件，并定义组件模板。
-- -------------------- ---- -------
----------- ------------------
----------
--------------------------------------
---- ----------------------------- ------------------------------- --
----------------------------
-----------
--------
------ -
--------------
- ---- ---------------------------------------
------ -
-----
--------------
- ---- --------------------------------------
------ -
-------------------
- ---- ------------------------------------------------------------
----- ----------- ------- ------------------------------------- --------------- -
------ --- ---------- -
------ ---- -
------------------------------------------
---- --------------------------------- ----------------------------------- --
--------------------------------
--
-
------ --- ------------ -
------ -
--------- -
----- -------
------ -----
--------- ------------------
-
--
-
------ --- ----------- -
------ -------------------------------
-
------------- -
--------
------------------------------------
-
---------------------- -
-- ------- ------ --- --------- -
-------------------- - -----
---------------- - -----
------------------------------------
-
-
--- --------------- -
----- ---- - --- -------
------ ----------------------------- -
------ ---------------------------------- -
------ ------
---
----- ------------------
---
-
-
------------------------------------- -------------
---------
-------------这个组件使用AppLocalizeBehavior行为来本地化"hello-world"和"current-date"字符串。 它还使用this.localizeImg('logo')方法来本地化图像地址，并通过this.localize('image-alt')方法本地化图像的alt属性。
它还包括一个格式化当前日期的组件属性formattedDate。
注意loadResources函数将本地化资源加载到_resources对象中。这个对象包含我们的本地化资源信息。
步骤 3：创建本地化资源
在locales目录中创建一个locales.json文件，并在其中定义所需语言的本地化资源:
-- -------------------- ---- -------
-
----- -
-------------- ------- --------
--------------- ------ -- --------- ----------
------------ ---- ------- -----
--
----- -
-------------- -------- -- --------
--------------- ------------ --- -- --------- ----------
------------ ------ ---- -------------
-
-在本例中，我们定义了英语（"en"）和法语（"fr"）版本的"hello-world"字符串，"current-date"和"image-alt"。我们使用了{{month}}和{{year}}占位符，在运行时填充日期信息。
步骤 4：创建图像
最后，我们需要准备我们的本地化图像。 在本例中，我们在img标签上设置data-src属性，并使用JavaScript代码将其属性值替换为本地化的链接。
<img data-src="/img/logo.png" id="logo" />
我们可以使用以下JavaScript代码完成替换：
const logo = document.getElementById('logo');
logo.src = this.localizeImg('logo');总结
@rpapeters/app-localize-behavior很容易使用，可帮助我们将文本和图像本地化到多种语言。 在使用时，请确保给出本地化资源的正确语言代码和键，以便能够正确加载和显示本地化文本和图像。 希望这篇文章对您有所帮助，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583aea