Share
Låt oss gå med ett praktiskt tillvägagångssätt idag. Vi ska skriva ett litet kodstycke i jQuery och sedan överföra det till flera olika bibliotek. Utanför det där stycket ska vi titta på hur man genomför en grundläggande, nödvändig funktionalitet i vart och ett av dessa bibliotek. Låter kul? Låt oss dyka in!
JavaScript-ramar är en välsignelse när du har många idéer att göra till funktionell, ren kod. Och med meteorisk ökning av webbapplikationer med AJAX-teknik är ramar som jQuery nödvändiga för att minska tiden du spenderar för att genomföra nödvändig funktionalitet. Och titta runt om du ser jQuery detta och jQuery det med lite eller inget omnämnande av andra ramar. Faktum är att det finns massor av andra ramar som är lika eleganta som jQuery. Idag ska vi ta en titt på två ramar som lovar att göra skriv kod enklare. Observera att jag använder orden bibliotek, ramverk och verktygslåda utbytbart. Jag kommer inte att gå in i semantik och inte heller du. Var och en av dessa bibliotek försöker åstadkomma olika saker. Vi ska bara titta på de delar där deras avsedda funktioner överlappar varandra.
Utanför esoteriska och / eller dedikerade appar kan de flesta människors JavaScript-kod delas upp i bitar som tar hand om följande funktioner:
En JavaScript-utvecklare går in i det här problemet förr eller senare: hans orörda kod kommer inte att köras. Han har debugged koden igen och igen men till ingen nytta. Problemet är att koden bara placeras högst upp på sidan. När manuset körs, existerar de element som han hänvisar till i sin kod inte ens i DOM som leder till dessa fel.
Kom ihåg att skriptsamtal är synkrona. Det betyder att när en webbläsare ser en skriptikett upphör det att ladda allt annat tills skriptet laddas. Detta står i skarp kontrast till dess allmänna laddningsmekanism där andra objekt ofta laddas asynkront.
Du kan alltid arbeta runt det här genom att bara placera koden längst ner på sidan men du vet aldrig. Med tanke på detta tillhandahåller de flesta bibliotek en DOM-redofunktion för att säkerställa att koden endast körs efter att DOM är klar att låsa n 'load men innan bilderna är helt laddade.
Med rå JavaScript ser du på något som detta.
window.onload = someFunction;
Du vill självklart få tillgång till specifika element och manipulera dem på något sätt. Tyvärr är IE ganska fin och kan bryta din kod. För att låta utvecklare skriva bättre kod, ger varje bibliotek en cross-browser-metod som låter dig komma åt ett visst element. De flesta bibliotek använder CSS-stilväljare till noll i sina målelement för att göra inlärningskurvan kortare och mycket viktigare, renare ser kod.
Utan ramverk måste du göra det här:
Accentsconagua
var elem = document.getElementById ("header"); var io = document.getElementsByTagName ('input'); Naturligtvis, när du har fått elementet, vill du utföra en viss operation. Detta inkluderar att lägga till eller ta bort en klass, byta dess synlighet, ändra dess dimensioner, redigera innehållet och så vidare. Som alltid skriver allt detta i rå JavaScript kan vara smärtsamt. Vart och ett av dessa bibliotek ger wrappfunktioner för att göra allt ovanstående arbete och mycket mer.
Med rå JavaScript skulle din kod se ut så här:
. Document.getElementById ( "titel") innerhtml = "Titel";
Ofta vill du direkt byta noder i DOM. Du kanske vill skapa ett nytt omslag objekt som du vill lägga till din senaste Twitter-status i eller kanske du vill ta bort ett div-element för en e-post app du skriver. I vart och ett av dessa fall skulle du vilja manipulera DOM effektivt och alla dessa bibliotek ger metoder för att göra det på ett rent sätt.
Lägga till ett element skulle ta så mycket kod med rå JS.
var myElement = document.createElement ("sometext"); document.all.myBody.appendChild (myElement); Händelser är byggstenar för alla applikationer och en av de mer peskier delarna av cross-browser scripting. Saken är, W3C definierar ett sätt och IE gör sin egen sak. För att komma över det här, tillhandahåller alla dessa bibliotek sätt att bifoga eller lossa även hanterare till specifika händelser av elementet.
Hooking upp händelser i rå JavaScript.
element.addEventListener ( 'klick', doSomething, false)
Native JavaScript använder XHR-objektet är tråkigt att skriva och felsöka. För att låta utvecklare skriva kod lättare, vart och ett av dessa ramar sammanfattar de tråkiga detaljerna för att implementera en AJAX-förfrågan bakom ett enkelt funktionssamtal med metoder att ringa när förfrågan lyckas eller misslyckas.
Jag ska inte ens försöka lägga in någon kod för att göra AJAX-förfrågan med rå JS. Istället bör du titta på Jeffres utmärkta screencast. I korthet ser vi hur en ram minskar din kod drastiskt.
Ingenting fancy egentligen; Vi bygger en enkel demo. Markeringen ser ut så här:
Net Tuts Detta är några exempel slumpmässig text. Klicka på ordet slumpmässigt för att ändra DOM genom att skapa ett nytt element och lägga till det i det aktuella innehållet.
Vi har lite text inom ett p-element. Vi har ordet slumpmässig inslagna i ett spännelement med ett ID av huvudtrigger. Varje gång ett element klickas på elementet med ett ID för maintrigger, måste ett nytt div-element bifogas styckelementet som innehåller texten "klickade". Denna enkla demo berör alla grundläggande funktionalitetskrav, inklusive tillgång till element, anslutning av händelser och tillhörande element förutom AJAX-abstraktion och låter oss få en känsla för varje bibliotek.
Innan vi tittar på de andra biblioteken är det bäst att vi tittar på hur jQuery låter oss göra var och en av dem.
Åh, alla genomgripande jQuery. Det har varit talet om staden bland webbutvecklare ett tag med och med rätta. jQuery försöker inte göra för många saker. Du kommer inte att hitta ett dussin plus widgets buntade med basbyggnaden eller sätt att stödja klasser eller klassbaserade objekt. jQuery fokuserar främst på DOM och jag tror att de har gjort ett utmärkt jobb.
Om ditt arbete är främst DOM-relaterat är jQuery vägen att gå. Syntaxen är bland de enklaste och många gånger känns det som att läsa pseudokod än den verkliga arbetskoden. Gemenskapen är stor och vänlig och det finns massor av plugins som du bara kan släppa in för extra funktionalitet. Dessutom finns det UI-biblioteket om du vill lägga till några vanliga widgets till din webbplats.
jQuerys användarbas innehåller:
Extremt imponerande om du frågar mig.
Nu ska vi titta på hur jQuery gör att vi kan minska tiden vi spenderar kodning innan vi tittar på de andra ramarna.
$ (dokument) .ready (funktion () // dina grejer här);
När du skriver din jQuery-kod är det absolut nödvändigt att du sätter in din kod i det här avsnittet. Här frågar vi koden som ska utföras när DOM är redo att manipuleras. Du kan antingen passera i ett funktionsnamn eller bara skriva all din kod inom en anonym funktion som i exemplet ovan.
var container = $ ("# main"); var inlägg = $ ("post"); varrubriker = $ ("h1"); Enkelt som det blir. Vi skapar först en variabel för att hålla en referens till DOM-noden eftersom vi inte vill leta efter det om och om igen. $ är ett alias till jQuery namnutrymmet. Vi skickar bara in i id, klass eller märke av elementet precis som du skulle göra om du skrev en CSS-deklaration. Att passera i CSS-väljare fungerar precis som du förväntar dig. Exempel på nedan arbetet också.
$ ( "Span: har (a)") doSomething ();. $ ("ul li: nth-child (3)"). doSomething (); . $ ( "P: dold") doSomething (); $ ("div"). attr ("class", "clicked"); $ ( "Div"). Html ("Hej"); $ (" span "). addClass (" current "); Att ändra en element attribut, innehållet eller klasserna det är ganska trivial. Vi har bara tillgång till det nödvändiga elementet och kallar den nödvändiga funktionen. De attr Metoden låter oss ändra ett specifikt attribut för ett element, html Metoden låter oss specificera HTML-innehållet och addClass Metoden behöver ingen förklaring.
$ ( "# Post"). Efter ("kommentarer"); $ (" p "). wrap (""); $ (". comment "). append ("Postat av"); Att lägga till element efter det angivna elementet, lägga till innehåll i ett element eller omsluta det överförda elementet med en annan är lika enkelt. Vi hämtar elementet och ringer sedan den funktion som bäst passar vårt behov.
// Använda anonyma funktioner $ ("# submit") binda ("klicka", funktion (e) // Din kod här); // Passar i ett funktionsnamn $ ("# submit"). Bind ("klicka", evHandler); Att haka upp händelser är lika lätt. Vi får elementet och kallar sedan bindningsfunktionen. Det första argumentet är händelsetypen och den andra är koden som ska utföras när händelsen utlöses. Du kan antingen passera i funktionens namn eller bara skapa en anonym funktion och placera all din kod inuti det.
$ .ajax (typ: "GET", url: "test.html", framgång: funktion (xhr) // En del kod här, fel: funktion (xhr) // En del kod här $ .ajax typ: "POST", url: "test.php", framgång: funktion (xhr) // En del kod här, fel: funktion (xhr) // En del kod här);
Du behöver bara 3 rader för att göra ett barebones AJAX-samtal. Ange typ av begäran, webbadressen och du är bra att gå. Succes- och felfunktioner kan definieras för att ange vad som händer om deras namnskap sker.
För att uppnå önskad funktionalitet som nämns ovan kommer din jQuery-kod ungefär att se ut så här:
$ ("# maintrigger"). klicka (funktion () $ ("p"). efter ("klickade");); 3 linjer är allt som krävs. Vi väljer de nödvändiga elementen, anropar klickfunktionen, skapar en anonym funktion och lägger till ett div-element. Det låter mycket mer komplicerat än det egentligen är.
Nu när vi har tittat på jQuery-koden kan vi utforska de andra biblioteken.
Prototyp är den stora pappan av JavaScript-ramar. Det ger alla de nackdelar du förväntar dig från en mogen ram och lägger sedan till lite mer. Det ger också ett antal biblioteksfunktioner som hjälper dig att skriva snyggt abstraherad, objektorienterad kod.
Prototypens användarbas innehåller:
Många välkända, toppnivå namn där. Som sagt sa prototyp brukar vara ramverket för valet länge innan jQuery kom in.
Nu när introduktionerna är färdiga, låt oss se hur prototyp kan hjälpa dig att skriva bättre JavaScript.
document.observe ("dom: loaded", funktion () // Din kod här); Ovanstående är Prototypes version av DOM redo. Det ser konstigt ut först om du kommer från jQuery men det är lika enkelt. De observera funktionen lyssnar på den överförda händelsen under dokumentets livstid. Vi passerar bara i den nödvändiga händelsen och kuvert hela vår kod inuti en anonym funktion precis som med jQuery.
// Hämta ett element med ett id för post $ ('post'); // Använd CSS väljarkretsen $$ ('. Kommentar'); $ ger ett alias för document.getElementById metod. Det låter dig hitta element med det godkända ID-värdet.
$$ låter dig använda CSS-väljare istället. Det kräver som det är några val av CSS-väljare och returnerar det specifika elementet eller en uppsättning av dem. Precis som med jQuery-väljarmotorn kan du använda alla slags falska CSS3-väljare, inklusive barnväljare, attributväljare och jämn pseudoklasser.
$ ( 'Post') addClassName (författare). $ ( 'Container') getWidth ().; $ ( 'Post') döljer ().
Prototypen ger ett antal kraftfulla metoder för att arbeta med det returnerade elementet. Kom ihåg att du måste komma åt det här via $ -objektet. Vilket innebär att du först måste spara referensen innan du kan manipulera elementet på vilket sätt som helst du tycker är lämplig.
Manipulera ett element är lika enkelt som att erhålla en hänvisning till elementet och ringa den nödvändiga funktionen. Du kan göra många saker från att ställa in, för att gömma elementet.
$ ('post'). wrap ('div', 'id': 'container'); $ ( 'Post'). Uppdatering ('Vissa slumpmässiga texter
'); $ ('post'). infoga ('div', 'Vissa slumpmässiga texter
'); Den första metoden sveper det överlämnade elementet med en beskriven elementinställningar dess olika egenskaper i processen. Uppdateringsfunktionerna ersätter innehållet i det överlämnade elementet med det vi vill ha. Infoga inlägg vanlig text eller HTML-fragment upptill, under, före eller efter elementet. Istället för att använda separata metoder som bifoga och efter som i jQuery behöver vi bara ange positionen och vi är färdiga.
// Använda anonyma funktioner $ (btn) .observe ('klicka', funktion (händelse) // Din kod här); // Passerar i en funktions namn $ (btn) .observe ('klicka', gör något); Som jag nämnde tidigare, den observera funktionen kan du koppla händelser till deras händelsehanterare. Vi får först en hänvisning till elementet och ringer sedan till observera metod som passerar i händelsens namn och funktion som parametrar. Om du inte vill skapa en separat funktion bara för detta, är du alltid fri att skapa en anonym funktion och sätta all din kod inuti.
nya Ajax.Request ("test.html", metod: "get", onSuccess: funktion (transport) // En del kod här, onFailure: funktion (transport) // En del kod här); ny Ajax.Request ("test.php", metod: "post", onSuccess: funktion (transport) // En del kod här, onFailure: funktion (transport) // En del kod här); Prototypen ger omfattande omslagsfunktioner för att göra en AJAX-förfrågan. Jag har visat de lägsta nivåerna AJAX POST och GET-förfrågningar här. Det finns massor av andra specialiserade metoder för AJAX-förfrågningar, inklusive en automatisk uppdatering.
För att uppnå önskad funktionalitet som nämns ovan kommer din kod ungefär att se ut så här:
$ ("maintrigger"). observera ("klicka", funktion (händelse) $ ("text").klickade'); ); Fortfarande en 3-liner. Vad vi gör liknar jQuery-koden, men syntaxen är bara annorlunda. Vi använder observera funktion för att bifoga klickhändelsen till koden vi skapade i en anonym funktion. Vi lägger bara in lite text för att ange att processen var en framgång.
Du ser att vi vanligtvis gör detsamma som jQuery gör, bara med en annan syntax och några skillnader. När ditt arbete inte är DOM-centrerat och du behöver lämpliga föremål för att effektivt utnyttja dina idéer är Prototype det ramverk att välja.
Mootools berättar inte att vara en enkel ram för att lära sig. Låt oss möta det, på sin webbsida står det att det är en webbapplikationsram för mellanliggande till avancerade webbutvecklare. Låt dem inte lura dig. Det är en extremt elegant ram som gör att du skapar extremt elegant JavaScript. Det fokuserar på JavaScript som helhet istället för bara DOM. Med det i åtanke erbjuder det ett antal funktioner för att påskynda ditt arbetsflöde och utvidgar även DOM när det är möjligt. Och precis som Prototype innehåller den ett klassskapande och arvssystem som borde få de som kommer från C # eller Java mer bekvämt med JavaScript.
Företag som använder MooTools inkluderar:
En annan ram med en mycket imponerande användarbas.
Låt oss nu titta på hur MooTools gör ditt liv som en JavaScript-utvecklare enklare.
window.addEvent ('domready', funktion () // Din kod här); Det kan se komplicerat ut, men fröken inte. Det ser bara annorlunda ut. Vi bifogar den redan aktuella händelsen i Windows till den anonyma funktionen. De addEvent Låt oss bifoga händelser till deras hanterare. MooTools definierar den redan pågående händelsen som vi använder här. Som vanligt sätter vi in all vår kod i en anonym funktion och placerar den inuti. Där! Det var inte så svårt, var det?
// Använd $ -funktionen $ ('someElement'); // Använd CSS selectors $$ ("# main"); $$ ( "post."); $$ ( "h1"); Precis som med Prototype kan du använda $ -funktionen som ett alias för direkt hämtning eller använda $$-funktionen för att använda mycket mer intuitiva CSS-valörer.
Vart och ett av dessa metoder returnerar antingen ett DOM-element eller en array beroende på vilken du använder.
$ (SomeElement) .hasClass (klickade '); // Returnerar sant om elementet verkligen har den klassen $ ("someElement"). SetProperty ('class', 'clicked'); $ ( "SomeElement") tom (). // Tömmer alla barnets element MooTools tillhandahåller ett antal metoder för att manipulera ett specifikt element, inklusive att ställa in dess attribut, ändra innehållet och så vidare. Om du är intresserad bör du se MooTools dokumentation här
var someElement = nytt element ('div', id: 'mySecondElement'); someElement.inject (someOtherElement); // Injektioner innehållet i SomeElement inom someOtherElement $ ("someElement"). Förstör (); // Tar bort element och alla sina barn från DOM $ ('someElement'). Klon (). // Gör en kopia av elementet Precis som de flesta bibliotek ger MooTools en mängd funktioner för att vi ska kunna ändra DOM. Allt från att lägga till innehåll för att helt ta bort en nod från DOM ingår.
// Använda anonyma funktioner $ ('myElement'). AddEvent ('click', function () // Some code); // Passerar i funktionsnamnet $ ('myElement'). AddEvent ('click', doSomething); Som jag nämnde ovan använder vi addEvent Metod för att fästa händelsen till sin hanterare. Vi skickar händelsens namn till funktionen och som vanligt kan vi välja mellan att skapa en separat eller anonym funktion för att sätta in vår kod.
// En GET-förfrågan var myRequest = ny begäran (metod: 'get', url: 'test.html'); myRequest.send (); // En POST-förfrågan var myRequest = ny begäran (url: 'test.html'); myRequest.send (someData);
Att ställa in en AJAX-förfrågan är lika lätt. MooTools ger en robust Begäran klass som låter använda göra POST- eller GET AJAX-förfrågningar. Standardmetoden är POST så det är inte nödvändigt att ange om du gör en förfrågan.
Precis som andra ramar stöder förfrågningsklassen återuppringningar för framgång, fel och slutförande.
För att uppnå önskad funktionalitet som nämns ovan kommer din kod ungefär att se ut så här:
$$ ("# maintrigger"). addEvent ("klicka", funktion () var elem = $ ("text"); var someElement = nytt Element ('div'); someElement.appendText ("Clicked!"). injicera (elem, "efter");); Något mer verbos än de andra 2 implementationerna men här skapar vi faktiskt en div-nod från början och lägger sedan till den. Vi lagrar också en referens till själva delelementet. Därefter lägger vi enkelt den nödvändiga texten i det nyskapade elementet och lägger sedan till det till DOM.
Mer verbose? Ja. Svårare? Definitivt inte. Det är bara en annan typ av kodning.
$ ("# maintrigger"). klicka (funktion () $ ("p"). efter ("klickade");); $ ("maintrigger"). observera ("klicka", funktion (händelse) $ ("text").klickade'); ); $$ ("# maintrigger"). addEvent ("klicka", funktion () var elem = $ ("text"); var someElement = nytt Element ('div'); someElement.appendText ("Clicked!"). injicera (elem, "efter");); Alla dessa koduttag gör i huvudsak samma sak. Bara i olika stilar och med olika mängder kontroll.
Denna artikel var inte på något sätt avsedd att jämföra dessa ramar. Istället ville jag kalla läsarens uppmärksamhet åt de andra lönsamma lösningarna som finns tillgängliga utanför jQuery. Det är inte så jQuery är dåligt. Jag älskar jQuery, det är en underbar ram men det fokuserar främst på DOM och DOM ensam. Om du vill skriva en webbapplikation eller en renderare eller någon annan cool sak är det viktigt att skapa en underhållbar, utökbar, ren kod. Det är för dessa typer av scenarier när det är mer meningsfullt att tillgripa en annan ram.
Jag kunde bara välja två ramar i denna artikel på grund av rymdbegränsningar. Det finns ett antal andra, lika kraftfulla ramar som Dojo, YUI, Rico och GWT som också förtjänar din uppmärksamhet.
Förhoppningsvis har jag pikat på er intresserad av alternativa JavaScript-ramar idag och hoppas verkligen att du ska experimentera med andra ramar. Låt oss veta hur experimentet går i kommentarerna. Lycklig kodning!
