Upcoming SlideShare
×

# JS Best Practices

624 views

Published on

2 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

Views
Total views
624
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
12
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