2017-03-21 41 views
0

我的項目需要按照設定的順序在Javascript中重繪,並且我正在嘗試實施要求加速並組織代碼。我想要做的就是簡單地執行以下操作:在require.js中執行調整大小的繪製模塊

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);   
    }; 
    }); 

我把它在以下方式我的主要文件:

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(); 
    // }); 
    }); 
}); 

也許需要不以這種方式工作,但有一種方法,將爲這個項目工作?

+0

我是否在使用require這個項目時犯了一個錯誤?我應該切換到Angular嗎? – ArtlyticalMedia

回答

0

所以問題是RequireJS立即加載並執行依賴關係,即使使用墊片,它也無法正常工作。我能夠修復它的方法是添加PostalJS並實施this question中描述的方法。爲了解釋答案,我創建了一個應用程序模塊並返回一個PostalJS對象。我會在我的繪圖和所有其他模塊之間傳遞該對象,併發布或訂閱該應用程序對象。這意味着幾乎所有的模塊都不會返回任何內容,但仍然需要將它們作爲將事件發佈給它們的模塊的依賴項。我會說這不是一個糟糕的解決方案,因爲它允許我控制整個腳本的流程。

相關問題