2009年3月19日木曜日

主要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パターン


参考

0 件のコメント:

コメントを投稿