在现代 Web 应用程序开发中，Web Components 技术作为一种新兴的技术，受到了越来越多的关注和重视。Web Components 允许开发者将页面拆分成独立的组件，每个组件都具有自己的 API 和 DOM，这使得开发者可以更加灵活和可溯源地开发和维护 Web 应用程序。Polymer 是一种基于 Web Components 技术的框架，具有良好的兼容性和扩展性，使用 Polymer 可以大大提高 Web 应用程序的开发效率和代码质量。本文将详细讲解如何使用 Polymer 开发基于 Web Components 的应用程序。
什么是 Web Components？
Web Components 是一种新兴的 Web 技术，提供了一种在 Web 应用程序中编写可复用组件的标准方式。Web Components 由三个标准组成：
- Custom Elements：自定义元素。
- Shadow DOM：影子 DOM。
- HTML Templates：HTML 模板。
Custom Elements 允许开发者在 HTML 文档中定义自己的元素，这些元素可以包含自己的 HTML 和 CSS 样式，还可以具有自己的 JavaScript 逻辑。Shadow DOM 允许开发者将元素的样式和行为封装在一个独立的、受保护的 DOM 中，使得这些元素对外部组件的影响最小化。HTML Templates 允许开发者编写可重用的 HTML 代码片段，并通过 JavaScript 将这些代码片段插入到页面中。
Web Components 技术的一个重要优势是它的可重用性。开发者可以将组件定义在一个应用程序中，然后将该组件用于其他应用程序中。这使得组件具有更好的可扩展性和可维护性。
Polymer 框架介绍
Polymer 是一个基于 Web Components 技术的框架，由 Google 开发并维护。Polymer 提供了一系列强大的工具和库，使得开发者可以快速地创建复杂的 Web 应用程序和组件。Polymer 使用 HTML、CSS、JavaScript 和 Web Components 标准，与其他前端框架（如 Angular、React）兼容，并且使用起来非常简单。
Polymer 框架可以帮助开发者更好地封装组件，使用 Shadow DOM 和 HTML Templates 可以使组件结构性更好、可读性更强、可维护性更高。同时，Polymer 框架还提供了强大的样式系统和事件处理机制，使得开发者可以更加清晰和简单地定义组件的样式和行为。
Polymer 组件的创建和使用
Polymer 组件是基于 Web Components 技术的，创建组件需要用到 Custom Elements、Shadow DOM 和 HTML Templates 三个 Web Components 标准。下面我们将分别介绍如何创建和使用 Polymer 组件。
创建 Polymer 组件
要创建一个 Polymer 组件，我们要使用 Polymer 元素的定义语法。具体来说，我们需要使用 Polymer() 函数来定义组件，这个函数接收一个参数对象，包含了组件的名称、属性、方法和事件等信息。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ----------------
------- -----------------------------------------------------------------------
------- --------------
------ - --------------- ---- - ---- --------------------------------------------------------------------
---------
--- ----------------
----------- -
----- -
----- -------
------ ---------
-
--
--------- ---------- -
------------- - - --------- - -----
-
---
---------
-------
------
-------------------------------
-------
-------在上面的代码中，我们定义了一个名为 hello-polymer 的 Polymer 元素，并指定了它的属性（name）和方法（sayHello）。在代码中，我们将 Polymer 元素的定义代码直接嵌入在 HTML 页面中，这样使得 Polymer 元素成为了自定义的 HTML 标签。最后，我们通过 <hello-polymer> 标签来使用 Polymer 元素。
使用 Polymer 组件
使用 Polymer 组件很简单，只需要在 HTML 页面中引用组件的定义代码，然后在需要使用组件的地方使用组件的自定义元素即可。使用 Polymer 组件可以像使用 HTML 元素一样简单，而组件的内部逻辑和状态都被 Polymer 框架封装在影子 DOM 内部，我们只需要关心组件的对外 API 即可。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ----------------
------- -----------------------------------------------------------------------
------- --------------
------ - --------------- ---- - ---- --------------------------------------------------------------------
---------
--- ----------------
----------- -
----- -
----- -------
------ ---------
-
--
--------- ---------- -
------------- - - --------- - -----
-
---
---------
-------
------
-------------- --------- ----------------------------
-------------- -------------------------------
-------
-------在上面的代码中，我们使用了两个 <hello-polymer> 标签，分别传入了不同的 name 属性值。在组件内部，我们可以通过 this.name 来获取属性值，在 sayHello 方法中弹出了一个提示框。
基于 Polymer 的 TodoMVC 示例应用
我们可以借助 Polymer 框架，快速构建一个 TodoMVC 示范应用。TodoMVC 是一系列关于如何使用不同的前端框架来实现一个 Todo 应用的示范，可以帮助开发者熟悉前端框架的使用。下面，我们将介绍如何使用 Polymer 框架来实现 TodoMVC 示例应用。
安装 Polymer
Polymer 框架已经成为 Google 对 Web Components 的标准实现，使用起来非常简单。在开始实现 TodoMVC 示例应用时，我们需要事先安装 Polymer。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ------- ---------------
------- -----------------------------------------------------------------------
------- --------------
------ - --------------- ---- - ---- --------------------------------------------------------------------
---------
-------
------
------ ------- ------------
-------
-------实现 TodoMVC
在 Polymer 组件的帮助下，我们可以根据 MVC 模式来实现 TodoMVC 程序。具体来说，我们将实现一个名为 todor-app 的 Polymer 组件，它将包括一个 todo-list 组件和一个 todo-input 组件。
创建 todo-input 组件
首先，我们来实现 todo-input 组件，它是一个输入框，可以用于添加新的 Todo 项。对于新增的 Todo 项，我们需要将它们添加到 todo-list 列表中。
-- -------------------- ---- -------
----------- ----------------
----------
---- -------------------
------ ----------- -------------------- ----------------- ----- -- -- ------ --------------------
------
-----------
--------
----- --------- ------- -------------- -
------ --- ---- - ------ ------------- -
--------------- -
-- -------------- --- -- -- ------------------- -
---------------------- ------------------------- - ------- ------------------ ----
------------------ - ---
-
-
-
----------------------------------- -----------
---------
-------------在上面的代码中，我们使用了 Polymer 的 <dom-module> 标签来定义一个名为 todo-input 的 Polymer 组件。_addTodo 事件处理程序会在用户输入回车时触发，向外发射一个名为 todo-added 的事件，可以用于通知 todo-list 组件更新 Todo 列表。这样就实现了一个供用户添加新 Todo 项的输入框。
创建 todo-list 组件
接着，我们来实现 todo-list 组件，它是一个展示 Todo 列表并且可以进行编辑和删除的组件。它接收一个表示 Todo 列表的数组作为输入，然后将列表渲染到页面上。对于每一个 Todo 项，我们可以使用编辑按钮来修改内容或者使用删除按钮来移除该项。
-- -------------------- ---- -------
----------- ---------------
----------
---- ------------------
--------- --------------- ------------------
---- ------------------
--------------- ---------------------------- ---------------------------------------------
----- ------------------ ---------------- - ----------- - ----- ------------------------------------------
---------- ------------------- ------------- -----------------------------------
------
-----------
------
-----------
--------
----- -------- ------- -------------- -
------ --- ---- - ------ ------------ -
------ --- ------------ -
------ -
------ -
----- ------
------ ---------- - ------ --- -
-
-
-
----------------------- -
----- ---- - -----------------
-------------- - -------------------
---------------------- --------------------------- - ------- ---- ----
-
----------- - -- ---- ---- -- -
------------- - -- ------ ---- -- -
-
---------------------------------- ----------
---------
-------------在上面的代码中，我们定义了一个名为 todo-list 的 Polymer 组件，并使用 <template is="dom-repeat"> 标签来遍历 todos 数组，渲染每个 Todo 项的视图。对于每个 Todo 项，我们展示了一个paper-checkbox 元素、一个文本框、和一个删除按钮。对于选中的 Todo 项，我们将其标记为 “completed” 并在文本框上增加删除线效果。
创建 TodoMVC 应用
最后，我们来绑定 todo-app 组件中的 todo-list 和 todo-input 组件。我们可以通过将这两个组件嵌在 todo-app 组件内部，使用相应的事件管理机制来建立它们之间的联系。
-- -------------------- ---- -------
----------- --------------
----------
-------
-- ---------- --
--------
----------- --------------------------------------
---------- ----------------- ------------------------------------------
-----------
--------
----- ------- ------- -------------- -
------ --- ---- - ------ ----------- -
------ --- ------------ -
------ -
------ -
----- ------
------ ---------- -
------ -
- ------ ------ --------- ---------- ---- --
- ------ ------ -- ----- ---------- ----- --
- ------ ------- -- ---------- ---------- ----- -
--
-
-
-
-
---------- - -- --- ---- -- -
------------- - -- ------ ---- -- -
-
--------------------------------- ---------
---------
-------------在上面的代码中，我们创建了一个名为 todo-app 的 Polymer 组件，并在模板中嵌入 todo-input 和 todo-list 组件。同时，我们还定义了一个名为 todos 的数组，它包含了初始化的 Todo 列表。我们也定义了一些事件处理程序来进行添加、编辑和删除 Todo 项的操作。
结论
Polymer 是一个非常强大的基于 Web Components 技术的框架，可以帮助开发者更好地构建可重用的组件，满足 Web 应用程序的日益增长的需求。本文介绍了如何使用 Polymer 框架来创建 Web Components 和实现 TodoMVC 示例应用。通过学习本文，你可以更好地理解 Polymer 框架的工作原理和使用方法，将 Web Components 技术应用到实际的应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f69073c5c563ced589a067