Die Bedeutung des Schreibens von Code, den Menschen lesen können

Schlüsselpunkte

• Cleverness zuerst: Hochlesbarer Code verbessert die Wartbarkeit und Zusammenarbeit, und das Schreiben von Code, der leicht zu verstehen und zu ändern ist, ist entscheidend.
• Funktions- und Dateiverwaltung: Funktionen verwenden, um wiederverwendbaren Code zu integrieren und große Dateien in kleinere, verwaltbarere Teile aufzuteilen, um die Navigation und das Verständnis zu vereinfachen.
• Namenskonvention: Wählen Sie klare und beschreibende Namen für Funktionen und Variablen, um die Lesbarkeit zu verbessern und die Notwendigkeit zusätzlicher Kommentare zu verringern.
• Überoptimierung vermeiden: Obwohl kurzer und optimierter Code attraktiv sind, sollte die Lesbarkeit priorisiert werden, wenn die Leistungseinwirkung nicht signifikant ist, da moderne JavaScript-Motoren in der Codeoptimierung sehr effizient sind.
• Sorgfältige Kommentare: Verwenden Sie Kommentare, um "Warum" zu erklären, anstatt "was zu tun", und halten Sie die Kommentare relevant und aktuell, um die nicht offene Codelogik zu verstehen.

Dieser Artikel wurde von Matt Burnett, Simon Codrington und Nilson Jacques überprüft. Vielen Dank an alle SitePoint -Peer -Rezensenten, die SitePoint -Inhalte für den Besten erhalten haben!

Haben Sie jemals ein Projekt in einem Lauf jeweils abgeschlossen, ohne den Code noch einmal anzusehen? Weder I. Bei der Arbeit an alten Projekten möchten Sie möglicherweise nur sehr wenig oder gar keine Zeit damit verbringen, herauszufinden, wie der Code funktioniert. Der lesbare Code ist wichtig, um das Produkt aufrechtzuerhalten und Sie und Ihre Kollegen oder Mitarbeiter zufrieden zu stellen.

übertriebene Beispiele für schwer zu lesenden Code finden Sie im JS1K-Wettbewerb, mit dem Ziel, die beste JavaScript-Anwendung in 1024 Zeichen oder weniger zu schreiben, sowie JSF*ck (NSFW), was ist, was ist Ein tiefgreifender Programmierstil, der nur sechs verschiedene Zeichen zum Schreiben von JavaScript -Code verwendet. Wenn Sie den Code auf diesen Websites überprüfen, fragen Sie sich, was los ist. Stellen Sie sich vor, Sie schreiben einen solchen Code und versuchen, den Fehler nach einigen Monaten zu beheben.

Wenn Sie regelmäßig das Internet durchsuchen oder Schnittstellen erstellen, wissen Sie möglicherweise, dass es einfacher ist, eine große, sperrige Form zu verlassen, als eine einfache und kleine Form zu verlassen. Gleiches gilt für den Code. Menschen können es bevorzugen, es zu verwenden, wenn sie leichter zu lesen und zu verwenden. Zumindest hindert es Sie daran, Ihren Computer nicht frustriert zu werfen.

In diesem Artikel werde ich Tipps und Tricks untersuchen, um den Code leichter zu lesen sowie Fallstricke zu vermeiden.

Code -Segmentierung

in Formanalogien bestehen, die Form wird manchmal in Teile unterteilt, was es weniger schwierig macht. Der Code kann dasselbe tun. Durch die Aufteilung in Abschnitte können die Leser zu den Abschnitten springen, anstatt sich darum zu bemühen, den Dschungel zu durchsuchen.

Cross-file

Seit vielen Jahren haben wir alle möglichen Dinge für das Netzwerk optimiert. JavaScript -Dateien sind keine Ausnahme. Wenn wir darüber nachdenken, über das Minimieren und Pre-HTTP/2 nachzudenken, speichern wir HTTP-Anfragen, indem wir Skripte in einem kombinieren. Heute können wir arbeiten und Taskläufer wie Gulp oder Grunn verwenden, um unsere Dateien zu verarbeiten. Man kann mit Sicherheit sagen, dass wir das Tool so programmieren können, wie wir Optimierungen (wie Verbindungen) mögen und überlassen.

// 从 API 加载用户数据
var getUsersRequest = new XMLHttpRequest();
getUsersRequest.open('GET', '/api/users', true);
getUsersRequest.addEventListener('load', function() {
    // 对用户执行某些操作
});

getUsersRequest.send();

//---------------------------------------------------
// 不同的功能从这里开始。也许
// 这是一个分成文件的时机。
//---------------------------------------------------

// 从 API 加载帖子数据
var getPostsRequest = new XMLHttpRequest();
getPostsRequest.open('GET', '/api/posts', true);
getPostsRequest.addEventListener('load', function() {
    // 对帖子执行某些操作
});

getPostsRequest.send();

Funktion

Mit der Funktion

ermöglicht es uns, wiederverwendbare Codeblöcke zu erstellen. Im Allgemeinen ist der Inhalt einer Funktion eingerückt, sodass es leicht ist, die Start- und Endpositionen der Funktion zu erkennen. Eine gute Angewohnheit ist es, die Funktion klein zu halten - 10 Reihen oder weniger. Es ist auch leicht zu verstehen, was passiert, wenn die Funktion aufgerufen wird, wenn die Funktion korrekt genannt wird. Wir werden die Namenskonvention später vorstellen.

// 从 API 加载用户数据
function getUsers(callback) {
    var getUsersRequest = new XMLHttpRequest();
    getUsersRequest.open('GET', '/api/users', true);
    getUsersRequest.addEventListener('load', function() {
        callback(JSON.parse(getUsersRequest.responseText));
    });

    getUsersRequest.send();
}

// 从 API 加载帖子数据
function getPosts(callback) {
    var getPostsRequest = new XMLHttpRequest();
    getPostsRequest.open('GET', '/api/posts', true);
    getPostsRequest.addEventListener('load', function() {
        callback(JSON.parse(getPostsRequest.responseText));
    });

    getPostsRequest.send();
}

// 由于命名正确，因此无需阅读实际函数即可轻松理解此代码
// getUsers(function(users) {
//     // 对用户执行某些操作
// });
// getPosts(function(posts) {
//     // 对帖子执行某些操作
// });

Wir können den obigen Code vereinfachen. Beachten Sie, dass diese beiden Funktionen fast genau gleich sind? Wir können das Prinzip "Nicht wiederholen" (trocken) anwenden. Dies verhindert Verwirrung.

function fetchJson(url, callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.addEventListener('load', function() {
        callback(JSON.parse(request.responseText));
    });

    request.send();
}

// 下面的代码仍然很容易理解
// 无需阅读上面的函数
fetchJson('/api/users', function(users) {
    // 对用户执行某些操作
});
fetchJson('/api/posts', function(posts) {
    // 对帖子执行某些操作
});

Was ist, wenn wir einen neuen Benutzer über eine Postanforderung erstellen möchten? Zu diesem Zeitpunkt besteht eine Möglichkeit darin, der Funktion optionale Parameter hinzuzufügen und damit der Funktion eine neue Logik einzubringen, wodurch es zu komplex ist, um eine Funktion zu werden. Eine weitere Option besteht darin, eine neue Funktion speziell für Postanforderungen zu erstellen, was zu einer Code -Duplikation führt.

Wir können die Vorteile von beiden durch objektorientierte Programmierung erhalten, sodass wir ein konfigurierbares Einzelnutzungsobjekt erstellen und gleichzeitig seine Wartbarkeit beibehalten können.

Hinweis: Wenn Sie einen Anfänger in objektorientiertem JavaScript benötigen, empfehle ich dieses Video: die maßgebliche Anleitung zum objektorientierten JavaScript

objektorientierte Programmierung

Betrachten Sie Objekte, die allgemein als Klassen bezeichnet werden und die eine Reihe von Kontextbewusstseinsfunktionen sind. Ein Objekt ist ideal, um eine dedizierte Datei einzulegen. In unserem Beispiel können wir eine einfache Wrapper für XMLHTTPrequest erstellen.

httprequest.js

function HttpRequest(url) {
    this.request = new XMLHttpRequest();

    this.body = undefined;
    this.method = HttpRequest.METHOD_GET;
    this.url = url;

    this.responseParser = undefined;
}

