Camelize, CamelCase

Mandag den 20 oktober 2008

Som blev set i stillingen vifte af kodning og kodning tilgange, at en bygherre kan have til at løse problemer er forskellige, og mange af de samme programmeringssprog anvendes. Her kan du se, hvordan nogle af de mest populære Javascript rammer har løst en simpel funktion af CamelCase:

Prototype.js

Prototype.js, version 1.6.0.3, udtrykkeligt foreslår en metode camelize() CamelCase på en snor. Den fremgangsmåde er ganske enkelt for forfatteren og koden er selvforklarende. I dette tilfælde var der ingen brug af regulære udtryk!

JavaScript:
  1. camelize: funktion () (
  2. . split ( '-' ) , len = parts. length ; var dele = dette. split ('-'), len = dele. længde;
  3. len == 1 ) return parts [ 0 ] ; if (len == 1) tilbagevenden dele [0];
  4. . charAt ( 0 ) == '-' var = camelized dette. charat (0) == '-'
  5. ? ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) dele [0]. charat (0). toUpperCase () + dele [0]. substring (1)
  6. ] ; : Dele [0];
  7. var i = 1 ; i <len; i++ ) for (var i = 1; i <len; i + +)
  8. . charAt ( 0 ) . toUpperCase ( ) + parts [ i ] . substring ( 1 ) ; camelized = + dele [i]. charat (0). toUpperCase () + dele [i]. substring (1);
  9. camelized vende tilbage;
  10. )

Fortsæt læsning ... "

Related Post

jQuery mod alle: en benchmark med 5 browser

Onsdag den 17 september 2008

image Et godt bygherren har ikke noget problem at flytte fra et programmeringssprog til et andet. Valget til at fokusere på et bestemt sprog, rammer og udvikling af miljøet, er dikteret mere af tilgængeligheden af tid og type af arbejde, der finder sted. Men en vigtig faktor, der kan påvirke valget af "ramme" vil, er den sympati eller den sygdom, som kan modne over tid.
Specifikt, jeg ønskede at analysere nogle - ikke alle - Javascript rammer til rådighed i dag, fordi "anbefales" til at se primært på jQuery.
Skaberne af mootools (en af de mest populære Javascript ramme) har stillet et værktøj til at køre en test af hastighed og gyldigheden af fem kendte rammer Javascript: Slickspeed. Denne test, hvis resultater ikke rabat på alle, er vigtig som rammer Javascript client-side, der drives af vores browser. Det er netop derfor, at nogle finde Safari hurtigere end Internet Explorer eller Google Chrome hurtigere end Firefox. Men dette ofte afhænger af, hvilken type side du kigger på. I virkeligheden kan meget vel ske, at et bestemt websted er virkelig mere "fast" når den vises i Safari, men det betyder ikke, at "alle steder vil blive hurtigere med Safari! Naturligvis dette indlæg er gyldigt for alle andre browsere.

Benchmark

I prøver jeg udført med Slickspeed Jeg har sammenlignet den browser findes på min maskine (Utilmate Windows Vista 64bit - Intel Core 2 Quad 2,4 GHz med 8 GB RAM).
Desværre er den test er ikke i stand til at køre det med Internet Explorer 7, fordi blokerer bilen, selv gå ud af skalaen med resultaterne! Endnu en gang tillykke Microsoft.
Jeg crercato identisk at opretholde status af PC under prøven, som åbner browseren separat og ikke sender nogen anden kører processen.

Bemærk: Hvis du føler at du gør en eller flere af disse prøver, kan du kommentere dette indlæg i tilfælde af "nysgerrig" og forskellige resultater.

image

Google Chrome er virkelig hurtig, med en værdi på 68 (gennemsnit) i testen med jQuery. Den langsommere, men det syntes flok, til trods kommer fra den samme "mor" Mozilla. Dette dårlige resultat for flokken er virkelig nysgerrig givet sit opskæring sociale netværk, fordi det er det sociale netværk Web 2.0 udnytte mange af Javascript ramme til rådighed, således at der ydes en navigation og interaktion virkelig nyskabende.
En overraskelse beat Firefox og Opera har også en masse «, selv at få en 74 i Dojo! Firefox og Safari, når alt kommer til alt, er identiske med Safari hurtigere i test med Mootools og jQuery.

Hvilke rammer for at vælge?

