Изменение верстки сайта через js встроенный в футер

Представленное решение не является правильным во всех смыслах. и некоторые задачи решать при помощи него было бы как минимум неправильно, но оно было единственное разумное решение (соотношение цены и качества и многих других параметров, в том числе субьективных) на тот момент и смогло решить насущные проблемы с минимальными затратами труда, времени и сил. Если вы решите его ипользовать, используйте с умом :)

В процессе обслуживания одного интернет-магазина, стали появляться задачи, которые нельзя было решить прямым путем. Эти задачи касались только front end сайта. Сервер на Windows Server, движок на C# и лезти в эти блудняки мне крайне не хотелось (было множество других веских причин по которым этого не надо было делать). В один момент я понял, что надо разобраться с накопившимися задачами. Таким образом появился проект frontend-gap-changer, (там же по ссылке есть файл in_production.js это сборка некоторых реальных примеров использования).

Ядро не превышает 100 строк кода, однако предоставляет хорошую платформу для внесения правок в верстку.

Казалось бы, можно обойтись и без ядра, просто вставляя js код в подвал сайта. Однако, на деле движок интернет-магазина формирует итоговую верстку только после полной загрузки страницы - код из футера может не найти нужные элементы, так как их еще нет. А заказчик требовал чтобы клиенты видели изменение верстки как можно скорее. Это говорит о необходимости несколько раз проверять страницу на наличие в ней нужных элементов для изменения.

В дополнение к этому, для текущей страницы некоторые функции (изменяющие верстку) могут быть не актуальны (предназначены для других страниц), а значит они не найдут нужных элементов. В этом случае функция без каких-либо ограничений будет бесконечно работать. Это нерациональное использование ресурсов пользовательского ПК. Поэтому ядро запускает функции раз в секунду и только определенное количество раз. Если все функции сообщат об успешном выполнении, то работа ядра прекратится. Эти настройки вынесены в отдельные поля обьекта. их можно отредактировать так как надо:

//! период вызова таймера в млсек
fgc.iTimerPeriod = 1000;

//! максимальное количество итераций
fgc.iMaxIteration = 10;

В итоге имеем некоторый баланс и подстраховку что все ядро запустит то что надо и там где надо (за год использования все было доделано и протестировано).

Код ядра состоит из:

• объекта с настройками (количество итераций, временной интервал запуска функций),
• массива с функциями для изменения верстки, которые необходимо туда положить при помощи addFn метода. К слову, каждая функция должна возвращать логическое значение, где true – успешное выполнение, повторный запуск не требуется, а false означает что необходим повторный запуск, так как изменения верстки функция не сделала.

Также addFn принимает второй необязательный аргумент sStyle, это сделано на тот случай когда обработать нужно несколько элементов на странице одной функцией:

//! округление значения процента скидки, чтобы вместо 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 и начнется цикл вызова функций.