Avatar billede Slettet bruger
19. november 2010 - 22:59 Der er 8 kommentarer og
1 løsning

Ny jQuery'ist i tvivl

Jeg har idag taget hul på jQuery - alle der "ved noget" er begejstrede, og de eksempler jeg har set, er, mildt sagt, overbevisende, så nu skal det være!

Jeg bruger selvfølgelig en seneste version: 1.4.4
- men ER det en god idé, i forhold til "ældre" plugins ?

Jeg har lagt mærke til at de tit benytter, noget der ligner:

$(".flyver").live("click", function(event)
    {
    })

Mens jeg netop har lært at bruge:

$(".flyver").click(function(event)
    {
    })

Begge dele virker (tilsyneladende på samme måde) i version 1.4.4..

Betyder det at jQuery "altid" er bagudkompatibel (og at jeg kan slappe af)
- eller er der en faldgrube her ?
Avatar billede bkp Nybegynder
19. november 2010 - 23:19 #1
Live er forholdsvist nyt (siden 1.3), og den er optimeret performancemæssigt meget i de seneste versioner, og bør efter min mening kun bruges i de seneste versioner, da tidligere versioner ikke tilgår Dom objekterne optimalt.

Men det smarte ved Live i forhold til at binde med f.eks. click direkte er at med Live lægges en funktion i top af dokumentet med f.eks. en click event, som ved klik finder alle objekter der passer på den select streng der er angivet og udfører funktion imod de fundne objekter.

Click metoden er dog i mange tilfælde rigeligt og mange gange det smarteste, da event bindes direkte til objektet.

Men som du sikkert kan fornemme af beskrivelsen så vil Click eventen kun bindes til de objekter der findes på det angivne tidspunkt, så hvis der senere kommer flere objekter til dit dokument, så har de ikke denne event, men da Live metoden knytter en event til dokumentet, så vil den ved eksekvering først her lede efter objekter der passer til dit filter, og vil hermed fyrre funktion af mod alle objekter også dem der lige er oprettet.

Ja forklaringen blev vist lidt lang, men det er svært at gøre det kortere. Håber det giver mening

Men derfor er det svært at pege på en funktion frem for en anden, det kommer an på om dine objekter er konstant, så vil jeg anbefale ikke at bruge Live, men at binde events direkte på objekterne.
Avatar billede bkp Nybegynder
19. november 2010 - 23:27 #2
Ang. hvilken version du skal bruge, så vil jeg helt klart anbefale at bruge min. 1.4.3 da den er langt hurtigere end tidligere versioner.

Jeg forsøger så vidt muligt at undgå plugins, men det kan selvfølgelig blive nødvendigt, men vær lidt kritisk da der er en del dårlige plugins, og du kan faktisk gøre det meste selv uden plugins.

Husk på enhver dårlig udvikler kan distribuere en plugin, men hvis en plugin ikke kan køre på min. 1.4.3 vil jeg gå langt uden om.
Dette er min personlige mening ;-)

Læs mere om de fantastiske forbedringer der er gjort her:
http://bkristensen.tumblr.com/post/1358617651/jquery-1-4-3-frigivet
Avatar billede Slettet bruger
20. november 2010 - 02:08 #3
Aha - det er jo en væsentlig  forskel!

Lad mig lige fortolke det du siger:
En click event tilføjet med .click() berører kun de elemeter som er dækket af selectoren på det tidspunkt hvor .click() udføres (som forventet)

Men en click event som tilføjes med .live("click") berører også elemeter som oprettes senere - eller senere f.eks. tilføjes en ny class som matcher selectoren foran .live() kaldet.

Hvis jeg f.eks har:

$(document).ready(function()
    {
    $(".svulmer").live('click', function(event)
        {
        $(this).animate({fontSize:40},"slow");
        });
    });

Og så senere i koden laver:

$("#abc").addClass("svulmer");

Så vil elementet med id=abc få tilføjet class'en "svulmer" (selvfølgelig).
- men samtidig "automagisk" også få click-event'en tilføjet!

Mens:

$(document).ready(function()
    {
    $(".svulmer").click(function(event)
        {
        $(this).animate({fontSize:40},"slow");
        });
    });

Og senere i koden:

$("#abc").addClass("svulmer");

IKKE vil tilføje click-eventen til elementet med id=abc.
Avatar billede Slettet bruger
20. november 2010 - 02:47 #4
"Den nye" er iøvrigt 1.4.4 (http://blog.jquery.com/)

Med hensyn til plugins, så er "planen" at benytte disse 4:

http://www.uploadify.com/
Tillader upload af flere filer på én gang (med flash i maven)
Og mulighed for at specificere "lovlige" extensions på forhånd : )


