Configuration d'une fonction init dans jQuery

Juste une petite question, je voulais savoir comment je pourrais le mettre en place en fonction init() alors la fonction exécuter sur le document.prêt. Ce code est utilisé dans un autre main.js fichier. Est-il besoin d'être appelée à partir de la page d'index?

$('#main_right_line_one').click(function(){
    $('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){
        $('#main_light_layover').fadeIn('slow');
    });
});

$('#main_right_line_two').click(function(){    
    $('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){
        $('#main_regular_layover').fadeIn('slow');
    });
});

$('#main_right_line_three').click(function(){
    $('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){
        $('#main_deep_layover').fadeIn('slow');
    });
});

Toute aide est appréciée. Je suis vraiment d'essayer d'envelopper ma tête autour de cela, mais je n'arrive pas à trouver une bonne tutoriels qui expliquent init() assez bien pour mon code spécifique.

source d'informationauteur user2635811

  1. 27

    Pas de besoin pour des "appels", l'inclure dans la page avec <script src="yourfile.js"></script> et juste envelopper de votre code comme ci-dessous pour vous assurer qu'il est exécuté après le dom est prêt (et les éléments présents).

    $(function () {
   //your code goes here

});

    $( a_function ) est court pour $(document).ready( a_function ); plus sur prêt gestionnaires dans la documentation.

    La raison pour laquelle $(document).ready(...)/$(...) est nécessaire à tous, c'est que jquery, comme le $('#main_right_line_one') ne voit que les éléments qui sont présents au moment de l'exécution dans l'arborescence DOM. Cependant, <script> contenu des balises sont généralement exécutées par des navigateurs dès qu'ils sont remplis; et <script> éléments sont généralement situés dans les <head>. Ainsi, les scripts voyait souvent incomplète arborescence DOM. Maintenant, grâce à la conception de jQuery, même si $('#main_right_line_one') ne correspond pas à tous les éléments, il y aurait toujours pas d'erreur; et le click gestionnaire liés à 0 éléments.

    Tout cela peut être évité par emballage de ce type de code dans $(function() { ... })qui assure que tout ce code sera exécuté après le DOM a été entièrement initialisé (ou immédiatement si elle l'a déjà été initialisé).

    La raison pour laquelle il y a une abréviation, comme $(function() {}) pour $(document).ready(function() {}) est que l'exécution de code seulement après l'arbre du DOM a été fini est d'une nécessaire motif que presque chaque page en utilisant jQuery serait de l'utiliser.

  2. 23

    Dans votre page d'index:

    <html>
<head>
    <title>Your title</title>
</head>
<body>

    <!-- Your HTML here -->

    <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
    <script src="main.js"></script>
</body>

    Vous avez raison en ce qu'il est de bonne pratique pour l'emballage de tous vos code dans un objet et l'appeler avec un init() fonction. Afin de vous main.jsvous pourriez avoir:

    $(document).ready(function() {

    myPage.init();

});

    Et puis ci-dessous, vous pouvez définir votre objet de page comme suit:

    var myPage = (function() {

    var that = {};

    that.init = function () {

        $('#main_right_line_one').click(function(){
            $('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){
                $('#main_light_layover').fadeIn('slow');
            });
        });

        $('#main_right_line_two').click(function(){    
            $('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){
                $('#main_regular_layover').fadeIn('slow');
            });
        });

        $('#main_right_line_three').click(function(){
            $('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){
                $('#main_deep_layover').fadeIn('slow');
            });
        });

    }

    return that;

})();