AJAXデベロッパがUnobtrusive JavaScriptへの移行を継続

<input id="field" onclick="alert('hello')" />

<script type="text/javascript">
  Event.observe(window, 'load', function() {
    Event.observe($('field'), 'click', function() {
      alert('hello');
    };
  });
</script>

<input id="field" />

これにより、HTML(この例では入力タグ)をクリーンに保ち、デベロッパにJavaScriptコードのデバッグを参照する単一ポイントを提供する。一般的に、Unobtrusive JavaScriptは、HTMLページ自体の タグ内に組み込まれるのとは対照的に、.jsファイルに格納される。ここでのunobtrusiveな例はより多くのコード行を必要としているが、unobtrusiveが発生すると通常JavaScriptの大きいブロックは、よりクリーンで簡潔になる。

Unobtrusive JavaScriptのその他の利点には、以下のものが含まれる。

• 不安材料の分離：振る舞いレイヤーがコンテンツおよびプレゼンテーションレイヤーから分離される。
• ブラウザの不整合の取り扱いがますます簡単になる。
• 読み取りやすい簡潔なコード。

Prototype(サイト・英語)のようなオープンソースライブラリと併用する場合、Unobtrusive JavaScriptはますます簡単に作成ができるようになる。otrusiveなJavaScriptを取り出し、unobtrusiveにするように特別設計されているフレームワークさえある。

たとえばLow Pro(source)は、Prototypeにいくつか便利な機能を追加し、ブラウザのイベントモデルへのアクセスを劇的に改善させ、unobtrusiveなトリガに接続するためにそれを凍結させる振る舞いのライブラリを提供する。Low Proでの以前の例は、以下のように記述することができる。

<script type="text/javascript">
  Event.addBehavior({
    'input#field:click' : function(e) {
      alert('hello');
    }
  });
</script>

<input id="field" />

ページのロードが完了すると、自動的に振る舞いは接続される。CSSセレクタを使用し、その他の振る舞いは追加されトリガーのエレメントを精選する。

AJAX可能なWebサイトの数は着実に増加している状況で、JavaScriptはWebアプリケーション開発においてますます大きな部分を占めてきている。JavaScriptをunobtrusiveのまま維持することで、すばらしい機能を簡単に開発することができる。また、こうしたWebサイトの今後のメンテナンスも相当簡単になり、さらに費用効率が高まることも期待できる。

原文はこちらです：http://www.infoq.com/news/2008/06/unobtrusive