Execute draw module on resize in require.js

Question

My project needs to redraw in Javascript in a set order and I'm trying implement Require to speed it up and organize the code. What I want to do is simply the following:

define([
  'jquery',
  'app/fader', // used to hide the screen on resize
  'app/variables', // this is where my window width and height are gathered for all the other modules
  'app/mobileNavigationMenu', // setup menu on mobile or desktop
  'app/dividerAnimationSetup', // set up animations
  'app/initializeSkrollr', // set up skrollr
  'app/travelExcursions'], function ($, fader, variables, mobileNavigationMenu, dividerAnimationSetup, initializeSkrollr, navigationLinkHighlighting, travelExcursions) {
    return function() {
      var redraw = function() {
        fader.show(function() {
          var previousScrollPosition = $(window).scrollTop(),
              skrollrInstance;

          if(typeof skrollrInstance !== 'undefined') {
            skrollrInstance.destroy();
          }

          // Run all functions requiring window width and height
          mobileNavigationMenu();
          dividerAnimationSetup();
          skrollrInstance = initializeSkrollr();
          navigationLinkHighlighting();
          travelExcursions();
          skrollrInstance.setScrollTop(previousScrollPosition);

          fader.hide();
        });
      }();

      $(window).resize(redraw);        
    };
  });

I call it in my main file in the following way:

requirejs(['domReady', 'app/homeBackgroundSlider', 'app/aboutTitleEmphasis', 'app/draw'], function (domReady, homeBackgroundSlider, aboutTitleEmphasis, draw) {
  domReady(function () {
    homeBackgroundSlider();
    aboutTitleEmphasis();

    draw();

    // $(window).resize(function() {  Tried this but it didn't work
      // draw();
    // });
  });
});

Perhaps require doesn't work this way but is there a method that will work for this project?

Did I perhaps make a mistake using require for this project? Should I switch to Angular? — David Rhoderick, Mar 21 '17 at 23:18

score 0 · Accepted Answer · edited May 23 '17 at 12:10

So the issue was that RequireJS loads and executes dependencies immediately, and even with shims, it wasn't working correctly. The way I was able to fix it was by adding PostalJS and implementing the methodology described in this question. To paraphrase the answer, I created an app module and returned a PostalJS object. I'd pass that object between my draw and all other modules and either publish or subscribe to that app object. It means that almost all of my modules return nothing yet they still need to be included as dependencies of modules where events will be published to them. I'd say it isn't a bad solution as it allowed me to control the flow of the entire script.

Execute draw module on resize in require.js

1 Answers1