jQuery - Javascriptovani nechte doma - mrknete na jQuery

9.8.2007 10:37 | Přečteno: 2960× | Vývoj webu (html,css,js) | poslední úprava: 29.8.2007 08:01

jQuery - dobrej framework, co rikate?

Teda kdyz sem videl, co vse jQuery umi - hazim do pranice, kaslete na vlastni jskovani a jdete pod Velkeho bratra. At uz se jedna o mensi ci stredni web - jednoznacne jdete do toho!

Doporucuji mrknout na dokumentaci, kde zjistite zaklady. Dalsi info naleznete na intervalu.cz.

Jenom mensi nastin: jQuery('#idObj','.classObj') -> no tak tohle vraci napr. objekty s id a class a vrati je... narez, ale tohle ma jeste jednu perlicku - XPATH!!

---

Vice naleznete na officialnich strankach jQuery

Dalsi info dle zajmu a popr. obsahu diskuze. Cau

---

Updated: 29.08.2007 08:00

Vysla nova verze jQuery 1.1.4 (zdroj). Tak se na ni zvedavy, jiz ted se snazim o nejake testy, malo casu.... Ale uvidime, budeme referovat.

Dale zajimavosti jest testovaci stranka co se tyce ruznych testu, napr. pristupu k jednotlivym DOM objektum (zdroj)

---

Updated: 10.08.07 07:43

V diskuzi zaznel nazor(Daniel Kvasnicka ml.)

A jake "nastroje" ten kompletni framework nabizi? Jestli nejake, tak nejspis stejne lehounce asimilovanou knihovnu typu Prototype nebo MochiKit. Idealni je mit perfektni framework, ktery s sebou zadny dalsi JS framework netahne a pouzit k nemu jQuery.

jQuery - view a la gride-splitted-client-soft

Mozna sem te asi pochopil nepochopil, ale muzes mi rict, jakym frameworkem obsahes na klientovy takovy silenosti, jako dragDrog grid nebo dragDrop splitter[kazda sekce je drag&drop (dale jen D&D) a muzes si stranku poskladat jak potrebujes - a la eclipse] nebo 3-col layout, pricemz okraje okrajovych sloupcu je mozne posouvat a menit velikost(taky a la eclipse) - toto nabizi oficialni plugin - interface

jQuery - plugin Interface (poskladej si co potrebujes, a muzes stavet)

View vrsta se v intranetich apps pomalu ale jiste blizi k view klient aplikacim, ano jsko je docela problematicke na psani takovychto megaFcnosti, ale paklize je to osetreno takovym to frameworkem, kt. je oddladen a v intranetu te nejake to kb navic nevadi, tak neni co resit. Nehlede nato, firemni extranet neni o nejakejch kb, ale nasi zakaznici maji linky v mb. Nehlede jQuery poskytuje kompimovane knihovny (popravde receno, ale dosti nepraktice, paklize si potrebujes neco dopsat), takze na ostry provoz, to vidim, jako jednotlive js.libraly, dle potreby - >(interface dependencies - narez)

---

Updated: 09.08.07 11:40

Odkazy:

• jQuery - official documentation(en)
• How jQuery works(en)
• Tutorials(en)
• jQuery - lehky uvod(cz)
• jQuery je sexy(cz)

---

Nejake ukazky:

Pouziti selectoru a udalosti (prevzato z jquery-tutorials sites)

 $(document).ready(function(){
   $("a").hover(function(){
     $(this).parents("p").addClass("highlight");
   },function(){
     $(this).parents("p").removeClass("highlight");
   });
 });

 $(document).ready(function() {
   $("#orderedlist > li").addClass("blue");
 });


 $(document).ready(function() {
   $("#orderedlist li:last").hover(function() {
     $(this).addClass("green");
   },function(){
     $(this).removeClass("green");
   });
 });

 $(document).ready(function() {
   $("#orderedlist").find("li").each(function(i) {
     $(this).append( " BAM! " + i );
   });
 });

 $(document).ready(function() {
   // use this to reset several forms at once
   $("#reset").click(function() {
     $("form").each(function() {
       this.reset();
     });
   });
 });

XPATH - to je peklo.....

 $(document).ready(function() {
   $("a[@name]").css("background", "#eee" );
 });

 $(document).ready(function() {
   $("a[@href*=/content/gallery]").click(function() {
     // do something with all links that point somewhere to /content/gallery
   });
 });

       

Anketa

Obrázky

Komentáře

[tomm]

Pouzivame, spokojenost ... kolega rika, ze to zkrati JS kod tak na 1/4. Navic se nemusime zabyvat odlisnostmi prohlizecu a k dispozici je take sada hotovych komponent.

