CWSpear的悬停下拉菜单已准备就绪(require.js）

Is CWSpear`s hover dropdown menu amd ready (require.js)?

本文关键字：require js 准备就绪 悬停 下拉菜单 CWSpear      更新时间：2023-09-26

我试图使用CWSpear的插件，使用require.js来使用悬停下拉菜单。但我一直收到一个错误："错误：脚本错误"。为了将它与require.js一起使用，我需要做些什么？

编辑：

为了帮助@jakee专注于这个问题，这是我所做的配置：

requirejs.config({
    paths: {
        "myBootstrap": _myBootstrappingPath + "js/bootstrap",
        "myControllers" : _myBootstrappingPath + "js/controllers", 
        //jquery
        "jquery": _libsPath + "jquery/1.9.1/js/jquery",
        "jquery_validate": _libsPath + "jquery/validate/1.12.0/js/jquery.validate",
        //Bootstrap related
        "twitterBootstrap": _libsPath + "bootstrap/2.3.1/",
        "select2" : _libsPath + "select2/3.3.2/select2", 
        //misc
        "underscore": _libsPath + "underscore/1.4.4/js/underscore",
        "backbone": _libsPath + "backbone/1.0.0/js/backbone",
        "backbonePageable": _libsPath + "backbone/backbone-pageable/1.2.0/js/backbone-pageable",
        "backgrid": _libsPath + "backgrid/0.2.0/backgrid",
        "backgridAssets": _libsPath + "backgrid/0.2.0/assets/js",
        "backgridExtensions": _libsPath + "backgrid/0.2.0/extensions",
        //plugins and extensions                                                  
        "plugins_datetimepicker": _pluginsPath + "/datetimePicking/bootstrap-datetimepicker",   
        "plugins_dropdownHover": _pluginsPath + "/dropdownHover/dropdownHover",
    },
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },    
        bootstrap: {
          deps: ["jquery"],
          exports: "$.fn.popover"
        },  
        'select2': ["jquery"],
        'backgrid': {
            deps: ["jquery", "backbone"],
            exports: "Backgrid"
        },
        'backbonePageable':  {
            deps: ["jquery", "underscore", "backbone"],
            exports: "PageableCollection",
            init: function(nhonho){
                Backbone.PageableCollection = PageableCollection;
            }
        },
        plugins_datetimepicker: {
            deps: ["jquery", "bootstrap"]
        },
        plugins_dropdownHover: {
            deps: ["jquery", "bootstrap"]
        }   
    }
});

并将其用于：

(function (bs) {
    require(["jquery", 
        "twitterBootstrap", 
        "select2", 
        "plugins_datetimepicker", 
        "plugins_dropdownHover", 
        "myControllers/defaultController"], function ($) {
        var defaultCtrlr = new ticket.defaultController(bs);
        bs.onInit();
        defaultCtrlr.start(bs.options);
        bs.onReady();
    });                    

})(window.my.bootstrap);

只要我在defines中注释"plugins_dropdownHover"行，它就可以正常工作。如果它试图加载该脚本，则会失败。

我发现您的配置可能存在几个问题：

1:在路径配置和填充程序配置之间的命名可能会有一些混淆。例如，我在垫片中看到了这一点

    bootstrap: {
      deps: ["jquery"],
      exports: "$.fn.popover"
    },

但在路径上，你会发现：

    "twitterBootstrap": _libsPath + "bootstrap/2.3.1/",

它们应该匹配。我怀疑，当您需要'plugins_dropdownHover'时，它会查找垫片依赖项'bootstrap'，然后再也找不到加载它的路径，因为您的路径配置包含'twitterBootstrap'而不是'bootstrap'

2:_libsPath + "bootstrap/2.3.1/"看起来像是文件夹的路径，而不是文件。当您稍后需要'twitterBootstrap'并查看Chrome开发工具的网络选项卡（或您使用的任何工具）时，您是否看到加载了正确的引导文件？

如果你只是填充这一个库，我想它会看起来像这样：

requirejs.config({
    paths: {
        jquery: _libsPath + "jquery/1.9.1/js/jquery",
        // note: full path to file (minus the .js)
        bootstrap: _libsPath + "bootstrap/2.3.1/bootstrap",
        plugins_dropdownHover: _pluginsPath + "/dropdownHover/dropdownHover"
    },
    shim: {
        jquery: {
            exports: ["jQuery", "$"]
        },
        bootstrap: {
          deps: ["jquery"],
          exports: "$.fn.popover"
        },
        plugins_dropdownHover: {
            // might be able to list just bootstrap here since it will follow the chain
            // and load jQuery before loading bootstrap
            deps: ["bootstrap", "jquery"]
        }
    }
});

Demo页面只列出了三个脚本：jQuery、Bootstrap和插件。这正是RequireJS使用上述填充程序配置加载它们的顺序。

任何东西实际上都可以与RequireJS一起使用，无论是通过AMD方式还是通过填充程序配置。

首先，你会想知道该模块是否与AMD兼容。检查的最佳位置是源代码。在RequireJS中，所有AMD模块都用define-函数声明。如果源代码中没有提到上述函数，你可以非常确定你的库/插件/任何东西都不支持AMD。如果存在define，则可以通过在paths配置中声明该文件来导入该文件。

值得庆幸的是，RequireJS允许您通过define访问shim javascript文件，这些文件不会声明其内容为AMDable。它的基本作用是告诉它文件的依赖项是什么，以及它应该向window对象中插入什么，RequireJS将确保在之前加载dep，然后获取结果。

paths: {
  'otherlib': 'path/to/otherlib',
  'mylib': 'path/to/mylib' // define alias for mylib
}
shim: {
  'mylib': {
     deps: ['otherlib'],
     exports: 'MyLib'
   }
}

由于您试图加载的文件是一个jquery插件，因此不需要导出或其他任何操作，因为插件只需将其内容粘贴到$中。RequireJS提供了这个的一个很好的例子

"shim": {
  "jquery.someplugin": ["jquery"],
  "jquery.otherplugin": ["jquery"]
}

N.B在本例中，RequireJs被配置为不需要使用别名，因为baseUrl指向带有jquery和插件的目录！

希望这能有所帮助！

相关文章：