Google Closure Library + Compiler メモ

ADVANCED_OPTIMIZATIONS 使いたいっ！・・・・・・いや、なんとなく。
やっぱ js は、ちっさいほうが良いし、NZ サイトの JS をSIMPLE_OPTIMIZATIONS と比較したら、こんだけ違ったわけだし。

-rw-r--r-- 1 hoge hoge  35495 2010-02-27 04:56 test.js(ADVANCED)
-rw-r--r-- 1 hoge hoge 157754 2010-02-27 05:08 test_uncomp.js (defalult (SIMPLE))

というわけで、Closure Library を使い、圧縮に Closure Compiler の ADVANCED_OPTIMIZATIONS を使おうとしてハマったことのメモです。
Libary 自体、まだまだ使いこなせていなく、わかんないことだらけなので、これからも色々起こるでしょうけど。

compiler のオプション –externs で google_maps_api_v3.js” を使う。
勝手に変更しないやつの定義みたいなものらしい。ってか、インタフェースの定義だよねあのファイル。

プロパティ名を文字列にする。


var opt ={
  zoom: 12,
  center: pos
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

を、


var opt ={
  'zoom': 12,
  'center': pos
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

にすると ok っぽい。
そこでしか使わないやつはドットを使い、別のところでも使うやつは文字列でいくと。

window つっこんじゃマズいんですかね・・・。
とりあえずトリガーだけ欲しい & this が使いたいので、今回は下記の方法で逃げた。


var me = this;
window.addEventListener(EVENT, function(){
  me.hogehoge();
}, false);

window のプロパティに設定する。


function hogehoge(){
...
}
window['hogehoge'] = hogehoge();

ね・・・。
試しにクラスを1つテストを書いてコンパイルしてみて、テストは通ったから大丈夫！
と思ったけど、まとめると動かないとかあるし。
selenium とかで動きチェックしないとダメなんですかね、やっぱり。
ここはちゃんと考えないとマズいよなぁ。

とりあえず、デバッグは console.log 入れまくって頑張り、function も console.log につっこんで、
そっから js 整形ツールにつっこんで中身確認とか(理解できないやつもあるけど)。

と、今んとこそんな感じか。calcdeps.py で deps.js 作ったりとかも後でメモれたらメモる。

なんでこんなメンドっちいことをやっているかというと・・・、おもしろそうだからw
仕事で普通のサイト向けに js 書くなら jquery のが楽だし作業は早いし、
それなりのクオリティで出せる（出せていると思いたい)はずなので。

layer13