Share
Laten we vandaag gaan met een praktische aanpak. We gaan een klein codefragment in jQuery schrijven en het vervolgens overzetten naar verschillende bibliotheken. Buiten dat brok gaan we bekijken hoe we wat basisfunctionele functionaliteit in elk van deze bibliotheken kunnen implementeren. Klinkt leuk? Laten we erin duiken!
JavaScript-frameworks zijn een zegen als je veel ideeën hebt om te veranderen in functionele, schone code. En met de snelle opkomst van webtoepassingen met AJAX-technologie, zijn frameworks zoals jQuery nodig om de tijd te besparen die u besteedt aan het implementeren van de vereiste functionaliteit. En kijk om je heen zie jQuery dit en jQuery dat met weinig of geen melding van andere kaders. Feit is, er zijn een hoop andere raamwerken die net zo elegant zijn als jQuery. Vandaag gaan we twee frameworks bekijken die beloven om het schrijven van code eenvoudiger te maken. Let op: ik gebruik de woorden bibliotheek, kader en toolkit uitwisselbaar. Ik ga niet in op de semantiek en jij ook niet. Elk van deze bibliotheken probeert verschillende dingen te bereiken. We gaan alleen kijken naar de delen waar hun beoogde functionaliteiten elkaar overlappen.
Buiten esoterische en / of speciale apps kan de JavaScript-code van de meeste mensen worden onderverdeeld in stukjes die voor de volgende functionaliteit zorgen:
Een JavaScript-ontwikkelaar loopt vroeg of laat tegen dit probleem aan: zijn oorspronkelijke code kan gewoon niet worden uitgevoerd. Hij heeft de code keer op keer ontkracht, maar het mocht niet baten. Het probleem is dat de code zojuist bovenaan de pagina is geplaatst. Wanneer het script wordt uitgevoerd, bestaan de elementen waarnaar hij in zijn code verwijst niet eens in de DOM die tot deze fouten leidt.
Onthoud dat scriptaanroepen synchroon verlopen. Dit betekent dat wanneer een browser een scripttag ziet, deze niet meer wordt geladen totdat de scripts worden geladen. Dit staat in schril contrast met zijn algemene laadmechanisme waarbij andere objecten vaak asynchroon worden geladen.
Je kunt hier altijd omheen werken door gewoon de code onder aan de pagina te plaatsen, maar je weet maar nooit. Met dit in gedachten, bieden de meeste bibliotheken een DOM-ready-functie om ervoor te zorgen dat de code alleen wordt uitgevoerd nadat de DOM klaar is om n 'load te vergrendelen maar voordat de beelden volledig zijn geladen.
Met onbewerkt JavaScript zou je naar zoiets kijken.
window.onload = someFunction;
Je wilt duidelijk toegang hebben tot specifieke elementen en ze op de een of andere manier manipuleren. Helaas, IE is nogal kieskeurig en kan uw code breken. Om ontwikkelaars betere code te laten schrijven, biedt elke bibliotheek een crossbrowser-methode waarmee u een specifiek element kunt openen. De meeste bibliotheken gebruiken CSS-stijlselectoren om in te zoomen op hun doelelementen om de leercurve korter te maken en nog veel belangrijker, schonere code.
Zonder een kader zou je dit moeten doen:
Accentsconagua
var elem = document.getElementById ('header'); var io = document.getElementsByTagName ('invoer'); Natuurlijk, als je eenmaal het element hebt verkregen, zou je wat handelingen willen uitvoeren. Dit omvat het toevoegen of verwijderen van een klasse, het schakelen tussen de zichtbaarheid ervan, het wijzigen van de afmetingen, het bewerken van de inhoud, enzovoort. Zoals altijd kan het schrijven van dit alles in raw JavaScript pijnlijk zijn. Elk van deze bibliotheken biedt wrapperfuncties om al het bovengenoemde werk en nog veel meer te doen.
Met onbewerkt JavaScript zou uw code er zo uit zien:
. Document.getElementById ( "title") innerHTML = "Titel";
Vaak wilt u de knooppunten in de DOM rechtstreeks wijzigen. U wilt misschien een nieuw wrapper-object maken waarnaar u uw recente Twitter-status wilt invoegen of misschien wilt u een div-element verwijderen voor een e-mailapp die u schrijft. In elk van deze gevallen wilt u de DOM efficiënt manipuleren en al deze bibliotheken bieden methoden om dit op een schone manier te doen.
Het toevoegen van een element zou zoveel code kosten met raw JS.
var myElement = document.createElement ("Sometext"); document.all.myBody.appendChild (myElement); Evenementen zijn de bouwstenen van elke toepassing en een van de meer vervelende delen van cross-browser scripting. Het punt is, W3C definieert een manier en IE doet zijn eigen ding. Om dit te voorkomen, bieden al deze bibliotheken manieren om zelfs afhandelaars aan specifieke gebeurtenissen van het element te koppelen of te onthechten.
Evenementen aansluiten in onbewerkte JavaScript.
element.addEventListener ( 'klik', doSomething, false)
Native JavaScript met behulp van het XHR-object is vervelend om te schrijven en te debuggen. Om ontwikkelaars gemakkelijker code te laten schrijven, vult elk van deze raamwerken de vervelende details van het implementeren van een AJAX-verzoek achter een eenvoudige functieaanroep samen met methoden om te bellen wanneer het verzoek slaagt of mislukt.
Ik ga zelfs niet proberen om wat code te posten om een AJAX-verzoek te doen met onbewerkte JS. In plaats daarvan zou je de uitstekende screencast van Jeffrey moeten bekijken. Binnenkort zullen we zien hoe een kader uw code drastisch vermindert.
Niets bijzonders eigenlijk; we zullen een eenvoudige demo bouwen. De opmaak ziet er zo uit:
Net Tuts Dit is een voorbeeld willekeurig tekst. Klik op het woord willekeurig om de DOM aan te passen door een nieuw element te maken en toe te voegen aan de huidige inhoud.
We hebben wat tekst binnen een p-element. We hebben het woord willekeurig gewikkeld in een spanelement met een ID van maintrigger. Telkens wanneer een element op het element met een ID van maintrigger wordt geklikt, moet een nieuw div-element worden toegevoegd aan het aline-element dat de tekst "clicked" bevat. Deze eenvoudige demo raakt alle basisfunctionaliteitseisen aan, inclusief toegang tot elementen, het aansluiten van evenementen en het toevoegen van elementen behalve die van AJAX-abstractie en laat ons een gevoel voor elke bibliotheek krijgen.
Voordat we naar de andere bibliotheken kijken, is het het beste dat we kijken naar hoe jQuery ons elk van hen laat doen.
Ah, al het doordringende jQuery. Het is het gesprek van de stad tussen webontwikkelaars al een tijdje bekend en terecht. jQuery probeert niet te veel dingen te doen. Je zult geen dozijn plus-widgets vinden die gebundeld zijn met de basis-build of manieren om klassen of op klassen gebaseerde objecten te ondersteunen. jQuery richt zich primair op de DOM en ik denk dat ze uitstekend werk geleverd hebben.
Als uw werk voornamelijk DOM-gerelateerd is, is jQuery de juiste keuze. De syntaxis is een van de gemakkelijkste en vaak het voelt als het lezen van pseudocode dan de werkelijke, werkende code. De community is groot en vriendelijk en er zijn een hoop plug-ins die je gewoon kunt inzetten voor extra functionaliteit. Bovendien is er de UI-bibliotheek als u enkele algemene widgets aan uw site wilt toevoegen.
Het gebruikersbestand van jQuery omvat:
Zeer indrukwekkend als je het mij vraagt.
Nu zullen we bekijken hoe jQuery ons de tijd laat verminderen die we besteden aan het coderen voordat we naar de andere kaders kijken.
$ (document) .ready (function () // Jouw dingen hier);
Bij het schrijven van uw jQuery-code is het noodzakelijk dat u uw code in dit gedeelte plaatst. Hier vragen we de code te worden uitgevoerd wanneer de DOM klaar is om te worden gemanipuleerd. U kunt een functienaam doorgeven of gewoon al uw code in een anonieme functie schrijven zoals in het bovenstaande voorbeeld.
var container = $ ("# main"); var posts = $ (". post"); var-koppen = $ ("h1"); Simpel als het wordt. We maken eerst een variabele om een verwijzing naar het DOM-knooppunt te houden, omdat we er niet steeds opnieuw naar willen zoeken. $ is een alias voor de jQuery namespace. We geven gewoon de id, klasse of tag van het element door, net zoals u zou doen als u een CSS-verklaring aan het schrijven was. Doorgeven aan CSS selectors werkt precies zoals je zou verwachten. Voorbeelden zoals het onderstaande werk ook.
$ ( "Overspanning: heeft (a)") doSomething ();. $ ("ul li: nth-child (3)"). doSomething (); . $ ( "P: verborgen") doSomething (); $ ("div"). attr ("klasse", "geklikt"); $ ( "Div"). Html ("Hallo"); $ (" span "). addClass (" current "); Het wijzigen van een elementenattributen, de inhoud of de klassen die het bevat zijn vrij triviaal. We hebben gewoon toegang tot het vereiste element en bellen de benodigde functie. De attr methode laat ons een specifiek attribuut van een element veranderen, de html methode laat ons de HTML-inhoud specificeren en de addClass methode behoeft geen uitleg.
$ ( "# Post"). Na ("Comments"); $ (" p "). wrap (""); $ (". commentaar "). toevoegen (".Gepost door"); Het toevoegen van elementen na het opgegeven element, het toevoegen van inhoud in een element of het omwikkelen van het doorgegeven element met een ander element is net zo eenvoudig. We verkrijgen het element en noemen vervolgens de functie die het beste aansluit bij onze behoefte.
// Gebruik anonieme functies $ ("# submit"). Bind ("klik", functie (e) // Uw code hier); // Doorgeven van een functienaam $ ("# submit"). Bind ("click", evHandler); Het aansluiten van evenementen is eveneens eenvoudig. We verkrijgen het element en noemen de bindfunctie. Het eerste argument is het gebeurtenistype en de tweede is de code die moet worden uitgevoerd wanneer de gebeurtenis wordt geactiveerd. U kunt de naam van de functie doorgeven of gewoon een anonieme functie maken en al uw code daarbinnen plaatsen.
$ .ajax (type: "GET", url: "test.html", success: function (xhr) // Some code here, error: function (xhr) // Some code here $ .ajax ( type: "POST", url: "test.php", succes: functie (xhr) // Enkele code hier, fout: functie (xhr) // Enkele code hier);
U hebt slechts 3 regels nodig om een AJAX-oproep met barebones te maken. Geef het type verzoek op, de URL en je bent klaar om te gaan. Succes- en foutfuncties kunnen worden gedefinieerd om aan te geven wat er gebeurt als hun naamgenoten zich voordoen.
Om de hierboven genoemde gewenste functionaliteit te bereiken, ziet uw jQuery-code er ongeveer zo uit:
$ ("# maintrigger"). klik (functie () $ ("p"). after ("geklikt");); 3 lijnen is alles wat nodig is. We selecteren de benodigde elementen, noemen de klikfunctie, maken een anonieme functie en voegen een div-element toe. Het klinkt veel ingewikkelder dan het eigenlijk is.
Nu we de jQuery-code hebben bekeken, kunnen we de andere bibliotheken verkennen.
Prototype is de grote papa van JavaScript-frameworks. Het biedt alle fijne dingen die je van een volwassen raamwerk mag verwachten en voegt er dan iets meer aan toe. Het biedt ook een aantal bibliotheekfuncties om u te helpen een mooi geabstraheerde, objectgeoriënteerde code te schrijven.
Het gebruikersbestand van Prototype omvat:
Veel bekende topnamen daar. Zoals ik al zei, Prototype was lange tijd het voorkeursraam voordat jQuery binnenkwam.
Nu de introducties klaar zijn, laten we zien hoe Prototype u kan helpen om beter JavaScript te schrijven.
document.observe ("dom: loaded", function () // Uw code hier); Het bovenstaande is de prototype-versie van DOM klaar. Het ziet er eerst raar uit als je vanuit jQuery komt, maar het is net zo eenvoudig. De waarnemen functie luistert naar de gepasseerde gebeurtenis gedurende de levensduur van het document. We geven gewoon de nodige gebeurtenissen door en omhullen al onze code in een anonieme functie net als met jQuery.
// Toegang tot een element met een id van post $ ('post'); // Gebruik de CSS-selector-engine $$ ('. Comment'); $ biedt een alias voor de document.getElementById methode. Hiermee kunt u elementen vinden met de doorgegeven ID-waarde.
Met $$ kun je in plaats daarvan CSS-selectors gebruiken. Het neemt als het zijn argumenten een willekeurig aantal CSS selectors en retourneert het specifieke element of een array van hen. Net als met de jQuery-selectorengine, kunt u allerlei soorten CSS3-selectors gebruiken, waaronder kindselectors, attribuutselectoren en zelfs pseudoklassen.
$ ( 'Post') addClassName ( 'author.'); $ ( 'Container') GetWidth (.); $ ( 'Post') te verbergen ().;
Prototype biedt een aantal krachtige methoden om met het geretourneerde element te werken. Vergeet niet dat u dit via het $ -object moet openen. Dit betekent dat je eerst de referentie moet opslaan voordat je het element kunt manipuleren op de manier die je zelf wilt.
Het manipuleren van een element is net zo eenvoudig als het verkrijgen van een verwijzing naar het element en het aanroepen van de noodzakelijke functie. Je kunt veel dingen doen, van het instellen van sttributen tot het verbergen van het element.
$ ('post'). wrap ('div', 'id': 'container'); $ ( 'Post'). Update ('Een willekeurige tekst
'); $ ('post'). insert ('div', 'Een willekeurige tekst
'); De eerste methode verpakt het gepasseerde element met een beschreven element en stelt de verschillende eigenschappen ervan in het proces in. De updatefuncties vervangen de inhoud van het doorgegeven element door het element dat we willen. Invoegen voegt platte tekst of HTML-fragmenten in, bovenaan, onderaan, voor of na het element. In plaats van het gebruik van afzonderlijke methoden zoals toevoegen en na zoals in jQuery, hoeven we alleen de positie te specificeren en zijn we klaar.
// Gebruik van anonieme functies $ (btn) .observe ('klik', functie (event) // Uw code hier); // Doorgeven van de naam van een functie $ (btn) .observe ('klik', doSomething); Zoals ik eerder al zei, de waarnemen functie kunt u gebeurtenissen koppelen aan hun gebeurtenishandlers. We verkrijgen eerst een verwijzing naar het element en bellen dan de waarnemen methode die de naam van het evenement doorgeeft en functioneert als parameters. Als u niet alleen hiervoor een aparte functie wilt creëren, bent u altijd vrij om een anonieme functie te maken en al uw code daarbinnen te plaatsen.
nieuw Ajax.Request ("test.html", methode: 'get', onSuccess: functie (transport) // Enkele code hier, onFailure: functie (transport) // Enige code hier); nieuw Ajax.Request ("test.php", methode: 'post', onSuccess: functie (transport) // Enkele code hier, onFailure: functie (transport) // Enige code hier); Prototype biedt uitgebreide wrapper-functies voor het maken van een AJAX-aanvraag. Ik heb de AJAX POST- en GET-verzoeken op het laagste niveau hier weergegeven. Er zijn een hoop andere gespecialiseerde methoden voor AJAX-verzoeken, waaronder een automatische updater.
Om de hierboven genoemde gewenste functionaliteit te bereiken, ziet uw code er ongeveer zo uit:
$ ("maintrigger"). observe ('klik', functie (event) $ ("text"). insert ('geklikt'); ); Nog steeds een 3-voering. Wat we doen is vergelijkbaar met de jQuery-code, de syntaxis is gewoon anders. Wij gebruiken de waarnemen functie om de klikgebeurtenis aan de code te koppelen die we in een anonieme functie hebben gemaakt. We voegen gewoon wat tekst in om aan te geven dat het proces een succes was.
Je zult zien dat we in het algemeen hetzelfde doen als jQuery, alleen met een andere syntaxis en een paar verschillen. Wanneer uw werk niet DOM-gericht is en u de juiste objecten nodig hebt om uw ideeën naar behoren te benutten, is Prototype het raamwerk om uit te kiezen.
Mootools beweert niet een eenvoudig raamwerk te zijn om te leren. Laten we eerlijk zijn, de webpagina zegt dat het een webapplicatieframework is voor gemiddelde tot gevorderde webontwikkelaars. Laat ze je niet voor de gek houden. Het is een uiterst elegant kader waarmee u uiterst stijlvolle JavaScript-code kunt maken. Het richt zich op JavaScript als geheel in plaats van alleen op de DOM. Met dat in gedachten biedt het een aantal functies om uw workflow te versnellen en wordt de DOM waar mogelijk uitgebreid. En net als Prototype bevat het een systeem voor het maken en overerven van klassen, waardoor degenen die uit C # of Java komen, comfortabeler worden met JavaScript.
Bedrijven die MooTools gebruiken zijn onder andere:
Een ander framework met een zeer indrukwekkend gebruikersbestand.
Laten we nu kijken naar hoe MooTools uw leven als JavaScript-ontwikkelaar eenvoudiger maakt.
window.addEvent ('domready', function () // Uw code hier); Het ziet er misschien ingewikkeld uit, maar maak je geen zorgen. Het ziet er gewoon anders uit. We koppelen de domready-gebeurtenis van de vensters aan de anonieme functie. De Voeg evenement toe laat ons gebeurtenissen koppelen aan hun handlers. MooTools definieert de domready-gebeurtenis die we hier gebruiken. Zoals gebruikelijk verpakken we al onze code in een anonieme functie en plaatsen deze binnen. Er! Dat was niet zo moeilijk, niet waar?
// Gebruik de $ function $ ('someElement'); // Gebruik CSS-selectors $$ ("# main"); $$ ( "post."); $$ ( "h1"); Net als bij Prototype, kunt u de functie $ gebruiken als een alias voor direct ophalen of de functie $$ gebruiken om veel meer intuïtieve CSS-kiezers te gebruiken.
Bij elk van deze methoden wordt een DOM-element of een array geretourneerd, afhankelijk van wat u gebruikt.
$ ( 'SomeElement) .hasClass (' geklikt '); // Geeft true als het element inderdaad die klasse $ ("someElement") heeft. SetProperty ('class', 'clicked'); $ ( "SomeElement") leeg (.); // Leegt het element van al zijn kinderen MooTools biedt een aantal methoden om een specifiek element te manipuleren, inclusief het instellen van de kenmerken, het wijzigen van de inhoud, enzovoort. Als u geïnteresseerd bent, moet u de MooTools-documentatie hier raadplegen
var someElement = nieuw element ('div', id: 'mySecondElement'); someElement.inject (someOtherElement); // Injecteert de inhoud van someElement binnen someOtherElement $ ("someElement"). Destroy (); // Verwijdert element en al zijn kinderen uit de DOM $ ('someElement'). Clone (). // Maakt een kopie van het element Net als de meeste bibliotheken biedt MooTools een overvloed aan functies om ons de DOM te laten modificeren. Alles van het toevoegen van inhoud tot het volledig verwijderen van een knooppunt uit de DOM is inbegrepen.
// Gebruik van anonieme functies $ ('myElement'). AddEvent ('klik', functie () // enkele code); // Doorgeven van de functies naam $ ('myElement'). AddEvent ('klik', doSomething); Zoals ik hierboven heb opgemerkt, gebruiken we de Voeg evenement toe methode om de gebeurtenis aan zijn handler te koppelen. We geven de naam van de gebeurtenis door aan de functie en zoals gewoonlijk zijn we vrij om te kiezen tussen het maken van een afzonderlijke of anonieme functie om onze code in te zetten.
// A GET-verzoek var myRequest = nieuw verzoek (methode: 'get', url: 'test.html'); myRequest.send (); // Een POST-aanvraag var myRequest = nieuwe aanvraag (url: 'test.html'); myRequest.send (someData);
Het instellen van een AJAX-aanvraag is eveneens eenvoudig. MooTools biedt een robuuste Verzoek klasse waarmee POST- of GET AJAX-aanvragen kunnen worden gedaan. De standaardmethode is POST, dus het is niet nodig om op te geven of u een aanvraag doet.
Net als andere frameworks ondersteunt de request-klasse callbacks voor succes, fouten en voltooiing.
Om de hierboven genoemde gewenste functionaliteit te bereiken, ziet uw code er ongeveer zo uit:
$$ ("# maintrigger"). addEvent ('klik', functie () var elem = $ ("text"); var someElement = nieuw element ('div'); someElement.appendText ('Clicked!'). injecteer (elem, "na");); Iets meer uitgebreid dan de andere 2 implementaties, maar hier maken we eigenlijk een div-node vanuit het niets en voegen deze vervolgens toe. We slaan ook een verwijzing naar het alinea-element zelf op. Daarna voegen we eenvoudig de benodigde tekst toe aan het nieuwe element en voegen het vervolgens toe aan de DOM.
Meer breedsprakig? Ja. Moeilijker? Echt niet. Het is gewoon een andere stijl van coderen.
$ ("# maintrigger"). klik (functie () $ ("p"). after ("geklikt");); $ ("maintrigger"). observe ('klik', functie (event) $ ("text"). insert ('geklikt'); ); $$ ("# maintrigger"). addEvent ('klik', functie () var elem = $ ("text"); var someElement = nieuw element ('div'); someElement.appendText ('Clicked!'). injecteer (elem, "na");); Al deze codefragmenten doen in essentie hetzelfde. Alleen in verschillende stijlen en met verschillende hoeveelheden controle.
Dit artikel was op geen enkele manier bedoeld om deze kaders te vergelijken. In plaats daarvan wilde ik de aandacht van de lezer vestigen op de andere uitvoerbare oplossingen die beschikbaar zijn buiten jQuery. Het is niet dat jQuery slecht is. Ik hou van jQuery, het is een prachtig kader, maar het richt zich voornamelijk op de DOM en DOM alleen. Als u een webtoepassing of een renderer of een ander leuk ding wilt schrijven, is het maken van onderhoudbare, uitbreidbare, schone code een prioriteit. Het is voor dit soort scenario's wanneer het meer zin heeft om zijn toevlucht te nemen tot een ander kader.
Ik kon slechts twee kaders kiezen in dit artikel vanwege ruimtebeperkingen. Er zijn een aantal andere, even krachtige, frameworks waaronder Dojo, YUI, Rico en GWT die ook jouw aandacht verdienen.
Hopelijk heb ik je interesse gewekt in alternatieve JavaScript-frameworks vandaag en ik hoop echt dat je gaat experimenteren met andere frameworks. Laat ons weten hoe het experiment gaat in de commentaren. Happy codering!
