Question

我的任务是在现有项目中实现requireJS体系结构。该项目是单页面应用程序，但它有另一个订单表单页面。经过一些潜伏和实验的文件后，我能够让球滚动。

但我的幸福很快就消失了，因为我意识到它没有按预期工作。当重新加载页面时，它有时会起作用，而其他时候会抛出错误：

未捕获的TypeError：$ beforeafter.beforeAfter不是函数

我编写了我的配置文件（也是＆＃39;数据主要＆＃39; html脚本标记中的入口点），如下所示：

config.js：

// RequireJS configuration, see http://requirejs.org/docs/api.html#config
require.config({
  // TODO: set the right path and clean up all the '../../' nonsense
  baseUrl: '',
  paths: {
    // Vendor JavaScript
    jquery: "../../node_modules/jquery/dist/jquery",
    jqueryui: "../../src/vendor/jquery-ui/jquery-ui",
    bootstrap: "../../node_modules/bootstrap/dist/js/bootstrap",
    jquerycookie: "../../node_modules/jquery.cookie/jquery.cookie",
    owlcarousel: "../../node_modules/owl.carousel/dist/owl.carousel",
    jquerybrowser: "../../node_modules/jquery.browser/dist/jquery.browser",
    beforeafter: "../../src/vendor/before-after/jquery.beforeafter-1.4",
    upload: "../../src/vendor/requirejs-upload/upload",
    touchpunch: "../../src/vendor/touch-punch/jquery.ui.touch-punch",
    // Our custom modules
    main: "../../src/js/modules/main",
    gallery: "../../src/js/modules/gallery",
    form: "../../src/js/modules/form"
  },
  shim: {
    "jqueryui": {
      exports: "ui",
      deps: ["jquery"]
     },
    "bootstrap": {
      deps: ["jquery"]
    },
    "owlcarousel": {
      deps: ["jquery"]
    },
    "beforeafter": {
      deps: ["jquery", "jqueryui"]
    },
    "touchpunch": {
      deps: ["jquery", "jqueryui"]
    }
  }
});

// Start the application
require(['main']);

我认为这个错误与AMD不兼容的脚本（beforeAfter）和shim设置有关，但它可能很容易与我使用require()和define()的方式有关我包括结构的其余部分：

模块/ main.js：

define(['jquery', 'jquerycookie', 'bootstrap', 'touchpunch', 'gallery', 
'form', 'owlcarousel'],
function ($, jquerycookie, bootstrap, touchpunch, gallery, form, owlcarousel) {

  var menuItems = undefined;
  // + a lot of other variables

  function setUsersDeviceWidth() {
    // some code and a lot of other functions after this one
  }

  function resizeCarousel() {
    // this is where I use my custom module (gallery.js) and this works normally
    gallery.resizeCarousel($this);
  }

  // This file also holds and executes jQuery .ready function
  $(document).ready(function(){
     // I use my model again, it's working
     gallery.initializeCarousel();
     // + a lot of other code
  });
});

抛出错误的模块：

模块/ gallery.js

define(['jquery', 'touchpunch', 'owlcarousel', 'beforeafter'],
function ($, touchpunch, owlcarousel, beforeafter) { 

  var carousel = $('#carousel');

  // function for initialisation in main.js, part of return object
  var initializeCarousel = function() {
     // 'owlcarousel' modules 'owlCarousel()' function works like it should
     carousel.owlCarousel(options);
     // it also initialises beforeAfter, where the problem occurs
     initializeBeforeAfter($item);
  });

  var initializeBeforeAfter = function($item) {
    // Only do this once!
    if (!$item.hasClass('already-done')) {
      // Initalize the beforeAfter plugin
      var $beforeafter = $item.find('.before-after');
      // Root of my problem; cannot refer to beforeAfter() function 
      // of 'beforeafter' module, loading sequence gets messed up?
      $beforeafter.beforeAfter({
        showFullLinks: false,
        imagePath: 'dist/images/before-after/'
      });

      resizeBeforeAfter($item);

      $beforeafter.mousemove(function(e) {
        var $this = $(this);
        var $thishandle = $($this.find('.ui-draggable-handle'));
        var $thisfirst_wrapper = $($beforeafter.find(
          '> div:not(".ui-draggable-handle")')[0]);

        var mouseX = e.pageX - $(this).offset().left;

        $thishandle.stop().animate({'left': mouseX - 2}, 0, 'linear');
        $thisfirst_wrapper.stop().animate({'width': mouseX - 2}, 0, 'linear');
      });

      $item.addClass('already-done');
    }
  }

  return {
    initializeCarousel: initializeCarousel,
    resizeCarousel: resizeBeforeAfter
  };
});

我将不胜感激任何帮助，也会询问有关此项目中require（）和define（）用法的建议。我应该应用不同的呼叫结构吗？我已经阅读了很多关于这个主题的内容，但我只能从现场案例中有效地学习:(

Answer 1

所以，我设法通过强制requireJS在其他任何事情之前加载可疑模块来解决问题。我已更改 config.js 部分

// Start the application
require(['main']);

与

// Start the application, but make sure everything is loaded
require(['beforeafter', 'owlcarousel'], function() {
  require(['main']);
});

如果有人愿意展示更顺畅的方法和简短的解释，为什么会出现这种不一致的情况，我会等到周一才能找到更好的解决方案。

RequireJS不会一致地加载依赖项

1 个答案: