Camelize, CamelCase

Måndagen den 20 oktober, 2008

Som sågs i efterhand olika kodning och kodning metoder som en utvecklare kan ha för att lösa problemen är olika och många av de samma programmeringsspråk används. Så här några av de mest populära Javascript ramar har löst en enkel funktion av CamelCase:

Prototype.js

Prototype.js, version 1.6.0.3, uttryckligen föreslår en metod camelize() CamelCase på ett snöre. Metoden är ganska enkel för frågeställaren och den kod är självförklarande. I detta fall fanns det ingen användning av reguljära uttryck!

JavaScript:
  1. camelize: funktion () (
  2. . split ( '-' ) , len = parts. length ; var delar = detta. Split ('-'), len = delar. längden;
  3. len == 1 ) return parts [ 0 ] ; if (len == 1) återvända delar [0];
  4. . charAt ( 0 ) == '-' var = camelized detta. charat (0) == '-'
  5. ? ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) delar [0]. charat (0). toUpperCase () + delar [0]. delsträngar (1)
  6. ] ; : Delar [0];
  7. var i = 1 ; i <len; i++ ) för (var i = 1, i <len, i + +)
  8. . charAt ( 0 ) . toUpperCase ( ) + parts [ i ] . substring ( 1 ) ; camelized = + delar [i]. charat (0). toUpperCase () + delar [i]. delsträngar (1);
  9. camelized avkastning;
  10. )

Fortsätt läsa ... "

Liknande Post

jQuery mot alla: ett riktmärke med 5 webbläsare

Onsdagen den 17 september 2008

bild En bra utvecklare har inga problem att flytta från ett programmeringsspråk till ett annat. Valet att fokusera på ett visst språk, ram och utvecklingsmiljö, styrs mer av tillgången på tid och typ av arbete som äger rum. Men en viktig faktor som kan påverka valet av "ram" som är den sympati eller sjukdom som kan mogna med tiden.
Specifikt, jag ville analysera vissa - inte alla - Javascript ram som finns idag, eftersom "råd" att titta främst på jQuery.
Skaparna av mootools (en av de mest populära Javascript ram) har ställt ett verktyg för att köra ett prov på snabbhet och giltigheten av fem kända ramen Javascript: Slickspeed. Detta test, resultaten inte rabatt på alla, är viktigt eftersom de rambestämmelser Javascript på klientsidan, som drivs av våra läsare. Det är just av denna anledning som vissa tycker Safari snabbare än Internet Explorer eller Google Chrome snabbare än Firefox. Men detta ofta beror på vilken typ av sida du visar. I själva verket kan mycket väl hända att ett visst område är egentligen mer "snabb" när den visas i Safari, men det innebär inte att alla platser kommer att bli snabbare med Safari! Naturligtvis detta inlägg är giltig för någon annan webbläsare.

Riktmärket

I tester jag utförts med Slickspeed Jag har jämfört den webbläsare som finns på min maskin (Utilmate Windows Vista 64 bitar - Intel Core 2 Quad 2,4 GHz med en 8GB RAM).
Tyvärr är de tester som inte kan köra det med Internet Explorer 7, eftersom blockerande bilen, även gå ut i skala med resultaten! Än en gång, grattis Microsoft.
Jag crercato identiska att bibehålla status av PC under testet, öppna browser separat och inte skicka någon annan som kör processen.

Observera: Om du känner för att du gör ett eller flera av dessa tester kan du kommentera det här inlägget i fallet med "nyfiken" och olika resultat.

bild

Google Chrome är verkligen snabb, till ett värde av 68 (genomsnitt) i testet med jQuery. Den långsammare, men det verkade Flock, trots kommer från samma "mamma" Mozilla. Detta dåliga resultat för Flock är verkligen märkligt med tanke på dess att minska sociala nätverket, eftersom det är det sociala nätverket Web 2.0 utnyttja många av Javascript ramen tillgängliga, så att det ger en navigering och interaktion verkligt innovativa.
En överraskning slå Firefox och Opera har också en mycket ", fick en 74 i Dojo! Firefox och Safari, när allt kommer omkring är likadana, med Safari snabbare i tester med Mootools och jQuery.

Vilka regler att välja?

Om inte badiamo att testa hastigheten för utförande och vi bryr oss inte om storleken på Kbyte av samma ram, svaret kan vara "vad som passar för dig" eller, om du föredrar det, "vad du vet bäst eller är mer harmonisk med din stil i programmering. "
I sista hand kommer dessa ramar kommer att se något "alla (se användningen av $ till exempel), trots några viktiga och stora skillnader som kan hoppa i ögonen av en expert eller verkligen drivit i ett särskilt bibliotek. I princip, egentligen allt som kan uppnås med jQuery, till exempel, du kan göra och med mootools eller prototyp! Om jQuery har en mycket kompakt syntax, som alla metoder alltid återlämna jQuery objekt grund, vilket skapar oändliga filer av oggetto.metodo().metodo().metodo()... är inte sagt att det är på alla kostnader som en styrka, särskilt för dem som blir tvungna att felsöka!
Bibliotek som prototype.js synd kanske i avsaknad av grafiska effekter, även enkla, tvinga exploatören att genomföra Spin-off som scriptaculous.js, tunga och långt från biblioteket första val.

Ett exempel

Just detta sista orsak, till exempel, tog mig för att ersätta de kopplade prototyp / scriptaculous med jQuery för att göra skivor interaktiv / animerade här i sidofältet i undolog.com. Till och med hjälp av Googles API för att importera bibliotek, är ett slöseri ladda hela biblioteket scriptaculous för en slideDown och slideUp. För information och prov, här går Javascript-kod tillsammans med den prototyp / scriptaculous:

JavaScript:
  1. / / Prototype / scriptaculous
  2. ) . each ( $ $ ( "H2.dropdown"). Varje (
  3. element ) { funktion (element) (
  4. = "pointer" ; element. stil. markören = "pointer";
  5. 'click' , element. observera ( "klicka",
  6. event ) { funktion (händelse) (
  7. this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration:. 5 } ) ; om (this. nästa (). stil. display == "") nya Effect. BlindUp (this. nästa (), (duration. 5));
  8. Effect. BlindDown ( this . next ( ) , { duration:. 3 } ) ; Effekt annat nya. BlindDown (this. nästa (), (längd:. 3));
  9. event ) ; Händelse. Stopp (event);
  10. )
  11. )
  12. )
  13. );

och det är nu med jQuery:

JavaScript:
  1. / / JQuery
  2. ) . each ( $ ( "H2.dropdown"). Varje (
  3. i ) { funktion (er) (
  4. ) . css ( 'cursor' , 'pointer' ) . click ( $ (Här). CSS ( "markör", "pekare"). Klicka (
  5. funktion () (
  6. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (denna). bredvid (). är ( "dolda")) $ (denna). bredvid (). slideDown (); annat $ (denna). bredvid (). slideUp ();
  7. )
  8. );
  9. )
  10. );

När allt kommer omkring, alls, jag tror inte att det finns en stor skillnad! Men som jag sagt tidigare ... Frågan är "bra" om personlig smak.

Liknande Post

jQuery restyling

Söndag 31 augusti, 2008

I dessa dagar (i rådet ...) Jag såg jQuery, ett bibliotek stil prototype.js, scriptaculous.js, mooTools, till exempel ... och här i dag att hela webbplatsen har helt omgjorda:

bild

Utmärkt start att vidga mina horisonter på denna typ av bibliotek! Kommer snart publicera en del intressanta artikel, särskilt om skillnader mellan jQuery och andra bibliotek "liknande".

Liknande Post

Enkel Dragspel med klass USimpleTabStrip

Onsdagen den 20 aug 2008

Klassen USimpleTabStrip in diskreta Enkel TabStrip, kan också användas för att skapa en enkel meny Dragspel.
Använda effekter av BlindUp() BlindDown() Scriptaculous:

