随着互联网的发展，跨语言应用的需求越来越大，所以国际化与本地化变得越来越重要。在前端开发中，Polymer 元素是一种非常流行的组件化框架。因此，本文将探讨在 Polymer 元素中实现国际化的解决方案，并提供详细指导和示例代码。
国际化的概念
“国际化”指的是在设计、开发和维护软件时，使其能够适应不同语言和文化的用户。也就是说，界面中的语言和文化可以根据用户所在的语言和文化自动切换。
Polymer 元素提供了一个称为 i18n-behavior 的模块，它能够帮助开发者将 Polymer 元素本地化。
1. 引入 i18n-behavior
在 Polymer 元素中使用 i18n-behavior 需要引入该模块：
<link rel="import" href="../bower_components/app-localize-behavior/app-localize-behavior.html">
2. 添加必要属性
接下来在 Polymer 元素中添加必要的属性用于本地化：
-- -------------------- ---- -------
----- ------------ ----------------------------------------------------------------------------
----------- ----------------
----------
------------------------------
----------------------------------
-----------
--------
---------
--- -------------
---------- ------------------------------
----------- -
--------- -
----- -------
------ ----
--
---------- -
------ ---------- -
------ -
----- -
-------- ------ --------
-------------- -------- -- -- ---------
--
----- -
-------- -------- -- --------
-------------- ---------- --- --- ---- -----
-
-
-
-
-
---
---------
-------------可以看到，添加的属性包括 language 和 resources。其中，language 用于设置当前语言，而 resources 包含了不同语言的翻译。
3. 在模板中使用本地化字符串
一旦添加了 language 和 resources 属性，就可以在模板中使用本地化字符串了，代码如下：
<h1>[[localize('title')]]</h1>
<p>[[localize('description')]]</p>这里的 localize() 函数就是在 i18n-behavior 中定义的。
4. 根据用户语言设置元素语言
为了使我们的元素随着用户的语言发生变化，我们需要根据用户的偏好设置元素的 language 属性。
可通过以下代码实现：
-- -------------------- ---- -------
---------
--- ---------
-- ---
------ ---------- -
-- ---
--- -------- - ------------------ -- -----------------------
-- ----------------------- --- -- -
------------- - -----
- ---- -
------------- - -----
-
-
---这段代码会获取用户语言偏好并将其与 resources 中的语言进行比较，从而确定要使用的语言。
总结
通过 i18n-behavior 模块，Polymer 元素可以很容易地实现本地化的功能。在开发过程中，我们应该始终考虑到用户的语言和文化习惯，以此提高用户的体验。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------- ---- ------------
----- --------------- ---------------------------- ------------------ ------------------ -------------------
------- --------------------------------------------------------
----- ------------ ------------------------------------------------
----- ------------ ----------------------------------------------------------------------------
-------
------
--------- --------------
-------------------------
-----------
----------- ----------------
----------
------------------------------
----------------------------------
-----------
--------
---------
--- -------------
---------- ------------------------------
----------- -
--------- -
----- -------
------ ----
--
---------- -
------ ---------- -
------ -
----- -
-------- ------ --------
-------------- -------- -- -- ---------
--
----- -
-------- -------- -- --------
-------------- ---------- --- --- ---- -----
-
-
-
-
-
---
---------
-------------
--------
---------
--- ---------
-- ---
------ ---------- -
-- ---
--- -------- - ------------------ -- -----------------------
-- ----------------------- --- -- -
------------- - -----
- ---- -
------------- - -----
-
-
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ebab80f6b2d6eab361e2c9