javascript クロージャー - 自分のjsモジュールをgoog.provideとgoog.requireで読み込むにはどうすればいいですか?





ライブラリ 使い方 (7)


はい、calcdepds.pyを使用してください。 多くの試行錯誤を経て大きなブログ記事を作成してこれを行う最善の方法を見つけ出したので、dojo.requireとgoog.requireの違いについても説明します。

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

私たちはプロジェクトのパッケージをdojoからgoogle閉鎖に切り替えることを試みていますが、これまでのところ運がありませんでした。 ここでは、達成しようとしていることを示す簡単な例を示します。


<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>

それから/foo/bar.js私は持っています:


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

火かき棒で私が受け取るエラーは次のとおりです:

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

Netタブを見ると、ファイルを取得するHTTPリクエストがありません。私は、closureライブラリがbar.jsを取得するスクリプトタグを生成することを期待していました。

助けて! ;)




私はdeps.js以下を追加して動作させることができました:
goog.addDependency('../../../foo/bar.js', ['foo.bar'], []);

goog.requires文がgoog.requires /foo/bar.js 、Firefoxは/foo/bar.jsにhttp要求を出します。

ただし、ファイルにはこのコメントが含まれています。
// This file has been auto-generated by GenJsDeps, please do not edit.

これによると、 GenJsDepsGenJsDepsと同じcalcdeps.py 。 マニュアルを見ると、 -o depsを再生成して手動で編集されない-o depsスイッチがあるように見えます。




いずれの方法でも、少なくとも開発用のバージョンでカスタムモジュールが動作するようにするには、googleのbase.jsファイルをインクルードした後、HTMLページのheadセクションに手動でjsファイルを含めることです。

<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>
...

しかし、あなた自身で包摂の順序に気を付けるべきです。 それほど大きなカスタムファイルセットではうまく動作しません。 プロダクションバージョンでは、クローズライブラリのすべての利点を得るために、jsソースコンパイルを使用する方が良いです。




溶液:

  • あなたのプロジェクトの外部(または資産、何でも)にクローズをダウンロードしてください。

  • オンロードの設定、遅延、非同期の再生などを気にしないでください。

  • 彼らは動作しません(彼らはまた非常に貧しいデザインパターンと非常に不自由です..)

これはあなたのコードをDOMに動的に注入するmain.jsです(例えば、ブックマークレットなどを作成する)。

/**
 * 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...");
};

今:

  • base.js 編集する

ファイルの末尾を追加する

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

/**
 * run the method when done load. just like JSONProtocol.
 */
window.setTimeout(function() {
  window['starter']();
}, 5);
  • あなたの " コールバック "は、ファイルがレンダリングを完了したときに単にスターターを起動し、

  • それは完全に動作し、すべてのリソースを非同期的にロードし続けます。

ps

  1. window ['....']構文は、最大でclosure-compilerを安全に使うことができ、常に同じ名前を使うことができるようにするためのものです(別の方法もありますが、これは単純な "常に働く"方法です)。 )。

2. base.jsタイムアウトを避けて、ちょうど使用することもできます

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

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

JSONProtocolコールバックのように最後にこのようなことをやってみると、現代のブラウザは、

タイムアウト(主に0〜5の値で使用される)は、タイムアウトとして中断されず、コードブロックの同期性を破る手段として、真に「コンテキストスイッチ」のような振る舞いを可能にします。

そこには余分なオーバーヘッドがあります。




私はそれを理解し、それほど難しくはありませんが、いくつかの問題があります。

基本的には、依存関係生成スクリプトcalcdeps.py( calcdeps.pyドキュメントを読む必要があります )をいくつかのモードの1つで使用することができます:

  1. deps.jsファイルの生成
  2. すべてを1つのファイルに連結し、必要に応じてクロージャコンパイラを使用してコンパイルします。

開発のためには、依存関係ツリーを変更しない限り、JSソースを編集した後にcalcdeps.pyを実行しないようにするため、(1)を使用するべきです。 答えの残りの部分はこの方法についてですが、私はまだもう1つ試していません。

ここに私がそれを生成するためにしたものがあります:

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

...以下のディレクトリ構造を前提としています:

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

-pパラメータは、指定されたディレクトリ内のすべてのjsファイルを走査します。必要があれば複数のディレクトリを指定して検索することができます)。

上記の呼び出しは、アプリケーションを実行するために使用するメインのapp.htmlの横にmy-deps.jsファイルを作成します。 作成されたファイルには、 js/内のJSファイルに関する情報が含まれており、次のようになります。

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

- 最初の文字列は、JSファイルへのパスで、 closure-library / closure / goog / base.js (これは重要です)へのgoog.provideですgoog.provide番目の配列はgoog.provide -d文字列のリストで、最後の配列goog.require -d文字列のリストです。

今app.htmlで私は持っている:

<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>

注意:

  1. クロージャのbase.jsを含めることに加えて、私は生成されたdeps.js
  2. チュートリアルで説明しように、 goog.requireコールは 、必要なスクリプトを読み込むためのスクリプトタグを追加し、現在のスクリプトタグが処理を完了した後に読み込まれるため、別のスクリプトタグ内になければなりません

ゴッチャ:

  1. 上記の問題は、base.jsに相対的なパスである goog.requireは、base.jsのベースURL(base.jsリーフ名なし)とdeps.jsのgoog.addDependencyへの最初のパラメータを連結して読み込むスクリプトURLを作成します
  2. calcdeps.pyはWindowsではうまく機能せず、特にdeps.jsの文字列リテラルでバックスラッシュを使用しています
  3. 何かがうまくいかない場合は、 calcdepsに言及しているすべての問題を調べて、最新のチェックアウトがあることを確認してください。



更新!!!

calcdeps.pyの新しいバージョンはゲームを少し変更します。 deps.jsを作成するには、-dフラグを使用する必要があります。 例えば:

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

コンパイルします:

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

だから、プロセスは実際はずっと簡単ですが、ESPの能力を使って完全に文書化されていないことを知る必要があります。 calcdeps.pyは、Windows上のPython 3.1でも動作しないので、楽しいヒープもあります。 いくつかのハックが私のために働いています(これは私がPythonプログラマーではないので、ここには載せません。もっと良い方法が必要です)。

一般的に最後の日は超楽しいです、このポストが誰かが同じ楽しさを避けるのを助けることを願っています。

グイド




しかし、誰かがホームページにリダイレクトしたい場合は、次のスニペットを使用することができます。

window.location = window.location.host

開発、ステージング、および制作の3つの異なる環境がある場合に役立ちます。

ChromeコンソールやFirebugのコンソールにこれらの単語を入れるだけで、このウィンドウやwindow.locationオブジェクトを探索できます。







javascript dojo google-closure google-closure-library