JavaScript という言語は Event Driven です。マウスでウェブページをクリックすると、 click イベントが発生します。ブラウザは各イベントキャプチャーして、各要素にバインドしたイベントハンドラを呼び出します。イベントハンドラにわれわれは DOM 要素や CSS クラスを追加したり、外したりすること、ウェブページが動的になります。
これは一般的な Web App のデザインです。それで、jQuery(document).ready(function() {}) みたいな関数が大変重要になります。なぜなら、ブラウザが HTML をパースしている間、クローズタグを終える前に、JavaScript でその中の要素を操作すると、エラーになって、ウェブページも変な形になります。このようなエラーはよく IE で見かけます。
（実は jQuery ready 関数が onLoad などの Native 関数のラッパーだけです。いろんなブラウザ実装が違うため、最後にいつウェブページがロード終わったかちょっと違います。このような違いがなくすことで、私たちは一つのコードすべてのブラウザを対応できるようになります。Selector 機能と同じように、Cross browser も jQuery の一つ大きな特徴です。）
このような Web App は簡単に設計できます：
一般的に、HTML を書いて、CSS クラスで色や display 属性を定義して、ready() 関数に対象の DOM 要素に初期化処理やイベントハンドラを定義することだけです。例えば：
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script>
$(document).ready(function() {
// DOM のロードが終わったら、すべてのボタンと A tag に click イベント
// ハンドラをバンドします。
$('button, a').click(function(event) { console.log($(event.target).tagName); }
});
</script>
</HEAD>
<BODY>
Sample です。
<button type = "button" value="Hello"></button>
<a href="#">Link</a>
</BODY>
</HTML>
ただ、このような Web App メンテナンスはちょっと大変です。なぜなら、他の開発者は「この機能はどのように実装したか」を探し出すことが面倒ですし、イベントハンドラはそう簡単に見つからないこともよくあります。JavaScript の特徴で、ただの検索だけで、見つからない可能性が十分あります。
あと、すべての要素は一つのコードでコントロールできるので、その一行のコードを見つかるには、ちょっと時間がかかるかもしれません。
もう一つの問題は HTML には状態など記録する機能は従来ないので、CSS や属性などを我々直接操作するしかありません。
このような問題を解決するために、いろんなライブラリが出てきました。逆に、Event Driven もいいところが結構ありまして、これもnode.js 売りになっています：ブロックがないから、サーバーとかはいつでも、莫大なリクエストが処理できるようになります。
knockout.js などちょっとしたライブラリの着目点もここにあります。HTML に自ら定義した属性を追加して、イベントハンドラや、初期化などのコードを HTML で見えるようになります。
次に Backbone.js, AngularJS, Ember.js など MV* Framework が他の道で Web App の開発を簡単にできるようにします。
だから、Frame work を使おう。：） 世界が綺麗になります。
0 件のコメント:
コメントを投稿