Zusammenfassung der JavaScript-Projektoptimierung

Vor einiger Zeit wurde der JavaScript-Code der bestehenden Projekte des Unternehmens optimiert. Dieser Artikel ist eine Zusammenfassung der Optimierungsarbeiten und wird mit allen geteilt. Natürlich ist meine Optimierungsmethode möglicherweise nicht optimal oder es stimmt etwas nicht. Bitte klären Sie mich auf.

Die Zusammenfassung der JavaScript-Optimierung ist in die folgenden Punkte unterteilt

Vergleich vor und nach der Optimierung

Vor der Optimierung

Nach der Optimierung

Codeverwirrung , gleiche Funktion Die Funktion erscheint wiederholt an mehreren Stellen. Wenn Sie die Implementierung ändern müssen, müssen Sie alle Orte finden. Modularisierung, Extraktion öffentlicher Schnittstellen und deren Organisation in Bibliotheken, mit klarer Struktur, bequemer Code-Wiederverwendung und der Möglichkeit, variable Verschmutzungsprobleme zu verhindern.

JavaScript-Dateien sind nicht komprimiert. Das Laden verbraucht Netzwerkzeit und blockiert das Rendern von JavaScript-Dateien mit UglifyJS:

● Die Größe ist relativ klein Die Netzwerkladezeit wird optimiert

● Durch die Komprimierung wird der Code verschleiert und bis zu einem gewissen Grad geschützt

Bei Verwendung müssen mehrere separate JavaScript-Dateien geladen werden, was die Anzahl der HTTP-Anfragen erhöht und Reduziert die Leistung. Das Zusammenführen und Komprimieren öffentlicher Bibliotheken verringert die Größe und reduziert gleichzeitig die Anzahl der HTTP-Anfragen.

Es fehlt an Dokumentation (was nachfolgende Entwickler im Unklaren über vorhandene Funktionen macht, was in gewissem Maße dazu führt, dass dieselben Funktionen wiederholt an mehreren Stellen angezeigt werden). bereits erwähnt) Alle Klassen, Funktionen und Attribute einer öffentlichen Bibliothek verfügen über eine Dokumentation

● Modularisierung (Klassenprogrammierung): Klarer Code, wirksame Verhinderung variabler Verschmutzungsprobleme, Wiederverwendung von Code für einfache Erweiterung usw.; 🎜>● JavaScript-Komprimierungsverwirrung: Reduzierte Größe optimiert die Ladezeit und verschleiert den geschützten Code

● JavaScript-Dateizusammenführung: reduziert den Zeitaufwand für die Optimierung von HTTP-Anfragen und verbessert die Leistung; Dokumentation: erleichtert die Nutzung öffentlicher Bibliotheken und erleichtert das Auffinden von Schnittstellen.

Modularisierung (Klassenprogrammierung)

Für statische Klassen ist die direkte Verwendung von JavaScript ausreichend, aber um Instanziierungen zu erstellen, sind Klassen erforderlich, die von Klassikern erben etwas Arbeit. Da JavaScript eine prototypbasierte Programmiersprache ist und keine Implementierung integrierter Klassen enthält (es hat keine Zugriffskontrollzeichen, es verfügt nicht über das Schlüsselwort class zum Definieren einer Klasse, es unterstützt weder Extend noch Doppelpunkt für die Vererbung). Es ist sinnlos, virtuelle Funktionen (virtuell usw.) zu unterstützen, aber wir können klassische Klassen problemlos über JavaScript simulieren.

Statische Klasse

Entsprechend den Eigenschaften der öffentlichen Schnittstelle von Baby JS müssen sie nicht instanziiert werden, daher wird diese Methode zur Optimierung verwendet. Im Folgenden wird PetConfigParser als Beispiel verwendet, um die Implementierungsmethode vorzustellen:

var PetConfigParser;

if (!PetConfigParser) {

PetConfigParser = {} ;

}

