JavaScript és jQuery szerszámosláda

Néhány szubjektívan válogatott eszköz, technológia és módszer, ami csillapíthatja a JavaScript fejlesztéskor fellépő kóros WTF tüneteket:

jQuery – http://jquery.com/

Alapvető függvénykönyvtár, ezzel van minden, nélküle csak a nagy büdös if(ie). Ettől lesz a JavaScript produktív és böngésző független. Már van belőle 1.5 verzió, ne higgy annak, amit a Studio új projekt létrehozásakor beletesz a projektbe.

Itt egy tömör bevezető hozzá: Vlad Azarkhin: The magic of jQuery

jQuery Code Snippets for Visual Studio 2010 – http://jquerysnippets.codeplex.com/

131 code snippet a VS 2010-hez, amivel a tipikus jQuery kódrészletek emberi idő alatt megírhatók. A lényeg mindössze 25 másodpercben: http://screencast.com/t/YjUyNDVjZD

jQueryUI – http://jqueryui.com/

Pár hasznos vezérlő [vezérlő JavaScriptben, na persze] (accordion, autocomplete, button, datepicker, dialog, progressbar, slider, tabs) interakciók (draggable, droppable, resizable, selectable, sortable) és animációk.

jQuery jGrowl plugin – http://stanlemon.net/projects/jgrowl.html

jQuery kiegészítő, segítségével egyszerűen lehet színes-szagos, ám szemet és orrot nem facsaró üzeneteket küldeni a felhasználónak.

jQuery Templates plugin – http://api.jquery.com/category/plugins/templates/

Bár még csak bétában van, ez üt rendesen: kliens oldali adatkötés. Megmondod az adat objektumot és a HTML template-et és ő renderel belőle DOM fát. Sőt, egy renderelt DOM objektumhoz meg tudja mondani, hogy milyen adat objektum tartozik hozzá!

A szintaktika még képlékeny, de a képességeiről ez egy jó bevezető:
http://stephenwalther.com/blog/archive/2010/11/30/an-introduction-to-jquery-templates.aspx

QUnit – http://docs.jquery.com/Qunit

Unit tesztelés JavaScriptben, mert persze azt is lehet. Nem kifejezetten puszipajtások a jsTestDriverrel, ami böngészők meghajtására és automatizált tesztfuttatásra használható, inkább Hacsek és Sajóként egészítik ki egymást: http://code.google.com/p/js-test-driver/

Rangy – http://code.google.com/p/rangy/

Hasznos kis osztályfüggvénykönyvtár, megoldja a kurzor mozgatás és kijelölések kezelésének böngészőfüggetlenítését. Még gyerekcipőben jár, de már nagy segítség, ha ilyen feladatokkal szembesülsz.

log4javascript – http://log4javascript.org/

Kliens oldali naplózásra használható függvénykönyvtár.

Íme, az 1 oldalnyi tudnivaló:
http://log4javascript.org/docs/quickstart.html

Objektum orientált JavaScript

Nos, a JS nem objektum orientált. Legalábbis nem klasszikus értelemben. Nincsenek benne igazi osztályok, viszont benne nagyjából minden függvény, objektum és tömb is egyben. Ha elég perverz vagy, akkor ennyiből le tudod vezetni az OOP mantrát.

A teljes OOP ritkán kell, viszont van pár haladóbb JS mumus, amivel praktikus megismerkedni, mielőtt kiugrik a szekrényből. Ez segíthet elindulni: http://www.slideshare.net/djsipe/object-oriented-javascript-presentation

JSON

Ha ismered a JavaScriptet, akkor a JSON nem fog újdonságot jelenteni: egyszerű objektum sorosítási szintaktikáról van szó. Ha érdekel az elmélet, itt a specifikáció ékes anyanyelvünkön: http://json.org/json-hu.html Talán egy fokkal egyszerűbb, ha rápillantasz erre a példára, magáért beszél: http://www.json.org/example.html

HTML 5 data- attributes

Ez egy elég bizarr rész a HTML 5 specifikációban, az egyetlen szerencséje, hogy visszafelé teljesen kompatibilis. Arról szól, hogyan pakoljunk HTML attribútumokba tetszőleges adatot.

Az 1 oldalas kötelező olvasmány: http://ejohn.org/blog/html-5-data-attributes/

És mindez a fotelból ülve, akarom mondani jQuery-vel: http://api.jquery.com/data

VS JS IntelliSense

Az IntelliSense nélkül megáll az élet a Visual Studioban. Ez egy olyan drog, amire aki egyszer rászokott, nem tud leszokni. Előre szólok, hogy JS fejlesztésnél garantáltan lesznek elvonási tünetek. Szerencsére lehet a JavaScript kódhoz is XML kommenteket írni, amit az IntelliSense támogat is. Itt írják le a használatukat tömören: http://weblogs.asp.net/bleroy/archive/2007/04/23/the-format-for-javascript-doc-comments.aspx

Amire vigyázni kell:

  • Nem tökéletes az XML kommentek feldolgozása és főleg nem hibatűrő. Ha elrontasz valamit, megszűnik a JS IntelliSense, mindenféle hibaüzenet nélkül. Persze néha akkor is leáll, ha mindent jól csinálsz Arc nagy mosollyal
  • Vannak bizonyos nyelvi elemek, amiket nem támogat, például a prototype-hoz írt XML kommentek többnyire nem jelennek meg.
  • Praktikus lenne, ha a visszatérési típust a returns blokkban megadva utána felkínálná az adott típus tulajdonságait. Na ez többnyire nem működik, sőt épp ellenkezőleg, ha a Studio ki tudná találni, hogy mi a visszatérési típusa egy függvénynek, a returns type=”akármi” elemmel el lehet venni az eszét. Ezt inkább kerüljük.

VS JScript Editor Extensions – http://visualstudiogallery.msdn.microsoft.com/872d27ee-38c7-4a97-98dc-0d8a431cc2ed/

Ez egy VS 2010 bővítmény, amiben hiszünk, hogy jobbá teszi az életünket. Kicsivel praktikusabb, mint egy tibeti imamalom. De csak kicsivel.

Apropó VS 2010 bővítmények: a Productivity Power Tools tényleg hasznos, van annyi funkciója, hogy éveken keresztül minden nap tanulhatsz valami újat: http://visualstudiogallery.msdn.microsoft.com/d0d33361-18e2-46c0-8ff2-4adea1e34fef

Firebug – http://getfirebug.com

A webfejlesztők svájcibicskája, minden kódtúró MacGyver zsebében ott a helye. Pontosabban a Firefoxában, ugyanis oda épül be. Amire a leggyakrabban szükséged lesz:

FireQuery – http://firequery.binaryage.com/#screencast

A Firefox pluginjének pluginje, kiegészítő a kiegészítőhöz, ugyanis a Firebug képességeit terjeszti ki. Például közvetlenül lehet vele az oldalon jQuery selectorokat futtatni, ami sokkal gyorsabb, mint alertekkel kísérletezni, hogy vajon ráhibáztál-e egy selector kifejezésre. A fenti URL-en lévő moziból minden kiderül.

 

5 thoughts on “JavaScript és jQuery szerszámosláda

  1. Szőke László Zsolt

    Szép csokor, jól néz ki, köszönet érte!
    Webfejlesztéssel (egyelőre) nem foglalkoztam; miért fontos a javascript egy “microsoftos” fejlesztőnek, ha teszem fel, csak windowsos platformra fejleszt, ha mondjuk kliens és szerverorldalon is csak Windows meg IE van? Meg egyáltalán?

    1. Balássy György Szerző

      Leginkább a Google miatt🙂 Ők kezdték el ugyanis azt a fajta böngésző oldali interaktivitást, amihez a felhasználók már hozzászoktak és szinte el is várják. Szerintem manapság már nincs olyan, hogy kizárólag szerver oldali webfejlesztő, a PHP, JSP vagy ASP.NET tudás mellett a jQuery nélkülözhetetlen. Nem véletlen, hogy a Microsoft is ezt tette bele az MVC-be.
      Ami meg az IE-t illeti: nagyon kevés olyan környezetet láttam eddig, ahol kliens oldali csak IE van. Annál már az is gyakoribb, hogy csak valami más, csak IE nem🙂

  2. Danyi Dávid

    Nem olyan nagy rettenet az a html5 data attrib🙂

    Linkek közé én még hasznos lehet:
    – JQuery tools [http://flowplayer.org/tools/index.html]
    – JQtouch [http://jqtouch.com/]

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s