ホームページ > 記事 > ウェブフロントエンド > コードの品質を向上させるための JavaScript のヒントをマスターする
javascript記事コードの品質を向上させるためのヒントを紹介するコラムです。
推奨 (無料) :javascript(動画)
はじめに
主に以下の点を紹介します。
##条件分岐ステートメントを関数に絞り込む
大きすぎる関数を避けます。
// 逻辑都写在一起,需要将所有逻辑看完才知道这段代码是干嘛的,局部逻辑无法复用 function main() { $.ajax.get('/getData').then((res) => { const ul = document.getElementById('ul'); ul.innerHTML = res.list.map(text => `<li class="li">${text}</li>`).join('\n'); const list = document.getElementsByClassName('li'); for (let i = 0; i < list.length; i ++) { list[i].addEventListener('focus', () => { // do something }); } }); }関数調整後
function getData() { return $.ajax.get('/getData').then((res) => res.data.list); } function showList(list) { const ul = document.getElementById('ul'); ul.innerHTML = list.map(text => `<li class="li">${text}</li>`).join('\n'); } function addEvent() { const list = document.getElementsByClassName('li'); for (let i = 0; i < list.length; i ++) { list[i].addEventListener('focus', () => { // do something }); } } // 逻辑清晰,一眼读懂每一步在做什么,某些提炼出来的函数还可以被复用 async function main() { const list = await getData(); // 获取数据 showList(list); // 显示页面 addEvent(); // 添加事件 }
2. 重複する条件フラグメントをマージ
関数本体内に条件分岐文があり、繰り返し条件文が点在している場合これらの条件分岐ステートメントのコード内では、重複をマージして削除する必要があります。// 合并前 function main( currPage ){ if ( currPage <= 0 ){ currPage = 0; jump( currPage ); // 跳转 }else if ( currPage >= totalPage ){ currPage = totalPage; jump( currPage ); // 跳转 }else{ jump( currPage ); // 跳转 } }; // 合并后 function main( currPage ){ if ( currPage <= 0 ){ currPage = 0; }else if ( currPage >= totalPage ){ currPage = totalPage; } jump( currPage ); // 把jump 函数独立出来 };
3. 条件分岐ステートメントを関数に洗練する
複雑な条件分岐ステートメントは、プログラムが読みにくく理解しにくい重要な理由であり、簡単に次のような問題が発生する可能性があります。巨大な機能。場合によっては、条件付き分岐ステートメントをセマンティック関数に洗練して、コードをより直感的かつ論理的に明確にすることができます。// 根据不同季节决定打折力度 function getPrice( price ){ var date = new Date(); if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天 return price * 0.8; } return price; }; // 是否是夏天 function isSummer(){ var date = new Date(); return date.getMonth() >= 6 && date.getMonth() <= 9; }; // 提炼条件后 function getPrice( price ){ if ( isSummer() ){ return price * 0.8; } return price; };
4. ループの合理的な使用
複数のコードが実際に反復作業を担当している場合は、コードの量を減らすためにループに置き換えることができます。 。// 判断是什么浏览器 function getBrowser(){ const str = navigator.userAgent; if (str.includes('QQBrowser')) { return 'qq'; } else if (str.includes('Chrome')) { return 'chrome'; } else if (str.includes('Safari')) { return 'safri'; } else if (str.includes('Firefox')) { return 'firefox'; } else if(explorer.indexOf('Opera') >= 0){ return 'opera'; } else if (str.includes('msie')) { return 'ie'; } else { return 'other'; } }; // 循环判断,将对应关系抽象为配置,更加清晰明确 function getBrowser(){ const str = navigator.userAgent; const list = [ {key: 'QQBrowser', browser: 'qq'}, {key: 'Chrome', browser: 'chrome'}, {key: 'Safari', browser: 'safari'}, {key: 'Firefox', browser: 'firefox'}, {key: 'Opera', browser: 'opera'}, {key: 'msie', browser: 'ie'}, ]; for (let i = 0; i < list.length; i++) { const item = list[i]; if (str.includes(item.key)) {return item.browser}; } return 'other'; }
5. ネストされた条件分岐の代わりに関数を早期に終了させる
関数を複数の終了で早期に復帰させ、ネストされた条件分岐を置き換えます。function del( obj ){ var ret; if ( !obj.isReadOnly ){ // 不为只读的才能被删除 if ( obj.isFolder ){ // 如果是文件夹 ret = deleteFolder( obj ); }else if ( obj.isFile ){ // 如果是文件 ret = deleteFile( obj ); } } return ret; }; function del( obj ){ if ( obj.isReadOnly ){ // 反转if 表达式 return; } if ( obj.isFolder ){ return deleteFolder( obj ); } if ( obj.isFile ){ return deleteFile( obj ); } };
6.長すぎるパラメータ リストの代わりにオブジェクト パラメータを渡す
関数パラメータが長すぎると、エラーのリスクが増加します。渡す順番は正しいのですが、コードの可読性も悪くなりますので、関数の引数が長すぎないように注意してください。複数のパラメータを渡す必要がある場合は、代わりにオブジェクトを使用することをお勧めします。 一般的に、関数パラメータは 3 つを超えないことが最善ですfunction setUserInfo( id, name, address, sex, mobile, qq ){ console.log( 'id= ' + id ); console.log( 'name= ' +name ); console.log( 'address= ' + address ); console.log( 'sex= ' + sex ); console.log( 'mobile= ' + mobile ); console.log( 'qq= ' + qq ); }; setUserInfo( 1314, 'sven', 'shenzhen', 'male', '137********', 377876679 ); function setUserInfo( obj ){ console.log( 'id= ' + obj.id ); console.log( 'name= ' + obj.name ); console.log( 'address= ' + obj.address ); console.log( 'sex= ' + obj.sex ); console.log( 'mobile= ' + obj.mobile ); console.log( 'qq= ' + obj.qq ); }; setUserInfo({ id: 1314, name: 'sven', address: 'shenzhen', sex: 'male', mobile: '137********', qq: 377876679 });7. 三項演算子の使用量を減らします 三項演算子のパフォーマンスが高く、コードが少なくなります。 しかし、三項演算子は乱用すべきではなく、単純な論理分岐で使用し、複雑な論理分岐での使用は避けるべきです。
// 简单逻辑可以使用三目运算符 var global = typeof window !== "undefined" ? window : this; // 复杂逻辑不适合使用 var ok = isString ? (isTooLang ? 2 : (isTooShort ? 1 : 0)) : -1;8. チェーン コールの合理的な使用 利点:チェーン コールは使用が簡単で、必要なコードも少なくなります。
欠点:
チェーン呼び出しの欠点は、デバッグが不便であることです。チェーンにエラーがあることがわかっている場合は、デバッグ機能を追加する前に、まずチェーンを逆アセンブルする必要があります。ログを記録するか、ブレークポイントを追加して、エラーが発生した場所を特定します。 チェーンの構造が比較的安定していて、後で変更するのが容易ではない場合は、チェーン タイプを使用できます。var User = { id: null, name: null, setId: function( id ){ this.id = id; return this; }, setName: function( name ){ this.name = name; return this; } }; User .setId( 1314 ) .setName( 'sven' ); var user = new User(); user.setId( 1314 ); user.setName( 'sven' );
9. 大きなクラスの分解
大きなクラスの分解は、関数の詳細化とよく似ています。クラスが大きすぎると、ロジックが不明確になります。そして理解と維持が困難です。 主要カテゴリを合理的に分解すると、クラスのロジックが明確になり、サブモジュールを簡単に再利用できます。10. ビット単位の演算子を使用する
乗算と除算を計算するプログラミング言語のパフォーマンスは高くありませんが、場合によってはビット単位の演算子を使用することでパフォーマンスが向上することがあります。乗算や除算などの演算の実行。rree
以上がコードの品質を向上させるための JavaScript のヒントをマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。