В этой статье мы будем оптимизировать, оптимизировать, оптимизировать, в конце-концов дооптимизируемся.
1. При нажатии на кнопку в соответствующем блоке появляется текст.
<script>
function intext(){
document.getElementById('outbox').innerHTML = '<b>Текст</b>';
}
</script>
<input type="button" value="Кликни" onClick = "intext()">
<div id='outbox'></div>
2. При нажатии на кнопку в соответствующем блоке появляется текст, но
теперь 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>
3. При нажатии на кнопку в соответствующем блоке появляется текст, но
теперь 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>
4. Выключатель. При клике по кнопке в соответствующем блоке появляется
текст «on», кликнув еще раз по той же самой кнопке, «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( expression ){ operator 1 }else{ operator 2 }.
Но между этими операторами есть разница, в первом «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>
5. Выключатель. При клике по кнопке в соответствующем блоке появляется
текст «on», кликнув еще раз по той же самой кнопке, «on» меняется на
«off», и наоборот, но теперь меняется и цвет текста.
<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>
Можно еще компактнее! Так как наш JS будет передаваться вместе с
веб-страничкой, а веб-страница и JavaScript это текст, а любой текст
имеет размер. Чем меньше будет размер этого текста, тем быстрее он
будет грузиться с сервера в окно браузера, не так ли? Все так, но нужно
и меру знать. Напишем так:
<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» встречается три раза, значит его можно сделать ссылку на него, что мы и сделали – переменная «d».
- Переменная «obj» состоит из трех символов, что больше 1-го, следовательно ее имя мы меняем, теперь не «obj», а «o»
- Преобразовали этот кусок кода:
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'):'';
- Практически весь код скрипта, впрочем и html-кода, буквально
«вытянули» в одну строчку, при этом убрали все пробелы (где это
допустимо). Ну
вот и все, теперь размер «сжатого» текста/скрипта меньше исходного. НО!
Мне, как и Вам, кажется, точнее мы точно знаем, что «сжатый» вариант
слишком запутан, не удобен для чтения.
Мы переборщили! Необязательно лишний раз «шифровать» код, не только
JavaScript и html, слава богу «интернета сейчас всем хватает, на
приличной скорости».
Подитожим.
- не увлекайтесь с именами переменных, т.е. пусть они состоят хотябы из
3-7 символов (ключевых). Но и слишком длинные имена переменных ни к
чему.
(правда, бывают случаи, когда можно использовать и «односимвольные»
переменные. Например, если в данном скрипте используется какая-либо
математическая константа, несущая в себе смысловую нагрузку: число «Пи»
= «p», «експонента» = «e», «количество» = «n» и т. д. Ну а для длинющих
имен переменных исключений нет).
- Желательно каждый оператор писать, в отдельной строчке.
- Содержимое составного оператора «{ }», лучше писать с отступом, с левой стороны.
- Оператор «else» и набор альтернативных операторов или оператор, лучше переносить на новую строку.
- Кстате говоря комментарии, это тоже текст, так что не пишите
киллометровые комментарии, либо комментарии ради самих комментариев.
ps: Это самые основные пункты, они кстате касаются не только JS но и
многих других языков, причем один из этих пунктов подойдет и для языков
разметки. | 
