Պատրա՞ստ եք սովորել JavaScript շրջանակ:

Ինչու՞ է կարևոր չշտապել շրջանակների հետ և նախ սովորել, թե ինչպես է ամեն ինչ աշխատում գլխարկի տակ:

Իմ ընկերը, ով վերջերս է սկսել սովորել Վեբ մշակում, հարցրեց ինձ. «Ինչու եմ ստանումսա չսահմանված սխալ, երբ ես հղում եմ անում փոփոխականին մեկ այլ ֆունկցիայի մեջ գտնվող ֆունկցիայի մեջ: React-ում»: Ես արագ հասկացա, որ իմ ընկերոջը բացակայում է JavaScript-ի հիմնական գիտելիքները Scopes-ի մասին: Այս հոդվածում ես կփորձեմ բացատրել և հուսով եմ ձեզանից ոմանց համոզել, թե ինչու է այդքան կարևոր չշտապել շրջանակների հետ, ինչպես դա արեց իմ ընկերը և կտամ մի քանի փաստացի օրինակներ, թե ինչ պետք է տիրապետեք նախքան շրջանակ սովորելը:

Ինչու չշտապել:

JavaScript շրջանակները ամենուր են: React-ը, Angular-ը, Vue-ը, Svelte-ը, Ext JS-ը, Express-ը, Hapi-ն օգտագործվում են միլիոնավոր ընկերությունների կողմից ամբողջ աշխարհում, յուրաքանչյուր աշխատանքի հրապարակում ներառում է դրանցից առնվազն մեկը: Եվ սա սկսնակ ծրագրավորողներին տալիս է ուժեղ FOMO: Մարդիկ ցանկանում են արագ ցատկել շրջանակային գնացքի վրա և սովորել դրանցից մեկը կամ փորձել շուկայում առկա նոր հետաքրքիր բանը, որը ես լիովին հասկանում եմ, քանի որ մշակողների համար մենք միշտ պետք է արդի լինենք տեխնոլոգիայի հետ:

Գաղտնիք չէ, որ այդ շրջանակներից մեկը սովորելը ձեր CV-ն ավելի գրավիչ կդարձնի վարձող ընկերությունների համար կամ կօգնի ձեզ ստեղծել ձեր հաջորդ վեբ հավելվածը ձեր նորաստեղծ բիզնեսի համար: Բայց մի վայրկյան կանգ առեք և մտածեք, պարզապես սովորելըReact-ը ձեզ թույլ կտա՞ օգտագործել դրա ողջ ներուժը, եթե նախ չես տիրապետել JavaScript-ին:
Պատասխանը, ինչպես կարող էիք կռահել, հետևյալն է. ոչ:

Վերոնշյալ բոլոր շրջանակները, ըստ էության, գործիքներ են, որոնք դուք օգտագործում եք ձեր զարգացումն արագացնելու և սովորական գործողություններ կատարելու համար, ինչպիսիք են DOM-ի մանիպուլյացիաները, տարրերի միջոցով պտտելը և բիզնեսի տրամաբանությունը ձեզ համար ավելի հեշտ վարելը: Օրինակ, վերցրեք պայմանական արտաբերումը React-ում: React-ը թույլ է տալիս հեշտությամբ ցույց տալ տարբեր տեղեկություններ՝ հիմնված բուլյան արժեքի վրա, մինչդեռ վանիլային JS-ում ձեզ հարկավոր կլինի ևս մի քանի տող կոդ: Հավանաբար սա լավագույն օրինակը չէ, բայց դուք հասկացաք։

Եթե ​​դուք բառացիորեն անցնում եք ամբողջ reactjs.org վեբկայքով, մասնակցում եք դասընթացների և հիմնականում սովորում եք React-ը միայնակ, դա չի նշանակում, որ դուք ամենևին էլ ուժեղ և բանիմաց JavaScript ծրագրավորող եք, քանի որ հավանաբար գիտեք, թե ինչ անել: անել, բայց չգիտեմ, թե ինչու և ինչպես է ամեն ինչ աշխատում ձեր շրջանակի տակ: Երբեմն մենք ժամեր ենք անցկացնում, եթե ոչ օրեր՝ փորձելով պարզել, թե ինչու է որոշակի բան աշխատում բոլորովին այլ կերպ, քան ենթադրվում էր, հատկապես ժամանակակից շրջանակները վրիպազերծելիս: Սա այն դեպքում, երբ լեզվի լավ ըմբռնումը կարող է ձեզ շատ ժամանակ խնայել:

HTML