(function () {

//private Variablen, Funktionen

/**

* Alle Baby-Konfigurationswörterbücher, mit [cate * 10000 + (lvl - 1) * 10 + dex - 1] als Schlüssel

* @attribute petDic

* @ Geben Sie {Object}

* @private

ein* /

var petDic = null; //Baby Dictionary

/**

* Erstellen Sie ein Objektwörterbuch basierend auf __pet_config und verwenden Sie die Kombination cate, dex, lvl als Schlüssel

* @method buildPetDic

* @private

* @return {void}

*/

function buildPetDic() {

petDic = new Object();

for (var item in __pet_config) {

var lvl = parseInt(__pet_config[item]['lvl']);

var dex = parseInt(__pet_config[item]['dex']);

var cate = parseInt(__pet_config[item]['cate']);

var key = cate * 10000 + (lvl - 1) * 10 + dex;

petDic[key] = __pet_config[item];

}

}

//öffentliche Schnittstelle

/**

* Basierend auf der Baby-ID lesen Sie die entsprechenden Babyinformationen in __pet_config

* @method getPetById

* @param {String/int} petId Baby-ID

* @return {Object} Alle statischen Informationen des Haustierbabys, wie zum Beispiel {id: „300003289“, lvl: „1“, dex: „2“, Preis: „200“, Leben: „2592000“, cate: „3“, Name: „Flying Angel Level 1 Proficient 2“, Intro: „“, Skill: „Amulet“, Skill1_Prob: „30“, Skill2_Prob: „0“}

*/

if (typeof PetConfigParser.getPetById !== 'function') {

PetConfigParser.getPetById = function (petId) {

var pet = ("undefiniert" == typeof (__pet_config)) ? null : __pet_config["pet_" + petId];

                                                                                                                                                Funktion zum Erstellen privater Bereiche, auf die nur intern zugegriffen werden kann. Zusammenfassend ist der obige Prozess in die folgenden Schritte unterteilt:

1) Definieren Sie eine globale Variable (var PetConfigParser), achten Sie auf den Unterschied zwischen dem ersten Buchstaben der Variablen und gewöhnlichen Variablen; 🎜>2) Erstellen Sie dann eine anonyme Funktion und führen Sie ((function () {/*xxxx*/ })(); aus. Erstellen Sie lokale Variablen und Funktionen innerhalb der anonymen Funktion, auf die nur im aktuellen Bereich zugegriffen werden kann 🎜>

3 ) Auf die globale Variable (var PetConfigParser) kann von überall zugegriffen werden. Fügen Sie eine statische Funktion hinzu, indem Sie PetConfigParser innerhalb der anonymen Funktion ausführen.

Verwendungsbeispiel:

$(function () {

DialogManager.init();

                                                                                                                                                                             $('#showDialog').click(function () { >

return. false;

});

$('#cofirmBtn').click( Function () {

Dialogmanager.hide ();

Rückgabe falsch;

}} ; Methode

● Gemischte Methode aus Konstruktor + Prototyp

Konstruktormethode

Der Konstruktor wird verwendet, um die Eigenschaften des Instanzobjekts und -werts zu initialisieren. Jede JavaScript-Funktion kann als Konstruktor verwendet werden, und Konstruktoren muss der Operator „new“ vorangestellt werden, um neue Instanzen zu erstellen.

var Person = function (name) {

this.name = name;

this.sayName = function(){

Alert(this.name);

};

}

//Instantiierung

var tyler = neue Person ("tylerzhu");

var saylor = new Person("saylorzhu");

tyler.sayName();

saylor.sayName();

//Überprüfen Sie die Instanz

alert(tyler instanceof Person);

Ist die Konstruktormethode mit traditionellen objektorientierten Sprachen vertraut? Es ist nur so, dass das Schlüsselwort class durch function ersetzt wird.

Hinweis: New nicht weglassen, sonst Person("tylerzhu") //==>undefiniert. Wenn der Konstruktor mit dem Schlüsselwort new aufgerufen wird, ändert sich der Ausführungskontext vom globalen Objekt (Fenster) in einen leeren Kontext, der die neu generierte Instanz darstellt. Daher verweist der Schlüssel this auf die aktuell erstellte Instanz. Wenn new weggelassen wird und kein Kontextwechsel durchgeführt wird, wird der Name im globalen Objekt gesucht. Wenn er nicht gefunden wird, wird ein globaler Variablenname erstellt und undefiniert zurückgegeben.

Prototyp-Methode

Die Konstruktormethode ist einfach, es besteht jedoch das Problem der Speicherverschwendung. Im obigen Beispiel werden beispielsweise zwei Objekte, Tyler und Saylor, instanziiert. Oberflächlich betrachtet scheint es kein Problem zu geben, aber tatsächlich hat die Methode sayName() für jedes Instanzobjekt genau den gleichen Inhalt Sobald eine Instanz generiert wird, muss sie wiederholt werden. Der Inhalt der Anwendung.

alert(tyler. sayName == saylor. sayName) gibt false aus! ! !

Jeder Konstruktor in Javascript hat ein Prototypattribut, das auf ein anderes Objekt verweist. Alle Eigenschaften und Methoden dieses Objekts werden von Instanzen des Konstruktors gemeinsam genutzt.

var Person = function (name) {

Person.prototype = name;

Person.prototype.sayName = function(){

Alert(this.name);

}

}

//Instantiation

var tyler = new Person("tylerzhu");

var saylor = new Person("saylorzhu");

tyler.sayName();

saylor.sayName();

//Instanz prüfen

alert(tyler instanceof Person);

Zu diesem Zeitpunkt sind die sayName-Methoden der Tyler- und Saylor-Instanzen alle gleich Speicheradresse (Zeigt auf das Prototypobjekt), sodass die Prototypmethode Speicher spart.

Aber wenn Sie sich die Ausgabe von tyler.sayName();saylor.sayName(); ansehen, werden Sie das Problem sehen – beide geben „saylorzhu“ aus. Da alle Eigenschaften des Prototyps gemeinsam genutzt werden, ändern sich die anderen entsprechend, solange sich eine Instanz ändert, sodass das instanziierte Objekt Saylor Tyler abdeckt.

Konstruktor + Prototyp-Hybridmethode

Die Konstruktormethode kann jedem Objekt derselben Klasse unterschiedlichen Speicher zuweisen, was sich sehr gut zum Festlegen von Eigenschaften beim Schreiben von Klassen eignet. Beim Festlegen von Methoden müssen wir jedoch zulassen, dass verschiedene Objekte derselben Klasse denselben Speicher teilen. Es ist am besten, Methoden prototypisch zu schreiben. Daher müssen Sie beim Schreiben einer Klasse die Konstruktormethode und die Prototypmethode mischen (die von vielen Klassenbibliotheken bereitgestellten Methoden zum Erstellen von Klassen oder die Klassenschreibmethode des Frameworks sind im Wesentlichen: Konstruktor + Prototyp).

var Person = function (name) {

Person.prototype = name;

Person.prototype.sayName = function(){

Alert(this.name);

}

}

//Instantiation

var tyler = new Person("tylerzhu");

var saylor = new Person("saylorzhu");

tyler.sayName();

saylor.sayName();

//Instanz prüfen

alert(tyler instanceof Person);

Auf diese Weise können über den Konstruktor Personen mit unterschiedlichen Namen erstellt werden, und die Objektinstanzen teilen sich auch den sayName Methode, nein Verursacht Speicherverschwendung.

JavaScript-Komprimierung/Zusammenführung

Die Bedeutung der Verschleierung der JavaScript-Codekomprimierung: Einfach ausgedrückt besteht sie darin, die Größe von JS-Dateien zu reduzieren, überflüssige Kommentare, Zeilenumbrüche und Einrückungen usw. zu entfernen dass es schneller heruntergeladen werden kann.

Es gibt viele JavaScript-Komprimierungstools. Ich empfehle die Verwendung von UglifyJS, dem derzeit von jQuery verwendeten Tool (jQuery hat zuvor auch verschiedene Komprimierungstools wie Packer verwendet), da die Komprimierungsleistung sehr gut ist.

„Als jQuery 1.5 veröffentlicht wurde, sagte John Resig, dass das verwendete Codeoptimierungsprogramm von Google Closure auf UglifyJS umgestellt wurde und der Komprimierungseffekt des neuen Tools sehr zufriedenstellend ist“