Разберем простой пример. Возьмем код, и поэтапно будем производить его оптимизацию. Итак, напишем скрипт, который будетвыводить некоторый текст.
<script>
function intext(){
document.getElementById('outbox').innerHTML = '<b>Текст</b>';
}
</script>
<input type="button" value="Кликни" onClick = "intext()">
<div id='outbox'></div>
Здесь используется слой, id которого «outbox». При наступлении события onClick, выполняется функция intext(). Функцция вставляется html – код “<b>Текст</b>” в слой с id «outbox». Тест после выполнения скрипта будет выведен в окно браузера как Текст.
Первая модификация: Будем передавать id элемента страницы в функцию в качестве аргумента.
<script>
function intext(id_result){
document.getElementById(id_result).innerHTML = '<b>Текст</b>';
}
</script>
<input type="button" value="Кликни" onClick = "intext('outbox')">
<div id='outbox'></div>
Тогда мы можем использовать эту функцию более универсально.
<script>
function intext(id_result){
document.getElementById(id_result).innerHTML = '<b>Текст</b>';
}
</script>
<input type="button" value="Кликни" onClick = "intext('outbox')">
<div id='outbox'></div><br>
<input type="button" value="Кликни" onClick = "intext('outbox2')">
<div id='outbox2'></div><br>
<input type="button" value="Кликни" onClick = "intext('txt')"><br>
<div id='txt'></div>
Шаг два: При нажатии на кнопку (событие onClick) в соответствующем блоке появляется запрограммированный текст, но на этом шаге id элемента страницы и выводимый текст будут передаваться в функцию в качестве аргумента.
<script>
function intext(id_result, outtext){
document.getElementById(id_result).innerHTML = outtext;
}
</script>
<input type="button" value="Кликни" onClick = "intext('outbox','Текст 1')"><br>
<div id='outbox'></div><br>
<input type="button" value="Кликни" onClick = "intext('outbox2','Текст 2')"><br>
<div id='outbox2'></div><br>
<input type="button" value="Кликни" onClick = "intext('outbox3','Текст 3')"><br>
<div id='outbox3'></div><br>
Шаг три: Выключатель. Теперь запрограммируем кнопку на выполнение двух простых действий. При первом нажатии будет выводится текст «on», повторное нажатие приведет к выводу текста «off».
<script>
function intext(id_result){
if(document.getElementById(id_result).innerHTML == 'on')
document.getElementById(id_result).innerHTML = 'off';
else document.getElementById(id_result).innerHTML = 'on';
}
</script>
<input type="button" value="Кликни" onClick = "intext('outbox')"><br>
<div id='outbox'>on</div><br>
Разумым будет усовершенствовать участок кода:
if(document.getElementById(id_result).innerHTML == 'on')
document.getElementById(id_result).innerHTML = 'off';
else document.getElementById(id_result).innerHTML = 'on';
Перепишем его следующим обазом:
document.getElementById(id_result).innerHTML = (document.getElementById(id_result).innerHTML == 'on'?'off':'on');
Оператор: expression ? operator 1 : operator 2 - тернарный оператор.
Что можно интерпретировать, как «если expression, то operator 1, иначе operator 2», что по сути эквивалентно обычному оператору if-else.
Однако, между этими операторами есть разница, в первом «operator 1» – это один оператор и не более, в качестве альтернативы «operator 2» - то же самое - один оператор.
Модифицированный код:
<script>
function intext(id_result){
document.getElementById(id_result).innerHTML = document.getElementById(id_result).innerHTML == 'on'?'off':'on';
}
</script>
<input type="button" value="Кликни" onClick = "intext('outbox')"><br>
<div id='outbox'>on</div><br>
Шаг четыре: две функции. Усложним наш пример. Теперь кнопка будет переключать не только надписи, но и цвет текста.
<script>
function intext(id_result){
document.getElementById(id_result).innerHTML = document.getElementById(id_result).innerHTML == 'on'?'off':'on';
document.getElementById(id_result).style.color = document.getElementById(id_result).innerHTML == 'on'?'green':'red';
}
</script>
<input type="button" value="Кликни" onClick = "intext('outbox')"><br>
<div id='outbox'>on</div><br>
Теперь в борьбе за байты, точнее за размер скрипта, пишем тоже самое, но короче.
<script>
function intext(id_result){
var obj = document.getElementById(id_result);
obj.innerHTML = obj.innerHTML == 'on'?'off':'on';
obj.style.color = obj.innerHTML == 'on'?'green':'red';
}
</script>
<input type="button" value="Кликни" onClick = "intext('outbox')"><br>
<div id='outbox'>on</div><br>
В результате был создан объект obj, который унаследовал все методы и свойства элемента с id, который передается в функцию.
Задача разработчика, писать не только эффективные, но и компактные скрипты, чтобы не интернет-страницы не наращивали весу и быстро открывались на стороне пользователя. Переписываем скрипт:
<script>function intext(id_result){var o=document.getElementById(id_result);var d=o.innerHTML;
o.style.color=(o.innerHTML=d=='on'?'off':'on')?(o.innerHTML=='on'?'green':'red'):'';}</script>
<input type="button" value="Кликни" onClick = "intext('outbox')"><br><div id='outbox'>on</div><br>
В чем фокус?
- «obj.innerHTML» встречался в коде три раза, значит его можно сделать ссылку на него. Это и было реализовано.
- Имя переменной obj сократили до одного символа «о»
- Модифицировали код:
obj.innerHTML = obj.innerHTML == 'on'?'off':'on';
obj.style.color = obj.innerHTML == 'on'?'green':'red';
Получили:
o.style.color=(o.innerHTML=d=='on'?'off':'on')?(o.innerHTML=='on'?'green':'red'):'';
Все возможные модификации произведены, теперь размер сжатого кода скрипта меньше исходного. Но мы пришли к тому, что в сокращенной версии невозможно разобраться и сложно понять, что именно делает данный скрипт.
Мы перестарались! Попробуйте обратиться к данному коду через месяц, чтобы его как-то подправить, и вы поймете, что уже прошло пол часа, а вы все еще разбираетесь, что же тут написано. Отсюда вывод:
- Не увлекайтесь с именами переменных, используйте логически понятные имена.
- Пишите каждый оператор в отдельной строке.
- Содержимое составного оператора { }, пишите с отступом, с левой стороны.
- Оператор else и набор альтернативных операторов или оператор, рекомендуется переносить на новую строку.
- Комментируйте код, это поможет вам или другому разработчику, когда по истечении какого-то времени вам придется вернуться к данному скрипту и внести изменения.