Initialization JavaScript code:

Main JavaScript code:

Show this JavaScript code
Block A
Block B

Note: full english description will be later.



Задача: По событиям "onmouseover"/"onmouseout" на блоке A, показываем либо прячем блок B.

Данный пример, пожалуй, самый легкий из всех представленных здесь. На первый взгляд кажется неоправданным строить такой сложный JavaScript для такой простой задачи. Но, тем не менее, я скажу вам, что в определенных случаях это будет целесообразно. В конце этого обсуждения Вы сами увидите это.

Разберем вкратце процедуры, которые здесь выполняются в основном скрипте:

  1. Через конструктор нам переданы id пары блоков (A и B), с которыми нам надо выполнять манипуляции. Поскольку BODY, по нашему предположению еще не сформирован - мы не можем сразу обратится к этим элементам. Мы сохраняем эти id во внутренних свойствах объекта.
  2. Подписываемся на событие "onload" через основную обертку окна.
  3. По событию "onload" происходит обращение к обертке окна, которое возвращает нам обертку для элемента A. Мы сохраняем эту обертку для дальнейшей работы с ней и подписываемся в ней на событие "onmouseover" и "onmouseout". Все последующие манипуляции будут выполняться при помощи методов обертки.
  4. Аналогичным образом получаем обертку для элемента B. Подписка на события, по условиям задачи, нам не нужна, но нам важно манипулировать этим элементом в последствии. Поэтому, обертку на этот элемент мы также сохраняем во внутренних свойствах объекта.
  5. Теперь по событиям "onmouseover"/"onmouseout" в первом элементе будут вызван соответствующий метод нашего скрипта, в котором второй элемент будет соответственно либо отображаться, либо скрываться.
  6. По событию "onmouseover" второй элемент сначала позиционируем в то место, где он должен появиться (в нашем случае непосредственно под первым элементом) и только после этого отображаем его.

Теперь остановимся на ключевых моментах.

Обратите внимание, что при инициализации созданные при помощи конструкции "new" объекты никуда не сохраняем. Это, в данном случае, делать необязательно, поскольку никаких манипуляций с этими объектами "извне" делать не нужно. Т.е. все процедуры, кроме самой инициализации, в данном примере выполняются только внутри методов данного объекта.

Второй, самый важный момент в этом примере: независимо от того, сколько таких пар элементов будет в вашем html-коде - основной скрипт не изменится! Хоть будет одна пара, две, пять, сто, и т.д. - у вас будет меняться только количество выполняемых инициализаций и все.

Block A1
Block A2
Block A3
Block B1
Block B2
Block B3



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