Разработка сайтов, создание сайтов
главная / JavaScript / Оптимизация – главное не переборщить

Оптимизация – главное не переборщить

В этой статье мы будем оптимизировать, оптимизировать, оптимизировать, в конце-концов дооптимизируемся.

1. При нажатии на кнопку в соответствующем блоке появляется текст.
<script>
function intext(){
document.getElementById('outbox').innerHTML = '<b>Текст</b>';
}
</script>
<input type="button" value="Кликни" onClick = "intext()">
<div id='outbox'></div>
У нас есть слой, id которого «outbox». При клике по кнопке (событие onClick), выполняется функция «intext()». В этой функции происходит следующее: в слой с id «outbox» вставляется html – код “<b>Текст</b>”, который после интерпретации браузером будет выглядеть как Текст

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>
Как видно текст мы передаем в функцию в качестве аргумента. (параметр «outtext»)

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>
Вы наверное догадались, что цвет текста изменяется тут: «.style.color», но каскадные таблицы стилей – это отдельный разговор, поэтому об этом я рассказывать не буду.

Кажется я что-то уже говорил о компактности кода? Так вот, данный пример можно написать еще компактнее. Вот так:
<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, который мы передали в функцию.

Можно еще компактнее! Так как наш 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 но и многих других языков, причем один из этих пунктов подойдет и для языков разметки.

Источник: NAVAT.NET
КОНТАКТЫ
г. Екатеринбург
info@vismech.ru


текущее:
Скрываем ненужное!
JavaScript и объектная модель
Прижимаем футер к низу с помощью CSS

НОВОСТИ
2011 г., «VisMech.ru»