Wie kann ich meine eigene js Modul mit goog.provide und goog.require laden?

https://stackoverflow.com/questions/1918996

20-09-2019
|

Frage

Wir versuchen, die Verpackung für unser Projekt von Dojo zu wechseln Schließung zu Google, aber wir haben kein Glück so weit hatten. Hier ist ein einfaches Beispiel, das zeigt, was wir versuchen zu erreichen:


<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="runtime/src/core/lib/goog-rev26/base.js"></script>
        <script>
            goog.require("foo.bar");
            function main() {foo.bar.echo("hello world")}
        </script>
    </head>
<body onload="main()">
</body>
</html>

Dann in /foo/bar.js ich habe:


goog.provide("foo.bar");
foo.bar.echo = function(s) {console.debug(s);}

Die Fehler, die ich in Firebug erhalten sind wie folgt:

goog.require could not find: foo.bar
foo is not defined

Wenn ich im Netz Registerkarte sehe, gibt es nicht eine HTTP-Anforderung, um eine Datei zu holen. - Ich war die Schließung Bibliothek erwartet einen Skript-Tag zu generieren bar.js zu holen

Hilfe! ;)

Lösung

ich es herausgefunden und es ist nicht sehr hart, aber es gibt ein paar Fallstricke.

Grundsätzlich können Sie die Abhängigkeit erzeugende Skript calcdeps.py verwenden ( sollten Sie lesen calcdeps.py docs ) in einem von mehreren Modi:

Erstellung deps.js Datei
alles in eine einzige Datei verketten, optional Kompilieren der Verschluss-Compiler.

Für die Entwicklung sollten Sie (1) verwenden, da es Ihnen ermöglicht die calcdeps.py nach der Bearbeitung der JS Quellen nicht ausgeführt werden, es sei denn, Sie Änderungen an den Abhängigkeitsbaum zu machen. Der Rest der Antwort ist etwa so, ich habe noch das andere nicht versucht.

Hier ist, was ich tat, um es zu erzeugen:

#!/bin/bash
cd closure-library/closure/goog
python ../bin/calcdeps.py -p ../../../js -o deps > ../../../my-deps.js

... die folgenden Verzeichnisstruktur unter der Annahme:

project/
  closure-library/ (as checked out from SVN)
  js/ (my JS code)
  app.html

(der -p Parameter durchläuft alle js Dateien in dem angegebenen Verzeichnis und die docs sagen, dass Sie mehrere Verzeichnisse suchen angeben können, wenn Sie zu haben.)

Der obige Aufruf erzeugt eine my-deps.js Datei neben dem Haupt app.html, die ich verwende, um die Anwendung auszuführen. Die erstellte Datei enthält Informationen über meine JS-Dateien in js/ und sieht wie folgt aus:

goog.addDependency('../../../js/controllers.js', ['proj.controllers'], []);
goog.addDependency('../../../js/ui.js', ['proj.ui'], ['proj.controllers']);

- wo die erste Zeichenkette, die es der Weg zu meiner JS-Datei relativ zur Verschluss-Bibliothek / Verschluss / GOOG / base.js (wichtig!), Das zweite Feld ist die Liste der goog.provide -d Strings und die letzte Reihe ist die Liste der goog.require-d-Strings.

Jetzt in app.html ich habe:

<script src="closure-library/closure/goog/base.js"></script>
<script src="my-deps.js"></script>
<script>
  goog.require("proj.ui");
</script>
<script>
  // here we can use the required objects
</script>

Hinweis:

Neben einschließlich Schließung des base.js, schließe ich meine erzeugt deps.js
Wie bereits erwähnt im Tutorial der goog.require Anruf hat in einem separaten sein Script-Tag , weil es anhängt einen Skript-Tag die erforderlichen Skripte zu laden und sie sind nach der aktuellen Script-Tag fertigen Verarbeitung geladen.

Gotchas:

Das oben beschriebene Problem mit Pfaden zu base.js. relativ zu sein goog.require erstellt die Skript-URL zu laden, indem Sie die Basis-URL base.js verketten (das heißt ohne base.js leafname) und den ersten Parameter zu goog.addDependency in deps.js.
calcdeps.py funktioniert nicht gut auf Windows, insbesondere die Schrägstriche in der Verwendung deps.js Stringliterale
Wenn etwas nicht gut funktioniert, können Sie einen href aussehen durch <= "http://code.google.com/p/closure-library/issues/list?can=2&q=calcdeps&colspec=ID+ Typ + Status + Priorität + Milestone + Inhaber + Zusammenfassung & Zellen = Kacheln“rel = "noreferrer"> alle Fragen zu erwähnen calcdeps und stellen Sie sicher, dass Sie eine aktuelle Kasse.

Andere Tipps

Update !!!

Neue Version von calcdeps.py ändert sich das Spiel ein wenig. So erstellen Sie Ihre deps.js müssen Sie nun die Option -d verwenden. zB:

python path-to-closure-library/closure/bin/calcdeps.py -i path-to-your-src/requirements.js -o deps -d path-to-closure-library/closure/ -p path-to-your-src/ --output_file=path-to-your-src/deps.js

Zum Kompilieren:

python path-to-closure-library/closure/bin/calcdeps.py -i path-to-your-src/requirements.js -d path-to-closure-library/closure/ -p ./ --output_file=path-to-your-release/scripts.min.js -c path-to-compiler/compiler.jar -f "--compilation_level=ADVANCED_OPTIMIZATIONS" -f "--debug=true" -f "--process_closure_primitives=true" -f "--manage_closure_dependencies=true" -o compiled

So ist der Prozess tatsächlich jetzt viel einfacher, aber Sie haben Ihre Kräfte von ESP genutzt werden, um herauszufinden, wie seine völlig ohne Papiere. Die calcdeps.py jetzt tut auch nicht der Arbeit mit Python 3.1 auf Windows, so dass auch aus Spaß häuft. Ein paar Hacks wurde es für mich arbeiten (was ich nicht hier gestellt werden, da ich nicht ein Python-Programmierer bin und es muss bessere Möglichkeiten, es zu tun).

Im Allgemeinen ist der letzte Tag war super Spaß, hoffe, dieser Beitrag hilft jemand nicht denselben Genuss.

Guido

Ich konnte es an die Arbeit erhalten, indem die folgenden zu deps.js fügte hinzu:
goog.addDependency('../../../foo/bar.js', ['foo.bar'], []);

Firefox macht jetzt eine HTTP-Anfrage an /foo/bar.js, wenn es die goog.requires Aussage trifft.

Allerdings enthält die Datei diesen Kommentar:
// This file has been auto-generated by GenJsDeps, please do not edit.

Nach diese , GenJsDeps ist die gleiche wie calcdeps.py. Wenn man sich die Dokumentation aussehen, es sieht aus wie es ein -o deps Schalter ist die deps.js neu generiert werden, so dass es nicht manuell bearbeitet wird.

Ja sollten Sie calcdepds.py. Ich habe eine große Blog-Post nach viel Versuch und Irrtum herauszufinden, die beste Art und Weise, dies zu tun, habe ich auch die Unterschiede zwischen dojo.require und goog.require gehen:

http://apphacker.wordpress.com/2009/12/28/howto-how-to-use-goog-require-and-goog-provide-for-your-own-code/

Hier ist ein kleines Projekt, dass ich auf gearbeitet, dass vielleicht hilfreich für Sie sein: http: // Github .com / fintler / Lanyard