[derddddd]

Hm, a jak velky je ten projekt? Zajimalo by me zdali je to soukrome, nebo komercni... V nasi firme to davame do prototypu noveho intranetu. Zatim to testujeme, ale jiz ted mohu rict, ze i vetsi projetky s jQuery jsou mozne!

[tomm]

Velky komercni projekt. Ze zacatku jsme tam zadny JS nemeli, ale doba si to zada, takze kde je to smysluplne, tak vylepsujeme uzivatelsky interface.

[phero]

Hezký, ale přece jen se mi jeví lepší použít kompletní web framework. A jedině Ruby On Rails, indeed.

[derddddd]

Mozna drze a neslusne.... Jake s RoR mate zkusenosti, muzete mi jej nejak priblizit, napr. skrze kratke povidani na vasem blogu. Co rikate? Ruby me tez oslovilo, ale jako kazdy dev, malo casu... Sepiste mensi uvod s linkama. Diky.

[phero]

Jen si s tim tak hraju. Ale díval jsem se na různé webové frameworky. A rails (nejen) díky tomu, že je napsán nad ruby je to nejelpší k dispozici - i když pro někoho možná trošku složítý. Doporučil bych koupit http://www.pragmaticprogrammer.com/title/rails/ a pak (jako vždycky) začít se účit praxí.

[tomm]

A kde vidite tvrzeni, ze JQuery nelze pouzit s jinym webovym frameworkem?

[phero]

Však píšu, že je hezčí použít přímo nástroje kompletního web frameworku.

[Daniel Kvasnička ml.]

A jake "nastroje" ten kompletni framework nabizi? Jestli nejake, tak nejspis stejne lehounce asimilovanou knihovnu typu Prototype nebo MochiKit. Idealni je mit perfektni framework, ktery s sebou zadny dalsi JS framework netahne a pouzit k nemu jQuery.

[tomm]

Lepe bych to nevyjadril

[freshmouse]

Gratuluji k umění použít tučné písmo a kurzívu.

[derddddd]

Gratuluji k umění použít tučné písmo a kurzívu.

Grafomanie - je jednou z mnoha diagnoz, na me osobe prokazanych....

[Abraxis]

jQuery jsem objevil pred par tydny pro jeden svuj mensi projekt a je to fakt "JavaScript done right". Je s tim naprosto radost pracovat.

[Daniel Kvasnička ml.]

jQuery totally rocks. A jeste vic masakr je to s pouzitim Taconite pluginu (kdo nechce jQuery, necht pouzije Taconite samostatne). To je pak AJAX jako remen.

No a kdyz uz clovek musi delat web v Jave, tak je na cisty AJAX asi nejlepsi DWR, ktere vse posouva do jine dimenze a nabizi na strane klienta primo pristup napr. ke Spring beans ve forme JS objektu. Skoda, ze neco takoveho nemam v Djangu

[peter]

Inac co si myslite o google web toolkit? Ako pozeram na toto, moc sa to gwt ani neoplati. Hrozne ma stve ten ich java mod, ked 512M ramky je malo, ale zas sa to lahko debuguje a neni take lahke rozpoznat co robi kod (nevrta sa vam v tom kazdy...).

[Daniel Kvasnička ml.]

Chystam se to trochu prozkoumat. Nevim co vam vadi na tom, ze to pisete v Jave. Neni to lepsi nez se rucne piplat s DOMem? S radosti bych na miste Javy videl Python (projekt Pyjamas zda se umrel), ale i tak lepsi nez ten paskvil JS.

[peter]

Mne nevadi, ze to pisem v jave, to sa mi prave na tom paci. Mne vadi, ze ked sa to ladi, tak nabehne taky ich embedded java browser (nic sa zatial nepreklada do js) a to mozem vzdy cakat, kym sa mi odswapuje polka ramky, napokon ako pri vyvoji pomaly kazdej java aplikacie - to je snad jedina vec co sa mi na jave nepaci, potrebuje tony pamate (planujem dokupit 2G). To uz rovno mozem skusat v browseri ako nativne prelozene js (ja ladit napokon nepotrebujem, som neomylny ) (co prelozit tiez chvilu trva).
Ja by som skor potreboval nejaky framework, kde by som napisal plne ajax aplikaciu a fungovalo by to aj keby bol vypnuty javascript (ako neajax).

[Michal Vyskočil]

Možná je to tu trochu OT, ale našel jsem tohle IDE pro Javascript (napsané v Javascriptu).

[derddddd]

Hm, zajimave.... diky za link..., ale zajimalo by me...., co je to "OT"? - offtopic?

