Varnost JavaScript ali kako napisati varno kodo JS. Orodja za nadzor različic

ALEKSANDER MAYOROV, programer, 11 let izkušenj s programiranjem, sedem jih je posvetil razvoju za mobilne naprave

Statična analiza tipov v JavaScriptu
Preizkusite Facebook Flow Analyzer

Facebook je predstavil nov odprtokodni projekt Flow – statični analizator kode za JavaScript. Glavni namen razvoja analizatorja je poenostaviti iskanje napak.

Poleg tega Flow ponuja sintaktično razširitev JavaScript v slogu TypeScript za izrecno določanje vrst. Podprte so številne nove funkcije, uvedene v specifikaciji ECMAScript 6.

Pogosto se dotika tema tipkanja v programskih jezikih. To je predmet holivarjev in določanja pozitivnih ali negativnih lastnosti določenega jezika. V zadnjem času se veliko govori o tipkanju v JavaScriptu. Nekomu je všeč tako kot je. Ljudje, ki poznajo druge programske jezike, zlasti tisti z močnim eksplicitnim tipkanjem, menijo, da je ta pristop "granata v rokah opice". Vsi vemo, da je JavaScript ohlapno dinamično tipkan jezik. Guruji za front-end razvoj so se naučili, kako to uporabiti v svojo korist, vendar je koda včasih pretežka za razumevanje. Tisti, ki so šele prišli v svet programiranja JavaScript, so zbegani nad magijo, ki jo počne tolmač, in pogosto ujamejo napake iz jasnega. Najprej pa se malo poglobimo o tipkanju na splošno. kakšen je?

Tipkanje v programskih jezikih

S tipkanjem se programski jeziki delijo na dva velika tabora - tipkane in netipkane. Na primer, vtipkani jeziki vključujejo jezike, kot so C, Python, PHP, Lua, JavaScript. Primeri netipiziranih jezikov: montažer, Forth, Brainfuck. Da Da točno. JavaScript, tako kot mnogi drugi interpretirani jeziki, se vnaša. Zato v nobenem primeru ne recite, da ni vtipkano. Predvsem na razgovorih za službo.

Po drugi strani so vtipkani jeziki razdeljeni v več prekrivajočih se kategorij:

Statično ali dinamično tipkano.
Močno ali ohlapno tipkano.
Eksplicitno ali implicitno vneseno.

Statično tipizirani jeziki

Pri statičnem tipkanju so končne vrste spremenljivk in funkcij nastavljene v času prevajanja. Prevajalnik popravi vaše napake pri neskladju tipov, še preden se program zažene. Primeri jezikov: C, Java, C #.

Dinamično tipkani jeziki

Pri dinamičnem tipkanju se vse vrste najdejo med izvajanjem. In če naredite napako, boste zanjo vedeli šele, ko boste zagnali program. Zato je pri dinamičnem tipkanju zelo pomembno, da posebno pozornost posvetimo preverjanju in lovljenju napak. Primeri jezikov: JavaScript, PHP, Python, Ruby.

Močno tipkanje (močno)

Močno tipizirani jeziki ne dovoljujejo mešanja različnih vrst v izrazih in ne bodo izvajali samodejnih implicitnih pretvorb. Od niza na primer ne morete odšteti števila ali katere koli druge vrste razen niza. Primeri jezikov: Java, Python, Haskell, Lisp.

Ohlapno tipkanje (šibko)

Ohlapno tipkani jeziki samodejno izvedejo številne implicitne pretvorbe. To storijo tudi, če lahko pride do izgube natančnosti ali pretvorbe, dvoumno. Primeri jezikov: PHP, JavaScript, Visual Basic.

Eksplicitno tipkanje

V eksplicitno tipkanih jezikih je treba vrsto novih spremenljivk/funkcij in argumentov izrecno podati. Primeri jezikov: C ++, D, C #.

Implicitno tipkanje

V jezikih z implicitnim tipkanjem se naloga določanja tipov prenese na prevajalnik / tolmač. Primeri jezikov: JavaScript, PHP, Lua. V takih jezikih imajo objekti praviloma posebne metode, ki se pokličejo ob pretvorbi v tip. Na primer, PHP ima metodo _toString (), JavaScript pa metodo z istim imenom, vendar brez podčrtaja, - toString (). Te metode se pokličejo, ko je predmet privržen vrsti niza. Včasih se takšne metode imenujejo magija (vsi implicitni procesi so vedno magični).

Pomembno je omeniti, da se vse te kategorije prekrivajo. Na podlagi teh kategorij vidimo, da je JavaScript dinamično implicitno vpisan. In če govorimo pretirano, potem lahko naravo jezika opišemo takole: v vsaki nerazumljivi situaciji vse pripeljemo do primitivov, predvsem do črte. Čeprav je v resnici vse nekoliko bolj zapleteno, se zdaj ne bomo spuščali v podrobnosti.

"Zakaj potrebujemo tipkanje?" - lahko vprašate. JavaScript že 20 let dobro živi brez njega. Odgovor je preprost: JavaScript se nikoli ni uporabljal za reševanje zapletenih težav na ravni podjetja. Zdaj je ta jezik presegel brskalnik in vstopil na ozemlje zaledja. Pri pisanju velike aplikacije postane težko ujeti napake, ki so pogosto povezane z oddajanjem.

JavaScript dodatki

Ker se JavaScript izvaja na strani odjemalca (v brskalnikih), je ena od možnosti za rešitev problema izdelava jezika – narečja, ki bo prevedeno v JS. Deluje kot montažer.

Pojavili so se jeziki, kot so TypeScript, Dart, AtScript, ki dodajajo statično močno tipkanje in celo preverjanje tipov med izvajanjem (čeprav to povzroča dodatne stroške). Vsi ti jeziki ne dodajajo le tipov, dodajajo tudi sintaktični sladkor ali celo lastno implementacijo VM, ki je napisana v JS.

Celoten članek preberite v reviji "Sistemski skrbnik", št. 1-2 za leto 2015 na straneh 86-88.

PDF različico te številke lahko kupite v naši trgovini.

Spletno mesto Flow je http://flowtype.org.

V stiku z

Je modularni ovoj, ki generira graf odvisnosti z vsemi moduli za aplikacijo JavaScript. Webpack pakira module v enega ali več majhnih paketov za nalaganje brskalnika. Poleg tega se lahko Webpack uporablja kot zaganjalnik opravil, saj analizira odvisnosti med moduli in ustvarja vire (sredstva). Več o uporabi Webpacka v svojih projektih lahko izveste v našem.

Grunt je tekač opravil, zasnovan za avtomatizacijo ponavljajočih se in zamudnih opravil, ki vzamejo veliko časa. Njegov programski ekosistem ima ogromno število vtičnikov (več kot 6000).

Gulp ni le še en upravitelj opravil, ampak orodje z zanimivim pristopom: naloge v JavaScriptu opredeljuje kot funkcije, GUl avtomatizira boleča opravila in ponuja obsežen programski ekosistem (več kot 2.700 vtičnikov), zagotavlja pa tudi boljšo preglednost in nadzor nad procesom.

Browserify omogoča razvijalcem programske opreme, da uporabljajo module v slogu NodeJS v brskalnikih. Vi definirate odvisnosti, Broweserify pa vse to zapakira v lepo datoteko JS.

Brunch.io je orodje, ki se osredotoča na hitrost in preprostost. Na voljo je s preprosto konfiguracijo in podrobno dokumentacijo za hiter začetek. Brunch samodejno ustvari zemljevid datotek JS skupaj s slogovnimi listami CSS, kar olajša odpravljanje napak na strani odjemalca.

