как перезагрузить файл JavaScript

Question

У меня есть вопрос о перезагрузке файлов JavaScript. Я разрабатываю интерфейсы веб-страниц и много пишу в JS. Каждый раз, когда я хочу проверить правильность потока приложения (или выполнить некоторую отладку), мне приходится нажимать клавишу F5 , чтобы перезагрузить всю страницу и ее сценарии, и мне приходится ждать. Время ожидания зависит от веса страницы, и иногда я теряю терпение. Поэтому мне интересно, есть ли способ перезагрузить только измененный файл скрипта *.js? или, может быть, есть какой-нибудь плагин для Chrome для перезагрузки выбранного скрипта? Это может быть очень удобным способом облегчить разработку. Спасибо за ответы.

этот использует jQuery, например, здесь:

var scs=$('script[type*=javascript]');
var scsl = scs.length;
var scsi = 0;
var o = [];
var oi = 0;
var ol = 0;
var s = '';
var fws = 0;
var sws = 0;
var v = {};

function i1(){
fws = window.setInterval(function(){
        v = $(scs[scsi]);
        
        s = v.attr('src');
        if(typeof s!='undefined' && s.indexOf('http')==-1 && s.indexOf('index')==-1){
                console.log([scsl,scsi,s]);
                o.push({src:s});
                v.remove();
        }

        if(scsi==scsl){
                console.log(o);
                window.clearInterval(fws);
                ol = o.length;
i2();
        }
        else{
                scsi++;
        }
},800);
}

function i2(){
                sws=window.setInterval(function(){
                        v = o[oi];
                        sc = $('<script>').attr({type:'text/javascript',src:v.src+'?t='+(new Date().getTime())});
                        console.log([ol,oi,v.src]);
                        $('head').append(sc);

                        if(oi==ol-1){
                                window.clearInterval(sws);
                        }
                        else{
                                oi++;
                        }
                },800);

}
i1();

Answer 1

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

Даже если вы удалите узел <script>, это не изменит поведение. Это может быть возможно, например, с помощью какого-либо стороннего плагина, но я почти уверен, что это невозможно с любой реализацией vanilla js.

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

Итак, вы должны держать клавишу F5 на ногах.

Answer 2

В Dojo или CommonJS фреймворках это не проблема.Код Javascript обычно хранится в модуле.

В нашей веб-среде IDE мы все время перезагружаем сценарии, как показано ниже (@reloadCustomMobileStack):

define([
    'dojo/_base/declare',
    'require'
], function(declare,require)
{
    return dojo.declare("xappstudio.manager.DynamicScriptMixin", null,
    {
        _reloadModule:function(module,reload)
        {
            require.undef(module);
            var scripts = document.getElementsByTagName('script');
            for (var i = scripts.length - 1; i >= 0; i--)
            {
                var script = scripts[i];
                if (script.getAttribute('src') && script.getAttribute('src').length > 0 && script.getAttribute('src').indexOf(module)!=-1)
                {
                    script.parentNode.removeChild(script);
                    break;
                }
            }

            if(reload)
            {
                require([module], function(_moduleIn)
                {
                    console.error('got module' + _moduleIn);
                });
            }
        },
        reloadCustomMobileStack:function()
        {
            var modulesToReload = [
                'cxapp/delegates/BootDelegate',
                'cxapp/delegates/FormDelegate',
                'cxapp/delegates/HeaderToolbarDelegate',
                'cxapp/delegates/ImageResizeDelegate',
                'cxapp/delegates/ServiceDelegate',
                'cxapp/delegates/UrlDelegate',
                'cxapp/manager/Context',
                'cxapp/manager/CustomApplication',
                'cxapp/manager/DataManager',
                'cxapp/types/Types',
                'cxapp/utils/RPCProxyPOSTEnvelope'
            ];

            for(var i = 0 ; i < modulesToReload.length ; i++)
            {
                this._reloadModule(modulesToReload[i],true);
            }

        }
     });
}); 

Чтобы использовать require.undef(module), необходимо добавить это здесь в свойКонфигурация Dojo: has:{'dojo-undef-api': true}

Конечно, это не будет работать ни с одним Javascript, поскольку Dojo / Common-JS Javascript отличается, но позволяет вам также вводить или разрешать зависимости.

Answer 3

Вы можете попробовать новую функцию Scratchpad в Firefox (я думаю, что она выпускается с 7.0).

Когда я сильно переживаю за новый фрагмент JavaScript, я делаю это в блокноте, а затем копируюв мой редактор, когда мне это нравится.По сути, я делаю всю свою работу в функциях и объектах, которые можно переопределить на лету (не все?).Таким образом, я могу просто перезапустить определение функции или переназначить метод / данные объекта, и это намного быстрее, чем ожидание циклов обновления.