Hvis ikke badiamo at teste den hurtighed i udførelsen og vi er ligeglade med størrelsen i Kbytes af de samme rammer, at svaret kunne være "hvad der er til dig" eller, hvis du foretrækker det, "hvad du kender bedst eller er mere harmonisk med din stil med programmering. "
I sidste ende er disse rammer vil se noget 'alle (se brugen af $ for eksempel), på trods af nogle vigtige og væsentlige forskelle, der kan springe i øjnene af en ekspert eller virkelig skubbet i et bestemt bibliotek. I princippet er faktisk alt, hvad der kan opnås med jQuery, for eksempel, kan du gøre godt med mootools eller prototype! Hvis jQuery har en meget kompakt syntaks, som alle metoder altid returnere jQuery objekt grundlag, hvilket skaber endeløse filer af oggetto.metodo().metodo().metodo()... fortalte, at det er på alle omkostninger en styrke, især for dem, der bliver nødt til at debug!
Biblioteker som prototype.js synd måske i mangel af grafiske effekter, selv enkle, tvinger bygherren til at gennemføre spin-off som scriptaculous.js, tungt og fjernt fra biblioteket første valg.

Et eksempel

Bare denne sidste grund, for eksempel, tog mig til at erstatte den koblede prototype, / scriptaculous med jQuery at gøre paneler interaktive / animerede her i indholdsoversigten af undolog.com. Selv ved hjælp af Google API til at importere biblioteker, er spild belastning hele biblioteket scriptaculous for en slideDown og slideUp. For oplysninger og prøve, her går Javascript-kode kombineret med den prototype, / scriptaculous:

JavaScript:
  1. / / Prototype / scriptaculous
  2. ) . each ( $ $ ( 'H2.dropdown «). Hver (
  3. element ) { funktion (element) (
  4. = "pointer" ; element. stil. markøren = "pointer";
  5. 'click' , element. observere ( 'klik',
  6. event ) { funktion (begivenhed) (
  7. this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration:. 5 } ) ; if (this. næste (). stil. display == "") nye effekter. BlindUp (this. næste (), (duration. 5));
  8. Effect. BlindDown ( this . next ( ) , { duration:. 3 } ) ; Virkning andet nyt. BlindDown (this. næste (), (varighed:. 3));
  9. event ) ; Begivenhed. Stop (begivenhed);
  10. )
  11. )
  12. )
  13. );

og det er nu med jQuery:

JavaScript:
  1. / / JQuery
  2. ) . each ( $ ( 'H2.dropdown «). Hver (
  3. i ) { funktion (s) (
  4. ) . css ( 'cursor' , 'pointer' ) . click ( $ (Denne). CSS ( 'cursor', 'pointer'). Klik på (
  5. funktion () (
  6. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (denne). next (). er ( ': skjult')) $ (denne). next (). slideDown (); ellers $ (denne). next (). slideUp ();
  7. )
  8. );
  9. )
  10. );

Når alt kommer til alt, på alle, tror jeg ikke, der er meget forskel! Men som jeg sagde før ... Spørgsmålet er "godt" af personlige smag.

Related Post

jQuery restyling

Søndag 31 august, 2008

I disse dage (i Rådet ...) Jeg kiggede på jQuery, et bibliotek stil prototype.js, scriptaculous.js, mooTools, for eksempel ... og her i dag, at hele webstedet er blevet fuldstændigt nydesignet:

image

Udmærket start for at udvide min horisont på denne type af biblioteker! Kommer snart offentliggør nogle interessante artikel, især om de forskellene mellem jQuery og andre biblioteker "ligner".

Related Post

Simple Harmonika med klassen USimpleTabStrip

Onsdag den 20 august 2008

Klassen USimpleTabStrip forelagt diskret Simple TabStrip, kan også bruges til at oprette en simpel menu Harmonika.
Brug af virkningerne af BlindUp() BlindDown() tilbydes af Scriptaculous:

