如何加载多个JQuery插件？ [英] How can you load multiple JQuery plugins?
问题描述
如何加载多个使用 $ 的JQuery插件来访问方法？我的配置文件（ config.js ）如下：
How can you load multiple JQuery plugins that use the $ to access methods? My configuration file (config.js) is as follows:
var require = {
paths: {
"jquery": "lib/jquery",
"jqueryui": "lib/jquery-ui",
"semanticui": "lib/semantic",
},
shim: {
"jqueryui": {
exports: "$",
deps:['jquery']
},
"semanticui": {
exports: "$",
deps: ['jquery']
}
}};
我的申请文件（ load.js ）定义如下：
My application file (load.js) is defined as follows:
define(['jqueryui', 'semanticui'], function ($) {
console.log($);
})
我发现 $ 未定义。但是当我使用下面的代码时：
I found that the $ was undefined. However when I use the following code below:
define(['semanticui', 'jqueryui'], function ($) {
console.log($);
})
$ 被定义为 jQuery 对象。
是否可以使用 $ 来访问jQuery和插件定义的方法？
Is it possible to use the $ to access jQuery and the methods defined by the plugins?
这是我使用的 index.html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Dashboard</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/app.css">
<script type="text/javascript" src="config.js"></script>
<script data-main="load" src="lib/require.js" async></script>
</head>
<body>
<!--NAVIGATION BAR-->
<div class="ui fixed inverted menu">
<div class="ui fluid container">
<div class="header item" id="activateSidebar">AthenaViz<i class="terminal icon"></i></div>
</div>
</div>
<!--END OF NAVIGATION BAR-->
<!--SIDEBAR MENU-->
<div class="ui left vertical sidebar labeled icon menu">
<a class="item">
</a>
<a class="item">
<i class="fa fa-pie-chart"></i> Dashboard
</a>
<a class="item">
<i class="fa fa-eye"></i> Visualize
</a>
</div>
<!--END OF SIDEBAR MENU-->
<div class="pusher">
<table class="ui striped table">
<thead>
<tr>
<th>Name</th>
<th>Date Joined</th>
<th>E-mail</th>
<th>Called</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td>Jamie Harington</td>
<td>January 11, 2014</td>
<td>jamieharingonton@yahoo.com</td>
<td>Yes</td>
</tr>
<tr>
<td>Jill Lewis</td>
<td>May 11, 2014</td>
<td>jilsewris22@yahoo.com</td>
<td>Yes</td>
</tr>
<tr>
<td>Jill Lewis</td>
<td>May 11, 2014</td>
<td>jilsewris22@yahoo.com</td>
<td>Yes</td>
</tr>
<tr>
<td>Jill Lewis</td>
<td>May 11, 2014</td>
<td>jilsewris22@yahoo.com</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
推荐答案
你不应该使用 shim 使用jQuery UI，因为它本身调用 define ， shim 仅适用于不调用的模块定义。如果您查看代码，您会看到附近文件的开头：
You should not use a shim with jQuery UI, because it calls define by itself, and shim is only for modules that do not call define. If you look at the code here, you'll see near the start of the file:
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([ "jquery" ], factory );
} else {
// Browser globals
factory( jQuery );
}
}(function( $ ) {
看起来工厂函数没有返回任何内容，这就解释了为什么你将 $ 设置为undefined。
And it looks like the factory function does not return anything, which explains why you got $ set to undefined.
语义UI确实需要 shim ，因为它不会调用 define 。
Semantic UI does need a shim because it does not call define.
我建议你不要试图从插件中获取 $ ，而是从 jquery 本身：
I suggest that instead of trying to grab $ from the plugins, you get it from jquery itself:
define(['jquery', 'jqueryui', 'semanticui'], function($) {
console.log($);
});
订单可能看起来很奇怪但它会正常工作。你必须考虑jQuery插件如何自行安装：它们修改了jQuery对象，这里是 $ 。所以上面的代码将加载 jquery ，然后加载 jqueryui ，这将修改jQuery以将其自身添加为插件，并且加载 semanticui ，它还将修改jQuery以将其自身添加为插件。 （实际上， semanticui 可以在 jqueryui 之前加载，因为一个不依赖于另一个，但它不会改变结束结果。）所以你进入你的匿名函数的 $ 将安装插件。
The order may appear strange but it will work fine. You have to think about how jQuery plugins install themselves: they modify the jQuery object, which is $ here. So the code above will load jquery, then load jqueryui, which will modify jQuery to add itself as a plugin, and load semanticui, which will also modify jQuery to add itself as a plugin. (Actually, semanticui could load before jqueryui because one is not dependent on the other, but it does not change the end result.) So the $ that you get into your anonymous function will have the plugins installed on it.
I我一直在做什么，没有任何问题，但我使用CommonJS成语：
I do what I'm suggesting above all the time, without any issue, but I use the CommonJS idiom:
define(function (require, exports, module) {
var $ = require("jquery");
require("bootstrap");
require("jquery.bootstrap-growl");
});
bootstrap 和 jquery.bootstrap-growl 将自己安装为jQuery插件，但我从 jquery 本身获取我的引用。
bootstrap and jquery.bootstrap-growl install themselves as jQuery plugins, but I get my reference from jquery itself.
（CommonJS成语并不是更好。这正是我使用的。）
(The CommonJS idiom is not better. It's just what I use.)
这篇关于如何加载多个JQuery插件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
