Camelize, CamelCase

Maanantai, 20. lokakuuta 2008

Kuten nähtiin, että postitse erilaisia koodaus-ja koodaus lähestymistapoja, että kehittäjä on ratkaista ongelmat ovat erilaisia ja monet samat ohjelmointi kieltä käytetään. Seuraavassa kerrotaan, miten jotkut suosituimmista Javascript puitteita on ratkaista yksinkertaisella toiminto CamelCase:

Prototype.js

Prototype.js, versio 1.6.0.3, nimenomaan ehdotetaan menetelmää camelize() camelcase on merkkijono. Lähestymistapa on melko yksinkertainen, että tekijä ja koodi ei kaipaa perusteluja. Tässä tapauksessa ei ollut mitään käyttöä Regular Expression!

JavaScript:
  1. camelize: toiminto () (
  2. . split ( '-' ) , len = parts. length ; var osat = tätä. halkaistut ('-'), pit = osaan. pituus;
  3. len == 1 ) return parts [ 0 ] ; if (len == 1) return osat [0];
  4. . charAt ( 0 ) == '-' var = camelized tästä. charat (0) == '-'
  5. ? ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) osat [0]. charat (0). toUpperCase () + osat [0]. alimerkkijono (1)
  6. ] ; Osat [0];
  7. var i = 1 ; i <len; i++ ) for (var i = 1, i <len; i + +)
  8. . charAt ( 0 ) . toUpperCase ( ) + parts [ i ] . substring ( 1 ) ; camelized = + osat [i]. charat (0). toUpperCase () + osat [i]. alimerkkijono (1);
  9. camelized tuotto;
  10. )

Continue Reading ... "

Teemat Post

jQuery vastaan kaikille: vertailukohtana kanssa 5-selain

Keskiviikko 17. syyskuuta 2008

kuva Hyvä kehittäjä ei ole ongelma siirtyä ohjelmointikieli toiseen. Mahdollisuus keskittyä tiettyyn kieleen, puitteet ja kehitysympäristö, jonka sanelee enemmän saatavuus ajasta ja työn tyypin, että näin tapahtuu. Kuitenkin tärkeä tekijä, jotka voivat vaikuttaa valintaan "puitteet", kuten on myötätuntoa tai sairaus, joka voi kypsyä ajan mittaan.
Erityisesti halusin analysoida joidenkin - ei kaikkien - Javascript puitteet saatavilla tänään, koska "neuvottava" tarkasteltava ensisijaisesti jQuery.
The luovat mootools (yksi suosituimmista Javascript-kehys) on saatavilla työkalu suorittaa testi nopeus ja viisi tiedossa puitteet Javascript: Slickspeed. Tämän testin tulokset eivät edullisista lainkaan, on tärkeää, koska toiminnan puitteet Javascript-client-puolella, joka hoitaa meidän selain. Juuri tästä syystä, että jotkut löytää Safari nopeammin kuin Internet Explorer-tai Google Chrome nopeammin kuin Firefox. Tämä kuitenkin usein riippuu sivu olet katsomassa. Itse asiassa saattaa hyvinkin käydä niin, että tietty sivusto on todellakin enemmän "nopeasti", kun näytetään Safari, mutta tämä ei tarkoita sitä, että "kaikki paikat olla nopeampi Safari! Tietenkin, tämä puhe on voimassa millä tahansa selaimella.

Vertailukohtana

Kokeissa I suoritettu Slickspeed Olen verrannut selain minun kone (Utilmate Windows Vistan 64-bittinen - Intel Core 2 Quad 2.4GHz, jossa on 8 Gt RAM).
Valitettavasti testejä ei voi suorittaa sen kanssa: Internet Explorer 7, koska esto-auto, jopa ulos mittakaavassa tuloksia! Jälleen kerran onnittelut Microsoft.
I crercato samanlainen säilyttää asema PC-testin aikana, avata selaimen erikseen eikä lähettävä kukaan muu käynnissä prosessi.

