如何加载多个使用 $ 访问方法的 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文件:
<!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>
最佳答案
您不应该在 jQuery UI 中使用 shim，因为它会自行调用 define，而 shim 仅适用于不支持的模块。调用定义。如果你看code here ，您将在文件开头附近看到:
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([ "jquery" ], factory );
} else {
// Browser globals
factory( jQuery );
}
}(function( $ ) {
看起来工厂函数没有返回任何内容，这解释了为什么您将 $ 设置为 undefined。
语义 UI 确实需要 shim，因为它不调用 define。
我建议您不要尝试从插件中获取 $，而是从 jquery 本身获取它:
define(['jquery', 'jqueryui', 'semanticui'], function($) {
console.log($);
});
顺序可能看起来很奇怪，但它会正常工作。你必须考虑 jQuery 插件如何自行安装:它们修改 jQuery 对象，这里是 $ 。所以上面的代码将加载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 习惯用法并不更好。这只是我使用的。)
关于javascript - 如何加载多个 JQuery 插件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35095968/