2

我正在尝试将jqplot作为 requireJS 模块加载。

我main.js的路径和垫片是这样的：

require.config({
  , paths: {
      plot:          '../js/plugins/jqplot/jqplot.module'
  } 
  , shim: {
    'plot':          { deps: ['jquery']}
  }
});

由于大多数页面不需要这个模块，我正在等待pageXYZ被加载，然后在 a<script></script>中，我正在调用：

require(['plot'], 
    function (plot) {
       // do stuff
    }
);

我的jqplot.module样子是这样的：

define(['../js/plugins/jqplot/jquery.jqplot'],
    function () {
        require([
                '../js/plugins/jqplot/plugins/jqplot.barRenderer'
              , '../js/plugins/jqplot/plugins/jqplot.logAxisRenderer'
              , '../js/plugins/jqplot/plugins/jqplot.categoryAxisRenderer'
              , '../js/plugins/jqplot/plugins/jqplot.canvasAxisTickRenderer'
              , '../js/plugins/jqplot/plugins/jqplot.canvasTextRenderer'
              , '../js/plugins/jqplot/plugins/jqplot.pointLabels'
              , '../js/plugins/jqplot/plugins/jqplot.enhancedLegendRenderer'
        ], 
        function (){
          return $.jqplot;
        }
    );
  }
);

它返回正确的对象，其中包含所有已定义且可用的子插件。

但是，我的Do stuff代码运行之前 jqplot被分配给$，所以当我的代码运行时我仍然遇到未定义的错误（我假设，因为文件都已加载，所以 requirejs 开始运行）

问题：
在将 jqplot 分配给 $ 之前，我可以做些什么来暂停代码执行？

4

2 回答 2

3

1）我认为你的问题是这样的：

define(['../js/plugins/jqplot/jquery.jqplot'],

应该读：

define(['../js/plugins/jqplot/jquery.module'],

2）您不需要shim，因为您有一个加载的模块定义jqplot。所以改变你requirejs.config的

require.config({
  , paths: {
      plot:          '../js/plugins/jqplot/jqplot.module'
  } 
});

3）你的 jqplot.module 现在没有返回任何东西。将其更改为：

define([
      '../js/plugins/jqplot/jquery.jqplot'
    ],
    function () {
        var plot;
        require([
            '../js/plugins/jqplot/plugins/jqplot.barRenderer',
            '../js/plugins/jqplot/plugins/jqplot.logAxisRenderer',
            '../js/plugins/jqplot/plugins/jqplot.categoryAxisRenderer',
            '../js/plugins/jqplot/plugins/jqplot.canvasAxisTickRenderer',
            '../js/plugins/jqplot/plugins/jqplot.canvasTextRenderer',
            '../js/plugins/jqplot/plugins/jqplot.pointLabels',
            '../js/plugins/jqplot/plugins/jqplot.enhancedLegendRenderer'
            ],
        function () {
            plot = $.jqplot;
        });
        return plot;
    });

这一切都未经测试，但我认为这些应该有所帮助

于 2013-04-27T04:38:14.393 回答
1

回答这个问题和所有重复，上面的基本答案很接近但没有雪茄，因为 require 是异步的，因此 require 可以/将在定义闭包关闭和返回之前触发，下面的异步安全解决方案：

讨厌的问题，因为它是三个依赖项的链

jqplot 需要 jquery，而 jqplot 插件需要 jquery，我有一个更简单的解决方案，基于与上述相同的行

首先像这样做你的requirejs“main.js”配置

requirejs.config({
    paths: {
        "jquery": "path/to/jquery-1.10.2.min",

        // WORKAROUND : jQuery plugins + shims
        "jqplot.core": "path/to/jquery-jqplot-1.0.8.min",
        "jqplot": "jquery-jqplot-module-with-plugins-1.0.8"
    },
    shim: {
        "jqplot.core": {deps: ["jquery"]},
        "jqplot": {deps: ["jqplot.core"]}
    }
});

创建一个名为“jquery-jqplot-module-with-plugins-1.0.8.js”的包装文件模块文件，其中包含：

// wraps jquery jqplot plugin in define statement
define([
    "jquery",
    "path/to/jqplot.highlighter.min",
    "path/to/jqplot.cursor.min",
    "path/to/jqplot.dateAxisRenderer.min",
    "path/to/jqplot.canvasTextRenderer.min",
    "path/to/jqplot.canvasAxisLabelRenderer.min",
    "path/to/jqplot.enhancedLegendRenderer.min",
    "path/to/jqplot.pieRenderer.min",
    "path/to/jqplot.donutRenderer.min",
], function($) {
    var jqplot;
    jqplot = $.jqplot;
    return jqplot;
});

然后，当您需要带有这些插件的 jqplot 时，只需调用“jqplot”，它将加载“jquery”，然后是“jqplot.core”，然后是所有 jqplot 模块，最后返回 jqplot 对象:)

require(["jquery", "jqplot"], function ($, $jqplot) {
    console.log("Success..Inside Require JS");
    console.log("Plot...", $.jqplot, $jqplot);
});

或者

define(["jquery", "jqplot"], function ($, $jqplot) {
    console.log("Success..Inside Define JS");
    console.log("Plot...", $.jqplot, $jqplot);
});

多田！:)

ps jquery 插件是邪恶的，没有建议如何解决这种情况，只是一个事实陈述

干杯

蚂蚁

于 2014-02-12T14:21:35.497 回答