Detaillierte Erläuterung alternativer Schreibmethoden von JavaScript_Javascript-Kenntnissen-js-Tutorial-php.cn

Detaillierte Erläuterung alternativer Schreibmethoden von JavaScript_Javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 15:06:05

Original

1383 Leute haben es durchsucht

JavaScript ist eine Skriptsprache für das Internet!

JavaScript wird von Millionen von Webseiten verwendet, um das Design zu verbessern, Formulare zu validieren, Browser zu erkennen, Cookies zu erstellen und mehr.

JavaScript ist die beliebteste Skriptsprache im Internet.

JavaScript ist einfach zu verwenden! Du wirst es lieben!

JavaScript ist eine interpretierte Skriptsprache mit flexibler Syntax, die es verschiedenen Personen ermöglicht, dieselbe Funktion auf viele verschiedene Arten zu schreiben. Wie organisiere ich JavaScript-Code, damit andere auf einen Blick erkennen können, dass Sie nicht einfach sind? Freuen Sie sich wirklich darauf, dass andere nach dem Lesen Ihres Codes ausrufen: „Damit Sie es immer noch so schreiben können“?

N Möglichkeiten, anonyme Funktionen zu schreiben

Die anonyme Funktion von JS ist eine selbstausführende Funktion ohne Angabe eines Funktionsnamens. Das Format ist wie folgt:

(function(){})();

Nach dem Login kopieren

Tatsächlich fügen wir in Projekten oft „;“ voran:

;function(){}();

Nach dem Login kopieren

Aufgrund der Syntax von JS kann das Semikolon weggelassen werden, dieser Mechanismus kann jedoch auch zu unerwarteten Fehlern führen. Um Syntaxfehler zu vermeiden, die durch das Zusammenführen und Komprimieren des Codes in einer Datei entstehen, nachdem er online geschaltet wurde, kann das Hinzufügen von „;“ unbekannte Fehler vermeiden.

Aber manchmal sehen wir anonyme Funktionen, die in den Bibliotheken oder Plug-Ins anderer Leute so geschrieben sind:

+function(){}();

Nach dem Login kopieren

„+“ ist hier der Operator, und der Operator hat eine extrem hohe Priorität, sodass die Funktionsdeklaration rechts plus die Klammern (eigentlich die Art und Weise, wie die Funktion geschrieben wird) direkt ausgeführt werden. Tatsächlich kann ihm nicht nur ein „+“-Zeichen vorangestellt werden, sondern es können auch Operatoren wie „-“, „!“, „~“ und „++“ verwendet werden. Dies ist nur eine erweiterte Einführung. Die spezifische Schreibmethode hängt von den einheitlichen Standards des Teams ab.

Math.ceil() und Math.floor-Rundung aufgeben

Vielleicht haben Sie diese beiden Symbole ~~ und |0 in anderen Codes gesehen, schauen Sie sich einfach die laufenden Ergebnisse an:

>> var a1 = 1.23
>> ~~a1
1
>> var a2 = 2.345
>> a2|0
2
>> var a3 = -3.45
>> ~~a3
-3
>> var a4 = -4.5
>> a4|0
-4

Nach dem Login kopieren

Bitte beachten Sie, dass diese Schreibweise nicht originell ist, sondern lediglich zitiert wird, um diese alternative Schreibweise zu analysieren und zu erklären. Kurz erklärt: ~ ist ein bitweiser Negationsoperator, der eine Gleitkommazahl in eine Ganzzahl umwandeln kann, indem alle Ziffern nach dem Dezimalpunkt verworfen werden. Positive ganze Zahlen können in vorzeichenlose Hexadezimalwerte umgewandelt werden. Negieren Sie es dann erneut (~~), um die ursprüngliche Ganzzahl zu erhalten. Wenn Sie so eigensinnig sind und die Methode nicht anpassen möchten, denken Sie dann, dass es sich um eine Optimierung handelt?

Hinweis: Wenn Sie strikte Rundungsoperationen durchführen müssen, sollten Sie diese Methode mit Vorsicht verwenden, dann müssen Sie trotzdem die Math-Funktion verwenden.

wenn und sonst sind nicht die einzigen

Die bedingte Beurteilung mit if-else ist eine sehr klare Logik, sieht jedoch nicht sehr prägnant aus, wenn die verarbeitete Datenmenge nicht groß ist:

if (a===1) { //此处强烈建议用严格等于符号“===”，不会进行类型转换
a=2
} else if (a===3) {
a=4
} else {
a=5
}

Nach dem Login kopieren

Schauen Sie sich die Verwendung von || und && an, um den Code zu verschlanken:

((a===1)&&(true,a=2))||((a===3)&&(true,a=4))||(a=5)

Nach dem Login kopieren