HttpRequest.METHOD_GET = 'GET';
HttpRequest.METHOD_POST = 'POST';

HttpRequest.prototype.setMethod = function(method) {
    this.method = method;
    return this;
};

HttpRequest.prototype.setBody = function(body) {
    if (typeof body === 'object') {
        body = JSON.stringify(body);
    }

    this.body = body;
    return this;
};

HttpRequest.prototype.setResponseParser = function(responseParser) {
    if (typeof responseParser !== 'function') return;

    this.responseParser = responseParser;
    return this;
};

HttpRequest.prototype.send = function(callback) {
    this.request.addEventListener('load', function() {
        if (this.responseParser) {
            callback(this.responseParser(this.request.responseText));
        } else {
            callback(this.request.responseText);
        }
    }, false);

    this.request.open(this.method, this.url, true);
    this.request.send(this.body);
    return this;
};

app.js

new HttpRequest('/users')
    .setResponseParser(JSON.parse)
    .send(function(users) {
        // 对用户执行某些操作
    });

new HttpRequest('/posts')
    .setResponseParser(JSON.parse)
    .send(function(posts) {
        // 对帖子执行某些操作
    });

// 创建一个新用户
new HttpRequest('/user')
    .setMethod(HttpRequest.METHOD_POST)
    .setBody({
        name: 'Tim',
        email: 'info@example.com'
    })
    .setResponseParser(JSON.parse)
    .send(function(user) {
        // 对新用户执行某些操作
    });

Die oben erstellte Httprequest -Klasse ist jetzt sehr konfigurierbar und kann auf viele unserer API -Anrufe angewendet werden. Obwohl die Implementierung (eine Reihe von Kettenmethodenaufrufen) komplexer ist, ist die Funktionalität der Klasse leicht zu warten. Das Gleichgewicht zwischen Implementierung und Wiederverwendbarkeit kann schwierig und projektspezifisch sein.

Designmuster ist eine großartige Ergänzung bei der Verwendung von OOP. Obwohl sie die Lesbarkeit nicht selbst verbessern, wird die Konsistenz!

künstliche Grammatik

Dateien, Funktionen, Objekte, das sind nur grobe Zeilen. Sie machen Ihren Code einfach zu scannen . Der Code leichter zu lesen ist eine akribischere Kunst. Die geringsten Details können erhebliche Auswirkungen haben. Beispielsweise ist die Beschränkung Ihrer Linienlänge auf 80 Zeichen eine einfache Lösung, die normalerweise vom Editor über vertikale Linien erzwungen wird. Aber es gibt noch mehr! Name

ordnungsgemäßes Benennen kann zu sofortiger Erkennung führen, ohne festzustellen, wie der Wert oder die Rolle der Funktion ist.

Funktionen verwenden normalerweise die Kamel -Nomenklatur. Es hilft normalerweise, mit einem Verb und dann mit dem Thema zu beginnen.

// 从 API 加载用户数据
var getUsersRequest = new XMLHttpRequest();
getUsersRequest.open('GET', '/api/users', true);
getUsersRequest.addEventListener('load', function() {
    // 对用户执行某些操作
});

getUsersRequest.send();

//---------------------------------------------------
// 不同的功能从这里开始。也许
// 这是一个分成文件的时机。
//---------------------------------------------------

// 从 API 加载帖子数据
var getPostsRequest = new XMLHttpRequest();
getPostsRequest.open('GET', '/api/posts', true);
getPostsRequest.addEventListener('load', function() {
    // 对帖子执行某些操作
});

getPostsRequest.send();

Versuchen Sie für Variablennamen, die invertierte Pyramidenmethode anzuwenden. Das Thema ist vorne platziert und die Attribute werden nach hinten platziert.

// 从 API 加载用户数据
function getUsers(callback) {
    var getUsersRequest = new XMLHttpRequest();
    getUsersRequest.open('GET', '/api/users', true);
    getUsersRequest.addEventListener('load', function() {
        callback(JSON.parse(getUsersRequest.responseText));
    });

    getUsersRequest.send();
}