Werfen Sie einen Blick auf die build.xml, die Datei mit dem Namen lanyard.js, und alle der gefundenen Dateien in src / geom /*.

Die build.xml hat ein Beispiel dafür, wie für alle der js in src befindet calcdeps.py durch Ameise nennen. Es ist vielleicht nicht der beste Weg, Dinge zu tun, aber es ist so weit für mich gearbeitet.

So oder so kundenspezifische Module zum Laufen zu bringen, zumindest für Entwicklungsversion ist manuell schließen js Dateien in head-Bereich HTML-Seite, nach base.js Datei Aufnahme von Google.

<script type="text/javascript" src="js/closure/goog/base.js"></script>
<script type="text/javascript" src="js/closure/custom/custom.js"></script>
<script type="text/javascript" src="js/closure/custom/sub/sub.js"></script>
...

Aber Sie sollten über Reihenfolge der Aufnahme von sich selbst kümmern. Für nicht sehr große eigene Dateien Sets funktioniert es gut. Für die Produktion Version, die Sie noch besser zu nutzen js Quelle kompilieren mußten alle Vorteile der Schließung Bibliothek zu erhalten.

Lösung:

Download Schließung zu einem Projekt Externen (oder Vermögen, was auch immer).
nicht die Mühe mit onload Einstellung, Verzögerung, mit Asynchron spielen, etc ..
sie wird nicht funktionieren (sie sind auch sehr schlechte Design-Muster und extrem lahm ..)

- das ist Ihr `main.js` wo Sie dynamisch den Code in das DOM Injektion (zum Beispiel ein Bookmarklet oder etwas zu schaffen):

/**
 * loads the base.js of google closure.
 * http://code.google.com/p/closure-library/
 */

(function() {
  var s = document.createElement('script');
  s.type = "text/javascript";
  s.src = "./assets/closure/goog/base.js";
  s.async = true;
  document.getElementsByTagName("body")[0].appendChild(s);
}());

/**
 * activated from the base.js as JSONProtocol.
 */
window['starter'] = function() {
  console.log("hi...");
};

jetzt:

Bearbeiten Ihre base.js

fügen Sie das das Ende der Datei

......
.......
........

/**
 * run the method when done load. just like JSONProtocol.
 */
window.setTimeout(function() {
  window['starter']();
}, 5);

Ihre " Rückruf " einfach aktiviert Starter, wenn die Datei getan hat, Rendering,
es funktioniert perfekt, und es hält asynchron jede Ressource geladen werden.

P. S.

das Fenster [ ‚....‘] Syntax ist, so dass Sie sicher Verschluss-Compiler, die Max und immer die gleichen Namen (obwohl es andere Möglichkeiten, dies zu tun, sind verwenden könnten, aber das ist die einfache „immer arbeitet "Art und Weise ..).

2. auf `base.js` können Sie auch das Timeout vermeiden und verwenden Sie nur

......
.......
........

/**
 * run the method when done load. just like JSONProtocol.
 */
window['starter']();

aber als Daumenregel modernen Browsern besser wirkt, wenn Sie diejenigen wrap „interessieren sich nicht, nur das Zeug am Ende tun, wie JSONProtocol Rückruf“ Stuff-

Timeouts (meist mit Werten von 0-5 verwendet) werden nicht als Timeouts unterbrochen, sondern als eine Möglichkeit, bricht die Synchronität des Code-Block ermöglicht wirklich „kontext Schalter“ -ähnlichen Verhalten.

obwohl es eine zusätzliche Overhead gibt.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow

Wie kann ich meine eigene js Modul mit goog.provide und goog.require laden?

- das ist Ihr main.js wo Sie dynamisch den Code in das DOM Injektion (zum Beispiel ein Bookmarklet oder etwas zu schaffen):

2. auf base.js können Sie auch das Timeout vermeiden und verwenden Sie nur

- das ist Ihr `main.js` wo Sie dynamisch den Code in das DOM Injektion (zum Beispiel ein Bookmarklet oder etwas zu schaffen):

2. auf `base.js` können Sie auch das Timeout vermeiden und verwenden Sie nur