Teilen Sie Ressourcen über verschiedene AMD -Module hinweg

Question

Ich entwickle derzeit eine neue Webanwendung.

Dies ist das erste Mal, dass ich Reformenjs mit AMD -Modulen verwende.

Es ist nicht so einfach, sich an das neue Paradigma zu gewöhnen, das es - wie ich es verstehe - keine Variablen im globalen Namespace gibt.

In früheren Webanwendungen hatte ich immer eine Variable im globalen Namespace, mit der ich mehrere Ressourcen über verschiedene Module weitergeben konnte.

Jetzt verwende ich mit Anforderungs -AMD -Modulen Backbone.js und JQuery (beide AMD -Versionen - JQuery 1.7.1 und Backbone.js 0.5.3 -optamd3).

Irgendwo in meiner Anwendung hole ich ein Backbone.js -Modul vom Server (Benutzerobjekt). Ich möchte von verschiedenen AMD -Modulen auf dieses Modul zugreifen. Ich möchte auch ein anwendbares Ereignisobjekt haben.

Könnten Sie mir sagen: Was ist der richtige Weg in fordernJS AMD, um Ressourcen über verschiedene Module hinweg zu teilen?

Answer 1

Ich habe selbst eine Lösung gefunden.

Vielen Dank, intothevoid, für Ihre Antwort, aber ich hatte auf eine AMD-ähnliche Lösung gehofft. Dies bedeutet nicht, dass der globale Namespace "verschmutzt" wird.

Es gab 2 Schlüssel zu meiner Lösung:

"https://github.com/addyosmani/backbone-aura"Von Addy Osmani und"https://github.com/amdjs/amdjs-api/wiki/amd"Die AMD -API -Spezifikation der asynchronen Moduldefinition (AMD).

In der Spezifikation heißt es: "Wenn die Fabrik eine Funktion ist, sollte sie nur einmal ausgeführt werden."

Wenn also ein AMD -Modul mehrfach als Abhängigkeit in einer Webanwendung angegeben wird, ist die Abhängigkeit nicht nur Nicht mehrmals geladen, es ist auch Nicht mehrmals ausgeführt, Und das ist das Neue für mich. Es wird nur einmal ausgeführt und der Rückgabewert der Fabrikfunktion wird aufbewahrt. Jede Abhängigkeit mit demselben Pfad hat das gleiche Objekt. Und das verändert alles.

Sie definieren also einfach das folgende AMD -Modul:

define([], function() {
    var app_registry = {};
    app_registry.global_event_obj = _.extend({}, Backbone.Events);
    app_registry.models = {};
    return app_registry;
});

In diesen Modulen, in denen Sie Ressourcen teilen möchten, deklarieren Sie dieses App_registry -Modul als Abhängigkeit und schreiben in einem:

define(['jquery','underscore','backbone','app_registry'], 
  function ($, _, Backbone, app_registry){
    var firstView = Backbone.View.extend({
    initialize: function() {
        _.bindAll (this, 'methodOne'); 
        this.model.bind ('change', this.methodOne);   
        this.model.fetch();
    },  
    methodOne: function() {
        app_registry.models.abc = this.model;
    }
    ...

und in der anderen:

define(['jquery','underscore','backbone','app_registry'], 
  function ($, _, Backbone, app_registry){
    var secondView = Backbone.View.extend({
    initialize: function() {
       _.bindAll (this, 'methodTwo'); 
        app_registry.global_event_obj.bind ('special', this.methodTwo);
    },  
    methodTwo: function() {
        app_registry. ...
    }
    ...

Answer 2

Um Ihre Frage zu beantworten, wie Sie ein anwendungsweites Ereignisobjekt bereitstellen, können Sie ein AMD -Modul namens GlobalContext erstellen und in der Main.js.
Danach können Sie Einstellungen an den GlobalContext anhängen und den globalen Kontext verwenden, um Unterkomponenten usw. zu erstellen.

    //main.js file
    require([ "./global-context" ], function( GlobalContext) {
             new GlobalContext();
    });

In der Datei Global Context.js können wir dann Aufgaben wie das Laden von untergeordneten Modulen ausführen

    define(["Boiler", "./settings", "./modules/modules"], 
           function (Boiler, settings, modules) {
                  var GlobalContext = function () {

                //here we use a template javascript class called Boiler.Context
                var globalContext = new Boiler.Context("GlobalModule");

                //add settings to the context which can be obtained globally throughout                    the application
                globalContext.addSettings(settings);

                //here we load the sub modules of the global context
                globalContext.loadChildModules(modules);
};

Dies haben wir implementiert Boilerplatejs, eine Referenzarchitektur für groß angelegte JavaScript -Produktentwicklung.

Answer 3

Sie können das initialisierende Muster verwenden, um einen Wert in ein RequestJS -Modul (auch bekannt als 'Abhängigkeitsinjektion') zu injizieren.

Erfordern Sie einen Anruf überall in Ihrem Code:

var MyBackboneModule;

MyBackboneModule = someWayToGetAReferenceToIt();

require("module", function(Module) { 
  Module.initialize(MyBackboneModule);
});

Mit Module.js -Datei definiert als

define([], function(){
   var BackboneModuleDoingThisAndThat;

   function initialize(pBackboneModule) {
      BackboneModuleDoingThisAndThat = pBackboneModule ;
   };

   function doSomething() {
      var x = BackboneModuleDoingThisAndThat.computeThis(42);
   };


   return { 
      initialize: initialize
   };
});

Answer 4

Sie können einen einzelnen globalen definieren APP in Ihrem Einstiegspunkt -AMD -Modul. APP konnte einen Verweis auf andere gemeinsam genutzte Module erstellen und enthalten:

APP = {
    this.settings : function() {
        if(settingsModule == undefined){
            //require, create and return it
        } else {
            return settingsModule;
        }
    }
}

Answer 5

Nur ein Kommentar zu Ihrer eigenen Antwort - Sie müssen keine Funktion in Ihrem app_registry -Modul definieren:

define({
  global_event_obj: _.extend({}, Backbone.Events);
  models: {}
});

Sollte ausreichen.

Sehen: Die Dokumente

Seien Sie jedoch vorsichtig mit diesen Dingen. Es gibt Verwendungen, in denen gemeinsame Datenmodule sinnvoll sind. Wenn Sie es jedoch als Pseudo -globaler Namespace verwenden, ist es nicht viel besser, als nur Globale zu verwenden (nicht sagen, dass Sie das tun, was Sie tun).