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( $ ) {

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

语义用户界面确实需要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成语并不好。这正是我用的。）

如何加载多个JQuery插件？

1 个答案: