Представленное решение не является правильным во всех смыслах. и некоторые задачи решать при помощи него было бы как минимум неправильно, но оно было единственное разумное решение (соотношение цены и качества и многих других параметров, в том числе субьективных) на тот момент и смогло решить насущные проблемы с минимальными затратами труда, времени и сил. Если вы решите его ипользовать, используйте с умом :)
В процессе обслуживания одного интернет-магазина, стали появляться задачи, которые нельзя было решить прямым путем. Эти задачи касались только front end сайта. Сервер на Windows Server, движок на C# и лезти в эти блудняки мне крайне не хотелось (было множество других веских причин по которым этого не надо было делать). В один момент я понял, что надо разобраться с накопившимися задачами. Таким образом появился проект frontend-gap-changer, (там же по ссылке есть файл in_production.js это сборка некоторых реальных примеров использования).
Ядро не превышает 100 строк кода, однако предоставляет хорошую платформу для внесения правок в верстку.
Казалось бы, можно обойтись и без ядра, просто вставляя js код в подвал сайта. Однако, на деле движок интернет-магазина формирует итоговую верстку только после полной загрузки страницы - код из футера может не найти нужные элементы, так как их еще нет. А заказчик требовал чтобы клиенты видели изменение верстки как можно скорее. Это говорит о необходимости несколько раз проверять страницу на наличие в ней нужных элементов для изменения.
В дополнение к этому, для текущей страницы некоторые функции (изменяющие верстку) могут быть не актуальны (предназначены для других страниц), а значит они не найдут нужных элементов. В этом случае функция без каких-либо ограничений будет бесконечно работать. Это нерациональное использование ресурсов пользовательского ПК. Поэтому ядро запускает функции раз в секунду и только определенное количество раз. Если все функции сообщат об успешном выполнении, то работа ядра прекратится. Эти настройки вынесены в отдельные поля обьекта. их можно отредактировать так как надо:
//! период вызова таймера в млсек fgc.iTimerPeriod = 1000; //! максимальное количество итераций fgc.iMaxIteration = 10;
В итоге имеем некоторый баланс и подстраховку что все ядро запустит то что надо и там где надо (за год использования все было доделано и протестировано).
Код ядра состоит из:
- объекта с настройками (количество итераций, временной интервал запуска функций),
- массива с функциями для изменения верстки, которые необходимо туда положить при помощи addFn метода. К слову, каждая функция должна возвращать логическое значение, где true – успешное выполнение, повторный запуск не требуется, а false означает что необходим повторный запуск, так как изменения верстки функция не сделала.
//! округление значения процента скидки, чтобы вместо 47,4987% было 47% function DiscountRounding(sClass) { console.log("DiscountRounding"); var aRedDiscount = document.getElementsByClassName(sClass); if(aRedDiscount.length > 0) { for(var i=0, il=aRedDiscount.length; i<il; ++i) { var sPercent = aRedDiscount[i].innerHTML; var iStart = sPercent.indexOf(","); if(iStart >= 0) { sPercent = sPercent.substr(0, iStart) + "%"; aRedDiscount[i].innerHTML = sPercent; } } return true; } return false; } fgc.addFn(DiscountRounding, "products-view-label-inner products-view-label-discount"); fgc.addFn(DiscountRounding, "price-discount-percent");После добавления всех функций, необходимо запустить обработку - вызвать метод run и начнется цикл вызова функций.