Requirejs dlaczego i kiedy używać Shim config
Przeczytałem requirejs dokument stąd api
requirejs.config({
shim: {
'backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['underscore', 'jquery'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'foo': {
deps: ['bar'],
exports: 'Foo',
init: function (bar) {
//Using a function allows you to call noConflict for
//libraries that support it, and do other cleanup.
//However, plugins for those libraries may still want
//a global. "this" for the function will be the global
//object. The dependencies will be passed in as
//function arguments. If this function returns a value,
//then that value is used as the module export value
//instead of the object found via the 'exports' string.
return this.Foo.noConflict();
}
}
}
});
Ale nie dostanę shim część tego. dlaczego powinienem używać shim i jak powinienem skonfigurować, Czy Mogę uzyskać więcej wyjaśnień
Proszę, czy ktoś może wyjaśnić przykładem dlaczego i kiedy powinniśmy używać shim. dzięki.
3 answers
Głównym zastosowaniem shim jest korzystanie z bibliotek, które nie obsługują AMD, ale musisz zarządzać ich zależnościami. Na przykład w powyższym przykładzie Backbone i Underscore: wiesz, że Backbone wymaga podkreślenia, więc załóżmy, że napisałeś swój kod w następujący sposób:
require(['underscore', 'backbone']
, function( Underscore, Backbone ) {
// do something with Backbone
}
RequireJS uruchomi asynchroniczne żądania zarówno dla podkreślenia, jak i szkieletu, ale ty nie wiesz, który z nich powróci pierwszy , więc możliwe, że Backbone spróbuje zrobić coś z podkreśleniem przed jest naładowany.
Notatka: Ten przykład podkreślenia / szkieletu został napisany zanim obie biblioteki obsługiwały AMD. Ale zasada ta obowiązuje obecnie w przypadku wszystkich bibliotek, które nie obsługują AMD.
Hook "init" pozwala na wykonywanie innych zaawansowanych czynności, np. jeśli Biblioteka normalnie eksportuje dwie różne rzeczy do globalnej przestrzeni nazw, ale chcesz je przedefiniować pod jedną przestrzenią nazw. A może chcesz zrobić jakieś małpie łatanie metod w bibliotece, którą jesteś Ładuję.
Więcej tła:
- Aktualizacja do RequireJS 2.0 daje pewną historię o tym, jak wtyczka order próbowała rozwiązać ten problem w przeszłości.
- zobacz sekcję "Loading Non-Modules" w tego artykułu Aarona Hardy ' ego , aby uzyskać inny dobry opis.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-12 14:37:16
Zgodnie z dokumentacją RequireJS API, shim pozwala ci
Konfiguracja zależności, eksportu i niestandardowej inicjalizacji dla starsze, tradycyjne Skrypty "browser globals", które nie używają definiować() aby zadeklarować zależności i ustawić wartość modułu.
- Konfigurowanie zależności
Powiedzmy, że masz 2 moduły javascript(moduleA i moduleB) i jeden z nich(moduleA) zależy od drugiego (moduleB). Oba są niezbędne dla Twojego moduł pozwala określić zależności w require () lub define ()
require(['moduleA','moduleB'],function(A,B ) {
...
}
Ale ponieważ wymaga się podążać za AMD, nie masz pojęcia, który z nich zostanie pobrany wcześniej. To tutaj shim przybywa na ratunek.
require.config({
shim:{
moduleA:{
deps:['moduleB']
}
}
})
To upewniłoby się, że moduleB jest zawsze pobierany przed załadowaniem modulea.
- Konfigurowanie eksportu
Shim export mówi RequireJS, który element w obiekcie globalnym (okno, zakładając, że jesteś w przeglądarce, oczywiście) jest faktycznym modułem wartość. Powiedzmy, że moduleA dodaje się do window jako 'modA'(podobnie jak jQuery i underscore robi to odpowiednio jako $ i_), następnie robimy wartość eksportu 'modA'.
require.config({
shim:{
moduleA:{
exports:'modA'
}
}
Da RequireJS lokalne odniesienie do tego modułu. Globalna modA nadal będzie istnieć na stronie.
-Niestandardowa inicjalizacja starszych skryptów "browser global"
Jest to prawdopodobnie najważniejsza funkcja Shim config, która pozwala nam dodać 'browser global', 'non-AMD' skrypty (które również nie podążają za wzorcem modularnym) jako zależności w naszym własnym module.
Powiedzmy, że moduleB to zwykły stary javascript z dwoma funkcjami funcA () i funcB ().
function funcA(){
console.log("this is function A")
}
function funcB(){
console.log("this is function B")
}
Chociaż obie te funkcje są dostępne w zakresie okien, RequireJS zaleca nam ich użycie poprzez ich globalny identyfikator/uchwyt, aby uniknąć nieporozumień. Więc konfigurowanie shim jako
shim: {
moduleB: {
deps: ["jquery"],
exports: "funcB",
init: function () {
return {
funcA: funcA,
funcB: funcB
};
}
}
}
Wartość zwracana z funkcji init jest używana jako wartość eksportu modułu zamiast obiektu znalezione przez ciąg 'exports'. To pozwoli nam na użycie funcB w naszym własnym module jako
require(["moduleA","moduleB"], function(A, B){
B.funcB()
})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-24 10:02:20
Musisz dodać ścieżki w requirejs.config to declare, przykład:
requirejs.config({
paths: {
'underscore' : '.../example/XX.js' /// your file java script
'jquery' : '.../example/jquery.js' /// your file java script
}
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'foo': {
deps: ['bar'],
exports: 'Foo',
init: function (bar) {
return this.Foo.noConflict();
}
}
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-19 10:10:25