JS BEST PRACTICES    @trevor_landau
INDENTATION AND SPACINGvrbe; a eri(> | tp==dlcosbe fx7 | ye=eiiu er){be=eDlcoser"tlaAti"; ergteiiuBe(Sel ros)}le es{be=eCu...
WHERE DO I DECLARE VAR?vrjvsrp,pp pto,rb; a aacit h, yhn uyjvsrp =OAEOE aacit  S WSM!;/ ..ln cd .. / . og oe .i (tu ){ f  ...
STAY CONSISTENT!vrdseus=beFcoyeia; a o_qi  eratr(mxcn)m.rn__er dseus) edikABe( o_qi ;vriSbr=ceki_oe(m ) a soe  hc_fsbr e ;...
UPPERCASE CLASS NAMESfnto Be(sz,ptny){ ucin er ie oec   ..    ..}vrbe =nwBe(0z,25) a  er e er 4o 1.% ;
GOOD NAMESvrz=nwBe(..) / E,gos a   e er . ; / w rsvrfotClBeTaWlGvMCil =nwBe(..) / Beh a rsyoderhtilieehls  e er . ; / lcvr...
USE OPTIONS OBJECTSfnto Ue(uenm,fae lae ba,ae ..){..} ucin sr srae nm, nm, dy g, .   .fnto Ue(otos){ ucin sr pin   ti.nm =...
USE LITERALSvrar a r;ar=nwAry1 2 3 4; r  e ra(, , , )ar=nwAry 3) / [udfnd udfnd udfnd] r  e ra(   ; /  neie, neie, neiear=...
AVOID GLOBALSwno.p ={ idwap   VRIN 10    ESO: .,   br {    a:      pol:[teo,oa,ba ]       epe   rvr hd rd ,      sok [SelA...
"USE STRICT"fnto mkVr( { ucin aeas)   "s src"    ue tit;   vrsrmtoser=ii Ihbn;    a cupiuBe  Krn cia    cumBe =aua Lgt;/ R...
USE COMMENTS!/* *@ls Cleetdn    cas olgSuet *@ecito Ti casde sm hrcr suf    dsrpin hs ls os oe adoe tf */fnto Cleetdn (..)...
CACHE, CACHE, CACHE!fnto lnCl(nm){ ucin ogac u   i (lnCl.ah[nm]){    f   ogaccce u      rtr lnCl.ah[nm]       eun ogaccce ...
MAKE REFERENCESvrbr={ a  a   bes {    er:      sot {       tu:         Gies nwBe(..)          uns: e er .      }   }};vroa...
MAKE REFERENCES CONT...vrbes=[krncia,spoo] a  er     iiIhbn apr ;vri a  ;fr(i=0 i<beslnt;i+ 1){ o      ;    er.egh  =   be...
CHAININGSpreopooyefy=fnto ( { ueHr.rttp.l    ucin )   / Cd t fy    / oe o l};SpreopooyesvDy=fnto ( { ueHr.rttp.aea    ucin...
LINTING               DONT FORGET YOUR SEMICOLONS                   jslint or jshintfnto ralBdn){ ucin elyaF(   fuTsiger=a...
ONE MORE THING...Documentation   Mozilla Developer Network   w3schools (w3fools)Ask Questions   Stackoverflow   GoogleDont...
QUESTIONS?
THANK YOU          Twitter: @trevor_landauwww.trevorlandau.net/presentations/bestpractice       Javascript: The Good Parts...
Upcoming SlideShare
Loading in …5
×

JS Best Practices

624 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
624
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

JS Best Practices

  1. 1. JS BEST PRACTICES @trevor_landau
  2. 2. INDENTATION AND SPACINGvrbe; a eri(> | tp==dlcosbe fx7 | ye=eiiu er){be=eDlcoser"tlaAti"; ergteiiuBe(Sel ros)}le es{be=eCumBe(PbtBu Rbo"; ergtrmyer"as le ibn)}vrbe; a eri(x>7| tp ==eiiu be){ f | ye = dlcos er be =gteiiuBe("tlaAti") er eDlcoser Sel ros ;}es { le be =gtrmyer "as Bu Rbo") er eCumBe( Pbt le ibn ;}
  3. 3. WHERE DO I DECLARE VAR?vrjvsrp,pp pto,rb; a aacit h, yhn uyjvsrp =OAEOE aacit S WSM!;/ ..ln cd .. / . og oe .i (tu ){ f re pp=o ta go h nt ht od;}/ ..mr suf.. / . oe tf .pto =rtygo,btnta aeoea j yhn pet od u o s wsm s s;
  4. 4. STAY CONSISTENT!vrdseus=beFcoyeia; a o_qi eratr(mxcn)m.rn__er dseus) edikABe( o_qi ;vriSbr=ceki_oe(m ) a soe hc_fsbr e ;vrdsqi =beFcoyeia; a oEus eratr(mxcn)m.rnBe(dsqi ) ediker oEus ;vriSbr=cekfoe(m ) a soe hcISbr e ;
  5. 5. UPPERCASE CLASS NAMESfnto Be(sz,ptny){ ucin er ie oec .. ..}vrbe =nwBe(0z,25) a er e er 4o 1.% ;
  6. 6. GOOD NAMESvrz=nwBe(..) / E,gos a e er . ; / w rsvrfotClBeTaWlGvMCil =nwBe(..) / Beh a rsyoderhtilieehls e er . ; / lcvrcrn =nwBe(..) / Bte! a ooa e er . ; / etrvrcnetetoTLsnAAaigloih =fnto (..){ a ovrTxTHMuignmznAgrtm ucin . .. .};vrcnetetoTL=fnto (..){/ NC! a ovrTxTHM ucin . / IE .. .};
  7. 7. USE OPTIONS OBJECTSfnto Ue(uenm,fae lae ba,ae ..){..} ucin sr srae nm, nm, dy g, . .fnto Ue(otos){ ucin sr pin ti.nm =otosfae hsfae pin.nm;}vrue =nwUe( a sr e sr{ fae rvr, nm: Teo lae adu, nm: Lna uenm:lna srae tadu, ae 2 g: 6}; )
  8. 8. USE LITERALSvrar a r;ar=nwAry1 2 3 4; r e ra(, , , )ar=nwAry 3) / [udfnd udfnd udfnd] r e ra( ; / neie, neie, neiear=[3] / teew g r ; / hr e odikerlgt nwAryenkn,uns ) rnBeFih( e ra(Hiei Gies) ;dikerlgt [enkn,uns]) rnBeFih( Hiei Gies ;vroj a b;oj={ b fvrtBe:tlaAti aoieer Sel ros};oj=nwOjc( b e bet{ fvrtBe:tlaAti aoieer Sel ros}; )
  9. 9. AVOID GLOBALSwno.p ={ idwap VRIN 10 ESO: ., br { a: pol:[teo,oa,ba ] epe rvr hd rd , sok [SelAti,Crn,Rdtie] tc: tlaros ooa eSrp }};vrteo =apbrpol[] a rvr p.a.epe0;teo.rnBe(; rvrdiker)
  10. 10. "USE STRICT"fnto mkVr( { ucin aeas) "s src" ue tit; vrsrmtoser=ii Ihbn; a cupiuBe Krn cia cumBe =aua Lgt;/ Rfrnero rmyer Ntrl ih / eeecErr}/ ImdaeyIvkdFnto Epeso / meitl noe ucin xrsin/ IF (I- ) / IE fE(ucin( { fnto ) "s src" ue tit; / Eeyhn i sfl cnand / vrtig s aey otie}); ()
  11. 11. USE COMMENTS!/* *@ls Cleetdn cas olgSuet *@ecito Ti casde sm hrcr suf dsrpin hs ls os oe adoe tf */fnto Cleetdn (..){ ucin olgSuet . ti.oeac =tlrne hstlrne oeac;}Cleetdn.rttp ={ olgSuetpooye /* *@ehddiker mto rnBe *@ecito Dik a(oeul)tsybe dsrpin rns hpfly at er *@aa be {er prm er Be} *@aa iBtld{ola} prm sote Boen *@eun{ola} rtr Boen */ diker fnto (be,iBtld){ rnBe: ucin er sote / ti cmlctdfruamksgtyuduk / hs opiae oml ae e o rn rtr be.looLvl*ti.oeac; eun erachlee hstlrne }};
  12. 12. CACHE, CACHE, CACHE!fnto lnCl(nm){ ucin ogac u i (lnCl.ah[nm]){ f ogaccce u rtr lnCl.ah[nm] eun ogaccce u ; } vri a , vl=0 a ; fr(i=0 i<nm i+ 1){ o ; u; = vl+ i a = ; } lnCl.ah[nm]=vl ogaccce u a; rtr vl eun a;}lnCl.ah ={; ogaccce }
  13. 13. MAKE REFERENCESvrbr={ a a bes { er: sot { tu: Gies nwBe(..) uns: e er . } }};vroaser=nwbrbessotGies) a hdBe e a.er.tu.uns(;vrteoser=nwbrbessotGies) a rvrBe e a.er.tu.uns(;vrbr={ a a bes { er: sot { tu: Gies nwBe(..) uns: e er . } }};vrGies=brbessotGies a uns a.er.tu.uns;vrteoser=nwGies) a rvrBe e uns(;
  14. 14. MAKE REFERENCES CONT...vrbes=[krncia,spoo] a er iiIhbn apr ;vri a ;fr(i=0 i<beslnt;i+ 1){ o ; er.egh = bes i]bDlcos) er[ .eeiiu(; bes i]iJpns(; er[ .saaee)}vrbes=[krncia,spoo] a er iiIhbn apr ;vri a , be, er ln=beslnt; e er.eghfr(i=0 i<ln i+ 1){ o ; e; = be =bes i] er er[ ; be.eeiiu(; erbDlcos) be.saaee) eriJpns(;}
  15. 15. CHAININGSpreopooyefy=fnto ( { ueHr.rttp.l ucin ) / Cd t fy / oe o l};SpreopooyesvDy=fnto ( { ueHr.rttp.aea ucin ) / Cd t sv dy / oe o ae a};hr.l(; eofy)hr.aea(; eosvDy)Spreopooyefy=fnto ( { ueHr.rttp.l ucin ) / Cd t fy / oe o l rtr ti; eun hs};SpreopooyesvDy=fnto ( { ueHr.rttp.aea ucin ) / Cd t sv dy / oe o ae a rtr ti; eun hs};hr.l(.aea(; eofy)svDy)
  16. 16. LINTING DONT FORGET YOUR SEMICOLONS jslint or jshintfnto ralBdn){ ucin elyaF( fuTsiger=aua Lgt; olatnBe Ntrl ih vrlsOGoBes=[ a itfoder tlaAti Sel ros ooa, Crn a Aas Sm dm ] (4+1 ) 0}
  17. 17. ONE MORE THING...Documentation Mozilla Developer Network w3schools (w3fools)Ask Questions Stackoverflow GoogleDont Reinvent the Wheel DOM manipulation ( jQuery ) MVC ( Backbone js ) Data Visualizations ( d3 )Dont Copy/PasteRead the source, Luke!
  18. 18. QUESTIONS?
  19. 19. THANK YOU Twitter: @trevor_landauwww.trevorlandau.net/presentations/bestpractice Javascript: The Good Parts Javascript: The Definitive Guide Javascript Patterns Secrets of the JavaScript Ninja Precursor to Secrets of JS Ninja Eloquent Javascript ( free ) More Resources

×