JavaScript kūrėjams būtina: efektyvaus derinimo ir saugaus kodavimo praktikos vadovas

JavaScript, kaip žiniatinklio kūrimo pagrindas, plačiai naudojamas priekinėje, galinėje ir mobiliojoje srityse. Tačiau dinamiškos JavaScript savybės ir sudėtinga veikimo aplinka taip pat paverčia ją didele klaidų ir saugumo spragų rizika. Šiame straipsnyje, remiantis X/Twitter diskusijomis apie JavaScript, pateikiama praktinių patarimų ir geriausios praktikos rinkinys JavaScript kūrėjams iš derinimo įrankių, saugaus kodavimo, našumo optimizavimo ir kitų aspektų, siekiant padėti visiems parašyti tvirtesnį ir saugesnį kodą.

I. Atsisveikinimas su aklu spėjimu: efektyvūs JavaScript derinimo įgūdžiai

Derinimas yra neatsiejama kūrimo proceso dalis. Užuot pasiklydus konsolės console.log metode, geriau įsisavinti efektyvesnius derinimo įrankius ir įgūdžius.

1. Naršyklės kūrėjo įrankių naudojimas:

Šiuolaikinės naršyklės turi įmontuotus galingus kūrėjo įrankius, kurie suteikia galimybę derinti su lūžio taškais, stebėti tinklą, analizuoti našumą ir kt.

• Lūžio taškų nustatymas: Nustatykite lūžio taškus pagrindinėse kodo vietose, kad programa sustotų vykdymo metu, kad kūrėjai galėtų patikrinti kintamųjų reikšmes ir programos būseną. Naršyklės kūrėjo įrankiai leidžia tiesiogiai spustelėti eilutės numerį šaltinio kode, kad nustatytumėte lūžio taškus.

• Vykdymas žingsnis po žingsnio: Naudokite vykdymo žingsnis po žingsnio (Step Over, Step Into, Step Out) funkciją, kad vykdytumėte kodą eilutę po eilutės ir stebėtumėte programos vykdymo srautą.

• Skambučių dėklo peržiūra: Skambučių dėklas įrašo funkcijų iškvietimo tvarką, kuri gali padėti kūrėjams greitai nustatyti problemos vietą.

• Išraiškų stebėjimas: Pridėkite išraiškas, kurias reikia stebėti, prie kūrėjo įrankių skydelio „Watch“, kad realiuoju laiku peržiūrėtumėte išraiškų reikšmių pokyčius.

2. Toast.log naršyklės plėtinio naudojimas:

Kaip minėjo @@Shefali__J Twitter, Toast .log yra labai naudingas naršyklės plėtinys, kuris gali tiesiogiai rodyti konsolės klaidas, įspėjimus ir žurnalo informaciją puslapyje, neatidarant kūrėjo įrankių konsolės. Tai labai padeda greitai nustatyti problemas ir pagerinti derinimo efektyvumą.

Žingsniai:

1. Ieškokite „Toast .log“ Chrome internetinėje parduotuvėje arba kitoje naršyklės plėtinių parduotuvėje ir įdiekite.
2. Įdiegę atnaujinkite savo žiniatinklio puslapį.
3. Kai JavaScript kodas sugeneruoja klaidų, įspėjimų ar žurnalų, Toast .log juos parodys puslapyje kaip Toast pranešimus.

3. Source Maps naudojimas:

JavaScript kodui, kuris buvo suspaustas arba transliuotas (pvz., naudojant Babel arba TypeScript), Source Maps gali susieti suspaustą kodą atgal su originaliu kodu, kad kūrėjams būtų lengviau derinti.

Konfigūracija:

1. Įsitikinkite, kad jūsų kūrimo įrankis (pvz., Webpack, Parcel) tinkamai sukonfigūruotas, kad generuotų Source Maps failus.
2. Įjunkite Source Maps palaikymą naršyklės kūrėjo įrankiuose.

4. debugger sakinio naudojimas:

Tiesiogiai įterpkite debugger sakinį į kodą, kad priverstumėte programą sustoti, kai ji pasiekia sakinį, ir automatiškai atidarykite naršyklės kūrėjo įrankius.

function myFunction(arg) {
  // ...
  debugger; // Programa sustos čia
  // ...
}

5. Profesionalaus JavaScript derintuvo naudojimas:

Sudėtingesniems projektams galite apsvarstyti galimybę naudoti profesionalų JavaScript derintuvą, pvz., Visual Studio Code arba WebStorm ir kitus IDE integruotus derintuvus. Šie derintuvai paprastai suteikia galingesnių funkcijų, tokių kaip nuotolinis derinimas, atminties analizė ir kt.

II. Apsauga nuo nelaimių: geriausia JavaScript saugaus kodavimo praktika

Į JavaScript kodo saugumo problemas negalima nekreipti dėmesio. Kaip minėjo @@badcrack3r Twitter, prieigos rakto atskleidimas JavaScript faile gali sukelti rimtų pasekmių. 1. Venkite kliento pusėje saugoti slaptą informaciją:

Niekada nesaugokite kliento pusėje tokios slaptos informacijos kaip API raktai, vartotojų slaptažodžiai ir pan. Ši informacija turėtų būti saugoma serverio pusėje ir pasiekiama per saugias API sąsajas.

2. Griežtai patikrinkite ir filtruokite vartotojo įvestį:

Niekada nepasitikėkite vartotojo įvestimi. Griežtai patikrinkite ir filtruokite visus vartotojo įvestus duomenis, kad išvengtumėte tokių saugumo spragų kaip XSS (tarpinių svetainių scenarijų atakos) ir SQL injekcijos.

Pavyzdys:

// HTML simbolių keitimas vartotojo įvestyje, siekiant išvengti XSS atakos
function escapeHtml(text) {
  var map = {
    '&': '&',
    '': '>',
    '"': '"',
    "'": '''
  };

  return text.replace(/[&<>"]/g, function(m) { return map[m]; });
}

// Gaunama vartotojo įvestis
let userInput = document.getElementById("userInput").value;

// Vartotojo įvesties simbolių keitimas
let safeInput = escapeHtml(userInput);

// Saugios vartotojo įvesties rodymas puslapyje
document.getElementById("displayArea").innerHTML = safeInput;

3. Naudokite CSP (turinio saugumo politiką):

CSP yra HTTP atsakymo antraštė, kuri gali apriboti naršyklės įkeliamų išteklių šaltinius, kad būtų išvengta kenkėjiškų scenarijų įterpimo.

CSP konfigūravimas:

Serverio pusėje sukonfigūruokite CSP atsakymo antraštę, pavyzdžiui:

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;

4. Reguliariai skenuokite kodo pažeidžiamumus:

Naudokite profesionalius saugumo skenavimo įrankius, tokius kaip Snyk, OWASP ZAP ir kt., kad reguliariai skenuotumėte kodo saugumo pažeidžiamumus ir laiku juos pataisytumėte.

5. Naudokite tokius įrankius kaip SecretFinder, kad aptiktumėte slaptos informacijos nutekėjimą:

Kaip minėta Twitter @@chc_course, SecretFinder yra Python įrankis, kuris gali būti naudojamas aptikti galimą slaptos informacijos nutekėjimą JavaScript failuose, pvz., API raktus, prieigos prieigos raktus ir kt.

Žingsniai:

1. Įdiekite SecretFinder: pip install secretfinder
2. Naudokite SecretFinder JavaScript failui nuskaityti: python secretfinder.py -i your_javascript_file.js -o output.txt
3. Patikrinkite išvesties failą, kad pamatytumėte, ar nėra slaptos informacijos nutekėjimo.

6. Naudokite HTTPS protokolą:

Įsitikinkite, kad svetainė naudoja HTTPS protokolą, kad užšifruotų perduodamus duomenis ir apsaugotų nuo žmogaus per vidurį atakų.

III. Našumo optimizavimas: JavaScript kodo vykdymo efektyvumo didinimas

JavaScript kodo našumas tiesiogiai veikia vartotojo patirtį. Optimizuodami JavaScript kodo našumą, galite pagerinti svetainės įkėlimo greitį ir reakcijos greitį.

1. Sumažinkite HTTP užklausų skaičių:

Kiek įmanoma sumažinkite HTTP užklausų skaičių, reikalingą puslapiui įkelti, pvz., sujunkite CSS ir JavaScript failus, naudokite CSS Sprites ir pan.

2. Suspauskite JavaScript kodą:

Naudokite įrankius (pvz., UglifyJS, Terser), kad suspaustumėte JavaScript kodą ir sumažintumėte failo dydį.

**3. Atidėkite neesminių išteklių įkėlimą:**4. Naudokite CDN:

Įkelkite statinius išteklius (pvz., JavaScript failus, CSS failus, paveikslėlius ir kt.) į CDN (turinio pristatymo tinklą), kad pagreitintumėte išteklių įkėlimą.

5. Venkite atminties nutekėjimo:

Atkreipkite dėmesį į tai, kad laiku atlaisvintumėte nebenaudojamus objektus ir kintamuosius, kad išvengtumėte atminties nutekėjimo.

6. Optimizuokite DOM operacijas:

Stenkitės sumažinti DOM operacijų skaičių, kad išvengtumėte puslapio strigimo dėl dažno DOM operacijų atlikimo. Naudojant documentFragment galima atnaujinti DOM paketais, taip pagerinant našumą.

7. Naudokite Web Workers:

Sudėtingoms skaičiavimo užduotims galite naudoti Web Workers, kad jas vykdytumėte fone, taip išvengdami pagrindinės gijos blokavimo.

8. Naudokite Vanilla JavaScript:

Kaip Twitter tinkle minėjo @@mannay, kai kuriais paprastais atvejais naudoti gimtąjį JavaScript (Vanilla JavaScript) gali būti efektyviau nei naudoti karkasą.

9. Drag & Drop optimizavimas

Kaip Twitter tinkle minėjo @@midudev @atlaskit/pragmatic-drag-and-drop, pasirinkus lengvą, didelio našumo biblioteką vilkimo scenarijams, taip pat yra svarbi priemonė našumui optimizuoti.

IV. Mokykitės toliau: pasitikite JavaScript ateitį

JavaScript kalba ir ekosistema nuolat tobulėja. Būdamas JavaScript kūrėjas, turite nuolat mokytis naujų technologijų ir įrankių, kad išlaikytumėte konkurencingumą.

1. Sekite naujausias technologijų tendencijas:

Sekite naujausias JavaScript bendruomenės technologijų tendencijas, tokias kaip nauji ECMAScript standartai, nauji karkasai ir bibliotekos ir kt.

2. Dalyvaukite atvirojo kodo projektuose:

Dalyvavimas atvirojo kodo projektuose gali padėti išmokti kitų kūrėjų patirties ir pagerinti savo programavimo įgūdžius.

3. Skaitykite puikų kodą:

Skaitydami puikų kodą galite išmokti gero programavimo stiliaus ir projektavimo modelių.

4. Praktika:

Kaip Twitter tinkle dalijasi daugelis vartotojų, geriausias būdas mokytis yra atlikti keletą projektų. Nesvarbu, ar tai būtų mažas žaidimas, ar sudėtinga žiniatinklio programa, tik praktika gali padėti iš tikrųjų suprasti ir įsisavinti JavaScript žinias ir įgūdžius.

ApibendrinimasŠiame straipsnyje pateikiami praktiniai patarimai ir geriausios praktikos JavaScript kūrėjams, apimantys tokias sritis kaip derinimo technikos, saugus kodavimas ir našumo optimizavimas. Tikimės, kad šie patarimai padės jums rašyti patikimesnį, saugesnį ir efektyvesnį JavaScript kodą, pagerinti kūrimo efektyvumą ir vartotojo patirtį. Kaip JavaScript kūrėjas, turite nuolat mokytis ir praktikuotis, kad išliktumėte konkurencingi sparčiai besivystančioje žiniatinklio kūrimo srityje.