JavaScriptで複数人開発するときのガイドライン(マイルール)

JavaScriptで複数人開発するときのガイドライン（マイルール)です。SIerとかやっているとold JavaScriptやらモダンJavaScriptを見たりと色々な経験が得られるわけで…。やっぱり複数人開発するときには秩序は必要だなと思って、大体こんなルールにしていました。flex編はこの編 id:shogo4405:20110521:1305947042

こんなコード禁止

<html>
<head>
   <script type="text/javascript">
      // Todo あとでバグ修正する。仮起き。
      function foo(){
      };
      funciton bar(){
      };
   </script>
</head>
<body>
  <input type="buttun" click="foo();" id="idFoo">
  <input type="buttun" click="bar();" id="idBar">
</body>
</html>

色々なスクリプトが増えてくるにつれて平気でソースコード1000行↑になる。
input=idFoo／input=idBar／input=idHoge...と増えていくに連れてイベントハンドラで使いたい名前が重複してくるので、衝突を防ぐ為に命名規則つけたりする。(後から)
fooはベテラン実装者Aさん。barの実装は初心者Bさん。fooを真似(コピペ）して書いて　barでバグ発見という場合でもfooのバグを直しづらい。
input=idBarが不要になってもinput id="idBar"だけが削除されてJS部分削除されにくい。
コメントアウトされたよく分からないコードが増えてくる。
1ファイルが巨大になるとその分責任が重くなる。
ソースコメントが見える。todo後で修正とかいうコメント見ると後っていつ？ってなる。

…Flex編でも書きましたよね。似た奴。

集団開発するときの原理・原則

JavaScriptファイルはhtmlにインラインにしないで必ず開発の時は外にだす。読み込み時間を気にするとかでインラインにしたいときは、phpとかperlとかのファイル読み込み命令で読み込む。
サーバーにデプロイするときには、yuicompressorなの圧縮ツールを利用する。リリース後には不要なコメントも削除可能。(外部JSファイルにするメリット。)
名前空間を考える。foo/bar/index.htmlに必要なJSは、foo.bar.index = {}のオブジェクトに格納する。JS自体もfoo/bar/index.jsみたいにファイル名をつける。1ファイル＝1名前空間という概念。
複数のJSから呼ばれるような関数群は専用の名前空間を用意。foo.globalとかね。foo/bar/bar.html、foo/bar/foo.htmlに共通して必要でもglobal使うほどじゃない奴は、foo.bar.globalとかの空間を利用。
htmlが不要になれば、当然jsも何も考えずに削除。1JSは独立。他のファイルには原則して依存しない。させない。依存するような関数はglobal空間を利用。

というわけで

以下のようなスタイルで開発していました。まぁ少量のコードや1人だったらメリットはないですけど。ソースコードが膨れてきて修正やら保守が入りだしたら効果が発揮すると思います。

myapp/index.html

<html>
<head>
   <script type="text/javacript" src="myapp/index.js"></script>
</head>
<body>
   <input type="buttun" click="myapp.index.foo();" id="idFoo">
   <input type="buttun" click="myapp.index.bar();" id="idBar">
</body>
</html>

muapp/index.js

if(typeof(myapp) == 'undefined'){
    myapp = {};
};
myapp.index = 
{
   foo: funciton(){},
   bar: function(){}
};