2013-03-31 6 views
7

Ich schreibe jQuery-Plugin, das viel Code enthält. Deshalb habe ich beschlossen, den Code zu trennen und für mich (den Entwickler) modularer zu gestalten. Dazu benutze ich require.js. Jetzt
Ich habe 6 js Dateien:requirejs - mehrere Dateien zu einer einzelnen js-Datei kombinieren, die nicht von requirejs abhängig ist

  1. utils.js
  2. Basis-row.jas
  3. a-row.js
  4. b-row.js
  5. my-table.js
  6. main.js

Dateien 1 bis 5 definiert JavaScript "Klassen" und sie haben dependecies zwischen sich. Die "primäre" Klasse, die das gesamte Konzert betreibt, ist my-table.js. main.js hat die Abhängigkeit nur in meinem-table.js und schafft ein Plugin von ihm:

require([ 
    'my-table' 
], function(MyTable) { 
    jQuery.fn.myTable = function(options) { 
     var table = new MyTable(this, options); 
     this.data('myTable', table); 
     return this; 
    }; 
}); 

Jetzt habe ich aus diesen Dateien eine große js-Datei erstellen möchten, ohne Abhängigkeit alle 6-Dateien (außer jQuery dass der Benutzer darauf verweisen sollte). Dafür habe ich r.js (http://requirejs.org/docs/optimization.html) verwendet und als Ergebnis habe ich eine große js-Datei bekommen, die von require.js abhängt (und Aufrufe zum Definieren und Anfordern enthält). Ich folgte diesem: http://requirejs.org/docs/faq-optimization.html#wrap und benutzte mandel.js, um alle meine Dateien für die Verwendung zu kombinieren, die nicht von require.js abhängig ist. Das funktioniert gut.
Das Problem ist, warum brauche ich alle definieren und erfordern Methodenaufrufe und Mandel.js? Warum konnte der Optimierer nur die Funktion Ergebnisse verketten (wie in dieser Frage beschreiben: Why do concatenated RequireJS AMD modules need a loader?) wie folgt aus:

(function() { 
    var utils = «function() { 
     .... 
     return Utils; 
    }»(); 
    var baseRow = «function(A) { 
     .... 
     return BaseRow; 
    }»(utils); 
    .... 
    .... 
    var myTable = ..... 

    //<--This is require call and therefore doesn't return a thing 
    (function(MyTable) { 
     jQuery.fn.myTable = function(options) { 
      var table = new MyTable(this, options); 
      this.data('myTable', table); 
      return this; 
     }; 
    })(myTable); 
})(); 

Als Ergebnis dieses Prozesses habe ich beschlossen, die Dinge zu überprüfen, und kombiniert manuell alle Dateien eine verkleinerte Datei. Ich lande mit einer Datei, die um 3k kleiner ist als die Mandelversion!
Ich finde nicht die Logik hinter dem r.js-Optimierer, der das abhängige result.js-Ergebnis erzeugt. In meinem Fall wird niemand die Dateien verwenden müssen, meine primäre js-Datei ist der einzige Verbraucher. Was denken Sie?

Antwort

0

Der Standardwert für den findNestedDependencies Option im Optimierer „false“ ist, was bedeutet, dass, selbst nachdem die Skripte optimiert ist, gibt es noch einen verschachtelten require oder define Anruf sein könnte, die einen Modul-Lader erfordern würden. Ein Loader wird auch für externe Abhängigkeiten benötigt.

Ich stimme jedoch zu, dass, wenn findNestedDependencies auf "true" gesetzt ist und keine externen Abhängigkeiten Teil des Projekts sind, der Optimierer in der Lage sein sollte, seine Notwendigkeit für einen Loader zu entfernen.

-1

Sie können nur die in der Datei benötigten Dateien hinzufügen. Sie können das mit einem getScript-Aufruf tun.

$.getScript("my_lovely_script.js", function(){ 

    //whatever you want here. 

});