In diesem Artikel erfahren Sie, wie Sie 12 Methoden zum Schreiben von hochwertigem JS-Code befolgen. Freunde, die dies benötigen, können sich darauf beziehen.
Das Schreiben von hochwertigem JS-Code erleichtert nicht nur die Betrachtung, sondern verbessert auch die Ausführungsgeschwindigkeit des Programms. Das Folgende ist die Methode des Herausgebers, es zu organisieren:
1. So schreiben Sie wartbaren Code
Wenn ein Fehler auftritt, ist es am besten, ihn sofort zu beheben. Zu diesem Zeitpunkt sind die vier Möglichkeiten zur Lösung des Problems aufgeführt Dein Geist ist immer noch sehr klar. Andernfalls gehen Sie zu anderen Aufgaben über oder der Fehler tritt nach einer gewissen Zeit auf und Sie vergessen, dass das Betrachten des Codes nach einer Weile Folgendes erfordert:
1. Nehmen Sie sich Zeit für das Lernen und Verstehen. 2. Das Zeit, dieses Problem zu lösen, besteht darin, den Problemcode zu verstehen, der gelöst werden sollte
Es gibt ein weiteres Problem, insbesondere bei großen Projekten oder Unternehmen: Der Typ, der den Fehler behebt, ist nicht die Person, die den Code geschrieben hat (und die der Typ, der den Fehler gefunden hat, und nicht dieselbe Person, die den Fehler behebt). Daher ist es wichtig, die Zeit zu verkürzen, die zum Verstehen des Codes benötigt wird, unabhängig davon, ob es sich um Code handelt, den Sie vor einiger Zeit geschrieben haben, oder um Code, der von anderen Teammitgliedern geschrieben wurde. Hier geht es um das Endergebnis (Umsatz) und die Zufriedenheit der Entwickler, denn wir sollten neue und aufregende Dinge entwickeln, anstatt Stunden und Tage mit der Pflege von Legacy-Code zu verbringen. Daher ist es von entscheidender Bedeutung, wartbaren Code zu erstellen. Im Allgemeinen gelten für wartbaren Code die folgenden Prinzipien:
Lesbarkeit
Konsistenz
Vorhersagbarkeit
Sieht so aus, als ob es von derselben Person geschrieben wurde
Dokumentiert
2. Globale Variablen Das Problem mit
Das Problem mit globalen Variablen besteht darin, dass diese globalen Variablen vom gesamten Code in Ihrer JavaScript-Anwendung und der Webseite gemeinsam genutzt werden und sich im selben globalen Namensraum befinden. Wenn also zwei verschiedene Teile eines Programms globale Variablen definieren Bei gleichem Namen, aber unterschiedlichen Funktionen sind Namenskonflikte unvermeidlich. Es kommt auch häufig vor, dass Webseiten Code enthalten, der nicht vom Entwickler der Seite geschrieben wurde, zum Beispiel:
JavaScript-Bibliothek eines Drittanbieters
Skriptcode des Werbetreibenden
Benutzerverfolgungs- und Analyseskriptcode von Drittanbietern
Verschiedene Arten von Widgets, Flags und Schaltflächen
Dieses Drittanbieterskript definiert beispielsweise eine globale Variable namens A; definieren Sie dann auch eine globale Variable namens A in Ihrer Funktion. Das Ergebnis ist, dass die späteren Variablen die vorherigen überschreiben und das Drittanbieter-Skript plötzlich ungültig wird! Und es ist schwer, es zu debuggen.
Also: Es ist wichtig, globale Variablen so wenig wie möglich zu verwenden, wie z. B. den Namespace-Modus oder Funktionen, die automatisch sofort ausgeführt werden, aber das Wichtigste, um globale Variablen auf ein Minimum zu beschränken, ist, immer var zu verwenden Variablen deklarieren.
3. Vergessen Sie die Nebenwirkungen von var
Es gibt einige kleine Unterschiede zwischen impliziten globalen Variablen und explizit definierten globalen Variablen, die durch sind Der delete-Operator hat die Möglichkeit, Variablen undefiniert zu lassen. Die Details lauten wie folgt:
Globale Variablen, die über var erstellt wurden (in einem anderen Programm als Funktionen erstellt wurden), können nicht gelöscht werden.
Implizite globale Variablen, die nicht über var erstellt wurden (unabhängig davon, ob sie in einer Funktion erstellt wurden), können gelöscht werden.
Implizite globale Variablen sind also keine wirklich globalen Variablen, sondern Eigenschaften des globalen Objekts. Attribute können über den Löschoperator gelöscht werden, Variablen jedoch nicht. Ich werde den spezifischen Code nicht schreiben.
4. Greifen Sie auf das globale Objekt zu
Im Browser kann über das Fensterattribut an einer beliebigen Stelle im Code zugegriffen werden (es sei denn Sie haben etwas Unverschämtes getan, zum Beispiel eine lokale Variable mit dem Namen „window“ deklariert. Unter anderen Umständen könnte diese Komforteigenschaft jedoch einen anderen Namen haben (oder im Programm sogar nicht verfügbar sein). Wenn Sie ohne eine hartcodierte Fensterkennung auf das globale Objekt zugreifen müssen, können Sie im Funktionsumfang auf jeder Ebene Folgendes tun:
var global = (function () { return this; }());5. for-Schleife
In der for-Schleife können Sie die Werte von Arrays oder arrayähnlichen Objekten wie Argumenten und HTMLCollection-Objekten durchlaufen. Die übliche Schleifenform ist wie folgt:
// Zweitbeste Schleife für (var i = 0; i < myarray.length; i++) { // Benutze myarray[i], um etwas zu tun
Der Nachteil dieser Form der Schleife besteht darin, dass die Länge des Arrays bei jeder Schleife ermittelt werden muss. Dadurch wird Ihr Code reduziert, insbesondere wenn myarray kein Array, sondern ein HTMLCollection-Objekt ist.6. Erweitern Sie den integrierten Prototyp nicht
扩增构造函数的prototype属性是个很强大的增加功能的方法，但有时候它太强大了。增加内置的构造函数原型（如Object(), Array(), 或Function()）挺诱人的，但是这严重降低了可维护性，因为它让你的代码变得难以预测。使用你代码的其他开发人员很可能更期望使用内置的 JavaScript方法来持续不断地工作，而不是你另加的方法。另外，属性添加到原型中，可能会导致不使用hasOwnProperty属性时在循环中显示出来，这会造成混乱。
七、避免隐式类型转换
JavaScript的变量在比较的时候会隐式类型转换。这就是为什么一些诸如：false == 0 或 “” == 0 返回的结果是true。为避免引起混乱的隐含类型转换，在你比较值和表达式类型的时候始终使用===和!==操作符。
var zero = 0; if (zero === false) { // 不执行，因为zero为0, 而不是false } // 反面示例 if (zero == false) { // 执行了... }
八、避免eval()
如果你现在的代码中使用了eval()，记住该咒语“eval()是魔鬼”。此方法接受任意的字符串，并当作JavaScript代码来处理。当有 问题的代码是事先知道的（不是运行时确定的），没有理由使用eval()。如果代码是在运行时动态生成，有一个更好的方式不使用eval而达到同样的目 标。例如，用方括号表示法来访问动态属性会更好更简单：
// 反面示例 var property = "name"; alert(eval("obj." + property)); // 更好的 var property = "name"; alert(obj[property]);
使用eval()也带来了安全隐患，因为被执行的代码（例如从网络来）可能已被篡改。这是个很常见的反面教材，当处理Ajax请求得到的JSON 相应的时候。在这些情况下，最好使用JavaScript内置方法来解析JSON相应，以确保安全和有效。若浏览器不支持JSON.parse()，你可 以使用来自JSON.org的库。
同样重要的是要记住，给setInterval(), setTimeout()和Function()构造函数传递字符串，大部分情况下，与使用eval()是类似的，因此要避免。在幕后，JavaScript仍需要评估和执行你给程序传递的字符串：
// 反面示例 setTimeout("myFunc()", 1000); setTimeout("myFunc(1, 2, 3)", 1000); // 更好的 setTimeout(myFunc, 1000); setTimeout(function () { myFunc(1, 2, 3); }, 1000);
使用新的Function()构造就类似于eval()，应小心接近。这可能是一个强大的构造，但往往被误用。如果你绝对必须使用eval()，你 可以考虑使用new Function()代替。有一个小的潜在好处，因为在新Function()中作代码评估是在局部函数作用域中运行，所以代码中任何被评估的通过var 定义的变量都不会自动变成全局变量。另一种方法来阻止自动全局变量是封装eval()调用到一个即时函数中。
考虑下面这个例子，这里仅un作为全局变量污染了命名空间。
console.log(typeof un); // "undefined" console.log(typeof deux); // "undefined" console.log(typeof trois); // "undefined" var jsstring = "var un = 1; console.log(un);"; eval(jsstring); // logs "1" jsstring = "var deux = 2; console.log(deux);"; new Function(jsstring)(); // logs "2" jsstring = "var trois = 3; console.log(trois);"; (function () { eval(jsstring); }()); // logs "3" console.log(typeof un); // number console.log(typeof deux); // "undefined" console.log(typeof trois); // "undefined"另一间eval()和Function构造不同的是eval()可以干扰作用域链，而Function()更安分守己些。不管你在哪里执行 Function()，它只看到全局作用域。所以其能很好的避免本地变量污染。在下面这个例子中，eval()可以访问和修改它外部作用域中的变量，这是 Function做不来的（注意到使用Function和new Function是相同的）。
(function () { var local = 1; eval("local = 3; console.log(local)"); // logs "3" console.log(local); // logs "3" }()); (function () { var local = 1; Function("console.log(typeof local);")(); // logs undefined九、编码规范
建立和遵循编码规范是很重要的，这让你的代码保持一致性，可预测，更易于阅读和理解。一个新的开发者加入这个团队可以通读规范，理解其它团队成员书写的代码，更快上手干活。
十、缩进
代码没有缩进基本上就不能读了。唯一糟糕的事情就是不一致的缩进，因为它看上去像是遵循了规范，但是可能一路上伴随着混乱和惊奇。重要的是规范地使用缩进。
十一、注释
你必须注释你的代码，即使不会有其他人向你一样接触它。通常，当你深入研究一个问题，你会很清楚的知道这个代码是干嘛用的，但是，当你一周之后再回来看的时候，想必也要耗掉不少脑细胞去搞明白到底怎么工作的。
Natürlich können Kommentare nicht bis zum Äußersten gehen: jede einzelne Variable oder eine einzelne Zeile. Generell sollten Sie jedoch alle Funktionen, ihre Argumente und Rückgabewerte sowie alle ungewöhnlichen Techniken oder Methoden dokumentieren. Denken Sie daran, dass Kommentare zukünftigen Lesern Ihres Codes viele Hinweise geben können; Leser benötigen (ohne zu viel zu lesen) nur die Kommentare und Funktionsattributnamen, um Ihren Code zu verstehen. Wenn Sie beispielsweise über fünf oder sechs Programmzeilen verfügen, die eine bestimmte Aufgabe ausführen, kann der Leser dieses Detail überspringen, wenn Sie den Zweck der Zeile und den Grund dafür beschreiben. Es gibt keine feste Regel für das Verhältnis von Kommentaren zu Code, und einige Teile des Codes (z. B. reguläre Ausdrücke) können mehr Kommentare als Code enthalten.
12. Geschweifte Zahnspangen {}
Cure-Zahnspangen (auch als Zahnspangen bezeichnet, dasselbe unten) sollten immer verwendet werden, auch wenn sie Wenn optional. Technisch gesehen sind geschweifte Klammern nicht erforderlich, wenn es nur eine Anweisung in einem in oder for gibt, Sie sollten sie aber trotzdem immer verwenden. Dadurch wird der Code konsistenter und einfacher zu aktualisieren.
Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
jsZusammenfassung der Vor- und Nachteile der drei Aufrufmethoden
JS wird geladen. Detaillierte Erläuterung der jquery.js-Methode
Das obige ist der detaillierte Inhalt von12 Möglichkeiten, hochwertigen JS-Code zu schreiben (lehren Sie, hochwertigen Code zu schreiben). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
