So schreiben Sie standardisierten JavaScript-Code-js-Tutorial-php.cn

Als Entwickler (WEB-Front-End-JavaScript-Entwicklung) erschwert eine nicht standardmäßige Entwicklung nicht nur die zukünftige Codepflege, sondern ist auch nicht förderlich für die Zusammenarbeit im Team. Dies bringt normalerweise auch Probleme mit der Codesicherheit und -ausführung mit sich Effizienz. Ich habe in meiner Entwicklungsarbeit mit Kollegen zusammengearbeitet, die sich nicht nach den Standards entwickelt haben. Die Zusammenarbeit mit ihm kann nicht als „angenehm“ bezeichnet werden. Der Zweck des Schreibens dieses Artikels besteht nicht nur darin, ein paar Erfahrungen mit Ihnen zu teilen, sondern auch zu hoffen, dass er als Referenz für zukünftige Partner dienen kann. Wenn das, was ich sage, unwissenschaftlich ist, hoffe ich natürlich, dass Senioren aus allen Gesellschaftsschichten mir einen Rat geben können. Die verschiedenen Standardanforderungen sind unten in Unterpunkten aufgeführt. Diese Anforderungen werden alle für Codierungsprobleme von Kollegen vorgeschlagen. Andere von vielen Branchen vereinbarte Standards werden möglicherweise nicht erneut erwähnt.

1. Stellen Sie sicher, dass nach der Codekomprimierung keine Fehler auftreten.

Bei großen JavaScript-Projekten werden im Allgemeinen alle im Projekt enthaltenen JavaScript-Dateien komprimiert, wenn das Produkt veröffentlicht wird Verwenden Sie den Google Closure Compiler Service. Die neue Version von jQuery hat auf dieses Tool umgestellt, um den Code zu komprimieren. Dadurch werden im Allgemeinen die während der Entwicklung geschriebenen Kommentare entfernt, alle Leerzeichen und Zeilenumbrüche entfernt und sogar die ursprünglichen langen Variablennamen durch kurze ersetzt Der Zweck dieser Variablen besteht darin, die Download-Geschwindigkeit von Dateien zu beschleunigen und gleichzeitig den durch Website-Zugriffe verursachten zusätzlichen Datenverkehr zu reduzieren Zumindest ist der komprimierte Code auch nach der Wiederherstellung immer noch nicht so gut lesbar. Damit der Code korrekt komprimiert werden kann, ist es im Allgemeinen erforderlich, dass die Anweisung normal mit einem Semikolon endet und die geschweiften Klammern ebenfalls streng enden müssen usw. Die spezifischen Anforderungen hängen auch von den Anforderungen des Komprimierungstools ab. Wenn Sie es also zu Beginn nicht gemäß den Standards tun, ist es Zeitverschwendung, noch einmal nach Fehlern zu suchen, nachdem die Komprimierung fehlgeschlagen ist.

Stellen Sie sicher, dass der Code die automatische Formatierungsfunktion einer bestimmten IDE bestehen kann

