什么是 Polymer?
Polymer 是由 Google 开发的一个开源 JavaScript 库，旨在帮助开发者构建可重用的 Web 组件，简化前端开发流程，并提高代码可复用性。通过 Polymer，开发者可以使用自定义元素，简化 HTML/CSS/Javascript 代码，让你的代码更加模块化，更加易于维护和重用。
什么是 Web Components？
Web Components 是一种基于 Web 平台的技术架构，旨在提供符合标准和跨平台的自定义 HTML 元素和模板，提高前端代码的可重用性和组件化程度。Web Components 是构建复杂 Web 应用的一种方式，也可以用于开发桌面端应用、移动端应用等多平台应用。
使用 Polymer 构建 Web Components
Polymer 提供了一系列 API，使开发者能够轻松构建 Web Components。下面是一个简单的 Polymer Web Component 示例:
Polymer Web Component 示例代码
-- -------------------- ---- -------
---- --------- ---------- ---
----------- ----------------
----------
-------
-- -
------ ----
-
--------
--------- -----------
-----------
--------
---------
--- ------------
---
---------
-------------
---- - ---- ----- ---------- -- ---
-------------------------在上面的代码中，我们定义了一个自定义元素 my-element，包含了一个 h1 元素和一些样式。通过 Polymer 的 is 属性，我们将这个元素作为 Polymer Web Component 定义。在 HTML 页面中，我们可以直接使用这个自定义元素，并且它能够在任何页面上运行。
Polymer Web Component 核心概念
自定义元素
自定义元素是 Web Components 的核心概念之一，它们允许你创建你自己的 HTML 标签，以及相应的 DOM 元素和样式表。Polymer 的自定义元素是通过使用 Polymer() 构造函数来定义的。
Shadow DOM
Shadow DOM 是 Web Components 的另一个核心概念，它允许你将自定义元素的样式和行为封装在它自己的 DOM 节点中。在这个节点之外的 DOM 不会影响到它，也不会被它影响到。
在 Polymer 中，Shadow DOM 默认是启用的，我们可以使用 <dom-module> 标记来定义和使用 Shadow DOM。
Templates
模板是一个基本的编程元素，是重用代码和组件的核心。Polymer 支持使用 <template> 元素定义模板，它的内容可以作为 Web Component 的内部结构。
在模板中，你可以使用 Polymer 的数据绑定机制，将数据绑定到模板中的元素，从而实现 Web Components 的交互效果。
数据绑定
数据绑定是 Polymer 的核心功能之一，它可以让我们在模板和 Web Component 中动态更新数据。数据绑定是通过使用双向绑定表达式：{{}} 来实现的。
Polymer 可以将属性或方法返回的值与 HTML 元素或 Web Component 中的属性或方法绑定。例如：
-- -------------------- ---- -------
----------
--------- --------------
-----------
--------
---------
--- -------------
----------- -
----- ------
-
---
---------在上面的代码中，我们定义了一个 <template>，并且使用双向绑定表达式绑定了 name 属性。当我们在 my-element 元素中更新 name 属性时，模板会自动更新，显示最新的值。
总结
通过 Polymer，我们可以轻松地构建 Web Components，这使得前端代码更加可复用和可维护。在本文中我们介绍了 Polymer Web Component 的核心概念，包括自定义元素，Shadow DOM，模板和数据绑定等。通过学习本文，你可以了解 Polymer Web Component 的基本结构和开发流程，为你的前端开发工作提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485b1a848841e98944700f3