J'écris beaucoup de code JQuery dans une page et j'ai décidé de déplacer certaines des fonctions vers un fichier séparé. Ainsi, le fichier # 1 n'a que des définitions de fonctions:

function doSomething() { ... } 

function doSomethingElse() { ... }

Dans la page principale, j'ai placé mon JQuery à la fin du fichier - en suivant les techniques d'optimisation trouvées dans le livre de Zakas "High Performance Javascript".

Donc, à la toute fin du fichier (mais avant la balise de fermeture du corps), j'ai:

<script type="text/javascript" src="/scripts/MyFunctions.js"></script>
<script type="text/javascript">
    doSomething();
    doSomethingElse();
 ....
</script>

Notez que les scripts Javascript finaux sont chargés - et exécutés - après le chargement de la page et la déclaration du DOM. Cependant, je reçois une erreur chaque fois qui dit que 'doSomething' n'est pas défini.

Cela fonctionne sans problème si les fonctions sont incluses dans le script principal. Ce n'est que lorsque je les tire à l'extérieur que j'obtiens cette erreur. Maintenant, je suppose que le premier fichier n'a pas été entièrement chargé / compilé lorsque le second effectue ses appels. Mais il me semble que le dernier script (agissant essentiellement dans le rôle "Ready") devrait être celui compilé en dernier. Lorsque je regarde JQuery et d'autres fichiers JS, ils commencent par des fonctions anonymes plutôt que de se lancer directement dans les définitions de fonction, si clairement qu'il se passe autre chose.

Notez que je ne pense pas à un problème de chargement / recherche du fichier: j'ai essayé différents chemins pour m'assurer que le chemin est correct et cela n'a pas résolu le problème.

Quelqu'un sait-il pourquoi mes fonctions ne sont pas trouvées?

Mise à jour: si je prends le contenu du fichier exactement tel qu'il se trouve et que je le mets dans la première balise de script plutôt que de le charger à partir du fichier, cela fonctionne très bien. Mais j'ai vérifié le nom du fichier de script à plusieurs reprises et il est correct. Il s'agit donc du processus de chargement à partir d'un fichier externe.

MISE À JOUR: Résolu. Je l'ai parcouru via FireBug comme suggéré par keegan et dskrepps et il m'a sauté aux yeux. J'avais une variable ASP.NET que je plaçais dans les scripts mais, bien sûr, ASP.NET n'analyse pas le fichier ni ne remplace les variables. Lorsque Javascript a vu ces valeurs remplaçables, il mourait d'une erreur d'analyse non signalée. Donc - le fichier n'était PAS en cours de chargement et ce n'est pas du tout un problème d'appel de fonction Javascript. Au lieu de cela, c'était une erreur entre le clavier et le siège. ;-)

Merci à tous ceux qui ont aidé!

4
Mark Brittingham 6 oct. 2011 à 21:24

4 réponses

Meilleure réponse

Ce n'est probablement pas un problème qui peut être résolu via le bloc DOM-Ready, c'est-à-dire:

// Do something when the DOM is ready
jQuery(function() {

});

Car le chargement de JavaScript via de simples balises de script garantit l'ordre d'exécution (en supposant que les attributs defer et async ne sont pas définis), donc le placement des fichiers dans l'ordre devrait être suffisant. en bref, en supposant que les fichiers sont en cours de chargement, le placement d'un fichier après l'autre devrait permettre au second d'utiliser la fonctionnalité du premier.

Avez-vous vérifié dans Firebug / Web Inspector pour vous assurer que vous n'obtenez pas 404 pour ces fichiers?

Dans votre fichier myFunctions, enveloppez-vous le code dans une fonction anonyme? cela gardera les définitions privées (à moins que vous ne les exposiez explicitement) ce qui vous empêcherait de pouvoir y accéder dans un autre bloc.

Par exemple, si myFunctions.js ressemble à ceci:

// Anonymous closure
(function() {
    function doSomething() {}
    function doSomethingElse() {}
})();

Vous ne pourrez pas appeler ces fonctions à partir de la page, vous devrez les ajouter en tant que propriétés de la fenêtre ou d'un espace de noms global.

J'espère que cela pourra aider. à votre santé!

2
keeganwatkins 6 oct. 2011 à 17:50

Raison totalement différente mais même symptôme - une des fonctions de mon fichier .js inclus manquait un crochet de fin.

0
DFBerry 22 juil. 2012 à 13:20

Comme onReady ne fonctionne pas, un moyen très simple de vérifier si le fichier est chargé est de placer alert('Running'); dans le fichier, tout en bas. S'il n'alerte pas, il pourrait y avoir une erreur de syntaxe dans votre fichier. Vérifiez votre console d'erreur, votre firebug ou certains outils de développement pour le déboguer. S'il alerte, vous pourriez avoir mal orthographié les noms de fonction.

Soyez également conscient de la différence entre les noms de chemin absolus et relatifs. Si je me souviens bien, '/script.js' se chargera de 'example.com/script.js' tandis que 'script.js' se chargera de 'example.com/WhereEverYouAre/script.js'

Si vos fonctions peuvent ne pas être définies globalement, définissez-les comme suit:

window.doSomething = function() { ... }
1
DSKrepps 6 oct. 2011 à 17:53

Vos fichiers doSomething() et doSomethingElse() font-ils partie d'un appel $(document).ready()? Cela provoquerait probablement leur déclenchement après que vous ayez réellement essayé d'appeler ces fonctions.

Et tandis que jQuery commence par un appel de fonction anonyme, il est dans une fermeture de sorte que la fonction anonyme est appelée immédiatement, c'est-à-dire que les fonctions à l'intérieur sont créées immédiatement.

1
maxedison 6 oct. 2011 à 17:39