Zusammenfassung der für die Front-End-Entwicklung erforderlichen allgemeinen Toolfunktionen

Zusammenfassung der für die Front-End-Entwicklung erforderlichen allgemeinen Toolfunktionen

1. Zeitformatierung und andere Methoden

Es wird empfohlen, die Bibliotheksdatei moment.js zu verwenden

2. Verwendung von Vorlagen, Schleifen, MAP und anderen Methoden

Methoden von underscode.js

3. Serialisieren Sie das Formular in JSON


Code kopieren
Der Code lautet wie folgt:

$.fn.serializeJson = Funktion() {
var serializeObj = {};
var array = this.serializeArray();
var str = this.serialize();
$(Array).jedes(Funktion() {
wenn (serializeObj[dieser.name]) {
wenn ($.isArray(serializeObj[this.name])) {
serializeObj[dieser.Name].push(dieser.Wert);
} anders {
serializeObj[dieser.name] = [serializeObj[dieser.name], dieser.wert];
}
} anders {
serializeObj[dieser.Name] = dieser.Wert;
}
});
SerializeObj zurückgeben;
};

4. String-Abfangen mittels ...-Füllung


Code kopieren
Der Code lautet wie folgt:

String.prototype.strcut = Funktion(Zahl) {
var Länge = diese.Länge;
var tmp = this.substr(0, Zahl);
wenn (diese.Länge > Zahl) {
tmp += "…";
}
temporär zurückgeben;
}

5. Das Zeitformat ist xxxx Tage, xxx Minuten her, Datum


Code kopieren
Der Code lautet wie folgt:

