web-dev-qa-db-fra.com

Pouvez-vous 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, elle rend le développement assez propre. Je n'ai jamais rien écrit de complexe en Javascript par 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 dans un seul fichier .js semble très compliqué. Existe-t-il un moyen de le diviser, ou un outil/IDE qui vous permet de développer à l'aide de fichiers séparés et de les compiler en un seul pour le déploiement?

Je suppose que je recherche des conseils sur les meilleures pratiques. Des questions comme celle-ci semblent généralement fermées, alors voici mes questions spécifiques pour respecter le SO FAQ qui exige des questions pratiques et fiables):

  • Le développement JS complexe implique-t-il généralement que tout le code se trouve dans un seul fichier JS? Par exemple. vous écrivez des envahisseurs spatiaux, avez-vous juste spaceinvaders.js ou avez-vous des vaisseaux.js, logic.js etc.

  • Est-il 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 tout mettre dans un seul fichier?

  • Quelle est la norme de l'industrie? La spécification HTML 5 fait-elle des recommandations?

javascripthtmlstandards
30
NibblyPig

Il y a deux façons possibles. Personnellement, j'utiliserais un outil de construction pour simplifier le travail avec plusieurs fichiers.

Utiliser un outil de construction

Grognement

Mon outil préféré pour suivre les applications js complexes est grunt . Avec grunt, vous pouvez développer autant de fichiers que vous le souhaitez et utiliser ses plugins watch et concat pour les concaténer automatiquement lors de l'enregistrement. Vous pouvez faire beaucoup plus mais c'est le cas d'utilisation de base qui peut vous être utile.

Grunt nécessite nodejs et prend un certain temps à configurer. Mais une fois que vous êtes prêt avec votre configuration Gruntfile, cela accélère vraiment votre processus de développement.

Pour rendre votre projet prêt pour une utilisation en production, vous pouvez également réduire vos scripts avec une certaine configuration et une seule commande.

Un grand nombre des principales bibliothèques javascript utilisent grunt, facilement reconnaissable en fonction de leur Gruntfile: jQuery , AngularJS , Twitter Bootstrap etc.

Grunt fait également partie du jeu d'outils de développement yeoman .

Brunch

Brunch est un autre outil de construction qui vous permet de faire des choses similaires comme le fait grunt.

Chargement uniquement des fichiers nécessaires

Si vous développez une énorme application d'une seule page et ê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.

Require.js

À cet effet require.js est un goot fit. Il vous permet de charger uniquement les fichiers réellement nécessaires sur la page actuelle. Bien que la configuration de require.js soit un peu plus de travail que la configuration de grunt.

12
Marcel Gwerder

Bien sûr, vous pouvez utiliser plusieurs fichiers javascript. Sinon, comment les bibliothèques aimeraient-elles la fonction jQuery ou Knockout?

Une chose à garder à l'esprit, cependant, est que l'une des choses que vous voulez faire pour que vos pages soient réactives est de réduire le nombre total de requêtes http par chargement de page. L'ajout d'un groupe de fichiers javascript qui sont chargés séparément entraîne une demande supplémentaire pour chaque fichier supplémentaire. Par conséquent, vous souhaiterez peut-être tester un système pour votre génération qui assemble vos fichiers javascript en un seul élément que vous pouvez utiliser lors du déploiement. Il existe un certain nombre de solutions qui le feront pour vous de manière automatisée.

4
Joel Coehoorn

Vous pouvez utiliser autant de fichiers javascript que vous le souhaitez. Ajoutez-y simplement un lien 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 la 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 prêt du document jQuery:

$(document).ready(function() {
    //here is a good spot to hookup other jQuery listeners
});
2
Phil

vous pourriez envisager d'utiliser requirejs - une bibliothèque très agréable pour diviser votre javascript en modules. il fournit également un outil qui vous permet de "combiner" tous les modules dans un seul fichier.

2
thangcao