JavaScript wird immer beliebter. Es ist die erste Wahl für die Front-End-Entwicklung geworden. Mit NodeJs, die auf der JavaScript-Sprache basieren, können wir auch leistungsstarke Back-End-Dienste entwickeln. Ich habe sogar gesehen, wie JavaScript im Bereich der Hardwareprogrammierung erschien. JavaScript entwickelt sich allmählich zu einer Allround-Entwicklungssprache.
Es ist jedoch nicht einfach, JavaScript gut zu verwenden. Zusätzlich zur Beherrschung der Syntax und des Wissens, wie man hochwertige Code schreibt, müssen Sie auch verstehen, wie Sie die Bedürfnisse szenarien lösen können, die in fast jedem Projekt auftreten, z. System ist aufgebläht und wirkt sich auch auf die Leistung des Systems aus. Mein Ansatz ist es, diese gemeinsamen JavaScript -Snippets zu sammeln und zu verwenden und sie zuerst zu verwenden, wenn dies erforderlich ist. Nachfolgend sind 10 Teile praktischer JavaScript -Code aufgeführt, die ich gesammelt habe. Basierend auf ihnen können Sie auch leistungsstärkere JS-Plug-Ins oder funktionale Funktionen erstellen.
1. Stellen Sie fest, ob das Datum gültig ist
Die in JavaScript enthaltene Datumsfunktion ist immer noch zu einfach und es ist schwierig, den Bedürfnissen des Parsens und der Beurteilung verschiedener Datumsformate in realen Projekten zu erfüllen. JQuery hat auch Bibliotheken von Drittanbietern, um die Verarbeitung von Datum einfach zu gestalten, aber manchmal benötigen Sie möglicherweise nur eine sehr einfache Funktion, ohne eine riesige Bibliothek von Drittanbietern vorzustellen. Zu diesem Zeitpunkt können Sie den folgenden Datumsprüfungscode verwenden, mit dem Sie das Datumsformat anpassen und die Gültigkeit des Datums überprüfen können.
Funktion isvaliddate (Wert, userFormat) {// Standardformat festlegen, wenn das Format nicht bereitgestellt wird userFormat = userFormat || 'mm/dd/jyyy'; // Finden Sie einen kundenspezifischen Trennzeichen, indem Sie // Monat und Jahr ausschließen Var Delimiter = /…^mdy wob // Erstellen Sie ein Array mit Monat, Tag und Jahr // Daher wissen wir die Formatreihenfolge nach Index var theformat = userFormat.Split (Delimiter); // Array aus dem Benutzerdatum erstellen var thedate = value.split (Begrenzer); Funktion isdate (Datum, Format) {var m, d, y, i = 0, len = format.length, f; für (i; i <len; i ++) {f = format [i]; if (/m/.test(f)) m = Datum [i]; if (/d/.test(f)) d = Datum [i]; if (/y/.test(f)) y = Datum [i]; } return (m> 0 && m <13 && y && y.length === 4 && d> 0 && // prüfen Sie, ob es sich um einen gültigen Tag des Monats d <= (neues Datum (y, m, 0)). getDate ()); } return isdate (thedate, theformat);}Wie man verwendet:
Der folgende Anruf gibt falsch zurück, da es im November keine 31 Tage gibt
Isvaliddate ('DD-MM-yjyy', '31/11/2012 ')
2. Holen Sie sich die maximale Breite oder Höhe eines Satzes von Elementen
Die folgende Funktion ist sehr nützlich für Entwickler, die ein dynamisches Layout ausführen müssen.
var getmaxHeight = function ($ elms) {var maxHeight = 0; $ elms.each (function () {// In einigen Fällen möchten Sie vielleicht äußereheight () var height = $ (this) .height (); if (Höhe> maxHeight) {maxHeight = Höhe;}}); maxheight zurückgeben;};Wie man verwendet:
$ (Elemente) .Height (GetMaxHeight ($ (Elements)));
3. Text hervorheben
Es gibt viele Bibliotheken von JQuery von Drittanbietern, die die Funktion des Hervorhebens von Text implementieren können, aber ich bevorzuge es, den folgenden kleinen JavaScript-Code zu verwenden, um diese Funktion zu implementieren. Es ist sehr kurz und kann nach meinen Anforderungen flexibel modifiziert werden, und Sie können den hervorgehobenen Stil selbst definieren. Die folgenden beiden Funktionen können Ihnen helfen, Ihr eigenes Text -Herd -Plugin zu erstellen.
Funktion Highlight (Text, Wörter, Tag) {// Standard -Tag, wenn kein Tag bereitgestellt wird tag = tag || 'Spanne'; var i, len = words.length, re; für (i = 0; i <len; i ++) {// Global Regex, um alle Übereinstimmungen re = new Regexp (Wörter [i], 'G') hervorzuheben; if (re.Test (text)) {text = text.replace (re, '<' + tag + '> $ & </' + tag + '>'); }} return text;}Sie müssen auch Funktionen nicht hohe Funktionen benötigen:
Funktion Unhighlight (Text, Tag) {// Standard -Tag, wenn kein Tag bereitgestellt wird tag = tag || 'Spanne'; var re = new regexp ('(<'+tag+'.+?> | <//'+tag+'>)', 'g'); text zurückgeben.Replace (re, '');}Wie man verwendet:
$ ('P'). HTML (Highlight ($ ('P').4. Textbewegungseffekt
Manchmal möchten Sie einem Absatz Ihres Textes Bewegung hinzufügen, damit sich jedes Wort bewegen kann. Sie können den folgenden JQuery-Plug-in-Code verwenden, um diesen Effekt zu erzielen. Natürlich müssen Sie einen CSS3 -Übergangsstil kombinieren, um bessere Ergebnisse zu erzielen.
$ .fn.AnimateText = Funktion (Delay, klass) {var text = this.text (); var letters = text.split (''); return this.each (function () {var $ this = $ (this); $ this.html (text });Wie man verwendet:
$ ('P'). AnimateText (15, 'foo');
5. Elemente nacheinander ausblenden
Das folgende JQuery-Plug-In kann eine Gruppe von Elementen nacheinander gemäß der von Ihnen festgelegten Schrittlänge (Intervallzeit) ausblenden. Verwendet beim Nachladen von Listenelementen können gute Ergebnisse erzielen.
$ .fn.fadeall = function (ops) {var o = $ .extend ({delay: 500, // Verzögerung zwischen den Elementen Geschwindigkeit: 500, // Animationsgeschwindigkeit. var $ el = this; für (var i = 0, d = 0, l = $ el.Length; i <l; i ++, d+= o.delay) {$ el.eq (i) .delay (d) .fadein (O.Speed, o.eas); } return $ el;}Wie man verwendet:
$ (Elemente) .fadeAll ({Verzögerung: 300, Geschwindigkeit: 300});
6. Begrenzen Sie die Anzahl der Wörter im Text
Mit dem folgenden Skript können Sie den Text entsprechend der angegebenen Zeichenlänge abfangen. Wenn der Text abgefangen wird, folgt er automatisch von einer Ellipse.
Funktionsauszug (str, nWords) {var words = str.split (''); Words.SPLICE (nWords, Words.length-1); return words.join ('') + (Words.length! == str.split ('') .Length? '...': '');};7. Bestimmen Sie die aktuelle Anpassungsfähigkeit im entsprechenden Layout
Viele Designs haben Responsive Layouts übernommen, um sich an die Anzeige der Website oder die Anwendung auf verschiedenen Geräten anzupassen. Sie müssen häufig feststellen, in welcher Bildschirmanpassung Sie sich derzeit im Code befinden.
Funktion isbreakpoint (bp) {// Die Breakpoints, die Sie in Ihrem CSS var bps = [320, 480, 768, 1024] festlegen; var w = $ (Fenster) .width (); var min, max; für (var i = 0, l = bps.length; i <l; i ++) {if (bps [i] === bp) {min = bps [i-1] || 0; max = bps [i]; brechen; }} return w> min && w <= max;}Wie man verwendet:
if (isbreakpoint (320)) {// Breakpoint bei 320 oder weniger} if (isbreakpoint (480)) {// Breakpoint zwischen 320 und 480}…8. Globale Graf
In einigen Spiel- oder Werbeszenarien müssen Sie die Anzahl, mit der der Benutzer auf der aktuellen Seite auf eine Schaltfläche klickt, aufzeichnen. Zu diesem Zeitpunkt können Sie die .Data () -Funktion von JQuery verwenden, um sie zu handhaben:
$ (element) .data ('counter', 0) // Zähle bei Null .click (function () {var counter = $ (this) .data ('counter'); // GET $ (this) .data ('counter', counter + 1); // set // etwas anderes tun ...});9. Einbetten Sie Youku Video ein
Funktionsempflichter (link, ops) {var o = $ .extend ({width: 480, Höhe: 320, Params: ''}, ops); var id = //?v/=(/w+)/.exec(link) -A1]; return '<bett erlaubtedurchscreen = "true" id = "embedid" quality = "High" align = "Middle" erlaubte crtecessAccess = "immer" type = "application/x-shockwave-flash" src = "'+id+'?'+o.ops '";}Wie man verwendet:
Embredouku ('http://static.youku.com/v/swf/qplayer.swf', {'winnType = adshow & victureids = xmte3nzq0ntky & isautoPlay = false & isShowrelatedvideo = false'});10. Erstellen Sie ein dynamisches Menü oder eine Dropdown-Liste
In vielen Szenarien müssen wir Menüs, Dropdown-Listen oder dynamische Elemente erstellen oder Elemente listen. Das Folgende ist ein Stück des grundlegendsten Code, um die oben genannten Funktionen zu implementieren, und Sie können sie entsprechend entsprechend den tatsächlichen Bedürfnissen erweitern.
Funktion Makemenu (Elemente, Tags) {Tags = Tags || ['ul', 'li']; // Standard -Tags var parent = tags [0]; var child = Tags [1]; var item, value = ''; für (var i = 0, l = items.length; i <l; i ++) {item = items [i]; // separates Element und Wert, wenn der Wert vorhanden ist, wenn (/:/.test(Item)) {item = items [i] .Split (':') [0]; value = items [i] .Split (':') [1]; } // Das Element in Tagelemente einwickeln [i] = '<'+child+''+(value && 'value = "'+value+'' ')+'> '+// Wert hinzufügen, wenn das vorhandene Element+' </'+unter child+'> '; } return '<' + übergeordnet + '>' + items.join ('') + '</' + Eltern + '>';}Wie man verwendet:
// Dropdown Select MonthMakemenu (['Januar: Jan', 'Februar: Februar', 'März: Mar'], // Artikel: value ['Select', 'Option']); // Liste der Lebensmittelmaklermakemenu (['Karotten', ',', ', Tomatos', 'milch'], ['ul');
Das obige ist nur ein kleiner Teil dieser praktischen JavaScript -Code -Ausschnitte. Ich empfehle auch, dass Sie auf das Sammeln oder Schreiben solcher grundlegenden Code -Snippets achten. Sie können in vielen Projekten verwendet werden oder durch einige Änderungen vollständigere Funktionen bieten. Mit diesen Code -Snippets sparen Sie viel Entwicklungszeit.