Prototype.jsとjQuery
以前に、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はものすごくシンプル。
まずはこんなもん。