JavaScript:
  1. funktionen init () (
  2. ; UTS = nya USimpleTabStrip ();
  3. ; UTS. Init ();
  4. ( e ) { UTS. OnShow = funktion (e) (
  5. ( e ) ; nya Effect. BlindDown (e);
  6. )
  7. ( e ) { UTS. OnHide = funktion (e) (
  8. ( e ) ; nya Effect. BlindUp (e);
  9. )
  10. )

Och sätter tillbaka det på HTML (HTML):

HTML:
  1. > <div class = "accordion">
  2. > Accordion 1 </a> <a href = "#acc1"> Dragspel 1 </ a>
  3. > </a> <a name = "acc1"> </ a>
  4. <h1> Innehåll # 1 </ h1>
  5. <p> Bla bla bla .... </ p>
  6. </ Div>
  7. > Accordion 2 </a> <a href = "#acc2"> Dragspel 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"> Dragspel 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 meny Dragspel som kan användas i mycket snabb.

Liknande Post

Enkla diskreta TabStrip

Torsdag 14 augusti, 2008

USimpleTabStrip är en diskret Javascript för att förbättra classici länk ankare (ännu) inom en HTML-sida. Denna källa är en förbättring av funktionen presenteras i TabStrip diskreta. I den här versionen också anpassa koden till release 1.6 av prototype.js skapades en verklig klass för att hantera TabStrip. Den här utgåvan är mycket enkel och okomplicerad. Dess huvudsakliga arbete består i att lägga till en händelse klickar du på länken ankare normalt. Inte lämnas in CSS stilar, bara för att lämna maximal handlingsfrihet, men du kan få en effektiv TabStrip med några rader kod lägga till CSS, se Lägga till CSS stilar nedan.

HTML

Klassen USimpleTabStrip arbetar på en mycket enkel HTML, ankaret sftuttando <a name></a>

HTML:
  1. <! - Enkel lista med länkar på sidan ->
  2. > Link 1 </a> </li> <li> <a href = "#tbs1"> Länk 1 </ a> </ li>
  3. > Link 2 </a> </li> <li> <a href = "#tbs2"> Länk 2 </ a> </ li>
  4. > Link 3 </a> </li> <li> <a href = "#tbs3"> Länk 3 </ a> </ li>
  5. </ Ul>
  6. <! - Block / flikarna ->
  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>

Taggen div strax under ankaret a från behållaren.

Fortsätt läsa ... "

Liknande Post

Text ersätter teknik i Flash

Onsdag 25 juni, 2008

Tekniken med Text ersätter jag lägger fram i dag är i vissa avseenden, riktigt intressant. Till skillnad från den klassiska bilden för att ersätta genom CSS, den här tekniken använder ett flash för att åsidosätta titlarna på vår webbplats. Trots att de är lite mer, eftersom det förutsätter att det inrättas ett Flash-animering och användning av Javascript, kan ett antal fördelar inte likgiltigt:

  • Håller är tillgängligheten av området med hjälp av en True-diskreta-Javascript så att sökrobotar och spindlar fortsätta för att se sidan så enkel och korrekt HTML
  • Inte kräver skapandet av bilder n för n titlar. Bara en film till att ersätta alla titlarna på vår webbplats, med betydande besparingar i form av Download
  • Gör att du kan skapa enkla titlar men med Font normalt inte används på webben
  • Texten kan vara i HTML, tack vare egenskaper Flash
  • Texten är valbara
  • Som en blixt kan du lägga till interaktivitet och animering av något slag

Du märker också att detta förfarande CSS är inte praktiskt beaktas!

Fortsätt läsa ... "

Liknande Post

Google AJAX API Library: en vändpunkt för utvecklare

Torsdagen den 29 maj 2008

AJAX API bibliotek Google, i det senare perdiodo, har publicerat en mängd verktyg för att utvecklare, kontinuerligt uppdatera sina utsläpp. Nu rinner ut ett avtal med populära AJAX-ramverk, och inte bara för att centralisera distributionen av bibliotek jQuery, prototyp, script.aculo.us, MooTools och dojo!

I praktiken kan du få tillgång till dessa bibliotek med hjälp av infrastruktur och Googles nätverk, med betydande fördelar när det gäller snabbhet och säkerhet.

Hastigheten, lastning, garanteras av samma nätverk som Google och ger i sig en distribuerad server (som standard) lastning komprimerade (gzip / minify) bibliotek. Den är värd Google närmare begäran kommer att användas för att skicka koden, och om inte når ner eller tillfälligt, Googles nätverk kommer fortfarande att skicka Javascript-kod!

Fortsätt läsa ... "

Liknande Post

Google AJAX språk API och Prototype.js

Tisdagen den 13 maj 2008

Efter att ha sett driften av Google AJAX API jag kom att tänka på ett alternativt sätt att översätta våra verkliga webbsidor. Att utnyttja prototype.js är möjligt att markera den HTML-tagg som vi vill översätta, i stället för att utsätta hela dokumentet översättning. För att markera HTML-tagg Jag brukade översätta attributet rel ställer in det till translate

HTML:
  1. > Questo testo deve essere tradotto </p> <p rel = "translate"> Denna text måste översättas </ p>

Med en enkel funktion, då kan vi utnyttja prototype.js att behandla alla HTML-taggar med rel='translate'

JavaScript:
  1. / *
  2. ** @ Namn: översätta ()
  3. ** @ Beskrivning: översätta
  4. * /
  5. funktion översätta () (
  6. ) . each ( $ $ ( "[Rel =" översätta "]'). Varje (
  7. e ) { funktion (e) (
  8. ( e. innerHTML , 'it' , 'en' , google. språk. översätta (e. innerHtml, "det", "sv",
  9. result ) { funktion (resultat) (
  10. result. translation ) { om (result. översättning) (
  11. ; e. innerHtml = resultat. översättning;
  12. { Else ()
  13. 'Translate Error! \n \n ' + result. error . message ) ; alert ( "Fel Översätt! \ n \ n" + resultat. misstag. meddelande);
  14. )
  15. )
  16. );
  17. )
  18. );
  19. )

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

Självklart kan skriptet (eller bör) skall genomföras på lämpligt sätt. Intressant dock att det kan vara specialiserade på ett sådant sätt att ersätta de bilder (i fallet med knappar i grafik som innehåller text) eller låta honom utveckla TAG som INPUT eller TEXTAREA

En av de begränsningar som jag hittade, och att voorei fördjupa, antalet tecken som kan översättas. När det gäller viktiga texter är inte svårt att få ett misstag att jag lyckades det i skriptet med en alert()

Liknande Post

Prototyp med dynamisk HTML: stil och skript

Fredag 9 maj 2008

Över ett år sedan skrev jag en post (Dynamisk HTML med Javascript) som beskrivs vissa tekniker för att dynamiskt att lägga till stilmallar och skript till en HTML-sida redan laddats. Vem använder Prototype.js kan förenkla livet med hjälp av till exempel:

JavaScript:
  1. "dom:loaded" , dokumentet. observera ( "söndag: laddade"
  2. funktion () (
  3. Element ( "script" , { type: "text/javascript" , src: "/js/altro.js" } ) ; var script = nytt inslag ( "script", (typ: "text / javascript" src: "/ js / altro.js"));
  4. ) [ 0 ] . insert ( script ) ; $ $ ( "Chefen") [0]. Infoga (script);
  5. )
  6. );

När sidan laddas document.observe inför ett nytt script Javascript! För stilar det är precis samma sak!

Liknande Post

Diskreta Javascript: un po 'di klarhet och öga mot bedragare

Söndag, april 13, 2008

Vissa manus, och några webben, med hjälp av några JavaScript-funktioner utger icke störande (diskret), även när det inte alls. Vad är det som gör ett skript (oftast JavaScript) inte påträngande? I princip ett manus Javascript är icke störande när kan vara mindre än det! Helt enkelt! I att utveckla en webbplats användbarhet av samma bör inte vara beroende av något skript. Endast i detta fall har vi en verklig skript diskreta. Fortsätt läsa ... "

Liknande Post