Рано или поздно при написании JavaScript’а возникает необходимость в том, чтобы он был автоматически запущен при загрузке страницы. Нужно это, как правило, для следующих действий: инициализация интерфейса (UI) и отложенная загрузка данных (lazy load).Как часто бывает, для такой простой на первый взгляд задачи, есть несколько способов решения.
Задача. После загрузки страницы, нам нужно каким-то образом проинициализировать меню функцией initiPageMenu(), которыя находится в файле menu.js.
Способы решения:
- Самый простой способ: в конце js-файла делаем вызов нужной функции.
Самый простой способ имеет множество недостатков:
- если скрипт подключается в теге , у него нет доступа к DOM-модели;
- вызов необходимой функции блокирует загрузку других скриптов;
- необходимо учитывать, что к моменту загрузки скрипта, DOM-модель существует и все необходимые зависимости учтены (например, загружен другой скриат).
- при просмотре файла menu.js не всегда очевидно, что будет выполнена функция initiPageMenu();
- данный способ ничего не знает о UpdatePanel.
- На серверной стороне в событии OnLoad или OnPreInit добавить следующий код:
Этот способ значительно лучше. Вызов функции initiPageMenu() будет помещен в конец тега . Из недостатков отмечу следующее:
- при изменении имени функции необходимо перекомпилировать серверный код со всеми вытекающими отсюда последствиями;
- вызов клиентской (javascript) функции находится в серверном коде - ничего плохого в этом нет, но, imho, теряется красота кода на стороне сервере; хочу отметить, что во многих случаях этот вариант остаются единственным возможным (когда необходимо передать в клиентский код значение серверной переменной).
- В файле menu.js добавить функцию page_load():
После загрузки страницы, ScriptManager ищет все обработчики page_load() и выполняет их в порядке загрузки. К моменту начала выполнения этой функции страница уже полностью загруженна браузером и есть доступ к DOM-модели.
Недостатки:
- неширокая распространённость данного подхода (а недостаток ли это?);
- не работает без использования на странице ScriptManager (а такие страницы ещё остались!).
- Последний способ, о котором я хочу рассказать - событие document.ready() при использовании jQuery:
Недостаки тут тоже есть (куда же без них?)
- необходимо использовать библиотеку jQuery;
- как и первый, данный способ также ничего не знает о UpdatePanel.
Какой способ использовать - каждый должен выбрать сам. Единственное, на что необходимо обратить внимание - использование нескольких способов одновременно сильно усложняет понимание и сопровождение кода. Исключением из этого правила является пункт 2, но и его можно обойти при использовании IScriptControl и клиентских событий AjaxScriptManager.