JavaScript sigurnost ili kako napisati siguran JS kod. Alati za kontrolu verzija

ALEKSANDAR MAYOROV, programer, 11 godina iskustva u programiranju, od kojih je sedam posvetio razvoju za mobilne uređaje

Statička analiza tipova u JavaScriptu
Isprobavanje Facebook Flow Analyzer

Facebook je predstavio novi open source projekt Flow – statički analizator koda za JavaScript. Glavna svrha razvoja analizatora je pojednostaviti traženje pogrešaka.

Osim toga, Flow pruža JavaScript sintaktičko proširenje u stilu TypeScript za eksplicitno određivanje tipova. Podržane su mnoge nove značajke uvedene u specifikaciji ECMAScript 6.

Često se dotiče tema tipkanja u programskim jezicima. To je predmet holivara i utvrđivanja pozitivnih ili negativnih osobina određenog jezika. U posljednje vrijeme puno se govori o tipkanju u JavaScriptu. Nekome se sviđa takav kakav jest. Ljudi koji su upoznati s drugim programskim jezicima, osobito oni s jakim eksplicitnim tipkanjem, smatraju ovaj pristup "granatom u rukama majmuna". Svi znamo da je JavaScript labavo dinamički upisan jezik. Gurui za front-end razvoj naučili su kako to iskoristiti u svoju korist, ali je kod ponekad pretežak za razumijevanje. Oni koji tek dolaze u svijet JavaScript programiranja zbunjeni su čarolijom koju tumač čini i često uhvate pogreške iz vedra neba. Ali prvo, hajdemo malo kopati o tipkanju općenito. Kako je?

Tipkanje u programskim jezicima

Po tipkanju, programski jezici se dijele u dva velika tabora - tipkani i netipkani. Na primjer, upisani jezici uključuju jezike kao što su C, Python, PHP, Lua, JavaScript. Primjeri netipiziranih jezika: asembler, Forth, Brainfuck. Da Da, točno. JavaScript se, kao i mnogi drugi interpretirani jezici, upisuje. Stoga, ni u kojem slučaju ne govorite da je neotipkano. Pogotovo na razgovorima za posao.

Zauzvrat, tipkani jezici podijeljeni su u nekoliko preklapajućih kategorija:

Statički ili dinamički tipkano.
Jaka ili labavo napisana.
Eksplicitno ili implicitno upisano.

Statički tipizirani jezici

Sa statičkim tipkanjem, konačni tipovi varijabli i funkcija postavljaju se u vrijeme prevođenja. Prevoditelj ispravlja pogreške neusklađenosti vaših tipova čak i prije pokretanja programa. Primjeri jezika: C, Java, C #.

Dinamički tipizirani jezici

U dinamičkom tipkanju, sve vrste se otkrivaju tijekom izvođenja. A ako pogriješite, saznat ćete za to tek kada pokrenete program. Stoga je kod dinamičkog tipkanja vrlo važno obratiti posebnu pozornost na provjeru i hvatanje pogrešaka. Primjeri jezika: JavaScript, PHP, Python, Ruby.

Jako kucanje (jako)

Jako tipizirani jezici ne dopuštaju miješanje različitih tipova u izrazima i neće izvršiti automatske implicitne konverzije. Na primjer, od niza ne možete oduzeti broj ili bilo koju drugu vrstu osim niza. Primjeri jezika: Java, Python, Haskell, Lisp.

Lako kucanje (slabo)

Labavo tipkani jezici automatski izvode mnoge implicitne konverzije. Oni to čine čak i ako može doći do gubitka preciznosti ili pretvorbe, dvosmisleno. Primjeri jezika: PHP, JavaScript, Visual Basic.

Eksplicitno kucanje

U eksplicitno upisanim jezicima, tip novih varijabli / funkcija i argumenata mora biti eksplicitno specificiran. Primjeri jezika: C ++, D, C #.

Implicitno tipkanje

U jezicima s implicitnim tipkanjem, zadatak specificiranja tipova prenosi se na kompajler / tumač. Primjeri jezika: JavaScript, PHP, Lua. U takvim jezicima, u pravilu, objekti imaju posebne metode koje se pozivaju nakon lijevanja na tip. Na primjer, PHP ima metodu _toString (), a JavaScript metodu istog imena, ali bez donje crte, - toString (). Ove metode se pozivaju kada se objekt prebacuje na vrstu stringa. Ponekad se takve metode nazivaju magijom (svi implicitni procesi su uvijek magični).

Važno je napomenuti da se sve ove kategorije preklapaju. Na temelju ovih kategorija vidimo da se JavaScript dinamički implicitno upisuje. A ako govorimo pretjerano, onda se priroda jezika može opisati na sljedeći način: u svakoj nerazumljivoj situaciji sve dovedite na primitivce, uglavnom na liniju. Iako je u stvarnosti sve malo kompliciranije, nećemo sada ulaziti u detalje.

"Zašto trebamo tipkati?" - možete pitati. JavaScript je dobro živio bez njega već 20 godina. Odgovor je jednostavan: JavaScript se nikada nije koristio za rješavanje složenih problema na razini poduzeća. Sada je ovaj jezik otišao izvan preglednika i ušao u pozadinski teritorij. Kada pišete veliku aplikaciju, postaje teško uhvatiti pogreške koje su često povezane s castingom.

JavaScript dodaci

Budući da se JavaScript izvršava na strani klijenta (u preglednicima), jedna od opcija za rješavanje problema je kreiranje jezika – dijalekta koji će biti preveden u JS. Djeluje kao montažer.

Pojavili su se jezici kao što su TypeScript, Dart, AtScript koji dodaju statičko snažno tipkanje, pa čak i provjeru tipova tijekom izvođenja (iako to povećava troškove). Svi ovi jezici ne dodaju samo tipove, oni također dodaju ili sintaktički šećer ili čak vlastitu implementaciju VM-a, koja je napisana u JS-u.

Cijeli članak pročitajte u časopisu "Administrator sustava", br. 1-2 za 2015. na stranicama 86-88.

PDF verzija ovog izdanja može se kupiti u našoj trgovini.

Web stranica Flow je http://flowtype.org.

U kontaktu s

To je modularni omot koji generira graf ovisnosti sa svim modulima za JavaScript aplikaciju. Webpack pakira module u jedan ili više malih paketa za učitavanje preglednika. Osim toga, Webpack se može koristiti kao pokretač zadataka jer analizira ovisnosti između modula i generira resurse (sredstva). Više o korištenju Webpacka u svojim projektima možete saznati u našem.

Grunt je pokretač zadataka dizajniran za automatizaciju zadataka koji se ponavljaju i oduzimaju puno vremena koji oduzimaju puno vremena. Njegov softverski ekosustav ima ogroman broj dodataka (preko 6000).

Gulp nije samo još jedan upravitelj zadataka, već alat sa zanimljivim pristupom: definira zadatke u JavaScriptu kao funkcije, također GUl automatizira bolne zadatke, nudeći opsežan softverski ekosustav (preko 2700 dodataka), a također pruža bolju transparentnost i kontrolu nad procesom.

Browserify omogućuje programerima softvera da koriste module u stilu NodeJS u preglednicima. Vi definirate ovisnosti, a Broweserify sve to pakira u urednu JS datoteku.

Brunch.io je alat koji se fokusira na brzinu i jednostavnost. Dolazi s jednostavnom konfiguracijom i detaljnom dokumentacijom za brzi početak. Brunch automatski generira kartu JS datoteka zajedno s CSS stilovima, što olakšava ispravljanje pogrešaka na strani klijenta.

