JavascriptIn der Kolumne werden Tipps zur Verbesserung der Qualität des Artikelcodes vorgestellt führt hauptsächlich die folgenden Punkte ein: 🔜 Zweige
Übergabeobjekte Parameter ersetzen zu lange Parameterlisten
Verwenden Sie weniger ternäre Operatoren
Verwenden Sie Kettenaufrufe rational
Zerlegen Sie große Klassen
Dieser Artikel wird kontinuierlich aktualisiert. Wenn es Mängel gibt, zögern Sie nicht Sie können sie gerne im Kommentarbereich hinzufügen.
Implementieren Sie die Datenerfassung, bedienen Sie dann dom, um Daten anzuzeigen, und fügen Sie schließlich Ereignisse hinzu Eine Funktion enthält einige bedingte Verzweigungsanweisungen im Hauptteil und einige wiederholte Codes sind in diesen bedingten Verzweigungsanweisungen verstreut. Daher ist es erforderlich, Duplikate zusammenzuführen und zu entfernen.
// 逻辑都写在一起，需要将所有逻辑看完才知道这段代码是干嘛的，局部逻辑无法复用
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
});
}
});
}Komplexe bedingte Verzweigungsanweisungen sind ein wichtiger Grund dafür, dass Programme schwer zu lesen und zu verstehen sind und leicht zu einer großen Funktion führen können. Manchmal können bedingte Verzweigungsanweisungen in semantische Funktionen verfeinert werden, um den Code intuitiver und logisch klarer zu machen. 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(); // 添加事件
}
// 合并前
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 函数独立出来
};Lassen Sie die Funktion früh mit mehreren Ausgängen zurückkehren und verschachtelte bedingte Verzweigungen ersetzen.
// 根据不同季节决定打折力度
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;
};// 判断是什么浏览器
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';
}7. Verwenden Sie weniger ternäre Operatoren
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 );
}
};8. Sinnvoller Einsatz von Kettenaufrufen
Vorteile: Kettenaufrufe sind einfach zu verwenden und erfordern weniger Code. Nachteile:Der Nachteil von Kettenaufrufen besteht darin, dass das Debuggen umständlich ist. Wenn wir wissen, dass in einer Kette ein Fehler vorliegt, müssen wir zunächst die Kette zerlegen, bevor wir einige Debugprotokolle hinzufügen oder Haltepunkte hinzufügen. Nur dann können wir Sie finden heraus, wo der Fehler aufgetreten ist.
Wenn die Struktur der Kette relativ stabil ist und sich später nicht leicht ändern lässt, kann der Kettentyp verwendet werden.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
});9. Zerlegen großer Klassen
Die Zerlegung großer Klassen ist der Verfeinerung von Funktionen sehr ähnlich. Wenn die Klasse zu groß ist, ist die Logik unklar und schwer zu verstehen und aufrechtzuerhalten. Eine vernünftige Zerlegung großer Kategorien kann die Logik der Klasse klar machen und Untermodule können problemlos wiederverwendet werden.10. Verwenden Sie bitweise Operatoren
Die Leistung von Programmiersprachen zur Berechnung von Multiplikationen und Divisionen ist nicht hoch, aber in einigen Fällen kann die Verwendung bitweiser Operatoren die Leistung von Operationen wie Multiplikationen und Divisionen verbessern.// 简单逻辑可以使用三目运算符 var global = typeof window !== "undefined" ? window : this; // 复杂逻辑不适合使用 var ok = isString ? (isTooLang ? 2 : (isTooShort ? 1 : 0)) : -1;
Das obige ist der detaillierte Inhalt vonBeherrschen Sie JavaScript-Tipps, die Ihnen helfen, die Codequalität zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