Huomautus: Jos sinusta tuntuu, kuin sinulla yksi tai useampi näistä testeistä, voit kommentoida tätä viestiä, jos kyse on "kummallinen" ja erilaisia tuloksia.

kuva

Google Chrome on todella nopea, joiden arvo on 68 (keskiarvo)-testin kanssa jQuery. Hitaampi, mutta näytti siltä, Flock huolimatta lähtöisin samasta "äiti" Mozilla. Tämä huono tulos Flock on todella erikoista, koska se vähentää sosiaalisen verkoston, koska se on sosiaalinen verkosto Web 2.0 hyödyntää monia Javascript puitteet saatavilla, jotta navigointi-ja vuorovaikutus todella innovatiivisia.
A yllätys syke Firefox ja Opera on myös paljon ", jopa saada 74 on Dojo! Firefox ja Safari, kun kaikki ovat samanlaisia, Safari nopeammin testit Mootools ja jQuery.

Mitä puitteissa valita?

Jos ei badiamo testata nopeus toteuttamista ja meillä ei välitä koko Kbyte tehty samassa yhteydessä, vastaus voisi olla "mitä sinulle" tai, jos niin halutaan, "mitä te tiedätte, paras tai on harmoninen kanssa tyylin mukainen. "
Loppujen lopuksi nämä puitteet näyttävät hieman "(ks. käytön $ esimerkiksi), vaikka joitakin tärkeitä ja merkittäviä eroja, jotka voivat hypätä niiden silmissä, asiantuntijana tai oikeastaan työnnetään tiettyyn kirjastoon. Periaatteessa itse asiassa kaikki, mitä voidaan saavuttaa jQuery, esimerkiksi voit tehdä hyvin mootools tai prototyyppi! Jos jQuery on erittäin kompakti syntaksi, koska kaikki menetelmät aina palautettava jQuery objekti perusteella, mikä loputon tiedostot oggetto.metodo().metodo().metodo()... ei ole kerrottu, että tämä ei lainkaan kustannukset vahvuus, erityisesti niille, jotka joutuvat debug!
Kirjastot kuin prototype.js sin ehkä ole graafinen, vaikka yksinkertainen, pakottaa kehittäjä toteuttaa Spin-off kuin scriptaculous.js, raskas ja kaukana kirjaston ensimmäinen valinta.

Yksi esimerkki

Juuri tämä viimeinen syy, esimerkiksi vei minut korvata kytketty prototyyppi / scriptaculous kanssa jQuery tehdä paneelien interaktiivinen / animoitu tässä sivupalkin ja undolog.com. Jopa käytät Google API tuoda kirjastoihin, on jäte ladata koko kirjaston scriptaculous on slideDown ja slideUp. Tiedotus-ja näytteen eilen Javascript-koodi yhdessä prototyyppi / scriptaculous:

JavaScript:
  1. / / Prototype / scriptaculous
  2. ) . each ( $ $ ( 'H2.dropdown "). Jokaisessa (
  3. element ) { toiminto (osa) (
  4. = "pointer" ; elementti. tyyliin. kohdistin = "osoitin";
  5. 'click' , elementti. havaintoja ( "valitse",
  6. event ) { toiminto (tapahtuma) (
  7. this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration:. 5 } ) ; if (this. vieressä (). tyyliin. näyttö == "") uutta vaikutuksia. BlindUp (this. vieressä (), (duration. 5));
  8. Effect. BlindDown ( this . next ( ) , { duration:. 3 } ) ; Vaikutus muuta uutta. BlindDown (this. vieressä (), (kesto:. 3));
  9. event ) ; Tapahtuma. Stop (tapahtuma);
  10. )
  11. )
  12. )
  13. );

ja se on nyt jQuery:

JavaScript:
  1. / / JQuery
  2. ) . each ( $ ( "H2.dropdown"). Jokaisessa (
  3. i ) { toiminto (t) (
  4. ) . css ( 'cursor' , 'pointer' ) . click ( $ (Tämä). Css ( "kohdistin", "osoitin"). Napsauta (
  5. toiminto () (
  6. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (tästä). seuraavaan (). on ( "piilotettu")) $ (tämä). seuraavaan (). slideDown (); muuta $ (tästä). seuraavaan (). slideUp ();
  7. )
  8. );
  9. )
  10. );

Loppujen lopuksi ollenkaan, en usko, että siellä on paljon eroa! Mutta kuten aiemmin sanoin ... kysymykseen on "hyvin" henkilökohtainen maku.

Teemat Post

jQuery uudenaikaistamista

Sunnuntai 31. elokuuta, 2008

Näinä päivinä (Neuvoston ...) Olin katsot jQuery, kirjasto tyyli prototype.js, scriptaculous.js, mooTools, esimerkiksi ... ja tässä tänään, että koko sivusto on täysin uusittu:

kuva

Erinomainen alkaa laajentaa minun näköaloja tämän tyyppisessä kirjastot! Tulossa pian julkaista joitakin mielenkiintoisia artikkelin, erityisesti erot jQuery ja muiden kirjastojen "samanlainen".

Teemat Post

Simple Harmonikka tunneilla USimpleTabStrip

Keskiviikko 20. elokuuta 2008

Luokan USimpleTabStrip lähettäneet lieviä Simple TabStrip, voidaan käyttää myös luoda yksinkertainen valikko Harmonikka.
Käyttämällä vaikutukset BlindUp() BlindDown() tarjoamia Scriptaculous:

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

Ja laita se takaisin HTML (HTML source):

HTML:
  1. > <div class = "accordion">
  2. > Accordion 1 </a> <a href = "#acc1"> Harmonikka 1 </ a>
  3. > </a> <a name = "acc1"> </ a>
  4. <h1> sisältö # 1 </ h1>
  5. <p> työttömät työttömät työttömät .... </ p>
  6. </ Div>
  7. > Accordion 2 </a> <a href = "#acc2"> Harmonikka 2 </ a>
  8. > </a> <a name = "acc2"> </ a>
  9. <h1> sisältö # 2 </ h1>
  10. <p> työttömät työttömät työttömät .... </ p>
  11. </ Div>
  12. > Accordion 3 </a> <a href = "#acc3"> Harmonikka 3 </ a>
  13. > </a> <a name = "acc3"> </ a>
  14. <h1> sisältö # 3 </ h1>
  15. <p> työttömät työttömät työttömät .... </ p>
  16. </ Div>
  17. </ Div>

Saat yksinkertainen valikko Harmonikka, joita voidaan käyttää hyvin nopeasti.

Teemat Post

Simple lieviä TabStrip

Torstai 14. elokuuta, 2008

USimpleTabStrip on lieviä Javascript parantaa classici linkin ankkuri (vielä), joka HTML-sivun. Tämä lähde on parantaa toiminto esitetään TabStrip lieviä. Tässä versiossa myös yhdenmukaistaa koodi release 1.6 prototype.js oli luonut oikean luokan hallita TabStrip. Vapauttamisesta on hyvin yksinkertaista ja suoraviivaista. Sen pääasiallinen työ on lisätä tapahtuman napsauttamalla linkkiä ankkuri normaalia. Ei toimiteta CSS-tyylit, vain jättää mahdollisimman suuri vapaus toimia, mutta voit saada tehokkaan TabStrip kanssa muutaman rivin koodin lisätä CSS, katso lisääminen CSS-tyylit alla.

HTML

Luokan USimpleTabStrip työskentelevät hyvin yksinkertainen HTML-, ankkuri sftuttando <a name></a>

HTML:
  1. <! - Yksinkertainen luettelo sivulla olevia linkkejä ->
  2. > Link 1 </a> </li> <li> <a href = "#tbs1"> Linkki 1 </ a> </ li>
  3. > Link 2 </a> </li> <li> <a href = "#tbs2"> Linkki 2 </ a> </ li>
  4. > Link 3 </a> </li> <li> <a href = "#tbs3"> Linkki 3 </ a> </ li>
  5. </ Ul>
  6. <! - Lohkot / välilehdet ->
  7. > </a> <a name = "tbs1"> </ a>
  8. <h1> Card # 1 </ h1>
  9. <p> työttömät työttömät työttömät .... </ p>
  10. </ Div>
  11. > </a> <a name = "tbs2"> </ a>
  12. <h1> Card # 2 </ h1>
  13. <p> työttömät työttömät työttömät .... </ p>
  14. </ Div>
  15. > </a> <a name = "tbs3"> </ a>
  16. <h1> Card # 3 </ h1>
  17. <p> työttömät työttömät työttömät .... </ p>
  18. </ Div>

Tunnisteet div hieman alle ankkuri a säiliöön.

Continue Reading ... "

Teemat Post

Teksti Korvaus Tekniikat Flash

Keskiviikko 25. kesäkuuta, 2008

Menetelmää on teksti Korvaus Olen tänään joiltain osin on, todella mielenkiintoista. Toisin kuin klassinen kuvan korvata kautta CSS, tämä tekniikka käyttää salamaa ohittaa otsikot sivustollemme. Huolimatta hieman enemmän, koska se edellyttää, että luodaan Flash-elokuva ja käyttää Javascript, antaa useita etuja ei välinpitämättömästi:

  • Pitää 's saatavuutta sivuston avulla True-huomaamattomia-Javascript, jotta viruksia ja robotit edelleen nähdä sivun yksinkertainen ja oikea HTML
  • Ei tarvitse perustaa kuvien n n otsikot. Vain yksi elokuva korvata kaikki otsikot sivustollemme, huomattavia säästöjä kannalta Lataa
  • Voit luoda yksinkertaisia nimikkeitä, mutta Font ei yleensä käytetä Webissä
  • Tekstiä voidaan tehdä HTML, kiitos ominaisuudet Flash
  • Teksti on valittavissa
  • Ovat flash voit lisätä interaktiivisuutta ja animaatiota tahansa

Näet myös, että tämä menettely CSS eivät ole käytännössä otettu huomioon!

Continue Reading ... "

Teemat Post

Google AJAX API-kirjasto: käännekohta kehittäjille

Torstai 29. toukokuuta 2008

AJAX API-kirjastot Google, jälkimmäisessä perdiodo, on julkaissut useita työkaluja omistautuneet kehittäjät, jatkuva ajan tasalla niiden julkaisuissa. Nyt loppumassa kanssa sopimuksen suosittu AJAX kehys, eikä vain keskittää jakelu kirjastojen jQuery prototyyppejä, script.aculo.us, MooTools ja dojo!

Käytännössä voit käyttää näitä kirjastoja käyttäen infrastruktuurin ja Google-verkosto, joilla on merkittäviä hyötyjä nopeus ja turvallisuus.

Nopeus-, lastaus-, on taattu samassa verkossa, että Google ja antaa sinänsä jaettu palvelin, joka mahdollistaa (oletusarvoisesti) lastaus pakattu (gzip / minify) kirjasto. Vastaanottosopimuksen Google lähemmäksi pyyntö aiotaan käyttää lähettää koodin, ja jos ei päästä alas tai tilapäisesti, Google-verkoston edelleen lähettää Javascript-koodi!

Continue Reading ... "

Teemat Post

Google AJAX kielen API-ja Prototype.js

Tiistai 13. toukokuuta 2008

Nähneet toiminnan Google AJAX API tulin muistaa vaihtoehtoinen tapa kääntää meidän todellinen Web-sivuja. Hyödyntää prototype.js on mahdollista merkitä HTML-koodia, että haluamme kääntää sen sijaan, että alistamalla koko asiakirjan käännös. Jos haluat merkitä HTML-koodia, jota käytin kääntää attribuutti rel se translate

HTML:
  1. > Questo testo deve essere tradotto </p> <p rel = "translate"> Tämä teksti on käännetty </ p>

Jolla on yksinkertainen tehtävä, sitten voimme hyödyntää prototype.js käsitellä kaikki HTML-tunnisteita, joissa on rel='translate'

JavaScript:
  1. / *
  2. ** @ Nimi: kääntää ()
  3. ** @ Kuvaus: kääntää
  4. * /
  5. toiminto kääntää () (
  6. ) . each ( $ $ ( '[Rel = "kääntää "]'). Jokainen (
  7. e ) { toiminto (e) (
  8. ( e. innerHTML , 'it' , 'en' , google. kielellä. kääntää (e. innerHtml, "se", "en",
  9. result ) { toiminto (tulos) (
  10. result. translation ) { if (result. käännös) (
  11. ; e. innerHtml = tulos. käännös;
  12. { Muu ()
  13. 'Translate Error! \n \n ' + result. error . message ) ; alert ( 'Virhe Käännä! \ n \ n "+ tulos. virheen. viesti);
  14. )
  15. )
  16. );
  17. )
  18. );
  19. )

Voit nähdä sen toiminnassa e-lementi.com

On selvää, komentosarja voi (tai on) on toteutettu asianmukaisesti. Mielenkiintoista kuitenkin, että voi olla erikoistunut siten korvata kuvat (jos painikkeiden grafiikkaa, jotka sisältävät tekstiä) tai antaa hänelle kehittää TAG kuten INPUT tai TEXTAREA

Yksi niistä rajoituksista, että olen löytänyt, ja että voorei syventää, merkit, jotka voidaan kääntää. Kun kyse on tärkeää tekstiä ei ole vaikea saada virheen, että olen onnistunut sen komentosarjan alert() kuulutuksen alert()

Teemat Post

Prototyypin kanssa dynaamista HTML: tyyli ja käsikirjoituksen

Perjantai 9 toukokuu, 2008

Yli vuosi sitten kirjoitti postitse (Dynamic HTML Javascript), että hahmoteltu joitakin tekniikoita dynaamisesti lisätä tyylisivut ja komentosarjat on HTML-sivu jo lastattu. Kuka käyttää Prototype.js voidaan huomattavasti yksinkertaistaa elämää käyttämällä esimerkiksi:

JavaScript:
  1. "dom:loaded" , asiakirja. havaintoja ( "Sunnuntai: ladataan"
  2. toiminto () (
  3. Element ( "script" , { type: "text/javascript" , src: "/js/altro.js" } ) ; var script = new Element ( "script" (tyyppi "text / javascript" src: "/ js / altro.js"));
  4. ) [ 0 ] . insert ( script ) ; $ $ ( "Johtaja") [0]. Insert (script);
  5. )
  6. );

Kun sivu on ladattu document.observe lisätään uusi skripti Javascript! Saat tyylejä, joka on täsmälleen sama asia!

Teemat Post

Lieviä Javascript: un po 'di selkeyden ja silmämme imposters

Sunnuntaina, 13. huhtikuuta 2008

Jotkut skriptit, ja joitakin Web käyttäen joitakin JavaScript-toimintoja esiintyminen ei ole tunkeileva (lieviä), vaikka he eivät ole lainkaan. Mikä tekee käsikirjoituksen (yleensä JavaScript-) ei tunkeileva? Periaatteessa käsikirjoituksen Javascript ei ole tunkeileva, kun voi olla pienempi kuin se! Yksinkertaisesti! Kehitysmaiden Web-sivuston käytettävyyttä samalla ei pitäisi olla riippuvainen mitään käsikirjoitusta. Vain tässä tapauksessa meillä on aito script lieviä. Continue Reading ... "

Teemat Post