2013-06-10 18 views
10

mojego użytku aplikacja require.js mam błąd losowy (zdarza się 1 raz na 50 reload) Require.js pisać w konsoli:Require.js błąd losowy Nie udało się załadować zasobów

Nie udało się załadować źródło: serwer odpowiedział ze statusem 404 (nie znaleziono)

Rzeczywiście, require.js spróbuj podać jQuery z niewłaściwym katalogu ... nie wiem dlaczego, większość czasu aplikacja działa dobrze ...

Mój config jest dość prosta:

require.config({ 
    shim: { 
    underscore: { 
     exports: '_' 
    }, 
    backbone: { 
     deps: ['underscore', 'jquery'], 
     exports: 'Backbone' 
    }, 
    animate_from_to: { 
     deps: ['jquery'] 
    }, 
    bootstrap: { 
     deps: ['jquery'] 
    }, 
    zoom: { 
     deps: ['jquery'] 
    }, 
    shop_util: { 
     deps: ['jquery'] 
    }, 
    pricer: { 
     deps: ['jquery'] 
    }, 
    filter: { 
     deps: ['jquery'] 
    }, 
    paginator: { 
     deps: ['jquery'] 
    }, 
    }, 
    paths: { 
    bootstrap:  'lib/bootstrap', 
    jquery:   'lib/jquery-1.9.1', 
    zoom:    'lib/jquery.zoom.min', 
    animate_from_to: 'lib/jquery.animate_from_to-1.0.min', 
    backbone:   'lib/backbone.min', 
    underscore:  'lib/underscore.min', 
    text:    'lib/require-text', 
    shop_util: 'lib/shop_util', 
    pricer:   'lib/pricer', 
    filter:   'lib/filter', 
    paginator:  'lib/paginator', 
    } 

}); 

Dziękuję

+0

Który katalog próbuje załadować? – landons

+0

Próbuje załadować z katalogu pliku "require.config". /js/jquery.js zamiast /js/lib/jquery.1-9-1.js –

+0

Interesujące. Czy to samo zachowanie występuje w wielu przeglądarkach? – landons

Odpowiedz

20

Wydaje masz inny punkt wejścia do aplikacji gdzieś innych niż skryptu danych-main (js/main.js). Nawet jeśli jest to kolejny skrypt na tej samej stronie, nie można polegać na tym, że główny skrypt danych zostanie ukończony przed następnym uruchomieniem skryptu, since it's loaded with async attribute.

<script data-main="js/main" src="js/lib/require.js"></script> 
<!-- foo.js might run before js/main.js !!! --> 
<script src="js/foo.js"></script> 

Można to udowodnić poprzez dodanie console.log oświadczenie na koniec js/main.js i jeden w foo.js (lub cokolwiek). Zwykle zobaczysz ten z js/main.js, a następnie foo.js, ale w tym 1 na 50 przypadków zobaczysz je w innej kolejności.

Istnieje kilka strategii radzenia sobie z tym:

1 - wykonać całą swoją aplikację inicjację i późniejsze wymagają Pochodzi skrypcie danych-main

Dotyczy pojedynczej strony aplikacji, oczywiście. Wszystko w jednym pliku:

require.config({ 
    // snip 
}); 
require(['mymodule'], function(mymodule) { 
    // do stuff 
}); 

2 - Użyj skryptu inline tuż po tagu skrypt require.js

Zamiast powyższy skrypt wewnątrz osobnym pliku wskazywanego przez dane Menem, po prostu drugi znacznik skryptu tuż poniżej. To jest pierwszy przykład: listed in the docs.

Dotyczy głównie do pojedynczej strony-apps

3 - Załaduj wymaga config do zmiennej globalnej przed tagu skrypt require.js

Drugi przykład listed in the docs.

<script> 
    var require = { 
     paths: { // define them} 
     shim: { // define them } 
    }; 
</script> 
<script src="scripts/require.js"></script> 

Dotyczy głównie do pojedynczej strony-apps

4 - Nest to Twój wymagają połączenia załadować pierwszy

To działa najlepiej dla wielostronicowych aplikacji config i jest rekomendowany w the multi-page shim app example

<script src="js/lib/require.js"></script> 
<script> 
    //Load common code that includes config, then load the app 
    //logic for this page. Do the require calls here instead of 
    //a separate file so after a build there are only 2 HTTP 
    //requests instead of three. 
    require(['./js/common'], function (common) { 
     //js/common sets the baseUrl to be js/ so 
     //can just ask for 'app/main1' here instead 
     //of 'js/app/main1' 
     require(['app/main1']); 
    }); 
</script> 

Podobne pytania here, here, i here

+1

Całkowicie rację! Wybrałem metodę 4, najbardziej "zgodną require.js" według mnie. Dziękuję Ci ! –

+0

Czy mimo to require.js nie powinien tego robić, w oparciu o kolejność plików w argumencie array? – Yuck

+0

@Tak Nie, nie jest. To jest część Async AMD - nie wiesz, w jakiej kolejności pliki zostaną rozwiązane, tylko że zostaną rozwiązane przed wywołaniem twojej funkcji. – explunit

Powiązane problemy