// 从 API 加载帖子数据
function getPosts(callback) {
    var getPostsRequest = new XMLHttpRequest();
    getPostsRequest.open('GET', '/api/posts', true);
    getPostsRequest.addEventListener('load', function() {
        callback(JSON.parse(getPostsRequest.responseText));
    });

    getPostsRequest.send();
}

// 由于命名正确，因此无需阅读实际函数即可轻松理解此代码
// getUsers(function(users) {
//     // 对用户执行某些操作
// });
// getPosts(function(posts) {
//     // 对帖子执行某些操作
// });

Es ist auch wichtig, zwischen gewöhnlichen und besonderen Variablen unterscheiden zu können. Zum Beispiel werden die Namen von Konstanten normalerweise in Großbuchstaben geschrieben und unterstrichen.

function fetchJson(url, callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.addEventListener('load', function() {
        callback(JSON.parse(request.responseText));
    });

    request.send();
}

// 下面的代码仍然很容易理解
// 无需阅读上面的函数
fetchJson('/api/users', function(users) {
    // 对用户执行某些操作
});
fetchJson('/api/posts', function(posts) {
    // 对帖子执行某些操作
});

Klassen verwenden normalerweise die Kamel -Nomenklatur, beginnend mit Großbuchstaben.

function HttpRequest(url) {
    this.request = new XMLHttpRequest();

    this.body = undefined;
    this.method = HttpRequest.METHOD_GET;
    this.url = url;

    this.responseParser = undefined;
}

HttpRequest.METHOD_GET = 'GET';
HttpRequest.METHOD_POST = 'POST';

HttpRequest.prototype.setMethod = function(method) {
    this.method = method;
    return this;
};

HttpRequest.prototype.setBody = function(body) {
    if (typeof body === 'object') {
        body = JSON.stringify(body);
    }

    this.body = body;
    return this;
};

HttpRequest.prototype.setResponseParser = function(responseParser) {
    if (typeof responseParser !== 'function') return;

    this.responseParser = responseParser;
    return this;
};

HttpRequest.prototype.send = function(callback) {
    this.request.addEventListener('load', function() {
        if (this.responseParser) {
            callback(this.responseParser(this.request.responseText));
        } else {
            callback(this.request.responseText);
        }
    }, false);

    this.request.open(this.method, this.url, true);
    this.request.send(this.body);
    return this;
};

Ein kleines Detail ist die Abkürzung. Einige entscheiden sich dafür, die Abkürzung zu nutzen, während andere sich an die Kamel -Nomenklatur halten. Die Verwendung der ersteren kann es schwieriger machen, nachfolgende Abkürzungen zu identifizieren.

Einfachheit und Optimierung

In vielen Codebasen können Sie auf einen "speziellen" Code stoßen, um die Anzahl der Zeichen zu reduzieren oder die Leistung Ihres Algorithmus zu verbessern.

Einzelliniencode ist ein Beispiel für prägnante Code. Leider verlassen sie sich normalerweise auf Tricks oder dunkle Syntax. Die unten angezeigten verschachtelten ternären Operatoren sind ein häufiges Beispiel. Obwohl es präzise ist, kann es auch ein oder zwei Sekunden dauern, um seinen Effekt im Vergleich zu einer normalen If -Aussage zu verstehen. Seien Sie vorsichtig mit Syntaxverknüpfungen.

new HttpRequest('/users')
    .setResponseParser(JSON.parse)
    .send(function(users) {
        // 对用户执行某些操作
    });

new HttpRequest('/posts')
    .setResponseParser(JSON.parse)
    .send(function(posts) {
        // 对帖子执行某些操作
    });

// 创建一个新用户
new HttpRequest('/user')
    .setMethod(HttpRequest.METHOD_POST)
    .setBody({
        name: 'Tim',
        email: 'info@example.com'
    })
    .setResponseParser(JSON.parse)
    .send(function(user) {
        // 对新用户执行某些操作
    });

Mikrooptimierung ist die Leistungsoptimierung und hat normalerweise nur geringe Auswirkungen. In den meisten Fällen sind sie nicht so einfach zu lesen wie niedrigere Flachäquivalente.

function getApiUrl() { /* ... */ }
function setRequestMethod() { /* ... */ }
function findItemsById(n) { /* ... */ }
function hideSearchForm() { /* ... */ }