Datum.Prototyp.Format = Funktion(fmt, aktuell) {
wenn (aktuell) {
var diff = aktuell - this.getTime();
wenn (Diff. < 5 * 60 * 1000) {
kehre "gerade jetzt" zurück;
}
wenn (Diff. < 60 * 60 * 1000) {
return (Math.floor(diff / (60 * 1000))) + "vor Minuten";
}
wenn (Diff. < 24 * 60 * 60 * 1000) {
return (Math.floor(diff / (60 * 60 * 1000))) + "vor Stunden";
}
wenn (Diff. < 30 * 24 * 60 * 60 * 1000) {
return (Math.floor(diff / (24 * 60 * 60 * 1000))) + "vor Tagen";
}
wenn (Diff. < 12 * 30 * 24 * 60 * 60 * 1000) {
return (Math.floor(diff / (30 * 24 * 60 * 60 * 1000))) + "vor einem Monat";
}
wenn (Diff. > 12 * 30 * 24 * 60 * 60 * 1000) {
return (Math.floor(diff / (12 * 30 * 24 * 60 * 60 * 1000))) + "vor Jahren";
}
}
var o = {
"Y+": this.getFullYear(), //Monat
"M+": this.getMonth() + 1, //Monat
"d+": this.getDate(), //Tag
"h+": this.getHours(), // Stunden
"m+": this.getMinutes(), // Punkte
"s+": this.getSeconds(), // Sekunden
"q+": Math.floor((this.getMonth() + 3) / 3), //Quartal
"S": this.getMilliseconds() // Millisekunden
};
wenn (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
für (var k in o)
wenn (neuer RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
fmt zurückgeben;
};

6. URLs parsen


Code kopieren
Der Code lautet wie folgt:

Funktion parseUrl() {
var arr = location.search.split('?')[1].split('&');
var Parameter = {};
für (var i = 0, l = arr.length; i < l; i++) {
var param = arr[i].split('=');
Parameter[Parameter[0]] = Parameter[1];
}
Rückgabeparameter;
}

7. Parameter abrufen


Code kopieren
Der Code lautet wie folgt:

Funktion getParameterByName(Name) {
name = name.ersetzen(/[\[]/, "\\[").ersetzen(/[\]]/, "\\]");
var regex = neuer RegExp("[\\?&]" + name + "=([^&#]*)"),
Ergebnisse = regex.exec(Standort.Suche);
Ergebnisse zurückgeben === null ? "" : decodeURIComponent(Ergebnisse[1].replace(/\+/g, " "));
}

8. Durch Funktionsdrosselung werden häufige Ereignisauslöser seltener ausgeführt, um die Leistung zu verbessern, beispielsweise bei Echtzeitsuchfunktionen. Die Verwendungsmethode ist, dass fn die Ereignisantwortfunktion ist und delay die Intervallzeit ist. Rufen Sie throttle(fn, delay) auf, um eine neue Funktion an das Ereignis zurückzugeben.


Code kopieren
Der Code lautet wie folgt:

Funktion Drosselklappe(fn, Verzögerung) {
var Timer = null;
return Funktion() {
var Kontext = dies,
args = Argumente;
Zeitüberschreitung löschen(Timer);
Timer = setzeTimeout(Funktion() {
fn.apply(Kontext, Argumente);
}, Verzögerung);
};
}

9. Verhindern Sie das mehrfache Absenden des Formulars, indem Sie wie in 9 eine neue Funktion zurückgeben


Code kopieren
Der Code lautet wie folgt:

/**
* Mehrfachklicks verhindern
*
* Rückruf, der aufgerufen wird, wenn fn abgeschlossen ist
* Funktion fn(Ereignis,Ende) {
* (typeof end === "function") && end(); // Vorgang abgeschlossen
* }
*/Funktion keinRepeateTap(fn) {
var $obj;
Rückgabefunktion (Ereignis) {
$obj = $(dies);
wenn ($obj.data("wird geladen") === "true") {
zurückkehren;
}
$obj.data("wird geladen", "true").addClass('wird geladen');
fn.call(dieses, Ereignis, Funktion Ende() {
$obj.data("wird geladen", "").removeClass('wird geladen');
zurückkehren;
});
}
}

Beispiel 9


Code kopieren
Der Code lautet wie folgt:

// Ereignisse binden
$(container).on('klicken', '.btn-cancel', noRepeateTap(abbrechen));
//Ereignisantwortfunktion
Funktion abbrechen(Ereignis, Ende) {
event.preventDefault();
//Asynchrone Anfrage simulieren
setzeTimeout(Funktion(){
end(); // Sie müssen die Injektionsabschlussfunktion manuell aufrufen, um den Abschluss zu melden. Die Funktion fügt automatisch die Ladeklasse hinzu, um den Stil anzupassen, und entfernt sie nach Abschluss automatisch.
},5000)
}

<<:  Praktische Lösung für die Bereitstellung von Prometheus-Containern

>>:  SQL-Abfrage für Benutzer, die sich an mindestens n aufeinanderfolgenden Tagen angemeldet haben

Artikel empfehlen

Grundsätze und Nutzungsdetails für MySQL 8.0-Benutzer- und Rollenverwaltung

Dieser Artikel beschreibt die Benutzer- und Rolle...

Dreißig HTML-Codierungsrichtlinien für Anfänger

1. HTML-Tags immer schließen Im Quellcode der vor...

8 JS reduziert Verwendungsbeispiele und reduzierte Betriebsmethoden

reduce Methode ist eine Array-Iterationsmethode. ...

So installieren und ändern Sie das Anfangskennwort von mysql5.7.18

Informationen zur Centos-Installation von MySQL f...

Analyse der MySQL-Absturzwiederherstellung basierend auf Redo Log und Undo Log

Inhaltsverzeichnis MySQL-Absturzwiederherstellung...

CSS, um horizontale Linien auf beiden Seiten des mittleren Textes zu erreichen

1. Die Eigenschaft „vertical-align“ erzielt folge...

Detaillierte Erklärung des Sidecar-Modus in Docker Compose

Inhaltsverzeichnis Was ist Docker Compose Anforde...

Zusammenfassung der Wissenspunkte zum CSS-Frontend (unbedingt lesen)

1. Das Konzept von CSS: (Cascading Style Sheet) V...

So passen Sie mit CSS einen schöneren Link-Prompt-Effekt an

Vorschlag: Das möglichst häufige handschriftliche ...

Praktische Aufzeichnung der MySQL 5.6 Master-Slave-Fehlerberichterstattung

1. Problemsymptome Version: MySQL 5.6, unter Verw...

Javascript realisiert 10-Sekunden-Countdown zur Bezahlung

In diesem Artikel wird der spezifische Code von J...