RequireJS：執行jQuery代碼domready中

Question

我main.js文件看起來像這樣：

require.config({  
    paths: { 
     "jquery": "3rd_party/jquery-2.0.3.min", 
     "bootstrap": "3rd_party/bootstrap.min", 
     "handlebars":"3rd_party/handlebars", 
     "html5shiv":"3rd_party/html5shiv", 
     "modernizr":"3rd_party/modernizr", 
     "respond":"3rd_party/respond.min", 
     "jquery-ui":"3rd_party/jquery-ui-1.10.3.custom.min", 
     'fancybox':'3rd_party/jquery.fancybox.pack' 
    }, 

    shim: { 
     "bootstrap": { 
      deps: ["jquery"] 
     }, 
     "jquery-ui": { 
      deps: ["jquery"] 
     }, 
     "fancybox": { 
      deps: ["jquery"] 
     } 
    } 
}) 

requirejs(["jquery", "fancybox","controllers/" + controller,'modules/login','bootstrap','handlebars','html5shiv','modernizr','respond', 'jquery-ui'],function($,fancybox,controller,handleLogin) { 
    $(document).ready(function() { 

     if ($(window).width()>991) { 
      $(".sidebar").height($(".maincontent").height()); 
     } 

     $(".searchresults .greencol").height($(".searchresults .article").first().height()-100); 
     $('.login').click(function() { 
      handleLogin(); 
      return false; 
     }) 
     $('.fancybox-inline').fancybox({ 
      maxWidth : 800, 
      maxHeight : 600 
     }); 
     $('.fancybox-document').fancybox({ 
      width: 660, 
      height: 440 
     }); 


     $('.fancybox-close-button').click(function() { 
      $.fancybox.close();  
      return false; 
     }) 



    }); 
    controller.init(); 
}) 

一切發生

現在，它其實需要一些時間來執行該位：

if ($(window).width()>991) { 
    $(".sidebar").height($(".maincontent").height()); 
} 

而且該頁面會產生一點閃爍。 我唯一的想法是將jQuery單獨包含在index.html中，並將其放在<script>標記中。但後來我的RequireJS設置打破了。

你有什麼建議如何做到這一點？

Answer 1

所以你想調整大小盡早發生。這不是完全清楚我你是怎麼想早做，但這樣做是爲了使其儘早發生，而不是破壞或旁路RequireJS方式：

1. 採取下列出您當前requirejs的回調：

   if ($(window).width()>991) { 
       $(".sidebar").height($(".maincontent").height()); 
   } 
   

2. 添加以下調用requirejs在當前通話的面前：

   requirejs(["jquery"], function($) { 
       $(document).ready(function() { 
        if ($(window).width()>991) { 
         $(".sidebar").height($(".maincontent").height()); 
        } 
       }); 
   }); 
   

順便說一句，這不需要在不同的<script>元素。您可以將新呼叫置於requirejs的正前方。完成這種方式後，只要jQuery加載，調整大小就會發生。