JavaScript -Compiler sind sehr gut darin, Code für uns zu optimieren, und sie verbessern sich ständig. Sofern der Unterschied zwischen nicht optimiertem Code und optimiertem Code nicht offensichtlich ist (normalerweise nach Tausenden oder Millionen Operationen), wird empfohlen, einen Code auszuwählen, der leichter zu lesen ist.

Nicht-Code

Dies ist ironisch, aber ein besserer Weg, um den Code lesbar zu halten, besteht darin, Syntax hinzuzufügen, die nicht ausgeführt werden wird. Nennen wir es Nicht-Code.

space

Ich bin mir ziemlich sicher, dass jeder Entwickler andere Entwickler ansah, oder den komprimierten Code für eine bestimmte Website überprüfen - Code, in dem die meisten Leerzeichen entfernt werden. Es mag ziemlich überraschend sein, dies zum ersten Mal zu begegnen. In verschiedenen Bereichen der visuellen Künste wie Design und Typografie sind leere Räume genauso wichtig wie die Füllung. Sie müssen ein empfindliches Gleichgewicht zwischen den beiden finden. Die Wahrnehmung dieses Gleichgewichts variiert je nach Unternehmen, Team und Entwicklern. Glücklicherweise gibt es einige Regeln, die allgemein von anerkannt werden:

Ein Ausdruck pro Zeile,

• Der Inhalt des eingeregten Blocks,
• Zusätzliche Zeilenumbrüche können verwendet werden, um die Codeabschnitte zu trennen.
Alle anderen Regeln sollten mit jedem besprochen werden, mit dem Sie zusammenarbeiten. Unabhängig davon, welchen Codestil Sie zustimmen, ist die Konsistenz der Schlüssel.

Kommentare

var element = document.getElementById('body'),
    elementChildren = element.children,
    elementChildrenCount = elementChildren.length;

// 定义一组颜色时，我在变量前加“color”前缀
var colorBackground = 0xFAFAFA,
    colorPrimary = 0x663399;

// 定义一组背景属性时，我使用 background 作为基准
var backgroundColor = 0xFAFAFA,
    backgroundImages = ['foo.png', 'bar.png'];

// 上下文可以改变一切
var headerBackgroundColor = 0xFAFAFA,
    headerTextColor = 0x663399;

Wie Spaces können Kommentare eine großartige Möglichkeit sein, Platz für Ihren Code bereitzustellen und Ihnen auch Details zu Ihrem Code hinzuzufügen. Stellen Sie sicher, dass Sie einen Kommentar zum Anzeigen hinzufügen:

Interpretation und Argumentation von nicht offensichtlichen Codes,

• behoben die aufgelösten Fehler oder Ausnahmen und verfügbaren Quellen.

Nicht alle Korrekturen sind offensichtlich. Das Hinzufügen zusätzlicher Informationen kann viel klären:

var URI_ROOT = window.location.href;

// 从 API 加载用户数据
var getUsersRequest = new XMLHttpRequest();
getUsersRequest.open('GET', '/api/users', true);
getUsersRequest.addEventListener('load', function() {
    // 对用户执行某些操作
});

getUsersRequest.send();

//---------------------------------------------------
// 不同的功能从这里开始。也许
// 这是一个分成文件的时机。
//---------------------------------------------------

// 从 API 加载帖子数据
var getPostsRequest = new XMLHttpRequest();
getPostsRequest.open('GET', '/api/posts', true);
getPostsRequest.addEventListener('load', function() {
    // 对帖子执行某些操作
});

getPostsRequest.send();

Inline -Dokument

Beim Schreiben objektorientierter Software können Inline-Dokumente wie gewöhnliche Kommentare einen Atemraum für den Code bereitstellen. Sie helfen auch dabei, den Zweck und die Details eines Attributs oder einer Methode zu klären. Viele IDEs verwenden sie für Eingabeaufforderungen, und die generierten Dokument -Tools verwenden sie auch! Was auch immer der Grund ist, ein Dokument zu schreiben ist eine hervorragende Praxis.

