Методика обновления JavaScript кода через Ajax?

Question

[wartur]

Здравствуйте. Извиняюсь, если я не точно формулирую вопрос, потому что если бы я знал как его формулировать точно, нашел бы в тырнете.



Вопрос касается методики обновления приложения работающего на Ajax. Без F5(обновления), а так же вообще без перезагрузки окна.



Существует методика обновления JS, CSS, файлов основанное на добавлении к параметрам запроса версии, например метки времени файла. Данная метка генерируется скриптом. Браузер воспринимает ситуацию так, что начинает перезагружать файл, тем самым он обновятся, при этом не факт что внутри файла были обновления.



К примеру такая система обновления у vk.com и хабрахабра. Вот и у меня при слиянии файлов получается что-то вроде этого:

<link rel="stylesheet" type="text/css" href="/assets/style-e4201d5d.css?1346065709" /><br>
<script type="text/javascript" src="/assets/script-0-d4ccd02d.js?1346069479"></script><br>

Все оно безболезненно обновляется при F5 (обновление), и без него. Но при работе через Ajax после обновления приложения возникают проблемы работы. Возникает вопрос как обновить приложение. Ответ на то, как это делать с CSS файлами я нашел, и соотвественно я его просто реализую и все. Остается вопрос, что делать с работающим JavaScript.



Вопрос:

Как обновить JavaScript динамически? Если обновляться динамически по примеру CSS, то будут ли возникать конфликты работы? Как выгрузится старый JS из памяти? Как оно будет происходить, ведь фактически я заменяю исполняемый код на лету. Вот такой список вопросов, к тем кто может быть знает.



Спасибо.





ЗЫ: (UPD 2012.08.28 12:00)

В результате я очень странную проблему нашел. Я смог обновить тэг script, но потом я не смог его найти в дереве, очень странно, ведь я делал просто реплейс. В результате мое решение это перезапустить страницу на том же адресе, на котором до этого находился ajax скрипт. Немного не кошерно, но зато гарантировано и практически не мешает пользователю — так как он оказывается на той же странице на которую перешел при последнем ajax запросе.



Обновление стилей CSS я сделал двух этапной — от двух действий пользователя. На первом этапе происходит загрузка нового CSS, на втором этапе происходит удаление старого CSS, для оптимизации рендеринга. Таки образом (если использовать replace) экран не будет дергаться из-за ситуации, что старый CSS уже удален, а новый еще не подгрузился.

Answer 1

[Andrew D.Laptev]

Как вариант:

function change(oldFileName, fileName) {
	// fileName, oldFileName
	var scripts = document.getElementsByTagName('script');
	for (var i = scripts.length; i--;) {
		if (scripts[i] && scripts[i].getAttribute('src')!=null && scripts[i].getAttribute('src').indexOf(oldFileName)!=-1){
			console.log('found!');
			var newScript = document.createElement('script');
			newScript.setAttribute("type","text/javascript");
			newScript.setAttribute("src", fileName);
			scripts[i].parentNode.replaceChild(newScript, scripts[i]);
		}
	}
}

По сути, новый файл просто перекроет старый, как если бы написать в html

<script type="text/javascript" src="/old.js"></script>
<script type="text/javascript" src="/new.js"></script>

Т.е.
— функции, присутствующие и в новом и в старом файлах, будут работать по-новому.
— функции, присутствующие только в старом, останутся
— функции, присутствующие только в новом, добавятся

Comments

[wartur]

А что будет происходить с той функцией которая исполняется в данное время и участвует в обновлении самой себя. Вы хотите сказать, что после окончания исполнения данной функции, следующее к ней обращение будет уже к обновленной функции?

[Andrew D.Laptev]

а я сейчас проверю

[Павло Пономаренко]

Да

[Andrew D.Laptev]

Перезаписывает сама себя. Если что, могу скинуть архив с тестовым примером.

[wartur]

Промахнулся. Еще раз спасибо.

Answer 2

[ks_ks]

javascript dynamic load js — вроде то :)

Comments

[ks_ks]

запрос в гугл

[wartur]

а за что минусуют?

[ks_ks]

Видимо, не прочитали, что Вы также отметили, что не знаете, какой запрос писать в гуг — обычно пишут «погугли»,
— и это не считается хорошим тоном, а мой ответ как бы предполагает это самое гугление…

Answer 3

[freeek]

Не занимался подобной задачей, но, думаю, если пробовать так, то, в любом случае, неизменяемые функции надо вынести отдельно, а для изменяемых завести отдельный файл/файлы :)

Comments

[wartur]

Понял, но хотелось бы что бы оно само себя обновляло единым файлом, так удобнее с точки зрения приложения