javascript - 我需要确保在使用 RequireJS 加载依赖项之前不会加载插件

Question

我正在使用 jquery.validationEngine.js 插件。 除非先加载 jqueryValidateEngine，否则 jqueryValidateEnglish 无法运行。

我的 jquery.wrapped.validationEnglish2.js 编码如下:

        define(['jqueryValidateEngine'],function($){

         //Plugin Code here

        });

我的 jquery.wrapped.validationEngine2.js 编码如下:

        define(['jquery'],function($){

         //Plugin Code here

        });

我的主页包含:

    <script src="/imagesrv/marketing/requireJS/assets/lib/require.js" data-main="/imagesrv/marketing/requireJS/assets/js/common2">

common2.js 包含:

        //Configure RequireJS

        require.config({
          baseUrl: "/imagesrv/marketing/requireJS/assets",
          paths: {
            // The libraries we use
            jquery: [
                '/imagesrv/marketing/js/jquery.min'
            ],
            bootstrap: '/imagesrv/marketing/requireJS/assets/lib/bootstrap.wrapped.min',
            smartdevice: '/imagesrv/marketing/requireJS/assets/page/smart-device',
            eloquatag: '/imagesrv/marketing/requireJS/assets/page/eloqua-tag',
            main: '/imagesrv/marketing/requireJS/assets/page/main',
            startupkit: '/imagesrv/marketing/requireJS/assets/js/startup.wrapped.kit',
            jqueryuicus: '/imagesrv/marketing/requireJS/assets/js/jquery-wrapped.ui-1.10.3.custom.min',
            smoothscrl: '/imagesrv/marketing/requireJS/assets/js/jquery.smoothdivscroll.wrapped-1.3-min',
            genscript: '/imagesrv/marketing/requireJS/assets/js/gen-wrapped.menu.script',
            owlcarousel: '/imagesrv/marketing/requireJS/assets/js/owl.wrapped.carousel',
            placeholder: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.placeholder',
            explorewhatshot: '/imagesrv/marketing/requireJS/assets/js/explorewhatshot.wrapped',
            kiblog: '/imagesrv/marketing/requireJS/assets/js/ki.wrapped.blog.script',
            jqueryValidateEnglish: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEnglish2',
            jqueryValidateEngine: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEngine2'

          } 

        });


require(['main', 'bootstrap', 'startupkit', 'eloquatag', 'owlcarousel',    'kiblog', 'jqueryuicus', 'jqueryValidateEnglish'], function($) {// Load up this  pages script, once the 'common' script has loaded
  console.log('jQuery and r.js have been loaded!');
});

但是当我运行我的页面时，我在控制台中不断收到以下错误: "$(...).validationEngine 不是函数

当我在“网络”下查看时，它显示我的包装插件正在加载，但出于某种原因，它们似乎必须以无序方式加载，这可能就是我收到控制台错误的原因。

我不确定是什么问题。

Answer 1

如果 jQuery 先加载，可以使用 $.holdReady() , $.when()

    $.holdReady(true);

    var scripts = {
      bootstrap: '/imagesrv/marketing/requireJS/assets/lib/bootstrap.wrapped.min',
      smartdevice: '/imagesrv/marketing/requireJS/assets/page/smart-device',
      eloquatag: '/imagesrv/marketing/requireJS/assets/page/eloqua-tag',
      main: '/imagesrv/marketing/requireJS/assets/page/main',
      startupkit: '/imagesrv/marketing/requireJS/assets/js/startup.wrapped.kit',
      jqueryuicus: '/imagesrv/marketing/requireJS/assets/js/jquery-wrapped.ui-1.10.3.custom.min',
      smoothscrl: '/imagesrv/marketing/requireJS/assets/js/jquery.smoothdivscroll.wrapped-1.3-min',
      genscript: '/imagesrv/marketing/requireJS/assets/js/gen-wrapped.menu.script',
      owlcarousel: '/imagesrv/marketing/requireJS/assets/js/owl.wrapped.carousel',
      placeholder: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.placeholder',
      explorewhatshot: '/imagesrv/marketing/requireJS/assets/js/explorewhatshot.wrapped',
      kiblog: '/imagesrv/marketing/requireJS/assets/js/ki.wrapped.blog.script',
      // load `jquery.wrapped.validationEngine2` before `jquery.wrapped.validationEnglish2`
      jqueryValidateEngine: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEngine2',
      jqueryValidateEnglish: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEnglish2'
    };

    var requests = $.when.apply($, $.map(scripts, function(url, name) {
      return $.getScript(url)
    }));

    requests.then(function() {
       $.holdReady(false);
    }, function(error) {
       console.log(error)
    });

    $(document).ready(function() {
      // do stuff when `scripts` loaded
    });