La solution de dépendance Javascript avec des ordres arbitraires ordonnés

Question

Le problème est ceci, j'inclus un script, il utilise un autre, mais que faire si cette dépendance a besoin d'un autre script pour être prêt? Ce qui signifie que le chargement n'est pas suffisant, mais je dois également m'assurer que son rappel pour l'initialisation a été appelé avant l'exécution. L'ordre des balises de script dans DOM ne peut pas être correct si les dépendances sont autorisées à exiger plus de dépendances et à les manifester lorsqu'elles sont chargées.

Les problèmes deviennent plus complexes lorsque les scripts et les dépendances requièrent plus d'une dépendance ou qu'un fichier satisfait plusieurs composants. Using.js semble avoir une bonne approche pour cela, mais d'abord, les relations de dépendance doivent être connues avant d'être chargées, ensuite l'auteur indique que certains tests ne fonctionnent plus sur Firefox. Je soupçonne que c'est le blocage de l'exécution, qui semble un peu magique.

J'ai écrit un chargeur pour gérer cela, complètement asynchrone, ce qui semble fonctionner. Mais je ne peux pas secouer le sentiment de faire quelque chose a été résolu avant, ou ne peut pas être aussi complexe.

Answer 1

L'ordre des balises de script dans DOM ne peut pas être correct si les dépendances sont autorisées à exiger plus de dépendances et à les manifester après leur chargement.

Eh bien, quels sont ces scripts qui essaient de charger leurs propres dépendances, exactement? Ce n'est pas une fonctionnalité standard de JavaScript, donc il n'y a pas une seule réponse; comment vous y parvenez est spécifique au script qui essaie d'inclure des dépendances.

Pour les scripts chargés de manière synchrone (inclus via document.write ou l'ajout d'éléments de script au DOM au moment du chargement), vous pouvez au moins être sûr que vous pouvez continuer à charger. Pour le chargement asynchrone (scripts différés, inclusion AJAX, ou callbacks déclenchés par timeout) il doit y avoir un mécanisme de rappel. Si vous mélangez différents scripts qui ont des systèmes de dépendance et de rappel automatique différents, cela va être pénible.

J'ai écrit un chargeur pour gérer cela, complètement asynchrone, ce qui semble fonctionner. Mais je ne peux pas secouer le sentiment de faire quelque chose a été résolu avant, ou ne peut pas être aussi complexe.

Non, pas vraiment. Le traitement des dépendances et l'insertion dynamique des scripts vont toujours être un peu compliqués. La seule approche standard résolue est complètement statique, en les écrivant manuellement dans l'ordre des dépendances.

Answer 2

Il existe plusieurs approches pour résoudre votre problème. Presque toutes les approches sont dans cette présentation Javascript Dependency Management.

Celui qui résout le mieux votre problème utilise la librairie jingo.

Fondamentalement avec jingo¹ vous pouvez faire quelque chose comme cela pour déclarer un module avec des dépendances:

jingo.declare({ 
    require: [ 
     'hallmart.Greeter' 
    ], 
    name: 'hallmart.Store', 
    as: function() { 
     hallmart.Store = function() { 
     var greeter = new hallmart.Greeter(); 
     this.admit = function(customer) { 
      greeter.welcome(customer.name); 
     }; 
     }; 
    } 
}); 

Voir code.google.com/p/jingo/wiki/GettingStarted des références.

¹ code.google.com/p/jingo/~~V~~3rd

Answer 3

je suis partial, mais j'ai récemment créé un gestionnaire de dépendances javascript appelé Pyramid.Il semble similaire à d'autres gestionnaires de dépendance (et est probablement similaire à celui que vous avez créé) à l'exception de quelques fonctionnalités clés.

1. Il peut charger n'importe quel fichier, pas seulement javascript et vous permet de définir comment le fichier est inclus dans votre page Web. Pendant le développement, je l'utilise pour charger non seulement mes fichiers javascript et css, mais aussi pour insérer du HTML dans ma page principale. Cela me permet de stocker mes vues html séparément (ce qui est idéal pour les bibliothèques comme knockout)
2. Combine vos fichiers quand il est temps pour une version.
3. Rédigé entièrement en javascript, la configuration est simple. Vous n'avez pas besoin de vous préoccuper des outils externes.
4. Il vous suffit de définir le script d'inclusion pour tous vos fichiers html une seule fois. Après cela, tous les fichiers peuvent être mis à jour dans un fichier de chargeur de dépendance unique (plutôt que d'avoir à constamment mettre à jour les fichiers à inclure dans tous les en-têtes lorsque les scripts sont renommés, supprimés ou ajoutés)

Pyramid Dependency Manager documentation

Certains Exemple de code pour montrer comment cela fonctionne pendant le développement.

fichier: dependencyLoader.js

//Set up file dependencies 
Pyramid.createOrUpdate({ 
    name: 'standard', 
    files: [ 
    'standardResources/jquery.1.6.1.min.js' 
    ] 
}); 

Pyramid.createOrUpdate({ 
name:'lookAndFeel', 
files: [ 
    'styles.css', 
    'customStyles.css' 
    ] 
}); 

Pyramid.createOrUpdate({ 
name:'main', 
files: [ 
    'createNamespace.js', 
    'views/buttonView.view', //contains just html code for a jquery.tmpl template 
    'models/person.js', 
    'init.js' 
    ], 
    dependencies: ['standard','lookAndFeel'] 
}); 

Fichiers Html

<head> 
    <script src="standardResources/pyramid-1.0.1.js"></script> 
    <script src="dependencyLoader.js"></script> 
    <script type="text/javascript"> 
     Pyramid.load('main'); 
    </script> 
</head>