Caching selectors in objects using jQuery
<p>I was writing a bit of simple UI stuff today and am only able to use jQuery for the project, no Backbone, KnockoutJS, etc...</p>

<p>So, basically I wrote some objects that look like this-ish...</p>

<pre><code>var UI = UI || {};
UI.login = (function($){
    function Welcome(){
        this.firstName = $("#firstName");
        this.lastName = $("#lastName");
        this.email = $("#email");
        this.password = $("#password");

        this.message = $("#message");

        this.init();
    }

    Welcome.prototype.init = function(){
        this.email.bind('blur', $.proxy(this.checkEmail, this));
        // etc..etc...
    };

    Welcome.prototype.checkEmail = function(event){
        var email = $(event.currentTarget).val();    

        if(!checkEmail(email)){
            this.message.html('This email is invalid.')
                .show();
        }
    };

    function checkEmail(email){
        // do dome validation
        return isValid;
    }
    // etc.. etc...

    return Welcome;
}(jQuery))
</code></pre>

<p>My question is... Is caching those selectors in the Welcome constructor a GOOD or BAD idea? Also, I'd like to maybe just get some feedback on this pattern...</p>

<p>Thanks!</p>
