閉鎖プラットフォーム。 Google Closure Libraryの松葉杖

Gcl

• サイクルはありませんでした
• ローカライズの複雑さ（テキストに変数を挿入することは不可能でした）
• 条件と分岐はありませんでした。

• 〜500個のjsファイル
• 〜30 cssファイル
• 〜300パターン。

• デッドjsコードの削除
• cssは圧縮および検証されました
• テンプレートは、クライアント側でチェック、圧縮、保存されました。
• リソースを異なる言語に簡単に翻訳

JSコードを変更する

CSSからGSSへの移行

大豆の移行

統一

• SOYの強調表示と構文チェック
• ネストされたテンプレートの正しい呼び出しを確認します。 欠落および追加のパラメーター
• Ctrlキーを使用したテンプレートのクイックナビゲーション

最後の砦

global_export["showLoginDialog"] = function(event, elem) { //...   . }; 

 public interface Constants { public static final String typeId = "typeId"; public static final String user_id = "user_id"; public static final String items = "items"; .... } 

ソースマップ

 //@ sourceMappingURL= ... 

まとめ

ツールキット

クイックスタート

プロジェクト構造

• src-Javaソースはここに格納する必要があります。例ではConstants.javaのみ
• テーマ-gss、大豆、ロケールが保存されているテーマ。
  • gss-スタイル
    • 0-definitions.gss-定義
    • * .gss-スタイル
    • allowed.cfg-許可されたパラメーター
    • allowed_prop.cfg-許可されたプロパティ
    • fixed.cfg-圧縮されていない名前
    • .timestampは、最後に成功したgssコンパイルの時刻を保存する一時ファイルです
  • ロケール-xlf翻訳
    • * .xlf-翻訳
    • empty.xlf.template-空のローカライズ用のテンプレート
  • テンプレート-テンプレート
    • （名前空間）-テンプレートへのパス
    • global.properties-グローバルテンプレート定数
    • .timestampは、大豆が正常にコンパイルされた最後の時間を保存する一時ファイルです
• ツール-ツール
• WebUI-ルートとしてWebサーバーに移動するもの（Java開発者の場合、これに精通している）
  • js-コード
  • テーマ-コンパイルされたテーマデータ
    • css
    • js-コンパイルされたテンプレート
    • img、data-テーマ、写真、その他すべてのデータ。
  • * .html-stanichki
• build.soy.xml-これらは、ツールキットの起動を簡素化するantaのタスクです。

カスタマイズ

 TIMESTAMP_FNAME=".timestamp" DEFINITION_GSS="0-definitions.gss" THEMES_PATH=$DIR/../themes THEME_LOCALES="en,ru" LOCALE_SOURCE="en" WEB_ROOT_PATH=$DIR/../WebUI WEB_THEMES_PATH=$WEB_ROOT_PATH/themes TOOL_LOCALE_PATH=$DIR/cl-templates/extractor TOOL_MERGE_PATH=$DIR/merge-xlf #SOURCE MAP config SOURCE_MAP_ROOT=http://sourcemap.cp.com SOURCE_MAP_FULLPATH=$SOURCE_MAP_ROOT/js/module/__THEME__/__LOCALE__/ MODULE_PATH=$WEB_ROOT_PATH/js/module 

Eclipseまたは別のIDE

ローカリゼーション

GSSとSOYのコンパイル

デバッグする

リリース

定数

 < >:< > 

エクスターン

モジュールの組み立て

 <  >:< > 

config.cfg

 { options:<>, modules:[<>] } 

 { defines:{ /*  ,            */ "LANG":"ru",/*   */ "THEME":"default",/**/ "OPTIMIZATIONS": /*   */ /*"SIMPLE_OPTIMIZATIONS"*/ "ADVANCED_OPTIMIZATIONS" }, deps:{ /*    */ params:" -o list", workPath:"../../tools/closure/bin", exec:"python ./calcdeps.py" }, compiler:{ /*   */ params:" <anchor>habracut</anchor> ", workPath:"../../tools/closure/", exec:"java -jar compiler.jar" }, moduleManager:{ /*      */ path:"../../WebUI/js/module/%THEME%/%LANG%/", tree:"moduleinfo.js" }, exclude:[ "/.svn/", "/closure/base.js" ], /*   */ workPath:"../../WebUI/js" } 

 { name:< >, required:[<    >], files:[<     >], path:[<    ,      %THEME%, %LANG%"], exclude:[<   >] } 

 java -jar gcmodule -D<key>=<value> -D<key2>=<value2> -C"<Config file>" 

 java -jar gcmodule -DLANG=en -DTHEME=other 

ソースマップ

 #------------------------------- server { listen 80; server_name sourcemap.cp.com; proxy_buffering off; expires 0m; # Local map root /home/dis/workspace/CP/; # Remote map to source.cp.com #location / { # proxy_set_header Host "source.cp.com"; # proxy_pass "http://192.168.1.88:80"; # proxy_set_header X-Real-IP $remote_addr; # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; #} } #------------------------------- 

 sudo ln -s /etc/nginx/sites-available/sourcemap.cp.com /etc/nginx/sites-enabled/sourcemap.cp.com 

 127.0.0.1 sourcemap.cp.com 

 sudo service nginx restart 

たとえばページ

 <link rel="stylesheet" href="themes/default/css/0-reset.css" type="text/css" media="screen" title="no title"> <link rel="stylesheet" href="themes/default/css/1-main.css" type="text/css" media="screen" title="no title"> <script type="text/javascript" charset="utf-8"> /* Global constants */ Handlers={}; Handlers.rootPath="/"; </script> <script type="text/javascript" src="themes/default/js/renaming_map.js"></script> <script type="text/javascript" src="js/jquery/core/1.8.1/dev/jquery.js"></script> <script type="text/javascript" src="js/third_party/moment/moment.js"></script> <script type="text/javascript" src="js/closure/goog/base.js"></script> <script type="text/javascript" charset="utf-8"> goog.require('example.page.index'); </script> 

 <link rel="stylesheet" href="themes/default/css/compact.css" type="text/css" media="screen" title="compact"> <script type="text/javascript" charset="utf-8"> /* Global constants */ Handlers={}; Handlers.rootPath="/"; </script> <script type="text/javascript" src="js/jquery/core/1.8.1/jquery.js"></script> <script type="text/javascript" src="js/third_party/moment/moment.js"></script> <script type="text/javascript" src="js/module/default/ru/closure.js"></script> <script type="text/javascript" src="js/module/default/ru/template_theme.js"></script> <script type="text/javascript" src="js/module/default/ru/game.js"></script> <script type="text/javascript" src="js/module/default/ru/p_index.js"></script> 

まとめ