Czysty kod JavaScript

Spis treści

Wprowadzenie

Zmienne

Używaj znaczących i wymawialnych nazw zmiennych

constyyyymmdstr=moment().format('YYYY/MM/DD');

constcurrentDate=moment().format('YYYY/MM/DD');

Używaj tego samego słownictwa dla tego samego rodzaju danych

getUserInfo();getClientData();getCustomerRecord();

getUser();

Używaj odnajdywalnych nazw

// Czym do diaska jest 86400000?setTimeout(blastOff,86400000);

// Zadeklaruj ją jako nazwaną stałą, używając wielkich liter.constMILLISECONDS_IN_A_DAY=86400000;setTimeout(blastOff,MILLISECONDS_IN_A_DAY);

Używaj zmiennych wyjaśniających

constaddress='One Infinite Loop, Cupertino 95014';constcityZipCodeRegex=/^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;saveCityZipCode(address.match(cityZipCodeRegex)[1],address.match(cityZipCodeRegex)[2]);

constaddress='One Infinite Loop, Cupertino 95014';constcityZipCodeRegex=/^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;const[,city,zipCode]=address.match(cityZipCodeRegex)||[];saveCityZipCode(city,zipCode);

Unikaj map mentalnych

constlocations=['Austin','New York','San Francisco'];locations.forEach((l)=>{doStuff();doSomeOtherStuff();// ...// ...// ...// Czekaj, czym było `l`?dispatch(l);});

constlocations=['Austin','New York','San Francisco'];locations.forEach((location)=>{doStuff();doSomeOtherStuff();// ...// ...// ...dispatch(location);});

Nie dodawaj niepotrzebnego kontekstu

constCar={carMake:'Honda',carModel:'Accord',carColor:'Blue'};functionpaintCar(car){car.carColor='Red';}

constCar={make:'Honda',model:'Accord',color:'Blue'};functionpaintCar(car){car.color='Red';}

Używaj domyślnych wartości argumentów zamiast wykonań warunkowych lub warunków

functioncreateMicrobrewery(name){constbreweryName=name||'Hipster Brew Co.';// ...}

functioncreateMicrobrewery(breweryName='Hipster Brew Co.'){// ...}

Funkcje

Parametry funkcji (najlepiej 2 lub mniej)

functioncreateMenu(title,body,buttonText,cancellable){// ...}

functioncreateMenu({ title, body, buttonText, cancellable}){// ...}createMenu({title:'Foo',body:'Bar',buttonText:'Baz',cancellable:true});

Funkcja powinna wykonywać tylko jedno zadanie

functionemailClients(clients){clients.forEach((client)=>{constclientRecord=database.lookup(client);if(clientRecord.isActive()){email(client);}});}

functionemailActiveClients(clients){clients.filter(isActiveClient).forEach(email);}functionisActiveClient(client){constclientRecord=database.lookup(client);returnclientRecord.isActive();}

Nazwy funkcji powinny mówić co one robią

functionaddToDate(date,month){// ...}constdate=newDate();// Z nazwy funkcji trudno wywnioskować, co jest dodawaneaddToDate(date,1);

functionaddMonthToDate(month,date){// ...}constdate=newDate();addMonthToDate(1,date);

Funkcje powinny być tylko jednym poziomem abstrakcji

functionparseBetterJSAlternative(code){constREGEXES=[// ...];conststatements=code.split(' ');consttokens=[];REGEXES.forEach((REGEX)=>{statements.forEach((statement)=>{// ...});});constast=[];tokens.forEach((token)=>{// lex...});ast.forEach((node)=>{// parse...});}

functiontokenize(code){constREGEXES=[// ...];conststatements=code.split(' ');consttokens=[];REGEXES.forEach((REGEX)=>{statements.forEach((statement)=>{tokens.push(/* ... */);});});returntokens;}functionlexer(tokens){constast=[];tokens.forEach((token)=>{ast.push(/* ... */);});returnast;}functionparseBetterJSAlternative(code){consttokens=tokenize(code);constast=lexer(tokens);ast.forEach((node)=>{// parse...});}

Usuń powielony kod

functionshowDeveloperList(developers){developers.forEach((developer)=>{constexpectedSalary=developer.calculateExpectedSalary();constexperience=developer.getExperience();constgithubLink=developer.getGithubLink();constdata={      expectedSalary,      experience,      githubLink};render(data);});}functionshowManagerList(managers){managers.forEach((manager)=>{constexpectedSalary=manager.calculateExpectedSalary();constexperience=manager.getExperience();constportfolio=manager.getMBAProjects();constdata={      expectedSalary,      experience,      portfolio};render(data);});}

functionshowEmployeeList(employees){employees.forEach((employee)=>{constexpectedSalary=employee.calculateExpectedSalary();constexperience=employee.getExperience();constdata={      expectedSalary,      experience};switch(employee.type){case'manager':data.portfolio=employee.getMBAProjects();break;case'developer':data.githubLink=employee.getGithubLink();break;}render(data);});}

Ustawiaj domyślne obiekty używając Object.assign

constmenuConfig={title:null,body:'Bar',buttonText:null,cancellable:true};functioncreateMenu(config){config.title=config.title||'Foo';config.body=config.body||'Bar';config.buttonText=config.buttonText||'Baz';config.cancellable=config.cancellable!==undefined ?config.cancellable :true;}createMenu(menuConfig);

constmenuConfig={title:'Order',// Użytkownik nie uwzględnił klucza 'body'buttonText:'Send',cancellable:true};functioncreateMenu(config){config=Object.assign({title:'Foo',body:'Bar',buttonText:'Baz',cancellable:true},config);// config ma teraz wartość: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}// ...}createMenu(menuConfig);

Nie używaj flag jako argumentów funkcji

functioncreateFile(name,temp){if(temp){fs.create(`./temp/${name}`);}else{fs.create(name);}}

functioncreateFile(name){fs.create(name);}functioncreateTempFile(name){createFile(`./temp/${name}`);}

Unikaj skutków ubocznych (część 1)

// Globalna zmienna po której następuja funkcja, która się do niej odnosi// Jeśli będziemy mieć kolejną funckję używającą tej nazwy, teraz będzie ona tablicą i może spowodować błąd.letname='Ryan McDermott';functionsplitIntoFirstAndLastName(){name=name.split(' ');}splitIntoFirstAndLastName();console.log(name);// ['Ryan', 'McDermott'];

functionsplitIntoFirstAndLastName(name){returnname.split(' ');}constname='Ryan McDermott';constnewName=splitIntoFirstAndLastName(name);console.log(name);// 'Ryan McDermott';console.log(newName);// ['Ryan', 'McDermott'];

Unikaj skutków ubocznych (część 2)

constaddItemToCart=(cart,item)=>{cart.push({ item,date:Date.now()});};

constaddItemToCart=(cart,item)=>{return[...cart,{ item,date:Date.now()}];};

Nie pisz do funkcji globalnych

Array.prototype.diff=functiondiff(comparisonArray){consthash=newSet(comparisonArray);returnthis.filter(elem=>!hash.has(elem));};

classSuperArrayextendsArray{diff(comparisonArray){consthash=newSet(comparisonArray);returnthis.filter(elem=>!hash.has(elem));}}

Przedkładaj programowanie funkcyjne nad programowanie imperatywne

constprogrammerOutput=[{name:'Uncle Bobby',linesOfCode:500},{name:'Suzie Q',linesOfCode:1500},{name:'Jimmy Gosling',linesOfCode:150},{name:'Gracie Hopper',linesOfCode:1000}];lettotalOutput=0;for(leti=0;i<programmerOutput.length;i++){totalOutput+=programmerOutput[i].linesOfCode;}

constprogrammerOutput=[{name:'Uncle Bobby',linesOfCode:500},{name:'Suzie Q',linesOfCode:1500},{name:'Jimmy Gosling',linesOfCode:150},{name:'Gracie Hopper',linesOfCode:1000}];consttotalOutput=programmerOutput.map(output=>output.linesOfCode).reduce((totalLines,lines)=>totalLines+lines);

Stosuj hermetyzację warunków

if(fsm.state==='fetching'&&isEmpty(listNode)){// ...}

functionshouldShowSpinner(fsm,listNode){returnfsm.state==='fetching'&&isEmpty(listNode);}if(shouldShowSpinner(fsmInstance,listNodeInstance)){// ...}

Unikaj negowania warunków

functionisDOMNodeNotPresent(node){// ...}if(!isDOMNodeNotPresent(node)){// ...}

functionisDOMNodePresent(node){// ...}if(isDOMNodePresent(node)){// ...}

Unikaj warunków

classAirplane{// ...getCruisingAltitude(){switch(this.type){case'777':returnthis.getMaxAltitude()-this.getPassengerCount();case'Air Force One':returnthis.getMaxAltitude();case'Cessna':returnthis.getMaxAltitude()-this.getFuelExpenditure();}}}

classAirplane{// ...}classBoeing777extendsAirplane{// ...getCruisingAltitude(){returnthis.getMaxAltitude()-this.getPassengerCount();}}classAirForceOneextendsAirplane{// ...getCruisingAltitude(){returnthis.getMaxAltitude();}}classCessnaextendsAirplane{// ...getCruisingAltitude(){returnthis.getMaxAltitude()-this.getFuelExpenditure();}}

Unikaj sprawdzania typów (część 1)

functiontravelToTexas(vehicle){if(vehicleinstanceofBicycle){vehicle.pedal(this.currentLocation,newLocation('texas'));}elseif(vehicleinstanceofCar){vehicle.drive(this.currentLocation,newLocation('texas'));}}

functiontravelToTexas(vehicle){vehicle.move(this.currentLocation,newLocation('texas'));}

Unikaj sprawdzania typów (część 2)

functioncombine(val1,val2){if(typeofval1==='number'&&typeofval2==='number'||typeofval1==='string'&&typeofval2==='string'){returnval1+val2;}thrownewError('Must be of type String or Number');}

functioncombine(val1,val2){returnval1+val2;}

Nie optymalizuj nadmiernie

// W starych przeglądarkach każda iteracja z niebuforowanym `list.length` byłaby kosztowna// w związku z ponownym obliczeniem `list.length`. W nowoczesnych przeglądarkach jest to zoptymalizowane.for(leti=0,len=list.length;i<len;i++){// ...}

for(leti=0;i<list.length;i++){// ...}

Usuwaj martwy kod

functionoldRequestModule(url){// ...}functionnewRequestModule(url){// ...}constreq=newRequestModule;inventoryTracker('apples',req,'www.inventory-awesome.io');

functionnewRequestModule(url){// ...}constreq=newRequestModule;inventoryTracker('apples',req,'www.inventory-awesome.io');

Obiekty i struktury danych

Używaj getterów i setterów

functionmakeBankAccount(){// ...return{balance:0,// ...};}constaccount=makeBankAccount();account.balance=100;

functionmakeBankAccount(){// ta jest prywatnaletbalance=0;// "getter" udostępniony publicznie przez zwrócenie obiektu poniżejfunctiongetBalance(){returnbalance;}// "setter" udostępniony publicznie przez zwrócenie obiektu poniżejfunctionsetBalance(amount){// ... walidacja przed uaktualnieniem zmiennej "balance"balance=amount;}return{// ...    getBalance,    setBalance,};}constaccount=makeBankAccount();account.setBalance(100);

Używaj prywatnych właściwości i metod obiektów

constEmployee=function(name){this.name=name;};Employee.prototype.getName=functiongetName(){returnthis.name;};constemployee=newEmployee('John Doe');console.log(`Employee name:${employee.getName()}`);// Employee name: John Doedeleteemployee.name;console.log(`Employee name:${employee.getName()}`);// Employee name: undefined

functionmakeEmployee(name){return{getName(){returnname;},};}constemployee=makeEmployee('John Doe');console.log(`Employee name:${employee.getName()}`);// Employee name: John Doedeleteemployee.name;console.log(`Employee name:${employee.getName()}`);// Employee name: John Doe

Klasy

Przedkładaj klasy wprowadzone w ES2015/ES6 ponad proste funkcje jak w ES5

constAnimal=function(age){if(!(thisinstanceofAnimal)){thrownewError('Instantiate Animal with `new`');}this.age=age;};Animal.prototype.move=functionmove(){};constMammal=function(age,furColor){if(!(thisinstanceofMammal)){thrownewError('Instantiate Mammal with `new`');}Animal.call(this,age);this.furColor=furColor;};Mammal.prototype=Object.create(Animal.prototype);Mammal.prototype.constructor=Mammal;Mammal.prototype.liveBirth=functionliveBirth(){};constHuman=function(age,furColor,languageSpoken){if(!(thisinstanceofHuman)){thrownewError('Instantiate Human with `new`');}Mammal.call(this,age,furColor);this.languageSpoken=languageSpoken;};Human.prototype=Object.create(Mammal.prototype);Human.prototype.constructor=Human;Human.prototype.speak=functionspeak(){};

classAnimal{constructor(age){this.age=age;}move(){/* ... */}}classMammalextendsAnimal{constructor(age,furColor){super(age);this.furColor=furColor;}liveBirth(){/* ... */}}classHumanextendsMammal{constructor(age,furColor,languageSpoken){super(age,furColor);this.languageSpoken=languageSpoken;}speak(){/* ... */}}

Wykorzystuj łańcuchowanie metod

classCar{constructor(make,model,color){this.make=make;this.model=model;this.color=color;}setMake(make){this.make=make;}setModel(model){this.model=model;}setColor(color){this.color=color;}save(){console.log(this.make,this.model,this.color);}}constcar=newCar('Ford','F-150','red');car.setColor('pink');car.save();

classCar{constructor(make,model,color){this.make=make;this.model=model;this.color=color;}setMake(make){this.make=make;// ZAUWAŻ: Zwracamy this dla łańcuchowaniareturnthis;}setModel(model){this.model=model;// ZAUWAŻ: Zwracamy this dla łańcuchowaniareturnthis;}setColor(color){this.color=color;// ZAUWAŻ: Zwracamy this dla łańcuchowaniareturnthis;}save(){console.log(this.make,this.model,this.color);// ZAUWAŻ: Zwracamy this dla łańcuchowaniareturnthis;}}constcar=newCar('Ford','F-150','red').setColor('pink').save();

Przedkładaj kompozycję ponad dziedziczenie

classEmployee{constructor(name,email){this.name=name;this.email=email;}// ...}// Źle, gdyż Pracownicy "posiadają" dane podatkowe. DanePodatkowePracownika nie są typem PracownikaclassEmployeeTaxDataextendsEmployee{constructor(ssn,salary){super();this.ssn=ssn;this.salary=salary;}// ...}

classEmployeeTaxData{constructor(ssn,salary){this.ssn=ssn;this.salary=salary;}// ...}classEmployee{constructor(name,email){this.name=name;this.email=email;}setTaxData(ssn,salary){this.taxData=newEmployeeTaxData(ssn,salary);}// ...}

SOLID

Zasada jednej odpowiedzialności (SRP)

classUserSettings{constructor(user){this.user=user;}changeSettings(settings){if(this.verifyCredentials()){// ...}}verifyCredentials(){// ...}}

classUserAuth{constructor(user){this.user=user;}verifyCredentials(){// ...}}classUserSettings{constructor(user){this.user=user;this.auth=newUserAuth(user);}changeSettings(settings){if(this.auth.verifyCredentials()){// ...}}}

Zasada otwarte-zamknięte (OCP)

classAjaxAdapterextendsAdapter{constructor(){super();this.name='ajaxAdapter';}}classNodeAdapterextendsAdapter{constructor(){super();this.name='nodeAdapter';}}classHttpRequester{constructor(adapter){this.adapter=adapter;}fetch(url){if(this.adapter.name==='ajaxAdapter'){returnmakeAjaxCall(url).then((response)=>{// przekształć odpowiedź i zwróć});}elseif(this.adapter.name==='httpNodeAdapter'){returnmakeHttpCall(url).then((response)=>{// przekształć odpowiedź i zwróć});}}}functionmakeAjaxCall(url){// żądanie i zwrócenie obietnicy}functionmakeHttpCall(url){// żądanie i zwrócenie obietnicy}

classAjaxAdapterextendsAdapter{constructor(){super();this.name='ajaxAdapter';}request(url){// żądanie i zwrócenie obietnicy}}classNodeAdapterextendsAdapter{constructor(){super();this.name='nodeAdapter';}request(url){// żądanie i zwrócenie obietnicy}}classHttpRequester{constructor(adapter){this.adapter=adapter;}fetch(url){returnthis.adapter.request(url).then((response)=>{// przekształć odpowiedź i zwróć});}}

Zasada podstawienia Liskov (LSP)

classRectangle{constructor(){this.width=0;this.height=0;}setColor(color){// ...}render(area){// ...}setWidth(width){this.width=width;}setHeight(height){this.height=height;}getArea(){returnthis.width*this.height;}}classSquareextendsRectangle{setWidth(width){this.width=width;this.height=width;}setHeight(height){this.width=height;this.height=height;}}functionrenderLargeRectangles(rectangles){rectangles.forEach((rectangle)=>{rectangle.setWidth(4);rectangle.setHeight(5);constarea=rectangle.getArea();// ŹLE: Zwraca 25 dla Kwadratu. Powinno być 20rectangle.render(area);});}constrectangles=[newRectangle(),newRectangle(),newSquare()];renderLargeRectangles(rectangles);

classShape{setColor(color){// ...}render(area){// ...}}classRectangleextendsShape{constructor(width,height){super();this.width=width;this.height=height;}getArea(){returnthis.width*this.height;}}classSquareextendsShape{constructor(length){super();this.length=length;}getArea(){returnthis.length*this.length;}}functionrenderLargeShapes(shapes){shapes.forEach((shape)=>{constarea=shape.getArea();shape.render(area);});}constshapes=[newRectangle(4,5),newRectangle(4,5),newSquare(5)];renderLargeShapes(shapes);

Zasada segregacji interfejsów (ISP)

classDOMTraverser{constructor(settings){this.settings=settings;this.setup();}setup(){this.rootNode=this.settings.rootNode;this.animationModule.setup();}traverse(){// ...}}const$=newDOMTraverser({rootNode:document.getElementsByTagName('body'),animationModule(){}// W większości przypadków nie będziemy musieli animować podczas trawersowania.// ...});

classDOMTraverser{constructor(settings){this.settings=settings;this.options=settings.options;this.setup();}setup(){this.rootNode=this.settings.rootNode;this.setupOptions();}setupOptions(){if(this.options.animationModule){// ...}}traverse(){// ...}}const$=newDOMTraverser({rootNode:document.getElementsByTagName('body'),options:{animationModule(){}}});

Zasada odwrócenia zależności (DIP)

classInventoryRequester{constructor(){this.REQ_METHODS=['HTTP'];}requestItem(item){// ...}}classInventoryTracker{constructor(items){this.items=items;// ŹLE: Utworzyliśmy zależność od specyficznej implementacji żądania.// Powinniśmy po prostu uczynić requestItems zależnym od metody: `request`this.requester=newInventoryRequester();}requestItems(){this.items.forEach((item)=>{this.requester.requestItem(item);});}}constinventoryTracker=newInventoryTracker(['apples','bananas']);inventoryTracker.requestItems();

classInventoryTracker{constructor(items,requester){this.items=items;this.requester=requester;}requestItems(){this.items.forEach((item)=>{this.requester.requestItem(item);});}}classInventoryRequesterV1{constructor(){this.REQ_METHODS=['HTTP'];}requestItem(item){// ...}}classInventoryRequesterV2{constructor(){this.REQ_METHODS=['WS'];}requestItem(item){// ...}}// Przez skonstruowanie naszych zależności na zewnątrz i wstrzyknięcie ich, możemy łatwo// zastąpić nasz moduł żądania nowym, fantazyjnym, używającym WebSockets.constinventoryTracker=newInventoryTracker(['apples','bananas'],newInventoryRequesterV2());inventoryTracker.requestItems();

Testowanie

Pojedynczy pomysł na test

importassertfrom'assert';describe('MakeMomentJSGreatAgain',()=>{it('handles date boundaries',()=>{letdate;date=newMakeMomentJSGreatAgain('1/1/2015');date.addDays(30);assert.equal('1/31/2015',date);date=newMakeMomentJSGreatAgain('2/1/2016');date.addDays(28);assert.equal('02/29/2016',date);date=newMakeMomentJSGreatAgain('2/1/2015');date.addDays(28);assert.equal('03/01/2015',date);});});

importassertfrom'assert';describe('MakeMomentJSGreatAgain',()=>{it('handles 30-day months',()=>{constdate=newMakeMomentJSGreatAgain('1/1/2015');date.addDays(30);assert.equal('1/31/2015',date);});it('handles leap year',()=>{constdate=newMakeMomentJSGreatAgain('2/1/2016');date.addDays(28);assert.equal('02/29/2016',date);});it('handles non-leap year',()=>{constdate=newMakeMomentJSGreatAgain('2/1/2015');date.addDays(28);assert.equal('03/01/2015',date);});});

Współbieżność

Używaj Obietnic, a nie wywołań zwrotnych

import{get}from'request';import{writeFile}from'fs';get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin',(requestErr,response)=>{if(requestErr){console.error(requestErr);}else{writeFile('article.html',response.body,(writeErr)=>{if(writeErr){console.error(writeErr);}else{console.log('File written');}});}});

import{get}from'request';import{writeFile}from'fs';get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin').then((response)=>{returnwriteFile('article.html',response);}).then(()=>{console.log('File written');}).catch((err)=>{console.error(err);});

Async/Await są jeszcze bardziej czyste niż Obietnice

import{get}from'request-promise';import{writeFile}from'fs-promise';get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin').then((response)=>{returnwriteFile('article.html',response);}).then(()=>{console.log('File written');}).catch((err)=>{console.error(err);});

import{get}from'request-promise';import{writeFile}from'fs-promise';asyncfunctiongetCleanCodeArticle(){try{constresponse=awaitget('https://en.wikipedia.org/wiki/Robert_Cecil_Martin');awaitwriteFile('article.html',response);console.log('File written');}catch(err){console.error(err);}}

Obsługa błędów

Nie ignoruj przechwyconych błędów

try{functionThatMightThrow();}catch(error){console.log(error);}

try{functionThatMightThrow();}catch(error){// Jedna z opcji (głośniejsza niż console.log):console.error(error);// Inna opcja:notifyUserOfError(error);// Inna opcja:reportErrorToService(error);// ALBO zastosuj wszystkie trzy!}

Nie ignoruj odrzuconych obietnic

getdata().then((data)=>{functionThatMightThrow(data);}).catch((error)=>{console.log(error);});

getdata().then((data)=>{functionThatMightThrow(data);}).catch((error)=>{// Jedna z opcji (głośniejsza niż console.log):console.error(error);// Inna opcja:notifyUserOfError(error);// Inna opcja:reportErrorToService(error);// ALBO zastosuj wszystkie trzy!});

Formatowanie

Używaj wielkich liter konsekwentnie

constDAYS_IN_WEEK=7;constdaysInMonth=30;constsongs=['Back In Black','Stairway to Heaven','Hey Jude'];constArtists=['ACDC','Led Zeppelin','The Beatles'];functioneraseDatabase(){}functionrestore_database(){}classanimal{}classAlpaca{}

constDAYS_IN_WEEK=7;constDAYS_IN_MONTH=30;constSONGS=['Back In Black','Stairway to Heaven','Hey Jude'];constARTISTS=['ACDC','Led Zeppelin','The Beatles'];functioneraseDatabase(){}functionrestoreDatabase(){}classAnimal{}classAlpaca{}

Wywołanie funkcji i wywołana funkcja powinny być blisko siebie

classPerformanceReview{constructor(employee){this.employee=employee;}lookupPeers(){returndb.lookup(this.employee,'peers');}lookupManager(){returndb.lookup(this.employee,'manager');}getPeerReviews(){constpeers=this.lookupPeers();// ...}perfReview(){this.getPeerReviews();this.getManagerReview();this.getSelfReview();}getManagerReview(){constmanager=this.lookupManager();}getSelfReview(){// ...}}constreview=newPerformanceReview(employee);review.perfReview();

classPerformanceReview{constructor(employee){this.employee=employee;}perfReview(){this.getPeerReviews();this.getManagerReview();this.getSelfReview();}getPeerReviews(){constpeers=this.lookupPeers();// ...}lookupPeers(){returndb.lookup(this.employee,'peers');}getManagerReview(){constmanager=this.lookupManager();}lookupManager(){returndb.lookup(this.employee,'manager');}getSelfReview(){// ...}}constreview=newPerformanceReview(employee);review.perfReview();

Komentarze

Komentuj tylko rzeczy mające złożoną logikę biznesową.

functionhashIt(data){// Hashlethash=0;// Długość łańcucha znakówconstlength=data.length;// Pętla po literach w zmiennej datafor(leti=0;i<length;i++){// Pobierz kod litery.constchar=data.charCodeAt(i);// Utwórz hashhash=((hash<<5)-hash)+char;// Przekonwertuj na liczbę 32-bitowąhash&=hash;}}

functionhashIt(data){lethash=0;constlength=data.length;for(leti=0;i<length;i++){constchar=data.charCodeAt(i);hash=((hash<<5)-hash)+char;// Przekonwertuj na liczbę 32-bitowąhash&=hash;}}

Nie pozostawiaj zakomentowanego kodu

doStuff();// doOtherStuff();// doSomeMoreStuff();// doSoMuchStuff();

doStuff();

Nie twórz komentarzy-dziennika.

/** * 2016-12-20: Usunąłem monady, nie rozumiałem ich (RM) * 2016-10-01: Ulepszyłem użycie specjalnych monad (JP) * 2016-02-03: Usunąłem sprawdzanie typów (LI) * 2015-03-14: Dodałem funkcję combine ze sprawdzaniem typów (JR) */functioncombine(a,b){returna+b;}

functioncombine(a,b){returna+b;}

Unikaj markerów pozycyjnych

////////////////////////////////////////////////////////////////////////////////// Scope Model Instantiation////////////////////////////////////////////////////////////////////////////////$scope.model={menu:'foo',nav:'bar'};////////////////////////////////////////////////////////////////////////////////// Action setup////////////////////////////////////////////////////////////////////////////////constactions=function(){// ...};

$scope.model={menu:'foo',nav:'bar'};constactions=function(){// ...};

Tłumaczenie