динамическая загрузка javascript на примере WYSIWYG

динамическая загрузка javascript на примере WYSIWYG

Поскольку те кто сюда попал уже знакомы с jQuery (или аналогичных библиотек), им должно быть совершенно очевидно, как правильно подгружать компоненты, избегая мешанины javascript и HTML.  Методика обычная и привычная:

1. Каждому компоненту  textarea, к которому нужно подлключить  jwisiwig присваивается определенный класс, например .jwisiwig
2. После загрузки  дерева всем элементам с классом   jwisiwig скопом подключается jwisiwig-редактор:

HTML: 
......
<textarea class="jwisiwig" name="one"></textarea>
........
<textarea class="jwisiwig" name="next"></textarea>
........
<textarea class="jwisiwig" name="last"></textarea>
........
Javascript 
$(function(){$('.jwisiwig')});
Точно так же подключаются и другие компоненты - файловые загрузчики, suggest-подсказки, tooltips и прочая. В результате как правило в header выносится куча нужных и ненужных  javascript -блоков. Чтобы избежать ненужного - строится какой-нибудь умный шаблонизатор, позволяющий из 100 ненужных плагинов отобрать 10 и засунуть их в header. Уже лучше, но тоже не очень. 
Мне больше нравится динамическая загрузка. Благо при наличии jquery  это делается легко и непринужденно. Рассмотрим подробнее.
HTML-код остается без изменений. А JavaScript будет следующим: 
$(function(){
if ($('.jwisiwig').size())
{
   $.getScript('js/common/jwysiwyg/jquery.wysiwyg.js',
   function(){$('.jwisiwig').wysiwyg();});
}
});
В самом начале проверяется наличие  компонентов  с классом jwisiwig. Если такие компоненты есть, производится Ajax-загрузка необходимого плагина для компонента (подробнее см. http://api.jquery.com/jQuery.getScript/) . После того как плагин  будет загружен вызывается функция, в которой к  jwisiwig-компонентам применяется загруженный плагин.

Демонстрационный пример
Коды можно найти в архиве wysiwyg.zip

Прим.
  1. По умолчанию в jquery  getScript работает без кэширования. Чтобы отключить кэширование необходимо его выключить принудительно. Делается это следующей командой:
    jQuery.ajaxSettings.cache=true; 
  2. Рассмотренный  способ работает во всех броузерах, кроме ie6. В ie6 необходим немного другой подход. 
12 February 2010 ключевые слова:
Ссылки на статьи по теме: "
Обсуждение в блоге-форуме тем: ""