JavaScriptの基本的なコーディングパターン

1. 変数の定義
//一般的な書き方
var a = 0;
var b = 1;
var c = 'xxx';

//推奨する書き方
var a = 0,
b = 1,
c = 'xxx';

2. リテラルを使ってみます

//一般的な書き方
var obj = new Object();
obj.a = 'aa' obj.b = 'bb'; c = 'cc';

var arr = new Array();

// 推奨書き方
var obj = {
a: 'aa',
'cc'
function getXX(index){
Return [' aa', 'bb', 'xx', 55, 'xxb'](index);
}

function getMessage(code){
return {
404: 'xxx ',
500: 'xxx'
}[ code];
}

3. 通常のリテラル

var regex = new RegExp('someting');

// 正規表現が変更される可能性がある場合にのみコンストラクターを使用する Function
var cls = 'someclass',
regex = new RegExp(cls + '\s*', 'ig'); // 動的正規表現のみ

var regex = /someting /ig;

4. デフォルト値を設定する個人的な感覚 typeof)

// デフォルト値
var arg = arg || 'default'; // fallback
document.getElementById('test').onclick = function(event){
varevent =event || .event;
};

return a+1 || 'default';
}

function getY(b ){
return typeof b != = "未定義" ? b : 'default';
}

5. 条件判断

// 条件
answer = obj && obj.xx && obj.xx ... if(!obj){
/ // do something
}

// 一致判定を使用する
if(a === b){

}

// ブラウザを検出せず、検出のみを試みる 使用する機能がサポートしているか
if(document.getElementById){
// 能力検出
}

6. 三項演算子

// 三項演算子 update Simplevar Foo = (Condition)?
関数 xx () {
IF (条件) {
戻り値 1;
} Else {
戻り値 2; 関数 xx () {
戻り値 1 : 値 2;
}

// 三項演算子
foo のフォーマット= predicate ? "one" :
" predicate ? "two" :
" "default"; // format

7. 反復値を挿入

// 反復を挿入
var name = value[i];

// 反復値を直接挿入します
var name = value[i++];

8. DOM 操作

// DOM 操作
el.style.display = 'none' // オフライン
// 操作
el。 style.display = 'block';

// ドキュメントの断片化を使用する方がよい www.2cto.com
var flagment = document.createDocumentFragment(); // 高速削除すべての子ですが、メモリがリークする可能性があります
el.innerHTML = 'xxx' // 大丈夫、使ってください!

// NodeList は慎重に扱ってください
var image = document.getElementsByTagName('img'); // 注意してください! list

9. イベントプロキシ

// イベントプロキシを使用して外部要素のイベントをリッスンします
document.getElementById('list ').onclick = function(evt){
var evt = evt || target = evt.target || evt.srcElement;

// 何かをする
}
}
名前空間
10.

// 名前空間としてのオブジェクト
var MYAPP = {};
MYAPP.dom.get = function(id){};
MYAPP.style.css = function(el, style){};

MYAPP.namespace ('event');

11. 連鎖操作

// 連鎖操作: return this
function setValue(el, value){
el.value = value;
return this;
}

var obj = new MYAPP .dom.Element('span');
obj.setText('hello')
.setStyle('color', 'red')
.setStyle('font', 'Verdana');

12.

// Function
(function(){
var _private = '会えない';

})();

(function($){
$('#xxb').click(function () { });
})(jQuery);

13. オブジェクトの設定

// オブジェクトの設定
function foo(id, conf, null, null){
// 何かをする
}

foo(' bar' , {
key1 : 1,
key2 : 2
});

14. 型変換

// 型変換
+'010' === 10;
Number('010') === 10 ;
parseInt('010', 10) === 10;
10 + '' === '10';

+new Date() // タイムスタンプ
+new Date;

15.前方互換性が必要な場合にのみ使用されます。それ以外の場合は、プロトタイプ オブジェクトを拡張することは推奨されません

// 前方互換性のみ
};


16. // キャッシュ
for(var i=0, j = document.getElementsByTagName('a').length; i0; i--){

}

// 最速と言われています
while(i- -){
// おそらく最速
}

17. できるだけ新しい機能を使用するようにしてください

Array.forEach();
getElementsByClassName();

// まず新しい機能がサポートされているかどうか、使用できるかどうかを確認する
if(document.getElementsByClassName){
// use
}else{
// 実装
}

18. 遅延読み込み

// 1 回だけ判断する、再度関数を呼び出すときに判断する必要はありません
function LazyDef () {

Lazydef = function () {}; else if (Condition2) {
Lazydef = function ()
};
}

19. プライベート所有権 関数とパブリックメソッド

var MYAPP = {};

MYAPP.dom = (function(){
var _setStyle = function(el, prop, value){

};
Return {
SetStyle: _SetStyle
};

// myApp.DOM.SETSTYLE が内部的に渡され、最終的に出力される場合があります。結合された文字列
console.log('xx','xx','...');
console.dir(someObj);
console.dirxml(someDom);
console.time('timer') ;
console.warn('xxx');

// カプセル化により、偶発的な解放によって問題が発生することはありませんが、エラーを報告する際の行番号に問題がある可能性があります
function msg(msg) {
if( console && console.log){

}
}