Prototype.jsとjQuery

javascript

以前に、Ajaxで動くチャットを作ったことがある。いろんな人に使ってもらい結構好評だった。そのときはAjaxの勉強がてら、手軽に作りたかったので、

  • サーバ側はPerl
  • クライアント側はPrototype.jsでAjax
  • 通信は json 形式
  • データはフラットファイル

という感じで作った。フラットファイルには

2008/12/09 23:31:52<>名前<>#000000<>メッセージ<>12<>0<>0

というフォーマットで格納することにした。<>がデリミタである。つまり、画面から入力された文字はHTMLエスケープをしてから書き込むことになる。12はフォントサイズで、後ろのゼロ二つは太字とイタリックのフラグである。

で、今、暇というわけではないが、勉強がてら、

に置き換えようとしている。以降、学んだことをちょっとずつ書いていこうと思う。

まだサーバ側は実装できていないのでJavaScript部分で気づいた点。ベースがPrototype.jsで作っているので、jQueryは少々違和感がある。

  • もちろん両ライブラリは共存させることもできるけど、それはしない方向で。
  • Prototype.jsでは重荷elementに操作することに対して、jQueryでは、jQueryオブジェクトに対しての操作になる。
  • 値の取得は、Prototype.jsがelement.valueという書き方に対し、jQueryはjQueryObject.val() となる。
  • イベントは、Prototype.jsがEvent.observe(element, 'click', handler) という書き方に対し、jQueryはjQueryObject.click(handler)とシンプルに。
  • jQueryでもやはりelementとして扱うシチュエーションはでてくるわけで、その場合は、エレメントが単一なのであれば、jQueryObject.get(0)でエレメントが取得できる。
  • イベントのプロパゲーションをとめたいと思ったとき、Prototype.jsでは、Event.stop(event)とすらっとかけるけど、jQueryでは相当するものがない（ので、Prototype.jsのコードをみてかいた）
  • Ajaxのコードはエラー時のコールバック関数を深く考えなければ、jQueryはものすごくシンプル。

まずはこんなもん。