@polymer/iron-behaviors 是 Polymer 系列中一个十分强大的 mixin 类库，用于帮助开发者编写定制化丰富的行为类。本文将详细介绍 @polymer/iron-behaviors 的使用方法，并提供实用的示例代码和深入学习指南。
什么是 @polymer/iron-behaviors？
在 Polymer 中，behavior 组件是一种可以被重复使用的行为模式，可以帮助开发者快速构建定制化的组件。而 @polymer/iron-behaviors 则是一个 mixin 类库，它提供了一系列常用的 behaviors，可以用于组件的实现和扩展，只需要在组件内使用 mixin 导入即可。
@polymer/iron-behaviors 使用方法
安装
在使用 @polymer/iron-behaviors 前，需要确保项目已经安装了 Polymer，然后可以通过 npm 安装 @polymer/iron-behaviors：
npm install --save @polymer/iron-behaviors
引入
在组件中引入需要使用的 behaviors，以 iron-overlay-behavior 为例：
-- -------------------- ---- -------
------ ---------------- ---- -------------------
------ --------------------- ---- ------------------------------------------------
----- --------- ------- -------------- -
------ --- ------------ -
------ -
------- -
----- --------
------ -----
-
--
-
------ --- ---------- -
------ -
------- -------------
--
-
-
----------------------------------- -----------上述代码中，元素 MyElement 引入了 IronOverlayBehavior，可以使用其提供的一些属性和方法。
使用
在组件内使用 mixin 导入 behaviors：
-- -------------------- ---- -------
----- --------- ------- ----------------------------------- -
------ --- ------------ -
------ -
------- -
----- --------
------ -----
-
--
-
------ --- ---------- -
------ -
------- -------------
--
-
-
----------------------------------- -----------在这里，MyElement 通过使用 IronOverlayBehavior，可以从 behaviors 中继承了父类的属性和方法。
示例代码
下面是一个使用 @polymer/iron-behaviors 的示例代码，其中使用 IronOverlayBehavior 和 IronSelectableBehavior 分别实现了弹出框和 tab 组件：
-- -------------------- ---- -------
------ ---------------- ----- ---- -------------------
------ --------------------- ---- ------------------------------------------------
------ ------------------------ ---- ---------------------------------------------------
----- -------- ------- ----------------------------------- -
------ --- ------------ -
------ -
------- -
----- --------
------ -----
-
--
-
------ --- ---------- -
------ -----
-------
----- -
----------- ------
-------- -----
-------- -----
--------- ------
---- ----
----- ----
---------- --------------- ------
-
--------------- -
-------- ------
-
--------
------------ -- -- ---------------
-
------ --- ----------- -
------ -
-------------------------
--
-
---------------------- -
-- -------- -
---------------------------------
- ---- -
---------------------------------
-
-
-
---------------------------------- ----------
----- ------ ------- -------------------------------------- -
------ --- ------------ -
------ -
--------- -
----- -------
------ -
-
--
-
------ --- ---------- -
------ -----
-------
----- -
-------- ------
-
------------ -
-------- -----
-
------------------------- -
-------- ------
-
--------
---------------
-
-
-------------------------------- --------深入学习指南
- 官方文档：https://github.com/PolymerElements/iron-behaviors
- 了解 behavior 的实现原理：https://www.webcomponents.org/element/Polymer/polymer-element/elements/behavior-impl.js
- 查看 iron-behaviors 实际应用：https://www.webcomponents.org/polyfills/showcase/hn-polymer-news
结语
@polymer/iron-behaviors 是一个实用且强大的 mixin 类库，能够提高开发者的开发效率和代码质量。通过本文的介绍和示例代码，相信读者对 @polymer/iron-behaviors 的使用方法和实现原理有了更进一步的了解和掌握，能够开发出更加优秀的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f755ffaa9b7065299ccbcb9