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

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

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



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

Автор: Бекенов Балтабек (cybri0nix)