Pourquoi utiliser quelque chose comme Require.JS plutôt que de simplement créer un<script></script>

Question

Quels sont les avantages de Require.JS offre en comparaison à la simple création d'un élément dans le DOM? Ma compréhension de Require.JS c'est qu'il offre la possibilité de charger les dépendances. Mais cela ne peut pas simplement être fait par la création d'un élément qui charge le nécessaire fichier JS externe?

Par exemple, supposons que j'ai la fonction doStuff(), qui exige la fonction needMe(). doStuff est dans le fichier externe do_stuff.js tandis que needMe() est dans le fichier externe need_me.js.

Ce faisant les Require.JS façon:

do_stuff.js

define(['need_me'],function(){
    function doStuff(){
        //do some stuff
        needMe();
        //do some more stuff
    }
});

Faire cela en créant tout simplement un élément de script:

do_stuff.js

function doStuff(){
    var scriptElement  = document.createElement('script');
    scriptElement.src = 'need_me.js';
    scriptElement.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(scriptElement);

    //do some stuff
    needMe();
    //do some more stuff
}

Deux de ces travaux. Cependant, la deuxième version n'a pas besoin de moi pour charger toutes les Require.js de la bibliothèque. Donc, est la seconde de mieux pour ce que je dois faire? Si oui, dans quelles circonstances Require.js être avantageux?

Answer 1

Quels sont les avantages de Require.JS offre en comparaison à la simple création d'un élément dans le DOM?

Dans votre exemple, vous êtes en train de créer la balise de script de manière asynchrone, ce qui signifie que votre needMe() fonction serait invoquée avant l'need_me.js fichier ait fini de charger. Cette résultats dans ce type d'exception où la fonction n'est pas définie.

Au lieu de cela, rendre ce qu'on suggère en fait de travail, vous devez faire quelque chose comme ceci:

function doStuff(){
    var scriptElement  = document.createElement('script');
    scriptElement.src = 'need_me.js';
    scriptElement.type = 'text/javascript';

    scriptElement.addEventListener("load", 
        function() { 
            console.log("script loaded - now it's safe to use it!");

            // do some stuff
            needMe();
            //do some more stuff

        }, false);

    document.getElementsByTagName('head')[0].appendChild(scriptElement);

}

Sans doute, il peut ou peut ne pas être préférable d'utiliser un gestionnaire de paquets comme RequireJS ou d'utiliser un pur JavaScript stratégie comme démontré ci-dessus. Alors que votre application Web peut charger plus rapidement, en invoquant la fonctionnalité et les caractéristiques sur le site serait plus lente, car elle implique en attente de ressources à charger avant que l'action a pu être réalisée.

Si une application Web est construit comme une seule page de l'app, il faut considérer que les gens ne sont pas réellement être le rechargement de la page, très souvent. Dans ces cas, le préchargement tout allait rendre l'expérience semblent plus vite alors qu'en réalité, à l'aide de l'application. Dans ces cas, vous avez raison, on peut seulement charger toutes les ressources simplement en incluant les balises de script dans la tête ou le corps de la page.

Cependant, si la construction d'un site web ou une application Web qui suit le modèle plus traditionnel où l'un des transitions de page en page, causant des ressources pour être rechargé, un chargement différé approche peut aider à accélérer ces transitions.

Answer 2

Voici le bel article sur ajaxian.com quant à pourquoi l’utiliser :

RequireJS : Chargement de Asynchronous JavaScript

• une sorte de #include/importation/nécessite
• possibilité de charger des dépendances imbriquées
• facilité d’utiliser pour le développeur mais puis soutenu par un outil d’optimisation qui permet le déploiement

Answer 3

Certains autres a des raisons pour lesquelles l'aide de RequireJS de sens:

1. La gestion de vos propres dépendances rapidement tombe à l'eau pour importante des projets.
2. Vous pouvez avoir autant de petits fichiers que vous voulez, et ne pas avoir à vous soucier de garder une trace de dépendances ou de l'ordre de chargement.
3. RequireJS rend possible l'écriture d'un ensemble modulaire d'application, sans toucher à l'objet window.

Prises de rmurphey les commentaires ici, dans ce Résumé.

Des couches d'abstraction peut être un cauchemar à apprendre et à s'adapter, mais quand il sert un but et il le fait bien, il est tout à fait logique.