Форум

ShutTap · #1 (**permalink**) 03.12.2014, 09:04

Здравствуйте.
Как я понял, использование глобальных переменных - это плохо.
По-этому первый вопрос: как от них можно избавиться?
У меня есть скрипт onmouseover и onmouseout на элементе div, который при наведении увеличивает размеры элемента, а при убирании курсора - уменьшает. Плавно, по таймеру. Глобальная переменная нужна для запоминания размеров элемента на момент наведения или убирания курсора, для того, чтобы дальнейшие изменения размера начинались с момента текущего размера когда навели/убрали курсор, а не с "крайних" размеров.
Так же размеры элемента изменяются в соответствии с пропорциями ширина/высота, которые высчитываются в скрипте каждый раз заново. Ведь это нерациональная нагрузка, так? Ведь соотношение это не меняется на протяжении выполнении скрипта, а считать нужно каждый раз заново. Как сделать так, чтобы оно считалось только перый раз, а дальше бралось запомненное? Через глобальную переменную нельзя, так как скрипт может использоваться на нескольких элементах, и у каждого может быть разное соотношение сторон. Каждый раз передавать в функцию? И если передалость что-то, использовать его, а нет - высчитывать и передавать?

Второй вопрос такой: если я хочу изменять размеры не прописывая у каждого элемента onmouseover и onmouseout, а через аналогичные события addEventListener, как назначить их сразу всем элементам? Например элементам div с атрибутом zoom. А не каждому по отдельности. Или такое невозможно, и надо сначала взять все элементы getElementsByTagName('div') , а потом в цикле проверять, есть ли у него атрибут zoom, и если нет - удалять элемент, а потом опять в цикле с оставшимися элементами каждому назначать обработчик?

krutoy · #2 (**permalink**) 03.12.2014, 09:20

Сообщение от ShutTap

как от них можно избавиться?

Используй объекты в качестве неймспейсов, убирай в лексичкий скоп, типа

(function(){var a=1, b=2; dosuff}())

по ситуации. И в глобальных переменных ничего плохого нет, это базворд, по большому счету. Используй их когда это удобно.

Сообщение от ShutTap

Глобальная переменная нужна для запоминания размеров элемента на момент наведения или убирания курсора

можешь заменить ее свойством объекта, работать все будет также.

krutoy · #3 (**permalink**) 03.12.2014, 09:24

Сообщение от ShutTap

как назначить их сразу всем элементам? Например элементам div с атрибутом zoom. А

Прогони в цикле просто, если один обработчик, пройдись циклом по коллекции, и навесь каждому элементу обработчик.

<html>
<head></head>

<body>

<p a=1>foo</p>
<p a=1>foo</p>
<p>foo</p>
<p a=1>foo</p>
<p a=1>foo</p>



<script>

pCollect=document.querySelectorAll("p")
for(var i=0; i<pCollect.length; i++){
   if(pCollect[i].getAttribute("a")) pCollect[i].addEventListener("click", function(){alert(this.getAttribute("a"))})
}

</script>
</body>
</html>

krutoy · #4 (**permalink**) 03.12.2014, 09:53

Сообщение от ShutTap

Как сделать так, чтобы оно считалось только перый раз, а дальше бралось запомненное? Через глобальную переменную нельзя, так как скрипт может использоваться на нескольких элементах, и у каждого может быть разное соотношение сторон. Каждый раз передавать в функцию? И если передалость что-то, использовать его, а нет - высчитывать и передавать?

В этом случае, обычно, используют замыкания

mkCounter=function(start){return function(callb){start++; return callb(start)}}

counter1=mkCounter(10)
counter2=mkCounter(20)

counter1(function(x){console.log(x)})
counter1(function(x){console.log(x)})
counter1(function(x){console.log(x)})
counter2(function(x){console.log(x)})
counter2(function(x){console.log(x)})
counter2(function(x){console.log(x)})
// ::: 11
// ::: 12
// ::: 13
// ::: 21
// ::: 22
// ::: 23

каждая из ф-ций counter, имеет свое собственное состояние. Можно и объекты использовать для этих целй, разумется.

Counter=function(start){
   this.start=start
}
Counter.prototype.get=function(){return this.start}
Counter.prototype.set=function(){this.start++}

counter1=new Counter(10)
counter2=new Counter(20)

counter1.set()
counter1.set()
counter1.set()
console.log(counter1.get())

counter2.set()
counter2.set()
counter2.set()
console.log(counter2.get())

// ::: 13
// ::: 23

рони · #5 (**permalink**) 03.12.2014, 09:59

ShutTap,

document.querySelectorAll("[zoom]")

и есть же css3 scale

ShutTap · #6 (**permalink**) 03.12.2014, 16:58

спасибо за ответы) буду пробовать, разбираться переделывать все)

п.с. про zoom это я как пример

ShutTap · #7 (**permalink**) 04.12.2014, 10:16

а еще вопрос, как можно замерить сколько выполняется скрипт, как грузит процессами и тд? чтобы понять, хуже я сделал или лучше))

krutoy · #8 (**permalink**) 04.12.2014, 10:43

ShutTap,
сколько выполняется -- очень просто

console.time("mark")
//code here
console.timeEnd("mark")

данные выводятся в консоль. Остальное -- в различных отладчиках.

kostyanet · #9 (**permalink**) 04.12.2014, 12:59

в консоль может вывестись все наоборот даже, она тормозная.

kostyanet · #10 (**permalink**) 04.12.2014, 13:04

Сообщение от ShutTap

Как я понял, использование глобальных переменных - это плохо.

Это хорошо, просто их надо складывать не в корень диска, а в папочку. Представьте если бы все файлы у вас лежали навалом на диске С.

В парадигме программирования та самая папочка это namespace. Функция или объект.

var MyLovelyFunction = function(){
 var one_global_in_the_function_variable = 1,
      the_two_one = one_global_in_the_function_variable + 1;
// и так далее
};

если надо сразу что-то сделать без деклараций независимости то заключаете функцию в скобки со скобками для аргументов (они там даже могут быть)

(function(){
 var one_global_in_the_function_variable = 1,
      the_two_one = one_global_in_the_function_variable + 1;
// и так далее
})();

Форум

Справочник

Discord чат

Курсы javascript