JavaScriptの基本的なコーディングパターンまとめ_基礎知識

どのようなプログラムを作成する場合でも、コーディング スタイルやデザイン パターンなどの概念に触れることがあります。コーディング スタイルは一般に仕様の作成に焦点を当てますが、デザイン パターンはプログラム アーキテクチャの設計に焦点を当てる傾向があります。この記事で著者がまとめた「パターン」には、JavaScript コードを作成するときによく使用されるメソッドやヒントが含まれており、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';
obj = 'cc';
var arr = new Array()
//
var obj = {
a: 'aa',
b: 'bb'
};
var arr = [];
function getXX(index){
return ['aa', 'bb', 'xx', 'xxb '](インデックス);
}
関数 getMessage(code){
return {
404: 'xxx',
500: 'xxx'
}[コード]; 🎜>}


3. 通常のリテラル

コードをコピーします コードは次のとおりです。 > var regex = new RegExp('someting'); // 正規表現が変更される可能性がある場合にのみコンストラクターを使用します

var cls = 'someclass',

regex = new RegExp (cls '\s*', 'ig'); // 動的正規表現の場合のみ
// それ以外の場合はリテラルを使用します


4デフォルト値を設定します

コードをコピーします

コードは次のとおりです: // デフォルト値var arg = arg || 'default '; // フォールバック document.getElementById('test').onclick = function(event){

var event = window.event; 🎜>};

function getX(a) {
return a 'default';


5. >

コードをコピー


コードは次のとおりです:

// 条件

answer = obj && obj.xx && obj.xx .xxx; // 連続判定if( obj && obj.xx && obj.xx.xxx){ // 何かをする } if(obj.xx){ // 何かをする

}

if( !obj){
// 何かをする
}
// 合同判定を使用する
if(a === b){
// 何かをします
}
// ブラウザは検出せず、使用する機能がサポートされているかどうかのみを検出します
if(document.getElementById){
// 能力を検出します
}


6. 三項演算子




コードをコピーします


コードは次のとおりです。 🎜>

// 三項
check ? value1 :

// 三項演算子はより簡潔です var foo = (condition) function xx (){ if(条件){ 戻り値 1; }else{ 戻り値 2;

}

関数 xx(){
戻り値条件) ? value1 : value2;
// 書式設定 3 項演算子
foo = predicate ? "two" :
"default"; 🎜>

7. 反復値を挿入します




コードをコピーします


コードは次のとおりです:


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

var name = value[i ] に直接挿入します。 🎜>
8. DOM 操作

コードをコピーします コードは次のとおりです:

// DOM 操作
el.style.display = 'none'; // オフライン
// 操作
el.style.display = 'block';ドキュメントの断片化を使用する方がよい
var flagment = document.createDocumentFragment(); // より良い
el.innerHTML = '' // すべての子を高速に削除しますが、メモリがリークする可能性があります
el.innerHTML = ' xxx '; // わかりました、使用してください。
// NodeList は慎重に扱ってください。


9 . イベント プロキシ

コードをコピーします コードは次のとおりです:

// イベント プロキシを使用します。さらに詳しく レイヤーの要素上のイベントをリッスンします

document.getElementById('list').onclick = function(evt){
var evt = window.event ||
target = evt .target || evt. srcElement;
if(target.id === 'btn1'){
// 何かを実行します
}
}


10.名前空間

コードをコピー コードは次のとおりです:

// 名前空間としてのオブジェクト

var MYAPP = {};
MYAPP.dom.get = function(id){};
MYAPP.style.css = function(el, style){};イベント');


11. チェーン操作

コードをコピーします コードは次のとおりです。 🎜> // 連鎖操作: return this function setValue(el, value){

el.value = value;

return this
}
var obj = 新しい MYAPP.dom.Element('span ');
obj.setText('hello')
.setStyle('color', 'red')
.setStyle('font', 'Verdana ');


12. プライベート スコープ

コードをコピーします。

コードは次のとおりです。 > // Function (function(){ var _private = '見えない';

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

13. 設定オブジェクト




コードをコピー

コードは次のとおりです:

// オブジェクトの構成 function foo(id, conf, null , null){ // 何かをします } foo( 'bar', { key1 : 1,

key2 : 2

});


14.型変換




コードをコピー

コードは次のとおりです:

// 型変換 '010' === 10; 数値('010') = == 10; parseInt('010', 10) === 10' ; new Date() // タイムスタンプ

15. 拡張プロトタイプ




コードは次のとおりです。


// 上位互換性が必要な場合にのみ使用されます。それ以外の場合は、プロトタイプ オブジェクト

Array.prototype を拡張することはお勧めできません。 .forEach = function(){
// 前方互換性のみ
};

16. ループ最適化

コピーcode

コードは次のとおりです:


// キャッシュ

for(var i=0, j = document.getElementsByTagName('a').length ; i0; i--){
// おそらく速い
}

// 最速と言われています while(i--){ // おそらく速いです } 17. 新しい特別な new を使用してみます

コードをコピーします


コードは次のとおりです:


Array.forEach();

getElementsByClassName();
/ / まず、新しい機能がサポートされているかどうかを確認します。 use
if(document.getElementsByClassName){

// use }else{ // 実装 } 18.

コードをコピー


コードは次のとおりです:

// 一度だけ判定し、再度関数を呼び出すときは判定は必要ありません。
function LazyDef(){
if(condition1){
lazyDef = function(){ }; >} else if(condition2){
lazyDef = function(){ };
}
return LazyDef();
}

19.メソッド

コードをコピー コードは次のとおりです。

var MYAPP = {}; >MYAPP.dom = (function(){
var _setStyle = function(el, prop, value){
console.log('setStyle');
};
return {
setStyle: _setStyle
};
});
// MYAPP.dom.setStyle が誤って上書きされた場合でも、_setStyle は内部で使用可能です


20. >

コードをコピー コードは次のとおりです: // できるだけ使用してみてください。複数のパラメータを渡し、最後に結合された文字列

console.log('xx','xx','...');

console.dir(someObj); を出力できます。 dirxml(someDom);
console.time ('timer');
console.warn('xxx');
// カプセル化により、誤って解放されても問題が発生する可能性はありません。エラーを報告するときに行番号を付けます。
function msg( msg){
if(console && console.log){
console.log(msg); // 間違った行番号
}
}


現在、基本的に思い浮かぶのはこれらだけです。皆さんもディスカッションに追加してください:)