5 täiustatud JavaScripti funktsiooni, mida saate oma koodi kvaliteedi parandamiseks kasutada

JavaScript on de facto keel kaasaegsete veebi- ja mobiilirakenduste loomiseks. See juhib laia valikut projekte, alates lihtsatest veebisaitidest kuni dünaamiliste interaktiivsete rakendusteni.

Kasutajatele meeldivate ja hindavate toodete loomiseks on oluline kirjutada kood, mis pole mitte ainult funktsionaalne, vaid ka tõhus ja hõlpsasti hooldatav. Puhas JavaScripti kood on iga veebi- või mobiilirakenduse edu jaoks ülioluline, olgu see siis hobi kõrvalprojekt või keerukas kommertsrakendus.

Mis on JavaScripti funktsioonide juures nii hea?

Funktsioon on mis tahes rakenduse koodi kirjutamise oluline komponent. See määratleb korduvkasutatava koodi tüki, mida saate konkreetse ülesande täitmiseks kutsuda.

Lisaks korduvkasutatavusele on funktsioonid väga mitmekülgsed. Pikemas perspektiivis lihtsustavad need koodibaasi skaleerimise ja hooldamise protsessi. Kõrval JavaScripti funktsioonide loomine ja kasutamine, saate säästa palju arendusaega.

Siin on mõned kasulikud JavaScripti funktsioonid, mis võivad teie projekti koodi kvaliteeti oluliselt parandada.

1. üks kord

See kõrgema järgu ühekordne funktsioon murrab teise funktsiooni, tagamaks, et saate sellele helistada ainult ühe korra. See peaks vaikselt ignoreerima järgnevaid katseid saadud funktsiooni kutsuda.

Mõelge olukorrale, kus soovite andmebaasist andmete toomiseks teha HTTP API päringuid. Saate kinnitada üks kord toimida tagasihelistajana sündmuste kuulaja funktsioon, nii et see käivitub üks kord ja mitte rohkem.

Sellist funktsiooni saate määratleda järgmiselt.

konst üks kord = (func) => {
lase tulemus;
lase funcCalled = vale;
tagasi(...args) => {
kui (!funcCalled) {
 tulemus = func(...args);
 funcCalled = tõsi;
 }
tagasi tulemus;
 };
};

Funktsioon one võtab funktsiooni argumendina ja tagastab uue funktsiooni, mida saate kutsuda ainult üks kord. Kui kutsute uut funktsiooni esimest korda, käivitab see algse funktsiooni antud argumentidega ja salvestab tulemuse.

Kõik järgnevad uue funktsiooni väljakutsed tagastavad salvestatud tulemuse ilma algset funktsiooni uuesti käivitamata. Vaadake allolevat rakendamist:

// Määratlege funktsioon andmete toomiseks andmebaasist
funktsioonihankigeUserData() {
// ...
}
// hankige funktsiooni getUserData versioon, mida saab käivitada ainult üks kord
konst makeHTTPRequestOnlyOnce = üks kord (getUserData);
konst userDataBtn = dokument.querySelector("#btn");
userDataBtn.addEventListener("klõpsake", makeHTTPRequestOnlyOnce);

Üks kord funktsiooni kasutades saate garanteerida, et kood saadab ainult ühe päringu, isegi kui kasutaja klõpsab nuppu mitu korda. See väldib jõudlusprobleeme ja vigu, mis võivad tuleneda üleliigsetest taotlustest.

2. toru

See torufunktsioon võimaldab teil mitu funktsiooni järjestikku kokku aheldada. Jada funktsioonid võtavad sisendiks eelmise funktsiooni tulemuse ja jada viimane funktsioon arvutab lõpptulemuse.

Siin on näide koodis:

// Määrake toru funktsioon
konst toru = (... toimib) => {
tagasi(arg) => {
 funcs.forEach(funktsiooni(func) {
 arg = func (arg);
 });
tagasi arg;
 }
}
// Määratlege mõned funktsioonid
konst addOne = (a) => + 1;
konst kahekordne = (x) => x * 2;
konst ruut = (x) => x * x;
// Looge funktsioonidega toru
konst myPipe = toru (addOne, double, square);
// Testige toru sisendväärtusega
konsool.log (myPipe(2)); // Väljund: 36

Torufunktsioonid võivad parandada koodi loetavust ja modulaarsust, võimaldades teil kirjutada keerulist töötlemisloogikat lühidalt. See võib muuta teie koodi arusaadavamaks ja hõlpsamini hooldatavaks.

3. kaart

Kaardifunktsioon on sisseehitatud JavaScripti massiivi klassi meetod. See loob uue massiivi, rakendades tagasihelistamisfunktsiooni algse massiivi igale elemendile.

