BT

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

| 作者: Matthew Bass フォローする 0 人のフォロワー , 翻訳者 編集部 フォローする 0 人のフォロワー 投稿日 2008年6月29日. 推定読書時間: 3 分 |
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

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

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

このスレッドのメッセージについてEmailでリプライする

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

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT