系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》

由于Magento 2已经推出很长一段时间了，并且基于该平台的新项目正在迅速接近，毫无疑问，作为开发人员，我们需要为挑战做好充分的准备。

在这篇文章中，我将演示如何处理平台的默认javascript组件（widget实例）。更准确地说，是负责网站主导航功能的javascript组件。如果您有兴趣，请继续阅读。

### 介绍

Magento 2中主导航的前端部分是用javascript逻辑构建的，负责从移动设备的转换到台式计算机的悬停延迟计时的众多操作。在大多数情况下，默认方法就足够了，并且基本上涵盖了所有需求，但有时，在项目需要特定/自定义方法的情况下，我们迟早会发现自己处于修改默认逻辑的情况。

让我们把自己放在一个位置，我们的项目需要对主导航javascript部分进行某些修改。首先，我们需要了解该过程涉及的一些基本文件架构和技术。

Magento 2使用Require JS（AMD或异步模块加载器和jQuery/jQuery UI库）作为创建系统上当前存在的javascript组件的基础。

我不会进一步介绍requireJS，但如果您需要了解更多信息，您可以查看我们涵盖此主题的博客文章。另外，我强烈建议访问requireJS网站，以便在使用Magento 2之前获得AMD的坚实基础知识并要求JS基本用法。

另一个重要的注意事项是，jQuery UI widget factory用于提供简单的可扩展技术，与Magento 1中的旧原型类方法非常相似。如果你不熟悉jQuery UI小部件，我强烈建议你访问学习jQuery网站，其中包含小部件工厂示例，以熟悉这个概念。

### 扩展默认值

负责导航菜单功能的主文件是menu.js位于[project_root]/lib/web/mage/下，以及其他默认的js系统组件。

现在，如果我们不想扩展或覆盖它，我们需要确保我们遵循以下步骤。

### 步骤 1

要使用我们的自定义内容正确扩展菜单.js部分，第一步是映射我们的 js 文件，以便系统加载它而不是默认文件。

Magento使用requirejs-config.js文件成功地映射系统上的js组件。首先重要的是知道在哪里放置requirejs-config.js。它可以放置在多个层次上。

所有requireJS配置将按以下顺序合并和执行：

模块级别

主题模块级别（父主题）

主题模块级别（当前主题）

主题级别（父主题）

主题级别（当前主题）

让我们用一个真实的例子看看它是如何工作的。默认文件是菜单.js我们希望将其替换为我们的自定义文件。请注意，之后我仍将加载默认菜单.js文件作为依赖项。

我们需要创建将替换菜单.js文件的文件。我们称之为menu-custom.js并将其放在[current_theme]/web/js/目录下。

### 步骤 2

接下来，我们需要创建requirejs-config.js文件并将其放在[current_theme]/root目录下。这样我们就可以成功映射我们的文件以替换默认文件。请参阅以下示例：

var config = {
    "map": {
        "*": {
            "menu": "js/menu-custom"
        }
 
    }
};

要真正确定该过程是否成功，请确保在加载新文件时签入开发人员工具。

### 步骤 3

现在是有趣的部分！我们不想扩展默认功能，这就是jQuery小部件工厂发挥作用的地方。我们将以下代码放入我们新创建的菜单自定义.js文件中。

检查以下示例：

define([
    'jquery',
    'jquery/ui',
    'mage/menu'],
    function($){
        $.widget('inchoo.menu', $.mage.menu, {
            _init: function () {
                alert("I'm Inchoo");
            },
            toggle: function () {
                alert("I'm Inchoo");
            }
    });
    return $.inchoo.menu;
    });

从上面的例子中我们可以看到，我们正在使用 require js 来定义我们的依赖项。第一个是jquery，第二个是jquery/ui，最后一个是mage/menu。

这意味着在这 3 个完全加载之前，我们的脚本不会加载，因为我们的逻辑依赖于它。

我们名为 inchoo.menu 的自定义小部件实例正在扩展默认的 $.mage.menu，在本例中，为了本教程，我将扩展两种方法，_init 和切换。切换方法负责切换智能手机和平板电脑上的导航_init而该方法负责组件初始化。

默认菜单中的原始切换方法示例.js

toggle: function () {
            if ($('html').hasClass('nav-open')) {
                $('html').removeClass('nav-open');
                setTimeout(function () {
                    $('html').removeClass('nav-before-open');
                }, 300);
            } else {
                $('html').addClass('nav-before-open');
                setTimeout(function () {
                    $('html').addClass('nav-open');
                }, 42);
            }
        },

### 覆盖文件

在某些情况下（尽管在相对罕见的情况下），您会发现自己可以完全覆盖菜单逻辑（创建自定义导航）。在这种特定情况下，我们可以应用步骤 1 和步骤 2，并在菜单自定义.js文件中创建自定义导航逻辑。

就是这样！我们已经成功地扩展了默认菜单.js小部件实例。该过程可以应用于系统上当前显示的任何小部件实例。