How to prevent loading a Javascript library more than once

Asked

Viewed 53 times

1

Hello, I have a question regarding the loading of a Javascript library. I am to build an application that builds components with reuse practicality, and for that the structure of each component would be being created like this:

//componente foo
.foo = {
    style : "foo.css",
    template : "foo.html",
    script : "script.js",
    "imgDir" : "img",
    //etc...
};

Thinking of a logic to facilitate the maintenance and reuse of these components, and also in the class system of a heavily typed application I have the interest of including all the dependencies of the scripts of this component in the same component, so, if such a script was not loaded before, it should be for only then the system.

I got this idea to prevent loading the same library from the require_once PHP. Is there any way I can force the DOM to see if the script already exists on the page so it doesn’t duplicate its link? It already occurred to me this at another time and ended up that the new insertion of Jquery kind of locked my application, because it was recreating the contents of a library inside the document and with that I lost instances and methods already declared and in use.

php javascript

  • "with this I lost instances and methods already declared and in use", this is not true. It is impossible to lose an instance in use. When an instance is in use, its constructor will still exist because there is possibility of it being used, it is automatically deleted by the browser when it is dropped and can no longer be used. Just because the constructor of an instance is declared in a variable, property of an object or expression, etc., does not mean that it will disappear from nothing; functions/objects are not primitive values, and to be accessed they are 'referenced'.

  • if in you have in a library something like window.foo = new foo() it will disappear with everything that has already been manipulated or inserted inside a prototype

  • It will disappear, but it will still exist, IE you "no" will lose instances, and you will not lose what is in the prototype

2 answers

2


  • thinking this way is really interesting, but in this case I would have to every time see if there are these elements... I already use the requirejs, what I don’t like in it is that if I register in the app.js that a screen should use the same, require exits loading all scripts after the system has opened, even those that are not being used at that time.

  • was reading in the documentation of the Requirejs, I believe that I was using the same in a wrong way... I can really load information ondemand, from what I request for page rs

0

First, as my comment says, you do not lose instance of a class if it is reset to an identifier or property, for example:

class A {
    method() {}
}

let instance = new A
A = null

instance.method // Function
instance.constructor // A

I hope you finally understand my comment.

Getting back to the subject:

Is there any way, I force the DOM to see if the script already exists on the page to not occur of it duplicate its link?

And why would that be? Anyway, you can not prevent this duplication through HTML, would need one of the languages that has access to the DOM and that are supported by browsers, often Javascript, and Vbscript can also be used in <= MS IE 10.

If you prefer not to load the duplicate script, you can do a DOM search to verify that its link was not used in another script before loading it.

let findScript = (el, src) => {
    var children = el.childNodes

    for (var child of children) {
        var name = child.tagName
        if (name) name = name.toLowerCase()

        if (name === 'script' &&
            child.src === src) {
            return child
        } else {
            let result = findScript(child, src)
            if (result) {
                return result
            }
        }
    }
}

let scriptPath = ""

if (!findScript(document, scriptPath)) {
    // Pode carregar o script
}

And another alternative to prevent duplication: depending on the library, you can check for its footprint on the global object before loading the duplicate script:

// jQuery, se definido, deveria ser uma função
if (typeof self.jQuery === 'undefined') {
    // Carregue o script
}

Another alternative would be to stop the execution of the code of this library, at the top of the code, if it has any trace in the global object.

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.