使用带有 requireJS 的自定义 Jquery 插件答案

【问题标题】：Using custom Jquery plugin with requireJS使用带有 requireJS 的自定义 Jquery 插件
【发布时间】：2018-02-26 20:20:13
【问题描述】：

很抱歉，如果我重复这个问题，但我对 requireJS 还是很陌生，我并不完全理解它的工作方式。

我正在尝试通过元素上的对角线移动来实现类似亚马逊的导航。我为此找到了一个 jQuery 插件 (https://github.com/kamens/jQuery-menu-aim)，但我想在 requireJS 的帮助下实现它。

通常，您只需使用<script> 标签（Jquery 和插件）包含所有必要的脚本。然后您会找到您的导航并在激活/停用子菜单上分配一些功能。比如：

          <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
            <script src="../jquery.menu-aim.js" type="text/javascript"></script>
            <script src="js/bootstrap.min.js" type="text/javascript"></script>
            <script>
                var $menu = $(".dropdown-menu");
                // jQuery-menu-aim: <meaningful part of the example>
                 // Hook up events to be fired on menu row activation.
               $menu.menuAim({
                    activate: activateSubmenu,
                    deactivate: deactivateSubmenu
                });

           function activateSubmenu(row) {//do something}
           function deactivateSubmenu(row) {//do someting else)
         </script>

以 requireJS 的方式。在 navigation.js 文件中，我一开始需要 menu-aim 插件，并尝试像这样实现它：

 var menuAim = require('lib/menu-aim');
 // some code
 var $menuT = $('#nav-main-deep');
 $menuT.menuAim({
        activate: activateSubmenu,
        deactivate: deactivateSubmenu

  });
   function activateSubmenu(){
        console.log('test1');
    }

    function deactivateSubmenu() {
        console.log('test2');
    }

我把整个插件 menu-aim.js 放在：

define(function () {
//whole menu-aim plugin
});

可能，这不是运行 requireJS 插件的方式，因为它什么都不做（我试图做一些控制台日志）。我试图查看requireJS doc，但我仍然不明白如何正确地做到这一点.. 非常感谢您的建议..

【问题讨论】：

标签： javascript jquery jquery-plugins requirejs requirejs-define

【解决方案1】：

From the GitHub code，看起来jQuery-menu-aim 没有使用通用模块定义，因此需要您的 RequireJS 配置提供一些帮助。

shim 可以帮助 RequireJS 对依赖项进行排序，因为这是一个 jQuery 插件，必须先加载 jQuery 并将其传递给它。点击这里查看more information on RequireJS shims。

将此代码添加到您的 RequireJS 配置文件中

requirejs.config({
  shim: {
    'menu-aim': {
        deps: ['jquery']
    }
  }
});

当你打电话时

require('lib/menu-aim', function() { 
  // put your menu code here 
});

jQuery 和菜单插件将被加载。

【讨论】：