javascript - Refactor $(document).ready(), currently have 2 instances - Stack Overflow

admin管理员组

文章数量:1291025

I've got following JavaScript functions but want to refactor the $(document).ready() as I've got 2 instance of it. How can I achieve this?

FlashMessenger = {
    init: function() {
        setTimeout(function() {
            $(".flash").fadeOut("slow", function () {
                $(".flash").remove();
            });
        }, 5000);
    }
}

SelectLanguage = {
    init: function() {
        $('#selectLanguageId').change(function() {
            $('#frmSelectLanguage').submit();
        });
    }
}

$(document).ready(FlashMessenger.init);
$(document).ready(SelectLanguage.init);

I've got following JavaScript functions but want to refactor the $(document).ready() as I've got 2 instance of it. How can I achieve this?

FlashMessenger = {
    init: function() {
        setTimeout(function() {
            $(".flash").fadeOut("slow", function () {
                $(".flash").remove();
            });
        }, 5000);
    }
}

SelectLanguage = {
    init: function() {
        $('#selectLanguageId').change(function() {
            $('#frmSelectLanguage').submit();
        });
    }
}

$(document).ready(FlashMessenger.init);
$(document).ready(SelectLanguage.init);

• javascript
• jquery
• refactoring

Share Improve this question Follow asked Sep 17, 2010 at 13:13 tomtom 8,3691212 gold badges5252 silver badges7171 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 8

It’s perfectly acceptable to set multiple handlers for $(document).ready, although you may have a good reason to do otherwise that I’m not aware of. You might be interested in knowing that $(handler) can be used as shorthand for $(document).ready(handler):

$(FlashMessenger.init);
$(SelectLanguage.init);

If you really want them in one call though, try this:

$(function() {
    FlashMessenger.init();
    SelectLanguage.init();
});

First off, there's no reason you have to bine them.

But if you want to:

$(document).ready(function(jq){
    FlashMessenger.init(jq);
    SelectLanguage.init(jq);
});

Breaking it down:

• Create a function to do all your init (it can be named or anonymous; the one above is anonymous).
• Have it call the other init functions, passing in the jQuery instance that jQuery passes you just in case they use it.

You might choose to wrap each init call in a try/catch block as well, so that errors in one init don't prevent the next init from occuring, but that depends on your needs.

Just bine them into one call with an anonymous function:

$(document).ready(function()
{
  FlashMessenger.init();
  SelectLanguage.init();
});

$(document).ready(function() {
    FlashMessenger.init();
    SelectLanguage.init();
});

Option 1

FlashMessenger = {
    init: function() {
        setTimeout(function() {
            $(".flash").fadeOut("slow", function () {
                $(".flash").remove();
            });
        }, 5000);
    }
}    
SelectLanguage = {
    init: function() {
        $('#selectLanguageId').change(function() {
            $('#frmSelectLanguage').submit();
        });
    }
}

$(function(){
    FlashMessenger.init();
    SelectLanguage.init();
});

Option 2

FlashMessenger = {
    init: function() {
        setTimeout(function() {
            $(".flash").fadeOut("slow", function () {
                $(".flash").remove();
            });
        }, 5000);
    }
}

SelectLanguage = {
    init: function() {
        $('#selectLanguageId').change(function() {
            $('#frmSelectLanguage').submit();
        });
    }
}

$(document).ready(function(){
    FlashMessenger.init();
    SelectLanguage.init();
});

Option 3
You actually don't need those 2 objects since the only hold the init methods, so here's the ultimate solution, in my opinion, unless you use those objects elsewhere.

$(function(){
    $('#selectLanguageId').change(function() {
        $('#frmSelectLanguage').submit();
    });
    setTimeout(function() {
        $(".flash").fadeOut("slow", function () {
                $(".flash").remove();
        });
    }, 5000);
})

I prefer 2 and 3 for this reason.

I think what the op is saying is, "If in the future I have a third function to be invoked at document.ready, then how do I do it without touching that piece of code?"

If you do not want multiple $(document).ready() calls, you could just create an array called startupHooks and add each method to it:

startupHooks[ startupHooks.length ] = myNewStartupHook;

and your startup script could look like

$(document).ready(function() {
    for( var i=0; i<startupHooks.length; i++ ) {
        startupHooks[i]();
    }
}

I know that is not mighty useful, but if that appeals to you, you can do it this way.

Personally, I'd go with multiple $(document).ready() calls.

Personally I'd go for not using document.ready at all. If you place the scripts at the end of your html-page(just before the tag) you can just write in any way you like. Maybe this doesn't work for 0.01% of the scripts but it never failed to work for me.

Positive effect of this is that the initial HTML+CSS rendering goes faster. You can also read about it on yahoo. http://developer.yahoo./performance/rules.html#js_bottom

本文标签： javascriptRefactor (document)ready()currently have 2 instancesStack Overflow