Magento 2配备了范围广泛的JS小部件，从警报、标签到导航。Widgets提供基本功能，同时在整个Magento网站中保持其设计和使用的一致性。虽然每个小部件都有多个变量供开发人员使用，但您通常会发现它们的功能有限，需要对其进行扩充。

在本文中，我们将讨论如何扩展Magento 2中的Javascript小部件及其用例
根据Magento 2的标准，您的定制JS应放置在：
主题的<theme_dir>/web/js
<theme_dir>/<VendorName>_<ModuleName>/web/js
<module_dir>/view/<area>/web/js

此外，要使用自定义JS，您可能需要创建requirejs-config。主题或模块中的js文件。此文件必须放置在<theme_dir>、<theme-dir>/<module_dir>或<module.dir>/view/<area>中，与上面列出的3个JS位置相对应。

继承Magento widget

假设我们有一个名为Magenet_WidgetMod的自定义模块，并且我们的自定义JS组件位于app/code/Magenest/WidgetMod/view/frondend/web/JS/extendedwidget。js，对应前端区域。

该组件必须定义：

jquery（jquery）

原始小部件

自定义组件所需的任何其他依赖项。

然后，此组件使用$。小部件定义扩展Magento小部件的自定义小部件，并返回此自定义小部件。

例如，要扩展Magento的模式小部件：

define([
    'jquery',
    'jquery/ui',
    'Magento_Ui/js/modal/modal'
], function ($) {

    $.widget('magenest.modal', $.mage.modal, {
        //modify functions and variables here
    });

    return $.magenest.modal;
});

继承