使用 Ext.Loader.loadScript 加载后可以卸载 javascript 文件吗？

Question

如果用户选择某个选项，我只需要 three.js 库。它是这样加载的。 （并像这样调用“var motion = bd.code.tcCrowdSim.wglRndr(a,b)”。使用后可以卸载吗？tia

Ext.define('bd.code.tcCrowdSim', {

statics: {
    wglRndr: function (caller, data) { 
        this.preLoader(caller, data);
    },

    preLoader: function(caller, data) {
        Ext.Loader.loadScript({
            url: 'js/Three.js',
            scope: this,
            onLoad: function() {
                Ext.Loader.loadScript({
                    url: 'js/ShaderExtrasCrowd.js',
                    scope: this,
                    onLoad: function() {
                        Ext.Loader.loadScript({
                            url: 'js/PostProcessingCrowd.js',
                            scope: this,
                            onLoad: function() {
                                this.crowd2(caller, data);
                             }
                        })
                    }
                })
            }
        })
    },

    crowd2: function(caller,data) { .....

....不确定编辑原件或对特定答案添加评论是否是最好的沟通方式？

init : function(){
    var len = $('script[src*="js/Three2.js"]').length;
    if (len === 0) {
        console.log('SCRIPNOTLOADED');
        this.preLoader(this.caller, this.data); // preLoader.onLoad calls doScene
    }
    else{
        this.doScene(this.caller, this.data);
    }
},

代码检测js是否加载，并添加

preLoader: function(caller, data) {
    Ext.Loader.setConfig({
        preserveScripts: false
    })
    Ext.Loader.loadScript({ .....

每次提示脚本正在刷新时都强制加载？因为它是用

开始的

this.motion = bd.code.tcCrowdSim.wglRndr(a,b)

来自 Deft ViewController，想知道何时应用“False to remove and optional-garbage-collect asynchronously loaded scripts”？开销方面，包含所有 webGL/Threejs 内容的画布对象是在模态的 extjs 弹出窗口上创建的，因此用户关闭窗口以继续。在这一点上说没有关联的 html/dom 足迹是真的吗？也许这比加载两个版本的 ThreeJS 更重要？

Answer 1

Loader.loadScript() 将一个新的<script> 标记附加到 DOM（在本例中为 HTML 头），然后浏览器运行该脚本。

您可以从 DOM 中删除脚本，但 AFAIK 在大多数浏览器中，在加载的脚本中声明的变量/函数/对象仍然可用。你可以delete他们。

这是一个测试，从 ExtJS 加载 jQuery（我不知道你为什么要这样做；）：

http://jsfiddle.net/ny49m/5/

Ext.Loader.setConfig({
    enabled:true
});

console.log(typeof jQuery == 'undefined'); //true

Ext.onReady(function(){

    Ext.Loader.loadScript({

      url:'http://code.jquery.com/jquery-1.10.1.min.js',

      onLoad:function(){

        console.log(typeof jQuery == 'undefined'); //false

         //remove the script tag from the DOM:
         var scripts = document.getElementsByTagName('script');
         for(var i=0; i<scripts.length; i++){
            if(scripts[i].src.indexOf('jquery') != -1){
                scripts[i].parentNode.removeChild(scripts[i]);
            }
         }

         console.log(typeof jQuery == 'undefined'); //false

         delete(jQuery); 

         console.log(typeof jQuery == 'undefined'); //true
    }
});

});

Answer 2

我不会教你如何“卸载脚本”是不可能的（但如果你愿意，你可以得到别人的教诲：How to unload a javascript from an html?）。

所以，您真正想要的不是从内存中卸载 文件 或从 DOM 中卸载标签。您真正想要的是 delete 此脚本创建的所有引用（变量），以便垃圾收集器将其视为终止目标。

如果你的代码是这样的 vanilla javascript，那可能会相对容易：

// Manual Ext.ns
window.bd = window.bd || {};
bd.code = bd.code || {};

bd.code.tcCrowdSim = { ... };

这就够了：

delete bd.code.tcCrowdSim;

现在，考虑到bd.code.tcCrowdSim 是一个Ext 类，Ext 内部保留了大量对它的引用，所以这还不够。在与 Neil 讨论之后，Ext 似乎为此提供了一个功能：Ext.ClassManager.undefine。

如果 Ext 开发者是可靠的，那么这应该可以解决问题：

Ext.ClassManager.undefine('bd.code.tcCrowdSim');

话虽这么说...使用 Ext 类加载系统来延迟加载可选脚本真的是个好主意吗？考虑到有一天你可能会最终将你的应用程序编译成一个大的缩小的 javascript 文件，这个类将出现在其中......这还没有谈到一个 Ext 类在内存环境中的低得离谱的内存影响现代客户端，无论是小型智能手机...