Paranna JavaScript-koodisi luettavuutta ja ylläpidettävyyttä noudattamalla näitä nimeämiskäytäntöjä.

On välttämätöntä säilyttää koodisi yksinkertaisuus, luettavuus ja helppohoitoisuus monimutkaisten JavaScript-projektien hallitsemiseksi. Nimeämiskäytäntöjen johdonmukainen noudattaminen on avain tämän tavoitteen saavuttamiseen.

Muuttujat, boolean, funktiot, vakiot, luokat, komponentit, menetelmät, yksityiset funktiot, yleiset muuttujat ja tiedostot ovat niitä JavaScript-elementtejä, jotka edellyttävät johdonmukaisia ​​nimeämiskäytäntöjä. Voit parantaa koodin organisointia ja ymmärtämistä ottamalla käyttöön standardoituja nimeämiskäytäntöjä kaikissa näissä komponenteissa, mikä säästää aikaa ja vaivaa pitkällä aikavälillä.

1. Muuttujien nimeäminen

JavaScriptissä tiedot tallennetaan muuttujiin. On tärkeää valita muuttujille kuvaavat nimet, jotka kuvastavat tarkasti niiden toimintaa. Voit esimerkiksi korvata käyttäjänimi tai kokonaishinta muuttujan nimen sijaan x.

Hyvä tapa nimetä muuttujat on seuraava:

antaa kokonaishinta = 100;
antaa käyttäjänimi = "John";

Parempi koodin luettavuus voidaan saavuttaa käyttämällä kuvaavia muuttujien nimiä

2. Nimeäminen Boolean

Muuttujat, joilla voi olla vain kaksi arvoa, eli jompikumpi totta tai väärä, tunnetaan Booleanina. On ratkaisevan tärkeää valita tarkoituksenmukaiset nimet loogisille muuttujille.

Havainnollistamiseksi, sen sijaan, että valitsisit muuttujan nimen, kuten on totta, sinun pitäisi mieluummin mennä on Voimassa tai hasValue.

Harkitse tätä esimerkkiä:

antaa isValid = totta;
antaa hasValue = väärä;

Tässä esimerkissä kuvaavat loogiset muuttujien nimet tekevät selväksi, mitä ne edustavat.

3. Nimeämisfunktiot

JavaScriptin funktio viittaa itsenäiseen koodiyksikköön, joka on tarkoitettu suorittamaan tietty tehtävä. Se on koodilohko, jota koodin muut osat voivat kutsua tai kutsua ja joka toimii itsenäisenä kokonaisuutena.

Nimeä funktioita tehokkaasti käyttämällä kuvailevia nimiä, jotka ilmaisevat niiden tarkoituksen. Esimerkiksi sen sijaan funktion luominenfoo, valitse havainnollisempia nimiä, kuten valideUserInput tai laske TotalPrice.

Esimerkiksi:

toimintolaske TotalPrice(hinta, määrä) {
palata hinta * määrä;
}
toimintovalideUserInput(syöttö) {
palata syöttö !== määrittelemätön && syöttö !== tyhjä;
}

4. Vakioiden nimeäminen

Vakiot ovat muuttujia, joita ei voi määrittää uudelleen. Vakioiden nimeämisessä on tärkeää käyttää kaikkia isoja kirjaimia ja alaviivoja sanojen erottamiseen.

Esimerkiksi:

konst MAX_PRICE = 1000;
konst MIN_PRICE = 0;

Tässä esimerkissä kaikkia isoja kirjaimia ja alaviivoja on käytetty erottamaan sanat vakionimistä.

5. Luokkien nimeäminen

JavaScriptissä objekteja voidaan luoda luokiksi kutsuttujen piirustusten avulla. Moitteettoman nimeämiskäytännön saavuttamiseksi on äärimmäisen tärkeää suorittaa PascalCase, nimeämiskäytäntö, joka edellyttää jokaisen sanan alkukirjaimia.

Otetaan esimerkiksi:

luokkaaOstoskärry{
rakentaja(merkki, malli) {
Tämä.make = tehdä;
Tämä.model = malli;
 }
}

Tässä esimerkissä luokka Ostoskärry on nimetty PascalCase-kirjaimella, mikä tarkoittaa, että luokan nimen jokaisen sanan ensimmäinen kirjain on kirjoitettu isolla, eikä sanojen välissä ole välilyöntejä tai alaviivoja.

6. Komponenttien nimeäminen

Komponentit ovat olennaisia ​​rakennuspalikoita nykyaikaisessa ohjelmistokehityksessä, erityisesti ohjelmistokehityksessä kehyksiä, kuten React, jotka korostavat uudelleen käytettävää koodia.

Pilkomalla monimutkaisen käyttöliittymän tai sovelluksen pienempiin, hallittaviin osiin voit luoda komponentteja, joita voidaan käyttää uudelleen eri projekteissa, mikä vähentää kehitysaikaa ja lisää koodia tehokkuutta.

