Известно, что в Javascript параметры функции передаются только по значению, нельзя передать параметр простого типа по ссылке.
О чем это мы? В программировании существует два способа передачи параметров функции: по ссылке и по значению. Когда параметр передается по значению, то функция только использует это значение, значение фактической переменной изменить она не в силах, даже если в функции переменной присваивается новое значение, как только функция закончит работу, значение нашей переменной станет прежним, каким оно было до работы функции. Когда параметр передается по ссылке, то изменение значения переменной внутри функции происходит реально и на выходе из функции наша переменная уже имеет новое значение. Это очень нужная штука, а в Javascript она не работает.
Однажды делел я проект с бооольшим количеством однотипных объектов и прогнозировать изменение переменных было невозможно, путь был один: заставить сценарий изменить значение входной переменной и вот, как я это реализовал.
В моей таблице стилей CSS задано 2 объекта. Объект с id="d1" имеет ширину 150 px, объект с id="d2" имеет ширину 200 px:
#d1 { width: 150px; }
#d2 { width: 200px; }
В HTML-коде заданы оба объекта (я не привожу этот фрагмент за его несущественностью) и два вызова функции. При первом вызове функция processDecreaseWidth будет изменять значение атрибута width для первого объекта, при следующем вызове функция будет изменять значение атрибута width для второго объекта. Функция processDecreaseWidth имеет два входных параметра. Первый параметр - это id, по которому определяется, с каким объектом работать. Второй параметр - соответствует изменяемой переменной, отвечающей за ширину объекта.
Привожу фрагменты вызова функций:
"javascript:processDecreaseWidth('d1',thisWidthD1)"
"javascript:processDecreaseWidth('d2',thisWidthD2)"
В сценарии на Javascript сначала задаются интересующие нас переменные. Им присваиваются начальные значения ширины объектов, те же, что и в таблице стилей CSS:
var thisWidthD1=150;
thisWidthD2=200;
Затем следует код функции, где ElId - id объекта, thisWidth - ширина объекта. Сначала функция присваивает переменной thisWidth значение новой ширины, затем обрабатываемому объекту присваивается новая ширина:
function processDecreaseWidth(ElId,thisWidth)
{
if (thisWidth > 2)
{
thisWidth=thisWidth-2;
document.getElementById(ElId).style.width=thisWidth+"px";
reformWidth(ElId,thisWidth);
}
}
Обратите внимание, в конце функции processDecreaseWidth вызывается функция reformWidth, которая присваивает переменным, отвечающим за ширину объекта, новые значения. Вот код этой функции:
function reformWidth(ElId,thisWidth)
{
switch (ElId)
{
case "d1": thisWidthD1=thisWidth;
break;
case "d2": thisWidthD2=thisWidth;
break;
}
}
Недостаток этого способа в том, что при большом количестве объектов объем кода последней функции страшно разрастется, как впрочем и все фрагменты присвоения данных и задания объектов.