Définition de fonctions en Javascript Dans jQuery

Question

Je travaille sur un site exclusif, et je vais avoir des problèmes. J'utilise jQuery avec prototype, et je l'ai bien espaces de noms, donc dans cette question suppose que vous pouvez utiliser $ ou jQ comme une référence à des espaces de noms jQuery.

J'ai un tas de fonctions, un certain mélange jQuery et javascript, javascript plaine, certains jQuery seulement. Maintenant, actuellement certaines fonctions sont définies dans la fonction jQuery document.ready, et certains sont définis en dehors de celui-ci, un peu comme ceci:

jQ(document.ready(function($) {

  if ( ifConfig ) {
    //page check, function calls here
    fnc1();
    fnc2();
    fnc3();
    fnc4();
  }

  function fnc1() {
    //fnc code in here
  }
  function fnc2() {
    //fnc code in here
  }
});  //end document.ready

function fnc3() {
}
function fnc4() {
}

Maintenant, c'est tout le code pseudo, vous pouvez assumer les fonctions sont valides et ont un code valide en eux. Récemment, je faisais du débogage, et un de mes fonctions qui a été déclarée et appelé à l'intérieur du document.ready a dit qu'il a été défini. Je l'ai déplacé en dehors de la document.ready, et tout fonctionnait à nouveau.

Je suis fondamentalement d'essayer de comprendre l'ordre de la façon dont les fonctions sont initiées / called mieux, donc ma question est quand vous déclarez des fonctions à l'intérieur du document.ready et quand vous ne vous déclarez les dehors? Avez-vous seulement à l'intérieur quand déclariez ils sont appelés dans ce document.ready seulement? Ou devrais-je toujours juste les déclarer en dehors de cette document.ready?

Merci.

Answer 1

En général, vous devez déclarer et définir votre propre namespace, où tous de votre logique d'application (y compris les fonctions / méthodes) est situé. De cette façon, vous évitez collision avec d'autres scripts sur votre site + cette façon, votre code est beaucoup plus propre et plus facile à maintenaine.

var myapp = function(){
    var foobar1 = null,
        foobar2 = null,
        foobar3 = null;

    return {
        getFoobar1:  function(){
           return foobar1;
        },
        getFoobar2:  function(){
           return foobar2;
        },
        setFoobar1:  function(foo){
           foobar1 = foo;
        },
        clickhandler: function(e){
           alert('I am an event handler, and I am not anonymous');
        }
        // etc.
    };
};

$(document).ready(function(){
    var Application = myapp();

    Application.getFoobar2();

    $(document).bind('click', Application.clickhandler);
});

Ce motif (certains appellent le « modèle de méthode ») crée une fonction closured / objet qui garantit également les variables membres privées au sein de votre espace de noms, accessible uniquement par les fonctions de getter de l'extérieur.

Ceci est vraiment seulement un exemple assez basique, vous pouvez pousser cette idée et modèle à une extension, ce qui est très agréable et une bonne chose (OMI).

Un grand livre sur ce genre de choses qui a été nommé et assez souvent recommandé est "Javascript: The Good Parts". Par Douglas Crockford

Answer 2

Si une fonction est uniquement utilisée à l'intérieur du document fonction prêt, puis déclarer à l'intérieur de sorte que vous ne pollue pas la portée globale. Dans le cas contraire, déclarer à l'extérieur il le reste de votre script a accès à ces fonctions.

Answer 3

(document) est plus utilisé .ready pour des choses qui doivent être exécutées au chargement de la page, et non la fonction déclarations. Si vous les déclarez à l'intérieur de (document) .ready, leur champ d'application sera locale à ce bloc - si elles sont utilisées que localement, c'est très bien et ils doivent y être déclarés. Dans le cas contraire, les déclarer à l'extérieur.

Dans votre exemple, si les fonctions ne sont utilisées dans ce bloc, ils devraient être déclarés là-dedans. S'ils sont utilisés d'autres endroits en plus, ils doivent être déclarés à l'extérieur.