在前端开发中，我们经常需要定义一些可复用的行为（behaviors）来使我们的组件更具有可扩展性和可重用性。@polymer/paper-behaviors 是一个针对 Polymer 组件集的行为库，提供了常见的组件行为实现，包括键盘操作、观察属性、渐进式展开和折叠等等。本文将介绍这个 npm 包的使用方法和示例。
安装和使用
为了使用 @polymer/paper-behaviors，您需要首先引入它。通过 npm 安装并在需要使用的地方引入即可：
npm install @polymer/paper-behaviors
import { KeyboardMixin } from '@polymer/paper-behaviors/keyboard-behavior.js';在您的 Polymer 元素声明中，使用 behavior 属性来指定在元素中混入行为：
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { KeyboardMixin } from '@polymer/paper-behaviors/keyboard-behavior.js';
class MyElement extends KeyboardMixin(PolymerElement) {
static get is() { return 'my-element'; }
// ...
}键盘操作行为示例
@polymer/paper-behaviors 提供了 KeyboardBehavior，可以帮助我们实现常见的键盘操作，例如从键盘触发的激活（activate）和取消激活（deactivate），以及从键盘触发的焦点导航（focus navigation）。
-- -------------------- ---- -------
------ - -------------- - ---- --------------------------------------
------ - ------------- - ---- ------------------------------------------------
----- --------- ------- ----------------------------- -
------ --- ---- - ------ ------------- -
------ --- ------------ -
------ -
---------- -
----- --------
------ -----
-
--
-
------------------ -
-------------- - -----
-
-------------------- -
-------------- - ------
-
----------------- -
------------------------
------ -------------- -
---- --------
------------------------
------
---- ---------
--------------------------
------
-
-
-在上面的示例中，我们通过混入 KeyboardBehavior，为元素添加了 KeyboardEvent 特性，实现了 enter 键和 escape 键的激活和取消激活功能。
总结
@polymer/paper-behaviors 是一组常用的 Polymer 组件行为实现，可以帮助我们在开发过程中避免重复的代码编写，并使我们的组件更具有可扩展性和可重用性。通过本文所介绍的方式，我们可以方便地在我们的项目中使用这些行为，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7558f4a9b7065299ccbcb3