Ես ուզում եմ արագ անդրադառնալ HTML-ին, հատուկ ճակատային ծրագրավորողների համար: Frontend-ում JavaScript-ը հիմնականում նախատեսված է DOM-ի մանիպուլյացիայի համար, ինչը նշանակում է, որ դուք պետք է բավականին լավ պատկերացնեք իմաստային HTML-ը, տարբեր տեսակի տարրեր, ինչպիսիք են պատկերները, iframes-ը, հատուկ ձևի տարրերը, ինչպես նաև սովորեք, թե իրականում ինչ քայլեր են ձեռնարկում բրաուզերները՝ տարրերը արտապատկերելու և ներկելու համար: դուք տեսնում եք էկրանին. Այս մշտադալար հոդվածը ձեզ կտա բազմաթիվ պատկերացումներ քայլերի վերաբերյալ՝ սկսած վերլուծությունից և վերջացրած էկրանի վրա պիքսելներ նկարելով: Նաև ստուգեք սա՝ սովորելու օպտիմալացնել այդ գործընթացը որպես ամբողջություն:

JavaScript շարժիչ

Վերլուծություն, իրադարձությունների հանգույց, զանգերի կույտ, աղբի հավաքում, խոստումներ, ժառանգություն:
Խորը սուզվելը JS շարժիչների մեջ, ինչպիսին է V8-ը, որն ունի Chrome-ը, հետաքրքիր է ոչ միայն իրական խելագարների համար, ովքեր հաճույք են ստանում ուսումնասիրությունից, այլև ձեզ ավելի մեծ պատկեր կտա: և կօգնի ձեզ հասկանալ, թե ինչու են JavaScript-ում որոշ բաներ այնպիսին, ինչպիսին կան: Կրկին իմացեք, թե ինչպես են զննարկիչները վերլուծում JavaScript կոդը, ինչպես է աշխատում Իրադարձությունների հանգույցը. վստահաբար, ապշեցուցիչ կլինի տեսնել, որ կա անվերջ հանգույց, որն աշխատում է զանգերի կույտի հետ, այնուհետև իմացեք, թե ինչ է Աղբի հավաքումը: » այնպես է, որ հնարավորինս խուսափեք հիշողության արտահոսքից:

Շրջանակ

Այն ամենը, ինչ կատարվում է JavaScript-ում, տեղի է ունենում հատուկ շրջանակներով, և այն կա անվտանգության համար: Հիմնականում համոզվելու համար, որ փոփոխականները կարող են մուտք գործել միայն ծրագրի որոշակի տարածքներից, ինչը մեզ օգնում է խուսափել այդ փոփոխականների չնախատեսված փոփոխություններից: Սա շատ լավ կարելի է դիտարկել շրջանակներում: Շրջանակը կարող է լինել.

• գլոբալ, որին վերաբերում են բնիկ դիտարկիչի օբյեկտները, ինչպիսիք են պատուհան, փաստաթուղթ, String, Array,և այլն: , ԿԱՄ ցանկացած այլ փոփոխական, որը ֆունկցիայի կամ բլոկի ներսում չէ
• տեղականը հայտնի է նաև որպես ֆունկցիայի շրջանակ, որը կողպում է այս ֆունկցիայի ներսում փոփոխականների շրջանակը միայն ինքն իրեն:
• բլոկի շրջանակ, որը գործում է ֆունկցիայի շրջանակի նման, քանի դեռ փոփոխականներ հայտարարելիս օգտագործում եք const կամ let var-ի փոխարեն

Այս բոլոր տեսակի շրջանակների լավ իմանալը թույլ կտա ձեզ ևս մեկ անգամ կանխատեսել և որոշել, թե ինչ արդյունք կլինի տարբեր սցենարներում՝ շրջանակ օգտագործելիս:

Փակումներ

Դուք ամենուր հանդիպում եք փակումների՝ React-ի նման շրջանակ օգտագործելիս: Վերադառնալով այսչսահմանված խնդրին, որն ուներ իմ ընկերը, փակումը պարզապես ֆունկցիայի համակցություն է մեկ այլ ֆունկցիայի ներսում, որը հնարավորություն է տալիս մուտք գործել արտաքին ֆունկցիայի շրջանակ: այդ ներքին ֆունկցիայից։ Արդյո՞ք դա շփոթեցնող էր: React-ում դուք պետք է կապեք գործառույթի համատեքստը ճիշտ շրջանակի հետ, հակառակ դեպքում փակումը այն կուղղորդի այլ տեղ: Եվ դա է այն, ինչ դուք պետք է սովորեք, որպեսզի իմանաք, թե ինչ անել, երբ JavaScript-ը ձեզ նման անակնկալներ է մատուցում:

Ժառանգություն

JavaScript-ը բազմաբնույթ պարադիգմային լեզու է. այն ունի ընթացակարգային, ֆունկցիոնալ և օբյեկտ-կողմնորոշված ​​ծրագրավորման համադրություն: Վերջինս կառուցված է այնպիսի հայեցակարգի վրա, ինչպիսին է ժառանգությունը: Իսկ JavaScript-ում ժառանգությունը ձեռք է բերվում նախատիպի օբյեկտի օգտագործմամբ: Հենց որ իմանաք, թե ինչպես է այն աշխատում, դուք կկարողանաք հասկանալ, թե ինչու է ամեն ինչ հիմնականում օբյեկտ JavaScript-ում ևկհասկանաք, թե ինչ է կատարվում գլխարկի տակ։ ES6 դասերից, որոնք մենք ունենք նաև React-ում և Angular-ում: Դասերը, կոնստրուկտորները և այլն, ժառանգականության վրա զուտ շարահյուսական շաքար են, ուստի արժե ավելի խորանալ դրա մեջ:

Async/Sync

Այս կետը շատ կապված է զանգերի փաթեթի հետ, որը մենք տեսանք նախկինում: Հիմնականում ասինխրոն բառը նշանակում էչառաջանալ միաժամանակ: Եվ քանի որ լռելյայն JavaScript-ը սիրում է ամեն ինչ կատարել հաջորդականությամբ մեկ առ մեկ, երբեմն մենք պետք է օգտագործենք ասինխրոնիկությունը, օրինակ՝ սերվերից տվյալներ վերցնելիս կամ ժամանակի վերջ դնելիս: Այդ դեպքերում, դուք ակնհայտորեն չեք ցանկանում դադարեցնել կոդի կատարումը, քանի դեռ պատասխանը չի եկել: Եվ դրանով ասինխրոնիկությունը մեծ դեր է խաղում շրջանակների մեջ։

Սխալների մշակում

Եթե ​​դուք արդեն ունեք ծրագրավորման որոշակի փորձ, հավանաբար կարող եք հասկանալ, թե ինչու է սխալները բռնելը և դրանց ճիշտ վարումը այդքան կարևոր: Կարևոր չէ՝ դուք գտնվում եք ճակատում, թե հետին պլանում, քանի դեռ գործ ունեք ինչ-որ API-ի հետ, որն ունի դինամիկ արձագանք, դուք պետք է համոզվեք, որ մերժում և լուծում եք դրանք կամ փորձում եք։ և բռնելնրանց, որոնք սխալվում են: Frontend-ում դա կարող է լինել, ինչպես մենք ասացինք, API-ի պատասխան, մինչդեռ հետին պլանում դուք կարող եք կարգավորել հաճախորդի հարցումները:

ES6+

ES6-ի ուսուցումը կարևոր պատճառն այն է, որ հանրաճանաչ շրջանակների բոլոր ժամանակակից տարբերակներն այն ներառել են իրենց ճարտարապետության մեջ և հենվել դրա վրա: Angular-ը բառացիորեն օգտագործում է դասեր և կոնստրուկտորներ, React-ը լի է անանուն սլաքների ֆունկցիաներով, ձևանմուշների բառացիությամբ և օբյեկտների դեստրուկտուրացիայով, երբ աջակցում է երեխայի բաղադրիչներին, իսկ Express-ը, մյուս կողմից, օգտագործում է async await կարգավորիչի մեթոդներում: մուտքային հարցումներ. Այսպիսով, ES6-ի հետ ծանոթությունը իսկապես օգտակար կլինի շրջանակի ուսուցման կորը շատ ավելի փոքր դարձնելու համար:

Այն բոլոր կետերից հետո, որոնց միջով մենք հենց նոր անցանք, ես ուզում եմ ձեզ հիշեցնել, որ հենց որ դուք լավ ըմբռնեք այդ բոլոր կետերը — նոր շրջանակ սովորելը ձեզանից կպահանջվի ընդամենը մեկ շաբաթ կամ երբեմն պարզապես ինտենսիվ հանգստյան օրեր: Դուք կկարողանաք հեշտությամբ կանխատեսել, թե ինչպես են գործառույթները վարվում տարբեր սցենարներում, ինչու եք ստանում որոշակի սխալներ և ինչպես հեշտությամբ շտկել դրանք: Իմ ընկերուհին, հավանաբար, հասկացել է, որ նա պետք է դա կապի ճիշտ համատեքստին, որպեսզի խուսափի React-ում ունեցած նախնական խնդրից: