Vous pouvez utiliser plusieurs.Fichiers JS lors du développement d'une application Javascript complexe?
Venant d'un arrière-plan C# où chaque classe est (meilleures pratiques) stockée dans son propre fichier individuel, cela rend le développement assez propre. Je n'ai jamais rien écrit de complexe en Javascript dans le passé, mais je commence à apprendre HTML 5 et je veux écrire un jeu complexe en utilisant le canevas HTML 5.
Mettre toutes mes fonctions et mon code en un seul .le fichier js semble très désordonné. Existe-t-il un moyen de le diviser, ou un outil / IDE qui vous permet de développer en utilisant des fichiers séparés et de les compiler en un seul pour le déploiement?
Je suppose que je cherche des conseils sur les meilleures pratiques. Des Questions comme celle-ci semblent généralement se fermer, alors voici mes questions spécifiques pour adhérer à la FAQ SO qui exige des questions pratiques et répondantes:
Le développement js complexe implique-t-il généralement que tout le code soit dans un seul fichier JS? Par exemple. vous écrivez Space invaders, avez-vous juste spaceinvaders.js ou avez-vous des navires.js, logique.js etc.
Vraiment possible de diviser votre JS (que ce soit en utilisant plusieurs balises de script ou en pré-compilant dans un seul fichier JS) ou de simplement mettre tout cela dans un seul fichier?
Quelle est la norme de l'industrie? La spécification HTML 5 fait-elle des recommandations?
4 réponses
Il y a deux façons possibles. Personnellement, j'utiliserais un outil de construction pour simplifier le travail avec plusieurs fichiers.
Utilisation d'un outil de construction
Grognement
Mon outil préféré pour suivre les applications js complexes est grunt. Avec un grognement, vous pouvez développer dans autant de fichiers que vous le souhaitez et de l'utilisation de ses plugins watch et concat automatiquement concat sur enregistrer. Vous pouvez faire beaucoup plus mais c'est la base de cas d'utilisation qui peut être utile pour vous.
Grunt nécessite nodejs et prend un certain temps à installer. Mais une fois que vous êtes prêt avec votre configuration Gruntfile, cela accélère vraiment votre processus de développement.
Pour que votre projet soit prêt pour la production, vous pouvez également réduire vos scripts avec une certaine configuration et une seule commande.
Beaucoup des principales bibliothèques javascript utilisent grunt, facilement reconnaissable en fonction de leur Gruntfile: jQuery, AngularJS, Bienvenue sur
Grunt fait également partie du jeu d'outils de développement yeoman.
Brunch
Brunch est un autre outil qui vous permet de faire des choses similaires comme grunt n'.
Chargement uniquement des fichiers nécessaires
Si vous développez une énorme application d'une seule page et que vous êtes préoccupé par le temps de démarrage de votre application, un seul fichier peut ne pas être la meilleure solution. Dans ce cas, vous pouvez utiliser un chargeur de module javascript.
Exiger.js
À cet Effet require.js est un goot ajustement. Il vous permet de charger uniquement les fichiers nécessaires réels sur la page en cours. Bien que la mise en place nécessite.js est un peu plus de travail que de mettre en place grunt.
Bien sûr, vous pouvez utiliser plus d'un fichier javascript. Sinon, comment les bibliothèques aiment-elles la fonction jQuery ou Knockout?
Une chose à garder à l'esprit, cependant, est que l'une des choses que vous voulez faire pour garder vos pages accrocheuses est de réduire le nombre total de requêtes http par chargement de page. L'ajout d'un tas de fichiers javascript qui sont chargés séparément provoque une requête additonal pour chaque fichier supplémentaire. Par conséquent, vous pouvez expérimenter avec un système pour votre build qui suture vos fichiers javascript ensemble en un seul élément que vous pouvez utiliser lors du déploiement. Il y a un certain nombre de solutions là-bas qui le feront pour vous d'une manière automatisée.
Vous pourriez envisager d'utiliser requirejs - un très joli libray pour diviser votre javascript en modules. il fournit également un outil que vous pouvez "combiner" tous les modules dans un seul fichier.
Vous pouvez utiliser autant de javascript fichiers que vous le souhaitez. Ajoutez simplement un lien vers eux dans votre code html:
<body style="background-color: black" onload="main();" >
<!-- Your HTML body contents -->
<!-- Your scripts (here, I used HTML5 BoilerPlate to setup, and the links to jquery are provided) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/main.js"></script>
</body>
Ensuite, vous pouvez brancher votre main.js pour écouter l'appel de fonction main():
function main() {
//here you can do your basic setup or delegate the control of the app to a different .js file.
}
Ou le rappel jQuery document ready:
$(document).ready(function() {
//here is a good spot to hookup other jQuery listeners
});