jQuery UI 是一个流行的前端框架，提供了许多可重用的 UI 组件。其中，Widget 组件是一种基础组件，可以被用来构建更高级的组件。本文将介绍如何扩展 jQuery UI Widget 以构建自定义组件。
Widget 组件简介
Widget 是 jQuery UI 中最基础的组件之一，它提供了一些常用的功能，比如事件绑定、选项设置、方法调用等。除此之外，Widget 还有一个非常重要的特性：它可以被扩展。通过继承 Widget，我们可以创建自定义组件，并利用 Widget 提供的基础功能。
扩展一个 Widget
为了扩展一个 Widget，我们需要执行以下步骤：
- 创建一个新的 Widget 类，并继承原来的 Widget 类。
- 添加新的选项和方法，或者覆盖原来的选项和方法。
- 在 _create() 方法中初始化组件。
- 在 _setOption() 方法中处理选项变化。
- 在 destroy() 方法中清理组件。
下面是一个实现示例：
-- -------------------- ---- -------
--------------------------- ------------ -
-------- -
--------- ----
--
-------- ---------- -
--------------
-- -----
--
----------- ------------- ------ -
------ ----- -
---- -----------
-- -- -------- --
------
--------
-- --------------
---------------- -------
------
-
--
--------- ---------- -
-- ------
--
--------- ---------- -
--------------
-- ----
-
---在上面的代码中，我们定义了一个名为 myWidget 的新 Widget 类，并继承自 $.ui.widget。我们添加了一个新的选项 myOption，并在 _create() 方法中初始化组件。同时，我们还添加了一个新的方法 myMethod。在 _setOption() 方法中，我们处理了 myOption 的变化，并调用了父类方法处理其他选项的变化。最后，在 _destroy() 方法中，我们清理了组件。
使用扩展后的 Widget
使用我们扩展后的 Widget 和使用原生 Widget 是类似的。首先，我们需要引入 jQuery UI 和我们自己的 JS 文件：
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="mywidget.js"></script>
然后，我们可以像使用任何其他 Widget 一样来使用我们的组件：
$("#my-element").myWidget({
myOption: "myValue"
});
$("#my-element").myWidget("myMethod");在上面的代码中，我们将 myWidget 应用到一个元素上，并设置 myOption 选项的值。我们还调用了 myMethod 方法。
总结
通过继承并扩展 jQuery UI Widget，我们可以创建自定义组件，并利用 Widget 提供的基础功能。在编写自己的组件时，我们需要按照一定的规范来编写代码，并确保良好的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29036