Gemeinsame Methoden zur Optimierung und Rekonstruktion von Javascript-Code
Einführung
Führen Sie hauptsächlich die folgenden Punkte ein:
-
Verfeinerungsfunktion
-
Kombinieren Sie wiederholte bedingte Fragmente
-
Destillieren Sie bedingte Verzweigungsanweisungen in Funktionen
-
Angemessene Verwendung von Schleifen
-
Lassen Sie die Funktion im Voraus beenden, anstatt verschachtelte bedingte Zweige
-
Übergeben Sie Objektparameter anstelle langer Parameterlisten
-
Verwenden Sie weniger ternäre Operatoren
-
Angemessene Verwendung von Kettenaufrufen
-
Zerlegen Sie große Klassen
-
Betriebsmarke für Nutzungsposition
-
Reine Funktion
- Erstellen Sie ein vollständiges PDF der Java Interview Collection
Dieser Artikel wird fortlaufend aktualisiert und es ist willkommen, Mängel hinzuzufügen.
1. Funktion verfeinern
Vorteil:
-
Vermeiden Sie große Funktionen.
-
Unabhängige Funktionen helfen bei der Wiederverwendung von Code.
-
Unabhängige Funktionen lassen sich leichter überschreiben.
-
Wenn eine unabhängige Funktion einen guten Namen hat, dient sie selbst als Kommentar.
- Durch die Semantisierung werden mehrere Abschnitte der getrennten Logik in verschiedene Funktionen unterteilt, wodurch die Codelogik klar und deutlich wird, was bei jedem Schritt getan wird.
Codebeispiel:
Realisieren Sie, um Daten abzurufen, manipulieren Sie dom, um Daten anzuzeigen, und fügen Sie schließlich Ereignisse hinzu
- Vor der Funktionsverfeinerung
// 逻辑都写在一起，需要将所有逻辑看完才知道这段代码是干嘛的，局部逻辑无法复用
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
});
}
});
}
- Nachdem die Funktion verfeinert wurde
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. Kombinieren Sie wiederholte bedingte Fragmente
Wenn ein Funktionskörper einige bedingte Verzweigungsanweisungen enthält und sich wiederholender Code in diesen bedingten Verzweigungsanweisungen verstreut ist, müssen Duplikate zusammengeführt und entfernt werden.
// 合并前
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. Verfeinern Sie bedingte Verzweigungsanweisungen in Funktionen
Komplizierte bedingte Verzweigungsanweisungen sind ein wichtiger Grund, warum das Programm schwer zu lesen und zu verstehen ist, und es kann leicht zu einer großen Funktion führen. Manchmal kann die bedingte Verzweigungsanweisung in semantische Funktionen verfeinert werden, um den Code intuitiver und logisch klarer zu gestalten.
// 根据不同季节决定打折力度
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. Angemessene Verwendung von Schleifen
Wenn tatsächlich mehrere Codeteile für sich wiederholende Arbeiten verantwortlich sind, können stattdessen Schleifen verwendet werden, um die Codemenge zu verringern.
// 判断是什么浏览器
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. Lassen Sie die Funktion vorab anstelle verschachtelter bedingter Zweige beenden
Lassen Sie die Funktion 多出口frühzeitig zurückkehren und ersetzen 嵌套条件分支.
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. Übergeben Sie Objektparameter anstelle langer Parameterlisten
Funktionsparameter sind zu lang, um das Fehlerrisiko zu erhöhen. Es ist schwierig sicherzustellen, dass die Übertragungssequenz korrekt ist und sich auch die Lesbarkeit des Codes verschlechtert. Versuchen Sie sicherzustellen, dass die Funktionsparameter nicht zu lang sind. Wenn Sie mehrere Parameter übergeben müssen, wird empfohlen, 对象stattdessen zu verwenden .
Im Allgemeinen sind Funktionsparameter am besten不要超过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. Verwenden Sie weniger ternäre Operatoren
Der ternäre Operator hat eine hohe Leistung und weniger Code.
Der ternäre Operator sollte jedoch nicht missbraucht werden. Wir sollten ihn in einfachen Logikzweigen verwenden und ihn in komplexen Logikzweigen vermeiden.
// 简单逻辑可以使用三目运算符
var global = typeof window !== "undefined" ? window : this;
// 复杂逻辑不适合使用
var ok = isString ? (isTooLang ? 2 : (isTooShort ? 1 : 0)) : -1;
8. Angemessene Verwendung von Kettenaufrufen
Vorteile: Der Kettenaufruf ist einfach zu verwenden und die Codemenge ist gering.
Nachteile: Der Nachteil eines Kettenaufrufs besteht darin, 调试不方便dass wir, wenn wir wissen, dass ein Fehler in einer Kette vorliegt, die Kette zuerst zerlegen müssen, bevor wir einige Debugging-Protokolle oder Haltepunkte hinzufügen, damit wir den Ort finden können, an dem der Fehler auftritt.
Wenn die Struktur der Kette relativ stabil ist und es nicht einfach ist, sie später zu modifizieren, kann der Kettentyp verwendet werden.
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. Zerlegen Sie große Klassen
Die Zerlegung einer großen Klasse ist der Verfeinerung einer Funktion sehr ähnlich. Wenn die Klasse zu groß ist, ist die Logik unklar und schwer zu verstehen und aufrechtzuerhalten.
Eine vernünftige Zerlegung großer Klassen kann die Logik der Klasse klar machen, und die Untermodule können bequem wiederverwendet werden.
10. Betriebsmarke für Auslastungsposition
Die Leistung der Programmiersprachenberechnung von Multiplikation und Division ist nicht hoch, aber in einigen Fällen kann die Verwendung von Bitoperatoren die Leistung von Operationen wie Multiplikation und Division verbessern.
11. Reine Funktionen
Eine reine Funktion bezieht sich auf eine Funktion, die dies nicht tut, 依赖于und auf den 不改变Status von Variablen außerhalb ihres Gültigkeitsbereichs.
Der Rückgabewert einer reinen Funktion wird nur durch die Parameter bestimmt, wenn sie aufgerufen wird, und ihre Ausführung hängt nicht vom Status des Systems (Ausführungskontext) ab.
Dieselben Eingabeparameter erhalten definitiv dieselbe Ausgabe, dh es gibt keine internen Zufallsvariablen, die sich auf die Ausgabe auswirken .
Merkmale, die keine reinen Funktionen sind:
-
Ändern Sie das Dateisystem
-
Fügen Sie Datensätze in die Datenbank ein
-
Senden Sie eine http-Anfrage
-
Variable Daten
-
Drucken / Protokollieren
-
Benutzereingaben abrufen
-
DOM-Abfrage
- Zugriff auf den Systemstatus
Die Rolle reiner Funktionen:
-
Zuverlässigkeit : Die Funktionsrückgabe entspricht immer den Erwartungen
-
Cachefähigkeit : Solange die Eingabe identisch ist, muss die Ausgabe identisch sein, damit die Eingabe als Schlüssel und die Ausgabe als Wert verwendet werden kann und das berechnete Ergebnis mithilfe des Objekts zwischengespeichert werden kann
-
Portabilität : Da keine externe Abhängigkeit besteht, kann es ordnungsgemäß ausgeführt werden, wenn es in eine beliebige Umgebung transplantiert wird
-
Testbarkeit : Praktisch für Unit-Tests von Funktionen
- Parallelität : Bei einigen komplexen Berechnungen kann sie parallel berechnet werden (z. B. mithilfe mehrerer untergeordneter Prozesse von nodejs können mehrere Aufgaben gleichzeitig berechnet werden, um die Berechnungsgeschwindigkeit zu verbessern.)
Anwendungsszenarien:
-
Dienstprogrammfunktionen verwenden am besten reine Funktionen
-
Code, der auf mehreren Plattformen verwendet wird (NodeJS, Browser, WeChat-Applet, nativer Client usw.)
- Die relativ unabhängige Funktion hat eine Vollversion des PDF der Java Interview Collection zusammengestellt
var a = 1;
// 非纯函数
function sum(b) {
return a + b;
}
// 非纯函数
function sum(b) {
a = 2;
return b;
}
// 非纯函数
function sum(b) {
return b + Math.random();
}
// 纯函数
function sum (b, c) {
return b + c;
}