フリーのエンジニアです。
出向先でクライアントサイドについて話す事がありましたので、記事にしました。
ES5に関する記事なので、古いブラウザ(ie11など)に対応することを想定してください。
メモした内容をそのまま貼り付けてます。わかりにくいかも。
厳密等値演算子を使おう
==,!= はアンチパターン
Promiseを使おう
ES5でもpolyfillを利用すれば、Promiseは使える
積極的に使う事
クラスの書き方
コンストラクタはこう書く var MyClass = function() { ... };
メソッドはこう書く #MyClass.prototype.methodA = function() { ... };
組み込みオブジェクト(Mathのようなオブジェクトを作りたい時)の書き方
モジュールパターンを使うとよい
varをいくつも書かない
カンマで区切ろう
varのスコープは関数スコープ
ブロックスコープはES5には無いよ。
なるべく、関数の先頭にvarを書く
配列の初期化は[]
new Array()と書いてはいけない。オブジェクトの初期化は{}。new Object() と書いてはいけない。
配列のループ処理は、foreach,reduce等を使う
for文は仕方なく使う感じ
call,applyを使いこなすと便利 thisを固定できる
thisは動的に決まる
thisを正しく理解する事
1モジュール1ファイルという決まりは無い
クラスのメソッドがたくさんある場合、機能別に別ファイルにしても構わない
プログラムのエントリポイントは意識せよ
エントリポイントは1箇所にすべき
jQueryを使っているなら、
$(function() { });
これの呼び出しは1箇所にして、ここで全部初期化しましょう。
グローバル変数はなるべく少なくしよう
サーバーが生成する変数は1つのオブジェクトで受け取ろう
クライアントサイドMVCを意識してプログラミングしよう。
見通しが良くなります
悪い例 ビューに変数を埋め込む事
同じ処理を2回以上書かない
当たり前の事ですが、できていない人が多すぎる。関数にしましょう。
$(selector)の戻り値は配列ではない
配列ではありません。オブジェクトのような配列です。(object-like array)
ES5でもデフォルト引数のようなことできる
function test(a) { a = a || 10 } // 引数が正の整数を期待している場合のサンプル