Jälleen suosittelemme käyttämään PascalCase-nimeämiskäytäntöä komponenttien nimeämiseen. Tämä tarkoittaa, että komponentin nimen jokaisen sanan ensimmäinen kirjain on isolla.

Tällainen käytäntö auttaa sinua erottamaan komponentit muista koodisegmenteistä, mikä yksinkertaistaa tunnistamista ja käsittelyä.

toimintoPainike(rekvisiitta) {
palata<-painiketta>{props.label}-painiketta>;
}

Tässä esimerkissä komponentin nimeämiseen on käytetty PascalCase-nimeämiskäytäntöä Painike.

7. Nimeämismenetelmät

Menetelmien nimeämisessä on tärkeää käyttää kuvailevia nimiä, jotka viestivät onnistuneesti menetelmän saavutuksista, koska menetelmät ovat toimintoja, jotka liittyvät objektiin.

Esimerkiksi:

luokkaaAuto{
rakentaja(merkki, malli) {
Tämä.make = tehdä;
Tämä.model = malli;
 }
 startEngine() {
// koodi moottorin käynnistämiseksi
}
 stopEngine() {
// koodi moottorin sammuttamiseksi
}
 }
}

Kuvailevat nimet (käynnistä moottori, pysäyttää moottori) käytetään tämän esimerkin menetelmissä varmistaen, että niiden tarkoitus on helposti ymmärrettävissä.

8. Yksityisten funktioiden nimeäminen

Yksityisiksi määritellyt toiminnot on rajoitettu vain siinä objektissa, jossa ne on määritelty. On erittäin tärkeää lisätä alaviiva (_) osoittamaan, että toiminnot ovat yksityisiä.

Tässä on esimerkki:

luokkaaAuto{
rakentaja(merkki, malli) {
Tämä.make = tehdä;
Tämä.model = malli;
 }
 _startEngine() {
// koodi moottorin käynnistämiseksi
 }
 _stopEngine() {
// koodi moottorin sammuttamiseksi
 }
}

Käyttämällä tässä esimerkissä alaviivaa, funktiot ovat yksityisiä.

9. Globaalien muuttujien nimeäminen

Muuttujat, jotka on luokiteltu globaaleiksi, ovat käytettävissä mistä tahansa koodikannan osasta. Tällaisten globaalien muuttujien nimeämisessä on tärkeää käyttää selkeitä ja kuvaavia nimiä, jotka ilmaisevat tehokkaasti niiden käyttötarkoituksen.

Esimerkiksi:

konst MAX_PRICE = 1000;
konst MIN_PRICE = 0;
toimintotarkista hinta(hinta) {
jos (hinta > MAX_PRICE) {
// koodi korkeiden hintojen käsittelemiseksi
 } muujos (hinta < MIN_PRICE) {
// koodi alhaisten hintojen käsittelemiseksi
 }
}

10. Tiedostojen nimeäminen

Tehokas tiedostojen järjestäminen on onnistuneen JavaScript-projektinhallinnan keskeinen osa. Virtaviivaisten ja johdonmukaisten nimeämiskäytäntöjen varmistamiseksi on tärkeää erottaa sanat tiedostonimistä pienillä kirjaimilla ja tavuviivoilla.

Pienet kirjaimet ovat suositeltavia, koska JavaScript on isot ja pienet kirjaimet erotteleva kieli, mikä tarkoittaa, että kieli käsittelee pieniä ja isoja kirjaimia eri tavalla. Pienten kirjainten käyttäminen tiedostonimissa varmistaa johdonmukaisuuden ja välttää sekaannukset viitattaessa tiedostoihin koodissa.

Tavuviivoja käytetään sanojen erottamiseen tiedostonimistä, koska välilyönnit eivät ole sallittuja tiedostojen nimissä. Muita vaihtoehtoja, kuten alaviivoja tai camelCasea, voidaan myös käyttää, mutta yhdysviivat ovat yleensä edullisia niiden luettavuuden vuoksi.

Tavuviivojen käyttäminen tekee tiedostojen nimistä myös helpommin saavutettavissa käyttäjille, joilla on näytönlukuohjelma tai muu apuväline.

minun sovellus/
├── src/
├── komponentit/
├── button.js
├── input-field.js
├── käyttö/
├── string-utils.js
├── date-utils.js
├── app.js
├── index.js

Tässä esimerkissä pieniä kirjaimia ja yhdysmerkkejä käytetään sanojen erottamiseen tiedostonimistä.

Nimeämiskäytäntöjen noudattamisen tärkeys JavaScriptissä

Hyvien nimeämiskäytäntöjen noudattaminen on olennainen osa puhtaan ja ylläpidettävän koodin kirjoittamista JavaScriptiin. Noudattamalla näitä käytäntöjä voit tehdä koodistasi luettavamman ja ylläpidettävämmän, etenkin joissakin JavaScript-kehykset, joissa sinun on käsiteltävä suurikokoista koodia, mikä voi säästää aikaa ja vaivaa pitkällä aikavälillä.