Мини-библиотека функций учебника

В реальных проектах, как правило, используют фреймворки.

Здесь, в учебнике, мы не ограничиваем себя конкретным выбором библиотеки, тем более что почти всё можно сделать на обычном JavaScript.

Однако, некоторые функции все же необходимы и содержатся в мини-библиотеке для решения задач. Их всего несколько.

Функции DOM: dom.js

Минимально необходимые функции для работы с DOM находятся в файле dom.js:

addClass/removeClass/hasClass(elem, cls)

Добавляют/удаляют/проверяют CSS-класс элемента

fixEvent(e, _this)

Нужна только для IE<9. Исправляет объект события, добавляя стандартные свойства. Второй аргумент, если он передан, записывается в e.currentTarget.

Как правило, эта функция находится в начале обработчика события.

getChar(event)

Кросс-браузерно возвращает символ для события keypress или null, если была нажата специальная клавиша.

getCoords(elem)

Возвращает объект с координатами элемента относительно документа left/top.

При решении задач для поиска элементов допустимо использование querySelector и querySelectorAll. Таким образом, ваш код будет работать во всех современных браузерах, исключая IE<8. Это для простоты, подразумевается, что вы сможете написать и код без этих методов. Тем более, что учебник также содержит описание других способов поиска в DOM и задачи на них.

Функции ООП: misc.js

Библиотека для функций и ООП: misc.js:

bind(func, context)

Возвращает обёртку, которая вызывает функцию func в контексте this = context.

Можно также добавить аргументы: bind(func, context, arg1, arg2...), более подробно см. описание.

copy(dst, src1, src2…)

Копирует все свойства объектов src* в объект dst, с перезаписью.

inherit(proto)

Создаёт пустой объект с прототипом proto.

Шаблонка: tmpl.js

Файл tmpl.js содержит функции:

esc(text)

Заменяет спецсимволы HTML в строке text.

tmpl(str)

Компилирует шаблон из строки str.

Более подробно — читайте в статье Шаблонизация.

Cобытия объектов eventer.js

Для генерации событий к вашим услугам мини-объект Eventer. Его код прилагается к задачам в файле eventer.js.

После вызова Eventer.extend(obj) у объекта obj появляются два метода:
Методов всего два:

obj.on(name, handler)

Например:

menu.on('select', function(a,b,c) { обработчик });

Добавит обработчик для события 'select' на объекте menu.

obj.trigger(name, args)

Например:

menu.trigger('select', [a, b, c]);

Такой вызов генерирует событие 'select' на его объекте menu и передает ему аргументы a, b, c.

При этом вызовутся все обработчики, которые были повешены на объект при помощи menu.on(..).

Обычно trigger вызывается изнутри методов объекта как this.trigger(..) или self.trigger(..).

Анимация animate.js

Функция animate находится в файле animate.js. Механизм её работы описан в главе JS-Анимация .

В файле находятся также delta-функции и преобразования makeEaseOut/makeEaseInOut.