前言
前端开发中，组件化极为重要。使用组件化能够方便构建复杂应用，提高代码复用性和可维护性。本文将介绍如何使用 Custom Elements 和 Polymer 实现高可重用性的组件。
Custom Elements
Custom Elements 是 Web Components 规范中的一部分，它提供了一种自定义 HTML 元素的方式。使用 Custom Elements，我们可以创建自己的 HTML 标签，并用之代替传统的 div、span 等标签。
定义 Custom Elements
定义 Custom Elements 非常简单，只需要继承 HTMLElement 类，实现一些自定义方法即可。
下面是一个自定义标签的示例代码：
<my-custom-tag></my-custom-tag>
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- ------
----------------- --------
-------- -----
-
--------
--------- -----------
--------- ------- -----------
--
--------------------------------------------------------------
-
-
-------------------------------------- -------------在上面的代码中，我们定义了一个 MyCustomTag 类，它继承自 HTMLElement。
MyCustomTag 类的 constructor() 方法中，我们调用了父类 HTMLElement 的 constructor() 方法，创建了一个 Shadow DOM，然后使用 createElement() 方法以及 innerHTML 属性创建了一个 template。
最后，我们将 template 元素的内容克隆到 Shadow DOM 中。
使用 Custom Elements
使用 Custom Elements 和传统的 HTML 标签是一样的，只需要在 HTML 中使用 custom-elements 标签即可。
<my-custom-tag></my-custom-tag>
在上面的代码中，我们定义了一个自定义标签 my-custom-tag，并将其引用到了文档中。
Custom Elements 兼容性
目前，Custom Elements 的兼容性还不是很好，只有 Chrome 和 Safari 支持。不过，随着 Web Components 规范的推进，这个问题会逐渐得以解决。
Polymer
Polymer 是一个基于 Web Components 规范的库，它提供了一种简单的方式来创建可重用的组件。
基本用法
Polymer 定义组件的方式和 Custom Elements 类似。不同的是，Polymer 提供了一些工具函数和生命周期函数，方便开发者处理组件的数据和逻辑。
下面是一个在 Polymer 中定义组件的示例代码：
-- -------------------- ---- -------
----- ------------ --------------------------------------------------------
----------- --------------------
----------
------ ----- -------
----- ------- ------
-----------
--------
----- ------------ ------- --------------- -
------ --- ---- - ------ ----------------- -
------ --- ------------ -
------ -
------ -------
-------- ------
--
-
-
-------------------------------------- --------------
---------
-------------在上面的代码中，我们首先引入了 Polymer 库，然后使用 dom-module 标签定义了一个模块。
模块中包含了模板和定义组件的脚本。在脚本中，我们定义了一个 MyPolymerTag 类，并继承自 Polymer.Element。
在 MyPolymerTag 类中，我们定义了一个静态方法 is()，用来指定组件的名字。另外，我们还定义了一个静态方法 properties()，用来定义组件的属性。
在 properties() 方法中，我们定义了 title 和 content 两个属性，它们的类型都是 String。
最后，我们将 MyPolymerTag 类定义为一个 Custom Elements。
使用 Polymer
在 HTML 中使用 Polymer 组件非常简单，只需要在 HTML 中使用自定义标签，并设置组件的属性即可。
<my-polymer-tag title="Hello World!" content="Polymer example"></my-polymer-tag>
在上面的代码中，我们使用了自定义标签 my-polymer-tag，并设置了 title 和 content 两个属性的值。
Polymer 兼容性
Polymer 的兼容性比 Custom Elements 要好一些，它支持最新版本的 Chrome、Safari 和 Firefox 浏览器。
结语
本文介绍了如何使用 Custom Elements 和 Polymer 实现高可重用性的组件。Custom Elements 是 Web Components 规范中的一部分，提供了一种自定义 HTML 元素的方式；Polymer 则是一个基于 Web Components 规范的库，提供了一些工具函数和生命周期函数，方便开发者处理组件的数据和逻辑。希望本文能够给你带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6782172c935627c900f67e7f
