JavaScriptのベストプラクティスメモ (#jsEdu)

Togetter - 「JavaScriptのベストプラクティス大会 jsEdu」で紹介されていて、JavaScriptベストプラクティス30選-jsEdu | Web scratch に記載がないツイートをまとめてみました。

Ajaxで同期通信を行うと処理完了まで待たされる。非同期通信ならバックグラウンド処理となる。
function 検出を行い、ブラウザによる分岐処理を止めよう。(訳注: 例えば if (document.addEventListener) { document.addEventListener('click', clickListener, false); } else if (document.attachEvent) { ... } )
変数の宣言後にデータ型を変更してはいけない。 var test = "hello"; test = 10;
描画を高速化するなら </body> の手前に <script> を置こう。
複数の要素ノードを挿入するなら DocumentFragment を使おう。(挿入するノードが)多いほどパフォーマンスが向上する。
getElementbyId は IE ではname属性を持つ要素にもマッチする。注意しよう。(訳注: IE7- に限る。IE8 で修正済み。)
素晴らしきショートカット達。+ 演算子はNumber型に変換し、!! 演算子はBoolean型に変換する。var foo='42';console.log(typeof foo,typeof +foo,typeof !!foo); (訳注: 明らかにショートコーダー向け。ネイティブ関数を利用するなら Number() や Boolean() を。)
スマートにデバッグしようとしてはいけない。バグを突き止めるために記録 (logs)、警告(alerts) を活用しよう。
グローバル変数は避けよう。代わりに function をネスト(入れ子)しよう。(訳注: クロージャを形成することで変数を共有できる)
JavaScript では void は undefined を返すオペレータです。void の使用を避けよう。
JavaScriptでクラスを生成する時は、一度だけクラス定義を行う [Class].prototype.[method] を使用しよう。(訳注: クロージャだとコンストラクタが発生する度にメソッドを定義する)
IE互換の HTML5 を作るなら html5shim を使おう。http://goo.gl/AYbS
正式なform参照は document.formname.inputname ではなく、document.forms["formname"].elements["inputname"] だ。(訳注: 付け加えるなら、正式なframe参照は window.framename ではなく、window.frames['framename'] だ。)
変数が宣言されたかどうかチェックするためにtypeof演算子を使用しよう。(!Var) ではなく、(typeof Var === "undefined") だ。(訳注: 例えば addEventListener が定義済みかどうかチェックするなら typeof addEventListener !== 'undefined')
ユーザーエクスペリエンス(user experience)を妨げない限り、formで [戻る] を使用できないようにしよう。(訳注: 重複投稿防止)
'class' という名前の変数を避けよう。IEが泣くよ。(訳注: class は予約語)
デバッグのために alert() ではなく、Firebug の console.log() を使おう。(訳注: Firefoxを除く最近のブラウザなら標準で console.log を使える)
typeof演算子、instanceof演算子よりも頑強な Object.prototype.toString() を使おう。(訳注: Object.prototype.toString は ES3 規定の内部プロパティ Class を持つString型の値を返す。typeofでは Class を判定できないが、instanceof は可能。ただし、instanceof では所属windowの異なるオブジェクトの判定に失敗することがある。この挙動は実装依存でFirefoxは大丈夫だが、Opera, Safariはダメだとか。)
JavaScriptにおける for(var x in y){} はオブジェクトのプロパティを走査する。配列ではない。(訳注: 配列を for-in で処理してはいけないというお話。for-in は列挙するプロパティの順番が実装依存のため保証できない。prototypeチェーンも関係するので、直属のプロパティ参照なら hasOwnProperty を使うべき。)
ほとんどのケースで arr.push(1); より arr[arr.lengh] = 1; が高速だ。覚えておこう。(訳注: ほとんどは誇張。IE7- で特に顕著な差が出るが、最近のブラウザは push の方が高速だ。http://goo.gl/1Bbv のコードでは IE8, Google Chrome 6, Firefox v3.6.6 で push の方が高速だった。Opera v10.63 はほとんど同じで有意な差は見られなかった。IE7- に合わせてコードを書くぐらいなら JScript の条件付きコンパイルで (@_jscript_version <= 5.7) の時に arr[arr.length] = 1; の方がマシな気がする。)
コメントは /* */ ではなく、// を使おう。なぜなら、*/ は正規表現リテラルで出現しうるからだ。(訳注: /* var reg = /a*/; */ と書くと、/a*/ でコメントを閉じてしまう。大元は Good Parts だと思う。)