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

您可以在Firefox中尝试新的Scratchpad功能（我认为它自7.0以来的版本）。

当我在新的javascript上努力工作时，我会在暂存器中执行此操作，然后在我喜欢的时候将其复制到我的编辑器中。基本上，我在函数和对象中完成所有工作，可以动态重新定义（不是每个人都有？）。这样我就可以重新运行函数定义或重新分配对象方法/数据，这比等待刷新周期要快得多。

Answer 3

在基于Dojo或CommonJS的框架中，它根本不是问题。 Javascript代码通常保存在模块中。

在我们基于Web的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不同，但也允许您进行一种依赖注入或解析。

如何重新加载javascript文件

3 个答案: