2017-03-21 9 views
0

私のプロジェクトはJavascriptで設定された順序で再描画する必要があり、それを高速化してコードを整理する必要があります。私は何をしたい以下単にである:require.jsでサイズ変更時にdrawモジュールを実行

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は依存関係をすぐにロードして実行し、shimを使用しても正しく動作していないという問題がありました。私がそれを修正する方法は、PostalJSを追加し、this questionに記載されている方法を実装することでした。答えを言い換えると、私はアプリケーションモジュールを作成し、PostalJSオブジェクトを返しました。そのオブジェクトを描画と他のすべてのモジュールとの間で渡し、そのアプリケーションオブジェクトをパブリッシュまたはサブスクライブします。これは、ほとんどすべてのモジュールが何も返されないことを意味しますが、イベントが発行されるモジュールの依存関係として組み込む必要があります。私はスクリプト全体の流れを制御することができたので、それは悪い解決策ではないと言いたいと思います。

関連する問題