Can a javascript file be unloaded after loaded with Ext.Loader.loadScript?

Question

I only need the three.js library if users choose a certain option. It is loaded like this. (and called like this "var motion = bd.code.tcCrowdSim.wglRndr(a,b)". Is it possible to unload after use? 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) { .....

.... not sure whether editing original or adding comment to specific answer is best way of communication?

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);
    }
},

code detects whether js loaded, and adding

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

forces a load every time suggesting that the scripts are being flushed? Since it is kicked off with

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

from a Deft ViewController, wondering when "False to remove and optionally garbage-collect asynchronously loaded scripts" is applied? Overhead-wise the canvas object holding all the webGL/Threejs stuff is created on an extjs popup window that is modal, so user closes window to continue. At this point is it true to say that there is no associated html/dom footprint?. Maybe this is more significant than having two versions of ThreeJS loaded?

Neil McGuigan · Answer 1 · 2013-11-12T08:14:27.063

3

Loader.loadScript() appends a new <script> tag to the DOM (in this case the HTML head) and then the browser runs that script.

You can remove the script from the DOM, but AFAIK in most browsers, the variables/functions/objects declared in the loaded script will still be available. You could delete them.

Here is a test, loading jQuery from ExtJS (I don't know why you'd want to do that ;):

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
    }
});

});

edited Nov 12 '13 at 08:14

answered Jul 25 '13 at 21:49

Neil McGuigan

46,580
12
123
152

I was writing a big block about how it cannot be possible to unload a script once executed, but it is possible to `delete` references it has left... before realizing that was a bit off topic :/ Now I think the answer to the OP all boils down to: in what measure can an Ext class be easily deleted? I mean, I suspect the ClassManager, etc. are keeping a lot of references to the constructor internally... Any knowledge about that? – rixo Jul 25 '13 at 21:58
possibly http://docs.sencha.com/extjs/4.2.1/#!/api/Ext-method-destroy or http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Base-method-destroy ? – Neil McGuigan Jul 25 '13 at 22:02
These methods are for observables and component, they won't work with `Ext.Class`. – rixo Jul 25 '13 at 22:05
This would be the best candidate, IMO: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ClassManager-method-undefine I haven't had any experience with it however, so I cannot say for sure. – rixo Jul 25 '13 at 22:06
Looking at the code of this function makes it very promising, though. – rixo Jul 25 '13 at 22:07

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

I won't lecture you on how it cannot be possible to "unload a script" (but you can get lectured by others if you want: How to unload a javascript from an html?).

So, what you really want is not to unload the file from memory or the tag from the DOM. What you really want is to delete all references (variables) created by this script so that the garbage collector consider it a target to terminate.

That could be relatively easy if your code was vanilla javascript like this:

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

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

That would be enough:

delete bd.code.tcCrowdSim;

Now, considering bd.code.tcCrowdSim is an Ext class, plenty of references to it are kept internally by Ext, so that won't be enough. Following discussion with Neil, it appears that Ext provides a function just for this purpose though: Ext.ClassManager.undefine.

Providing Ext developpers are reliable, then that should do the trick:

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

That being said... Is that a really good idea to use Ext class loading system for lazy loading an optional script? Considering that one day you'll probably end up compiling your application into one big minified javascript file in which this class will be present... And that's without speaking about the ridiculously low memory impact of one single Ext class in the memory environment of a modern client, be it a tiny smartphone...

edited May 23 '17 at 11:49

Community

1
1

answered Jul 25 '13 at 22:55

rixo

23,815
4
63
68

with you on all of this. I need an older r50 of Three.js and the most recent r59 also depending on the data visualization selected. Overhead of both prob ok. `` – Mic C Jul 30 '13 at 21:47
Man, don't lose your cool for nothing, your arteries and people trying to help you will probably not enjoy it... Had you anticipated the compilation issue before my comment? And, just curious, did my answer help you a bit or not at all? – rixo Jul 30 '13 at 22:21
not at all sure how my comment could lead you to believe I "lost my cool"? :-) Absolute opposite .... essential info on all answers ... not sure how the `` got in there ... is that cussing in comment-speak? You are right about the compilation thing ..... 2 copies of ThreeJs prob small in the scheme of things. – Mic C Jul 30 '13 at 22:30
Glad I didn't flame you then ^^ That would be the dry "ok" at the end, and the absence of "thanks" or this kind of stuff we usually see in grateful comments, that made me misinterpret your tone. So it's all nice that you've progressed with your problem. – rixo Jul 30 '13 at 22:37
To be honest I don't completely understand the last sentence in your initial comment... As a non-native English speaker (maybe you too?), that may be the root of my mistake. Sorry for the whole thing. – rixo Jul 30 '13 at 22:40
Oh sorry the ok was part of "overhead of 2 threejs scripts probably ok in scheme of things" .... thanks for all the info! – Mic C Jul 30 '13 at 22:45

Can a javascript file be unloaded after loaded with Ext.Loader.loadScript?

2 Answers2