See liigub läbi iga sisendmassiivi elemendi, edastab selle tagasihelistamise funktsiooni sisendiks ja lisab iga tulemuse uude massiivi.

Oluline on märkida, et algset massiivi ei muudeta selle protsessi jooksul mingil viisil.

Siin on näide kasutamise kohta kaart:

konst numbrid = [1, 2, 3, 4, 5];
konst doubledNumbers = numbrid.map(funktsiooni(number) {
tagasi number * 2;
});
konsool.log (doubleDNumbers);
// Väljund: [2, 4, 6, 8, 10]

Selles näites kordab kaardifunktsioon numbrimassiivi iga elemendi üle. See korrutab iga elemendi 2-ga ja tagastab tulemused uues massiivis.

Üldiselt kaotavad kaardifunktsioonid vajaduse kasutades silmuseid JavaScriptis, eriti lõpmatud – lõpmatud tsüklid võivad põhjustada märkimisväärseid arvutuskulusid, mis toob kaasa rakenduse jõudlusprobleeme. See muudab koodibaasi sisutihedamaks ja vähem veaohtlikuks.

4. korjama

See valikufunktsioon võimaldab teil olemasolevast objektist valikuliselt eraldada konkreetsed omadused ja genereerida arvutuse tulemusel nende omadustega uus objekt.

Näiteks kaaluge rakenduse aruannete funktsiooni, mida saate hõlpsalt kohandada, kasutades valiku funktsiooni erinevaid aruandeid, mis põhinevad soovitud kasutajateabel, määrates selgesõnaliselt atribuudid, mida soovite erinevatesse lisada aruanded.

Siin on näide koodis:

konst vali = (objekt, ...võtmed) => {
tagasi keys.reduce((tulemus, võti) => {
kui (object.hasOwnProperty (võti)) {
 tulemus[võti] = objekt[võti];
 }
tagasi tulemus;
 }, {});
};

Valimisfunktsioon võtab argumentidena objekti ja suvalise arvu võtmeid. Klahvid tähistavad omadusi, mida soovite valida. Seejärel tagastab see uue objekti, mis sisaldab ainult algse objekti omadusi koos sobivate võtmetega.

konst kasutaja = {
 nimi: "Martin",
 vanus: 30,
 email: "[email protected]",
};
konsool.log (pick (kasutaja, 'nimi', 'vanus'));
// Väljund: { nimi: 'Martin', vanus: 30 }

Põhimõtteliselt saab valikufunktsioon kapseldada keeruka filtreerimisloogika üheks funktsiooniks, muutes koodi hõlpsamini mõistetavaks ja silumiseks.

Samuti võib see edendada koodi korduvkasutatavust, kuna saate kogu koodibaasis uuesti valida funktsiooni, vähendades koodi dubleerimist.

5. tõmblukk

See zip-funktsioon ühendab massiivid üheks korteeži massiiviks, sobitades iga sisendmassiivi vastavad elemendid.

Siin on zip-funktsiooni rakendamise näide:

funktsioonitõmblukk(...massiivid) {
konst maxPikkus = matemaatika.min(...massiivid.map(massiivi => massiiv.pikkus));
tagasiMassiiv.from(
 { pikkus: maxLength },
 (_, register) => arrays.map(massiivi => massiiv[indeks])
 );
};
konst a = [1, 2, 3];
konst b = ['a', "b", 'c'];
konst c = [tõsi, vale, tõsi];
konsool.log (zip (a, b, c));
// Väljund: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

Zip-funktsioon aktsepteerib sisendmassiivid ja arvutab nende pikima pikkuse. Seejärel loob ja tagastab ühe massiivi, kasutades JavaScripti meetodit Array.from. See uus massiiv sisaldab elemente igast sisendmassiivist.

See on eriti kasulik, kui peate koheselt kombineerima mitmest allikast pärinevaid andmeid, eemaldades vajaduse kirjutada üleliigset koodi, mis muidu risustaks teie koodibaasi.

Koodis olevate JavaScripti funktsioonidega töötamine

JavaScripti funktsioonid parandavad oluliselt teie koodi kvaliteeti, pakkudes lihtsustatud ja kompaktset viisi nii väikeste kui ka suurte koodibaaside programmeerimisloogika käsitlemiseks. Nendest funktsioonidest aru saades ja kasutades saate kirjutada tõhusamaid, loetavamaid ja hooldatavamaid rakendusi.

Hea koodi kirjutamine võimaldab luua tooteid, mis mitte ainult ei lahenda lõppkasutajate konkreetset probleemi, vaid teevad seda ka viisil, mida on lihtne muuta.