// 从 API 加载用户数据
function getUsers(callback) {
    var getUsersRequest = new XMLHttpRequest();
    getUsersRequest.open('GET', '/api/users', true);
    getUsersRequest.addEventListener('load', function() {
        callback(JSON.parse(getUsersRequest.responseText));
    });

    getUsersRequest.send();
}

// 从 API 加载帖子数据
function getPosts(callback) {
    var getPostsRequest = new XMLHttpRequest();
    getPostsRequest.open('GET', '/api/posts', true);
    getPostsRequest.addEventListener('load', function() {
        callback(JSON.parse(getPostsRequest.responseText));
    });

    getPostsRequest.send();
}

// 由于命名正确，因此无需阅读实际函数即可轻松理解此代码
// getUsers(function(users) {
//     // 对用户执行某些操作
// });
// getPosts(function(posts) {
//     // 对帖子执行某些操作
// });

Rückrufproblem

Ereignisse und asynchrone Anrufe sind leistungsstarke Merkmale von JavaScript, es wird jedoch normalerweise schwieriger zu lesen.

asynchrone Anrufe werden normalerweise mit Rückrufen bereitgestellt. Manchmal möchten Sie sie in Ordnung ausführen oder darauf warten, dass alle asynchronen Anrufe bereit sind.

function fetchJson(url, callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.addEventListener('load', function() {
        callback(JSON.parse(request.responseText));
    });

    request.send();
}

// 下面的代码仍然很容易理解
// 无需阅读上面的函数
fetchJson('/api/users', function(users) {
    // 对用户执行某些操作
});
fetchJson('/api/posts', function(posts) {
    // 对帖子执行某些操作
});

Versprechensobjekt wurde in ES2015 (auch als ES6 bekannt) eingeführt, um beide Probleme zu lösen. Es ermöglicht Ihnen, verschachtelte asynchrone Anfragen abzuflachen.

function HttpRequest(url) {
    this.request = new XMLHttpRequest();

    this.body = undefined;
    this.method = HttpRequest.METHOD_GET;
    this.url = url;

    this.responseParser = undefined;
}

HttpRequest.METHOD_GET = 'GET';
HttpRequest.METHOD_POST = 'POST';

HttpRequest.prototype.setMethod = function(method) {
    this.method = method;
    return this;
};

HttpRequest.prototype.setBody = function(body) {
    if (typeof body === 'object') {
        body = JSON.stringify(body);
    }

    this.body = body;
    return this;
};

HttpRequest.prototype.setResponseParser = function(responseParser) {
    if (typeof responseParser !== 'function') return;

    this.responseParser = responseParser;
    return this;
};

HttpRequest.prototype.send = function(callback) {
    this.request.addEventListener('load', function() {
        if (this.responseParser) {
            callback(this.responseParser(this.request.responseText));
        } else {
            callback(this.request.responseText);
        }
    }, false);

    this.request.open(this.method, this.url, true);
    this.request.send(this.body);
    return this;
};

Obwohl wir einen anderen Code eingeführt haben, ist dies leichter zu erklären. Sie können hier mehr über Versprechen lesen: JavaScript wird asynchron (und großartig)

ES6/ES2015

Wenn Sie die ES2015 -Spezifikation verstehen, haben Sie möglicherweise festgestellt, dass alle Codebeispiele in diesem Artikel ältere Versionen sind (mit Ausnahme von Versprechensobjekten). Obwohl ES6 uns leistungsstarke Funktionen bietet, gibt es immer noch einige Probleme mit der Lesbarkeit.

Fettpfeilsyntax definiert eine Funktion, die den Wert davon aus ihrem übergeordneten Bereich erbt. Zumindest wurde es deshalb entworfen. Es ist auch verlockend, es zu verwenden, um regelmäßige Funktionen zu definieren.

new HttpRequest('/users')
    .setResponseParser(JSON.parse)
    .send(function(users) {
        // 对用户执行某些操作
    });

new HttpRequest('/posts')
    .setResponseParser(JSON.parse)
    .send(function(posts) {
        // 对帖子执行某些操作
    });

// 创建一个新用户
new HttpRequest('/user')
    .setMethod(HttpRequest.METHOD_POST)
    .setBody({
        name: 'Tim',
        email: 'info@example.com'
    })
    .setResponseParser(JSON.parse)
    .send(function(user) {
        // 对新用户执行某些操作
    });

