Все є об'єктами

1.1 Об'єкти та класи

Сьогодні ти дізнаєшся, як влаштована типова програма на JavaScript. І головна новина: кожна програма на JavaScript складається з класів і об'єктів. JavaScript — це об'єктно-орієнтована мова, і все в ній є об'єктами: числа, рядки, функції і навіть класи.

То що ж таке класи?

Почну з аналогії. Уяви, що ти хочеш зробити невеликий корабель. Спочатку треба зробити креслення, потім передати його на завод, де за цим кресленням зберуть корабель. Або десяток. Та взагалі, скільки завгодно кораблів. За одним кресленням будуються десятки ідентичних кораблів, ось що важливо.

У програмуванні на JavaScript все точно так само.

Креслення

Програміст — це той самий проєктувальник. Тільки проєктувальник малює креслення, а JavaScript-програміст пише класи. Потім на основі креслень створюються деталі, а на основі класів — об'єкти.

Спочатку ми пишемо класи (робимо креслення), а потім, під час виконання програми, на основі цих класів JavaScript створює об'єкти. Точно так само, як кораблі створюються на основі креслень.

Креслення одне, але кораблів може бути багато. Кораблі різні, у них різні назви, вони перевозять різні вантажі. Але вони дуже подібні: вони всі — кораблі з ідентичною конструкцією, і можуть виконувати аналогічні завдання.

Або ось ще аналогія...

Мурашник

Мурашник — це хороший приклад взаємодії об'єктів. У найпростішому мурашнику є три класи мурах: королева, воїни і робочі мурахи.

Кількість мурах кожного класу — різна. Королева — одна на весь мурашник, воїнів — десятки, а робочих мурах — сотні. Три класи і сотні об'єктів. Мурахи взаємодіють один з одним, з такими самими мурахами і мурахами інших класів за жорстко заданими правилами.

Це просто ідеальний приклад. У типовій програмі все відбувається точно так само. Є головний об'єкт, що створює об'єкти всіх інших класів. Об'єкти починають взаємодіяти один з одним і «зовнішнім світом» програми. Всередині цих об'єктів жорстко запрограмовано їх поведінку.

Ці два пояснення — це дві сторони однієї медалі. Істина посередині. Перший приклад (про креслення і кораблі) показує зв'язок між класом і об'єктами цього класу. Аналогія дуже сильна. Другий приклад (про мурашник) показує зв'язок між об'єктами, які існують під час роботи програми, і написаними класами.

Спочатку ти маєш написати класи для всіх об'єктів, що існують у програмі, а потім ще й описати їхню взаємодію. Звучить складно, але це простіше, ніж здається.

У JavaScript всі сутності під час роботи програми є об'єктами, а написання програми зводиться до опису різних способів взаємодії об'єктів. Об'єкти просто викликають методи один одного і передають у них потрібні дані.

Документація

А як дізнатися, які дані передавати в методи? Тут все вже придумано до тебе.

Зазвичай у кожного класу є опис, у якому зазначено, для чого він створений. Також зазвичай і у кожного публічного методу є опис: що він робить і які дані потрібно в нього передавати.

Щоб використовувати клас, потрібно в загальних рисах знати, що він робить. А також потрібно точно знати, що робить кожен його метод. І зовсім не обов'язково знати, як він це робить. Така собі чарівна паличка.

Давай подивимося на код — копіювання файла:

    
      const fs = require('fs');

      // Відкрити файли
      const src = fs.createReadStream('source.txt');
      const dst = fs.createWriteStream('destination.txt');

      // Копіювати вміст із source.txt у destination.txt
      src.pipe(dst);

      // Закрити файли після завершення копіювання
      src.on('end', () => {
        src.close();
        dst.close();
      });
    
  

Якщо прочитати цей код построчно, можна здогадатися, що він робить в загальних рисах. Хоча тут потрібен досвід і практика. То з часом цей код тобі здаватиметься знайомим і зрозумілим.

1.2. Проєктування програми

Проєктування програми — це мистецтво. Це і просто, і складно водночас. Просто, бо жорстких законів немає: все, що не заборонено — дозволено. А складно теж через це: способів багато, а знайти найкращий — непросто.

Проєктувати програму — це як писати книгу. З одного боку, ти просто пишеш літери, слова, речення. А з іншого — важливий сюжет, характери героїв, внутрішні конфлікти, стиль оповідання, інтрига тощо.

Головне — розуміти, для кого ти пишеш код. А код ти пишеш для інших програмістів.

Розробка будь-якого продукту — це внесення змін: додали тут, видалили там, переробили отут. І ось такими маленькими ітераціями народжуються великі, грандіозні проєкти.

Головна вимога до коду — він має бути зрозумілий іншим програмістам. Неправильний, але зрозумілий код можна виправити. Правильний і незрозумілий код покращити не вдасться. Його залишиться тільки викинути.

То як же писати хороший і зрозумілий код?

Для цього треба робити три речі:

• Писати хороший та зрозумілий код у межах методів — найпростіше
• Розв'язати, які сутності мають бути у програмі
• Правильно розділити програму на логічні частини

