Building Large jQuery Applications

jQueryとそのプラグインで大規模なJSアプリを作る際のポイントがとてもよくまとまっていたので、まとめておきました。同じようなことをやっている人は多いと思うのですが、jQueryの機能とpluginを上手く使っているなぁと思うので。

http://www.slideshare.net/rmurphey/building-large-jquery-applications
http://github.com/rmurphey/large-jquery-apps

これくらいの感じのものを作るのであれば、JS用のフレームワークを作っておいてもいいかもしれないですね。

基本構成

設計のポイント

  • クラス構成は、 page, widgets, serviceというクラス構成。いわゆるMVC構成。
  • server(backend) とのやりとりはserviceで
  • pub/sub pluginでDOM以外のcustom eventの通知をシンプルに (service部分)
  • widgetがテプレート参照してHTML隠蔽

jQueryOOPするためのtips

  • jQuery版bindであるproxy
    • $.subscribe('/search/term', $.proxy(this._saveSearch, this));
  • event delegation (delegate)
    • this.el.delegate('span.remove', 'click', $.proxy(this._removeSearch, this));