Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Помощь недоламеру в оптимизации кода (https://javascript.ru/forum/css-html/34542-pomoshh-nedolameru-v-optimizacii-koda.html)

Cooleraunt 09.01.2013 14:11

Помощь недоламеру в оптимизации кода
 
Здравствуйте!

Как-то раз стояла задача по-быстрому написать оригинальный калькулятор для расчета цен за услуги, главное - чтобы был красивый, необычный, и работал. Времени давалось очень мало, изучать тонкости языка джаваскрипт не было времени. По быстрому накатав пару десятков строк кода, таки заставил калькулятор работать. Но вот беда, времени оптимизировать его не было, а он все обрастал всякие функциями, усложнялся и в итоге получилось вот что. Весь код выкладывать сюда вряд ли имеет смысл (его тут реально много), на самой странице его 261 строчка + внешний js-файл еще почти на столько же. Оно в принципе работает, но уверен, что его как то можно упростить (в разы!), но, опять же, все тонкости веб-программирования изучать нет времени (мне компиляторных языков типа вижл бейсика, дельфи-на, си, джаво-андроида хватает, да и голова уже разрывается от них - нет сил изучать полностью еще и веб программирование), а приходится регулярно добавлять какие-то новые фишки или редактировать старые. Или хотя бы подскажите - самое часто употребляемое выражение в коде document.getElementById('*****').style - можно ли как-то покороче обращаться к нужному элементу на странице?:help:

DjDiablo 09.01.2013 14:20

давай начнём с самого прикольного вопроса, почему у тебя jQuery вперемешку с нативным DOM api ? :)

Это вообще что за неведомая хреновина ? )))))))))
$( document.getElementById( 'CheckBox'+ i ) )


почему не хотябы
$( '#CheckBox'+ i)

или напротив без jquery
document.getElementById( 'CheckBox'+ i )

Cooleraunt 09.01.2013 16:20

То есть при использовании jQuery вместо длинного document.getElementById('айди') можно использовать конструкцию $( '#айди') ? Уже код покороче станет, конечно

Cooleraunt 11.01.2013 13:00

jQuery чуть изучил, но это все равно не намного код уменьшит. Похоже, уменьшить его в разы можно только потеряв часть функциональности

DjDiablo 11.01.2013 14:05

Цитата:

Похоже, уменьшить его в разы можно только потеряв часть функциональности
да прям :)
если уменьшить его в разы можно только потеряв часть функциональности, то это значит что вы достигли совершенства в коде. Вы себе скажем так прямо льстите :)

1) куча дублирующегося кода
функцию Podschet() можно записать так (я невдумывался, так что рассматривайте это как образец а не готовый код)
function Podschet(){
		val text="";

		document.getElementById('freedaysr').style.display='none';
		document.getElementById('strelka_akcia').style.display='none';
		
		if (valsrok < 60){
		    document.getElementById('skidkar').style.display='block';
		} else {				
		    if (valsrok > 59 & valsrok <120) text='Плюс неделя размещения в подарок!';
		    else if (valsrok > 119 & valsrok <150) text ='Плюс 2 недели размещения в подарок!';
		    else if (valsrok > 149 & valsrok <180) text='Плюс 3 недели размещения в подарок!';
		    else if (valsrok > 179 & valsrok <365) text='Плюс месяц размещения в подарок!';
		    else if (valsrok > 364) text ='Плюс 2 месяца размещения в подарок!';

		    document.getElementById('strelka_akcia').style.display='block';
		    document.getElementById('freedaysr').style.display='block';
		    document.getElementById('freedaysr').value=text;
		    document.getElementById('srok').value='Срок: ' + valsrok + ' дней';
  		    document.getElementById('skidkar').style.display='none';
		}
		if ((kolvoIstr+ kolvoVisokovsk + kolvoKlin) > 0 & valsrok > 0){
			 MinDat();
		}
		summ=(kolvoIstr + kolvoVisokovsk + kolvoKlin) * prf * valsrok;
		document.getElementById('summar').value='Итого: ' + Math.round(summ) + ' руб.';
		
	}


2я) ещё очень грубая ошибка в том что у вас все функции глобальны
правильно делать хотя бы так
(function(){
   //здесь код вашего скрипта.
})()

если это jquery плагин то тут записывается немного иначе.
jQuery(function($){
   //здесь код вашего скрипта.
})


3) можно заранее найти все нужные элементы.
(function(){
   var srok=document.getElementById('srok');

   function какаято функция( ){
      //бла бла 
      srok.value='Срок: ' + valsrok + ' дней';
      //бла бла бла
   }
})()


4) циклы вида for (var i = 20; i <= 21; i++) не есть красиво как минимум, можно подготовить массив с чекбоксами заранее. или Использовать query.
пример ("div").css("стиль")-установит css для всех div и неважно сколько их 1 ,50 или 100500. Установит всем div, всего одной строчкой, без цикла.


ещё уйма другого улучшайзинга возможно,
я замучаюсь перечислять

тем более я попрежнему непонимаю толи в jQuery стиле писать толии нативно, если везде юзать jQuery то получится и читабильнее и короче. А у вас ппрежнему фарш ищ=з двух подходов, в одном случаете вы используете jQuery, а в другом где бы jQuery был полезен вы его игноририруете. перепишите на jQuery уж тогда чтоли.


Часовой пояс GMT +3, время: 07:59.