主要JavaScriptフレームワークのデザインパターン傾向の比較

Prototype、jQuery、MooTools、YUI、Dojoを比較。
痒いところに手が届く、addEvent系とHTMLエレメントのclass操作を中心に見てみる。
大きくは、エレメントをグローバルオブジェクトにパラメータとして渡す"Managerパターン"と、エレメントを包んで機能を拡張する"Wrapperパターン"に分かれる。

• Prototype.js
• event追加
• <element>.observe(eventName, handler)
• Event.observe(element, eventName, observer, flg)
• dom ready event追加
• Event.observe(document, "dom:loaded", func)
• class追加
• Element.addClassName(element, className)
• class削除
• Element.removeClassName(element, className)
• class有無
• Element.hasClassName(element, className)
• 全子要素に実行
• <enumObj>.each(iterator)
• デザインパターン
• Managerパターン
• Managerが役割分担でたくさんいる
  
• jQuery
  
• event追加
• $(～).bind(type, data, func)
• jQuery.event.add(elem, types, handler, data)
• dom ready event追加
• $(document).ready(func)
• class追加
• $(〜).addClass(className)
• class削除
• $(〜).removeClass(className)
• class有無
• $(〜).hasClass(className)
• 全子要素に実行
• $(〜).each(func)
• デザインパターン
• Wrapperパターン
• MooTools
• event追加
• $(〜).addEvent(type, func)
• dom ready event追加
  
• window.addEvent("domready", func)
• class追加
• $(〜).addClass(className)
• class削除
• $(〜).removeClass(className)
• class有無
• $(〜).hasClass(className)
• 全子要素に実行
• <iterable>.forEach(func, bind)
• <iterable>.each(func, bind) ※forEachのalias
  
• $each(iterable, func, bind)
• デザインパターン
• Wrapperパターン
• 関数名が素直で分かりやすい
  
• YUI
• event追加
• YAHOO.util.Event.addListener(element, type, func, data, overrideContextFlg)
• obj.customEvent.Subscribe(func)　※selectEvent等のCustomEventを持っているObjectの場合
  
• dom ready event追加
  
• YAHOO.util.Event.onDOMReady(func, data, overrideContextFlg)
• class追加
• YAHOO.util.Dom.addClass(element, className)
• YAHOO.util.Dom.replaceClass(element, oldClassName, newClassName)　※classの変換
• class削除
• YAHOO.util.Dom.removeClass(element, className)
• class有無
• YAHOO.util.Dom.hasClass(element, className)
• 全子要素に実行
• 無し？
• デザインパターン
• Managerパターン。一部、Wrapperパターン。
• グローバルオブジェクトが構造的に整理されている
  
• Dojo
• event追加
• dojo.connect(element, type, context, func, dontFixFlg)
• dom ready event追加
  
• ？
  
• class追加
• dojo.addClass(element, className)
• class削除
• dojo.removeClass(element, className)
• class有無
• dojo.hasClass(element, className)
• 全子要素に実行
• dojo.forEach(array, func, thisObject)
• デザインパターン
• Managerパターン
  

参考

• prototype.js リファレンス（1.6.0）、Prototype ソース（1.6.0.3）
  
• jQuery リファレンス（1.3.1）、jQuery ソース（1.3.2）
• MooTools リファレンス（1.11）、MooTools ソース（1.2.1）
• Yahoo UI Library リファレンス（2.7.0）、API: event YAHOO.util.Event (YUI Library)
• Dojo ソース（1.2.3）