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 自体、まだまだ使いこなせていなく、わかんないことだらけなので、これからも色々起こるでしょうけど。

google map v3 を使いたいんだけど、google.maps.LatLng 達がいなくなる

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

参考
How to Declare Externs with the Closure Compiler Application
Closure-Compiler Extern File Now Available

プロパティ名が変わる。

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


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

を、


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

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

参考
Inconsistent Property Names

goog.events.listener(window, hoge …) とやると未コンパイルでは動くが、コンパイルすると動かない。

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


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

html から呼びたい関数があんだけど、リネームされた

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


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

参考
Removal of Code You Want to Keep

コンパイルしたとき warning 出るけど意味わかんね

Error and Warning Reference

コンパイル前と後で動きが違うんですけど・・・

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

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

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

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