2014-10-31 2 views
0

Когда я отлаживаю функцию Javascript в браузере и изменяю код на сервере, я хочу перезагрузить функцию в браузере, не обновляя всю страницу.Как я могу перезагрузить Javascript-файл на веб-странице?

Я попытался использовать панель Netbest Firebug для повторной отправки запроса GET для конкретного JS-файла. Содержимое JS-файла перезагружается, но когда я отлаживаю панель «Сценарий», он по-прежнему выполняет старый код.

Это действительно важно для моего проекта, потому что он имеет рабочий поток одной страницы. Если я хочу проверить логику на шаге 2, я должен обновить страницу и каждый раз выполнять шаг 1.

BTW, я использую RequireJS для загрузки зависимостей.

+0

трудно понять вопрос без блока кода. отредактируйте свой вопрос, добавив код. Не все это, а только те части, где проблема существует. – TheProvost

+0

вы имеете в виду как http://stackoverflow.com/questions/19514993/reload-updated-javascript-code-without-fully-reloading-the-html-page? или как http://stackoverflow.com/questions/9642205/how-to-force-a-script-reload-and-re-execute? –

+0

Это широкая тема. Лично я считаю, что ваши собственные решения будут хакерскими и дисфункциональными. Во-первых, проверьте документацию вашего редактора/IDE, чтобы узнать, есть ли у них такая функция, например WebStorm. Во-вторых, подумайте об использовании функции «рабочего пространства» в Chrome devtools, которая может автоматически отражать изменения, сделанные при отладке, обратно в исходные файлы, хотя я сам этого не пробовал. Подобные решения существуют для CSS, например, что-то вроде LiveStyle, хотя у меня нет личного опыта с этим. –

ответ

1

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

function reload_script_id(id) { 
    return reload_script(document.getElementById(id)); 
} 

function reload_script(old_script) { 
    var new_script = document.createElement('script'); 
    new_script.src = change_query_string(old_script.src); 
    replace_preserving_id(old_script, new_script); 
    return new_script; 
} 

function replace_preserving_id(old_el, new_el) { 
    var id = old_el.id; 
    old_el.parentNode.appendChild(new_el); 
    old_el.remove(); 
    new_el.id = id; 
} 

function change_query_string(url) { 
    return [url.split('?')[0], Math.random()].join('?'); 
} 

Например, если у вас есть

<script id="abc" src="some-script.js"></script> 

, то вы можете позвонить

reload_script_id('abc'); 

и он будет заменен на что-то вроде

<script id="abc" src="some-script.js?0.7407381518278271"></script> 

(Here's a jsfiddle demonstrating this.)

+0

Привет Крис. Большое спасибо за ваши комментарии. однако я использую requirejs для загрузки модуля. это решение не подходит для моего случая. Спасибо, в любом случае. – user1438980

+0

Да, вопрос, наверное, должен был упомянуть об этом. –

Смежные вопросы