Ein weiteres Beispiel ist der Rest und die Spread -Syntax.

function getApiUrl() { /* ... */ }
function setRequestMethod() { /* ... */ }
function findItemsById(n) { /* ... */ }
function hideSearchForm() { /* ... */ }

Ich meine, die ES2015-Spezifikation führt viele nützliche, aber obskure, manchmal verwirrende Syntaxen ein, die es einfach machen, in Einzelliniencode missbraucht zu werden. Ich möchte nicht verhindern, dass diese Funktionen verwendet werden. Ich hoffe, Vorsicht zu ermutigen, sie zu benutzen.

Schlussfolgerung

Denken Sie in jeder Phase des Projekts daran, den Code lesbar und wartbar zu halten. Alles von Dateisystemen bis hin zu winzigen Syntaxentscheidungen ist wichtig. Vor allem in einem Team ist es schwierig, immer alle Regeln durchzusetzen. Die Code -Überprüfung kann helfen, aber es gibt immer noch Raum für menschliche Fehler. Glücklicherweise gibt es einige Werkzeuge, mit denen Sie dies tun können!

• JSHINT - Ein JavaScript -Sprachprüfung, um Code fehlerfrei zu halten
• idiomatisch - ein beliebter Standard -Code -Stil -Standard, aber Sie können von
abweichen
• editorConfig - definiert den Code -Stil für Editoren

Zusätzlich zu den Tools für Codequalität und Stile gibt es Tools, mit denen jeder Code das Lesen erleichtert. Versuchen Sie verschiedene Syntax-Hervorhebungen oder verwenden Sie eine Minimap, um einen Überblick über das Skript (Atom, Klammern) zu sehen.

Was denkst du über das Schreiben von lesbarem und wartbarem Code? Ich würde gerne Ihre Gedanken in den Kommentaren unten hören.

FAQs über lesbare Code

Warum muss Code für Menschen leicht zu lesen sein?

Die Lesbarkeit des Codes ist aus folgenden Gründen von entscheidender Bedeutung. Erstens erleichtert der Code leichter zu verstehen, zu debuggen und zu warten. Wenn der Code lesbar ist, ist es für andere Entwickler einfacher, die Rolle des Codes zu verstehen, was in kollaborativen Umgebungen besonders wichtig ist. Zweitens ist ein hochlesbarer Code eher korrekt. Wenn Entwickler den Code leicht verstehen können, ist es unwahrscheinlich, dass sie bei der Änderung des Codes Fehler einführen. Schließlich ist ein gut lesbarer Code einfacher zu testen. Wenn der Code klar und präzise ist, ist es einfacher zu bestimmen, was getestet werden muss und wie er testet.

Was macht Programmiersprachen einfach zu lesen?

Die Sprache gilt als leicht zu lesen, wenn sie eine klare und präzise Syntax hat, aussagekräftige Kennungen verwendet und Kommentare enthält, die den Effekt des Codes erklären. Hochrangige Sprachen wie Python und Ruby gelten oft als leicht zu lesen, da sie englische Syntax verwenden und klare, beschreibende Variablennamen ermöglichen. Es ist jedoch auch möglich, die Lesbarkeit von Sprachen auf niedrigem Niveau wie C oder Java durch gute Codierungspraktiken wie konsistente Eindrückung, Nutzung von Räumen und umfassende Anmerkungen zu verbessern.

Wie reduziert die Funktion die Codemenge?

Die

-Funktion kann die Codemenge erheblich reduzieren, indem Entwickler es wiederverwenden können. Schreiben Sie anstatt denselben Code mehrmals zu schreiben, schreiben Sie eine Funktion einmal und rufen Sie ihn dann auf, wenn Sie eine bestimmte Aufgabe ausführen müssen. Dies macht den Code nicht nur kürzer und laser zu lesen, sondern erleichtert den Code auch leichter zu warten und zu debuggen, da alle Änderungen nur an einem Ort vorgenommen werden müssen.

Was ist der Unterschied zwischen Maschinencode und hochrangigen Sprachen?

