如何加载多个JQuery插件？

如何加载多个使用$来访问方法的JQuery插件？ 我的配置文件（ config.js ）如下：

 var require = { paths: { "jquery": "lib/jquery", "jqueryui": "lib/jquery-ui", "semanticui": "lib/semantic", }, shim: { "jqueryui": { exports: "$", deps:['jquery'] }, "semanticui": { exports: "$", deps: ['jquery'] } }}; 

我的应用程序文件（ load.js ）定义如下：

 define(['jqueryui', 'semanticui'], function ($) { console.log($); }) 

我发现$未定义。 但是当我使用下面的代码时：

 define(['semanticui', 'jqueryui'], function ($) { console.log($); }) 

$被定义为jQuery对象。

是否可以使用$来访问jQuery和插件定义的方法？

这是我使用的index.html文件：

                  
 
 
AthenaViz
 
 
   
     Dashboard    Visualize  
  
 
 
 
 
Name
 
Date Joined
 
E-mail
 
Called
 
 
 
 
 
John Lilki
 
September 14, 2013
 
[e-mail]
 
No
 
 
 
Jamie Harington
 
January 11, 2014
 
[e-mail]
 
Yes
 
 
 
Jill Lewis
 
May 11, 2014
 
[e-mail]
 
Yes
 
 
 
Jill Lewis
 
May 11, 2014
 
[e-mail]
 
Yes
 
 
 
Jill Lewis
 
May 11, 2014
 
[e-mail]
 
Yes
 
 
 
 
   

Answer 1

你不应该在jQuery UI中使用shim ，因为它自己调用define ，而shim仅适用于不调用define模块。 如果你看一下这里的代码 ，你会看到文件的开头附近：

 (function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. define([ "jquery" ], factory ); } else { // Browser globals factory( jQuery ); } }(function( $ ) { 

看起来工厂函数没有返回任何内容，这就解释了为什么你将$ set设置为undefined。

语义UI确实需要shim因为它不调用define 。

我建议你不要试图从插件中获取$ ，而是从jquery本身获取它：

 define(['jquery', 'jqueryui', 'semanticui'], function($) { console.log($); }); 

订单可能看起来很奇怪，但它会正常工作。 您必须考虑jQuery插件如何自行安装：它们修改jQuery对象，这是$ here。 所以上面的代码将加载jquery ，然后加载jqueryui ，它将修改jQuery以将其自身添加为插件，并加载semanticui ，它还将修改jQuery以将其自身添加为插件。 （实际上， semanticui可以在jqueryui之前加载，因为一个不依赖于另一个，但它不会改变最终结果。）因此，你进入匿名函数的$将在其上安装插件。

我一直在做我上面提出的建议，没有任何问题，但我使用CommonJS成语：

 define(function (require, exports, module) { var $ = require("jquery"); require("bootstrap"); require("jquery.bootstrap-growl"); }); 

bootstrap和jquery.bootstrap-growl将自己安装为jQuery插件，但是我从jquery本身获得了我的引用。

（CommonJS成语并不是更好。这正是我使用的。）