BT

InfoQ ホームページ ニュース AJAXデベロッパがUnobtrusive JavaScriptへの移行を継続

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

ブックマーク
Unobtrusive JavaScriptは、JavaScriptをHTMLマークアップと区別する新たに登場してきたテクニックである。これは、1990年代後半にCSSの作成に伴って出現した、スタイリングとHTMLを区別するのと全く同様である。たとえば、obtrusive JavaScriptはonClickハンドラを 直接入力フィールドに追加する。
<input id="field" onclick="alert('hello')" />

Unobsutrive JavaScriptは、イベントハンドラを入力フィールドに接続する前に、ページがロードを完了するまで待機する。
<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

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。