2009-12-20 8 views
1

J'ai construit une page de travail avec beaucoup de javascript. Le javascript est placé entre les balises <head></head> sans problème, mais je veux vraiment le déplacer vers un fichier externe.Problème avec les fonctions (javascript)

Je pense que je serais capable de simplement couper et coller tous les codes moins <script></script> mais en incluant $(document).ready(function() { }); dans un fichier .js et de le référencer comme d'habitude, mais cela me cause de gros problèmes. Quelqu'un peut-il suggérer pourquoi je ne peux pas faire cela? En guise de compromis, je voudrais déconnecter au moins certaines de mes fonctions et les mettre dans un fichier externe mais il y a aussi des problèmes.

function look(){ 
    var word_id = $(this).attr("id"); 
    // Other stuff 
    var value = $(this).val(); 
    // Other stuff 
} 

$("input").focus(function(){look();}); 

Dans la fonction ci-dessus, ce n'est pas le cette qu'elle était lorsque le code ressemblait à ceci:

$("input").focus(function(){ 
    var word_id = $(this).attr("id"); 
    // Other stuff 
    var value = $(this).val(); 
    // Other stuff 
}); 

J'espère qu'une personne vraiment intelligente repérera mes erreurs facilement. Merci beaucoup, Patrick.

+0

Quel genre de maux de tête avez-vous éprouvé en essayant de déplacer le code js dans le fichier séparé? Comment avez-vous référencé ce fichier? Etes-vous sûr de vos scripts référencés dans le bon ordre: jquery d'abord, puis votre script? – thorn

+0

Le mal de tête était que rien ne s'est passé! Pourquoi jquery doit-il venir en premier? –

Répondre

2

Lorsque vous appelez une fonction sans contexte spécifié, comme vous appelez look(), le mot clé this à l'intérieur de cette fonction sera l'objet global.

Dans votre cas, vous ne pouvez passer une référence à votre fonction, et il fonctionne correctement:

$("input").focus(look); 

En outre, il peut être utile de savoir que le mot-clé this est pas complètement implicite, peut être réglé explicitement à l'aide des call et apply fonctions:

function test(arg1){ 
    alert(this + arg1); 
} 

test.call('hello ', 'world'); // will alert 'hello world' 

et que le contexte (le mot-clé this) est définie implicitement dans les cas suivants:

1- Lors de l'appel d'une fonction membre d'un objet, par ex.:

obj.myFunc(); // 'this' will refer to obj 

2- Lorsque vous appelez une fonction avec l'opérateur new:

var test = new Func(); // 'this' will refer to a new object 

3- Lorsque vous appelez une fonction non associée à un objet:

foo(); 
// or 
(function() {})(); // 'this' will be the global object 
+0

Vous êtes tous les deux des héros. –

2

Essayez d'utiliser ce code:

$("input").focus(look); 

Le problème est que lorsque la fonction look a été enveloppé d'une fonction anonyme le ce pointeur intérieur look a été frappée de plein fouet. Voici une explication plus explicite:

$("input").focus(function() { 
    this; // Refers the DOM element jQuery is acting on 
    // The _this_ pointer of the anonymous function is not passed to look. 
    look(); // The _this_ pointer in look instead points to the window scope. 
}); 

Si pour une raison quelconque, vous avez besoin d'envelopper un appel de fonction avec une fonction anonyme, vous pouvez utiliser le apply ou call pour passer le ce pointeur du champ extérieur à look. Voici un exemple rapide:

$("input").focus(function() { 
    ... 
    look.apply(this); 
    // This works too: 
    // look.call(this); 
}); 

La méthode call et apply sont presque identiques. Ils seulement différence dans la façon dont ils prennent des paramètres. Plus d'informations sur call and apply

+0

Vous êtes tous les deux des héros. –

0

Je vous conseille de mettre votre JS dans le pied de page, de sorte que vous pouvez vous assurer que sera seulement chargé après tout le reste sur la page (DOM) est entièrement chargé.

Questions connexes