前言
在前端开发中，组件化是一个非常重要的概念。通过组件化的开发方式，可以将页面拆分成多个独立的组件，每个组件都有自己的功能和样式，可以被复用和拓展。而 Polymer 和 Custom Elements 是两个非常有用的技术，可以帮助我们实现可拓展的组件。
Polymer 简介
Polymer 是一个由 Google 推出的 Web 组件库，它基于 Web Components 技术，提供了一些方便的组件开发工具和 API。Polymer 的核心理念是“声明式组件”，即通过声明 HTML 标签来定义组件，而不是通过 JavaScript 代码。
Custom Elements 简介
Custom Elements 是一个 Web Components 的标准，它允许开发者自定义 HTML 元素，并且可以添加自定义行为。Custom Elements 的 API 包括两个主要的方法：customElements.define() 和 Element.attachShadow()。
如何使用 Polymer 和 Custom Elements 构建可拓展组件
下面我们将介绍如何使用 Polymer 和 Custom Elements 构建可拓展组件。
步骤一：定义 Custom Element
首先，我们需要定义一个 Custom Element。在这个例子中，我们将创建一个简单的按钮组件。
-- -------------------- ---- -------
--------- ------------------------
-------
------ -
----------------- --------
------- -----
------ ------
-------- ---- -----
----------- -------
---------------- -----
-------- -------------
---------- -----
------- --- ----
------- --------
-
--------
------------- -----------
-----------
--------
----- -------- ------- ----------- -
------------- -
--------
----- -------- - ----------------------------------------------
----- --------------- - -----------------
----- ---------- - ------------------------ --------
----------------------------------------------
-
-
---------------------------------- ----------
---------在这个例子中，我们首先定义了一个 <template> 元素，用来存放按钮的 HTML 和 CSS 代码。然后我们创建一个 MyButton 类，继承自 HTMLElement。在 MyButton 类的构造函数中，我们获取了 <template> 元素的内容，并且将它添加到 Custom Element 的 Shadow DOM 中。最后，我们使用 customElements.define() 方法将 MyButton 类注册为一个 Custom Element，它的标签名为 my-button。
步骤二：创建 Polymer 组件
接下来，我们需要使用 Polymer 来创建一个可拓展的组件。在这个例子中，我们将拓展刚才创建的按钮组件，添加一些新的功能。
-- -------------------- ---- -------
----------- ---------------
----------
-------
---------- -
----------------- --------------------------------- ---------
------- -----
------ ------
-------- ---- -----
----------- -------
---------------- -----
-------- -------------
---------- -----
------- --- ----
------- --------
-
--------
------- ------------------------------------
-----------
--------
----- -------- ------- --------------- -
------ --- ---- - ------ ------------ -
------ --- ------------ -
------ -
------ -
----- -------
------ ------ ---
-
-
-
-
---------------------------------- ----------
---------
-------------在这个例子中，我们使用了 Polymer 的 dom-module 元素来创建一个新的组件。在 dom-module 元素中，我们定义了组件的 HTML 和 CSS 代码。我们使用了 Polymer 的数据绑定语法 {{}} 来绑定按钮的标签文本。我们还定义了一个 label 属性，用来设置按钮的标签文本。
在 script 标签中，我们创建了一个 MyButton 类，继承自 Polymer.Element。我们使用了 static get is() 方法来指定 Custom Element 的标签名，它应该和之前定义的 Custom Element 的标签名相同。我们还使用了 static get properties() 方法来定义组件的属性，包括 label 属性。
最后，我们使用 customElements.define() 方法将 MyButton 类注册为一个 Custom Element。
步骤三：拓展 Polymer 组件
现在我们已经创建了一个可拓展的 Polymer 组件。我们可以使用它来创建新的组件，并且添加一些新的功能。
-- -------------------- ---- -------
----------- --------------------
----------
-------
--------------- -
----------------- -------------------------------------- ---------
------- -----
------ ------
-------- ---- -----
----------- -------
---------------- -----
-------- -------------
---------- -----
------- --- ----
------- --------
-
--------
-- --------------- ------------------------------------
-----------
--------
----- ------------ ------- -------- -
------ --- ---- - ------ ----------------- -
------ --- ------------ -
------ -
----- -
----- -------
------ ---
-
-
-
-
-------------------------------------- --------------
---------
-------------在这个例子中，我们创建了一个新的 Polymer 组件 my-link-button，继承自之前创建的 my-button 组件。我们使用了 extends 关键字来继承 my-button 组件的功能。
在 script 标签中，我们创建了一个 MyLinkButton 类，继承自 MyButton 类。我们使用了 static get is() 方法来指定 Custom Element 的标签名，它应该和组件的名称相同。我们还定义了一个 href 属性，用来设置按钮的链接地址。
最后，我们使用 customElements.define() 方法将 MyLinkButton 类注册为一个 Custom Element。
总结
通过使用 Polymer 和 Custom Elements，我们可以很容易地创建可拓展的组件。我们可以使用 Polymer 来创建基础组件，并且通过继承和拓展来创建新的组件。这样可以大大提高代码的复用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66277c31c9431a720c424ee9