[Daniel Kvasnička ml.]

Jeste k XPath... nadsen jsem z te podpory v jQuery byl jen dokud jsem nevedel jaka cast XPath je podporovana Myslim, ze by autory jQuery nezabilo, kdyby pouzili nejakou standalone knihovnu implementujici kompletni XPath (ajaxslt?).

A kdyz uz jsme u XPath. CSS working group by mohla zapracovat na standardizaci pouziti XPath selektoru v CSS (i kdyz nekdy jsou klasicke CSS selektory lepsi). Bylo by to brutalni combo. A vzhledem k tomu, ze prakticky kazdy mainstream prohlizec XPath umi, nemuselo by s tim byt tolik prace. Ale to je asi moc radikalni navrh...

[Jiří (BoodOk) Kadeřávek]

Udělal jsem si pár benchmarků na adresování elementů přes id, protože mne zajímalo jak je jQuery rychlé. Zde jsou výsledky. Samozřejmě jQuery umožňuje adresovat elementy i jinak než předchozí metody, což může dobrý programátor využít k optimalizaci, to ale nebylo předmětem benchmarku. Tělo testovaného dokumentu mělo cca 250KB a několik set adresovatelných elementů.

Výsledky pro mozillu firefox 2:

0.093 ms/pass for benchmark_direct() /* přímé adresování elementu přes globální namespace JS (nestandardní, původně jen MSIE) */
0.049 ms/pass for benchmark_getelementbyid() /* W3C getElementById */
0.103 ms/pass for benchmark_document_all() /* document.all (původně jen MSIE) */
5.218 ms/pass for benchmark_jquery()

Výsledky pro mozillu msie 7:

0.422 ms/pass for benchmark_direct()
1.187 ms/pass for benchmark_w3c()
2.469 ms/pass for benchmark_document_all()
3.156 ms/pass for benchmark_jquery()

Výsledky pro konqueror 3.5.6:

0.075 ms/pass for benchmark_direct() /* překvapení, konqueror 3.5.6 uz tedy přímé adresování zvládá */
0.086 ms/pass for benchmark_getelementbyid()
0.078 ms/pass for benchmark_document_all()
3.637 ms/pass for benchmark_jquery()

Kód scriptu:
============

var PASSES = 1000;

function benchmark()
{
	var time = new Date();

	var ms = time.getTime();
	for(var i = 0; i < PASSES; i++)
		benchmark_direct();

	var time = new Date();
	document.getElementById('result').innerHTML += ((time.getTime() - ms)/PASSES + ' ms/pass for benchmark_direct()
');

	var ms = time.getTime();
	for(var i = 0; i < PASSES; i++)
		benchmark_getelementbyid();

	var time = new Date();
	document.getElementById('result').innerHTML += ((time.getTime() - ms)/PASSES + ' ms/pass for benchmark_getelementbyid()
');

	var ms = time.getTime();
	for(var i = 0; i < PASSES; i++)
		benchmark_document_all();

	var time = new Date();
	document.getElementById('result').innerHTML += ((time.getTime() - ms)/PASSES + ' ms/pass for benchmark_document_all()
');


	var ms = time.getTime();
	for(var i = 0; i < PASSES; i++)
		benchmark_jquery();

	var time = new Date();
	document.getElementById('result').innerHTML += ((time.getTime() - ms)/PASSES + ' ms/pass for benchmark_jquery()
');
}

function benchmark_direct()
{
	var elm1 = Licenses__$settings_license__lic_pap;
	var elm2 = User__usr_username;
}

function benchmark_document_all()
{
	var elm1 = document.all.Licenses__$settings_license__lic_pap;
	var elm2 = document.all.User__usr_username;
}

function benchmark_getelementbyid()
{
	var elm1 = document.getElementById('Licenses__$settings_license__lic_pap');
	var elm2 = document.getElementById('User__usr_username');
}

function benchmark_jquery()
{
	var elm1 = $('#Licenses__$settings_license__lic_pap');
	var elm2 = $('#User__usr_username');
}

[Jiří (BoodOk) Kadeřávek]

metody benchmark_w3c() u msie si nevšímejte, z důvodů názornosti jsem ji posléze změnil na benchmark_getelementbyid(). Mimochodem, tohle je jeden z hlavních důvodů, proč nemám MSIE rád. Je pomalý.

[derddddd]

Hm, vida - dekuji za vasi ochotu..., zajimave,...

...,myslim si, ze jiste najdeme i jine duvody proc nemit rad MSIE.

[Jiří (BoodOk) Kadeřávek]

To si pište