JavaScript:
  1. funktionen init () (
  2. ; T = new USimpleTabStrip ();
  3. ; An. Init ();
  4. ( e ) { An. OnShow = funktion (e) (
  5. ( e ) ; nye virkning. BlindDown (e);
  6. )
  7. ( e ) { An. OnHide = funktion (e) (
  8. ( e ) ; nye virkning. BlindUp (e);
  9. )
  10. )

Og lægge den tilbage på HTML (HTML kilde):

HTML:
  1. > <div class = "accordion">
  2. > Accordion 1 </a> <a href = "#acc1"> Harmonika 1 </ a>
  3. > </a> <a name = "acc1"> </ a>
  4. <h1> Content # 1 </ h1>
  5. <p> Bla bla bla .... </ p>
  6. </ Div>
  7. > Accordion 2 </a> <a href = "#acc2"> Harmonika 2 </ a>
  8. > </a> <a name = "acc2"> </ a>
  9. <h1> Content # 2 </ h1>
  10. <p> Bla bla bla .... </ p>
  11. </ Div>
  12. > Accordion 3 </a> <a href = "#acc3"> Harmonika 3 </ a>
  13. > </a> <a name = "acc3"> </ a>
  14. <h1> Content # 3 </ h1>
  15. <p> Bla bla bla .... </ p>
  16. </ Div>
  17. </ Div>

Du får en enkel menu Harmonika, der kan anvendes i meget hurtigt.

Related Post

Simple diskret TabStrip

Torsdag den 14. august, 2008

USimpleTabStrip er en diskret Javascript for at forbedre classici link anker (endnu) i et HTML-side. Denne kilde er en forbedring af den funktion, der præsenteres i TabStrip diskret. I denne version også tilpasse koden til release 1.6 af prototype.js blev oprettet en reel klasse til at forvalte TabStrip. Frigivelse her er meget enkel og ligetil. Dets vigtigste arbejde ligger i at tilføje en begivenhed, skal du klikke på linket anker normale. Ikke indsendes CSS stilarter, lige til at forlade den maksimale frihed til handling, men du kan få en effektiv TabStrip med et par linjer kode tilføje CSS, se Tilføjelse CSS styles nedenfor.

HTML

Klassen USimpleTabStrip arbejder på en meget simpel HTML, de anker sftuttando <a name></a>

HTML:
  1. <! - Simpel liste af links på siden ->
  2. > Link 1 </a> </li> <li> <a href = "#tbs1"> Link 1 </ a> </ li>
  3. > Link 2 </a> </li> <li> <a href = "#tbs2"> Link 2 </ a> </ li>
  4. > Link 3 </a> </li> <li> <a href = "#tbs3"> Link 3 </ a> </ li>
  5. </ Ul>
  6. <! - Blokke / faner ->
  7. > </a> <a name = "tbs1"> </ a>
  8. <h1> Card # 1 </ h1>
  9. <p> Bla bla bla .... </ p>
  10. </ Div>
  11. > </a> <a name = "tbs2"> </ a>
  12. <h1> Card # 2 </ h1>
  13. <p> Bla bla bla .... </ p>
  14. </ Div>
  15. > </a> <a name = "tbs3"> </ a>
  16. <h1> Card # 3 </ h1>
  17. <p> Bla bla bla .... </ p>
  18. </ Div>

Koden div lige under anker a fra beholderen.

Fortsæt læsning ... "

Related Post

Tekst erstatning teknikker i Flash

Onsdag den 25. juni, 2008

Teknik Tekst erstatning, jeg fremlægger i dag, er i visse henseender, virkelig interessant. I modsætning til det klassiske billede i stedet for via CSS, denne teknik bruger en flash for at tilsidesætte titlerne på vores site. På trods af at være en smule mere, fordi det kræver oprettelsen af en Flash-film og brugen af Javascript, giver en række fordele ikke er ligeglade:

  • Holder 's adgang til webstedet ved hjælp af en True-diskret-Javascript, så webcrawlere og edderkopper fortsætte med at se den side, så enkel og korrekt HTML
  • Ikke kræver oprettelsen af billeder n for n titler. Bare en film til at erstatte alle titlerne på vores site, med betydelige besparelser i form af Download
  • Giver dig mulighed for at skabe enkle titler, men med Font normalt ikke anvendes på internettet
  • Teksten kan leveres i HTML, takket være de karakteristika af Flash
  • Teksten er valgbare
  • Er en flash kan du tilføje interaktivitet og animation af enhver art

Du vil opdage også, at denne procedure CSS er ikke praktisk taget højde!

Fortsæt læsning ... "

Related Post

Google AJAX API Library: et vendepunkt for udviklere

Torsdag den 29. maj 2008

AJAX API biblioteker Google, i sidstnævnte perdiodo, har udgivet en lang række værktøjer dedikeret til udviklere, løbende ajourføring af deres udgivelser. Nu kører ud til en aftale med populære AJAX rammer, og ikke kun til at centralisere fordelingen af bibliotekerne jQuery, prototype, script.aculo.us, MooTools og dojo!

I praksis kan du få adgang til disse biblioteker ved hjælp af infrastruktur og Google-netværket, med betydelige fordele i form af hastighed og sikkerhed.

Den hastighed, lastning, er garanteret af det samme netværk, at Google og give sig selv et distribueret server, der giver (som standard) lastning komprimeret (gzip / minify) bibliotek. Den hosting Google tættere på anmodning vil blive brugt til at sende koden, og hvis det ikke når ned eller midlertidigt, Google-netværket, vil stadig sende Javascript-kode!

Fortsæt læsning ... "

Related Post

Google AJAX sprog API og Prototype.js

Tirsdag den 13. Maj, 2008

At have set driften af Google AJAX API jeg kom til at tænke på en alternativ måde at oversætte vores virkelige websider. Udnytter prototype.js er muligt at markere HTML-tag, som vi ønsker at oversætte, i stedet for at udsætte hele dokumentet oversættelse. For at markere HTML-tag jeg brugte til at oversætte rel at det kommer translate at translate

HTML:
  1. > Questo testo deve essere tradotto </p> <p rel = "translate"> Denne tekst skal oversættes </ p>

Med en simpel funktion, så vi kan udnytte prototype.js at behandle alle HTML-tags med rel='translate'

JavaScript:
  1. / *
  2. ** @ Navn: oversætte ()
  3. ** @ Beskrivelse: oversætte
  4. * /
  5. funktion oversætte () (
  6. ) . each ( $ $ ( '[Rel = "oversætte "]'). Hver (
  7. e ) { funktion (e) (
  8. ( e. innerHTML , 'it' , 'en' , google. sprog. oversætte (e. innerHtml, 'det', 'da',
  9. result ) { funktion (resultat) (
  10. result. translation ) { if (result. oversættelse) (
  11. ; e. innerHtml = resultat. oversættelse;
  12. { Else ()
  13. 'Translate Error! \n \n ' + result. error . message ) ; alert ( 'Fejl Oversæt! \ n \ n "+ resultat. fejl. besked);
  14. )
  15. )
  16. );
  17. )
  18. );
  19. )

Du kan se det i aktion på e-lementi.com

Naturligvis, kan scriptet (eller skal) skal gennemføres med passende. Det interessante er dog, at der kan være specialiseret på en sådan måde, at erstatte de billeder (i tilfælde af knapperne i grafik, der indeholder tekst), eller lad ham udvikle TAG gerne INPUT eller TEXTAREA

En af de begrænsninger, jeg har fundet, og at voorei uddybe, hvor mange tegn, der kan oversættes. I tilfælde af vigtige tekster er ikke vanskeligt at opnå en fejl, at jeg lykkedes det i scriptet med en alert()

Related Post

Prototype med dynamiske HTML: stil og script

Fredag den 9. maj, 2008

Over et år siden skrev jeg en post (Dynamic HTML med Javascript), der er skitseret nogle teknikker til dynamisk tilføje style sheets og scripts til en HTML-side allerede indlæst. Hvem bruger Prototype.js kan i høj grad forenkle livet ved hjælp af for eksempel:

JavaScript:
  1. "dom:loaded" , dokument. observere ( "Søndag: lastes"
  2. funktion () (
  3. Element ( "script" , { type: "text/javascript" , src: "/js/altro.js" } ) ; var script = new Element ( "script", (type: "text / javascript" src: "/ js / altro.js"));
  4. ) [ 0 ] . insert ( script ) ; $ $ ( "Chef") [0]. Insert (script);
  5. )
  6. );

Når siden er indlæst document.observe tilføjer en ny script Javascript! For stilarter, som er nøjagtig det samme!

Related Post

Diskret Javascript: un po 'di klarhed og øje til imposters

Søndag 13 april, 2008

Nogle scripts, og nogle Web ved hjælp af nogle JavaScript-funktioner udgive sig for ikke-invasive (diskret), selv når de slet ikke. Hvad gør et script (normalt JavaScript) ikke indgribende? I princippet et script Javascript er ikke-påtrængende, når kan være mindre end det! Simpelthen! I at udvikle et websted anvendeligheden af det samme bør ikke afhænge af enhver script. Kun i dette tilfælde har vi en reel script diskret. Fortsæt læsning ... "

Related Post