http://deepliquid.com/projects/Jcrop/
Som lader brugeren klippe i et billede (efter upload f.eks.)


http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
Meget bedre prompt-erstatning end min hjemmesnedkererede..
- selvom den ikke er HELT identisk til den oprindelige js-prompt syntax:
var ordre = prompt("Hvad skulle det være?", "Jeg kigger bare");
Denne kræver en callback..


http://abeautifulsite.net/blog/2008/05/jquery-right-click-plugin/
- til custom context-menuer
(mindre sikker på denne, fordi jeg har en rimelig stabil én selv..)


Kender du dem - er der nogle af dem man skal holde sig fra ?
Avatar billede bkp Nybegynder
20. november 2010 - 08:30 #5
#3 - ja det er rigtig forstået, men brug dog kun Live hvis det virkelig er nødvendigt, da Live jo nødvendigvis skal søge efter dom objekter der passer til din selector hver gang den event kører.

#4 - Jeg ved godt der er kommet en ny version ;-)

For at være helt ærlig så kender jeg dem ikke, men umiddelbart ser de da fornuftige ud.

Ang. dialogboxe så har teamet bag jQuery selv lavet en UI plugin med en masse features, blandt andet dialogbokse (http://jqueryui.com/demos/dialog/), men den du har fundet ser egentlig meget simpel ud, hvilket er godt ;-)

Når du vælger et bibliotek vil jeg anbefale dig at kigge på

1. js filernes størelse og eventuelt minify dem (hvis det ikke er gjort)
2. Simpelt er som regel bedst, hvis der er mange muligheder, er der som regel også større chance for at mere kan gå galt.
3. Tjek om den har fået bedømmelser på jQuery's plugin hjemmeside: http://plugins.jquery.com/
Avatar billede bkp Nybegynder
20. november 2010 - 08:47 #6
Lige en ting mere:
Hvis du kan finde et bibliotek der er hostet ved f.eks. google, så er det bedst at linke til disse scripts, da man derved deler bibliotek med de fleste andre sider, og derved mindsker man trafikken på sin egen server, og hvis brugeren allerede har filen i sin cache (hvilket i de fleste tilfælde er tilfældet hvis du benytter biblioteker fra google's code bibliotek) så hentes den ikke igen.

Se mere her:
http://code.google.com/intl/da-DK/apis/libraries/devguide.html#Libraries

Eksempel reference til 1.4.4:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>


Eksempel reference til seneste jQuery og UI version 1.*:
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" />
</head>


Læg mærke til at hvis du ændrer linket fra .../1.4.4/... til .../1/... så vil du altid benytte den seneste stabile version, så begge dele vil i øjeblikket give samme resultat, men senere vil det sidste eksempel benytte den sidste version.

Dette link giver et overblik over link til UI stylesheets som kan benyttes:
http://encosia.com/2009/10/11/do-you-know-about-this-undocumented-google-cdn-feature/
Avatar billede Slettet bruger
20. november 2010 - 11:17 #7
Det er gode råd - takker mange gange!

Jeg er dog "lidt loren" ved at inkludere scripts "udefra" - sådan rent principielt - fordelen er jo åbenbar, men er ER også risici: Bagudkompabilitet og dét at et (svært sikkert, men aligevel) hack hos Google eller MS, så også ville ramme mig og mine kære brugere..
Ja, jeg ved godt at jeg er tusinde gange lettere at hacke end Google og MS, men alligevel..

Læg et svar, og få din bekomst!
Avatar billede bkp Nybegynder
20. november 2010 - 11:35 #8
Det er selvfølgelig et problem hvis googles domæne er nede, men tror du selv det vil ske, og hvis det sker, burde det ikke tage lang tid at ændre hovedet på din side :-)

Hvis det skete så er der godt nok problemer på rigtig mange sider på nettet ;-)

I min verden er det best practice at linke til google eller microsofts biblioteker, og hvis det er nede i 5 min. så overlever vi nok :-)
Avatar billede Slettet bruger
20. november 2010 - 11:59 #9
Lige en enkelt ting, fra kommentarerne til Encosia-bloggen:
Hvis man refererer til den seneste version (med ".1." eller ".1.4.") i stedet for en specifik version (med ".1.4.4.") så caches filerne kun i EN TIME, hvor de specifikke bliver cachet i et helt år (afhængig af brugeren selvfølgelig)
- værd at tage med i beregningen..
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester