- Inclure un fichier .js dans un fichier .js (5 réponses )
Réponses
Trop de publicités?
Vous ne pouvez inclure un fichier de script dans une page HTML, pas dans un autre fichier de script. Cela dit, vous pouvez écrire du code JavaScript qui charge votre "inclus" script dans la même page:
var imported = document.createElement('script');
imported.src = '/path/to/imported/script';
document.head.appendChild(imported);
Il ya une bonne chance que votre code dépend de votre "inclus" script, cependant, dans ce cas, il peut échouer parce que le navigateur va charger le "importés" script de manière asynchrone. Votre meilleur pari sera de simplement utiliser une bibliothèque tierce, comme jQuery ou YUI, qui résout ce problème pour vous.
// jQuery
$.getScript('/path/to/imported/script.js', function()
{
// script is now loaded and executed.
// put your dependent JS here.
});
Je suis en désaccord avec la critique de l' document.write technique (voir la suggestion de Vahan Margaryan). J'aime la façon dont document.getElementsByTagName('head')[0].appendChild(...) (voir la suggestion de Matt Balle), mais il y a un problème important: l'ordre d'exécution des scripts inclus dans le chemin. J'ai à décrire le problème plus précisément ci-dessous.
Récemment, j'ai passer beaucoup de temps pour reproduire un problème. Bien-sait plugin jQuery utiliser la même technique (voir la src ici) pour charger les fichiers, mais des gens différents, qui avait signalé le problème avec le travail de cette. Je peux décrire le problème de la manière suivante. Laissez-nous vous avez bibliothèque JavaScript qui comprennent de nombreux scripts et un loader.js des charges de toutes les pièces. Certaines de ces pièces sont tributaires de l'autre. Laissez-nous vous incluez un autre main.js script par <script> qui utilisent les objets à partir de loader.js immédiatement après l' loader.js. Le problème est que parfois, l' main.js sont exécutés avant que tous les scripts chargés par loader.js. L'utilisation de l' $(document).ready(function () {/*code here*/}); à l'intérieur de l' main.js script n'a pas pu aider. L'utilisation d'une cascade onload gestionnaire d'événement dans l' loader.js suivre pour séquentielle au lieu de parallèle le chargement des scripts et rendra difficile l'utilisation d' main.js script qui devrait être comprend juste quelque part après l' loader.js.
J'ai pu reproduire le problème dans mon environnement et peut voir que l'ordre d'exécution des scripts dans Internet Explorer 8 peut être autre que l'ordre d'inclure du Javascript. Il est très dur de problème si vous avez besoin d'inclure certains scripts où l'un dépend de l'autre. Le problème qui est décrit dans le Chargement des fichiers Javascript en parallèle. Que la solution de contournement est suggéré d'utiliser document.writeln:
document.writeln("<script type='text/javascript' src='Script1.js'></script>");
document.writeln("<script type='text/javascript' src='Script2.js'></script>");
Il est indiqué que dans le cas "les scripts sont téléchargés en parallèle, mais exécutées dans l'ordre où ils sont écrits à la page". Après la modification de document.getElementsByTagName('head')[0].appendChild(...) technique document.writeln je n'avais jamais vu aucun problème de plus.
Donc, je vous recommande d'utiliser document.writeln.
Mise à JOUR: Si quelqu'un aurait un intérêt, il peut essayer de charger (et de recharger) la page dans Internet Explorer (sur la page, utilisez document.getElementsByTagName('head')[0].appendChild(...) technique) et de les comparer avec la version de correction utilisé document.writeln. (Le code de la page est relativement sale et n'est pas de moi, mais il peut être utilisé pour reproduire le problème que je décris).
Il n'est pas possible directement. Vous pouvez aussi bien écrire quelques préprocesseur qui peut gérer cela.
Si je comprends bien alors ci-dessous sont des choses qui peuvent être utiles pour réaliser que:
L'utilisation d'un pré-processeur qui va courir à travers vos fichiers JS par exemple la recherche des motifs comme "@import somefile.js" et les remplacer par le contenu du fichier. Nicolas Zakas(Yahoo) a écrit une telle bibliothèque en Java que vous pouvez utiliser (http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/)
Si vous êtes à l'aide de Ruby on Rails, alors vous pouvez donner Jammit actif emballage d'essayer, il utilise les actifs.yml fichier de configuration où vous pouvez définir vos paquets qui peuvent contenir plusieurs fichiers et de les renvoyer dans votre page web par le nom du package.
Essayez d'utiliser un chargeur de module comme RequireJS ou un chargeur de script comme LabJs avec la capacité de contrôler la séquence de chargement ainsi que de tirer profit de la parallèle le téléchargement.
JavaScript ne prévoit pas d'un "natif" d'inclure un fichier JavaScript dans un autre comme CSS ( @import ), mais tous les outils mentionnés ci-dessus/moyens peuvent être utiles pour atteindre le principe DRY, vous l'avez mentionné. Je peux comprendre qu'elle ne peut pas se sentir intuitive si vous êtes à partir d'un Serveur-côté arrière-plan, mais c'est la façon dont les choses sont. Pour l'avant-end les développeurs de ce problème est généralement un "déploiement et de l'emballage".
Espérons que cela aide.
