前言
在前端开发中，有很多场景需要使用到 checkbox 或 radio 等表单元素，为了实现选中或取消选中时的效果，我们需要使用一些 JS 代码处理这些事件。而在 Polymer 中，我们可以使用 npm 包 @npm-polymer/iron-checked-element-behavior 来快速定义一个具有选中或取消选中功能的自定义元素。
安装
npm install --save @npm-polymer/iron-checked-element-behavior
使用方法
为了使用 @npm-polymer/iron-checked-element-behavior，我们需要在 Polymer 中定义一个自定义元素，通过 mixin 的方式引入该 npm 包提供的 behavior，即可为这个元素添加选中或取消选中功能。
-- -------------------- ---- -------
----- ------------ -------------------------------------------------------
----- ------------ ---------------------------------------------------------------------------------------------------
----------- -----------------
----------
------ --------------- ------------------------------
------------------------
-----------
--------
----- ---------- ------- ---------------------------------------------------- ---------------- -
------ --- ---- - ------ -------------- -
------ --- ------------ -
------ -
-------- -
----- --------
------ ------
--
------ -
----- -------
------ --- ----------
--
--
-
-- -----------
-
------------------------------------------- ------------
---------
-------------在上面的示例代码中，我们定义了一个名为 my-checkbox 的自定义元素，它继承了 Polymer.Element，同时混入了 IronCheckedElementBehavior。在 properties 中定义了 checked 和 label 两个属性，其中 checked 为 Boolean 类型，并设置默认值为 false，在模板中绑定了 input 的 checked 属性和 label 的文本内容。
此时，我们就可以在 HTML 页面中使用 my-checkbox 元素了。
<body>
<my-checkbox checked="{{isChecked}}" label="My Checkbox"></my-checkbox>
</body>教程说明
mixinBehaviors
Polymer 提供了 mixinBehaviors 方法，可以实现将多种 behavior 同时添加到一个自定义元素中。在上面的示例代码中，我们使用了该方法将 IronCheckedElementBehavior 添加到了 MyCheckbox 类中。
properties
在 properties 中定义的属性可以在模板中使用 {{propName}} 的方式进行双向绑定，也可以通过 this.propName 的方式在 JS 代码中获取或修改属性值。
生命周期函数
在自定义元素中还可以定义一些生命周期函数，如 connectedCallback、disconnectedCallback、attributeChangedCallback 等，用于在元素被创建和销毁或属性值发生改变时进行相应的操作。
总结
通过使用 @npm-polymer/iron-checked-element-behavior，我们可以快速为自定义元素添加选中或取消选中的功能，极大地增强了自定义元素的可复用性和通用性。同时，使用 Polymer 的语法规范和生命周期函数等，可以让我们更好地理解前端组件化开发的基本理念和思想，提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fec81e8991b448ddaf8