Google Closure Libraryを使った開発事始め

投稿日：

Google Chrome Extensionを作りたくなったので、勉強がてらClosure Library + 52frameworkで作ってみることにした。

Closure LibraryはGoogle製のJavaScript Library(Framework). GmailなどのGoogle製Web ApplicationのFront EndはこのLibraryを使っているらしい。

まずは開発に必要なLink集。

始め方はOfficial Documentがわかりやすい。最初に読み込むbase.jsには便利な関数があるので、このManualには一度目を通しておく。英語が苦手な場合は下記Blogも参考に。

ちょっと使ってみた感じは、jQuery + jQuery UIに比べてかなり敷居が高い。demoを見てやりたいことが分からなかったら、Google先生に聞くよりSource CodeをGrepした方が早い。

Commentは結構たっぷり書いてあるけど、英語が分かって、Object指向のJavaScriptの書き方を知っていないと辛いかもしれない。

頻繁に使いそうなLibraryをMemo

Library Comment
goog.base.js isFunction, cloneObjectとかUtility関数が詰まってる
goog.dom getElementなどDOMの操作
goog.dom.classes css classの操作
goog.style css styleの操作をMethodで提供している。goog.cssomは直接CSS名を指定して操作。
goog.events goog.events.listenでEventをBindする. EventTypeはgoog.events.EventTypeに定義されている。
goog.uiで作った場合はgoog.ui.Component.EventTypeになる
goog.dom.query jQueryなどで使われているselectorを実現してくれるPlugin.
file自体は下記の場所にある。
closure-library\third_party\closure\goog\dojo\dom
説明もFile内のheader部分に書かれているので、そちらを参考に。
goog.require('goog.dom.query');
だけで動く（たぶん）。
goog.dom.query('#hoge [id^=button]')
が出来るようになる。
やっぱりこれがあると開発効率がいい。

 

< Related Posts >