拡張性、再利用性、可読性の高いコードパターン - JavaScript編 #デザインパターン

快適なコーディングを楽しむための新しいコードパターン（とファイルパターン）を提示します。

2014-08-09追記：
長くなったのでHTML(PHP)編,CSS編,JavaScript編に分けました。
過去の投稿からご参照頂ければと思います

Webコーディングでもっとも対処すべき課題は範囲（スコープ）を明示し独立させることです。
（HTMLやCSSはスコープがないために読みづらく冗長だと考えます）

HTMLは構造、CSSはプレゼンテーション、JavaScriptは振る舞いというそれぞれの役割の意味をしっかり吟味し根本から再考しています。

JavaScript

JavaScriptは構造（HTML）を変える能力と、見た目（CSS）を変える能力と計算（計算・チェック・バリデーション・一連の処理への命令など）する能力があります。

CSSをいじらずHTMLだけで見た目を変える

まず見た目を変える能力は極力使用せず、構造を変えることに着目します。
HTMLのclassを切り替えることで表現を切り替えます※。処理速度の面からもこのほうが良いです。

※アニメーションの場合はtransit.jsの使用を推奨します。
HTMLのclassベースにアニメーションを変えますし、何よりCSS3をつかっているのでGPUアクセラレーションが働き、描画負荷が非常に軽いです。しかも滑らかヌルヌルできれいです。

計算する能力はクラス化

計算する能力はクラス化します。ちなみにこの計算する能力は唯一JavaScriptにおいてクラス化してもよい部分です。
というのもDOM自体がオブジェクトであり、例えばボックスを量産しそれぞれに位置やカラーをもたせたい場合、わざわざクラスを用意せずともDOMに定義することができます。
つまり、パーツごとに新たにクラスをもたせたいという考え方はナンセンスであり、バリデーションなど計算する能力をクラス化するべきです。
追記：
Webアプリなど大規模になってくると、関連する一連の流れをもつクラスを作るべきでしょう。ひとつのメソッド（※１）に処理を集約し、そのメソッド内にはそのクラスしか使わない小さな関数（※２）を保持します。

※１：私はこれをPrimaryMethodと呼んでいます
※２：私はこれをTinyMethodと呼んでいます

リスナーとハンドラは分離すべきか？

ハンドラは第二のmain関数とも言えるだけにすこし特殊な扱い方が必要です。

表題の質問に対し答えはノーです。分離しません。
例えば'同じ処理だが微妙にちがう処理'というのはイベントに往々にしてありがちですが、ハンドラを分離すると...

便宜上従来のjQueryのバインドの仕方で解説

$('#box1').click(fn);
$('#box2').click(fn);

function fn(e){...}

"微妙にちがう"部分が書けません。引数eで処理を分岐できるならまだいいですが、それ以外の分岐だと関数オブジェクトに引数をとるという冗長な書き方に走らないかぎり実現できないのです。

よって、分離せずハンドラ内部の個別の処理を再利用して軽いコピペで済むようにします。

解決

$('#box1').click(function(){
  ObjA.hoge();     //コピペ
  ObjA.hogehoge(); //コピペ
  ObjB.hoge();     //コピペ
  ObjB.foo();
});

$('#box2').click(function(){
  ObjA.hoge();     //コピペ
  ObjA.hogehoge(); //コピペ
  ObjB.hoge();     //コピペ
  ObjB.bar();
});

分離をしない場合、上記のように自ずと内部の処理をメソッドで書くようになると思いますが、
"正しいオブジェクト指向はif文が排除されていく"というように、メソッドのちょっとした添削で、さまざまなパターンの処理を簡潔なコードで表現できるので理にかなっていると言えます。

ファイルパターン

class　…　自作クラス
lib　…　jQueryやprototype.jsなどのライブラリ
plg　…　jQueryなどのプラグイン。自作プラグインもここへ
main.js　…　メイン処理（イベントハンドラもここにすべて書く）

おわりに

さらに快適なコードパターン実現のために、あなたのコードパターンやファイルパターンを教えて下さい。また、私の解説上で難解な部分、指摘箇所なども伝えていただけると大変幸いです。

他HTML(PHP)編,CSS編もご参照ください。