Kuidas oma koodi paremaks muuta kavatsusi paljastavate funktsioonide nimedega

Avastage funktsionaalne JavaScripti nimetati BookAuthority üheks parimaks uueks funktsionaalse programmeerimise raamatuks!

Kood on viis, kuidas suhelda arendajatega, kes seda loevad. Tahteid paljastavate nimedega funktsioone on kergem lugeda. Loeme funktsiooni nime ja saame aru selle eesmärgist. Funktsiooni nimi on meie tööriist kavatsuse väljendamiseks kooditükil.

Vaatame funktsioonide stiilis toimingute loendit anonüümsete funktsioonide abil.

funktsioon getTodos (kasutajad) {
  tagasi todos
    .filter (todo =>! todo.com on valmis && todo.type === "RE")
    .map (todo => ({
      pealkiri: todo.title,
      userName: kasutajad [todo.userId] .name
    }))
    .sort ((todo1, todo2) =>
      todo1.userName.localeCompare (todo2.userName));
}

Nüüd kontrollige sama funktsionaalsust, kasutades funktsioone, millel on kavatsusi paljastavad nimed.

funktsioon isTopPriority (todo) {
  tagasi! todo.com komplekteeritud && todo.type === "RE";
}
funktsioon ascByUserName (todo1, todo2) {
  tagasi todo1.userName.localeCompare (todo2.userName);
}
  
funktsioon getTodos (kasutajad) {
  funktsioonViewModel (todo) {
    tagastama {
      pealkiri: todo.title,
      userName: kasutajad [todo.userId] .name
    }
  }
  naasta todos.filter (isTopPriority)
              .map (toViewModel) .sort (ascByUserName);
}

Funktsioonide nimed annavad koodile selguse. Hea funktsiooni nime korral peate lihtsalt nime lugema - te ei pea selle koodi analüüsima, et aru saada, mida see teeb.

Üldiselt arvatakse, et arendajad kulutavad selle mõistmiseks lugemisele 70% koodi hooldamise ajast.
Kyle Simpson funktsionaalse valguse JavaScriptis

Puhtad funktsioonid ja sulgurid

Kui järele mõelda, võime jagada pesastatud funktsioonid kaheks: sulgemised ja puhtad funktsioonid.

Puhtad funktsioonid ei kasuta välimiste funktsioonide muutujaid. Lisaks annavad nad tagasi väärtuse ja neil pole kõrvaltoimeid.

Sulgemisfunktsioonid kasutavad välimiste funktsioonide muutujaid.

Puhas funktsioon

Parim stsenaarium on puhas funktsioon. Seda saab ümber kujundada ja anda lihtsalt kavatsust paljastav nimi.

isTopPriority () ja ascByUserName () on puhtad funktsioonid.

Sulgemine

Sulgemisfunktsioon on problemaatilisem. See võib viidata erinevate väliste funktsioonide muutujatele. Alustuseks võime selle ümber nimetada teatud funktsiooniks, kuid hoida samas vanemfunktsioonis.

toViewModel () on sulgemine.

Kui soovite sulgemise kohta rohkem lugeda, siis vaadake teemat Miks peaksite sulgemisfunktsioonile veel ühe võimaluse andma.

Nimetatud funktsioonide anonüümsete tagasilükkumiste tagasivõtmine

Tagasihelistamine on funktsioon, mis edastatakse argumendina teisele funktsioonile

Lubage anonüümse tagasihelistamisega

Võtan anonüümse tagasihelistamise lubaduse.

funktsiooni toomine () {
  tagasta dataService.fetch (). siis (newTodos => {
    todos = newTodos;
    sündmusEmitter.fire ();
  });
}

Allpool on kood pärast kavatsuste paljastava nimega funktsiooni uuesti reageerimist.

funktsiooni komplektLocalTodos (newTodos) {
  todos = newTodos;
  sündmusEmitter.fire ();
}
funktsiooni toomine () {
  tagasta dataService.fetch (). siis (setLocalTodos);
}

Sündmus anonüümse tagasihelistamisega

Vaadake nüüd juhtumit, kus sündmuste käitleja on kirjutatud anonüümse funktsioonina.

$ ("# esimene"). klõpsake (() => {
  var list = getItemsFromList ();
  var filtritudLIst = loend.liis (0,1);
  renderList (filtritudLIst);
});

Ja nii näeb kood välja pärast selge nimega funktsiooni deklaratsioonile uuesti reageerimist.

$ ("# esimene"). klõpsake (renderFirstItem);
funktsioon renderFirstItem () {
  var list = getItemsFromList ();
  var filtritudLIst = loend.liis (0,1);
  renderList (filtritudLIst);
}

Funktsiooni deklaratsioon määratleb nimetatud funktsiooni. Koodirida algab funktsioonist.