Що ж стоїть за цими поняттями?

Писати хороший код у межах методів

Якщо в тебе хоча б початковий рівень англійської, можливо, ти зауважив, як легко іноді читається код — як речення англійською мовою:

• class Cat extends Pet — клас Кіт розширює клас ДомашняТварина
• while (stream) — поки потік не порожній...
• a < b ? a : b — якщо a менше b, повернути a, інакше повернути b

Це зроблено спеціально. JavaScript — одна з тих мов, де легко писати самодокументований код: код, який зрозумілий без коментарів. У хорошому коді на JavaScript багато методів читаються просто як речення англійською мовою.

Твоя задача під час написання коду — теж робити його максимально простим і лаконічним. Просто думай, наскільки твій код буде легко читати, і ти почнеш рухатися у правильному напрямку.

У JavaScript прийнято писати легко читаний код. Бажано, щоб кожен метод повністю вміщувався на екран (довжина методу — 20-30 рядків). Це норма для всього JavaScript-ком'юніті. Якщо код можна покращити, його потрібно покращити.

Найкращий спосіб навчитися писати хороший код — постійна практика. Пиши багато коду, вивчай чужий код, проси досвідчених колег зробити рев'ю твого коду. І пам'ятай, у той момент, коли ти собі скажеш «і так піде», твій розвиток зупиниться.

Вирішувати, які сутності мають бути в програмі

Тобі потрібно писати код, зрозумілий іншим програмістам. Якщо 9 із 10 програмістів під час проєктування програми створять у ній класи A, B і С, то тобі теж потрібно створити у своїй програмі класи A, B, і C. Ти маєш писати код, зрозумілий іншим.

Чудовий, робочий, швидкий, нестандартний код — це поганий код.

Тобі треба вивчати чужі проєкти: це найкращий, найшвидший і найлегший спосіб перейняти всю мудрість, яка десятиліттями накопичувалась у IT-індустрії.

І, до речі, у тебе вже є під рукою чудовий, популярний, добре документований проєкт — React. Почни з нього.

Розбирай класи і структури класів. Думай, чому одні методи зроблені статичними, а інші — ні. Чому у методів саме такі параметри, а не інші. Чому саме такі методи, чому класи називаються саме так і знаходяться саме в таких пакетах.

Коли ти почнеш розуміти відповіді на всі ці питання, ти зможеш писати код, зрозумілий іншим.

Однак хочу застерегти тебе від розбору коду в методах D3.js. Код багатьох методів був переписаний з метою максимізації швидкості роботи, тому його читабельність — під великим питанням.

Правильно розділяти програму на логічні частини

Будь-яку програму зазвичай ділять на частини чи модулі. Кожна частина відповідає за свій аспект програми.

Ось у комп'ютера є системний блок, монітор, клавіатура, і це все окремі, мало залежні частини. Більше того, їх взаємодія стандартизована: USB, HDMI тощо. При цьому, якщо ти проллєш каву на клавіатуру, ти можеш просто помити її під краном, просушити і користуватись далі.

А от ноутбук — це приклад монолітної архітектури: логічні частини начебто є, але інтегровані значно сильніше. У Macbook Pro, щоб почистити клавіатуру, потрібно розібрати половину ноутбука. А пролита на ноутбук кава — привід замовити новий. Тільки без кави.

1.3 Створення своїх класів

Ти тільки вчишся програмувати, тому тобі потрібно починати з малого — навчитися створювати свої класи.

Ти їх, звісно, вже створював, але тобі треба вчитись розуміти, які класи мають бути у програмі, як вони мають називатись, які у них мають бути методи. І як вони повинні між собою взаємодіяти.

Список сутностей

Якщо ти не знаєш, з чого почати, почни з початку.

На самому початку проєктування програми можна просто виписати на аркуш список сутностей (об'єктів), які мають бути у програмі. А потім запрограмувати їх за таким принципом: кожна сутність — окремий клас.

Приклад

Скажімо, ти хочеш написати гру в шахи. Тобі знадобляться такі сутності: шахівниця і 6 типів фігур. Фігури ходять по-різному, мають різну цінність — логічно, що це окремі класи. І взагалі, на самому початку, чим більше класів — тим краще.

Зустріти початківця-програміста, який замість двох класів написав би десять — велика рідкість. Ось замість десяти написати два, а то й один — це початківці люблять. Тож більше класів, друзі програмісти. І твій код стане зрозумілішим для всіх, крім, можливо, тебе 😛

Шахи

Скажімо, ми вирішили писати класи для шахів: як би ці класи виглядали?

Шахівниця — це просто масив 8 на 8? Краще зроби для неї окремий клас, який всередині зберігає посилання на масив. Тоді у клас «шахівниця» ти зможеш додати багато корисних методів, які, наприклад, перевіряють, що клітинка порожня чи зайнята.

Загалом, на початку завжди можна керуватися принципом: Програма має різні Сутності, а у Сутності є тип. Ось цей тип — це і є клас.