Wymaga, dlaczego i kiedy używać shim config

Przeczytałem dokument requirejs z tutaj 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 dostaję w tym części podkładki . dlaczego powinienem używać podkładki i jak skonfigurować, czy mogę uzyskać więcej wyjaśnień

czy ktoś może wyjaśnić na przykładzie, dlaczego i kiedy powinniśmy używać podkładki. dzięki.

Podstawowym zastosowaniem podkładki jest użycie bibliotek, które nie obsługują technologii AMD, ale trzeba zarządzać ich zależnościami. Na przykład w powyższym przykładzie Backbone and Underscore: wiesz, że Backbone wymaga Underscore, więc załóżmy, że napisałeś swój kod w ten sposób:

require(['underscore', 'backbone']
, function( Underscore, Backbone ) {

    // do something with Backbone

}

RequireJS uruchomi asynchroniczne żądania zarówno dla Underscore, jak i Backbone, ale nie wiesz, które z nich wróci jako pierwsze, więc możliwe, że Backbone spróbuje coś zrobić z Underscore, zanim zostanie załadowany.

UWAGA: ten przykład podkreślenia / szkieletu został napisany, zanim obie te biblioteki obsługiwały AMD. Ale ta zasada odnosi się do wszystkich bibliotek, które nie obsługują technologii AMD.

Hak "init" pozwala ci robić inne zaawansowane rzeczy, np. Jeśli biblioteka normalnie eksportuje dwie różne rzeczy do globalnej przestrzeni nazw, ale chcesz przedefiniować je w jednej przestrzeni nazw. A może chcesz wykonać małpę poprawiania metod w ładowanej bibliotece.

Więcej informacji:

• Aktualizacja do RequireJS 2.0 daje trochę historii, w jaki sposób wtyczka zamówienia próbowała rozwiązać ten problem w przeszłości.
• Zobacz sekcję „Ładowanie nie-modułów” w tym artykule autorstwa Aarona Hardy'ego, aby uzyskać inny dobry opis.

Zgodnie z dokumentacją API RequireJS, podkładka pozwala

Skonfiguruj zależności, eksporty i niestandardową inicjalizację dla starszych, tradycyjnych skryptów „przeglądarek globalnych”, które nie używają funkcji define () do deklarowania zależności i ustawiania wartości modułu.

- Konfigurowanie zależności

Powiedzmy, że masz 2 moduły javascript (modułA i modułB), a jeden z nich (modułA) zależy od drugiego (modułB). Oba są niezbędne dla twojego własnego modułu, więc określasz zależności w require () lub define ()

require(['moduleA','moduleB'],function(A,B ) {
    ...
}

Ale ponieważ wymaga podążania za AMD, nie masz pojęcia, który z nich zostanie pobrany wcześniej. Tutaj z pomocą przychodzi podkładka.

require.config({
    shim:{
       moduleA:{
         deps:['moduleB']
        } 
    }

})

Dzięki temu modułB będzie zawsze pobierany przed załadowaniem modułu A.

- Konfiguracja eksportu

Eksport Shim mówi RequireJS, który element w obiekcie globalnym (okno, zakładając, że jesteś w przeglądarce, oczywiście) jest rzeczywistą wartością modułu. Powiedzmy, że modułA dodaje się do elementu window„modA” (podobnie jak jQuery i podkreślenie robi odpowiednio jako $ i _), a następnie ustawiamy wartość eksportu jako „modA”.

require.config({
    shim:{
       moduleA:{
         exports:'modA'
        } 
    }

Da RequireJS lokalne odniesienie do tego modułu. Globalny modA będzie nadal istniał na stronie.

- Niestandardowa inicjalizacja dla starszych skryptów „globalnych przeglądarki”

Jest to prawdopodobnie najważniejsza cecha konfiguracji shim, która pozwala nam dodawać skrypty „globalne przeglądarki”, „inne niż AMD” (które również nie są zgodne ze wzorcem modularnym) jako zależności w naszym własnym module.

Powiedzmy, że moduleB to zwykły stary javascript z tylko dwiema 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 okna, RequireJS zaleca, abyśmy używali ich poprzez ich globalny identyfikator / uchwyt, aby uniknąć nieporozumień. Więc konfigurując podkładkę jako

shim: {
    moduleB: {
        deps: ["jquery"],
        exports: "funcB",
        init: function () {
            return {
                funcA: funcA,
                funcB: funcB
            };
        }
    }
}

Wartość zwracana przez funkcję init jest używana jako wartość eksportu modułu zamiast obiektu znalezionego za pośrednictwem ciągu znaków „export”. Umożliwi nam to użycie funcB w naszym własnym module jako

require(["moduleA","moduleB"], function(A, B){
    B.funcB()
})

Mam nadzieję, że to pomogło.

Aby zadeklarować, musisz dodać ścieżki w requirejs.config, przykład:

requirejs.config({
    paths: {
          'underscore' : '.../example/XX.js' // your JavaScript file
          'jquery' : '.../example/jquery.js' // your JavaScript file
    }
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'foo': {
            deps: ['bar'],
            exports: 'Foo',
            init: function (bar) {
                return this.Foo.noConflict();
            }
        }
    }
});