it-swarm.com.de

Benötigt, warum und wann Shim Config verwendet werden soll

ich lese das Requirejs Dokument von hier 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();
            }
        }
    }
});

aber ich bekomme keinen Shim Teil davon. Warum sollte ich Shim verwenden und wie sollte ich konfigurieren, kann ich etwas mehr Klarheit bekommen

kann mir bitte jemand anhand eines Beispiels erklären, warum und wann wir Shim verwenden sollen. Vielen Dank.

96
Anil Gupta

Eine Hauptanwendung von shim sind Bibliotheken, die AMD nicht unterstützen. Sie müssen jedoch deren Abhängigkeiten verwalten. Beispiel im obigen Backbone- und Unterstrich-Beispiel: Sie wissen, dass für Backbone ein Unterstrich erforderlich ist. Angenommen, Sie haben Ihren Code folgendermaßen geschrieben:

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

    // do something with Backbone

}

RequireJS startet asynchrone Anforderungen für Underscore und Backbone, aber Sie wissen nicht, welches zuerst zurückkommt, daher ist es möglich, dass Backbone versucht, etwas mit Underscore zu tun, bevor es geladen wird.

HINWEIS: Dieses Unterstrich/Backbone-Beispiel wurde geschrieben, bevor beide Bibliotheken AMD unterstützten. Das Prinzip gilt heute jedoch für alle Bibliotheken, die AMD nicht unterstützen.

Mit dem "init" -Hook können Sie andere fortgeschrittene Dinge ausführen, z. Wenn eine Bibliothek normalerweise zwei verschiedene Dinge in den globalen Namespace exportieren würde, Sie sie jedoch unter einem einzigen Namespace neu definieren möchten. Oder vielleicht möchten Sie einige Affen-Patches für Methoden in der Bibliothek ausführen, die Sie laden.

Mehr Hintergrund:

109
explunit

Gemäß der RequireJS-API-Dokumentation können Sie Shim verwenden

Konfigurieren Sie die Abhängigkeiten, Exporte und benutzerdefinierten Initialisierungen für ältere, herkömmliche "Browser-Globals" -Skripten, die nicht define () verwenden, um die Abhängigkeiten zu deklarieren und einen Modulwert festzulegen.

- Abhängigkeiten konfigurieren

Nehmen wir an, Sie haben 2 Javascript-Module (Modul A und Modul B), von denen eines (Modul A) vom anderen (Modul B) abhängt. Beide sind für Ihr eigenes Modul erforderlich, damit Sie die Abhängigkeiten in require () oder define () angeben können.

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

Da sich aber AMD folgen lassen muss, hat man keine Ahnung, welche man früh abholen würde. Hier kommt Shim zur Rettung.

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

})

Dies würde sicherstellen, dass Modul B immer abgerufen wird, bevor Modul A geladen wird.

- Export konfigurieren

Der Shim-Export teilt RequireJS mit, welcher Member des globalen Objekts (das Fenster, sofern Sie sich natürlich in einem Browser befinden) der tatsächliche Modulwert ist. Nehmen wir an, moduleA fügt sich dem window als 'modA' hinzu (genau wie jQuery und der Unterstrich als $ und _), dann setzen wir unseren Exportwert auf 'modA'.

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

Es wird RequireJS einen lokalen Verweis auf dieses Modul geben. Das globale modA bleibt auch auf der Seite bestehen.

- Benutzerdefinierte Initialisierung für ältere "Browser Global" -Skripte

Dies ist wahrscheinlich die wichtigste Funktion von shim config, mit der wir 'Browser-globale', 'Nicht-AMD'-Skripte (die auch nicht dem modularen Muster folgen) als Abhängigkeiten in unserem eigenen Modul hinzufügen können.

Nehmen wir an, moduleB ist einfaches altes Javascript mit nur zwei Funktionen funcA () und funcB ().

function funcA(){
    console.log("this is function A")
}
function funcB(){
    console.log("this is function B")
}

Obwohl beide Funktionen im Fensterbereich verfügbar sind, empfiehlt RequireJS, sie über ihren globalen Bezeichner/Handle zu verwenden, um Verwechslungen zu vermeiden. So konfigurieren Sie die Einstellscheibe als

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

Der Rückgabewert der Funktion init wird anstelle des Objekts, das über die Zeichenfolge 'exports' gefunden wurde, als Modul-Exportwert verwendet. Dadurch können wir funcB in unserem eigenen Modul als verwenden

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

Hoffe das hat geholfen.

63
nalinc