Im Allgemeinen verfügen umfassendere Entwicklungstools (wie Aptana Studio) über eine Code-Funktion zur „automatischen Formatierung“. Funktion hilft Um eine einheitliche Codeanordnung wie Zeilenumbrüche, Einrückungen und Leerzeichen zu erreichen, können Sie Ihre bevorzugten Formatierungsstandards festlegen, z. B. ob die linke geschweifte Klammer { eine neue Zeile beginnen soll. Der Zweck dieser Anforderung besteht darin, den Mitgliedern Ihres Entwicklungsteams die Möglichkeit zu geben, eine Kopie Ihres Codes zu erstellen und ihn mithilfe der IDE automatisch in einen Stil zu formatieren, der ihnen gefällt oder mit dem sie zum Lesen vertraut sind. Ihr Kollege muss Ihren Code lesen, vielleicht weil Sie eine gemeinsame Methode schreiben, die er auch im Entwicklungsprozess anderer Module verwenden muss. Durch das Lesen Ihres Codes können Sie die Details des Methodenaufrufs und der Implementierung besser verstehen ein einfaches API-Dokument, das nicht erreicht werden kann.

3. Standarddokumentkommentare verwenden

Diese Anforderung gilt als die grundlegendste, die hilfreich ist, um die spezifische Parameterübergabeaufforderung der Methode am Methodenaufrufpunkt anzuzeigen, und kann auch generiert werden Mit dem unterstützenden Dokumentationstool können Entwicklungsdokumente in HTML oder anderen Formaten von anderen Teammitgliedern gelesen werden. Sie können es mit jsdoc-toolkit versuchen. Wenn Ihre automatisch generierte API von einer offenen Plattform wie der facebook.com-Anwendung stammt, steht Ihre Dokumentation allen Entwicklern auf der Welt offen. Darüber hinaus erleichtert das Schreiben vollständiger Kommentare den Teammitgliedern das Lesen Ihres Codes. Durch Ihre Parameterbeschreibung können Teammitglieder die Implementierungsdetails der von Ihnen geschriebenen Methode leicht erkennen. Natürlich erleichtert es auch die Codepflege in der Zukunft, sodass Sie, egal wie groß das Projekt ist, auch nach längerer Zeit zurückgehen und etwas ändern, nicht vergessen werden, welchen Code Sie damals geschrieben haben.

4. Verwenden Sie standardisierte und aussagekräftige Variablennamen.

Die Verwendung standardisierter und aussagekräftiger Variablennamen kann die Lesbarkeit des Codes verbessern Für andere leicht verständlich. Bei der Entwicklung großer Projekte kann es tatsächlich sein, dass jeder eine relativ große Menge an Code schreibt, um ihn in Zukunft klar und leicht verständlich zu machen, wenn das System beispielsweise aktualisiert wird oder neue Funktionen eingeführt werden Werden in der Zukunft weitere hinzugefügt, wird es viel einfacher sein, den Code zu ändern. Es wäre ein großer Witz, wenn Sie am Ende feststellen würden, dass der Code, den Sie ursprünglich geschrieben haben, jetzt nicht verstanden werden kann.

Verwenden Sie natürlich aussagekräftige Variablennamen und versuchen Sie, Standardbenennungen zu verwenden, wie zum Beispiel hier: var me = this ist möglicherweise nicht so gut wie var self = this, da self ein Schlüsselwort in Python und self in ist Python Dies ist die Verwendung davon in normaler Sprache. Schauen Sie sich das folgende Beispiel noch einmal an. Das Hinzufügen von s ist offensichtlich wissenschaftlicher, als es nicht hinzuzufügen. Auf diese Weise können Sie erkennen, dass der Variablenname eine Pluralzahl, möglicherweise ein Array usw. speichert:

var li = document.getElementsByTagName(&#39;li&#39;)
var lis = document.getElementsByTagName(&#39;li&#39;)

Nach dem Login kopieren

Verwenden Sie keine voreingenommene Syntax.

Als dynamische Skriptsprache ist die Flexibilität von JavaScript sowohl ein Vorteil als auch ein Nachteil. Wie wir alle wissen, haben Entwickler dynamischer Sprachen auf verschiedenen Ebenen unterschiedliche Anforderungen Bei der Implementierung derselben Funktion wird es große Unterschiede in den Codespezifikationen oder der Syntax geben. Was auch immer passiert, jeder sollte die Codierung standardisieren und Fehler vermeiden, einfache Probleme nicht komplizieren und nicht gegen den Grundsatz der Codelesbarkeit verstoßen.

Zum Beispiel sollte diese Anweisung: typeof(b) == 'string' && Alert(b) geändert werden in: if (typeof(b) == 'string') Alert(b), wie die Vorherige Verwendung, Verwendung des &&-Operator-Analysemechanismus: Wenn festgestellt wird, dass die Anweisung vor && „falsch“ zurückgibt, wird die nachfolgende Anweisung nicht mehr erkannt. Im Hinblick auf die Codeoptimierung wird auch erwähnt, dass die wahrscheinlichste Situation zuerst beurteilt wird . Diese Schreibweise ist in Ordnung, wenn es viele Bedingungen gibt und die Anweisungen lang sind, ist die Lesbarkeit des Codes ziemlich schlecht.

Ein weiteres Beispiel: +function(a){var p = a;}( 'a') sollte geändert werden in: (function(a){var p = a;})( 'a'), Tatsächlich hat das +-Zeichen vor der Funktion den gleichen Effekt wie die ()-Klammer, die die Funktion enthält. Letzteres ist eine gängige und leicht verständliche Methode, um eine variable Verschmutzung zu verhindern JavaScript-Frameworks verwenden die letztere Methode.

Sprechen wir über ein weiteres Beispiel, das die Lesbarkeit des Codes verringert, wie zum Beispiel: function getPostionTxt(type){return type == 2 ? "Wild" : (type == 3 ? "Mall" : (type == 4 ? "Copy" : null));} sollte geändert werden in: function getPostionTxt(type){var typeData={"2": "Wild", "3": "Mall", "4": "Copy". "};if ( typeData[type]) return typeData[type]; sonst return null;}. Wenn der Typ eine ununterbrochene Ganzzahl ist, die bei 0 beginnt, ist es einfacher, das Array direkt zu verwenden. Sind Sie nicht schwindelig, nachdem Sie die vorherige mehrschichtige Verschachtelung des ternären Ausdrucks gesehen haben?

6. Chinesische Schriftzeichen sollten nicht in Nicht-Zuweisungsteilen der Erklärung erscheinen

Ich denke, die meisten Leute wissen, dass dies zwar keinen Einfluss auf die Funktionsweise des Programms hat, aber offensichtlich dem Industriestandard entspricht Anforderungen Natürlich verwenden wir auch nicht „Easy Language“ für die Entwicklung. Über dieses Problem wollte ich ursprünglich nicht sprechen, aber ich bin auf jemanden gestoßen, der das getan hat. Ich weiß nicht, ob es daran liegt, dass er Pinyin beherrscht, und ich bin auf der Suche Für Übersetzungstools ist auch Helfen eine gute Option. Ich gebe ein Beispiel wie folgt. Es ist verständlich, wenn die folgende Schrift in der Lehre auftaucht:

this.user['name'] = 'Zhang San' Oder this.user.name = 'Zhang San'

7. Definieren Sie eindeutig eine feste Anzahl von Parametern für die Funktion

Funktionen mit einer festen Anzahl von Parametern verwenden keine Argumente, um Parameter zu erhalten. Wenn die von Ihnen definierte Methode mehr Skripte enthält, Sie können nicht auf einen Blick erkennen, welche Parameter die Methode akzeptiert und wie viele Parameter sie haben. Zum Beispiel wie folgt:

var $ = function(){return document.getElementById(arguments[0]);}应该改成：var $ = function(elemID){return document.getElementById(elemID);}

Nach dem Login kopieren

8. Seien Sie nicht verrückt nach dynamischer Ereignisbindung

Obwohl Sie wissen, dass Ereignisse dynamisch gebunden werden können, beispielsweise durch die Verwendung von addEventListener oder die Verwendung von jQuery Mit der Bindungsmethode wissen Sie auch, dass die Verwendung dynamischer Ereignisse XHTML sauberer machen kann, aber im Allgemeinen empfehle ich immer noch, Ereignisse direkt auf DOM-Knoten zu schreiben, da dies die Wartung des Codes erleichtern kann, da wir sie auf diese Weise einfacher anzeigen können Es ist einfacher zu wissen, welches Element an welche Methode gebunden ist. Einfach ausgedrückt ist es einfacher zu wissen, welches Methodenskript aufgerufen wird, wenn auf eine Schaltfläche oder einen Link geklickt wird.

9. Reduzieren Sie die Kopplung zwischen Code und XHTML

Verlassen Sie sich nicht zu sehr auf einige Inhaltsmerkmale des DOM, um verschiedene Skriptcodes aufzurufen, sondern sollten Methoden definieren Rufen Sie es dann im DOM auf, sodass der Methodenaufruf unabhängig davon, ob es sich um eine Schaltfläche oder einen Link handelt, offensichtlich derselbe ist:

function myBtnClick(obj)
{
　if (/确定/.test(obj.innerHTML)) 
　　alert(&#39;OK&#39;);
　else if (/取消/.test(obj.innerHTML)) 
　　alert(&#39;Cancel&#39;);
　else
　　alert(&#39;Other&#39;);
}
<a herf="javascript:;" onclick="myBtnClick(this)">确定</a><a herf="javascript:;" onclick="myBtnClick(this)">取消</a>

Nach dem Login kopieren

Das obige Beispiel wird tatsächlich innerhalb einer Funktion verarbeitet. Zwei Dinge sollten in zwei Funktionen unterteilt werden, wie oben geschrieben. Wenn der Link beispielsweise durch eine Schaltfläche ersetzt wird, ändern Sie ihn beispielsweise wie folgt:

10. 一个函数应该返回统一的数据类型

因为JavaScrip是弱类型的，在编写函数的时候有些人对于返回类型的处理显得比较随便，我觉得应该像强类型语言那样返回，看看下面的两个例子：

function getUserName(userID)
{
　if (data[userID])
　　return data[userID];
　else
　　return false;
}
应该改为：
function getUserName(userID)
{
　if (data[userID])
　　return data[userID];
　else
　　return "";
}

Nach dem Login kopieren

这个方法如果在C#中定义，我们知道它准备返回的数据类型应该是字符串，所以如果没有找到这个数据我们就应该返回空的字符串，而不是返回布尔值或其它不合适的类型。这并没有影响到函数将来的调用，因为返回的空字符串在逻辑判断上可被认作"非"，即与false一样，除非我们使用全等于"==="或typeof进行判断。

11. 规范定义JSON对象，补全双引号

使用标准肯定是有好处的，那么为什么还是有人不使用标准呢？我想这可能是懒或习惯问题。也许还会有人跟我说，少写引号可以减轻文件体积，我认为这有道理但不是重点。对于服务器返回的JSON数据，使用标准结构可以利用Firefox浏览器的JSONView插件方便查看（像查看XML那样树形显示），另外你如果使用jQuery做开发，最新版本jQuery1.4+是对JSON格式有更高要求的，具体的可以自己查阅jQuery更新文档。比如：{name:"Tom"}或{'name':'Tom'}都应该改成{"name":"Tom"}。

12. 不在文件中留下未来确定不再使用的代码片段

当代码调整或重构后，之前编写的不再使用的代码应该及时删除，如果认为这些代码还有一定利用价值可以把它们剪切到临时文件中。留在项目中不仅增加了文件体积，这对团队其它成员甚至自己都起到一定干扰作用，怕将来自己看回代码都搞不懂这方法是干什么的，是否有使用过。当然可以用文档注释标签@deprecated把这个方法标识为不推荐的。

13. 不重复定义其他团队成员已经实现的方法

对于大型项目，一般会有部分开发成员实现一些通用方法，而另外一些开发成员则要去熟悉这些通用方法，然后在自己编写模块遇到有调用的需要就直接调用，而不是像有些开发者喜欢"单干"，根本不会阅读这些通用方法文档，在自己代码中又写了一遍实现，这不仅产生多余的代码量，当然也是会影响团队开发效率的，这是没有团队合作精神的表现，是重复造轮子的悲剧。

比如在通用类文件Common.js有定义function $(elemID){return document.getElementById(elemID)}那么就不应该在Mail.js中再次出现这一功能函数的重复定义，对于一些复杂的方法更应该如此。

14. 调用合适的方法

当有几个方法都可以实现同类功能的时候，我们还是要根据场景选择使用最合适的方法。下面拿jQuery框架的两个AJAX方法来说明。如果确定服务器返回的数据是JSON应该直接使用$.getJSON，而不是使用$.get得到数据再用eval函数转成JSON对象。如果因为本次请求要传输大量的数据而不得以使用$.post也应该采用指定返回数据类型（设置dataType参数）的做法。如果使用$.getJSON，在代码中我们一眼能看出本次请求服务器返回的是JSON。

温馨提示：jQuery1.4后，如果服务器有设置数据输出的ContentType，比如ASP.NET C#设置 Response.ContentType = "application/json"，那么$.get将与$.getJSON的使用没有什么区别。

15. 使用合适的控件存储合适的数据

Ich habe einmal herausgefunden, dass jemand DIV verwendet hat, um JSON-Daten für die zukünftige Verwendung nach dem Herunterladen der Seite zu speichern, etwa so:

{ "name":"Tom"}

, Offensichtlich wird dieser DIV nicht für die Schnittstellenanzeige verwendet, um den Effekt der Verwendung von HTML-Dateien zum Zwischenspeichern von Daten zu erzielen. Es wäre sinnvoller, zumindest ein verstecktes Feld zum Speichern der Daten zu verwenden zu: .

Tatsächlich können Sie das Fensterobjekt auch zum Speichern einiger Daten verwenden. Wie im obigen Beispiel können wir einen solchen Skriptblock direkt in die AJAX-Anforderungsseite einfügen: <script>window.userData = { " name="Tom"};</script>, wenn $( "#MyDiv ").html(data) in der AJAX-Request-Callback-Funktion ausgeführt wird, ist diese Variable sofort im Fenster verfügbar. Wenn Sie die erste Methode übernehmen, ist eval(document.getElementById("UserData").innerHTML) unvermeidlich. Wenn eine große Datenmenge im Fensterobjekt gespeichert ist, müssen die Daten rechtzeitig manuell bereinigt werden, wenn sie nicht verwendet werden. Sie verschwinden erst, wenn der Browser aktualisiert oder neu gestartet wird, was den Speicheraufwand erhöht.

16. Ignorieren Sie niemals die Arbeit zur Codeoptimierung

Codeoptimierung ist ein Ziel, das jeder Programmierer anstreben sollte, und es sollte auch das ewige Streben eines Programmierers sein. Wenn Sie Code schreiben, sollten Sie nicht überstürzen, wie Sie den Code schreiben, damit die Ausführungseffizienz des Codes besser ist.

Zum Beispiel: Angenommen, es gibt eine Verknüpfungsmethode functoin $(elemID){return document.getElementById(elemID)}, die getElementById definiert, dann könnte jemand solchen Code schreiben: $("MyDiv").parentNode(. $("MyDiv")), tatsächlich werden hier zwei getElementById-DOM-Suchen durchgeführt. Es wäre besser, wenn es wie folgt geändert würde: var myDiv = $("MyDiv"); myDiv.parentNode.removeChild(myDiv). Glücklicherweise ist die DOM-Suche von getElementById relativ schnell. Wenn Sie sie in getElementsByTagName ändern, sollten Sie der Optimierung mehr Aufmerksamkeit schenken. Das jQuery-Entwicklungsteam hat außerdem alle daran erinnert, auf dieses Problem zu achten.

Natürlich erfordern die Fähigkeiten zur Codeoptimierung auch eine kontinuierliche Anhäufung durch den Einzelnen. Ein Freund erzählte mir einmal, dass er beim Schreiben des Website-Backend-Codes nie über eine Optimierung nachdenken musste, weil seine Website einen Xeon-Quad-Core-Server verwendete.

17. In der Lage sein, Planungsdokumente zu analysieren und objektorientierte Methoden zu verwenden, um Schnittstellen zu definieren und Code zu organisieren

Diese Fähigkeit ist für jeden Programmierer sehr wichtig und bestimmt auch einen wichtigen Punkt Faktor für das Niveau der Programmierer. Sie können als ausgezeichneter Programmierer gelten, wenn Sie die Anforderungen verfeinern und in verschiedene Klassen abstrahieren können und dann den Code in geordneter Weise schreiben können, sodass die Codestruktur klar, gut lesbar, leicht zu warten und nicht zu prozedural und chaotisch ist .

Oben erfahren Sie, wie Sie standardisierten JavaScript-Code schreiben. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).