Ärge kasutage funktsioonide nimesid, mis ei lisa olemasolevale koodile lisaväärtust. Näiteks ärge kasutage selliseid nimesid nagu onClick () või myCustomClickEvent (). Nimi peaks väljendama seda, mida kood teeb, ja mujal võib põhinime kasutada.

Nimetatud funktsioonilause kasutamine

Vaatame nüüd koodi loetavuse parandamist anonüümse IIFE abil.

IIFE tähendab viivitamata funktsiooni väljendust. See on funktsioonilause, mis käivitatakse kohe pärast selle määratlust.

(funktsioon () {
  "kasuta rangelt";
  lase $ form = $ ("# editForm");
  las isikud = [];
$ ("# save", $ form) .on ("click", () => {
      las inimene = {
        fname: $ ("# fname", $ form) .val (),
        nimi: $ ("# nimi", $ vorm) .val ()
      };
      isikud.push (inimene);
  });
}) ();

Seekord annan lihtsalt kavatsuse nime anonüümsele funktsioonile paljastada.

(funktsioon renderPersonEditForm () {
  "kasuta rangelt";
  lase $ form = $ ("# editForm");
  las isikud = [];
$ ("# save", $ form) .on ("click", function savePerson () {
      las inimene = {
        fname: $ ("# fname", $ form) .val (),
        nimi: $ ("# nimi", $ vorm) .val ()
      };
      isikud.push (inimene);
  });
}) ();

renderPersonEditForm () ja savePerson () on nimetatud funktsioonide avaldisteks.

Funktsioonilause määratleb funktsiooni osana suuremast avaldisest. Funktsioonilause võib olla nimetud või anonüümne. Koodirida, sel juhul, ei alga funktsiooniga.

Nimetatud funktsioonide taasfaktoriseerimine muudab silumiskogemuse paremaks.

Silumiskogemuse parandamine

Järgmisena liialdan olukorraga ja kasutan asja väljendamiseks kolme anonüümset IIFE-d.

(funktsioon () {
    / * kood * /
    (funktsioon () {
        / * kood * /
        (funktsioon () {
            / * kood * /
        }) ();
    }) ();
}) ();

Altpoolt saame vaadata kõnede pinu. Kõik, mida me näeme, on anonüümsed funktsioonid.

Anonüümsed funktsioonilaused kõnes

Anonüümsed funktsioonid kuvatakse CallStackis kui (anonüümsed)

Nüüd vaadake nimega funktsioonilausetega kirjutatud koodi.

(funktsioon createTodoModule () {
    / * kood * /
    (funktsioon getAllTodos () {
        / * kood * /
        (funktsioon renderTodo () {
            / * kood * /
        }) ();
    }) ();
}) ();

Seekord on kõnede pinu lihtsamini mõistetav.

Nimi Funktsioon Väljendid kõnepakkumises

Noolefunktsiooni kasutamine

Arvan, et nime andmine võib vähese loogikaga juhtudel ka loetavust parandada. Võtame näiteks summa arvutamise massiivi kohta.

// kasutades anonüümset funktsiooni
laske kokku = arvud.vähenda ((a, b) => a + b, 0);
// kasutades funktsiooni deklaratsiooni
funktsiooni summa (a, b) {tagasta a + b; }
laske kokku = arvud.vähenda (summa, 0);

Nagu näete, pöördusin anonüümse noolefunktsiooni ümber funktsiooni deklaratsiooniga, kuna mul on seda kergem lugeda.

Kui eelistate kasutada noolefunktsiooni, saate funktsiooni nime anda muutuja abil.

laske summa = (a, b) => a + b;
laske kokku = arvud.vähenda (summa, 0);

Mõnikord on kood nii väike, et funktsiooni nimi ei lisa mingit väärtust. Järgmisel juhul jääme anonüümse noolefunktsiooni juurde, kuni koodid muutuvad keerukamaks. Ainult sel hetkel täpsustame selle funktsiooni deklaratsiooniks.

lase completeTodos = todos.filter (todo => todo.completed);

Järeldus

Kasutan anonüümsete asemel nimelisi funktsioone kolmel peamisel põhjusel:

  • loetavus
  • parem silumiskogemus
  • eneseviitamise võimalus, mida korduvad funktsioonid kasutavad

Funktsiooni nimed, mis väljendavad kavatsust, muudavad need palju paremini mõistetavaks ja koodi muutmise lihtsamaks.

Avastage funktsionaalne JavaScripti nimetati BookAuthority üheks parimaks uueks funktsionaalse programmeerimise raamatuks!

Funktsionaalsete programmeerimistehnikate rakenduse kohta Reaktis lisateavet leiate funktsioonist React.

Lisateavet Vue ja Vuexi kohta leiate peatükist Vue.js komponentide lühitutvustus.

Siit saate teada, kuidas rakendada kujundusmustrite põhimõtteid.

Leiate mind ka Twitterist.