Yeoman je vsestransko orodje, ki se lahko uporablja s skoraj vsemi programskimi jeziki (JavaScript, Python, C #, Java in drugi). Ta osnovni sistem generiranja kode z bogatim programskim ekosistemom (več kot 6200 vtičnikov) se uporablja za razvoj spletnih aplikacij. Z Yeomanom lahko hitro ustvarite nove projekte, ne da bi pozabili vzdrževati in izboljšati obstoječe.

IDE in urejevalniki kode

Swagger je niz pravil in orodij za opis API-jev. Orodje je od jezika neodvisen pripomoček. To pomeni, da Swagger ustvarja jasno dokumentacijo, ki jo lahko berejo tako ljudje kot stroji, kar vam omogoča avtomatizacijo procesov, odvisnih od API-ja.
JSDoc je nabor orodij, ki samodejno ustvari večstransko besedilno dokumentacijo (HTML, JSON, XML itd.) iz komentarjev iz izvorne kode JavaScript. Ta aplikacija je lahko uporabna za upravljanje velikih projektov.
jGrouseDoc (jGD) je prilagodljivo odprtokodno orodje, ki razvijalcem omogoča ustvarjanje API-jev iz komentarjev iz izvorne kode JavaScript. jGD dokumentira ne le spremenljivke in funkcije, temveč tudi imenske prostore, vmesnike, pakete in nekatere druge elemente.
YUIDoc je aplikacija, napisana v NodeJS. Uporablja sintakso, podobno kot Javadoc in Doxygen. Ponaša se tudi s podporo za predogled v živo, razširjeno jezikovno podporo in napredno označevanje.
Docco je brezplačno dokumentacijsko orodje, napisano v "literarnem" CoffeeScript. Ustvari dokument HTML za prikaz vaših komentarjev, prepletenih s kodo. Opozoriti je treba, da orodje podpira ne samo JavaScript, ampak tudi druge jezike. Na primer Python, Ruby, Clojure in drugi.

Orodja za testiranje

Orodja za testiranje JavaScript so zasnovana tako, da med razvojem ujamejo hrošče, da bi se izognili napakam uporabnikov v prihodnosti. Ker kompleksnost aplikacij po meri raste, avtomatizirani testi ne izboljšajo le učinkovitosti aplikacij, ampak podjetjem pomagajo tudi pri ohranjanju proračuna.

Jasmine je ogrodje razvoja, ki temelji na vedenju (BDD) za testiranje kode JS. Nima zunanjih odvisnosti in ne zahteva, da se DOM izvaja. Jasmine ima čisto in preprosto sintakso, ki omogoča hitrejše in lažje testiranje. Okvir se lahko uporablja tudi za testiranje kode Python in Ruby.
Mocha je funkcionalni testni okvir, ki deluje na Node.js v brskalniku. Dosledno izvaja teste, da zagotovi prilagodljivo in natančno poročanje, zaradi česar so asinhroni testi zabavni in enostavni. Mocha se pogosto uporablja v povezavi s Chai za preverjanje rezultatov testov.
PhantomJS se pogosto uporablja za front-end teste in teste enot. Glede na to, da je to nekaj takega kot "brezglavi" WebKit, se skripti izvajajo veliko hitreje. Vključuje tudi vgrajeno podporo za različne spletne standarde. Na primer JSON, Canvas, DOM rokovanje, SVG in CSS izbirniki.
Protractor je okvir za testiranje od konca do konca, napisan v Node.js za testiranje aplikacij AngularJS in Angular. Zgrajen je bil na podlagi WebDriverJS in potrjuje aplikacije kot končni uporabnik z uporabo gonilnikov po meri in dogodkov v vrstici.

Orodja za odpravljanje napak

Odpravljanje napak kode je naporen in dolgotrajen postopek za razvijalce JavaScript. Orodja za odpravljanje napak so še posebej uporabna pri delu z več tisoč vrsticami kode. Številna orodja za odpravljanje napak zagotavljajo dokaj natančne rezultate.

JavaScript Debugger je orodje iz skupnosti razvijalcev Mozilla (MDN), ki se lahko uporablja kot samostojno spletno aplikacijo za odpravljanje napak kode v brskalnikih. Firefox ponuja lokalno in oddaljeno funkcionalnost ter možnost odpravljanja napak kode v napravi Android z uporabo Firefoxa za Android.
Chrome Dev Tools je nabor orodij, ki vključuje več pripomočkov za odpravljanje napak kode JavaScript, urejanje CSS in testiranje učinkovitosti aplikacij.
ng-inspector je razširitev za več brskalnikov, zasnovana tako, da pomaga razvijalcem pisati, razumeti in odpravljati napake v aplikacijah AngularJS. Pripomoček je opremljen s posodobitvami v realnem času, poudarjanjem DOM, neposrednim dostopom do regij, modelov in drugih elementov aplikacije.
Augury je razširitev za brskalnik Google Chrome in za odpravljanje napak v aplikacijah Angular 2. Omogoča razvijalcem aplikacij Angular 2, da neposredno analizirajo strukturo in zmogljivost aplikacije ter zaznajo spremembe.

Varnostna orodja

Snyk je komercialno orodje za odkrivanje, odpravljanje in preprečevanje znanih ranljivosti v aplikacijah JavaScript, Java in Ruby. Storitev ima svojo bazo podatkov o ranljivostih in črpa podatke iz NSP in NIST NVD. Popravki in posodobitve, ki jih ponuja podjetje, omogočajo razvijalcem, da predvidevajo varnostna tveganja.
Node Security Project ponuja uporabna orodja za pregledovanje odvisnosti in odkrivanje ranljivosti. NSP uporablja lastno bazo podatkov, zgrajeno na skeniranju modula npm, kot tudi podatke iz običajnih baz podatkov, kot je NIST NVD (National Vulnerability Database). Poleg tega NSP zagotavlja integracijo s programsko opremo GitHub Pull Request in CI. Obstajajo tudi skeniranje v realnem času, opozorila in priporočila za odpravo ranljivosti v aplikacijah Node.js.
RetireJS je odprtokodni pregledovalnik odvisnosti. Vključuje različne komponente, kot so skener ukazne vrstice, vtičnik Grunt, razširitve za Firefox in Chrome, vtičniki Burp in OWASP ZAP. Retirejs zbira informacije o ranljivosti iz NIST NVD in drugih virov, kot so sledilci hroščev, blogi in poštni seznami.
Gemnasium je komercialno orodje z brezplačnim preskusom. Podpira različne tehnologije in pakete, vključno z Ruby, PHP, Bower (JavaScript), Python in npm (JavaScript). Varnostno orodje Gemnasium ima uporabne funkcije, kot so samodejne posodobitve, opozorila v realnem času, varnostna obvestila in integracija s storitvijo Slack.
OSSIndex podpira različne ekosisteme (Java, JavaScript in .NET/C #) in številne platforme, kot so NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal in MSI. Zbira informacije o ranljivosti iz nacionalne baze podatkov o ranljivosti (NVD) in pregleduje. Prav tako obdeluje informacije članov skupnosti.

Orodja za analitiko in optimizacijo kode

Za preverjanje kakovosti kode se običajno obrnemo na funkcionalno testiranje in testiranje enot. Vendar pa obstaja še en pristop, ki razvijalcem omogoča preverjanje kakovosti kode in njene skladnosti s standardi kodiranja, in sicer statična analiza kode.

Trenutno sodobna programska oprema združuje orodja za analizo statične kode med razvojem, da bi izključili nizkokakovostno kodo iz proizvodnje.

JSLint je orodje za spletno analitiko za preverjanje kakovosti kode JavaScript. Ko zazna težavo pri viru, vrne sporočilo z opisom težave in približno lokacijo v kodi. JSLint lahko razčleni nekatere slogovne norme in razkrije sintaksne napake in strukturne težave.
JSHint je prilagodljivo orodje, ki ga poganja skupnost za odkrivanje hroščev in morebitnih težav v vaši kodi JS, JSHint pa je razcep JSLint. Glavni namen tega orodja za analizo statične kode je pomagati razvijalcem JavaScript, ki delajo na zapletenih programih. Sposoben je zaznati napake v skladnji, implicitne pretvorbe podatkovnih tipov ali manjkajočo spremenljivko. Vendar pa ne more zaznati hitrosti in pravilnosti vaše aplikacije, niti ne more prepoznati težav s pomnilnikom v vaši aplikaciji. JSHint je razcep iz JSLint.
ESLint je odprtokodni linter za spletne aplikacije JSX in JavaScript. Pomaga vam odkriti vprašljive vzorce ali najti kodo, ki se ne ujema z določenimi slogi. To omogoča razvijalcem, da odkrijejo napake v kodi JS, ne da bi jo izvajali, in s tem prihranijo čas. Orodje, napisano v Node.js, ponuja odziven čas izvajanja in nemoteno namestitev prek npm.
Flow je statični krmilnik kode JavaScript, ki ga je razvil Facebook. Za preverjanje napak v vaši kodi uporablja statične opombe. Vrste so parametri, ki jih nastavijo razvijalci, Flow pa preveri skladnost vaše programske opreme.

Orodja za nadzor različic

V zadnjih letih je Git postal široko uporabljen sistem za nadzor različic tako za majhne kot za velike projekte. Ta brezplačni pripomoček zagotavlja odlično hitrost in učinkovitost. Njegova priljubljenost je posledica njegovega porazdeljenega sistema in različnih vrst kontrol ter uprizoritvenega območja, kjer si je mogoče predogledati in formatirati različice tik pred zaključkom potrditve.
Orodje Subversion ali SVN je pridobilo izjemno priljubljenost in se še vedno pogosto uporablja v odprtokodnih projektih in platformah, kot sta Python Apache ali Ruby. Ta CVS ima številne funkcije za upravljanje različnih operacij (preimenovanje, kopiranje, brisanje itd.), spajanja, zaklepanja datotek in še več.

Orodja za upravljanje paketov in odvisnosti

Seznam najboljših razvojnih orodij JavaScript se lahko nadaljuje in nadaljuje. V tem članku ste videli le priljubljena in zanesljiva orodja, ki so osnova za kakovostne izdelke.

In učitelj netologije je za blog napisal serijo člankov o EcmaScript6. V prvem delu si bomo ogledali primere dinamične analize kode v EcmaScript z uporabo Iroh.js.

Statična in dinamična analiza kode

Orodja za analizo kode so uporabno orodje za odkrivanje in odkrivanje napak in posebnosti pri delu kode. Analiza kode je lahko statična in dinamična. V prvem primeru se izvorna koda razčleni in analizira brez izvajanja, v drugem pa izvedba poteka v nadzorovanem okolju peskovnika, ki zagotavlja metainformacije o elementih aplikacije med njenim izvajanjem.

sklepi

Iroh.js je zmogljivo in funkcionalno orodje za dinamično analizo kode v EcmaScript. To orodje se lahko uporablja za analizo kode, vključno z izgradnjo grafa klicev, prikazovanjem dejanskih tipov in vrednosti v spremenljivkah in objektih, ter za sprotno spreminjanje kode, vključno s popravki kode na podlagi dogodkov.

Dinamična analiza je precej zapletena metoda, toda za EcmaScript je to edini način za analizo in odpravljanje napak v kodi, glede na preprosto tipkanje, prisotnost gostiteljskih objektov in izvornih funkcij, ki omogočajo spreminjanje obnašanja kode. v času izvajanja. Iroh.js lahko uporablja kodo tudi za ustvarjanje funkcionalnih testov, ne da bi jo bilo treba spreminjati za izvoz vrednosti.

Vsaka vrstica moje kode ni popolna prvič. No, v nekaterih primerih ... Včasih ... V redu - skoraj nikoli. Resnica je, da porabim bistveno več časa za popravljanje lastnih neumnih napak, kot bi si želel. Zato uporabljam statične analizatorje v skoraj vsaki datoteki JavaScript, ki jo napišem.

Statični analizatorji pregledajo vašo kodo in v njej najdejo napake, preden jo zaženete. Izvajajo preprosta preverjanja, kot je uveljavljanje preverjanja skladnje (na primer tabulatorji namesto presledkov) in bolj globalna preverjanja, na primer preverjanje, ali funkcije niso pretirano zapletene. Statični analizatorji iščejo tudi napake, ki jih med testiranjem ni mogoče najti, na primer == namesto ===.

Pri velikih projektih in pri delu v velikih ekipah si lahko pomagate pri iskanju tako "preprostih" napak, ki se v resnici izkažejo za ne tako preproste, kot se zdijo.

JSLint, JSHint in prevajalnik zapiranja

Obstajajo tri glavne možnosti za statične analizatorje za JavaScript: JSLint, JSHint in Closure Compiler.

JSLint je bil prvi statični analizator za JavaScript. Lahko ga zaženete na uradni strani ali uporabite enega od dodatkov, ki se lahko izvajajo na lokalnih datotekah. JSLint najde veliko pomembnih napak, vendar je zelo težak. Tukaj je odličen primer:

var s = "mystring";
za (var i = 0; i< s.length; i++) {
console.log (s.charAt (i));
}

JSLint kaže dve napaki v tej kodi:

Nepričakovano "++".
Premaknite deklaracije "var" na vrh funkcije.

Prva težava je definicija spremenljivke i v pogojih zanke. JSLint tudi ne sprejema operatorja ++ na koncu definicije zanke. Želi, da bi koda izgledala takole:

var s = "mystring";
var i;
za (i = 0; i< s.length; i = i + 1) {
console.log (s.charAt (i));
}

Cenim ustvarjalce JSLinta, a zame je to pretirano. Izkazalo se je, da je težko tudi za Antona Kovaleva, zato je ustvaril JSHint.

JSHint lahko zaženete s spletnega mesta, vendar je v večini primerov bolje namestiti JSHint kot lokalno orodje ukazne vrstice z uporabo Node.js. Ko imate nameščen JSHint, ga lahko zaženete v svojih datotekah z ukazom, kot je ta:

jshint test.js

JSHint vključuje tudi vtičnike za priljubljene urejevalnike besedil, tako da ga lahko zaženete med pisanjem kode.

PREVAJALNIK ZAPIRANJA

Googlov Closure Compiler je popolnoma drugačna vrsta programa. Kot že ime pove, ni le testni program, ampak tudi prevajalnik. Napisana je v Javi in temelji na Mozillinem razčlenjevalniku Rhino. Closure Compiler vključuje preprost način za izvajanje osnovnega preverjanja kode in bolj zapletene načine za dodatno preverjanje in uveljavljanje specifičnih definicij pogleda.

Prevajalnik zapiranja poroča o napakah v kodi JavaScript, ustvari pa tudi pomanjšane različice JavaScripta. Prevajalnik odstrani presledke, komentarje in neuporabljene spremenljivke ter poenostavi dolge izraze, da ostane skript čim bolj kompakten.

Google je na spletu dal na voljo zelo osnovno različico prevajalnika, a najverjetneje boste želeli prenesti Closure Compiler in ga zagnati lokalno.

Closure Compiler po preverjanju kode izpiše seznam datotek v eno pomanjšano datoteko. Tako ga lahko zaženete tako, da prenesete datoteko compiler.jar.

java -jar compiler.jar --js_output_file compress.js --js test1.js --js test2.js

Izbira pravega programa za preverjanje

V svojih projektih združujem Closure Compiler in JSHint. Closure Compiler izvaja pomanjševanje in osnovno preverjanje, medtem ko JSHint izvaja kompleksnejšo analizo kode. Ta dva programa odlično delujeta skupaj in vsak od njiju pokriva področja, ki jih drugi ne morejo. Poleg tega lahko uporabim razširitev JSHint za pisanje validatorjev po meri. En generični program, ki sem ga napisal, testira določene funkcije, ki jih ne potrebujem, na primer klicanje funkcij, ki ne bi smele biti v mojem projektu.

Zdaj, ko smo pokrili nekaj programov za preverjanje, razčlenimo nekaj slabe kode. Vsak od teh šestih primerov je koda, ki ni vredna pisanja, in situacije, kjer vas lahko rešijo validatorji kode.

Ta članek za večino primerov uporablja JSHint, vendar Closure Compiler običajno ustvari podobna opozorila.

== ali ===?

JavaScript je dinamično tipkan jezik. Med pisanjem kode vam ni treba definirati tipov in obstajajo ob zagonu.

JavaScript ponuja dva primerjalna operaterja za manipulacijo takšnih dinamičnih tipov: == in ===. Oglejmo si to s primerom.

var n = 123;
var s = "123";

če (n == s) (
opozorilo ("Spremenljivke so enake");
}

če (n === s) (
opozorilo ("Spremenljivke so enake");
}

Operater primerjave == So ostanki jezika C, v katerem ima korenine JavaScript. Njegova uporaba je skoraj vedno napaka: primerjava vrednosti ločeno od tipov je redko nekaj, kar si razvijalec dejansko želi. Pravzaprav se število "sto triindvajset" razlikuje od niza "ena dva tri". Te operaterje je enostavno napačno črkovati in še lažje napačno prebrati. Preverite to kodo z JSHint in dobite to:

test.js: vrstica 9, stolpec 12, pričakovano "===" in namesto tega videl "==".

Nedefinirane spremenljivke in pozne definicije

Začnimo z nekaj preproste kode:

preizkus funkcije () (
var myVar = "Pozdravljeni, svet";
console.log (myvar);
}

Vidite napako? To napako naredim vsakič. Zaženite to kodo in dobili boste napako:

ReferenceError: myvar ni definiran

Zadevo malce zakomplicirajmo:

preizkus funkcije () (
myVar = "Pozdravljeni, svet";
console.log (myVar);
}

Zaženite to kodo in dobite to:

Pozdravljen, svet

Ta drugi primer deluje, vendar ima zelo nepričakovane stranske učinke. Pravila za definiranje spremenljivk in obsega JavaScript so kvečjemu zmedena. V prvem primeru bo JSHint poročal o naslednjem:

test.js: vrstica 3, stolpec 17, "myvar" ni definiran.

V drugem primeru bo poročal o tem:

test.js: vrstica 2, stolpec 5, "myVar" ni definiran.
test.js: vrstica 3, stolpec 17, "myVar" ni definiran.

Prvi primer vam bo pomagal preprečiti napako med izvajanjem. Ni vam treba testirati svoje aplikacije - JSHint bo našel napako namesto vas. Drugi primer je slabši, saj kot rezultat testiranja ne boste našli napake.

Težava v drugem primeru je zahrbtno subtilna in zapletena. Spremenljivka myVar je zdaj izginila iz svojega obsega in se je premaknila na globalni obseg. To pomeni, da bo obstajal in imel vrednost Hello, World tudi po zagonu testne funkcije. Temu pravimo globalno onesnaževanje.

Spremenljivka myVar bo obstajala za vsako drugo funkcijo, ki se izvaja po testni funkciji. Po zagonu testne funkcije zaženite naslednjo kodo:

console.log ("myVar:" + myVar);

Še vedno boste prejeli Pozdravljeni, svet. Spremenljivka myVar bo visela v vaši kodi kot predloga, kar vodi do zapletenih napak, ki jih boste iskali vso noč pred izdajo, vse zato, ker ste pozabili napisati var.

Ta vnos je šel skozi storitev RSS za polno besedilo – če je to vaša vsebina in jo »preberete na spletnem mestu nekoga drugega«, preberite pogosta vprašanja na http://ift.tt/jcXqJW.

Pri velikih projektih in pri delu v velikih ekipah si lahko pomagate pri iskanju tako "preprostih" napak, ki se v resnici izkažejo za ne tako preproste, kot se zdijo.

JSLint, JSHint in prevajalnik zapiranja

Obstajajo tri glavne možnosti za statične analizatorje za JavaScript: JSLint, JSHint in Closure Compiler.

Var s = "mystring"; za (var i = 0; i< s.length; i++) { console.log(s.charAt(i)); }

JSLint kaže dve napaki v tej kodi:

Nepričakovano "++". Premaknite deklaracije "var" na vrh funkcije.

Prva težava je definicija spremenljivke i v pogojih zanke. JSLint tudi ne sprejema operatorja ++ na koncu definicije zanke. Želi, da bi koda izgledala takole:

Var s = "mystring"; var i; za (i = 0; i< s.length; i = i + 1) { console.log(s.charAt(i)); }

Cenim ustvarjalce JSLinta, a zame je to pretirano. Izkazalo se je, da je težko tudi za Antona Kovaleva, zato je ustvaril JSHint.

JSHint deluje enako kot JSLint, vendar je napisan poleg Node.js in je zato bolj prilagodljiv. JSHint vključuje veliko število možnosti, ki vam omogočajo izvajanje preverjanj po meri z pisanjem lastnega generatorja poročil.
JSHint lahko zaženete s spletnega mesta, vendar je v večini primerov bolje namestiti JSHint kot lokalno orodje ukazne vrstice z uporabo Node.js. Ko imate nameščen JSHint, ga lahko zaženete v svojih datotekah z ukazom, kot je ta:

Jshint test.js

JSHint vključuje tudi vtičnike za priljubljene urejevalnike besedil, tako da ga lahko zaženete med pisanjem kode.

PREVAJALNIK ZAPIRANJA

Google je na spletu dal na voljo zelo osnovno različico prevajalnika, a najverjetneje boste želeli prenesti Closure Compiler in ga zagnati lokalno.

Closure Compiler po preverjanju kode izpiše seznam datotek v eno pomanjšano datoteko. Tako ga lahko zaženete tako, da prenesete datoteko compiler.jar.

Java -jar compiler.jar --js_output_file compress.js --js test1.js --js test2.js

Izbira pravega programa za preverjanje

Zdaj, ko smo pokrili nekaj programov za preverjanje, razčlenimo nekaj slabe kode. Vsak od teh šestih primerov je koda, ki ni vredna pisanja, in situacije, kjer vas lahko rešijo validatorji kode.

Ta članek za večino primerov uporablja JSHint, vendar Closure Compiler običajno ustvari podobna opozorila.

== ali ===?

JavaScript je dinamično tipkan jezik. Med pisanjem kode vam ni treba definirati tipov in obstajajo ob zagonu.

JavaScript ponuja dva primerjalna operaterja za manipulacijo takšnih dinamičnih tipov: == in ===. Oglejmo si to s primerom.

Var n = 123; var s = "123"; if (n == s) (opozorilo ("Spremenljivke so enake");) if (n === s) (opozorilo ("Spremenljivke so enake");)

Operater primerjave == so ostanki jezika C, v katerem ima korenine JavaScript. Njegova uporaba je skoraj vedno napaka: primerjava vrednosti ločeno od tipov je redko nekaj, kar si razvijalec dejansko želi. Pravzaprav se število "sto triindvajset" razlikuje od niza "ena dva tri". Te operaterje je enostavno napačno črkovati in še lažje napačno prebrati. Preverite to kodo z JSHint in dobite to:

Test.js: vrstica 9, stolpec 12, pričakovano "===" in namesto tega videl "==".

Nedefinirane spremenljivke in pozne definicije

Začnimo z nekaj preproste kode:

Funkcijski test () (var myVar = "Hello, World"; console.log (myvar);)

Vidite napako? To napako naredim vsakič. Zaženite to kodo in dobili boste napako:

ReferenceError: myvar ni definiran

Zadevo malce zakomplicirajmo:

Test funkcije () (myVar = "Hello, World"; console.log (myVar);)

Zaženite to kodo in dobite to:

Pozdravljen, svet

Test.js: vrstica 3, stolpec 17, "myvar" ni definiran.

V drugem primeru bo poročal o tem:

Test.js: vrstica 2, stolpec 5, "myVar" ni definiran. test.js: vrstica 3, stolpec 17, "myVar" ni definiran.

Spremenljivka myVar bo obstajala za vsako drugo funkcijo, ki se izvaja po testni funkciji. Po zagonu testne funkcije zaženite naslednjo kodo:

Console.log ("myVar:" + myVar);