{"draftJsState":{"blocks":[{"data":{"image":{"id":"69dac6c0685b8641861dba87"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"картинка взята с ya.ru","type":"atomic:image","key":"39p2k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Охотники за багами: Искусство отладки JavaScript в браузере (или как перестать ставить console.log)","type":"header-two","key":"2encp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы написали код. Он не работает. Вы добавляете console.log('тут'). Потом ещё один. Потом console.log('сюда доходит?'). Через час вы окружены лесоповалом из сообщений в консоли, а баг всё ещё здесь.","type":"unstyled","key":"cdff1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я знаю эту боль. Мы все через это проходили.","type":"unstyled","key":"fi0ap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но есть путь джедая. Инструменты отладки в браузере - это не магия для избранных. Это мощный арсенал, который превращает поиск ошибок из гадания на кофейной гуще в детективное расследование с лупой, отпечатками пальцев и замедленной съёмкой.","type":"unstyled","key":"19o1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Консоль - Ваш первый друг (и главный враг)","type":"header-two","key":"eqqcq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1.1 Консольное братство","type":"header-three","key":"2tb2r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы знаете console.log. Но есть целая семья:","type":"unstyled","key":"4k66o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"17h70"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"ITALIC"},{"length":14,"offset":131,"style":"ITALIC"},{"length":38,"offset":241,"style":"ITALIC"},{"length":41,"offset":430,"style":"ITALIC"},{"length":16,"offset":546,"style":"ITALIC"},{"length":15,"offset":634,"style":"ITALIC"},{"length":10,"offset":651,"style":"ITALIC"},{"length":10,"offset":685,"style":"ITALIC"},{"length":10,"offset":719,"style":"ITALIC"},{"length":20,"offset":731,"style":"ITALIC"}],"text":"// Базовые\nconsole.log(\"Обычное сообщение\");\nconsole.info(\"Информация\");\nconsole.warn(\"Предупреждение\");\nconsole.error(\"Ошибка\");\n\n// Группировка\nconsole.group(\"Пользователи\");\nconsole.log(\"Анна\");\nconsole.log(\"Борис\");\nconsole.groupEnd();\n\n// Таблицы (божественно для массивов!)\nconst users = [\n { id: 1, name: \"Анна\", age: 25 },\n { id: 2, name: \"Борис\", age: 30 },\n { id: 3, name: \"Вика\", age: 28 }\n];\nconsole.table(users);\n\n// Стилизация (да, консоль можно красить)\nconsole.log(\"%c Красный жирный текст\", \"color: red; font-weight: bold\");\n\n// Замер времени\nconsole.time(\"api\");\nawait fetch(\"/api/data\");\nconsole.timeEnd(\"api\"); // \"api: 234ms\"\n\n// Счетчик\nconsole.count(\"клик\"); // клик: 1\nconsole.count(\"клик\"); // клик: 2\n\n// Трассировка стека\nfunction one() { two(); }\nfunction two() { three(); }\nfunction three() { console.trace(\"Путь вызова\"); }\none();","type":"unstyled","key":"34at9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1.2 console.log против console.dir","type":"header-three","key":"al0ri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"br67o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":74,"style":"ITALIC"},{"length":46,"offset":120,"style":"ITALIC"}],"text":"const element = document.querySelector(\"button\");\nconsole.log(element); // HTML-представление\nconsole.dir(element); // Объектное представление со всеми свойствами","type":"unstyled","key":"5duc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1.3 Ловушка с объектами в console.log","type":"header-three","key":"1kpkd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"11cjk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":50,"style":"ITALIC"},{"length":26,"offset":110,"style":"ITALIC"},{"length":51,"offset":138,"style":"ITALIC"},{"length":74,"offset":190,"style":"ITALIC"},{"length":11,"offset":266,"style":"ITALIC"}],"text":"const user = { name: \"Анна\" };\nconsole.log(user); // { name: \"Анна\" }\nuser.name = \"Борис\";\nconsole.log(user); // { name: \"Борис\" } (НО!)\n\n// В некоторых браузерах первый лог покажет \"Борис\"\n// Потому что объект отображается при открытии консоли, а не в момент лога\n\n// Решение:\nconsole.log(JSON.parse(JSON.stringify(user)));\nconsole.log({ ...user });","type":"unstyled","key":"1v70"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. Breakpoints - Остановись, мгновение!","type":"header-two","key":"e79nd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"debugger - это магическое слово. Когда движок доходит до него, выполнение останавливается.","type":"unstyled","key":"3dlml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dqu5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":55,"style":"ITALIC"}],"text":"function calculatePrice(price, discount) {\n debugger; // Здесь код заморозится\n const result = price * (1 - discount);\n return result;\n}","type":"unstyled","key":"dudoo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но ставить debugger в коде - прошлый век. Современные DevTools дают больше.","type":"unstyled","key":"7mo94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.1 Виды брейкпоинтов","type":"header-three","key":"bhd54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"1. Строчный (Line-of-code) - клик на номер строки. Самый простой.","type":"unstyled","key":"6inhf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"2. Условный (Conditional) - правый клик → \"Add conditional breakpoint\". Останавливается только когда условие истинно.","type":"unstyled","key":"fqgi2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4vigf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"ITALIC"}],"text":"// Остановится только когда i === 100\nfor (let i = 0; i < 1000; i++) {\n process(i);\n}","type":"unstyled","key":"9rjvi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"3. DOM-брейкпоинт - останавливается при изменении элемента.","type":"unstyled","key":"38san"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8dmhe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":73,"offset":0,"style":"ITALIC"},{"length":56,"offset":74,"style":"ITALIC"}],"text":"// В DevTools: Elements → правый клик → Break on → attribute modification\n// Когда кто-то меняет стиль или атрибут, вы узнаете кто","type":"unstyled","key":"eng40"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"4. XHR/fetch брейкпоинт - при сетевых запросах к определённому URL.","type":"unstyled","key":"9ldd1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"5. Брейкпоинт на событии - при клике, наведении, загрузке страницы.","type":"unstyled","key":"4kla4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"6. Исключения (Exception) - кнопка ⏸ в Sources → Pause on exceptions.","type":"unstyled","key":"14h7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.2 Что делать на паузе?","type":"header-three","key":"522ao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда код заморожен, вы можете:","type":"unstyled","key":"acpgp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Смотреть переменные - наводите мышью на любую переменную","type":"unordered-list-item","key":"8bnfo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Выполнять код в консоли - консоль теперь в контексте этой строки","type":"unordered-list-item","key":"1bkl6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Смотреть стек вызовов (Call Stack) - кто вызвал эту функцию","type":"unordered-list-item","key":"d8ilk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Смотреть область видимости (Scope) - какие переменные доступны","type":"unordered-list-item","key":"7fdmn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Смотреть Watch - следить за конкретными выражениями","type":"unordered-list-item","key":"8n2fe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"38m23"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"}],"text":"// Watch-выражения:\nuser.name\nprice * discount\nusers.filter(u => u.age > 18).length","type":"unstyled","key":"4s5hb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Пошаговая отладка - Контроль времени","type":"header-two","key":"33rcs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда код на паузе, вы управляете временем:","type":"unstyled","key":"538ma"},{"data":{"image":{"id":"69dac7af40be3a25c6385ef2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fn4tg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3hvia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Практический пример:","type":"header-three","key":"1kuc0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9vr3n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":142,"style":"ITALIC"}],"text":"function add(a, b) {\n return a + b;\n}\n\nfunction multiply(a, b) {\n return a * b;\n}\n\nfunction calculate(x, y) {\n const sum = add(x, y); // ⬅️ брейкпоинт здесь\n const product = multiply(x, y);\n return product - sum;\n}","type":"unstyled","key":"1pjfv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Step over - выполнит add (не заходя внутрь) и остановится на следующей строке","type":"unordered-list-item","key":"7o697"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Step into - зайдёт внутрь функции add","type":"unordered-list-item","key":"49po6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Step out - закончит текущую функцию и вернётся в calculate","type":"unordered-list-item","key":"dsjvb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. Blackboxing - Игнорируйте чужой код","type":"header-two","key":"fv8as"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы когда-нибудь нажимали \"Step into\" и оказывались в дебрях jQuery или React? Это бесит.","type":"unstyled","key":"eu5cl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Решение: Blackboxing. В DevTools → Settings → Ignore List. Добавьте скрипты, которые не хотите отлаживать.","type":"unstyled","key":"2acpg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"afogu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"ITALIC"},{"length":2,"offset":59,"style":"ITALIC"},{"length":2,"offset":85,"style":"ITALIC"}],"text":"// Теперь Step into пропустит эти библиотеки\n*/node_modules/*\n*/jquery.js\n*/react-dom/*","type":"unstyled","key":"1n87v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. Conditional Breakpoints - Хирургия багов","type":"header-two","key":"j4et"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Допустим, массив из 1000 элементов, и баг возникает на 777-м. Ставить брейкпоинт в цикле и нажимать \"Resume\" 777 раз? Нет.","type":"unstyled","key":"21vvi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3ae0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":60,"offset":0,"style":"ITALIC"},{"length":35,"offset":127,"style":"ITALIC"}],"text":"// Правый клик на номере строки → Add conditional breakpoint\nfor (let i = 0; i < users.length; i++) {\n processUser(users[i]); // Брейкпоинт с условием: i === 777\n}","type":"unstyled","key":"4i4dk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Условием может быть любое выражение:","type":"unstyled","key":"499lo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"bcev3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":58,"style":"ITALIC"}],"text":"user.age > 100\nuser.name.includes(\"ё\")\nindex % 100 === 0 // каждый 100-й\nJSON.stringify(user).includes(\"секрет\")","type":"unstyled","key":"9b8oe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. Logpoints - console.log без мусора в коде","type":"header-two","key":"c6qc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не хотите захламлять код console.log, но нужно смотреть значение переменной на каждой итерации?","type":"unstyled","key":"bot58"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Logpoint - брейкпоинт, который не останавливает код, а просто выводит сообщение.","type":"unstyled","key":"boghs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"74tc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"ITALIC"},{"length":59,"offset":30,"style":"ITALIC"}],"text":"// Правый клик → Add logpoint\n// Сообщение: `Пользователь ${user.name}, индекс: ${index}`\nfor (let i = 0; i < users.length; i++) {\n const user = users[i];\n processUser(user);\n}","type":"unstyled","key":"5o2rv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Преимущества:","type":"unstyled","key":"foo6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не меняет код","type":"unordered-list-item","key":"dj9kq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно выключить одним кликом","type":"unordered-list-item","key":"8rv8n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно логировать сложные выражения","type":"unordered-list-item","key":"b72u0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Watch и Scope - Рентген ваших переменных","type":"header-two","key":"56o13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Scope (Область видимости)","type":"header-three","key":"a6j7g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Показывает все доступные переменные в текущем контексте:","type":"unstyled","key":"2e62p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Local - локальные переменные функции","type":"unordered-list-item","key":"49bhj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Closure - переменные из замыканий","type":"unordered-list-item","key":"1jnse"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Global - глобальные переменные (window)","type":"unordered-list-item","key":"ejpqt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Watch (Наблюдение)","type":"header-three","key":"5hunl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавьте любое выражение, и оно будет пересчитываться на каждом шаге.","type":"unstyled","key":"9reim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9cecg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"ITALIC"}],"text":"// Примеры полезных watch-выражений:\nusers.filter(u => u.active).length\ntotal / count\nJSON.stringify(currentState)\ndocument.activeElement","type":"unstyled","key":"1sjm0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. Отладка асинхронного кода - Поймать неуловимый баг","type":"header-two","key":"f1o1i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Асинхронный код - это ад для отладки. Вы ставите брейкпоинт, а выполнение идёт своим путём.","type":"unstyled","key":"9h0qa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Async Stack Traces","type":"header-three","key":"16mme"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Современные DevTools умеют показывать полную цепочку асинхронных вызовов:","type":"unstyled","key":"to99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5f3de"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":195,"style":"ITALIC"}],"text":"async function fetchUser() {\n const response = await fetch(\"/api/user\");\n const data = await response.json();\n return data;\n}\n\nasync function displayUser() {\n const user = await fetchUser(); // Брейкпоинт здесь\n console.log(user.name);\n}\n\ndisplayUser();","type":"unstyled","key":"3pb1u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В стеке вызовов вы увидите и displayUser, и fetchUser, несмотря на await.","type":"unstyled","key":"4a7m0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отладка Promise","type":"header-three","key":"9r5jt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1qdjp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Promise.resolve()\n .then(() => console.log(1))\n .then(() => console.log(2))\n .catch(err => console.error(err));","type":"unstyled","key":"6p9mp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ставьте брейкпоинты внутри then или используйте debugger.","type":"unstyled","key":"7d8cm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отладка setTimeout/setInterval","type":"header-three","key":"b61gh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"e2mii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":31,"style":"ITALIC"}],"text":"setTimeout(() => {\n debugger; // Остановится через 1 секунду\n console.log(\"Timeout\");\n}, 1000);","type":"unstyled","key":"fm8s7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Инструменты профилирования - Кто тормозит?","type":"header-two","key":"1qatk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Performance Tab","type":"header-three","key":"cmcj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ваша страница тормозит? Performance панель покажет, где именно.","type":"unstyled","key":"3fi95"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нажмите ● (Record)","type":"ordered-list-item","key":"3almv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выполните действие, которое тормозит","type":"ordered-list-item","key":"526kq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Остановите запись","type":"ordered-list-item","key":"6ust0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Что смотреть:","type":"unstyled","key":"6bvu0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Красные полоски - долгие задачи (Long Tasks), блокирующие UI","type":"unordered-list-item","key":"23fmg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Стрелки вверх-вниз - принудительный reflow/repaint","type":"unordered-list-item","key":"5500a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Цветные блоки - время на JS (жёлтый), рендеринг (фиолетовый), покраска (зелёный)","type":"unordered-list-item","key":"8i0kj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Memory Tab","type":"header-three","key":"d36b0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Утечка памяти? Memory панель поможет:","type":"unstyled","key":"bhb5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Heap snapshot - снимок памяти в моменте","type":"ordered-list-item","key":"etkeh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Allocation instrumentation - запись выделений памяти в реальном времени","type":"ordered-list-item","key":"esjkp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Allocation sampling - семплирование выделений","type":"ordered-list-item","key":"8n55v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Признаки утечки:","type":"unstyled","key":"20fac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После действий память не уменьшается","type":"unordered-list-item","key":"fpnbg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объектов в памяти становится всё больше","type":"unordered-list-item","key":"c5oj8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Detached DOM nodes (узлы, удалённые из DOM, но оставшиеся в памяти)","type":"unordered-list-item","key":"8abq9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Отладка React/Vue/Angular","type":"header-two","key":"6ashs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React DevTools","type":"header-three","key":"3fp1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bash","type":"unstyled","key":"96qg3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"ITALIC"}],"text":"# Установите расширение React DevTools","type":"unstyled","key":"9ahr2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Что можно:","type":"unstyled","key":"biu4v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Смотреть props и state компонента","type":"unordered-list-item","key":"1uf2e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменять значения на лету","type":"unordered-list-item","key":"8ie0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Профилировать рендеры (⚡ Highlight updates)","type":"unordered-list-item","key":"5p397"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Искать компоненты по дереву","type":"unordered-list-item","key":"99vuk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"furok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"ITALIC"},{"length":32,"offset":25,"style":"ITALIC"}],"text":"// В консоли DevTools\n$r // ссылка на выбранный компонент\n$r.props\n$r.state\n$r.forceUpdate()","type":"unstyled","key":"b30kn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue DevTools","type":"header-three","key":"8ab3n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Аналогично, но с поддержкой Vuex, Pinia и событий.","type":"unstyled","key":"idig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Angular DevTools","type":"header-three","key":"9uupa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Профилирование изменений, дерево компонентов.","type":"unstyled","key":"fi6d2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 11. Реальные сценарии отладки","type":"header-two","key":"7rf5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сценарий #1: \"Ничего не происходит при клике\"","type":"header-three","key":"cudnk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"План:","type":"unstyled","key":"27qe3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открыть Sources → Event Listener Breakpoints → Mouse → click","type":"ordered-list-item","key":"6lnn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нажать на элемент","type":"ordered-list-item","key":"25ur0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код остановится на первом обработчике","type":"ordered-list-item","key":"9jns3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пройти Step over/into, пока не найдёте свою функцию","type":"ordered-list-item","key":"7nhf5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверить, что условие срабатывает (if (isActive))","type":"ordered-list-item","key":"17f03"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сценарий #2: \"Значение меняется непонятно кем\"","type":"header-three","key":"fmrvd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"План:","type":"unstyled","key":"ar3l8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Правый клик на строке с переменной → \"Break on value change\" (не везде)","type":"ordered-list-item","key":"9sdib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":40,"style":"ITALIC"}],"text":"Или найти все места изменения:javascript// Добавьте временно в код\nObject.defineProperty(window, 'problemVar', {\n set(value) {\n debugger;\n this._value = value;\n },\n get() { return this._value; }\n});\n","type":"ordered-list-item","key":"5imes"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сценарий #3: \"Бесконечный цикл\"","type":"header-three","key":"6idll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"План:","type":"unstyled","key":"e2ul9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Включить Pause on exceptions","type":"ordered-list-item","key":"a123c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нажать F8 (Resume)","type":"ordered-list-item","key":"107qc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер покажет, где зациклилось (обычно через 5-10 секунд)","type":"ordered-list-item","key":"2rd3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сценарий #4: \"Не загружается скрипт\"","type":"header-three","key":"994hv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"План:","type":"unstyled","key":"baabu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Network Tab → посмотреть статус (404? 500?)","type":"ordered-list-item","key":"joj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Sources → нажать Ctrl+P → искать файл","type":"ordered-list-item","key":"ddp68"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если не находится → скрипт не загрузился","type":"ordered-list-item","key":"2jsdb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 12. Горячие клавиши (шпаргалка)","type":"header-two","key":"nd93"},{"data":{"image":{"id":"69dac80db2e2bc37970145da"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"22f9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"chlf7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 13. Психология отладки (самое важное)","type":"header-two","key":"720tn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Правило 1: Останавливайтесь и думайте","type":"header-three","key":"2qvm7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"80% времени уходит на гадание, 20% - на реальную отладку. Переверните.","type":"unstyled","key":"c9921"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Плохо: \"А если я поменяю тут... ой, а теперь вот тут... хм, не работает... может, сюда добавить console.log?\"","type":"unstyled","key":"1rs0v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Хорошо: \"Эта переменная должна быть массивом, но она null. Где она обнуляется? Посмотрю стек вызовов и проверю все места изменения.\"","type":"unstyled","key":"bukku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Правило 2: Воспроизведите проблему","type":"header-three","key":"fb9ek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если баг не воспроизводится стабильно, вы не можете его отладить.","type":"unstyled","key":"2vvbk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Плохо: \"Иногда кнопка не работает, перезагрузи страницу и попробуй снова\"","type":"unstyled","key":"ckkfc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Хорошо: \"Чтобы воспроизвести: войти под пользователем X, нажать три раза на кнопку, потом быстро кликнуть в правый верхний угол\"","type":"unstyled","key":"bl4re"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Правило 3: Минимальный пример","type":"header-three","key":"2ht66"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте изолированный пример, исключив всё лишнее.","type":"unstyled","key":"f3tac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"c1orc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"ITALIC"},{"length":22,"offset":104,"style":"ITALIC"}],"text":"// Вместо 500 строк кода\nfunction reproduce() {\n const a = 0.1;\n const b = 0.2;\n console.log(a + b); // 0.30000000000000004\n}","type":"unstyled","key":"ai8l1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Правило 4: Прочитайте ошибку","type":"header-three","key":"7t4cc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Да, полностью. В ней есть название файла и номер строки.","type":"unstyled","key":"2prjd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"een0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":0,"style":"ITALIC"},{"length":29,"offset":55,"style":"ITALIC"},{"length":29,"offset":85,"style":"ITALIC"}],"text":"// TypeError: Cannot read property 'name' of undefined\n// at processUser (app.js:42)\n// at renderUsers (app.js:15)","type":"unstyled","key":"3hp1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы знаете: в app.js строка 42, переменная user - undefined.","type":"unstyled","key":"ffeuh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Правило 5: Используйте поиск","type":"header-three","key":"66dop"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В DevTools: Ctrl+Shift+F по всем файлам.","type":"unstyled","key":"5gbs5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ищете, откуда вызывается setUser? Найдите setUser( или setUser =.","type":"unstyled","key":"8qbj5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест отладчика","type":"header-two","key":"e02rg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Перестаньте гадать - используйте брейкпоинты.","type":"ordered-list-item","key":"2a5to"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Перестаньте засорять код - используйте logpoints.","type":"ordered-list-item","key":"5tdv3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Перестаньте жать \"Step into\" 100 раз - используйте conditional breakpoints.","type":"ordered-list-item","key":"5csig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Перестаньте теряться в асинхронности - используйте async stack traces.","type":"ordered-list-item","key":"4t1g4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Перестаньте гадать, где память - используйте Memory Tab.","type":"ordered-list-item","key":"pb1i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Ваш чек-лист перед сдачей кода:","type":"unstyled","key":"7nk14"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все console.log удалены (или оставлены осознанно)","type":"unordered-list-item","key":"159ge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все debugger удалены","type":"unordered-list-item","key":"44ke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы прошлись по основным сценариям с брейкпоинтами","type":"unordered-list-item","key":"di97r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверили вкладку Console (нет ошибок или предупреждений)","type":"unordered-list-item","key":"826ku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверили вкладку Network (все запросы успешны)","type":"unordered-list-item","key":"fgej9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Посмотрели Performance (нет долгих задач)","type":"unordered-list-item","key":"a09m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Последний совет: отладка - это навык. Он не даётся с первой строчки кода. Он приходит с опытом, с разочарованиями, с ночными сессиями, когда баг сдаётся на пятый час. Но когда вы научитесь - вы станете неуязвимы. Любой баг, любая ошибка, любое \"у меня не работает\" станет просто загадкой с решением.","type":"unstyled","key":"6taoj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открывайте DevTools, ставьте брейкпоинты и ловите этих багов. Они не спрячутся.","type":"unstyled","key":"bjstp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"------------------------------------------------------------------------","type":"unstyled","key":"2emvd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"------------------------------------------------------------------------","type":"unstyled","key":"6a35d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эстетика кода: Почему ваш JavaScript должен быть красивым (и как это спасёт вашу карьеру)","type":"header-two","key":"3gka1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код пишется один раз, а читается сотни раз. Вашими коллегами. Вашим начальником. Вами самими через полгода, когда вы забудете, что здесь вообще происходит.","type":"unstyled","key":"akrk7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стиль кода - это не про \"нравится/не нравится\". Это про коммуникацию. Чистый код - это вежливость. Грязный код - это записка на салфетке, которую вы оставляете коллегам в 2 часа ночи.","type":"unstyled","key":"7v81r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте разберёмся, как писать JavaScript, который хочется читать.","type":"unstyled","key":"2dhat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Форматирование - Дышите, код, дышите!","type":"header-two","key":"7uulg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1.1 Отступы (пробелы vs табы)","type":"header-three","key":"5847s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вечный спор. Главное - не смешивать.","type":"unstyled","key":"2n3fs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ct93f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"ITALIC"},{"length":36,"offset":86,"style":"ITALIC"}],"text":"// Плохо (смесь пробелов и табов)\nfunction bad() {\n→→const a = 1;\n· const b = 2;\n}\n\n// Хорошо (только пробелы - 2 или 4)\nfunction good() {\n const a = 1;\n const b = 2;\n}","type":"unstyled","key":"chsh8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Консенсус индустрии: 2 пробела (Airbnb, Google) или 4 (StandardJS). Выберите одно и придерживайтесь.","type":"unstyled","key":"1i4sg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1.2 Точки с запятой","type":"header-three","key":"2ikgr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это религия. JS вставляет их автоматически (ASI), но иногда ошибается.","type":"unstyled","key":"6r5dm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ebucr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"ITALIC"},{"length":37,"offset":78,"style":"ITALIC"},{"length":33,"offset":117,"style":"ITALIC"},{"length":37,"offset":197,"style":"ITALIC"}],"text":"// Без точки с запятой - рискованно\nconst a = 1\nconst b = 2\n(function() {})() // Ошибка! JS думает, что 2(function)\n\n// С точкой с запятой - безопасно\nconst a = 1;\nconst b = 2;\n(function() {})();\n\n// Моя рекомендация: всегда ставьте ;","type":"unstyled","key":"87fom"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1.3 Длина строки","type":"header-three","key":"2jmj2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"80-100 символов. Никто не хочет скроллить горизонтально.","type":"unstyled","key":"c1fp2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"72rrt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"ITALIC"},{"length":19,"offset":171,"style":"ITALIC"}],"text":"// Плохо (140 символов в строке)\nconst result = someVeryLongFunctionName(parameter1, parameter2, parameter3, parameter4, parameter5, parameter6, parameter7, parameter8);\n\n// Хорошо (разбито)\nconst result = someVeryLongFunctionName(\n parameter1,\n parameter2,\n parameter3,\n parameter4,\n parameter5,\n parameter6,\n parameter7,\n parameter8\n);","type":"unstyled","key":"9nhd6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1.4 Пустые строки - воздух для кода","type":"header-three","key":"2jr9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Группируйте логические блоки.","type":"unstyled","key":"7rugs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2pq2q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"},{"length":40,"offset":270,"style":"ITALIC"}],"text":"// Плохо (стена текста)\nfunction processUser(user) {\n if (!user) return null;\n const name = user.name.trim();\n const email = user.email.toLowerCase();\n const isValid = name && email;\n if (!isValid) return null;\n const result = { name, email };\n return result;\n}\n\n// Хорошо (разделено на смысловые блоки)\nfunction processUser(user) {\n if (!user) return null;\n \n const name = user.name.trim();\n const email = user.email.toLowerCase();\n const isValid = name && email;\n \n if (!isValid) return null;\n \n const result = { name, email };\n return result;\n}","type":"unstyled","key":"7dtm0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. Именование - Как назвать корабль","type":"header-two","key":"ebr53"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.1 Переменные - существительные","type":"header-three","key":"1o8n5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"96gt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"ITALIC"},{"length":25,"offset":93,"style":"ITALIC"}],"text":"// Плохо (непонятно, что хранит)\nconst d = 5;\nconst data = fetch();\nconst temp = user.name;\n\n// Хорошо (ясно, что это)\nconst daysLeft = 5;\nconst userProfile = fetch();\nconst userName = user.name;","type":"unstyled","key":"dnv7h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.2 Функции - глаголы","type":"header-three","key":"2k0q1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"123k1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":9,"offset":48,"style":"ITALIC"}],"text":"// Плохо\nfunction user() {}\nfunction data() {}\n\n// Хорошо\nfunction getUser() {}\nfunction fetchData() {}\nfunction validateEmail() {}\nfunction calculateTotal() {}","type":"unstyled","key":"6d5fc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.3 Булевы значения - вопросы","type":"header-three","key":"1bpbo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fst7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":31,"offset":50,"style":"ITALIC"}],"text":"// Плохо\nlet active = true;\nlet loading = false;\n\n// Хорошо (читается как вопрос)\nlet isActive = true;\nlet isLoading = false;\nlet hasPermission = true;\nlet canEdit = false;\nlet shouldUpdate = true;","type":"unstyled","key":"499gp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.4 Константы - ВЕРХНИЙ_РЕГИСТР","type":"header-three","key":"ebuks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4t0kn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":9,"offset":57,"style":"ITALIC"}],"text":"// Плохо\nconst maxCount = 100;\nconst apiKey = \"secret\";\n\n// Хорошо\nconst MAX_COUNT = 100;\nconst API_KEY = \"secret\";\nconst DEFAULT_TIMEOUT = 5000;","type":"unstyled","key":"ehe88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.5 Массивы - множественное число","type":"header-three","key":"9vi96"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"f920n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":9,"offset":78,"style":"ITALIC"}],"text":"// Плохо\nconst user = ['Анна', 'Борис'];\nconst userList = ['Анна', 'Борис'];\n\n// Хорошо\nconst users = ['Анна', 'Борис'];\nconst productNames = ['Книга', 'Ручка'];","type":"unstyled","key":"6irmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.6 Избегайте венгерской нотации","type":"header-three","key":"3sp3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ehob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"ITALIC"},{"length":9,"offset":129,"style":"ITALIC"}],"text":"// Плохо (венгерская нотация - тип в имени)\nconst sName = \"Анна\";\nconst iCount = 10;\nconst bIsActive = true;\nconst aUsers = [];\n\n// Хорошо\nconst name = \"Анна\";\nconst count = 10;\nconst isActive = true;\nconst users = [];","type":"unstyled","key":"38c24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.7 Магические числа - выносите в константы","type":"header-three","key":"73sik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dvor1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":9,"offset":55,"style":"ITALIC"}],"text":"// Плохо\nif (status === 404) {}\nsetTimeout(fn, 5000);\n\n// Хорошо\nconst HTTP_NOT_FOUND = 404;\nconst REFRESH_INTERVAL_MS = 5000;\n\nif (status === HTTP_NOT_FOUND) {}\nsetTimeout(fn, REFRESH_INTERVAL_MS);","type":"unstyled","key":"9kars"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Комментарии - Говорите, когда нужно молчать","type":"header-two","key":"41erq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.1 Хорошие комментарии объясняют ПОЧЕМУ, а не ЧТО","type":"header-three","key":"un2h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dl6rd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"},{"length":21,"offset":20,"style":"ITALIC"},{"length":29,"offset":48,"style":"ITALIC"},{"length":53,"offset":78,"style":"ITALIC"},{"length":14,"offset":138,"style":"ITALIC"},{"length":39,"offset":153,"style":"ITALIC"},{"length":29,"offset":215,"style":"ITALIC"},{"length":58,"offset":245,"style":"ITALIC"}],"text":"// Плохо (очевидно)\n// Увеличиваем i на 1\ni++;\n\n// Хорошо (объясняет причину)\n// Компенсируем сдвиг индекса после удаления элемента\ni--;\n\n// Плохо (шум)\n// Присваиваем значение переменной name\nconst name = \"Анна\";\n\n// Хорошо (важная информация)\n// Используем часовой пояс UTC для избежания проблем с夏令时间\nconst timestamp = new Date(Date.UTC(2024, 0, 1));","type":"unstyled","key":"5b5fl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.2 Комментируйте сложные алгоритмы","type":"header-three","key":"1sh0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"33eku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"ITALIC"},{"length":22,"offset":54,"style":"ITALIC"}],"text":"// Реализация алгоритма быстрого возведения в степень\n// Сложность: O(log n)\nfunction fastPower(base, exponent) {\n if (exponent === 0) return 1;\n if (exponent % 2 === 0) {\n const half = fastPower(base, exponent / 2);\n return half * half;\n }\n return base * fastPower(base, exponent - 1);\n}","type":"unstyled","key":"asmqf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.3 TODO и FIXME - честность перед будущим","type":"header-three","key":"etspk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"e4rhv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"ITALIC"},{"length":45,"offset":35,"style":"ITALIC"},{"length":50,"offset":81,"style":"ITALIC"},{"length":34,"offset":132,"style":"ITALIC"}],"text":"// TODO: добавить обработку ошибок\n// FIXME: не работает для отрицательных чисел\n// HACK: временное решение до рефакторинга бэкенда\n// NOTE: зависит от версии API 2.0","type":"unstyled","key":"28idg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.4 JSDoc - документация для всех","type":"header-three","key":"bjke0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8i9q4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"ITALIC"}],"text":"/**\n * Вычисляет сумму двух чисел\n * @param {number} a - Первое число\n * @param {number} b - Второе число\n * @returns {number} Сумма a и b\n * @example\n * add(2, 3) // 5\n */\nfunction add(a, b) {\n return a + b;\n}","type":"unstyled","key":"8qcg1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. Функции - Стройте кирпичики","type":"header-two","key":"b6du"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.1 Одна функция - одно действие (Single Responsibility)","type":"header-three","key":"3jtr3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2ll2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"ITALIC"},{"length":21,"offset":124,"style":"ITALIC"}],"text":"// Плохо (делает три вещи)\nfunction processUser(user) {\n validateUser(user);\n saveToDatabase(user);\n sendEmail(user);\n}\n\n// Хорошо (разделено)\nfunction processUser(user) {\n if (!validateUser(user)) return;\n saveToDatabase(user);\n notifyUser(user);\n}","type":"unstyled","key":"fkdmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.2 Короткие функции (10-15 строк - идеал)","type":"header-three","key":"dj0vc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"29hda"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"ITALIC"},{"length":16,"offset":49,"style":"ITALIC"},{"length":32,"offset":69,"style":"ITALIC"}],"text":"// Плохо (100 строк)\nfunction doEverything() {\n // ... 100 строк\n}\n\n// Хорошо (разбито на маленькие)\nfunction stepOne() {}\nfunction stepTwo() {}\nfunction stepThree() {}\nfunction orchestrate() {\n stepOne();\n stepTwo();\n stepThree();\n}","type":"unstyled","key":"e91b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.3 Максимум 3 параметра","type":"header-three","key":"4r8as"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"438jo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"ITALIC"},{"length":29,"offset":101,"style":"ITALIC"},{"length":16,"offset":208,"style":"ITALIC"},{"length":6,"offset":296,"style":"ITALIC"}],"text":"// Плохо (много параметров)\nfunction createUser(name, age, email, phone, address, city, country) {}\n\n// Хорошо (объект параметров)\nfunction createUser({ name, age, email, phone, address, city, country }) {}\n\n// Использование\ncreateUser({\n name: \"Анна\",\n age: 25,\n email: \"anna@example.com\",\n // ...\n});","type":"unstyled","key":"dk35t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.4 Избегайте побочных эффектов","type":"header-three","key":"9465s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"e5jlt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"ITALIC"},{"length":35,"offset":103,"style":"ITALIC"}],"text":"// Плохо (меняет внешний массив)\nfunction addToArray(arr, value) {\n arr.push(value);\n return arr;\n}\n\n// Хорошо (возвращает новый массив)\nfunction addToArray(arr, value) {\n return [...arr, value];\n}","type":"unstyled","key":"cfbc7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. Сравнения и условия","type":"header-two","key":"3cl8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.1 Используйте строгое сравнение (===)","type":"header-three","key":"76u35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"f4s63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":9,"offset":51,"style":"ITALIC"},{"length":6,"offset":127,"style":"ITALIC"},{"length":42,"offset":156,"style":"ITALIC"}],"text":"// Плохо\nif (value == 5) {}\nif (value != null) {}\n\n// Хорошо\nif (value === 5) {}\nif (value !== null && value !== undefined) {}\n// Или\nif (value != null) {} // единственное легальное использование ==","type":"unstyled","key":"8i26k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.2 Избегайте отрицательных условий (когда можно)","type":"header-three","key":"5bt3e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"d91n6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":9,"offset":31,"style":"ITALIC"}],"text":"// Плохо\nif (!isNotActive) {}\n\n// Хорошо\nif (isActive) {}","type":"unstyled","key":"f020i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.3 Ранние возвраты (early return) вместо вложенных if","type":"header-three","key":"6lm3e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"71pjd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"ITALIC"},{"length":27,"offset":237,"style":"ITALIC"}],"text":"// Плохо (вложенность)\nfunction getDiscount(user) {\n if (user) {\n if (user.isPremium) {\n if (user.years > 5) {\n return 0.3;\n } else {\n return 0.2;\n }\n } else {\n return 0;\n }\n }\n return 0;\n}\n\n// Хорошо (ранние возвраты)\nfunction getDiscount(user) {\n if (!user) return 0;\n if (!user.isPremium) return 0;\n if (user.years > 5) return 0.3;\n return 0.2;\n}","type":"unstyled","key":"fnhg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.4 Тернарный оператор - только для простого","type":"header-three","key":"8p5ik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"flpm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"ITALIC"},{"length":25,"offset":80,"style":"ITALIC"},{"length":27,"offset":161,"style":"ITALIC"}],"text":"// Хорошо (простое присваивание)\nconst status = age >= 18 ? 'adult' : 'child';\n\n// Плохо (сложная логика)\nconst result = a > b ? a > c ? a : c : b > c ? b : c;\n\n// Хорошо (if для сложного)\nlet result;\nif (a > b && a > c) result = a;\nelse if (b > c) result = b;\nelse result = c;","type":"unstyled","key":"6c2b0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. Структуры данных","type":"header-two","key":"3sb5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.1 Используйте деструктуризацию","type":"header-three","key":"e2kr5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"42cdv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":9,"offset":88,"style":"ITALIC"}],"text":"// Плохо\nconst name = user.name;\nconst age = user.age;\nconst city = user.address.city;\n\n// Хорошо\nconst { name, age, address: { city } } = user;","type":"unstyled","key":"cgknq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.2 Spread вместо Object.assign","type":"header-three","key":"6evjh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8gh3i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":9,"offset":56,"style":"ITALIC"}],"text":"// Плохо\nconst newObj = Object.assign({}, obj1, obj2);\n\n// Хорошо\nconst newObj = { ...obj1, ...obj2 };","type":"unstyled","key":"5k5df"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.3 Используйте map/filter/reduce вместо циклов","type":"header-three","key":"bdvvi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8519m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":9,"offset":107,"style":"ITALIC"}],"text":"// Плохо\nconst doubled = [];\nfor (let i = 0; i < numbers.length; i++) {\n doubled.push(numbers[i] * 2);\n}\n\n// Хорошо\nconst doubled = numbers.map(n => n * 2);","type":"unstyled","key":"asst1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Асинхронность","type":"header-two","key":"eodbp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.1 async/await вместо then/catch","type":"header-three","key":"35m5q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9onm6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":9,"offset":128,"style":"ITALIC"}],"text":"// Плохо\nfetch('/api/user')\n .then(res => res.json())\n .then(data => processUser(data))\n .catch(err => console.error(err));\n\n// Хорошо\ntry {\n const res = await fetch('/api/user');\n const data = await res.json();\n processUser(data);\n} catch (err) {\n console.error(err);\n}","type":"unstyled","key":"a8gmq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.2 Обрабатывайте ошибки","type":"header-three","key":"fgthd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"6gjtc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":19,"offset":48,"style":"ITALIC"},{"length":9,"offset":69,"style":"ITALIC"}],"text":"// Плохо\nconst data = await fetch('/api/data'); // что если ошибка?\n\n// Хорошо\ntry {\n const data = await fetch('/api/data');\n return data;\n} catch (error) {\n console.error('Failed to fetch data:', error);\n return null;\n}","type":"unstyled","key":"o48v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. Ошибки и граничные случаи","type":"header-two","key":"34sku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.1 Всегда проверяйте входные данные","type":"header-three","key":"2gm7e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7qo78"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":20,"offset":49,"style":"ITALIC"},{"length":9,"offset":73,"style":"ITALIC"}],"text":"// Плохо\nfunction divide(a, b) {\n return a / b; // что если b === 0?\n}\n\n// Хорошо\nfunction divide(a, b) {\n if (b === 0) {\n throw new Error('Division by zero');\n }\n return a / b;\n}","type":"unstyled","key":"av9kg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.2 Используйте guard-клаузы для undefined/null","type":"header-three","key":"2573e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"crs2g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":53,"offset":112,"style":"ITALIC"}],"text":"// Плохо\nfunction getUserName(user) {\n if (user && user.name) {\n return user.name;\n }\n return 'Guest';\n}\n\n// Хорошо (опциональная цепочка + nullish coalescing)\nfunction getUserName(user) {\n return user?.name ?? 'Guest';\n}","type":"unstyled","key":"eckps"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Форматирование строк","type":"header-two","key":"ej3ut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.1 Используйте шаблонные строки","type":"header-three","key":"178ms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"f422i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":9,"offset":73,"style":"ITALIC"}],"text":"// Плохо\nconst message = 'Привет, ' + name + '! Тебе ' + age + ' лет.';\n\n// Хорошо\nconst message = `Привет, ${name}! Тебе ${age} лет.`;","type":"unstyled","key":"emm8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.2 Длинные строки","type":"header-three","key":"9qug9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3ikm0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":9,"offset":148,"style":"ITALIC"},{"length":28,"offset":304,"style":"ITALIC"}],"text":"// Плохо\nconst longText = \"Это очень длинная строка, которая не помещается в 80 символов и её трудно читать, потому что она тянется в одну линию\";\n\n// Хорошо\nconst longText = \"Это очень длинная строка, которая не помещается в 80 символов \" +\n \"и её трудно читать, потому что она тянется в одну линию\";\n\n// Или с шаблонными строками\nconst longText = `\n Это очень длинная строка, которая не помещается в 80 символов\n и её трудно читать, потому что она тянется в одну линию\n`;","type":"unstyled","key":"6m745"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Организация файлов","type":"header-two","key":"ejoef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10.1 Порядок внутри файла","type":"header-three","key":"bchl4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2q2f4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"},{"length":15,"offset":76,"style":"ITALIC"},{"length":13,"offset":158,"style":"ITALIC"},{"length":21,"offset":207,"style":"ITALIC"},{"length":26,"offset":278,"style":"ITALIC"}],"text":"// 1. Импорты\nimport React from 'react';\nimport { useState } from 'react';\n\n// 2. Константы\nconst DEFAULT_TIMEOUT = 5000;\nconst API_ENDPOINT = '/api/users';\n\n// 3. Утилиты\nfunction formatDate(date) { ... }\n\n// 4. Основная логика\nexport function UserProfile({ userId }) { ... }\n\n// 5. Экспорт по умолчанию\nexport default UserProfile;","type":"unstyled","key":"bgjnm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10.2 Именованный экспорт vs default","type":"header-three","key":"8n8cm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"eth8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"ITALIC"},{"length":31,"offset":76,"style":"ITALIC"}],"text":"// Хорошо для одного главного экспорта\nexport default function Button() {}\n\n// Хорошо для нескольких утилит\nexport function formatDate() {}\nexport function parseDate() {}\nexport const DATE_FORMAT = 'DD.MM.YYYY';","type":"unstyled","key":"7861i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 11. Инструменты - Ваши верные помощники","type":"header-two","key":"352lp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.1 Prettier - автоматическое форматирование","type":"header-three","key":"7fll2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bash","type":"unstyled","key":"6q10k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm install --save-dev prettier","type":"unstyled","key":"3ivee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"json","type":"unstyled","key":"6144o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"// .prettierrc\n{\n \"semi\": true,\n \"singleQuote\": true,\n \"tabWidth\": 2,\n \"trailingComma\": \"es5\",\n \"printWidth\": 80\n}","type":"unstyled","key":"1g9e4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.2 ESLint - ловит ошибки до выполнения","type":"header-three","key":"b6bj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bash","type":"unstyled","key":"cu8dc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm install --save-dev eslint","type":"unstyled","key":"caqe3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"json","type":"unstyled","key":"a4jol"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"ITALIC"}],"text":"// .eslintrc\n{\n \"extends\": [\"eslint:recommended\", \"airbnb-base\"],\n \"rules\": {\n \"no-console\": \"warn\",\n \"no-unused-vars\": \"error\"\n }\n}","type":"unstyled","key":"2jthc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.3 EditorConfig - единый стиль в команде","type":"header-three","key":"5vte9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ini","type":"unstyled","key":"c7tsj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"# .editorconfig\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true","type":"unstyled","key":"ftaf2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 12. Антипаттерны (чего делать НЕ НАДО)","type":"header-two","key":"fbgd7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"12.1 Не меняйте сигнатуру встроенных объектов","type":"header-three","key":"ff3lt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"f5ph5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"ITALIC"}],"text":"// НИКОГДА ТАК НЕ ДЕЛАЙТЕ\nArray.prototype.shuffle = function() { ... }\nObject.prototype.superMethod = function() { ... }","type":"unstyled","key":"cbf9p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"12.2 Не используйте with","type":"header-three","key":"15v82"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5j1od"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"ITALIC"}],"text":"// Плохо (запрещено в строгом режиме)\nwith (obj) {\n console.log(a, b, c);\n}","type":"unstyled","key":"31qvc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"12.3 Не используйте eval","type":"header-three","key":"aqub7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"e893q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"ITALIC"},{"length":20,"offset":73,"style":"ITALIC"}],"text":"// Плохо (опасно и медленно)\neval('const result = ' + userInput + ';');\n\n// Хорошо (без eval)\nconst result = JSON.parse(userInput);","type":"unstyled","key":"52eu0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"12.4 Не оставляйте debugger в продакшене","type":"header-three","key":"c1tc8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2k0v3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":17,"offset":42,"style":"ITALIC"}],"text":"// Плохо\nfunction process() {\n debugger; // забыли удалить\n return result;\n}","type":"unstyled","key":"fehii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 13. Чек-лист перед коммитом","type":"header-two","key":"bieme"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переменные названы осмысленно (не x, data, temp)","type":"unordered-list-item","key":"c8ho7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Функции делают одну вещь и названы глаголом","type":"unordered-list-item","key":"3v3de"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нет магических чисел (вынесены в константы)","type":"unordered-list-item","key":"dqt4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используется === вместо ==","type":"unordered-list-item","key":"1n5l1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нет вложенных if глубже 3 уровней","type":"unordered-list-item","key":"96hmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Функции короче 30 строк (лучше 15-20)","type":"unordered-list-item","key":"ekua6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Комментарии объясняют \"почему\", а не \"что\"","type":"unordered-list-item","key":"c636f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нет console.log в продакшен-коде","type":"unordered-list-item","key":"160us"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код отформатирован (Prettier)","type":"unordered-list-item","key":"90b30"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ESLint показывает 0 ошибок","type":"unordered-list-item","key":"aalvq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест стиля","type":"header-two","key":"frlpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Код читают люди - пишите для человека, который будет поддерживать ваш код (это может быть вы через полгода).","type":"ordered-list-item","key":"e81gv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Будьте последовательны - любой стиль лучше, чем смесь стилей.","type":"ordered-list-item","key":"463n2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Автоматизируйте - Prettier + ESLint решают 90% проблем.","type":"ordered-list-item","key":"8us0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Имена имеют значение - хорошее имя заменяет комментарий.","type":"ordered-list-item","key":"o6oj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Короткие функции - легче тестировать, отлаживать, понимать.","type":"ordered-list-item","key":"e7esc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Ранние возвраты - убивают вложенность.","type":"ordered-list-item","key":"ackdq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Не будьте умным - понятный код лучше \"гениального\".","type":"ordered-list-item","key":"3t3ug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"И последнее: самый лучший стиль - это тот, которого придерживается вся команда. Договоритесь, запишите в README, автоматизируйте проверку. И тогда ваш код будет не просто работать - он будет радовать глаз.","type":"unstyled","key":"d3mcd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Помните: вы пишете код не для компьютера. Компьютер исполнит любой, даже самый ужасный код. Вы пишете для людей. Сделайте им приятно.","type":"unstyled","key":"abth4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--------------------------------------------------------------------------------","type":"unstyled","key":"8nvv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--------------------------------------------------------------------------------","type":"unstyled","key":"7dht3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Молчаливые стражи: Искусство комментариев в JavaScript (или почему ваш код должен рассказывать истории)","type":"header-two","key":"at0eq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы когда-нибудь возвращались к своему коду через три месяца и не понимали, зачем вы написали эту странную строчку? Или тратили час, пытаясь разобраться в чужой функции, где единственный комментарий - это // TODO fix?","type":"unstyled","key":"ah7li"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Комментарии - это письма в будущее. Сегодня вы пишете их для себя через полгода. Или для коллеги, который будет дежурить в пятницу вечером. Хороший комментарий спасает часы дебага. Плохой - создаёт иллюзию понимания.","type":"unstyled","key":"c86kh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте разберёмся, как комментировать так, чтобы вас благословляли, а не проклинали.","type":"unstyled","key":"e8j8b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Синтаксис: Два пути сказать что-то важное","type":"header-two","key":"54u4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1.1 Однострочные комментарии //","type":"header-three","key":"av498"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"h76j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"ITALIC"},{"length":27,"offset":51,"style":"ITALIC"},{"length":39,"offset":80,"style":"ITALIC"},{"length":40,"offset":120,"style":"ITALIC"}],"text":"// Это однострочный комментарий\nconst answer = 42; // Можно ставить после кода\n\n// Часто используют для отключения кода\n// const oldVersion = calculateOldWay();\nconst newVersion = calculateNewWay();","type":"unstyled","key":"8g5uo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1.2 Многострочные комментарии /* */","type":"header-three","key":"77gl1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"698p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"ITALIC"},{"length":35,"offset":143,"style":"ITALIC"}],"text":"/*\n Это многострочный комментарий.\n Он может занимать несколько строк.\n Идеален для длинных объяснений.\n*/\n\nfunction complexAlgorithm() {\n /* Иногда используют внутри строки,\n но лучше так не делать */ const x = 5;\n}","type":"unstyled","key":"9fuud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1.3 HTML-комментарии в JS? (нет)","type":"header-three","key":"da7ra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1c8kg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":39,"style":"ITALIC"}],"text":"\n// В JS работают только // и /* */","type":"unstyled","key":"15es7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. Почему комментарии важны (и когда опасны)","type":"header-two","key":"d7ivv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.1 Хорошие комментарии спасают жизни","type":"header-three","key":"2tu1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"34tqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"ITALIC"},{"length":18,"offset":72,"style":"ITALIC"},{"length":41,"offset":117,"style":"ITALIC"}],"text":"// Кейс: компенсация сдвига индекса\nfunction removeItem(arr, index) {\n // Удаляем элемент\n arr.splice(index, 1);\n // Компенсируем, так как массив изменился\n index--;\n return arr;\n}","type":"unstyled","key":"8c60d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.2 Плохие комментарии - это шум","type":"header-three","key":"eckp5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4641d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"},{"length":27,"offset":31,"style":"ITALIC"},{"length":21,"offset":60,"style":"ITALIC"},{"length":46,"offset":82,"style":"ITALIC"},{"length":36,"offset":160,"style":"ITALIC"}],"text":"// Плохо (очевидно)\nlet x = 5; // Присваиваем x значение 5\n\n// Плохо (устаревший)\n// Проверяем, является ли пользователь админом\nif (user.role === 'admin') {\n // теперь тут проверка на модератора\n if (user.role === 'moderator') {\n grantAccess();\n }\n}","type":"unstyled","key":"1iafh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.3 Лучший комментарий - это самодокументируемый код","type":"header-three","key":"a0lbj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7deiv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"ITALIC"},{"length":39,"offset":29,"style":"ITALIC"},{"length":35,"offset":102,"style":"ITALIC"},{"length":8,"offset":200,"style":"ITALIC"},{"length":18,"offset":209,"style":"ITALIC"},{"length":9,"offset":280,"style":"ITALIC"}],"text":"// Плохо (нужен комментарий)\n// Проверяем, не истек ли срок действия\nif (Date.now() > expiryDate) {}\n\n// Хорошо (код говорит сам за себя)\nconst isExpired = Date.now() > expiryDate;\nif (isExpired) {}\n\n// Плохо\n// Валидация email\nif (email.includes('@') && email.includes('.')) {}\n\n// Хорошо\nconst isValidEmail = email => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email);\nif (isValidEmail(email)) {}","type":"unstyled","key":"3904f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Что комментировать: Фокус на \"ПОЧЕМУ\"","type":"header-two","key":"dl3jr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.1 Комментируйте бизнес-логику","type":"header-three","key":"6kntv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4p36f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"},{"length":62,"offset":20,"style":"ITALIC"},{"length":50,"offset":83,"style":"ITALIC"},{"length":19,"offset":189,"style":"ITALIC"},{"length":60,"offset":209,"style":"ITALIC"},{"length":63,"offset":270,"style":"ITALIC"}],"text":"// ПОЧЕМУ? (не что)\n// Скидка 20% для пользователей, зарегистрированных более года\n// Это требование отдела маркетинга (тикет #12345)\nconst discount = user.registeredDays > 365 ? 0.2 : 0;\n\n// ПОЧЕМУ? (не что)\n// Используем UTC, чтобы избежать проблем с часовыми поясами\n// Клиенты из Новосибирска и Калининграда видят одинаковые даты\nconst today = new Date().toISOString().split('T')[0];","type":"unstyled","key":"f5dtn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.2 Комментируйте сложные алгоритмы","type":"header-three","key":"9q3sa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fen87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":55,"offset":0,"style":"ITALIC"},{"length":83,"offset":56,"style":"ITALIC"},{"length":59,"offset":203,"style":"ITALIC"},{"length":39,"offset":379,"style":"ITALIC"},{"length":11,"offset":616,"style":"ITALIC"},{"length":10,"offset":662,"style":"ITALIC"},{"length":9,"offset":709,"style":"ITALIC"}],"text":"// Реализация алгоритма Левенштейна для поиска опечаток\n// Расстояние = минимальное количество правок для превращения одной строки в другую\nfunction levenshteinDistance(a, b) {\n const matrix = [];\n \n // Инициализация матрицы: первая строка и столбец — индексы\n for (let i = 0; i <= b.length; i++) matrix[i] = [i];\n for (let j = 0; j <= a.length; j++) matrix[0][j] = j;\n \n // Заполняем матрицу, сравнивая символы\n for (let i = 1; i <= b.length; i++) {\n for (let j = 1; j <= a.length; j++) {\n const cost = a[j - 1] === b[i - 1] ? 0 : 1;\n matrix[i][j] = Math.min(\n matrix[i - 1][j] + 1, // удаление\n matrix[i][j - 1] + 1, // вставка\n matrix[i - 1][j - 1] + cost // замена\n );\n }\n }\n \n return matrix[b.length][a.length];\n}","type":"unstyled","key":"48m10"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.3 Комментируйте \"грабли\" и обходные пути","type":"header-three","key":"8lf0g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"d6l7s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":0,"style":"ITALIC"},{"length":63,"offset":52,"style":"ITALIC"},{"length":53,"offset":152,"style":"ITALIC"},{"length":57,"offset":206,"style":"ITALIC"},{"length":72,"offset":340,"style":"ITALIC"}],"text":"// HACK: В старых версиях Safari есть баг с flexbox\n// Пришлось добавить position: relative, иначе ломается вёрстка\n.element {\n position: relative;\n}\n\n// FIXME: Временное решение до обновления API бэкенда\n// Ожидаем, что поле user.full_name появится в версии 2.0\nconst userName = user.full_name || `${user.first_name} ${user.last_name}`;\n\n// TODO: Оптимизировать производительность (O(n^2) для больших массивов)\nfunction findDuplicates(arr) { ... }","type":"unstyled","key":"2s47o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.4 Комментируйте побочные эффекты","type":"header-three","key":"7jgf9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"48d78"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"ITALIC"},{"length":51,"offset":102,"style":"ITALIC"}],"text":"// ВНИМАНИЕ: Эта функция изменяет исходный массив\nfunction sortInPlace(arr) {\n return arr.sort();\n}\n\n// НЕ ИСПОЛЬЗОВАТЬ: Меняет глобальный объект window\nfunction setGlobalTheme(theme) {\n window.theme = theme;\n}","type":"unstyled","key":"5975i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. JSDoc: Документация для профессионалов","type":"header-two","key":"7auam"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JSDoc - это стандарт документирования функций, классов и модулей.","type":"unstyled","key":"5h20a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.1 Базовый JSDoc","type":"header-three","key":"2mb84"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2jdbe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"ITALIC"}],"text":"/**\n * Складывает два числа\n * @param {number} a - Первое слагаемое\n * @param {number} b - Второе слагаемое\n * @returns {number} Сумма a и b\n */\nfunction add(a, b) {\n return a + b;\n}","type":"unstyled","key":"4l0fe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.2 Сложные типы","type":"header-three","key":"buk7r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"feso4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"ITALIC"},{"length":6,"offset":287,"style":"ITALIC"}],"text":"/**\n * @param {string[]} names - Массив строк\n * @param {Object} options - Настройки\n * @param {boolean} options.isActive - Активировать обработку\n * @param {number} [options.timeout=5000] - Таймаут (опционально)\n * @returns {Promise}\n */\nfunction fetchUsers(names, options) {\n // ...\n}","type":"unstyled","key":"gvvu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.3 Примеры использования","type":"header-three","key":"ds1rk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"78vb9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"ITALIC"}],"text":"/**\n * Форматирует дату в человекочитаемый вид\n * @param {Date} date - Дата для форматирования\n * @param {string} [locale='ru-RU'] - Локаль\n * @returns {string} Отформатированная дата\n * @example\n * formatDate(new Date(2024, 0, 15)) // \"15 января 2024 г.\"\n * formatDate(new Date(), 'en-US') // \"January 15, 2024\"\n */\nfunction formatDate(date, locale = 'ru-RU') {\n return date.toLocaleDateString(locale, {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n });\n}","type":"unstyled","key":"tbsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.4 Типы возврата и ошибки","type":"header-three","key":"83rnv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"feamu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"ITALIC"}],"text":"/**\n * Находит пользователя по ID\n * @param {number} id - ID пользователя\n * @returns {Promise} Найденный пользователь\n * @throws {NotFoundError} Если пользователь не найден\n * @throws {ValidationError} Если ID не является положительным числом\n */\nasync function getUser(id) {\n if (id <= 0) throw new ValidationError('ID must be positive');\n const user = await db.findUser(id);\n if (!user) throw new NotFoundError(`User ${id} not found`);\n return user;\n}","type":"unstyled","key":"3e00q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.5 Теги для типов (TypeScript без TypeScript)","type":"header-three","key":"atime"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1pvmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"ITALIC"},{"length":3,"offset":234,"style":"ITALIC"},{"length":3,"offset":279,"style":"ITALIC"}],"text":"/**\n * @typedef {Object} User\n * @property {number} id - Уникальный идентификатор\n * @property {string} name - Имя пользователя\n * @property {string} email - Email (уникальный)\n * @property {boolean} isActive - Статус активности\n */\n\n/**\n * @type {User[]}\n */\nconst users = [];\n\n/**\n * @callback CallbackFunction\n * @param {Error} error - Ошибка или null\n * @param {User} user - Найденный пользователь\n */","type":"unstyled","key":"edkqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. TODO, FIXME, HACK, NOTE - Язык разработчиков","type":"header-two","key":"3f43n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эти теги понимают IDE и подсвечивают их.","type":"unstyled","key":"5h35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.1 TODO - Надо сделать","type":"header-three","key":"6ms8u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3b9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"ITALIC"},{"length":45,"offset":34,"style":"ITALIC"},{"length":68,"offset":80,"style":"ITALIC"},{"length":42,"offset":182,"style":"ITALIC"}],"text":"// TODO: Добавить валидацию email\n// TODO: Вынести магические числа в константы\n// TODO(anna): Оптимизировать запрос к БД (тормозит на 10к+ записей)\nfunction processUsers(users) {\n // TODO: Обработать случай пустого массива\n return users.map(user => user.name);\n}","type":"unstyled","key":"ba40l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.2 FIXME - Сломано, надо чинить","type":"header-three","key":"31he3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fmhoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"ITALIC"},{"length":48,"offset":46,"style":"ITALIC"},{"length":26,"offset":141,"style":"ITALIC"}],"text":"// FIXME: Не работает для отрицательных чисел\n// FIXME: Иногда возвращает null, хотя не должен\nfunction calculatePercentage(part, whole) {\n // FIXME: Деление на ноль!\n return (part / whole) * 100;\n}","type":"unstyled","key":"7e0v5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.3 HACK - Временный костыль","type":"header-three","key":"9v3pc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2fgmr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":59,"offset":0,"style":"ITALIC"},{"length":47,"offset":60,"style":"ITALIC"},{"length":38,"offset":108,"style":"ITALIC"},{"length":28,"offset":194,"style":"ITALIC"},{"length":13,"offset":223,"style":"ITALIC"}],"text":"// HACK: Обходим баг в библиотеке moment.js (версия 2.29.0)\n// https://github.com/moment/moment/issues/1234\n// Удалить после обновления библиотеки\nconst fixedDate = moment(date).add(1, 'day');\n\n// HACK: CSS-фикс для Safari\n/* @noflip */\n.selector {\n -webkit-appearance: none;\n}","type":"unstyled","key":"93b1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.4 NOTE - Важное замечание","type":"header-three","key":"c7eps"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"cfllj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":63,"offset":0,"style":"ITALIC"},{"length":55,"offset":102,"style":"ITALIC"}],"text":"// NOTE: Порядок аргументов важен! Сначала ширина, потом высота\nfunction createBox(width, height) {}\n\n// NOTE: Функция мутирует объект для производительности\nfunction updateInPlace(obj) {}","type":"unstyled","key":"7h7pg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.5 XXX - Здесь опасно/важно","type":"header-three","key":"5kg8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dmcdj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":0,"style":"ITALIC"},{"length":51,"offset":76,"style":"ITALIC"}],"text":"// XXX: Это место требует рефакторинга перед добавлением нового функционала\n// XXX: Изменения здесь могут сломать модуль оплаты\nfunction criticalPaymentLogic() {}","type":"unstyled","key":"fjrb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. Антипаттерны: Как НЕ надо комментировать","type":"header-two","key":"2pqrh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.1 Очевидные комментарии (шум)","type":"header-three","key":"6uene"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"cg7b3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":10,"offset":26,"style":"ITALIC"},{"length":22,"offset":48,"style":"ITALIC"},{"length":18,"offset":93,"style":"ITALIC"},{"length":35,"offset":113,"style":"ITALIC"}],"text":"// Плохо\nlet counter = 0; // Счетчик\ncounter++; // Увеличиваем счетчик\nconsole.log(counter); // Выводим счетчик\n\n// Хорошо (код говорит сам за себя)\nlet clickCount = 0;\nclickCount++;\nconsole.log(clickCount);","type":"unstyled","key":"7h6k1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.2 Комментарии-книги","type":"header-three","key":"78cul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"e7cg7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":52,"offset":9,"style":"ITALIC"},{"length":48,"offset":413,"style":"ITALIC"}],"text":"// Плохо\n/***************************************************\n * Функция для обработки пользовательских данных *\n * Автор: Анна *\n * Дата: 15.01.2024 *\n * Версия: 3.2 *\n * Лицензия: MIT *\n ***************************************************/\nfunction processData() {}\n\n// Хорошо (информация в системе контроля версий)\nfunction processData() {}","type":"unstyled","key":"bpo88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.3 Закомментированный код","type":"header-three","key":"3lti6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ate4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"ITALIC"},{"length":33,"offset":17,"style":"ITALIC"},{"length":41,"offset":51,"style":"ITALIC"},{"length":34,"offset":93,"style":"ITALIC"},{"length":20,"offset":128,"style":"ITALIC"},{"length":4,"offset":149,"style":"ITALIC"},{"length":53,"offset":186,"style":"ITALIC"}],"text":"// Плохо (мусор)\n// const oldWay = calculateOld();\n// const anotherOld = calculateAnother();\n// for (let i = 0; i < 100; i++) {\n// console.log(i);\n// }\nconst newWay = calculateNew();\n\n// Хорошо (удаляем, не храним историю в комментариях)\nconst newWay = calculateNew();","type":"unstyled","key":"c5bug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.4 Комментарии-извинения","type":"header-three","key":"r1p8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"toa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":46,"offset":9,"style":"ITALIC"},{"length":42,"offset":56,"style":"ITALIC"},{"length":48,"offset":127,"style":"ITALIC"}],"text":"// Плохо\n// Извините за этот код, я знаю, что он ужасен\n// Просто времени не было, переделаю потом\nfunction uglyFunction() {}\n\n// Хорошо (потрать время сейчас или напиши TODO)\nfunction readableFunction() {}","type":"unstyled","key":"acccd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.5 Строчные комментарии, разрывающие поток","type":"header-three","key":"83r0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2enpe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":18,"offset":52,"style":"ITALIC"},{"length":18,"offset":81,"style":"ITALIC"},{"length":18,"offset":110,"style":"ITALIC"},{"length":38,"offset":133,"style":"ITALIC"}],"text":"// Плохо\nconst result = someLongFunction(\n param1, // первый параметр\n param2, // второй параметр\n param3 // третий параметр\n);\n\n// Хорошо (имена говорят сами за себя)\nconst result = someLongFunction(\n firstName,\n lastName,\n userAge\n);","type":"unstyled","key":"2m31f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Комментарии в команде: Создаём культуру","type":"header-two","key":"3qi5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.1 Code Review комментарии","type":"header-three","key":"ftcv5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fagic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":68,"offset":9,"style":"ITALIC"}],"text":"// В PR:\n// @reviewer: Проверьте граничные условия (массив может быть пустым)\nfunction processItems(items) {\n return items.map(item => item.value);\n}","type":"unstyled","key":"1sr9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.2 Комментарии для новичков","type":"header-three","key":"cuh30"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"cblti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"ITALIC"},{"length":54,"offset":45,"style":"ITALIC"},{"length":40,"offset":100,"style":"ITALIC"},{"length":3,"offset":142,"style":"ITALIC"},{"length":6,"offset":364,"style":"ITALIC"}],"text":"// Добро пожаловать в модуль аутентификации!\n// Основные функции: login(), logout(), refreshToken()\n// Смотрите примеры в tests/auth.test.js\n\n/**\n * Вход пользователя в систему\n * @param {string} email - Email (регистр не важен)\n * @param {string} password - Пароль (минимум 8 символов)\n * @returns {Promise}\n */\nasync function login(email, password) {\n // ...\n}","type":"unstyled","key":"2n344"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.3 Комментарии-ссылки","type":"header-three","key":"4el2p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5rdbg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":55,"offset":0,"style":"ITALIC"},{"length":24,"offset":56,"style":"ITALIC"},{"length":72,"offset":81,"style":"ITALIC"},{"length":6,"offset":188,"style":"ITALIC"}],"text":"// См. спецификацию: https://wiki.company.com/auth-flow\n// Баг-трекер: JIRA-1234\n// Решение основано на статье: https://stackoverflow.com/questions/12345\nfunction handleAuthRedirect() {\n // ...\n}","type":"unstyled","key":"5hv8s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. Реальные примеры из практики","type":"header-two","key":"98dtr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.1 Сложный баг с часовыми поясами","type":"header-three","key":"8kov2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8gc5l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"ITALIC"},{"length":64,"offset":451,"style":"ITALIC"}],"text":"/**\n * Преобразует время сервера в локальное время пользователя\n * \n * ПОЧЕМУ: Сервер в UTC+0, пользователи по всему миру\n * ПРОБЛЕМА: JavaScript Date автоматически конвертирует, но теряет информацию\n * РЕШЕНИЕ: Храним timestamp, конвертируем на клиенте\n * \n * @example\n * // Сервер вернул 2024-01-15T12:00:00Z\n * const localTime = toLocalTime('2024-01-15T12:00:00Z');\n * // В Новосибирске (UTC+7) будет 19:00\n */\nfunction toLocalTime(serverTime) {\n // Не используем new Date(serverTime) напрямую — там свои грабли\n const timestamp = Date.parse(serverTime);\n return new Date(timestamp);\n}","type":"unstyled","key":"3429a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.2 Оптимизация производительности","type":"header-three","key":"12m9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3s9u6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":52,"offset":0,"style":"ITALIC"},{"length":50,"offset":53,"style":"ITALIC"},{"length":66,"offset":191,"style":"ITALIC"}],"text":"// Кэшируем результат, потому что вычисление сложное\n// Пересчитываем только при изменении зависимостей\nlet cachedResult = null;\nlet lastDeps = null;\n\nfunction expensiveComputation(deps) {\n // NOTE: Используем поверхностное сравнение для производительности\n if (lastDeps === deps) return cachedResult;\n \n lastDeps = deps;\n cachedResult = doExpensiveWork(deps);\n return cachedResult;\n}","type":"unstyled","key":"6pb6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.3 Обходной путь для браузерного бага","type":"header-three","key":"4hl52"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2r0nu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":52,"offset":0,"style":"ITALIC"},{"length":40,"offset":53,"style":"ITALIC"},{"length":48,"offset":237,"style":"ITALIC"},{"length":48,"offset":286,"style":"ITALIC"},{"length":42,"offset":335,"style":"ITALIC"},{"length":21,"offset":416,"style":"ITALIC"}],"text":"// HACK: В IE11 отсутствует Array.prototype.includes\n// Удалить, когда прекратим поддержку IE\nif (!Array.prototype.includes) {\n Array.prototype.includes = function(searchElement) {\n return this.indexOf(searchElement) !== -1;\n };\n}\n\n// FIXME: В Safari 14 баг с IntersectionObserver\n// https://bugs.webkit.org/show_bug.cgi?id=12345\n// Используем polyfill до выхода Safari 15\nif (!window.IntersectionObserver) {\n // загружаем polyfill\n}","type":"unstyled","key":"8h38j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Инструменты для работы с комментариями","type":"header-two","key":"71bfr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.1 ESLint правила для комментариев","type":"header-three","key":"274qd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"json","type":"unstyled","key":"bk3m9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{\n \"rules\": {\n \"spaced-comment\": [\"error\", \"always\"],\n \"capitalized-comments\": [\"warn\", \"always\"],\n \"no-warning-comments\": [\"warn\", {\n \"terms\": [\"todo\", \"fixme\", \"xxx\"],\n \"location\": \"start\"\n }]\n }\n}","type":"unstyled","key":"2663v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.2 Генерация документации из JSDoc","type":"header-three","key":"35tit"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bash","type":"unstyled","key":"cbh87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"ITALIC"},{"length":24,"offset":34,"style":"ITALIC"}],"text":"# Установка\nnpm install -g jsdoc\n\n# Генерация документации\njsdoc src/*.js -d docs/","type":"unstyled","key":"cjg2u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.3 Prettier и комментарии","type":"header-three","key":"9ilnv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Prettier не ломает комментарии, но форматирует их.","type":"unstyled","key":"8fao7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dr8of"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"},{"length":14,"offset":28,"style":"ITALIC"},{"length":38,"offset":44,"style":"ITALIC"},{"length":14,"offset":96,"style":"ITALIC"}],"text":"// До Prettier\nconst x = 5; // комментарий\n\n// После Prettier (оставляет на месте)\nconst x = 5; // комментарий","type":"unstyled","key":"3p13k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Чек-лист хорошего комментария","type":"header-two","key":"67a4p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объясняет ПОЧЕМУ, а не ЧТО","type":"unordered-list-item","key":"bvti3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Актуален (не противоречит коду)","type":"unordered-list-item","key":"aiqgu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лаконичен (не больше, чем нужно)","type":"unordered-list-item","key":"ftv3d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Написан понятным языком (без жаргона)","type":"unordered-list-item","key":"f4i1n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не дублирует очевидное","type":"unordered-list-item","key":"b709h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Содержит ссылки на баги/задачи/документацию (если нужно)","type":"unordered-list-item","key":"9ujdt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использует правильные теги (TODO, FIXME, NOTE)","type":"unordered-list-item","key":"8gmdr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 11. Философия комментирования","type":"header-two","key":"csl0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.1 Закон \"Двух уровней\"","type":"header-three","key":"9fua5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первый уровень - для понимания кода (что делает функция, какие параметры, что возвращает).","type":"unstyled","key":"7chnu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Второй уровень - для понимания контекста (почему это здесь, почему именно так, какие ограничения).","type":"unstyled","key":"3khgh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.2 Закон \"Читатель всегда прав\"","type":"header-three","key":"5ag0u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если читателю непонятно - виноват комментарий (или код). Не оправдывайте сложность словами \"ну это же очевидно\".","type":"unstyled","key":"bsgnp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.3 Закон \"Умирающих комментариев\"","type":"header-three","key":"61kdr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Комментарии устаревают быстрее кода. Люди забывают их обновлять. Хороший комментарий - тот, который напоминает о себе (например, ссылкой на баг-трекер, который закроют при исправлении).","type":"unstyled","key":"erkli"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест комментатора","type":"header-two","key":"7f8mt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":0,"style":"BOLD"}],"text":"Пишите код, который не нуждается в комментариях - хорошие имена, короткие функции, понятная логика.","type":"ordered-list-item","key":"5i4cp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Комментируйте \"почему\", а не \"что\" - что видно из кода, почему - нет.","type":"ordered-list-item","key":"24uo6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Не храните историю в комментариях - для этого есть Git.","type":"ordered-list-item","key":"55fv4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Используйте JSDoc - это стандарт, его понимают IDE и генераторы документации.","type":"ordered-list-item","key":"1tvvq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"TODO, FIXME, HACK - ваши друзья - но возвращайтесь к ним.","type":"ordered-list-item","key":"f520b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Удаляйте закомментированный код - он создаёт ложное чувство безопасности.","type":"ordered-list-item","key":"c58rs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Будьте вежливы - комментарии читают люди.","type":"ordered-list-item","key":"c9ms9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Финальный тест: какой комментарий лучше?","type":"unstyled","key":"6u81k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"6cmht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"},{"length":19,"offset":14,"style":"ITALIC"},{"length":13,"offset":40,"style":"ITALIC"},{"length":44,"offset":54,"style":"ITALIC"},{"length":13,"offset":105,"style":"ITALIC"}],"text":"// Вариант 1:\n// Прибавляем 1 к i\ni++;\n\n// Вариант 2:\n// Компенсируем удаление элемента из массива\ni--;\n\n// Вариант 3:\ni++;","type":"unstyled","key":"1pu16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":6,"offset":39,"style":"ITALIC"}],"text":"Ответ: Вариант 2, потому что объясняет почему мы меняем переменную, а не просто описывает действие.","type":"unstyled","key":"egddi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":23,"style":"ITALIC"},{"length":6,"offset":63,"style":"ITALIC"}],"text":"Помните: код - это то, что делает компьютер. Комментарии - то, почему он это делает. И если ваш код не может объяснить себя сам, комментарии становятся голосом разума. Используйте этот голос мудро.","type":"unstyled","key":"7vb9g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--------------------------------------------------------------------------------","type":"unstyled","key":"e7k2e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--------------------------------------------------------------------------------","type":"unstyled","key":"6d19q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тёмное искусство: Почему ниндзя-код - это проклятие, а не суперсила","type":"header-two","key":"8k1kn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В легендах о JavaScript есть таинственные существа - ниндзя-программисты. Они пишут код, который никто не может понять. Они используют однобуквенные переменные, магические числа и конструкции, от которых у линтера случается инфаркт.","type":"unstyled","key":"4kb5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Их код работает. Но только до первого бага. А когда баг приходит, его невозможно отладить. Никто не хочет трогать код ниндзя. Даже сам ниндзя через месяц.","type":"unstyled","key":"d1s0b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это история о том, как НЕ надо писать код. И о том, почему \"умный\" код - часто самый глупый.","type":"unstyled","key":"9r758"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Философия ниндзя (или как оправдать ужасный код)","type":"header-two","key":"bbvt7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниндзя-программист считает себя гением. Он уверен, что код должны читать только компьютеры. А люди - пусть страдают.","type":"unstyled","key":"fmdvh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Принципы ниндзя:","type":"unstyled","key":"29v44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чем короче имя переменной - тем быстрее я печатаю","type":"unordered-list-item","key":"dr2di"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чем больше вложенности - тем я круче","type":"unordered-list-item","key":"f69fm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чем меньше комментариев - тем я загадочнее","type":"unordered-list-item","key":"c79v7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если код сложный - значит, задача сложная","type":"unordered-list-item","key":"qh4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Правда: Хороший код - это код, который может понять стажёр. Плохой код - тот, который не понимает даже автор через неделю.","type":"unstyled","key":"5leir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. Именование во тьме (или \"Поиск переменной x\")","type":"header-two","key":"fn6ql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.1 Однобуквенные переменные","type":"header-three","key":"52k7t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниндзя любит загадки:","type":"unstyled","key":"cs9m4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"aq4as"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"},{"length":33,"offset":83,"style":"ITALIC"}],"text":"// Код ниндзя\nlet a = 5;\nlet b = 10;\nlet c = a + b;\nlet d = c * 2;\nlet e = d - 3;\n\n// Что здесь происходит? Гадайте!","type":"unstyled","key":"7ja2m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Правильное имя:","type":"unstyled","key":"2rtnr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"rro4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const price = 5;\nconst quantity = 10;\nconst subtotal = price + quantity;\nconst totalWithTax = subtotal * 2;\nconst finalPrice = totalWithTax - 3;","type":"unstyled","key":"5lec4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.2 Аббревиатуры, понятные только ниндзя","type":"header-three","key":"em0cd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2umrn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"},{"length":15,"offset":91,"style":"ITALIC"}],"text":"// Код ниндзя\nconst usr = getUsr();\nconst pwd = getPwd();\nconst vld = validate(usr, pwd);\n\n// Понятный код\nconst user = getUser();\nconst password = getPassword();\nconst isValid = validate(user, password);","type":"unstyled","key":"95u9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Исключения: Общепринятые аббревиатуры (id, url, api, db, html, css, js).","type":"unstyled","key":"sifb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.3 Похожие имена (тест на внимательность)","type":"header-three","key":"ap8e8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ernpi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"ITALIC"},{"length":18,"offset":90,"style":"ITALIC"},{"length":20,"offset":155,"style":"ITALIC"}],"text":"// Код ниндзя (найди отличие)\nlet data = 1;\nlet data1 = 2;\nlet data2 = 3;\nlet data3 = 4;\n\n// Или ещё \"лучше\"\nlet result;\nlet resalt;\nlet rezult;\nlet res;\n\n// Правильный подход\nconst userCount = 1;\nconst productCount = 2;\nconst orderCount = 3;","type":"unstyled","key":"896h1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.4 Сезонные имена","type":"header-three","key":"e6f7t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2ajoc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"ITALIC"},{"length":60,"offset":106,"style":"ITALIC"}],"text":"// Код ниндзя (зимой работает, летом - нет)\nlet summer = 25;\nlet winter = 100;\nlet spring = calculate();\n\n// Через месяц никто не помнит, что summer - это температура\nconst temperature = 25;\nconst maxLimit = 100;","type":"unstyled","key":"d0tt2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Магия чисел и строк (или \"Почему 42?\")","type":"header-two","key":"5pljj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.1 Магические числа","type":"header-three","key":"bjp9d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ce3a0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"},{"length":41,"offset":80,"style":"ITALIC"}],"text":"// Код ниндзя\nif (status === 404) {}\nsetTimeout(fn, 5000);\nif (width > 768) {}\n\n// Никто не знает, что означают эти числа","type":"unstyled","key":"b71b1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Расшифровка ниндзя: \"Ну, 404 - это же все знают... А 5000 - это пять секунд... 768 - ну, планшеты...\"","type":"unstyled","key":"cvrnb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Правильный код:","type":"unstyled","key":"7lq6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9gekm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const HTTP_NOT_FOUND = 404;\nconst REFRESH_INTERVAL_MS = 5000;\nconst TABLET_BREAKPOINT = 768;\n\nif (status === HTTP_NOT_FOUND) {}\nsetTimeout(fn, REFRESH_INTERVAL_MS);\nif (width > TABLET_BREAKPOINT) {}","type":"unstyled","key":"an19g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.2 Магические строки","type":"header-three","key":"4ed6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5n4j3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"},{"length":48,"offset":81,"style":"ITALIC"}],"text":"// Код ниндзя\nif (user.role === \"admin\") {}\nif (error.message === \"timeout\") {}\n\n// А если опечатка? \"amin\", \"timout\" - ищи потом","type":"unstyled","key":"e7ac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Правильный код:","type":"unstyled","key":"eu1lb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ecfdi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const USER_ROLES = {\n ADMIN: \"admin\",\n MODERATOR: \"moderator\",\n USER: \"user\"\n};\n\nconst ERROR_TYPES = {\n TIMEOUT: \"timeout\",\n NETWORK: \"network\",\n VALIDATION: \"validation\"\n};\n\nif (user.role === USER_ROLES.ADMIN) {}\nif (error.message === ERROR_TYPES.TIMEOUT) {}","type":"unstyled","key":"ehban"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. Искусство вложенности (или \"Пирамида смерти\")","type":"header-two","key":"7age8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниндзя обожает вложенные условия. Чем глубже - тем лучше.","type":"unstyled","key":"2hspv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.1 Пирамида из if","type":"header-three","key":"a4gr9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4q3ep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"ITALIC"}],"text":"// Код ниндзя (5 уровней вложенности)\nfunction processUser(user) {\n if (user) {\n if (user.isActive) {\n if (user.hasPermission) {\n if (user.age >= 18) {\n if (user.verified) {\n return \"Доступ разрешён\";\n } else {\n return \"Требуется верификация\";\n }\n } else {\n return \"Возраст меньше 18\";\n }\n } else {\n return \"Нет прав\";\n }\n } else {\n return \"Аккаунт не активен\";\n }\n } else {\n return \"Пользователь не найден\";\n }\n}","type":"unstyled","key":"6uo9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Правильный код (ранние возвраты):","type":"unstyled","key":"88e8b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"93jos"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function processUser(user) {\n if (!user) return \"Пользователь не найден\";\n if (!user.isActive) return \"Аккаунт не активен\";\n if (!user.hasPermission) return \"Нет прав\";\n if (user.age < 18) return \"Возраст меньше 18\";\n if (!user.verified) return \"Требуется верификация\";\n \n return \"Доступ разрешён\";\n}","type":"unstyled","key":"5ncg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.2 Вложенные тернарники","type":"header-three","key":"5le51"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9db5t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"ITALIC"},{"length":17,"offset":89,"style":"ITALIC"},{"length":16,"offset":197,"style":"ITALIC"}],"text":"// Код ниндзя (угадай, что будет)\nconst result = a > b ? a > c ? a : c : b > c ? b : c;\n\n// Правильный код\nlet result;\nif (a > b && a > c) result = a;\nelse if (b > c) result = b;\nelse result = c;\n\n// Или ещё проще\nconst result = Math.max(a, b, c);","type":"unstyled","key":"blmp8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. Побочные эффекты в тени","type":"header-two","key":"8qal6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниндзя любит, когда функция делает больше, чем обещает.","type":"unstyled","key":"8hdfn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.1 Функция-сюрприз","type":"header-three","key":"2tq42"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"a9hg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"ITALIC"},{"length":11,"offset":113,"style":"ITALIC"},{"length":51,"offset":159,"style":"ITALIC"}],"text":"// Код ниндзя (меняет глобальную переменную)\nlet globalCounter = 0;\n\nfunction process(data) {\n globalCounter++; // Сюрприз!\n return data.map(x => x * 2);\n}\n\n// Кто бы мог подумать, что process меняет счётчик?","type":"unstyled","key":"2g1vb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Правильный код (чистая функция):","type":"unstyled","key":"cn0km"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"c447"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":59,"style":"ITALIC"}],"text":"function process(data) {\n return data.map(x => x * 2);\n}\n\n// Счётчик увеличиваем явно\nlet callCount = 0;\ncallCount++;\nprocess(data);","type":"unstyled","key":"fvbpi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.2 Мутация аргументов","type":"header-three","key":"9vs9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2jbu0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"ITALIC"},{"length":12,"offset":99,"style":"ITALIC"},{"length":26,"offset":214,"style":"ITALIC"}],"text":"// Код ниндзя (изменяет исходный массив)\nfunction addItem(items, newItem) {\n items.push(newItem); // Мутирует!\n return items;\n}\n\nconst myList = [1, 2, 3];\nconst newList = addItem(myList, 4);\nconsole.log(myList); // [1, 2, 3, 4] (сюрприз!)","type":"unstyled","key":"94uk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Правильный код (копия):","type":"unstyled","key":"44ish"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9fhg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":151,"style":"ITALIC"}],"text":"function addItem(items, newItem) {\n return [...items, newItem];\n}\n\nconst myList = [1, 2, 3];\nconst newList = addItem(myList, 4);\nconsole.log(myList); // [1, 2, 3] (не изменился)","type":"unstyled","key":"684f9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. Неявные преобразования (игра в угадайку)","type":"header-two","key":"4jt03"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниндзя обожает == и неявные преобразования. Это создаёт атмосферу тайны.","type":"unstyled","key":"5b3c0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.1 Сравнение с подвохом","type":"header-three","key":"da61v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5sgdh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"},{"length":42,"offset":36,"style":"ITALIC"},{"length":18,"offset":82,"style":"ITALIC"},{"length":7,"offset":125,"style":"ITALIC"},{"length":7,"offset":159,"style":"ITALIC"},{"length":7,"offset":191,"style":"ITALIC"}],"text":"// Код ниндзя\nif (value == \"1\") {\n // Сработает для 1, \"1\", true, [1], и т.д.\n}\n\n// Что здесь true?\nif ([] == false) {} // true\nif (null == undefined) {} // true\nif (\" \\t\\n\" == 0) {} // true","type":"unstyled","key":"9dfj4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Правильный код (явность):","type":"unstyled","key":"61d3b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"20tkh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":23,"style":"ITALIC"},{"length":33,"offset":51,"style":"ITALIC"}],"text":"if (value === \"1\") {\n // Только для строки \"1\"\n}\n\n// Если нужно несколько вариантов\nif (value === \"1\" || value === 1) {}","type":"unstyled","key":"1gi4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.2 Сложение с разными типами","type":"header-three","key":"f05l1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7oh79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"},{"length":43,"offset":40,"style":"ITALIC"},{"length":16,"offset":85,"style":"ITALIC"},{"length":46,"offset":102,"style":"ITALIC"}],"text":"// Код ниндзя\nlet result = \"5\" + 3 - 2;\n// Чему равно? 51? 6? 53-2=51? или 5+3-2=6?\n\n// Правильно: 51\n// Сначала \"5\" + 3 = \"53\", потом \"53\" - 2 = 51","type":"unstyled","key":"d1m30"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":"Правильный код (явные преобразования):","type":"unstyled","key":"2m919"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7a97p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":70,"style":"ITALIC"}],"text":"const str = \"5\";\nconst num = 3;\nconst result = Number(str) + num - 2; // 6","type":"unstyled","key":"6mvio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Инструментарий ниндзя (опасные техники)","type":"header-two","key":"bq78v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.1 continue на сложных условиях","type":"header-three","key":"5t52l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ei46o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"ITALIC"},{"length":38,"offset":207,"style":"ITALIC"}],"text":"// Код ниндзя (попробуй понять логику)\nfor (let i = 0; i < 100; i++) {\n if (i % 2 === 0) continue;\n if (i % 3 === 0) continue;\n if (i % 5 === 0) continue;\n if (i % 7 === 0) continue;\n console.log(i);\n}\n// Выводит простые числа? Не совсем...","type":"unstyled","key":"8vsn8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Правильный код:","type":"unstyled","key":"1154e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2jgi1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const isPrime = (n) => {\n for (let i = 2; i < n; i++) {\n if (n % i === 0) return false;\n }\n return n > 1;\n};\n\nfor (let i = 0; i < 100; i++) {\n if (isPrime(i)) {\n console.log(i);\n }\n}","type":"unstyled","key":"6d7lm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.2 Деструктуризация с переименованием в зло","type":"header-three","key":"5gt4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5ei5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"ITALIC"},{"length":33,"offset":71,"style":"ITALIC"}],"text":"// Код ниндзя (переименовывает всё)\nconst { a: x, b: y, c: z } = obj;\n\n// Кто помнит, что такое a, b, c?","type":"unstyled","key":"fd0p7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Правильный код (осмысленные имена):","type":"unstyled","key":"fvssm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"20jue"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const { name: userName, age: userAge, city: userCity } = user;","type":"unstyled","key":"6dcjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.3 Цепочки методов без форматирования","type":"header-three","key":"52cma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5rop0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"ITALIC"},{"length":36,"offset":108,"style":"ITALIC"}],"text":"// Код ниндзя (одна строка)\nconst result = users.filter(u => u.active).map(u => u.name).sort().join(\", \");\n\n// Правильный код (читаемая цепочка)\nconst result = users\n .filter(user => user.active)\n .map(user => user.name)\n .sort()\n .join(\", \");","type":"unstyled","key":"fpm9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. \"Умные\" трюки, которые бесят коллег","type":"header-two","key":"aj8ag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.1 Побитовые операторы для округления","type":"header-three","key":"7nqdq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4fk69"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"ITALIC"},{"length":5,"offset":62,"style":"ITALIC"},{"length":48,"offset":69,"style":"ITALIC"},{"length":15,"offset":119,"style":"ITALIC"}],"text":"// Код ниндзя (экономия 3 символов)\nconst rounded = ~~12.345; // 12\n\n// Ниндзя гордится: \"Я знаю побитовые операции!\"\n\n// Понятный код\nconst rounded = Math.floor(12.345);","type":"unstyled","key":"cltgv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.2 Использование запятой","type":"header-three","key":"ct0ni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"cdirp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"ITALIC"},{"length":8,"offset":70,"style":"ITALIC"},{"length":10,"offset":80,"style":"ITALIC"},{"length":24,"offset":136,"style":"ITALIC"}],"text":"// Код ниндзя (одна строка - много действий)\nlet a = (1, 2, 3, 4, 5); // a = 5\n\n// В цикле\nfor (let i = 0, j = 10; i < j; i++, j--) {}\n\n// Понятно только ниндзя","type":"unstyled","key":"f1ngh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Правильный код: не используйте оператор запятой там, где можно обойтись без него.","type":"unstyled","key":"d79v9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.3 Инкремент в сложных выражениях","type":"header-three","key":"1nqhs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2m4ev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"},{"length":27,"offset":56,"style":"ITALIC"},{"length":23,"offset":84,"style":"ITALIC"}],"text":"// Код ниндзя\nlet i = 0;\nlet result = i++ + ++i + i--;\n\n// Чему равно? (спойлер: 4)\n// Но зачем так писать?","type":"unstyled","key":"ffiqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Правильный код: инкремент на отдельной строке.","type":"unstyled","key":"6nl2b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"6jolr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let i = 0;\ni++;\nlet result = i + i;\ni--;","type":"unstyled","key":"dcqe3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Код-ниндзя в действии (реальные примеры)","type":"header-two","key":"aop5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.1 Функция, которая делает всё","type":"header-three","key":"etn0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1kh4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"ITALIC"},{"length":12,"offset":73,"style":"ITALIC"},{"length":17,"offset":110,"style":"ITALIC"},{"length":9,"offset":158,"style":"ITALIC"},{"length":13,"offset":211,"style":"ITALIC"},{"length":8,"offset":252,"style":"ITALIC"},{"length":13,"offset":299,"style":"ITALIC"},{"length":14,"offset":330,"style":"ITALIC"},{"length":12,"offset":363,"style":"ITALIC"},{"length":10,"offset":393,"style":"ITALIC"}],"text":"// Код ниндзя (100 строк, одна функция)\nfunction doEverything(param) {\n // валидация\n if (!param) return;\n // преобразование\n let x = param.split(',');\n // логика\n for (let i = 0; i < x.length; i++) {\n // ещё логика\n if (x[i] > 10) {\n // и ещё\n someFunction(x[i]);\n }\n }\n // сохранение\n saveToDB(x);\n // уведомление\n sendEmail(x);\n // рендеринг\n renderUI(x);\n // возврат\n return x;\n}","type":"unstyled","key":"aj4cm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"BOLD"}],"text":"Правильный код (разделение ответственности):","type":"unstyled","key":"83o52"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dp9ah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function processUserInput(input) {\n const validated = validateInput(input);\n if (!validated) return null;\n \n const transformed = transformData(validated);\n await saveToDatabase(transformed);\n await notifyUser(transformed);\n renderUI(transformed);\n \n return transformed;\n}","type":"unstyled","key":"8uv5p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.2 Класс-монстр","type":"header-three","key":"9rsr3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"c0btf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"ITALIC"},{"length":23,"offset":56,"style":"ITALIC"},{"length":6,"offset":196,"style":"ITALIC"}],"text":"// Код ниндзя (всё в одном классе)\nclass SuperClass {\n // 50 методов, включая:\n validateEmail() {}\n saveToDatabase() {}\n renderButton() {}\n calculateTax() {}\n sendSMS() {}\n parseCSV() {}\n // ...\n}","type":"unstyled","key":"4gulg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Правильный код (разделение):","type":"unstyled","key":"9tcse"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8r5ri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"class EmailValidator {}\nclass DatabaseService {}\nclass ButtonRenderer {}\nclass TaxCalculator {}\nclass NotificationService {}\nclass CSVParser {}","type":"unstyled","key":"d9293"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Как распознать ниндзя в команде","type":"header-two","key":"78v08"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Признаки:","type":"unstyled","key":"bs9l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переменные: a, b, c, d, e, f, g...","type":"unordered-list-item","key":"bgqtd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Функции: doSomething(), process(), handle(), run()","type":"unordered-list-item","key":"706gr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Комментарии отсутствуют или содержат только // fix this later","type":"unordered-list-item","key":"127hf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Функции длиннее 100 строк","type":"unordered-list-item","key":"22doa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вложенность > 3 уровней","type":"unordered-list-item","key":"1lj74"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование == вместо ===","type":"unordered-list-item","key":"9u6lj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Магические числа по всему коду","type":"unordered-list-item","key":"cvh1e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Что делать, если вы ниндзя:","type":"unstyled","key":"c2vtb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перестаньте доказывать, что вы умнее всех","type":"ordered-list-item","key":"7r7b4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начните писать код для людей","type":"ordered-list-item","key":"oh7f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте линтеры и форматтеры","type":"ordered-list-item","key":"53slc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Просите коллег делать code review","type":"ordered-list-item","key":"5bs92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переписывайте старый код, когда его сложно понять","type":"ordered-list-item","key":"e0gt9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 11. Лечение ниндзя-кода","type":"header-two","key":"a4is0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.1 Линтеры - ваше спасение","type":"header-three","key":"19evu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"json","type":"unstyled","key":"etm62"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{\n \"rules\": {\n \"no-magic-numbers\": \"warn\",\n \"id-length\": [\"error\", { \"min\": 2 }],\n \"max-depth\": [\"error\", 3],\n \"max-lines-per-function\": [\"warn\", 30],\n \"complexity\": [\"error\", 10]\n }\n}","type":"unstyled","key":"2km4d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.2 Code review","type":"header-three","key":"1mm61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждый PR должен проходить ревью. Если reviewer не понял код - ниндзя проиграл.","type":"unstyled","key":"6g0ea"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.3 Рефакторинг","type":"header-three","key":"8f0kn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Постепенно переписывайте сложные участки. Одна маленькая функция в день - и через месяц код станет читаемым.","type":"unstyled","key":"g6td"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест анти-ниндзя","type":"header-two","key":"b720g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Код читают люди - пишите для человека, который будет поддерживать ваш код через год.","type":"ordered-list-item","key":"aem0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Имена имеют значение - хорошее имя заменяет комментарий.","type":"ordered-list-item","key":"2de4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Простота - высшее мастерство - если код можно написать проще, напишите проще.","type":"ordered-list-item","key":"7rat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Явность лучше неявности - используйте ===, явные преобразования, понятные условия.","type":"ordered-list-item","key":"ajvm5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Короткие функции - легче тестировать, отлаживать, понимать.","type":"ordered-list-item","key":"fp8h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Комментируйте \"почему\" - что понятно из кода.","type":"ordered-list-item","key":"9fkdg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Будьте предсказуемы - никаких побочных эффектов, мутации аргументов, сюрпризов.","type":"ordered-list-item","key":"4vgbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"Финальный тест (выберите правильный вариант):","type":"unstyled","key":"5jv2t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"cev1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"ITALIC"},{"length":17,"offset":49,"style":"ITALIC"}],"text":"// Вариант ниндзя\nconst x = (a,b) => a+b*2-3/4;\n\n// Вариант джедая\nfunction calculateDiscountedPrice(price, quantity) {\n const DISCOUNT = 2;\n const TAX_RATE = 0.75;\n const subtotal = price * quantity;\n const discount = DISCOUNT;\n const tax = subtotal * TAX_RATE;\n return subtotal - discount + tax;\n}","type":"unstyled","key":"74nrg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ответ очевиден.","type":"unstyled","key":"5h7gt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Помните: ниндзя-код - это не признак мастерства. Это признак неуверенности. Настоящий профессионал пишет код, который может понять любой. Потому что настоящая суперсила - это не умение писать сложный код, а умение делать сложные вещи простыми.","type":"unstyled","key":"b9c8t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"------------------------------------------------------------------------------------","type":"unstyled","key":"90pe0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"------------------------------------------------------------------------------------","type":"unstyled","key":"aac7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Охотники за багами: Полное руководство по автоматическому тестированию с Mocha (и почему вы больше никогда не напишете console.log для проверки)","type":"header-two","key":"38u5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы написали функцию. Она работает. Вы добавляете новую фичу. Старая ломается. Вы чините старую. Новая отваливается. Знакомо?","type":"unstyled","key":"43l5r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ручное тестирование - это игра в угадайку. Вы никогда не можете быть уверены, что изменения в одном месте не разнесли в щепки три других. Именно поэтому профессионалы пишут тесты.","type":"unstyled","key":"a7qgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добро пожаловать в мир Mocha - фреймворка, который превращает хаос регрессий в стройную систему зеленых галочек.","type":"unstyled","key":"77jbv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Что такое Mocha и зачем он нужен?","type":"header-two","key":"9k72q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":216,"style":"BOLD"}],"text":"Mocha - это тестовый фреймворк для JavaScript. Он работает везде: в браузере и в Node.js. Но сам по себе Mocha не умеет проверять результаты. Для этого нужны assertion-библиотеки, и главная звезда в этой вселенной - Chai .","type":"unstyled","key":"edpts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Связка Mocha + Chai - это золотой стандарт тестирования в JavaScript-сообществе. Mocha организует и запускает тесты, а Chai предоставляет красивые и понятные проверки .","type":"unstyled","key":"f32th"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"cb7mn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"ITALIC"},{"length":39,"offset":83,"style":"ITALIC"},{"length":44,"offset":187,"style":"ITALIC"}],"text":"// Mocha говорит: \"Опиши, что тестируем\"\ndescribe(\"Калькулятор\", function() {\n \n // Mocha говорит: \"Вот конкретный тест\"\n it(\"должен правильно складывать числа\", function() {\n \n // Chai проверяет: \"Результат должен быть 5\"\n expect(2 + 3).to.equal(5);\n });\n});","type":"unstyled","key":"bbmar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему BDD?","type":"header-three","key":"7f9rf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":37,"style":"BOLD"}],"text":"Mocha из коробки поддерживает подход Behavior Driven Development (разработка через поведение). BDD - это три в одном: тесты, документация и примеры использования .","type":"unstyled","key":"ak57u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда вы пишете:","type":"unstyled","key":"6hco5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"35d2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"describe(\"Возведение в степень\", function() {\n it(\"2 в степени 3 должно равняться 8\", function() {\n expect(pow(2, 3)).to.equal(8);\n });\n});","type":"unstyled","key":"e5a13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":41,"style":"BOLD"}],"text":"Вы не просто проверяете код. Вы создаете живую документацию, которую любой разработчик может прочитать и понять, что должна делать функция .","type":"unstyled","key":"bpt10"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. Первые шаги: Настройка Mocha","type":"header-two","key":"7d4v2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка","type":"header-three","key":"bgo20"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самый простой способ - установить Mocha локально в проект :","type":"unstyled","key":"a3lks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bash","type":"unstyled","key":"a9oif"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm install --save-dev mocha chai","type":"unstyled","key":"chner"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простая HTML-страница для тестов (браузер)","type":"header-three","key":"bv8rv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы тестируете фронтенд-код, вам понадобится HTML-страница :","type":"unstyled","key":"22n8c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"di2gc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":52,"offset":57,"style":"ITALIC"},{"length":25,"offset":174,"style":"ITALIC"},{"length":24,"offset":256,"style":"ITALIC"},{"length":38,"offset":514,"style":"ITALIC"},{"length":33,"offset":581,"style":"ITALIC"},{"length":23,"offset":660,"style":"ITALIC"},{"length":25,"offset":734,"style":"ITALIC"}],"text":"\n\n\n \n \n \n \n \n \n \n \n\n\n \n

\n\n \n \n \n \n \n \n \n \n\n","type":"unstyled","key":"1o4ah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запуск в Node.js","type":"header-three","key":"479r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для бэкенда достаточно выполнить в терминале :","type":"unstyled","key":"dllvr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bash","type":"unstyled","key":"88m8s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npx mocha","type":"unstyled","key":"70l8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Mocha автоматически найдет файлы в папке test с именами, оканчивающимися на .test.js или .spec.js.","type":"unstyled","key":"2kg03"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Анатомия теста: describe, it и assert","type":"header-two","key":"93s1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"describe - Группировка тестов","type":"header-three","key":"e1ctc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"describe создает \"корзину\" для связанных тестов. Их можно вкладывать друг в друга :","type":"unstyled","key":"37nnv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dabbm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":92,"style":"ITALIC"},{"length":22,"offset":164,"style":"ITALIC"}],"text":"describe(\"Математические операции\", function() {\n \n describe(\"Сложение\", function() {\n // тесты для сложения\n });\n \n describe(\"Вычитание\", function() {\n // тесты для вычитания\n });\n});","type":"unstyled","key":"7htd7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"it - Отдельный тест","type":"header-three","key":"e9eqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"it - это конкретная проверка. Первый аргумент - человекочитаемое описание, второй - функция с тестом :","type":"unstyled","key":"2tspl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"35hm9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"it(\"должен возвращать 4 при сложении 2 и 2\", function() {\n expect(add(2, 2)).to.equal(4);\n});","type":"unstyled","key":"7j4ue"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"expect, assert, should - Три лица Chai","type":"header-three","key":"881uf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Chai предлагает три стиля assertions :","type":"unstyled","key":"aqlfo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"1. expect (BDD-стиль) - самый читаемый:","type":"unstyled","key":"dc7op"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"d65hh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"expect(result).to.equal(5);\nexpect(user).to.be.an('object').that.has.property('name');","type":"unstyled","key":"3u1hs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"2. assert (классический стиль):","type":"unstyled","key":"2m4qf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3sk0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"assert.equal(result, 5);\nassert.typeOf(user, 'object');","type":"unstyled","key":"7o28k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"3. should (стиль, расширяющий прототипы):","type":"unstyled","key":"63i6u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"432pu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"result.should.equal(5);\nuser.should.be.an('object');","type":"unstyled","key":"flhjp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. Тестируем асинхронный код","type":"header-two","key":"jg23"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Асинхронность - главная боль в тестировании. Mocha предлагает три способа справиться с ней .","type":"unstyled","key":"eqf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 1: Callback done","type":"header-three","key":"bco1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавьте параметр done в функцию теста. Mocha будет ждать, пока вы его вызовете :","type":"unstyled","key":"3u3dj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"83ijg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":176,"style":"ITALIC"}],"text":"describe(\"Асинхронная операция\", function() {\n it(\"должна выполниться за 1 секунду\", function(done) {\n setTimeout(function() {\n expect(true).to.be.true;\n done(); // Говорим Mocha: \"Всё, я закончил\"\n }, 1000);\n });\n});","type":"unstyled","key":"b6b32"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":3,"style":"BOLD"}],"text":"⚠️ Важно: Если вы забудете вызвать done, тест упадет по таймауту .","type":"unstyled","key":"5o2k0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 2: Возвращаем Promise","type":"header-three","key":"e51h0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если ваша функция возвращает Promise, просто верните его из теста :","type":"unstyled","key":"66lb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9d914"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"it(\"должен загрузить пользователя\", function() {\n return fetchUser(1).then(user => {\n expect(user.name).to.equal(\"Анна\");\n });\n});","type":"unstyled","key":"5v8ah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 3: Async/Await (современный и красивый)","type":"header-three","key":"1v40b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самый читаемый способ - использовать async/await :","type":"unstyled","key":"7p4ls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"cskiv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"it(\"должен загрузить пользователя\", async function() {\n const user = await fetchUser(1);\n expect(user.name).to.equal(\"Анна\");\n});","type":"unstyled","key":"dqnri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. Хуки: Подготовка и очистка","type":"header-two","key":"70sim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часто перед каждым тестом нужно что-то настроить (создать объект, подключиться к БД), а после - почистить. Для этого есть хуки :","type":"unstyled","key":"clfr6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9fmrg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":56,"style":"ITALIC"},{"length":41,"offset":185,"style":"ITALIC"},{"length":34,"offset":300,"style":"ITALIC"},{"length":34,"offset":455,"style":"ITALIC"}],"text":"describe(\"База данных пользователей\", function() {\n \n // Выполняется один раз ПЕРЕД всеми тестами в describe\n before(function() {\n console.log(\"Подключаемся к БД...\");\n });\n \n // Выполняется один раз ПОСЛЕ всех тестов\n after(function() {\n console.log(\"Отключаемся от БД...\");\n });\n \n // Выполняется ПЕРЕД КАЖДЫМ тестом\n beforeEach(function() {\n console.log(\"Создаём свежего пользователя\");\n this.user = new User(\"Анна\");\n });\n \n // Выполняется ПОСЛЕ КАЖДОГО теста\n afterEach(function() {\n console.log(\"Удаляем пользователя\");\n delete this.user;\n });\n \n it(\"пользователь имеет имя\", function() {\n expect(this.user.name).to.equal(\"Анна\");\n });\n});","type":"unstyled","key":"ageev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. Реальный пример: Разработка через тесты (TDD)","type":"header-two","key":"fmh3b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте разберем классический сценарий разработки функции возведения в степень pow(x, n) .","type":"unstyled","key":"64hak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 1: Пишем спецификацию (тесты)","type":"header-three","key":"3bfon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"grdg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"describe(\"pow\", function() {\n \n it(\"2 в степени 3 = 8\", function() {\n expect(pow(2, 3)).to.equal(8);\n });\n \n it(\"3 в степени 4 = 81\", function() {\n expect(pow(3, 4)).to.equal(81);\n });\n \n it(\"Любое число в степени 0 = 1\", function() {\n expect(pow(5, 0)).to.equal(1);\n });\n});","type":"unstyled","key":"4b116"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 2: Запускаем тесты (они красные)","type":"header-three","key":"4ofvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пока функции pow нет - тесты падают. Это нормально.","type":"unstyled","key":"akpfh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 3: Пишем минимальную реализацию","type":"header-three","key":"5fkvp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"646ur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function pow(x, n) {\n if (n === 0) return 1;\n let result = 1;\n for (let i = 0; i < n; i++) {\n result *= x;\n }\n return result;\n}","type":"unstyled","key":"bdhcb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 4: Запускаем снова (зеленые тесты)","type":"header-three","key":"1qf6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ура! Все тесты проходят.","type":"unstyled","key":"43m6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 5: Добавляем больше тестов","type":"header-three","key":"ep0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fluob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"it(\"для отрицательных n возвращает NaN\", function() {\n expect(pow(2, -1)).to.be.NaN;\n});","type":"unstyled","key":"esic4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новый тест падает. Возвращаемся к реализации и добавляем обработку .","type":"unstyled","key":"5hifm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Продвинутые техники","type":"header-two","key":"5k49t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тестирование ошибок","type":"header-three","key":"6tji4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"nmrc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"it(\"должен бросить ошибку при пустом имени\", function() {\n expect(() => {\n new User(\"\");\n }).to.throw(Error, \"Имя не может быть пустым\");\n});","type":"unstyled","key":"8k3ft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Исключение тестов (skip) и запуск одного (only)","type":"header-three","key":"auaks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"6gim4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"},{"length":6,"offset":78,"style":"ITALIC"},{"length":54,"offset":90,"style":"ITALIC"},{"length":6,"offset":205,"style":"ITALIC"}],"text":"// Пропустить этот тест\nit.skip(\"этот тест временно не нужен\", function() {\n // ...\n});\n\n// Запустить только этот тест (игнорировать остальные)\nit.only(\"я хочу проверить только это место\", function() {\n // ...\n});","type":"unstyled","key":"deo22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа с таймаутами","type":"header-three","key":"2nmup"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для медленных операций можно увеличить таймаут :","type":"unstyled","key":"a5krg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"chjao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":72,"style":"ITALIC"}],"text":"it(\"должен загрузить большой файл\", function() {\n this.timeout(10000); // 10 секунд\n return loadLargeFile();\n});","type":"unstyled","key":"7gam"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. Mocha и TypeScript","type":"header-two","key":"ad5ia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Mocha отлично работает с TypeScript. Установите ts-node и настройте запуск:","type":"unstyled","key":"75bmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bash","type":"unstyled","key":"7v6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm install --save-dev typescript ts-node @types/mocha @types/chai","type":"unstyled","key":"56lha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запуск:","type":"unstyled","key":"7pl8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bash","type":"unstyled","key":"4sjvg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npx mocha --require ts-node/register tests/**/*.spec.ts","type":"unstyled","key":"1915m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Интеграция с IDE","type":"header-two","key":"6n4sk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Современные IDE (WebStorm, VS Code) отлично интегрируются с Mocha :","type":"unstyled","key":"1gfhk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Запуск теста - зеленая стрелка рядом с describe или it","type":"unordered-list-item","key":"7mkcm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Отладка - можно поставить брейкпоинт прямо в тесте и запустить его в режиме дебага","type":"unordered-list-item","key":"63rqq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Покрытие кода - специальные плагины показывают, какие строки не покрыты тестами","type":"unordered-list-item","key":"60tlo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Жизненный цикл выполнения тестов","type":"header-two","key":"7j9sc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Понимание того, как Mocha выполняет тесты, помогает избежать странных багов :","type":"unstyled","key":"7al92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Mocha загружает все файлы с тестами","type":"ordered-list-item","key":"dco3b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выполняются before-хуки","type":"ordered-list-item","key":"ffojs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для каждого теста:\nВыполняется beforeEach\nЗапускается сам тест (it)\nВыполняется afterEach","type":"ordered-list-item","key":"dohqn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В конце - after-хуки","type":"ordered-list-item","key":"c48md"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот порядок гарантирует, что каждый тест начинается с чистого состояния.","type":"unstyled","key":"b2t95"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест тестировщика","type":"header-two","key":"7hc5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Тесты - это документация - они рассказывают историю вашего кода.","type":"ordered-list-item","key":"43lur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Красный → Зеленый → Рефакторинг - золотое правило TDD.","type":"ordered-list-item","key":"513a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Один тест - одна проверка - так проще понять, что именно сломалось .","type":"ordered-list-item","key":"eitmp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Не забывайте про асинхронность - используйте async/await или возвращайте Promise.","type":"ordered-list-item","key":"3ocpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Хуки для чистоты - beforeEach и afterEach сохраняют тесты независимыми.","type":"ordered-list-item","key":"t54f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Зеленый - не значит \"всё работает\" - это значит \"всё, что мы проверили, работает\".","type":"ordered-list-item","key":"304uq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"Финальный тест: что выведет этот код?","type":"unstyled","key":"1mhfu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ae5pr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"describe(\"Счётчик\", function() {\n let counter;\n \n beforeEach(function() {\n counter = 0;\n });\n \n it(\"увеличивается на 1\", function() {\n counter++;\n expect(counter).to.equal(1);\n });\n \n it(\"начинается с 0 в каждом тесте\", function() {\n expect(counter).to.equal(0);\n });\n});","type":"unstyled","key":"f6mim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Ответ: Оба теста пройдут. beforeEach создает новый counter = 0 перед каждым it. Тесты не влияют друг на друга.","type":"unstyled","key":"f86fd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Mocha - это не просто инструмент. Это дисциплина, которая делает ваш код надежнее, а вас - увереннее. Пишите тесты, запускайте их, и пусть все ваши сборки будут зелёными","type":"unstyled","key":"3dgji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"---------------------------------------------------------------------------------","type":"unstyled","key":"ce8c0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"---------------------------------------------------------------------------------","type":"unstyled","key":"c2t88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мосты между эпохами: Искусство полифилов (или как запустить ES2024 в Internet Explorer)","type":"header-two","key":"5n54s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте: вы написали красивый современный код с optional chaining, nullish coalescing и методами массивов, о которых в 2015 году только мечтали. Вы горды собой. Вы открываете проект в старом браузере... и всё падает. Чёрный экран. Ошибки в консоли.","type":"unstyled","key":"5rbdt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Знакомо?","type":"unstyled","key":"438f0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полифилы - это спасательный круг. Это кусочки кода, которые добавляют современные возможности в старые браузеры. Они - причина, почему мы можем использовать Array.prototype.includes и не проверять, поддерживает ли его браузер.","type":"unstyled","key":"ov4m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добро пожаложаловать в мир, где прошлое и будущее уживаются в одном проекте.","type":"unstyled","key":"385k5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Что такое полифил и почему он так называется?","type":"header-two","key":"a0un4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Полифил (polyfill) - это код, который \"заполняет\" (fill) пробелы (poly) в старых браузерах, добавляя отсутствующие функции.","type":"unstyled","key":"ap9s8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Термин придумал Реми Шарп, вдохновившись шпаклёвкой для стен (Polyfilla - бренд шпаклёвки). Как шпаклёвка скрывает трещины в стене, так полифил скрывает недостатки браузера.","type":"unstyled","key":"edsh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"f8hsd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"ITALIC"},{"length":21,"offset":79,"style":"ITALIC"}],"text":"// Если браузер не понимает метод .includes\nif (!Array.prototype.includes) {\n // Добавляем его сами\n Array.prototype.includes = function(searchElement) {\n return this.indexOf(searchElement) !== -1;\n };\n}","type":"unstyled","key":"cat79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого кода даже Internet Explorer 11 поймёт, что такое [1, 2, 3].includes(2).","type":"unstyled","key":"2n31i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. Полифил vs Транспилятор: В чём разница?","type":"header-two","key":"2b90n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эти два понятия часто путают, но они решают разные задачи:","type":"unstyled","key":"6b3vq"},{"data":{"image":{"id":"69dad9b9d250b343c4027dcc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"anscj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6o582"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Аналогия: Транспилятор - переводчик с французского на русский. Полифил - это когда у собеседника нет слова \"компьютер\", и вы объясняете пальцами.","type":"unstyled","key":"9frmt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"В реальной жизни Babel и полифилы работают в паре:","type":"unstyled","key":"djmto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Babel переписывает современный синтаксис","type":"ordered-list-item","key":"a25ur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полифилы добавляют отсутствующие API","type":"ordered-list-item","key":"1n7gi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"asvak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"},{"length":57,"offset":56,"style":"ITALIC"},{"length":31,"offset":154,"style":"ITALIC"},{"length":25,"offset":186,"style":"ITALIC"}],"text":"// Исходный код\nconst hasItem = [1, 2, 3].includes(2);\n\n// После Babel (синтаксис не изменился, includes остался)\nconst hasItem = [1, 2, 3].includes(2);\n\n// Без полифила в IE11 → ошибка\n// С полифилом → работает","type":"unstyled","key":"fdbhm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Самые популярные полифилы (и зачем они нужны)","type":"header-two","key":"4540s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.1 Promise - король асинхронности","type":"header-three","key":"aff54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Старые браузеры не знают, что такое Promise:","type":"unstyled","key":"5li1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1aujv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":25,"style":"ITALIC"},{"length":45,"offset":66,"style":"ITALIC"},{"length":16,"offset":115,"style":"ITALIC"}],"text":"if (!window.Promise) {\n // Нужен полифил (например, от Google)\n // Обычно используют библиотеку 'es6-promise'\n}\n\n// Использование\nfetch('/api/data')\n .then(response => response.json())\n .catch(error => console.error(error));","type":"unstyled","key":"8eu6n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.2 Object.assign - копирование объектов","type":"header-three","key":"1oj29"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"c6mka"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (!Object.assign) {\n Object.assign = function(target, ...sources) {\n for (let source of sources) {\n for (let key in source) {\n if (source.hasOwnProperty(key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n}","type":"unstyled","key":"6im29"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.3 Array.prototype.includes - проверка наличия","type":"header-three","key":"di78i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"310h7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (!Array.prototype.includes) {\n Array.prototype.includes = function(searchElement, fromIndex) {\n if (this == null) throw new TypeError('\"this\" is null or not defined');\n const o = Object(this);\n const len = o.length >>> 0;\n if (len === 0) return false;\n let n = fromIndex | 0;\n let k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n while (k < len) {\n if (o[k] === searchElement) return true;\n k++;\n }\n return false;\n };\n}","type":"unstyled","key":"d5s7c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.4 String.prototype.startsWith / endsWith","type":"header-three","key":"ahhvg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"cqmc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (!String.prototype.startsWith) {\n String.prototype.startsWith = function(searchString, position) {\n position = position || 0;\n return this.substring(position, position + searchString.length) === searchString;\n };\n}","type":"unstyled","key":"42bor"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.5 Array.from - создание массива из итерируемых объектов","type":"header-three","key":"fcjnf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5lh0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (!Array.from) {\n Array.from = function(arrayLike, mapFn, thisArg) {\n const items = [];\n for (let i = 0; i < arrayLike.length; i++) {\n items.push(arrayLike[i]);\n }\n if (mapFn) {\n return items.map(mapFn, thisArg);\n }\n return items;\n };\n}","type":"unstyled","key":"5q9vl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. Как НЕ надо писать полифилы (источник багов)","type":"header-two","key":"95hk9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.1 Не проверяйте существование неправильно","type":"header-three","key":"8hmpu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1vrrg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"ITALIC"},{"length":9,"offset":117,"style":"ITALIC"}],"text":"// Плохо (использует неправильное условие)\nif (!Array.includes) {\n Array.prototype.includes = function() { ... }\n}\n\n// Хорошо\nif (!Array.prototype.includes) {\n Array.prototype.includes = function() { ... }\n}","type":"unstyled","key":"9t6s2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.2 Не добавляйте полифилы, которые уже есть","type":"header-three","key":"8shre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4d02"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":62,"offset":0,"style":"ITALIC"},{"length":28,"offset":108,"style":"ITALIC"},{"length":9,"offset":141,"style":"ITALIC"},{"length":41,"offset":228,"style":"ITALIC"}],"text":"// Плохо (затирает родную, возможно, более быструю реализацию)\nArray.prototype.map = function(callback) {\n // своя медленная реализация\n};\n\n// Хорошо\nif (!Array.prototype.map) {\n Array.prototype.map = function(callback) {\n // своя реализация только если нет родной\n };\n}","type":"unstyled","key":"8b8sg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.3 Не ломайте спецификацию","type":"header-three","key":"cpg88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"84g7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"ITALIC"},{"length":28,"offset":156,"style":"ITALIC"},{"length":29,"offset":193,"style":"ITALIC"},{"length":39,"offset":326,"style":"ITALIC"}],"text":"// Плохо (не соответствует спецификации)\nif (!Array.prototype.includes) {\n Array.prototype.includes = function(item) {\n return this.indexOf(item) > -1; // Не обрабатывает fromIndex\n };\n}\n\n// Хорошо (полная реализация)\nif (!Array.prototype.includes) {\n Array.prototype.includes = function(searchElement, fromIndex) {\n // полная реализация с учётом fromIndex\n };\n}","type":"unstyled","key":"fgdud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. Стратегии подключения полифилов","type":"header-two","key":"cjion"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.1 Всё и сразу (просто, но много кода)","type":"header-three","key":"2srmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"femc4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"ITALIC"}],"text":"\n","type":"unstyled","key":"fi3s0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.2 Условная загрузка (только для старых браузеров)","type":"header-three","key":"an56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"bp14a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"ITALIC"},{"length":12,"offset":38,"style":"ITALIC"}],"text":"\n","type":"unstyled","key":"660gl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.3 Современный подход: feature detection","type":"header-three","key":"clkpq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверяем поддержку и загружаем только то, что нужно:","type":"unstyled","key":"38l83"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3rofh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"async function loadPolyfills() {\n const polyfills = [];\n \n if (!window.Promise) polyfills.push('promise');\n if (!Object.assign) polyfills.push('object-assign');\n if (!Array.prototype.includes) polyfills.push('array-includes');\n \n if (polyfills.length) {\n await import(`https://polyfill.io/v3/polyfill.min.js?features=${polyfills.join(',')}`);\n }\n}\n\nloadPolyfills();","type":"unstyled","key":"f27at"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. Популярные библиотеки полифилов","type":"header-two","key":"etevg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.1 core-js (самая популярная)","type":"header-three","key":"6asmq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это стандарт де-факто. Используется в Babel, Webpack и многих других инструментах.","type":"unstyled","key":"7f6l5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bash","type":"unstyled","key":"em949"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm install core-js","type":"unstyled","key":"7rest"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"crfvk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"ITALIC"},{"length":32,"offset":110,"style":"ITALIC"}],"text":"// Подключение конкретных полифилов\nimport 'core-js/actual/array/includes';\nimport 'core-js/actual/promise';\n\n// Или всех сразу (но это много)\nimport 'core-js/actual';","type":"unstyled","key":"c7bua"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":11,"offset":4}],"inlineStyleRanges":[],"text":"6.2 Polyfill.io (сервис)","type":"header-three","key":"145aa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Умный сервис, который отдаёт только нужные полифилы под конкретный браузер.","type":"unstyled","key":"dq968"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"fusqc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"ITALIC"},{"length":58,"offset":103,"style":"ITALIC"}],"text":"\n\n\n","type":"unstyled","key":"1vale"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.3 Babel Polyfill (устаревший)","type":"header-three","key":"4hs09"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Раньше использовали @babel/polyfill, но теперь он объединился с core-js.","type":"unstyled","key":"iui8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bash","type":"unstyled","key":"b8adt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm install @babel/polyfill","type":"unstyled","key":"8aq9g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Пишем свой полифил: пошаговое руководство","type":"header-two","key":"4tl7i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Допустим, мы хотим добавить метод Array.prototype.last() (возвращает последний элемент массива).","type":"unstyled","key":"22r8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 1: Проверяем, нужен ли полифил","type":"header-three","key":"37p6o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4619c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":31,"style":"ITALIC"}],"text":"if (!Array.prototype.last) {\n // Добавляем\n}","type":"unstyled","key":"9fi2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 2: Пишем реализацию","type":"header-three","key":"61mt3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"54lsv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (!Array.prototype.last) {\n Array.prototype.last = function() {\n if (this.length === 0) {\n return undefined;\n }\n return this[this.length - 1];\n };\n}","type":"unstyled","key":"6fuv8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 3: Проверяем корректность","type":"header-three","key":"tim6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8vbpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"},{"length":4,"offset":56,"style":"ITALIC"},{"length":12,"offset":85,"style":"ITALIC"}],"text":"// Тест\nconst arr = [1, 2, 3];\nconsole.log(arr.last()); // 3\nconsole.log([].last()); // undefined","type":"unstyled","key":"7i70r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 4: Убеждаемся, что не ломаем существующий код","type":"header-three","key":"1hsof"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7eac0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"ITALIC"}],"text":"// Не изменяем поведение, если метод уже есть\nif (Array.prototype.last) {\n console.warn('Array.prototype.last уже существует');\n}","type":"unstyled","key":"7bh9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. Реальный кейс: Поддержка IE11 в 2024 году","type":"header-two","key":"ei3b7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Да, IE11 всё ещё существует. И вот минимальный набор полифилов для него:","type":"unstyled","key":"c2542"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"652lo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"ITALIC"},{"length":20,"offset":232,"style":"ITALIC"},{"length":32,"offset":268,"style":"ITALIC"}],"text":"// Самый необходимый минимум\nconst ie11Polyfills = [\n 'Promise',\n 'Object.assign',\n 'Array.from',\n 'Array.prototype.includes',\n 'Array.prototype.find',\n 'String.prototype.startsWith',\n 'String.prototype.includes',\n 'fetch', // отдельный полифил\n 'Symbol'\n];\n\n// Подключение через polyfill.io\nconst script = document.createElement('script');\nscript.src = `https://polyfill.io/v3/polyfill.min.js?features=${ie11Polyfills.join(',')}`;\ndocument.head.appendChild(script);","type":"unstyled","key":"9d8qm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Производительность и полифилы","type":"header-two","key":"1i4vp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.1 Нативные методы быстрее","type":"header-three","key":"a2mcs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7d83h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"ITALIC"},{"length":26,"offset":65,"style":"ITALIC"},{"length":22,"offset":95,"style":"ITALIC"},{"length":29,"offset":153,"style":"ITALIC"}],"text":"// Родная реализация (быстрая)\nif (Array.prototype.includes) {\n // Используем родной метод\n}\n\n// Полифил (медленнее)\nif (!Array.prototype.includes) {\n // Используем свою реализацию\n}","type":"unstyled","key":"e2lls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.2 Не полифильте то, что не нужно","type":"header-three","key":"1dolf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fssk2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"ITALIC"},{"length":25,"offset":62,"style":"ITALIC"}],"text":"// Плохо (тяжёлый полифил для всех)\nimport 'core-js/actual';\n\n// Хорошо (только нужное)\nimport 'core-js/actual/promise';\nimport 'core-js/actual/array/includes';","type":"unstyled","key":"72saj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.3 Используйте CDN с умом","type":"header-three","key":"256nj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"cemgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"ITALIC"}],"text":"\n","type":"unstyled","key":"b56a6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Полифилы в современных инструментах","type":"header-two","key":"bkgul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10.1 Babel с preset-env","type":"header-three","key":"ciskv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"json","type":"unstyled","key":"998dh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{\n \"presets\": [\n [\"@babel/preset-env\", {\n \"useBuiltIns\": \"usage\",\n \"corejs\": 3,\n \"targets\": \"> 0.25%, not dead\"\n }]\n ]\n}","type":"unstyled","key":"5sb6s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Опция \"useBuiltIns\": \"usage\" автоматически добавляет только нужные полифилы.","type":"unstyled","key":"6qrb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10.2 Webpack и core-js","type":"header-three","key":"5rku6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7ctjg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"ITALIC"}],"text":"// webpack.config.js\nmodule.exports = {\n entry: ['core-js/stable', './src/index.js']\n};","type":"unstyled","key":"c2g97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10.3 Vite и современные браузеры","type":"header-three","key":"4pgkl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vite по умолчанию нацелен на современные браузеры, но можно настроить:","type":"unstyled","key":"7te87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"cofcd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"ITALIC"}],"text":"// vite.config.js\nexport default {\n build: {\n target: 'es2015',\n polyfill: true\n }\n};","type":"unstyled","key":"4f5gd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 11. Ошибки при работе с полифилами","type":"header-two","key":"ctp38"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.1 Полифилы для глобальных объектов","type":"header-three","key":"5ktn5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"90ife"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"ITALIC"},{"length":35,"offset":69,"style":"ITALIC"}],"text":"// Плохо (ломает глобальный объект)\nwindow.Promise = function() {};\n\n// Хорошо (проверка и осторожность)\nif (!window.Promise) {\n window.Promise = MyPromiseImplementation;\n}","type":"unstyled","key":"7h5gr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.2 Полифилы, зависящие от других полифилов","type":"header-three","key":"ibl3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"bpp71"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"ITALIC"},{"length":17,"offset":157,"style":"ITALIC"},{"length":33,"offset":215,"style":"ITALIC"}],"text":"// Плохо (Promise может не существовать)\nif (!Array.prototype.includesAsync) {\n Array.prototype.includesAsync = async function(item) {\n await wait(100); // Promise нужен!\n return this.includes(item);\n };\n}\n\n// Хорошо (проверяем зависимости)\nif (window.Promise && !Array.prototype.includesAsync) {\n Array.prototype.includesAsync = async function(item) {\n await wait(100);\n return this.includes(item);\n };\n}","type":"unstyled","key":"94th8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.3 Полифилы, изменяющие прототипы встроенных объектов","type":"header-three","key":"80o7b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7b08s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"ITALIC"},{"length":33,"offset":130,"style":"ITALIC"}],"text":"// Спорно (могут быть конфликты)\nif (!Array.prototype.first) {\n Array.prototype.first = function() {\n return this[0];\n };\n}\n\n// Безопаснее (отдельная функция)\nfunction first(arr) {\n return arr[0];\n}","type":"unstyled","key":"f5bui"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 12. Будущее полифилов","type":"header-two","key":"9lfd4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С выходом новых версий ECMAScript необходимость в полифилах уменьшается:","type":"unstyled","key":"70rs6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Браузеры автоматически обновляются - Chrome, Firefox, Edge обновляются каждые 4-6 недель","type":"unordered-list-item","key":"5dg0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Поддержка старых браузеров падает - многие компании отказываются от IE11","type":"unordered-list-item","key":"3f666"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Современные инструменты - Vite, ESBuild работают с современным кодом","type":"unordered-list-item","key":"94b01"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но полифилы не исчезнут полностью:","type":"unstyled","key":"79m9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новые API (например, URLPattern, CompressionStream)","type":"unordered-list-item","key":"bn57a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нишевые браузеры (умные телевизоры, киоски, банкоматы)","type":"unordered-list-item","key":"ah066"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Корпоративные среды с замороженными версиями браузеров","type":"unordered-list-item","key":"dmm2r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест полифилов","type":"header-two","key":"3bv44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Проверяйте перед добавлением - if (!Object.assign) перед реализацией.","type":"ordered-list-item","key":"dtt5m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Не ломайте спецификацию - полифил должен вести себя как родной метод.","type":"ordered-list-item","key":"dib1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Загружайте только нужное - не тащите всё core-js ради одного метода.","type":"ordered-list-item","key":"3su0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Используйте feature detection - проверяйте поддержку, а не версию браузера.","type":"ordered-list-item","key":"ebsom"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":11,"offset":37}],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Доверяйте профессионалам - core-js и polyfill.io делают работу лучше.","type":"ordered-list-item","key":"2n05n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Тестируйте полифилы - они тоже могут содержать баги.","type":"ordered-list-item","key":"ft0fk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Помните о производительности - полифилы медленнее нативных реализаций.","type":"ordered-list-item","key":"bkb5q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Финальный тест (проверьте себя):","type":"unstyled","key":"d2m9b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"89k2b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"ITALIC"},{"length":48,"offset":89,"style":"ITALIC"}],"text":"// Что произойдёт в старом браузере без полифила?\nconst hasTwo = [1, 2, 3].includes(2);\n\n// Что произойдёт в старом браузере с полифилом?\nif (!Array.prototype.includes) {\n Array.prototype.includes = function(item) {\n return this.indexOf(item) !== -1;\n };\n}\nconst hasTwo = [1, 2, 3].includes(2);","type":"unstyled","key":"e59nf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Ответ: Без полифила - ошибка TypeError: [1,2,3].includes is not a function. С полифилом - true.","type":"unstyled","key":"7lfjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полифилы - это мост между прошлым и будущим JavaScript. Они позволяют писать современный код сегодня, не отказываясь от пользователей со старыми браузерами. Используйте их с умом, и ваш код будет работать везде. А когда старые браузеры уйдут в историю, полифилы можно будет просто удалить. Но до тех пор они остаются незаменимым инструментом в арсенале веб-разработчика.","type":"unstyled","key":"27lod"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e0q19"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"22qre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"xWrl3krLHh3m0M1wP8yi"}],"entityMap":{"0":{"data":{"href":"https://polyfill.io/","url":"https://polyfill.io/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://polyfill.io/","url":"https://polyfill.io/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}