Реализация «include file» в Javascript

В этой статье я расскажу, как можно очень просто написать на Javascript аналог известной конструкции во многих языках «include» или «import». Если нам при разработке проекта требуется подключать множество разных JS-файлов, то включать их все внутри HTML-блока head не очень удобно. Поэтому, мы напишем функцию, которая будет подгружать указанные в скрипте файлы один за одним и выполнять их. Таким образом подключение всех необходимых файлов сведется к примерно таким строкам внутри <HEAD>:

<script type="text/javascript" src="include.js"></script>
<script type="text/javascript"> 
     jsLoadFile.init('/files/1.js', '/files/2.js', 'http://site2/script.js');
     jsLoadFile.add('extended.js'); // добавление одного файла после инициализации
</script>

А теперь я расскажу конкретно, о самой реализации скрипта. Для подгрузки скриптов мы воспользуемся динамическим созданием HTML-элементов при помощи метода «document.createElement». Итак мы создали объект «script», далее мы назначаем ему адрес файла, который надо загрузить и присваиваем ему обработчик события «onload» (в IE 6(7) — «onreadystatechange»), который скажет нам что скрипт загружен. В этом случае важно следующий файл грузить именно только после полной загрузки предыдущего, поэтому внутри обработчика мы напишем функцию, которая будет доставать из нашего массива файлов следующий, загружать его, итд. пока массив с путями файлов не окажется пустым. В общем-то всё, основные аспекты я осветил, на результат работы смотрим ниже:

// Javascript file includer

jsLoadFile = 
{
	files: [],
	
	loading: function()
	{
		var script, 
		
		_this = this,
		
		file = this.files.shift(),
		
		ready = function()
		{ 
		    	if( (script.attachEvent && script.readyState.match(/loaded|complete/)) || script.addEventListener ) _this.loading() 
		};
		
		if( file != null )
		{
			script = document.createElement('script');
	
			script.src = file + '?' + (new Date).getTime(); // anti caching
			script.type = 'text/javascript';
	
			if( script.addEventListener ) script.addEventListener('load', ready, false);
			else script.attachEvent('onreadystatechange', ready);
			
			document.getElementsByTagName('head')[0].appendChild( script );
		}
	},
	
	init: function()
	{
		this.files = Array.prototype.slice.call(arguments);
		this.loading();
	},
	
	add: function(){ this.files = this.files.concat( Array.prototype.slice.call(arguments) ); }
}

Смотреть пример работы скрипта | Скачать в архиве

22.03.2010 / javascript