Erledigen Sie es in nur einem Schritt und verlieren Sie erfolgreich Gewicht. ||. und &&, das Prinzip ist natürlich nicht leicht zu verstehen. Sie können es weiterhin durch den ternären Operator ersetzen

(a===1 )&#63; a=2:( (a===3) &#63; (a=4) : (a=5) )

Nach dem Login kopieren

Diese Schreibweise scheint eine vereinfachte Struktur zu haben, aber es wird für andere etwas schwierig sein, Ihren Code zu lesen.

Verwenden Sie toString, um die lästige String-Splicing-DOM-Struktur zu ersetzen

Wenn Sie eine DOM-Struktur dynamisch generieren möchten, implementieren wir diese im Allgemeinen wie folgt:

var template = "<div>" 
+ "<h2>{title}</h2>"
+ "<div class='content' yAttr=''>{content}</div>"
+ "</div>"

Nach dem Login kopieren

Wenn Sie verschiedene Attribute und Parameter hinzufügen, werden die großen und kleinen Anführungszeichen verwechselt und es ist einfach, Fehler zu melden. ES6 bietet jedoch eine Vorlagenzeichenfolge, die uns bei der Lösung dieses Problems hilft. Sie können es wie folgt schreiben:

var template = <div> 
<h2>{title}</h2> 
<div class='content' yAttr=''>{content}</div> 
</div>

Nach dem Login kopieren

Aber das Problem ist, dass ES6 noch nicht offiziell angekommen ist ... Keine Angst, function.toString kann die Peinlichkeit lösen, wenn wir im Dunkeln tappen:

var rComment = /\/\*([\s\S]*&#63;)\*\//;
// multiply string 
function ms(fn){ 
return fn.toString().match(rComment)[1]
}; 
ms(function(){/* 
<div> 
<h2>{title}</h2> 
<div class='content' yAttr=''>{content}</div> 
</div> */
})

Nach dem Login kopieren

Die Ausgabe hier ist die gleiche wie bei der vorherigen String-Ausgabe. Front-End-Programmierer müssen nur auf ihre eigene DOM-Struktur achten.

AMD-Modulunterstützung hinzufügen, Eingabeaufforderungscode-B-Feld

Deklarieren Sie die AMD-Modulspezifikation (Asynchronous Module Definition) für den von Ihnen geschriebenen Code, damit andere Ihr Modul direkt über die AMD-Spezifikation laden können. Wenn andere Ihr Modul nicht über die Spezifikation laden, können Sie auch ein reguläres Global zurückgeben Objekt anmutig. Werfen wir einen Blick darauf, wie jQueryUI geschrieben ist:

(function( factory ) { 
if ( typeof define === "function" && define.amd ) { 
// AMD模式。且依赖"jQuery"这个插件 
define( [ "jquery" ], factory ); } 
else { 
// 浏览器全局模式 
factory( jQuery ); 
} 
}(function( $ ) { 
// 这里放模块代码 
return $.widget; 
}));

Nach dem Login kopieren

Ändern Sie die AMD-Modulstruktur, um Ihren Code für das browserseitige Laden von Skriptabhängigkeiten besser geeignet zu machen. Schreiben Sie Code in diesem Format, um sicherzustellen, dass andere beim Betrachten des Codes erkennen, dass Sie ein professioneller Entwickler sind.

Optimale Methode erben

Die Flexibilität von JavaScript umfasst mehr als zehn große und kleine Vererbungsmethoden. Jede Schreibmethode hat unterschiedliche Vor- und Nachteile. Nehmen wir als Beispiel eine häufig verwendete Vererbungsmethode:

function Parent() {}
function Child() {}
Child.prototype = Parent.prototype
Child.prototype.constructor = Child ；

Nach dem Login kopieren

这种这种方法实际上是将Child.prototype和Parent.prototype中保存的指针指向了同一个对象，所以子对象原型中扩展一些属性以便之后继续继承的话，父对象的原型也会被改写。所以为了解决这个问题，尝试借用一个临时构造器的写法：

function Empty(){}
Empty.prototype = Parent.prototype;
Child.prototype = new Empty();
Child.prototype.constructor = Child;

Nach dem Login kopieren

这样父对象的自身属性和原型方法得到保护。“最优”有点夸大，但是是相比较而言的。相信每个人都有自己的写法，还有借用call和apply实现属性继承的优缺点，篇幅有限不一一介绍。

总结

上述所有的JavaScript的另类写法，一些是为了程序易懂或者效率提高的语法糖，这样的做法是比较可取的，比如前面所说的省略if-else的做法。一些是为了提升我们代码的兼容性和性能，比如AMD和继承的方式。……本人菜鸟一枚，上述内容肯定还有不全和没解释透彻的地方以后再补充。

以上内容是针对JavaScript的另类写法的相关介绍，希望对大家有所帮助！