5 edistyksellistä JavaScript-toimintoa, joilla voit parantaa koodisi laatua

JavaScript on tosiasiallinen kieli nykyaikaisten verkko- ja mobiilisovellusten rakentamiseen. Se toimii monenlaisissa projekteissa yksinkertaisista verkkosivustoista dynaamisiin, interaktiivisiin sovelluksiin.

Jotta voit luoda tuotteita, joita käyttäjät rakastavat ja arvostavat, on tärkeää, että kirjoitat koodia, joka ei ole vain toimiva, vaan myös tehokas ja helppo ylläpitää. Puhdas JavaScript-koodi on elintärkeä minkä tahansa verkko- tai mobiilisovelluksen menestykselle, olipa kyseessä sitten harrastusprojekti tai monimutkainen kaupallinen sovellus.

Mikä on niin hyvää JavaScript-toiminnoissa?

Funktio on olennainen osa minkä tahansa sovelluksen koodin kirjoittamista. Se määrittää uudelleenkäytettävän koodin osan, jonka voit kutsua suorittamaan tietyn tehtävän.

Uudelleenkäytettävyyden lisäksi toiminnot ovat erittäin monipuolisia. Pitkällä aikavälillä ne yksinkertaistavat koodikannan skaalaus- ja ylläpitoprosessia. Tekijä:

JavaScriptin funktioiden luominen ja käyttäminen, voit säästää paljon kehitysaikaa.

Tässä on joitain hyödyllisiä JavaScript-toimintoja, jotka voivat parantaa merkittävästi projektisi koodin laatua.

1. kerran

Tämä korkeamman asteen kerran funktio kietoo toisen funktion varmistaakseen, että voit kutsua sitä vain kerran. Sen tulisi hiljaa jättää huomiotta myöhemmät yritykset kutsua tuloksena olevaa funktiota.

Harkitse tilannetta, jossa haluat tehdä HTTP API -pyyntöjä tietojen hakemiseksi tietokannasta. Voit liittää kerran toimii takaisinsoittona tapahtumien kuuntelutoiminto, joten se laukeaa kerran eikä enempää.

Voit määrittää tällaisen funktion seuraavasti:

konst kerran = (func) => {
antaa tulos;
antaa funcCalled = väärä;
palata(...args) => {
jos (!funcCalled) {
 tulos = func(...args);
 funcCalled = totta;
 }
palata tulos;
 };
};

Kerran-funktio ottaa funktion argumenttina ja palauttaa uuden funktion, jota voit kutsua vain kerran. Kun kutsut uutta funktiota ensimmäisen kerran, se suorittaa alkuperäisen funktion annetuilla argumenteilla ja tallentaa tuloksen.

Kaikki myöhemmät kutsut uudelle funktiolle palauttavat tallennetun tuloksen suorittamatta alkuperäistä funktiota uudelleen. Katso toteutus alta:

// Määritä funktio tietojen hakemiseksi DB: stä
toimintogetUserData() {
// ...
}
// saada versio getUserData-funktiosta, joka voidaan suorittaa vain kerran
konst makeHTTPRequestOnlyOnce = kerran (getUserData);
konst userDataBtn = asiakirja.querySelector("#btn");
userDataBtn.addEventListener("klikkaus", makeHTTPRequestOnlyOnce);

Kerran-toimintoa käyttämällä voit taata, että koodi lähettää vain yhden pyynnön, vaikka käyttäjä painaisi painiketta useita kertoja. Tämä välttää suorituskykyongelmia ja virheitä, jotka voivat johtua tarpeettomista pyynnöistä.

2. putki

Tämän putkitoiminnon avulla voit ketjuttaa useita toimintoja yhteen järjestyksessä. Sarjan funktiot ottavat syötteenä edellisen funktion tuloksen ja sekvenssin viimeinen funktio laskee lopullisen tuloksen.

Tässä on esimerkki koodissa:

// Määritä putken funktio
konst putki = (...toimii) => {
palata(arg) => {
 funcs.forEach(toiminto(func) {
 arg = func (arg);
 });
palata arg;
 }
}
// Määrittele joitain toimintoja
konst addOne = (a) => + 1;
konst tupla = (x) => x * 2;
konst neliö = (x) => x * x;
// Luo putki funktioiden kanssa
konst myPipe = putki (addOne, double, square);
// Testaa putkea syötearvolla
konsoli.log (myPipe(2)); // Tulos: 36

Putkifunktiot voivat parantaa koodin luettavuutta ja modulaarisuutta mahdollistamalla monimutkaisen käsittelylogiikan kirjoittamisen ytimekkäästi. Tämä voi tehdä koodistasi ymmärrettävämmän ja helpompi ylläpitää.

3. kartta

Karttatoiminto on sisäänrakennetun JavaScript Array -luokan menetelmä. Se luo uuden taulukon soveltamalla takaisinsoittotoimintoa alkuperäisen taulukon jokaiseen elementtiin.

Se kiertää syöttötaulukon jokaisen elementin läpi, välittää sen syötteenä takaisinsoittofunktiolle ja lisää jokaisen tuloksen uuteen taulukkoon.

On tärkeää huomata, että alkuperäistä taulukkoa ei muuteta millään tavalla tämän prosessin aikana.

Tässä on esimerkki käytöstä kartta:

konst numerot = [1, 2, 3, 4, 5];
konst doubledNumbers = numerot.map(toiminto(määrä) {
palata numero * 2;
});
konsoli.log (doubleDNumbers);
// Tulos: [2, 4, 6, 8, 10]

Tässä esimerkissä karttafunktio iteroi numerotaulukon jokaisen elementin yli. Se kertoo jokaisen elementin kahdella ja palauttaa tulokset uudessa taulukossa.

Yleensä karttatoiminnot poistavat tarpeen silmukoiden avulla JavaScriptissä, erityisesti äärettömät – äärettömät silmukat voivat aiheuttaa merkittäviä laskennallisia ylimääräisiä rasitteita, mikä johtaa suorituskykyongelmiin sovelluksessa. Tämä tekee koodikannasta tiiviimmän ja vähemmän virhealttiimman.

4. valita

Tämän poimintatoiminnon avulla voit valikoivasti poimia tiettyjä ominaisuuksia olemassa olevasta objektista ja luoda uuden objektin näillä ominaisuuksilla laskennan tuloksena.

Harkitse esimerkiksi sovelluksen raporttiominaisuutta, jonka avulla voit mukauttaa vaivattomasti poimintatoimintoa erilaisia ​​raportteja haluttujen käyttäjätietojen perusteella määrittämällä nimenomaisesti ominaisuudet, jotka haluat sisällyttää erilaisiin raportteja.

Tässä on esimerkki koodista:

konst valita = (esine, ...avaimet) => {
palata keys.reduce((tulos, avain) => {
jos (object.hasOwnProperty (avain)) {
 tulos[avain] = objekti[avain];
 }
palata tulos;
 }, {});
};

Poimintafunktio ottaa argumenteiksi objektin ja minkä tahansa määrän avaimia. Näppäimet edustavat ominaisuuksia, jotka haluat valita. Sitten se palauttaa uuden objektin, joka sisältää vain alkuperäisen objektin ominaisuudet vastaavilla avaimilla.

konst käyttäjä = {
 nimi: "Martin",
 ikä: 30,
 sähköposti: '[email protected]',
};
konsoli.log (pick (käyttäjä, 'nimi', 'ikä'));
// Tulos: { nimi: 'Martin', ikä: 30 }

Pohjimmiltaan valintafunktio voi kapseloida monimutkaisen suodatuslogiikan yhdeksi funktioksi, mikä tekee koodista helpommin ymmärrettävän ja virheenkorjauksen.

Se voi myös edistää koodin uudelleenkäytettävyyttä, koska voit käyttää valintatoimintoa uudelleen koko koodikannassasi, mikä vähentää koodin päällekkäisyyttä.

5. postinumero

Tämä zip-toiminto yhdistää taulukot yhdeksi monikkomatriisiksi, joka vastaa kunkin syötetaulukon vastaavia elementtejä.

Tässä on esimerkki zip-toiminnon toteutuksesta:

toimintopostinumero(...taulukoita) {
konst maxPituus = Matematiikka.min(...arrays.map(joukko => array.length));
palataArray.from(
 { pituus: Maksimi pituus },
 (_, indeksi) => arrays.map(joukko => array[index])
 );
};
konst a = [1, 2, 3];
konst b = ['a', "b", 'c'];
konst c = [totta, väärä, totta];
konsoli.log (zip (a, b, c));
// Tulos: [[1, 'a', tosi], [2, 'b', false], [3, 'c', tosi]]

Zip-toiminto hyväksyy syötetaulukot ja laskee niiden pisimmän pituuden. Sitten se luo ja palauttaa yhden taulukon käyttämällä Array.from JavaScript -menetelmää. Tämä uusi taulukko sisältää elementtejä jokaisesta syötetaulukosta.

Tämä on erityisen hyödyllistä, jos sinun on yhdistettävä tietoja useista lähteistä välittömästi, jolloin ei tarvitse kirjoittaa ylimääräistä koodia, joka muutoin sotkee ​​koodikantaasi.

JavaScript-toimintojen käyttäminen koodissasi

JavaScript-toiminnot parantavat suuresti koodisi laatua tarjoamalla yksinkertaistetun ja kompaktin tavan käsitellä paljon ohjelmointilogiikkaa sekä pienille että suurille koodikantoille. Ymmärtämällä ja käyttämällä näitä toimintoja voit kirjoittaa tehokkaampia, luettavampia ja ylläpidettävämpiä sovelluksia.

Hyvän koodin kirjoittaminen mahdollistaa tuotteiden rakentamisen, jotka eivät ainoastaan ​​ratkaise tiettyä loppukäyttäjien ongelmaa, vaan tekevät sen helposti muokattavissa olevalla tavalla.