Yeoman je svestran alat koji se može koristiti s gotovo bilo kojim programskim jezikom (JavaScript, Python, C #, Java i drugi). Ovaj osnovni sustav generiranja koda s bogatim softverskim ekosustavom (preko 6200 dodataka) koristi se za razvoj web aplikacija. Uz Yeoman možete brzo kreirati nove projekte, a da ne zaboravite održavati i poboljšati postojeće.

IDE i uređivači koda

Swagger je skup pravila i alata za opisivanje API-ja. Alat je uslužni program neovisan o jeziku. To znači da Swagger stvara jasnu dokumentaciju koju mogu čitati i ljudi i strojevi, što vam omogućuje automatizaciju procesa ovisnih o API-ju.
JSDoc je skup alata koji automatski generira tekstualnu dokumentaciju na više stranica (HTML, JSON, XML, itd.) iz komentara iz JavaScript izvornog koda. Ova aplikacija može biti korisna za upravljanje velikim projektima.
jGrouseDoc (jGD) je fleksibilan alat otvorenog koda koji programerima omogućuje generiranje API-ja iz komentara iz JavaScript izvornog koda. jGD dokumentira ne samo varijable i funkcije, već i prostore imena, sučelja, pakete i neke druge elemente.
YUIDoc je aplikacija napisana u NodeJS-u. Koristi sintaksu sličnu Javadoc i Doxygenu. Također se može pohvaliti podrškom za pregled uživo, proširenom jezičnom podrškom i naprednim označavanjem.
Docco je besplatni dokumentacijski alat napisan u "literarnom" CoffeeScript-u. Stvara HTML dokument za prikaz vaših komentara prošaranih kodom. Valja napomenuti da alat podržava ne samo JavaScript već i druge jezike. Na primjer, Python, Ruby, Clojure i drugi.

Alati za testiranje

Alati za testiranje JavaScripta dizajnirani su za hvatanje grešaka tijekom razvoja kako bi se izbjegle buduće korisničke greške. Kako složenost prilagođenih aplikacija raste, automatizirani testovi ne samo da poboljšavaju performanse aplikacije, već i pomažu tvrtkama u održavanju proračuna.

Jasmine je Behavior-driven Development (BDD) okvir za testiranje JS koda. Nema vanjske ovisnosti i ne zahtijeva DOM za pokretanje. Jasmine ima čistu i jednostavnu sintaksu koja čini testiranje bržim i lakšim. Okvir se također može koristiti za testiranje Python i Ruby koda.
Mocha je funkcionalni testni okvir koji radi na Node.js u pregledniku. Dosljedno izvodi testove kako bi pružio fleksibilno i točno izvješćivanje, čineći asinkrone testove zabavnim i lakim. Mocha se često koristi zajedno s Chaijem za provjeru rezultata testa.
PhantomJS se često koristi za front-end testove i jedinične testove. S obzirom da je ovo nešto poput "bez glave" WebKit-a, skripte se mnogo brže izvode. Također uključuje ugrađenu podršku za različite web standarde. Na primjer JSON, Canvas, DOM rukovanje, SVG i CSS selektori.
Protractor je okvir za testiranje s kraja na kraj napisan u Node.js za testiranje AngularJS i Angular aplikacija. Izgrađen je na vrhu WebDriverJS-a i potvrđuje aplikacije poput krajnjeg korisnika koristeći prilagođene upravljačke programe i umetnute događaje.

Alati za otklanjanje pogrešaka

Otklanjanje pogrešaka koda je naporan i dugotrajan proces za JavaScript programere. Alati za otklanjanje pogrešaka posebno su korisni kada radite s tisućama redaka koda. Mnogi alati za otklanjanje pogrešaka daju prilično točne rezultate.

JavaScript Debugger je alat iz Mozilla Developer Community (MDN) koji se može koristiti kao samostalna web aplikacija za otklanjanje pogrešaka koda u svim preglednicima. Firefox nudi lokalnu i udaljenu funkcionalnost te mogućnost otklanjanja pogrešaka koda na Android uređaju pomoću Firefoxa za Android.
Chrome Dev Tools skup je alata koji uključuje nekoliko uslužnih programa za otklanjanje pogrešaka u JavaScript kodu, uređivanje CSS-a i testiranje performansi aplikacije.
ng-inspector je proširenje za više preglednika dizajnirano da pomogne programerima da pišu, razumiju i otklanjaju pogreške u AngularJS aplikacijama. Uslužni program dolazi s ažuriranjima u stvarnom vremenu, isticanjem DOM-a, izravnim pristupom regijama, modelima i drugim elementima aplikacije.
Augury je proširenje za preglednik Google Chrome i za otklanjanje pogrešaka u aplikacijama Angular 2. Omogućuje programerima aplikacija Angular 2 da izravno analiziraju strukturu i performanse aplikacije te otkriju promjene.

Sigurnosni alati

Snyk je komercijalni alat za otkrivanje, popravljanje i sprječavanje poznatih ranjivosti u JavaScript, Java i Ruby aplikacijama. Servis ima vlastitu bazu podataka ranjivosti i povlači podatke iz NSP-a i NIST NVD-a. Zakrpe i ažuriranja koje nudi tvrtka omogućuju programerima da predvide sigurnosne rizike.
Node Security Project nudi korisne alate za skeniranje ovisnosti i otkrivanje ranjivosti. NSP koristi vlastitu bazu podataka, izgrađenu na skeniranju npm modula, kao i podatke iz uobičajenih baza podataka kao što je NIST NVD (National Vulnerability Database). Osim toga, NSP omogućuje integraciju s GitHub Pull Request i CI softverom. Tu je i skeniranje u stvarnom vremenu, upozorenja i preporuke za uklanjanje ranjivosti u Node.js aplikacijama.
RetireJS je provjera ovisnosti otvorenog koda. Uključuje različite komponente kao što su skener naredbenog retka, dodatak Grunt, proširenja za Firefox i Chrome, dodatke Burp i OWASP ZAP. Retirejs prikuplja informacije o ranjivosti iz NIST NVD-a i drugih izvora kao što su programi za praćenje bugova, blogovi i mailing liste.
Gemnasium je komercijalni alat s besplatnom probnom verzijom. Podržava razne tehnologije i pakete uključujući Ruby, PHP, Bower (JavaScript), Python i npm (JavaScript). Gemnasium sigurnosni alat dolazi s korisnim značajkama kao što su automatska ažuriranja, upozorenja u stvarnom vremenu, sigurnosne obavijesti i integracija sa Slack uslugom.
OSSIndex podržava razne ekosustave (Java, JavaScript i .NET/C #) i mnoge platforme kao što su NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal i MSI. Prikuplja informacije o ranjivosti iz Nacionalne baze podataka o ranjivosti (NVD) i pregleda. Također obrađuje informacije od članova zajednice.

Alati za analitiku i optimizaciju koda

Kako bi se provjerila kvaliteta koda, obično se okreće funkcionalnom testiranju i testiranju jedinica. Međutim, postoji još jedan pristup koji programerima omogućuje provjeru kvalitete koda i njegovu usklađenost sa standardima kodiranja, a to je statička analiza koda.

Trenutno, moderni softver kombinira alate za analizu statičkog koda tijekom razvoja kako bi se isključio nekvalitetan kod iz ulaska u proizvodnju.

JSLint je alat za web analizu za provjeru kvalitete JavaScript koda. Nakon što otkrije problem na izvoru, vraća poruku s opisom problema i približnom lokacijom u kodu. JSLint je u stanju raščlaniti neke stilske norme i otkriti sintaktičke pogreške i strukturne probleme.
JSHint je fleksibilan alat vođen zajednice za otkrivanje grešaka i potencijalnih problema u vašem JS kodu, a JSHint je fork JSLint-a. Glavna svrha ovog alata za statičku analizu koda je pomoći JavaScript programerima koji rade na složenim programima. Sposoban je otkriti sintaktičke pogreške, implicitne konverzije tipa podataka ili varijablu koja nedostaje. Međutim, ne može otkriti brzinu i ispravnost vaše aplikacije, niti može identificirati probleme s memorijom u vašoj aplikaciji. JSHint je vilica iz JSLinta.
ESLint je linter otvorenog koda za JSX i JavaScript web aplikacije. Pomaže vam uočiti upitne obrasce ili pronaći kod koji ne odgovara određenim stilovima. To omogućuje programerima da otkriju pogreške u JS kodu bez njegovog izvršavanja, čime štede vrijeme. Napisan u Node.js, alat nudi brzo vrijeme rada i glatku instalaciju putem npm-a.
Flow je statički kontroler JavaScript koda koji je razvio Facebook. Koristi bilješke statičke vrste za provjeru grešaka u vašem kodu. Vrste su parametri koje postavljaju programeri, a Flow provjerava usklađenost vašeg softvera.

Alati za kontrolu verzija

Posljednjih godina Git je postao široko korišten sustav kontrole verzija za male i velike projekte. Ovaj besplatni uslužni program pruža izvrsnu brzinu i učinkovitost. Njegova je popularnost posljedica njegovog distribuiranog sustava i raznih vrsta kontrola, kao i područja u kojem se verzije mogu pregledati i formatirati neposredno prije dovršetka urezivanja.
Alat Subversion, ili SVN, stekao je ogromnu popularnost i još uvijek se široko koristi u projektima i platformama otvorenog koda kao što su Python Apache ili Ruby. Ovaj CVS dolazi s mnogim značajkama za upravljanje raznim operacijama (preimenovanje, kopiranje, brisanje, itd.), spajanje, zaključavanje datoteka i još mnogo toga.

Alati za upravljanje paketima i ovisnostima

Popis najboljih alata za razvoj JavaScripta može se nastaviti u nedogled. U ovom ste članku vidjeli samo popularne i pouzdane alate koji služe kao osnova za kvalitetne proizvode.

I učiteljica netologije, napisala je niz članaka za blog o EcmaScript6. U prvom dijelu ćemo pogledati primjere dinamičke analize koda u EcmaScript koristeći Iroh.js.

Statička i dinamička analiza koda

Alati za analizu koda koristan su alat za otkrivanje i otkrivanje pogrešaka i osobitosti u radu koda. Analiza koda može biti statična i dinamička. U prvom slučaju se izvorni kod analizira i analizira bez njegovog izvršavanja, u drugom se izvršavanje odvija u kontroliranom sandboxing okruženju, koje daje metainformacije o elementima aplikacije tijekom njezina izvršavanja.

zaključke

Iroh.js je moćan i funkcionalan alat za dinamičku analizu koda u EcmaScript. Ovaj se alat može koristiti i za analizu koda, uključujući izgradnju grafa poziva, prikaz stvarnih tipova i vrijednosti u varijablama i objektima, te za modifikaciju koda u hodu, uključujući popravke koda na temelju događaja.

Dinamička analiza je prilično složena metoda, ali za EcmaScript, s obzirom na jednostavno kucanje, prisutnost host objekata i izvornih funkcija koje vam omogućuju promjenu ponašanja koda u hodu, ovo je jedini način za analizu i otklanjanje pogrešaka koda. u vrijeme izvođenja. Iroh.js također može koristiti kod za izradu funkcionalnih testova bez potrebe za modificiranjem za izvoz vrijednosti.

Nije svaki redak mog koda savršen prvi put. Pa, u nekim slučajevima ... Ponekad ... U redu - gotovo nikad. Istina je da trošim znatno više vremena na ispravljanje vlastitih glupih pogrešaka nego što bih želio. Zbog toga koristim statičke analizatore u gotovo svakoj JavaScript datoteci koju napišem.

Statički analizatori gledaju vaš kod i pronalaze pogreške u njemu prije nego što ga pokrenete. Izvode jednostavne provjere, kao što je provjera sintakse (na primjer, tabulatori umjesto razmaka) i globalnije provjere, kao što je provjera da funkcije nisu pretjerano složene. Statički analizatori također traže greške koje se ne mogu pronaći tijekom testiranja, na primjer, == umjesto ===.

U velikim projektima i kada radite u velikim timovima, možete koristiti malu pomoć u pronalaženju takvih "jednostavnih" bugova, koji zapravo nisu tako jednostavni kako se čine.

JSLint, JSHint i Closure Compiler

Postoje tri glavne opcije za statičke analizatore za JavaScript: JSLint, JSHint i Closure Compiler.

JSLint je bio prvi statički analizator za JavaScript. Može se pokrenuti na službenoj stranici ili koristiti jedan od dodataka koji se mogu pokrenuti na lokalnim datotekama. JSLint pronalazi mnoge važne greške, ali je vrlo težak. Evo prvog primjera:

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

JSLint pokazuje dvije pogreške u ovom kodu:

Neočekivano "++".
Premjestite deklaracije "var" na vrh funkcije.

Prvi problem je definicija varijable i u uvjetima petlje. JSLint također ne prihvaća operator ++ na kraju definicije petlje. On želi da kod izgleda ovako:

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

Cijenim kreatore JSLinta, ali za mene je to pretjerano. Ispostavilo se da je to teško i Antonu Kovalevu, pa je stvorio JSHint.

Možete pokrenuti JSHint s web-mjesta, ali u većini slučajeva je bolje instalirati JSHint kao lokalni alat za naredbeni redak koristeći Node.js. Nakon što instalirate JSHint, možete ga pokrenuti na svojim datotekama naredbom poput ove:

jshint test.js

JSHint također uključuje dodatke za popularne uređivače teksta tako da ga možete pokrenuti dok pišete svoj kod.

PREVODILAC ZATVARANJA

Googleov Closure Compiler je potpuno drugačija vrsta programa. Kao što mu ime govori, nije samo testni program, već i kompajler. Napisan je na Javi i temelji se na Mozillinom Rhino parseru. Closure Compiler uključuje jednostavan način za obavljanje osnovne provjere koda i složenije načine za obavljanje dodatne provjere i provođenje specifičnih definicija pogleda.

Closure Compiler izvještava o pogreškama u JavaScript kodu, ali također generira minimizirane verzije JavaScripta. Prevoditelj uklanja razmak, komentare i neiskorištene varijable te pojednostavljuje duge izraze kako bi skripta bila što kompaktnija.

Google je napravio vrlo osnovnu verziju kompajlera dostupnom na mreži, ali najvjerojatnije ćete htjeti preuzeti Closure Compiler i pokrenuti ga lokalno.

Closure Compiler, nakon provjere koda, ispisuje popis datoteka u jednu minimiziranu datoteku. Dakle, možete ga pokrenuti preuzimanjem datoteke compiler.jar.

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

Odabir pravog programa provjere

U svojim projektima kombiniram Closure Compiler i JSHint. Closure Compiler radi minimizaciju i osnovnu provjeru valjanosti, dok JSHint radi složeniju analizu koda. Ova dva programa izvrsno funkcioniraju zajedno, a svaki od njih pokriva područja koja drugi ne mogu. Osim toga, mogu koristiti proširenje JSHint za pisanje prilagođenih validatora. Jedan generički program koji sam napisao testira određene funkcije koje mi ne trebaju, kao što je pozivanje funkcija koje ne bi trebale biti u mom projektu.

Sada kada smo pokrili nekoliko programa za provjeru, razložimo neke od loših kodova. Svaki od ovih šest primjera je kod koji nije vrijedan pisanja i situacije u kojima vas validatori koda mogu spasiti.

Ovaj članak koristi JSHint za većinu primjera, ali Closure Compiler obično generira slična upozorenja.

== ili ===?

JavaScript je jezik koji se dinamički upisuje. Ne morate definirati tipove dok pišete svoj kod, a oni postoje pri pokretanju.

JavaScript nudi dva operatora usporedbe za manipuliranje takvim dinamičkim tipovima: == i ===. Pogledajmo ovo na primjeru.

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

ako (n == s) (
upozorenje ("Varijable su jednake");
}

ako (n === s) (
upozorenje ("Varijable su identične");
}

Operator za usporedbu == Jesu li ostaci jezika C u kojem JavaScript ima svoje korijene. Njegova upotreba je gotovo uvijek pogreška: uspoređivanje vrijednosti odvojeno od tipova rijetko je nešto što programer zapravo želi učiniti. Zapravo, broj "sto dvadeset tri" razlikuje se od niza "jedan dva tri". Te je operatore lako pogrešno napisati, a još lakše ih je pogrešno pročitati. Provjerite ovaj kod s JSHintom i dobit ćete ovo:

test.js: redak 9, stupac 12, očekivao se "===" i umjesto toga vidio "==".

Nedefinirane varijable i kasne definicije

Počnimo s nekim jednostavnim kodom:

test funkcije () (
var myVar = "Zdravo, svijete";
console.log (myvar);
}

Vidite grešku? Svaki put napravim ovu grešku. Pokrenite ovaj kod i dobit ćete pogrešku:

ReferenceError: myvar nije definiran

Učinimo problem malo kompliciranijim:

test funkcije () (
myVar = "Zdravo, svijete";
console.log (myVar);
}

Pokrenite ovaj kod i dobit ćete ovo:

Pozdrav svijete

Ovaj drugi primjer radi, ali ima vrlo neočekivane nuspojave. Pravila za definiranje JavaScript varijabli i opsega su u najboljem slučaju zbunjujuća. U prvom slučaju, JSHint će prijaviti sljedeće:

test.js: redak 3, stupac 17, "myvar" nije definiran.

U drugom slučaju, izvijestit će ovo:

test.js: redak 2, stupac 5, "myVar" nije definiran.
test.js: redak 3, stupac 17, "myVar" nije definiran.

Prvi primjer pomoći će vam da izbjegnete pogrešku tijekom izvođenja. Ne morate testirati svoju aplikaciju - JSHint će pronaći pogrešku umjesto vas. Drugi primjer je gori jer nećete pronaći bug kao rezultat testiranja.

Problem u drugom primjeru je podmuklo suptilan i složen. Varijabla myVar sada je nestala iz svog opsega i prešla u globalni opseg. To znači da će postojati i imati vrijednost Hello, World čak i nakon što se testna funkcija pokrene. To se zove globalno zagađenje.

Varijabla myVar postojat će za svaku drugu funkciju koja se izvodi nakon testne funkcije. Pokrenite sljedeći kod nakon pokretanja testne funkcije:

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

I dalje ćete dobiti Hello, World. Varijabla myVar visit će kroz vaš kod poput predloška, što dovodi do složenih bugova koje ćete tražiti cijelu noć prije objavljivanja, a sve zato što ste zaboravili napisati var.

Ovaj unos je prošao kroz RSS uslugu punog teksta - ako je ovo vaš sadržaj i "čitate ga na tuđoj stranici", pročitajte FAQ na http://ift.tt/jcXqJW.

U velikim projektima i kada radite u velikim timovima, možete koristiti malu pomoć u pronalaženju takvih "jednostavnih" bugova, koji zapravo nisu tako jednostavni kako se čine.

JSLint, JSHint i Closure Compiler

Postoje tri glavne opcije za statičke analizatore za JavaScript: JSLint, JSHint i Closure Compiler.

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

JSLint pokazuje dvije pogreške u ovom kodu:

Neočekivano "++". Premjestite deklaracije "var" na vrh funkcije.

Prvi problem je definicija varijable i u uvjetima petlje. JSLint također ne prihvaća operator ++ na kraju definicije petlje. On želi da kod izgleda ovako:

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

Cijenim kreatore JSLinta, ali za mene je to pretjerano. Ispostavilo se da je to teško i Antonu Kovalevu, pa je stvorio JSHint.

JSHint radi isto kao JSLint, ali je napisan uz Node.js i stoga je fleksibilniji. JSHint uključuje veliki broj opcija, omogućujući vam izvođenje prilagođenih provjera pisanjem vlastitog generatora izvješća.
Možete pokrenuti JSHint s web-mjesta, ali u većini slučajeva je bolje instalirati JSHint kao lokalni alat za naredbeni redak koristeći Node.js. Nakon što instalirate JSHint, možete ga pokrenuti na svojim datotekama naredbom poput ove:

Jshint test.js

JSHint također uključuje dodatke za popularne uređivače teksta tako da ga možete pokrenuti dok pišete svoj kod.

PREVODILAC ZATVARANJA

Google je napravio vrlo osnovnu verziju kompajlera dostupnom na mreži, ali najvjerojatnije ćete htjeti preuzeti Closure Compiler i pokrenuti ga lokalno.

Closure Compiler, nakon provjere koda, ispisuje popis datoteka u jednu minimiziranu datoteku. Dakle, možete ga pokrenuti preuzimanjem datoteke compiler.jar.

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

Odabir pravog programa provjere

Ovaj članak koristi JSHint za većinu primjera, ali Closure Compiler obično generira slična upozorenja.

== ili ===?

JavaScript je jezik koji se dinamički upisuje. Ne morate definirati tipove dok pišete svoj kod, a oni postoje pri pokretanju.

JavaScript nudi dva operatora usporedbe za manipuliranje takvim dinamičkim tipovima: == i ===. Pogledajmo ovo na primjeru.

Var n = 123; var s = "123"; if (n == s) (upozorenje ("Varijable su jednake");) if (n === s) (upozorenje ("Varijable su identične");)

Operator za usporedbu == su ostaci C jezika u kojem JavaScript ima svoje korijene. Njegova upotreba je gotovo uvijek pogreška: uspoređivanje vrijednosti odvojeno od tipova rijetko je nešto što programer zapravo želi učiniti. Zapravo, broj "sto dvadeset tri" razlikuje se od niza "jedan dva tri". Te je operatore lako pogrešno napisati, a još lakše ih je pogrešno pročitati. Provjerite ovaj kod s JSHintom i dobit ćete ovo:

Test.js: redak 9, stupac 12, očekivao se "===" i umjesto toga vidio "==".

Nedefinirane varijable i kasne definicije

Počnimo s nekim jednostavnim kodom:

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

Vidite grešku? Svaki put napravim ovu grešku. Pokrenite ovaj kod i dobit ćete pogrešku:

ReferenceError: myvar nije definiran

Učinimo problem malo kompliciranijim:

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

Pokrenite ovaj kod i dobit ćete ovo:

Pozdrav svijete

Test.js: redak 3, stupac 17, "myvar" nije definiran.

U drugom slučaju, izvijestit će ovo:

Test.js: redak 2, stupac 5, "myVar" nije definiran. test.js: redak 3, stupac 17, "myVar" nije definiran.

Varijabla myVar postojat će za svaku drugu funkciju koja se izvodi nakon testne funkcije. Pokrenite sljedeći kod nakon pokretanja testne funkcije:

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