Советы по улучшению кода

  1. Как назвать функцию?
// For showing loading spinner
function loading(){
loader.hidden = false
}
Вход в полноэкранный режим Выход из полноэкранного режима
// Even Comments are not necessary
function showLoadingSpinner(){
loader.hidden = false
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Назовите функцию с определенным действием.

  1. Рекурсивная функция может завести вас в бесконечный цикл ошибок
function getdatafromAPI(){
try{
//Function
throw new Error('OOps')
}catch(error){
getdatafromAPI()
}
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Представляете, что здесь произойдет?
Решение: Установить некоторую переменную-счетчик в блоке catch, чтобы можно было запустить функцию определенное количество раз, и если она все еще показывает ошибку, определить ошибку.

  1. Увеличение производительности сайта при медленной сети за счет отправки только того, что необходимо для просмотра. Создание булевой переменной initial_load для первой загрузки и установка ее false для всех остальных загрузок и быстрая начальная загрузка. Чем меньше данных вы отправляете, тем быстрее будет работать ваш сайт.
  2. Посмотрите TC39/proposals, чтобы быть в курсе новых возможностей Js.
  3. Создавайте различные модули, когда это возможно, чтобы сделать ваш код чистым.
  4. Проверьте порядок импорта javascript в html-файлы. Это действительно важно.
  5. Различные способы импорта javascript
    async — Только для пакетов, порядок выполнения которых не имеет значения.
    Например, скрипт аналитики google
    defer — выполнение скрипта только после того, как все загружено.

  6. Javascript — это реакция на изменение данных на веб-странице.
    А фронтенд-фреймворки, такие как react и angular, помогают писать эти реакции чище и быстрее.

  7. Разница между textcotent и innertext html от javascript
    Внутренний текст вызывает рендеринг всей страницы, даже если внутреннее содержимое не изменено, что может быть вычислительно дорого.

  8. Не объявляйте переменную типа функция, а затем меняйте ее на переменную — не лучшая практика

  9. Выбор типа данных: массив или объект?
    При использовании Array, если вы хотите удалить элемент через массив, вам нужно пройти через весь массив, а для объекта вы можете сделать это с помощью простого ключа, и процесс станет быстрее.

  10. Проверять браузер пользователя для реализации некоторых функций очень сложно, потому что браузеры постоянно что-то обновляют. Вы можете проверить тип браузера в windows.navigator.userAgent, но там вы получите множество вариантов браузеров.
    Поэтому всегда используйте код, специфичный для браузера, в условных выражениях.

  11. Концепция моделей в javascript:
    Для модуля вы можете расположить файлы в любом порядке, и он все равно будет работать. Если вы просто добавляете файл скрипта как есть, то порядок имеет значение. Для модулей порядок не имеет значения.
    Модуль — это один единственный входной файл в javascript, который связан с другими файлами.
    Веб-бандлеры:
    Пакеты — это программное обеспечение, которое понимает, какая часть кода используется, и создает эффективный пакет для импорта. Он работает по принципу «тряски дерева» и удаляет код, который мы не используем.
    Динамическая загрузка модулей:

import('./modules/myModule.js')
  .then((module) => {
    // Do something with the module.
  });
Вход в полноэкранный режим Выход из полноэкранного режима
  1. Когда вы задаете display: flex; атрибут hidden в html не работает. Вы должны добавить другой класс для скрытия атрибута, а затем сделать display none над ним.

Оцените статью
Procodings.ru
Добавить комментарий