Оглядываясь назад, я думаю, что оставление моей личной веб-страницы устаревшей так долго поставило меня перед проблемой рефакторинга «устаревшего кода», который я написал в прошлом, не говоря уже о работе с устаревшими библиотеками JS в первый раз. время.
Но я буду честен, мы не говорим о приложении 1.5 AngularJS с десятками компонентов и сервисов, написанных младшими разработчиками. Мое портфолио состоит из простого статического индексного файла HTML, скрипта PHP для обработки формы отправки «свяжитесь со мной» и, наконец, файла JavaScript для обработки ошибок отправленной формы и их отображения на странице в анимированном виде. с помощью jQuery.
Исходный код размещен в частном репозитории на Bitbucket (бесплатно 🤑). Вот как выглядит журнал изменений коммитов:
Что я сделал:
1. Первым делом нужно было исправить небольшую ошибку, которая выдавала ошибку в консоли и приводила к сбою файла пакета main.js. Причина? устаревший синтаксис jQuery после обновления с версии 2.1.4 → 3.3.1.
$('a[href*=#]:not([href=#])').click(function() {
...
}
Я сделал небольшой поиск в Google, и оказалось, что селектор выше был критическим изменением в 2.2.4, и решение состояло в том, чтобы экранировать строки следующим образом:
a[href*=\\#]:not([href=\\#])
и вуаля! Все отлично работает с новейшей версией jQuery, а файл пакета main.js намного меньше по размеру.
2. Еще одна небольшая проблема, с которой я столкнулся при обновлении Bootstrap с 3.3.6 →4.1.3, из-за которой перестал работать компонент всплывающих подсказок Bootstrap.
И снова оказывается, что новейшая версия использует для позиционирования стороннюю библиотеку под названием Popper.js. Я добавил его в пакет JS, и компонент всплывающих подсказок снова работает, и теперь я могу использовать новые функции платформы пользовательского интерфейса Bootstrap.
3. Помимо критических изменений в старых библиотеках JS, мне пришлось обновить ветку разработки кода, которая включала окончательную конфигурацию пакета и файл gulp.js. Со стороны казалось, что в этом нет необходимости. Задачи gulp выполнялись и компилировались просто отлично, но я не мог устоять перед желанием обновить старое объявление переменной var до синтаксиса ES6 let и использовать стрелочные функции там, где это необходимо. В результате стало меньше строк кода, и теперь он выглядит намного лучше. Конечно, это имело свою цену: пакет npm gulp-uglify, который я использовал для минимизации файла пакета main.js, не понимает ES6. Решение: заменить его на terser,парсер и средство для улучшения JavaScript для ES6. Впоследствии я был удивлен, что задача gulp, которую я написал с использованием старого пакета, не требовала никаких изменений, кроме замены .pipe(uglify())… на .pipe(terser())… и вуаля! мой файл ES6 gulp.js снова работает!
Что я выучил:
Оглядываясь назад и оценивая свою предыдущую работу, это действительно ценно и помогает увидеть многие вещи в перспективе. Вы дойдете до того, как далеко вы продвинулись как разработчик. Идеи, которые вы получите о том, как вы могли бы сделать что-то по-другому, чтобы улучшить старый блок кода, который вы написали, раскроют ваш творческий потенциал и улучшат ваши навыки решения проблем.
Надеюсь, вам понравилось читать этот пост так же, как мне понравилось его писать 💌
Я хотел бы услышать ваши мысли об этом и поделиться, если у вас был подобный опыт 👍
✉️ Подпишитесь наCodeBurstраз в неделю Email Blast,🐦 Подпишитесь наCodeBurstв Twitter, просмотрите🗺️ Дорожную карту веб-разработчиков на 2018 год и🕸️ Изучите комплексную веб-разработку .
