如何加载多个 JQuery 插件？

Question

如何加载多个使用 $ 访问方法的 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>

Answer 1

您不应该将 shim 与 jQuery UI 一起使用，因为它会自己调用 define，而 shim 仅适用于执行此操作的模块不打电话 define。如果您查看 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( $ ) {

看起来工厂函数没有 return 任何东西，这解释了为什么你将 $ 设置为未定义。

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

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

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

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

我一直按照我上面的建议去做，没有任何问题，但我使用 CommonJS 习惯用法：

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

bootstrap 和 jquery.bootstrap-growl 将自己安装为 jQuery 插件，但我从 jquery 本身获得参考。

（CommonJS的惯用语并不好，我就是这么用的）

如何加载多个 JQuery 插件？

How can you load multiple JQuery plugins?

javascript

jquery

jquery-ui

requirejs