2011-01-03 13 views
1

私は最初のWebアプリケーションを開発しています。大きくなるにつれて、コードを整理する最もクリーンな方法がいくつか質問されています。経験豊富なデベロッパーは、使用する方法を共有することを心配していますか?構造WebアプリケーションのJavascriptファイル

これは私が現在やっているものです:

するとページが読み込まれると、それはかなりのIDまたはクラス識別子

<div id="calendar"> 
</div> 

... 

<div class="description" name="description[0]"> 
</div> 

etc. 

を持つ空のdivの持つHTML「テンプレート」だと、私Javascript関数を使用してページの読み込み時に入力します(これは後でユーザーアクション時に呼び出されます)。

すべてのコードは別ファイルですが、セレクタ、イベント、および対応する関数のリストのように見えます。例:

$('#current-view li a').click(function() { ... }); 

$('#save-form-button').click(function() { ... }); 

$('.employee-name').focus(showAutoComplete); 

$('input, textarea').attr('spellcheck', false); 

私のファイル全体は、基本的にはこれらの種類の長いリストです。これは、他の開発者がWebアプリケーションを構築する方法ですか?私はかなり自分自身を教えているので、比較のためのコードはありません。

$('#current-view li a').click(function() { *set the current tab* }); 

$(document).ready(function() { $('#current-view li#'+last_active_tab+' a').click(); }); 

またはselectViewのような別の関数が定義され、その後:

$('#current-view li a').click(selectView); 

$(document).ready(function() { selectView.apply($('#current-view li#'+last_active_tab+' a')[0]); }); 

おかげ -

そして、私は不思議に思っていました別の事、それはこのような何かをするクリーナーです!

答えて

4

クリックハンドラのいくつかの単純なロジックのような単純な状況では、私はあなたがやっていることから遠く離れていません。より複雑になると、コードをコンポーネントに分解して、時間の経過とともにメンテナンスできるようになります。

アプリケーションのコンポーネントは、オブジェクト指向のアプローチをとる必要があります。 UIコンポーネントは、カレンダーイベントの追加や削除のための機能を持つ「カレンダー」などのオブジェクトで表現できます。各オブジェクトはそれ自身のファイルになければならず、おそらくドキュメントが準備できれば複数回、あるいはおそらくシングルトンとしてインスタンス化することができます。ここで

カプセル化とポリモーフィズムを実現する方法など、コンポーネントにあなたのコードを壊すことについて話いくつかの素晴らしい記事です:あなたはジャスティン・ディアス、 によってmodule patternを見て取ることができる名前空間、オブジェクトレイアウトおよびカプセル化のために

Jonathan Snookは継承を防ぎ、elementhttp://snook.ca/archives/javascript/no-love-for-module-pattern)を検査することができないので、デバッグが難しくなるため、このようなカプセル化に反対しています。

多くの時間(using the object's prototype)インスタンス化されるオブジェクトを持つオブジェクト階層を作成する方法に関する私が見つけた最高の記事は、Mike Koss()です。 XML.comには、より簡単なintroductionhttp://www.xml.com/pub/a/2006/06/07/object-oriented-javascript.html)もあります。

関連する問題