Как работает данный скрипт?

Question

[tqvf9a1tiquf]

Как работает данный скрипт?
Подскажите пожалуйста как формируется итоговое изображение автопоезда, после выбора параметров тягача и полуприцепа, на этой странице www.vdnk.ru/site/ru/truck-axle-load ?
На другом примере baltavtologistika.ru/calculator сделать не удалось, у них используется единственное изображение, которое просто исчезает при выборе других значений в форме.
Почему /content/axleload/script.min.js?v=4 имеет именно такое имя, а не script.min.js например?
Какой скрипт отвечает за появление зеленых стрелок? MathJax или другой?
Здесь используется масса таблиц css, каким образом их можно перенести вместе с калькулятором, но чтобы они не затронули стили моей текущей страницы? точнее уже пробовал вставить, все поддается изменению, кроме radio кнопок, они просто не показываются.
Прошу сильно не пинать)) далек от программирования, от слова совсем.
Есть еще пример на WP https://cargo-38.ru/calculator/
Спасибо.

Answer 1

[WhiteBearDev]

Если кратко:
1. В итоговое изображение просто подставляется заготовленная картинка в зависимости от изменения параметров, в данном случае от количества осей. На другом примере изображение исчезает, потому что нужного нет
2. Каждый браузер кеширует подключаемые стили и js-скрипты, чтобы не подгружать их при каждой перезагрузке страницы. Соответственно, при внесении изменений в js-скрипт или css-файл с сохранением имени, браузер предположит, что это тот же самый файл, не станет его выкачивать, а возьмёт старый из кеша. Для того, чтобы обойти этот момент, при подключении, через знак вопроса дописывается параметр - "соль". В данном случае v=4. Браузер считает, что запрос к файлу изменился и выкачивает его с учётом нового параметра.
3. MathJax отвечает за прорисовку математических формул, к стрелкам отношения эта библиотека не имеет. Стрелки рисуются в script.min.js
4. Чтобы наверняка не затронуть стили своей страницы, оберните блок html в уникальный класс. А в подключаемых css для каждого селектора в качестве родительского этот класс допишите. Если использовать CSS-препроцессоры, то делается это очень быстро

Comments

[tqvf9a1tiquf]

WhiteBearDev, спасибо!