DOM = フレームバッファ
この記事はDOM = Frame buffer | Quixey Blogを勝手訳したものです。
もしあなたが大規模なAJAXアプリケーションを書いているなら、このようなコードを書くのを許せるだろうか。
if (jQuery("#file_menu").is(":visible")) { ... }駄目だ、これは全然良くない。というのも、プログラムの状態の保持をDOMに依存しているからだ。私たちは以下のように主張したい。DOMは木構造を持っているにもかかわらず、あなたのアプリケーションの出力をエンコードするのみであり、セマンティクス(意味論)を持っていない、と。
デスクトップのメタファ
デスクトップアプリケーションをプログラミングすることを考えよう。あなたのプログラムはメモリ内のオブジェクトを通じて一連の状態を保持する。もしあなたが現在どのUIエレメントが表示されているかを知りたいならば、
Screen.getPixelColor(519, 872) == "#000000"をチェックしたりはしないはずだ。その代わりに、Menus.activeMenu == Menus.FILE等のように書いて、適切に意味を持った構造とともにオブジェクトを利用するだろう。美しいコードを書くための最も基本的な原則は、あなたがするつもりのことを書くことだ。あなたは本当にスクリーン上のピクセルの値を知るつもりなのだろうか？いいや、あなたがやろうとしていることはUIエレメントが表示されているかどうかを知ることであるはずだ。先程の例の
Menusオブジェクトのように、これはあなたがなぜプログラム内で抽象化のレベルを建設するかの理由だ。もしプログラマーが menus について内包を持つなら、コードの行は menus について語るべきだ。この種の適切な抽象化は、やっつけ仕事のハッカーと達人プログラマーとを分けるものだ。AJAXアプリケーションに適用する
だれもがプログラムの状態を保持するのにピクセルの値に依存するべきではないということを理解している。しかし、ほとんど誰もがAJAXアプリケーションのための似たルールを理解していない: プログラムの状態をDOMに持つな。
DOMの意味が静的なウェブページの日々から180度変わってしまったために人々は困惑させられている。静的なHTMLとCSSの古き日々においては、あなたのデザインのために意味的な構造を明示してHTMLを書くことで、"スタイルをセマンティクスから切り離す"ことをしてきたはずだ。あなたのレイアウトの部分間の親子関係を表すのにネストされたタグを使っただろう。そしてあなたは視覚化処理を操作するのにレイアウトにおけるセマンティクスを持たない属性、つまりスタイルシートを使うだろう。
モダンなAJAXアプリケーションでは、HTMLとCSSは一段下の抽象化レベルに降格している。意味をもった構造を符号化するのに使われるもの + 視覚化処理(訳注:HTMLとCSSの事)は、今では視覚化処理をエンコードするだけだ。あなたのアプリケーションのセマンティクスを表す構造は、DOMというよりもむしろJavaScriptのプログラムとその状態だ。
そしてこれが DOM = フレームバッファと私たちが主張している理由だ。それは単にアウトプットを吐き出す場所に過ぎない。
http://quixey.wordpress.com/2010/02/02/dom-frame-buffer/抽象化に反する罪
抽象化に反する最初の罪をもう一度見てみよう:
jQuery("#file_menu").is(":visible")これは以下のように書き直されるべきだ:
Menus.activeMenu == Menus.FILE理解しただろうか。あなたの視覚化処理がピクセルかもしくはDOMを扱うかに関わらず、あなたはアクティブなメニューのための抽象的な概念についてのコードを書くべきだ。
あなたのおじいさんが作った静的なページはDOMツリーを使ってレイアウトのセマンティクスを形作るが、だからといって、あなたのAJAXプリケーションが視覚化層でゴミ溜めの中に飛び込んで自身の状態をモデリングしなければならないということではないのだ。
