Share
Lassen Sie uns heute einen praktischen Ansatz verfolgen. Wir werden in jQuery ein winziges Codefragment schreiben und es dann in mehrere verschiedene Bibliotheken portieren. Außerhalb dieses Blocks werden wir untersuchen, wie einige grundlegende, notwendige Funktionen in jeder dieser Bibliotheken implementiert werden. Klingt lustig? Lass uns eintauchen!
JavaScript-Frameworks sind ein Segen, wenn Sie viele Ideen haben, um funktionalen, sauberen Code zu erhalten. Mit der rasanten Zunahme von Webanwendungen mit AJAX-Technologie sind Frameworks wie jQuery notwendig, um die Zeit für die Implementierung der erforderlichen Funktionalität zu reduzieren. Und wenn man sich umschaut, sieht man jQuery this und jQuery, die andere Frameworks kaum oder gar nicht erwähnen. Tatsache ist, dass es eine Menge anderer Frameworks gibt, die genauso elegant sind wie jQuery. Heute werden wir uns zwei Frameworks ansehen, die das Schreiben von Code versprechen. Beachten Sie, dass ich die Wörter Library, Framework und Toolkit austauschbar verwende. Ich werde mich nicht mit Semantik beschäftigen und auch Sie sollten es nicht tun. Jede dieser Bibliotheken versucht verschiedene Dinge zu erreichen. Wir werden nur die Teile betrachten, bei denen sich ihre beabsichtigten Funktionalitäten überschneiden.
Außer für esoterische und / oder dedizierte Apps kann der JavaScript-Code der meisten Benutzer in Chunks unterteilt werden, die die folgenden Funktionen berücksichtigen:
Ein JavaScript-Entwickler stößt früher oder später auf dieses Problem: Sein ursprünglicher Code wird einfach nicht ausgeführt. Er hat den Code immer wieder debuggen lassen, jedoch ohne Erfolg. Das Problem ist, dass der Code nur oben auf der Seite platziert wird. Wenn das Skript ausgeführt wird, sind die Elemente, auf die er sich in seinem Code bezieht, im DOM nicht vorhanden, was zu diesen Fehlern führt.
Denken Sie daran, dass Skriptaufrufe synchron sind. Das heißt, wenn ein Browser ein Skript-Tag sieht, wird der Ladevorgang beendet, bis die Skripts geladen werden. Dies steht im krassen Gegensatz zu seinem allgemeinen Lademechanismus, bei dem andere Objekte häufig asynchron geladen werden.
Sie können dies immer umgehen, indem Sie den Code am unteren Rand der Seite platzieren. Sie wissen jedoch nie. Vor diesem Hintergrund stellen die meisten Bibliotheken eine DOM-fähige Funktion bereit, um sicherzustellen, dass der Code erst ausgeführt wird, nachdem das DOM zum Sperren und Laden bereit ist, aber bevor die Bilder vollständig geladen sind.
Mit rohem JavaScript würden Sie so etwas betrachten.
window.onload = someFunction;
Sie möchten offensichtlich auf bestimmte Elemente zugreifen und diese irgendwie manipulieren. Leider ist IE ziemlich wählerisch und kann Ihren Code beschädigen. Damit Entwickler besseren Code schreiben können, bietet jede Bibliothek eine Cross-Browser-Methode, mit der Sie auf ein bestimmtes Element zugreifen können. Die meisten Bibliotheken verwenden CSS-Stilselektoren, um ihre Zielelemente auf Null zu bringen, um die Lernkurve zu verkürzen und vor allem sauberer aussehender Code zu erzeugen.
Ohne Rahmen müssten Sie Folgendes tun:
Accentsconagua
var elem = document.getElementById ('header'); var io = document.getElementsByTagName ('input'); Sobald Sie das Element erhalten haben, möchten Sie natürlich eine Operation durchführen. Dazu gehört das Hinzufügen oder Entfernen einer Klasse, das Umschalten der Sichtbarkeit, das Ändern der Abmessungen, das Bearbeiten des Inhalts usw. Wie immer kann das Schreiben in rohem JavaScript sehr schmerzhaft sein. Jede dieser Bibliotheken bietet Wrapper-Funktionen, um alle oben genannten Aufgaben zu erledigen und vieles mehr.
Mit rohem JavaScript würde Ihr Code so aussehen:
document.getElementById ("title"). innerHTML = "title"; Häufig möchten Sie die Knoten im DOM direkt ändern. Möglicherweise möchten Sie ein neues Wrapper-Objekt erstellen, in das Sie Ihren letzten Twitter-Status einfügen möchten, oder Sie möchten ein Div-Element für eine E-Mail-Anwendung entfernen, die Sie gerade schreiben. In jedem dieser Fälle möchten Sie das DOM effizient bearbeiten, und alle diese Bibliotheken bieten Methoden, um dies auf saubere Weise zu tun.
Das Anhängen eines Elements würde mit rohem JS so viel Code erfordern.
var myElement = document.createElement ("Etwas Text"); document.all.myBody.appendChild (myElement); Ereignisse sind die Bausteine einer beliebigen Anwendung und einer der peskiereren Bestandteile des Cross-Browser-Skripts. Die Sache ist, W3C definiert eine Möglichkeit und IE macht seine eigene Sache. Darüber hinaus bieten alle diese Bibliotheken Möglichkeiten, sogar Handler mit bestimmten Ereignissen des Elements zu verknüpfen oder zu lösen.
Ereignisse in rohem JavaScript verbinden.
element.addEventListener ('click', doSomething, false) Natives JavaScript, das das XHR-Objekt verwendet, ist mühsam zu schreiben und zu debuggen. Damit Entwickler leichter Code schreiben können, abstrahiert jedes dieser Frameworks die langwierigen Details der Implementierung einer AJAX-Anforderung hinter einem einfachen Funktionsaufruf mit Methoden, die aufgerufen werden, wenn die Anforderung erfolgreich ist oder fehlschlägt.
Ich werde nicht einmal versuchen, etwas Code zu posten, um eine AJAX-Anfrage mit rohem JS zu machen. Stattdessen sollten Sie sich Jeffreys hervorragenden Screencast ansehen. In Kürze werden wir sehen, wie ein Framework Ihren Code drastisch reduziert.
Nichts Besonderes wirklich; Wir bauen eine einfache Demo. Das Markup sieht so aus:
Netto Tuts Dies ist ein Beispiel zufällig Text. Klicken Sie auf das Wort zufällig, um das DOM zu ändern, indem Sie ein neues Element erstellen und an den aktuellen Inhalt anhängen.
Wir haben einen Text innerhalb eines p-Elements. Wir haben das Wort zufällig In ein Span-Element mit der ID des Hauptauslösers eingeschlossen. Jedes Mal, wenn auf ein Element mit der ID des Haupttriggers geklickt wird, muss ein neues div-Element an das Absatzelement angehängt werden, das den Text "clicked" enthält. Diese einfache Demo behandelt alle grundlegenden Funktionsanforderungen, einschließlich Zugriff auf Elemente, das Verbinden von Ereignissen und Anhängen von Elementen mit Ausnahme der AJAX-Abstraktion, und lässt uns ein Gefühl für jede Bibliothek vermitteln.
Bevor wir uns die anderen Bibliotheken ansehen, schauen wir uns am besten an, wie wir mit jQuery jede dieser Bibliotheken ausführen können.
Ah, alles durchdringende jQuery. Es ist das Reden der Stadt unter Web-Entwicklern schon eine Weile, und das zu Recht. jQuery versucht nicht zu viele Dinge zu tun. Sie werden kein Dutzend plus Widgets finden, die mit dem Basis-Build oder Möglichkeiten zur Unterstützung von Klassen oder klassenbasierten Objekten gebündelt sind. jQuery konzentriert sich in erster Linie auf das DOM und ich denke, sie haben hervorragende Arbeit geleistet.
Wenn Ihre Arbeit hauptsächlich mit DOM zusammenhängt, ist jQuery der richtige Weg. Die Syntax gehört zu den einfachsten und oft fühlt es sich an, als würde man Pseudocode lesen als tatsächlichen, funktionierenden Code. Die Community ist groß und freundlich und es gibt eine Vielzahl von Plugins, die Sie für zusätzliche Funktionalität besuchen können. Außerdem gibt es die UI-Bibliothek, wenn Sie Ihrer Website einige allgemeine Widgets hinzufügen möchten.
Die Benutzerbasis von jQuery umfasst:
Sehr beeindruckend, wenn Sie mich fragen.
Nun wollen wir uns ansehen, wie wir mit jQuery die Zeit reduzieren können, die wir mit dem Programmieren verbringen, bevor wir uns die anderen Frameworks ansehen.
$ (document) .ready (function () // Ihr Zeug hier);
Beim Schreiben Ihres jQuery-Codes müssen Sie Ihren Code unbedingt in diesen Abschnitt einfügen. Hier fragen wir den Code, der ausgeführt werden soll, wenn das DOM zur Bearbeitung bereit ist. Sie können entweder einen Funktionsnamen übergeben oder einfach Ihren gesamten Code in eine anonyme Funktion schreiben, wie im obigen Beispiel.
var container = $ ("# main"); var posts = $ (". post"); var-Überschriften = $ ("h1"); Einfach wie es nur geht. Zuerst erstellen wir eine Variable, die einen Verweis auf den DOM-Knoten enthält, da wir nicht immer wieder danach suchen wollen. $ ist ein Alias für die jQuery Namespace. Wir übergeben die ID, die Klasse oder das Tag des Elements genauso wie Sie es tun würden, wenn Sie eine CSS-Deklaration schreiben. Das Übergeben von CSS-Selektoren funktioniert genauso wie erwartet. Beispiele wie die folgenden funktionieren auch.
$ ("span: has (a)"). doSomething (); $ ("ul li: nth-child (3)"). doSomething (); $ ("p: hidden"). doSomething (); $ ("div"). attr ("class", "angeklickt"); $ ("div"). html ("Hallo"); $ (" span "). addClass (" current "); Das Ändern der Attribute eines Elements, seines Inhalts oder der darin enthaltenen Klassen ist ziemlich trivial. Wir greifen einfach auf das erforderliche Element zu und rufen die erforderliche Funktion auf. Das attr Mit dieser Methode können wir ein bestimmtes Attribut eines Elements ändern html Mit dieser Methode können wir den HTML-Inhalt und die addClass Methode braucht keine Erklärung.
$ ("# post"). after ("Bemerkungen"); $ (" p "). wrap (""); $ (". comment "). anhängen ("Geschrieben von"); Das Hinzufügen von Elementen nach dem angegebenen Element, das Hinzufügen von Inhalten innerhalb eines Elements oder das Umschließen des übergebenen Elements mit einem anderen Element ist genauso einfach. Wir erhalten das Element und rufen dann die Funktion auf, die unseren Bedürfnissen am besten entspricht.
// Verwendung anonymer Funktionen $ ("# submit"). Bind ("click", function (e) // Ihr Code hier); // Übergeben eines Funktionsnamens $ ("# submit"). Bind ("click", evHandler); Das Anschließen von Ereignissen ist ähnlich einfach. Wir erhalten das Element und rufen dann die Bindefunktion auf. Das erste Argument ist der Ereignistyp und das zweite ist der Code, der ausgeführt wird, wenn das Ereignis ausgelöst wird. Sie können entweder den Namen der Funktion übergeben oder einfach eine anonyme Funktion erstellen und den gesamten Code darin einfügen.
$ .ajax (Typ: "GET", URL: "test.html", Erfolg: Funktion (xhr) // Code hier, Fehler: Funktion (xhr) // Code hier $ .ajax ( type: "POST", url: "test.php", success: function (xhr) // Code hier, error: function (xhr) // Code hier);
Sie benötigen nur 3 Leitungen, um einen AJAX-Aufruf mit Barebones durchzuführen. Geben Sie den Anfragetyp und die URL an und schon können Sie loslegen. Erfolgs- und Fehlerfunktionen können definiert werden, um festzulegen, was passiert, wenn deren Namensvetter auftritt.
Um die oben erwähnte gewünschte Funktionalität zu erreichen, würde Ihr jQuery-Code ungefähr so aussehen:
$ ("# maintrigger"). click (function () $ ("p"). after ("Angeklickt");); 3 Zeilen genügt. Wir wählen die notwendigen Elemente aus, rufen die click-Funktion auf, erstellen eine anonyme Funktion und hängen ein div-Element an. Das hört sich viel komplizierter an, als es tatsächlich ist.
Nun, da wir uns den jQuery-Code angesehen haben, können wir die anderen Bibliotheken untersuchen.
Prototyp ist der große Vater von JavaScript-Frameworks. Es bietet all die Feinheiten, die Sie von einem ausgereiften Rahmen erwarten würden, und fügt ein wenig mehr hinzu. Es bietet auch eine Reihe von Bibliotheksfunktionen, mit denen Sie gut abstrahierten objektorientierten Code schreiben können.
Die Benutzerbasis des Prototyps umfasst:
Viele bekannte Namen dort. Wie ich schon sagte, war Prototype lange Zeit das Gerüst der Wahl, bevor jQuery erschien.
Nun, da die Einführung abgeschlossen ist, wollen wir sehen, wie Sie mit Prototype besseres JavaScript schreiben können.
document.observe ("dom: loaded", function () // Ihr Code hier); Dies ist die Version von DOM von Prototyp. Es sieht auf den ersten Blick komisch aus, wenn Sie von jQuery kommen, aber es ist genauso einfach. Das beobachten Die Funktion wartet auf das übergebene Ereignis für die Lebensdauer des Dokuments. Wir übergeben einfach das notwendige Ereignis und hüllen den gesamten Code in eine anonyme Funktion ein, genau wie bei jQuery.
// Zugriff auf ein Element mit der ID von post $ ('post'); // Verwenden Sie die CSS-Auswahl-Engine $$ ('. Comment'); $ liefert einen Alias für die document.getElementById Methode. Sie können Elemente mit dem übergebenen ID-Wert finden.
Mit $$ können Sie stattdessen CSS-Selektoren verwenden. Es akzeptiert eine beliebige Anzahl von CSS-Selektoren als Argumente und gibt das bestimmte Element oder ein Array davon zurück. Genau wie bei der jQuery-Selector-Engine können Sie alle Arten von schändlichen CSS3-Selektoren verwenden, einschließlich untergeordneter Selektoren, Attributselektoren und sogar Pseudoklassen.
$ ('post'). addClassName ('author'); $ ('container'). getWidth (); $ ('post'). hide (); Prototype bietet eine Reihe leistungsfähiger Methoden, um mit dem zurückgegebenen Element zu arbeiten. Denken Sie daran, Sie müssen über das $ -Objekt darauf zugreifen. Das bedeutet, dass Sie zuerst die Referenz speichern müssen, bevor Sie das Element auf beliebige Weise bearbeiten können.
Das Manipulieren eines Elements ist so einfach wie das Erhalten eines Verweises auf das Element und das Aufrufen der erforderlichen Funktion. Sie können eine Menge Dinge tun, vom Setzen von Attributen bis zum Ausblenden des Elements.
$ ('post'). wrap ('div', 'id': 'container'); $ ('post'). update ('Irgendein zufälliger Text
'); $ ('post'). insert ('div', 'Irgendein zufälliger Text
'); Die erste Methode umschließt das übergebene Element mit einer Beschreibung der verschiedenen Elementeigenschaften des Prozesses. Die Aktualisierungsfunktionen ersetzen den Inhalt des übergebenen Elements durch den von uns gewünschten. Beim Einfügen werden vor oder nach dem Element Text oder HTML-Ausschnitte oben, unten oder unten eingefügt. Anstelle von separaten Methoden wie anhängen und nach dem Wie in jQuery müssen wir nur die Position angeben und sind fertig.
// Verwendung anonymer Funktionen $ (btn) .observe ('click', function (event) // Ihr Code hier); // Name der Funktion übergeben $ (btn) .observe ('click', doSomething); Wie ich schon sagte, die beobachten Mit dieser Funktion können Sie Ereignisse an ihre Ereignishandler anschließen. Wir erhalten zunächst einen Verweis auf das Element und rufen dann die beobachten Übergeben der Methode den Namen und die Funktion des Ereignisses als Parameter. Wenn Sie nicht dafür eine eigene Funktion erstellen möchten, können Sie immer eine anonyme Funktion erstellen und den gesamten Code dort einfügen.
new Ajax.Request ("test.html", Methode: 'get', onSuccess: function (transport) // Code hier, onFailure: function (transport) // Code hier); new Ajax.Request ("test.php", Methode: 'post', onSuccess: function (transport) // Irgendein Code hier, onFailure: Function (Transport) // Irgendein Code hier); Prototype bietet umfangreiche Wrapper-Funktionen zur Erstellung einer AJAX-Anfrage. Ich habe hier die niedrigsten AJAX POST- und GET-Anforderungen gezeigt. Für AJAX-Anforderungen gibt es eine Vielzahl weiterer spezieller Methoden, einschließlich eines automatischen Aktualisierungsprogramms.
Um die gewünschte Funktionalität zu erreichen, würde Ihr Code ungefähr so aussehen:
$ ("maintrigger"). beobachten ('click', Funktion (Ereignis) $ ("text"). insert ('Angeklickt'); ); Immer noch ein 3-Liner. Was wir tun, ähnelt dem jQuery-Code, die Syntax ist einfach anders. Wir nehmen das beobachten Funktion, um das Klickereignis an den Code anzuhängen, den wir in einer anonymen Funktion erstellt haben. Wir fügen nur Text ein, um anzuzeigen, dass der Prozess erfolgreich war.
Sie werden sehen, dass wir im Allgemeinen dasselbe tun wie jQuery, nur mit einer anderen Syntax und ein paar Unterschieden. Wenn Ihre Arbeit nicht auf DOM ausgerichtet ist und Sie geeignete Objekte benötigen, um Ihre Ideen richtig zu nutzen, ist Prototype der Rahmen für die Auswahl.
Mootools gibt nicht an, ein leicht zu erlernender Rahmen zu sein. Seien wir ehrlich, ihre Webseite sagt, es sei ein Webanwendungs-Framework für fortgeschrittene Webentwickler. Lass dich nicht täuschen. Es ist ein äußerst elegantes Framework, mit dem Sie äußerst stilvolles JavaScript erstellen können. Es konzentriert sich auf JavaScript als Ganzes und nicht nur auf das DOM. Aus diesem Grund bietet es eine Reihe von Funktionen, um Ihren Workflow zu beschleunigen und das DOM nach Möglichkeit zu erweitern. Und genau wie Prototype enthält es ein System zur Erstellung und Vererbung von Klassen, das die Benutzer, die aus C # oder Java stammen, mit JavaScript komfortabler machen soll.
Zu den Unternehmen, die MooTools verwenden, gehören:
Ein weiteres Framework mit einer sehr beeindruckenden Benutzerbasis.
Lassen Sie uns nun sehen, wie MooTools Ihnen das Leben als JavaScript-Entwickler erleichtert.
window.addEvent ('domready', function () // Ihr Code hier); Es mag kompliziert aussehen, aber nicht ärgern. Es sieht einfach anders aus. Wir fügen das domready-Ereignis der Fenster an die anonyme Funktion. Das Ereignis hinzufügen können wir ihren Handlern Ereignisse hinzufügen. MooTools definiert das vorhergehende Ereignis, das wir hier verwenden. Wie üblich verpacken wir unseren gesamten Code in eine anonyme Funktion und platzieren ihn darin. Dort! Das war nicht so schwer, oder??
// Verwenden Sie die $ -Funktion $ ('someElement'); // CSS-Selektoren verwenden $$ ("# main"); $$ (". post"); $$ ("h1"); Genau wie bei Prototype können Sie die $ -Funktion als Alias für den direkten Abruf verwenden oder die $$ -Funktion verwenden, um intuitivere CSS-Selektoren zu verwenden.
Jede dieser Methoden gibt je nach verwendetem Element entweder ein DOM-Element oder ein Array zurück.
$ ('someElement) .hasClass (' angeklickt '); // Gibt true zurück, wenn das Element tatsächlich die Klasse $ ("someElement") hat. SetProperty ('class', 'clicked'); $ ("someElement"). empty (); // Leert das Element aller seiner Kinder MooTools bietet eine Reihe von Methoden, um ein bestimmtes Element zu bearbeiten, z. B. das Festlegen der Attribute, das Ändern des Inhalts usw. Wenn Sie interessiert sind, sollten Sie die MooTools-Dokumentation hier lesen
var someElement = neues Element ('div', id: 'mySecondElement'); someElement.inject (someOtherElement); // injiziert den Inhalt von someElement in someOtherElement $ ("someElement"). Destroy (); // Entfernt das Element und alle untergeordneten Elemente aus dem DOM $ ('someElement'). Clone (). // Erstellt eine Kopie des Elements Genau wie die meisten Bibliotheken bietet MooTools eine Vielzahl von Funktionen, mit denen wir das DOM ändern können. Alles vom Anhängen von Inhalt bis zum vollständigen Entfernen eines Knotens aus dem DOM ist enthalten.
// Verwendung anonymer Funktionen $ ('myElement'). AddEvent ('click', function () // Irgendein Code); // Übergabe des Funktionsnamens $ ('myElement'). AddEvent ('click', doSomething); Wie ich bereits erwähnt habe, verwenden wir die Ereignis hinzufügen Methode, um das Ereignis an seinen Handler anzuhängen. Wir übergeben den Namen des Ereignisses an die Funktion. Wie üblich können wir wählen, ob Sie eine separate oder anonyme Funktion erstellen möchten, um unseren Code einzufügen.
// Eine GET-Anfrage var myRequest = neue Anfrage (Methode: 'get', URL: 'test.html'); myRequest.send (); // Eine POST-Anfrage var myRequest = neue Anfrage (url: 'test.html'); myRequest.send (someData);
Das Einrichten einer AJAX-Anfrage ist ähnlich einfach. MooTools bietet eine robuste Anfordern Klasse, die POST- oder GET AJAX-Anforderungen verwenden kann. Die Standardmethode ist POST, daher müssen Sie nicht angeben, ob Sie eine Anforderung stellen.
Wie andere Frameworks unterstützt auch die Request-Klasse Rückrufe für Erfolg, Fehler und Abschluss.
Um die gewünschte Funktionalität zu erreichen, würde Ihr Code ungefähr so aussehen:
$$ ("# maintrigger"). addEvent ('click', function () var elem = $ ("text"); var someElement = neues Element ('div'); someElement.appendText ("Clicked!"). injizieren (elem, "nach");); Etwas ausführlicher als die beiden anderen Implementierungen, aber hier erstellen wir einen Div-Knoten von Grund auf und hängen ihn an. Wir speichern auch einen Verweis auf das Absatzelement selbst. Danach fügen wir einfach den erforderlichen Text in das neu erstellte Element ein und hängen ihn an das DOM an.
Mehr wortreich? Ja. Schwieriger? Definitiv nein Es ist nur eine andere Art der Codierung.
$ ("# maintrigger"). click (function () $ ("p"). after ("Angeklickt");); $ ("maintrigger"). beobachten ('click', Funktion (Ereignis) $ ("text"). insert ('Angeklickt'); ); $$ ("# maintrigger"). addEvent ('click', function () var elem = $ ("text"); var someElement = neues Element ('div'); someElement.appendText ("Clicked!"). injizieren (elem, "nach");); Alle diese Codefragmente tun im Wesentlichen dasselbe. Nur in verschiedenen Stilen und mit unterschiedlicher Kontrolle.
Dieser Artikel war in keiner Weise dazu gedacht, diese Rahmenbedingungen zu vergleichen. Stattdessen wollte ich den Leser auf die anderen verfügbaren Lösungen aufmerksam machen, die außerhalb von jQuery verfügbar sind. Es ist nicht so, dass jQuery schlecht ist. Ich liebe jQuery, es ist ein wunderbares Framework, aber es konzentriert sich in erster Linie auf DOM und DOM. Wenn Sie eine Webanwendung oder einen Renderer oder eine andere coole Sache schreiben möchten, ist das Erstellen von wartbaren, erweiterbaren, sauberen Code eine Priorität. Für diese Art von Szenarien ist es sinnvoller, auf einen anderen Rahmen zurückzugreifen.
Ich konnte in diesem Artikel aus Platzgründen nur zwei Frameworks auswählen. Es gibt eine Reihe anderer, ebenso mächtiger Frameworks, darunter Dojo, YUI, Rico und GWT, die auch Ihre Aufmerksamkeit verdienen.
Hoffentlich habe ich Ihr Interesse an alternativen JavaScript-Frameworks heute geweckt und hoffe wirklich, dass Sie mit anderen Frameworks experimentieren werden. Lassen Sie uns wissen, wie das Experiment in den Kommentaren verläuft. Glückliche Kodierung!
