код- структурасы

Код мүмкүн болушунча окула турган жана түшүнүктүү болушу керек.

Бул программалоо искусствосу – татаал маселени кабыл алуу жана аны чечүү үчүн код жазуу, ал туура иштейт жана окууга оңой, адамдарга түшүнүктүү. Бул жакшы коддоо стилин талап кылат. Бул бөлүмдө биз бул стилдин компоненттерин карап чыгабыз.

Синтаксис

Синтаксис эрежелери менен алдамчылык баракча (көбүрөөк маалымат үчүн төмөндө караңыз):

 

Бул жерде баары бир түшүнүктүү эмес, ошондуктан бул эрежелерди кененирээк талдап көрөлү.

Эч бир эреже катуу милдеттүү эмес.

Бул жерде эч кандай темирдей эрежелер жок. Булар диний догмалар эмес, стилдик артыкчылыктар.

Брекеттер

Көпчүлүк JavaScript долбоорлорунда тармал кашаалар жаңы сапта эмес, тиешелүү ачкыч сөз менен бир сапта ачылуучу кашаа менен "Египеттик" деп аталган стилде жазылат. Ачуучу кашаанын алдында боштук болушу керек, мисалы:

эгерде (шарт) {

  // кыл муну

  // ...жана бул

  // ...андан кийин бул

}

Бирок, эгерде бизде if (шарт) doSomething() сыяктуу бир саптык белги болсо, анда биз тармал кашааларды колдонушубуз керекпи?

Бул жерде комментарийлер менен кашааларды коюунун ар кандай варианттары бар, кайсынысы сизге эң окумдуу экенин өзүңүз көрүңүз:

 

😠 Бул кээде башталгыч коддо болот.Тилекке каршы, тармал кашаанын кереги жок:

if (n < 0) {alert(`${n} күчү колдоого алынбайт');}

😠 Эч качан тармал кашаасыз саптарды бөлбөңүз, сызыктарды кошуп жатканда байкабай ката кетиришиңиз мүмкүн:

эгерде (n <0)

  alert(`${n} даражасы колдоого алынбайт`);

😏 кашаасыз бир сапта - эгерде бул сап кыска болсо кабыл алынат:

if (n < 0) alert(`${n} күчү колдоого алынбайт`);

😃 Эң жакшы вариант:

эгерде (n <0) {

  alert(`${n} даражасы колдоого алынбайт`);

}

Өтө кыска код үчүн бир сапка уруксат берилет. Мисалы: if (cond) null кайтарат. Бирок код блогу (акыркы вариант) баары бир жакшыраак окуйт.

Сызыктын узундугу

Эч ким коддун узун горизонталдуу сызыктарын окуганды жактырбайт. Аларды бөлүү жакшы, мисалы:

 

// backticks ` сапты бөлүктөргө бөлүүгө мүмкүндүк берет

let str = `

  Ecma эл аралык жумушчу тобу TC39 -

  JavaScript иштеп чыгуучулардын, теоретиктердин жана JavaScript кыймылдаткычтарынын авторлорунун тобу,

  коомчулук менен бирге JavaScript тилин колдоо жана өнүктүрүү.

`;

Же эгерде:

эгерде (

  id === 123 &&

  moonPhase === 'Waning Gibbous' &&

  zodiacSign === 'Тараза'

) {

  letTheSorceryBegin();

}

Саптын максималдуу узундугу командада макулдашылган. Адатта ал 80 же 120 белгиден турат.

чегинүү

чегинүүлөрдүн эки түрү бар:

Горизонталдык чегинүүлөр: 2 же 4 боштук.

Горизонталдык чегинүү 2 же 4 боштуктун же өтмөк белгисинин (Tab баскычы) жардамы менен аткарылат. Кайсынысын тандоо өз эркиңде. Ак боштук көбүрөөк кездешет.

Боштуктардын өтмөктөрдөн бир артыкчылыгы мейкиндиктер өтмөккө караганда ийкемдүү чегинүү конфигурацияларына мүмкүндүк берет.Мисалы, биз ачуучу кашаага салыштырмалуу аргументтерди тегиздей алабыз:

көрсөтүү (параметрлер,

     тегизделген, // 5 боштук калды

     бир,

     кийин,

     башка

  ) {

  // ...

}

Вертикалдуу чегинүүлөр: кодду "логикалык блокторго" бөлүү үчүн бош саптар.

Жада калса бир функцияны көбүнчө логикалык блокторго бөлүүгө болот. Төмөндөгү мисал өзгөрмөлөрдүн инициализациясын, негизги циклди жана кайтаруу натыйжасын бөлөт:

pow(x, n) {

  натыйжа = 1 болсун;

  // <--

  үчүн (i = 0; i < n; i++) {

    натыйжа *= x;

  }

  // <--

  натыйжаны кайтаруу;

}

Кошумча жаңы сапты киргизиңиз, анда ал кодду окууга ыңгайлуу кылат. Тик чегинүүсүз катарда 9 саптан ашык код болбошу керек.

Үтүрлүү чекит

Үтүрлүү чекиттер ар бир туюнтмадан кийин болушу керек, атүгүл аларды өткөрүп жиберүүгө болот.

Үтүр чекит милдеттүү эмес жана сейрек колдонулган тилдер бар. Бирок, JavaScript'те саптын үзүлүшү чекиттүү үтүр катары чечмеленбеген учурлар бар, бул каталарга алып келиши мүмкүн. Бул тууралуу көбүрөөк код түзүмү бөлүмүндө.

Эгерде сиз тажрыйбалуу JavaScript иштеп чыгуучусу болсоңуз, StandardJS сыяктуу чектүү үтүрсүз коддоо стилин тандай аласыз. Болбосо, тузактарга жол бербөө үчүн чекиттүү үтүрлөрдү колдонсоңуз жакшы болмок. Көпчүлүк иштеп чыгуучулар аларды орнотот.

Уюштуруу деңгээли

Уялоо деңгээли аз болушу керек.

Мисалы, циклде, керексиз уяларды болтурбоо үчүн улантуу директивасын колдонуу пайдалуу болушу мүмкүн.

Мисалы, уяланган if шартын кошуунун ордуна:

үчүн (i = 0; i < 10; i++) {

  эгерде (шарт) {

    ...// <- дагы бир деңгээл уя

  }

}

Функцияны жайгаштыруу

Эгер сиз бир нече жардамчы функцияларды, анан алар колдонгон кодду жазып жатсаңыз, функцияларды уюштуруунун үч жолу бар.

Функцияларды аларды чакырган коддун алдында жарыялаңыз:

 

// функция декларациясы

function createElement() {

  ...

}

function setHandler(elem) {

  ...

}

функция walkAround() {

  ...

}

 

// аларды колдонгон код

let elem = createElement();

setHandler(elem);

walkAround();

Алгач код, андан кийин функциялар

 

// функцияларды колдонуу менен код

let elem = createElement();

setHandler(elem);

walkAround();

 

// --- экинчи функциялар ---

function createElement() {

  ...

}

function setHandler(elem) {

  ...

}

функция walkAround() {

  ...

}

Аралаш стиль: Функция биринчи жолу колдонулган жерде жарыяланат.

Көпчүлүк учурда, экинчи параметр артыкчылыктуу болуп саналат.

Себеби, кодду окуп жатканда, биз алгач анын эмне кыларын билгибиз келет. Эгер код биринчи келсе, анда ал дароо айкын болуп калат. Анан, балким, функцияларды такыр окуунун кереги жок болуп калышы мүмкүн, айрыкча алардын аттары жакшы тандалган болсо.

Код стилинин көрсөтмөлөрү

Стиль көрсөтмөсүндө кодду кантип жазуу керектиги жөнүндө жалпы эрежелер бар, мисалы, кандай тырмакчаларды колдонуу керек, канча боштук чегинүү керек, саптын максималдуу узундугу жана башкалар - жалпысынан алганда, көп майда нерселер.

Команданын бардык мүчөлөрү бирдей стилдик колдонмону колдонгондо, кодду командада ким жазганына карабастан, бирдей көрүнөт.

Албетте, команда ар дайым өзүнүн стилдик колдонмосун жаза алат, бирок бул, адатта, зарыл эмес. Даяр болгондор көп.Кээ бир популярдуу гиддер:

Google JavaScript стили колдонмосу

Airbnb JavaScript стилинин жетектемеси (которулган)

Idiomatic.JS (котормосу бар)

StandardJS

(жана дагы көптөгөн)

Эгерде сиз үйрөнчүк иштеп чыгуучу болсоңуз, анда бул бөлүмдүн башындагы алдамчылык баракчасынан баштаңыз. Ыңгайлуу болгондон кийин, жалпы принциптерди тандап алуу үчүн башка колдонмолорду карап чыгыңыз жана кайсынысы сизге ылайыктуу экенин чечиңиз.

Автоматташтырылган шашкилер (линтерлер)

"Linters" деп аталган автоматташтырылган текшерүүчүлөр кодуңуздун стилин автоматтык түрдө текшерип, жакшыртуу боюнча сунуштарды киргизе турган куралдар.

Алардын эң сонун жагы, стилди текшерүүчү программалоо каталарын да таба алат, мисалы, өзгөрмө же функциянын аталышындагы каталар. Бул өзгөчөлүктөн улам, кандайдыр бир "код стилине" карманууну каалабасаңыз да, линтерди колдонуу сунушталат.

Бул жерде кээ бир белгилүү текшерүү куралдары бар:

JSLint - кодду JSLint стилине каршы текшерет, жогору жагындагы онлайн интерфейсинде сиз кодду киргизсеңиз болот, ал эми ылдый жагында аны аракет кылып көрүү үчүн ар кандай текшерүү орнотуулары бар.

JSHint - JSLint караганда көбүрөөк текшерүү.

ESLint, балким, эң заманбап линтер.

Алардын бардыгы, жалпысынан алганда, иштешет. Автор ESLint колдонот.

Көпчүлүк линтерлер көптөгөн популярдуу редакторлор менен бириктирилген: жөн гана редактордо плагинди иштетип, стилди ыңгайлаштырыңыз.

Мисалы, ESLint үчүн сиз төмөнкүлөрдү кылмаксыз:

Node.JS орнотуу.

ESLintти npm install -g eslint менен орнотуңуз (npm бул JavaScript топтомунун орнотуучусу).

аттуу конфигурация файлын түзүңүз.eslintrc сиздин JavaScript долбооруңуздун түбүндө (бардык файлдарыңызды камтыган папка).

Редакторуңуз үчүн ESLint менен интеграцияланган плагинди орнотуңуз/ишке келтириңиз. Көпчүлүк редакторлордо бар.

Бул жерде .eslintrc файлынын мисалы:

 

{

  "extends": "eslint:сунушталат",

  env: {

    "браузер": чын

    түйүн: чын

    "es6": чын

  },

  эрежелер: {

    "консол жок": 0,

    "indent": ["эскертүү", 2]

  }

}

Бул жерде "узартуу" директивасы конфигурация "eslint: сунушталган" артыкчылык топтомуна негизделгенин билдирет. Андан кийин өзүбүздүн оюбузду жакшыртабыз.

Ошондой эле стилдердин эрежелеринин топтомун интернеттен жүктөп алып, аларды кеңейтүүгө болот. Орнотуу боюнча көбүрөөк маалымат алуу үчүн https://eslint.org/docs/user-guide/getting-started караңыз.

Ошондой эле, кээ бир иштеп чыгуу чөйрөлөрүндө орнотулган линтерлер бар, балким ыңгайлуу, бирок ESLint сыяктуу ыңгайлаштырууда ийкемдүү эмес.

Бардыгы

Бул бөлүмдө (жана стилдик колдонмолорго шилтемелерде) сүрөттөлгөн бардык синтаксис эрежелери сиздин кодуңуздун окулушун жакшыртууга багытталган. Ар ким талаша алат.

 

"Жакшы" кодду жазуу жөнүндө ойлонуп жатканда, өзүбүзгө төмөнкү суроолорду беришибиз керек: "Кодду окууга жана түшүнүүгө эмне жардам берет?" жана "Каталардан качууга эмне жардам берет?". Булар код стилдерин тандоодо жана талкуулоодо эске алуу керек болгон негизги жагдайлар.

Популярдуу стилдик колдонмолорду окуу сизди мыкты тажрыйбалардан кабардар кылып турат.