dann's blog

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用のフレームワークを作っておいてもいいかもしれないですね。

基本構成

• クラス
  • http://ejohn.org/blog/simple-javascript-inheritance/
• dependency management
  • jQuery RequireJS plugin (RequireJS)
• custom eventのPub/Sub
  • jQuery Pub/Sub plugin
• テンプレートエンジン
  • mustache.js

設計のポイント

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

jQueryでOOPするためのtips

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

ツイートする