Maschinencode ist die Programmiersprache mit niedrigster Ebene, die aus Binärcode besteht, die direkt von dem Central Processor (CPU) eines Computers (CPU) ausgeführt werden kann. Auf der anderen Seite liegen hochrangige Sprachen näher an menschlichen Sprachen und erfordern, dass sie vor der Ausführung von einem Compiler oder Interpreter in den Maschinencode konvertiert werden. Auf hohen Sprachen sind oft einfacher zu lesen und zu schreiben. Sie bieten mehr Abstraktion mit Hardware, wodurch sie einfacher zwischen verschiedenen Arten von Maschinen zu verarbeiten sind.

Wie arbeiten Dolmetscher und Compiler?

Dolmetscher und Compiler sind Werkzeuge zum Umwandeln von Sprachen auf hoher Ebene in Maschinencode. Der Interpreter übersetzt und führt die Codezeile nach Zeile über die Zeile über, die interaktives Codieren und Debuggen ermöglicht. Dies kann jedoch langsamer sein als das Kompilieren des Codes. Andererseits konvertiert der Compiler das gesamte Programm vor der Ausführung in den Maschinencode, wodurch die Ausführungsgeschwindigkeit erhöht wird. Es können jedoch nur Codefehler entdeckt werden, nachdem das gesamte Programm zusammengestellt wurde.

Was ist Montagesprache?

Assemblersprache ist eine Programmiersprache auf niedriger Ebene, die einen mnemonischen Code verwendet, um Anweisungen für Maschinencode darzustellen. Jede Montagesprache ist spezifisch für eine bestimmte Computerarchitektur. Es ist zwar einfacher zu lesen als Maschinencode, aber es ist immer noch schwieriger zu lesen und zu schreiben als auf hoher Sprachen. Es ermöglicht jedoch eine direkte Kontrolle der Hardware, die in einigen Fällen sehr nützlich ist.

Wie verbessert man die Lesbarkeit des Codes?

Es gibt verschiedene Möglichkeiten, die Lesbarkeit des Codes zu verbessern. Diese Methoden umfassen die Verwendung aussagekräftiger Variablen und Funktionsnamen, die Einführung des Codes, die Trennung verschiedener Teile des Codes mit Leerzeichen und enthalten Kommentare, die die Rolle des Codes erläutern. Es ist auch wichtig, die Konventionen und Best Practices der von Ihnen verwendeten Programmiersprache zu befolgen.

Welche Rolle spielen Anmerkungen bei der lesbaren Code?

Kommentare spielen eine entscheidende Rolle bei der lesbaren Code. Sie geben eine Erläuterung der Funktion des Code, die Gründe, warum bestimmte Entscheidungen getroffen werden und wie komplexe Code -Teile funktionieren. Dies kann sehr hilfreich für andere Entwickler sein, die Ihren Code verstehen und verwenden müssen. Es ist jedoch wichtig, Kommentare präzise und relevant zu machen und sie zu aktualisieren, wenn sich der Code ändert.

Wie wirkt sich sehr lesbarer Code die Zusammenarbeit aus?

Hochlesbarer Code erleichtert die Zusammenarbeit stark. Wenn der Code leicht zu lesen ist, ist es für andere Entwickler einfacher, Beiträge zu verstehen und zu beteiligen. Dies ist besonders wichtig in großen Projekten, bei denen mehrere Entwickler an verschiedenen Teilen der Codebasis arbeiten. Lesbarer Code erleichtert es auch einfacher, neue Teammitglieder in die Gruppe zu bringen, da sie schnell verstehen können, was der Code tut und wie er funktioniert.

Wie wirkt sich sehr lesbarer Code auf die Qualität der Software aus?

Hochlesbarer Code kann die Qualität der Software erheblich verbessern. Wenn der Code leicht zu lesen ist, ist es einfacher, Fehler zu erkennen und zu beheben und sicherzustellen, dass der Code das tut, was er tun sollte. Es erleichtert auch die Aufrechterhaltung und Verbesserung der Software im Laufe der Zeit, da es deutlich die Rolle jedes Teils des Codes veranschaulicht. Dies kann zu zuverlässigerer, effizienterer und leistungsfähigerer Software führen.

Das obige ist der detaillierte Inhalt vonDie Bedeutung des Schreibens von Code, den Menschen lesen können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!