javascript揭示模块模式和jquery

Question

I'm trying to up my js foo and start to use the module patter more but I'm struggling.

I have a main page with a jquery-ui element that pops up a dialog that loads an ajax requested page for data entry. The below code is contained within the popup ajax page.

After the pop up is loaded the Chrome console is able to see and execute ProtoSCRD.testing() just fine. If I try to run that in the jQuery.ready block on the page, I get:

Uncaught ReferenceError: ProtoSCRD is not defined

Yet i can execute toggleTypeVisable() in the ready block and life is good. Can anyone shed some light?

$(document).ready(function() {
    setHoodStyleState();
    $('#hood-style').change(function(){

        hstyle = $('#hood-style').val();
        if ( hstyle.indexOf('Custom') != -1) {
            alert('Custom hood style requires an upload drawing for clarity.');
        }
        setHoodStyleState();
    });

    setCapsState();
    $('#caps').change(function(){
        setCapsState();
    });

    setCustomReturnVisibility();
    $('#return').change(function(){ setCustomReturnVisibility(); });

    toggleTypeVisable();
    $('#rd_type').change(function(){
        toggleTypeVisable();
    });

    ProtoSCRD.testing();
});


function toggleTypeVisable(){

    if ( $('#rd_type').val() == 'Bracket' ) {
        $('.endcap-ctl').hide();
        $('.bracket-ctl').show();
    }
    if ( $('#rd_type').val() == 'Endcap' ) {
        $('.bracket-ctl').hide();
        $('.endcap-ctl').show();
    }

    if ( $('#rd_type').val() == 'Select One' ) {
        $('.bracket-ctl').hide();
        $('.endcap-ctl').hide();
    }
}



ProtoSCRD = (function($, w, undefined) {
    testing = function(){
        alert('testing');
        return '';
    }

    getDom = function(){
        return  $('#prd-order-lines-cnt');
    }

    return {
        testing: testing,
        getDom: getDom
    };
}(jQuery, window));

calling the popup dialog like so - which is in fact in another ready in a diff file on the parent page:

// enable prototype button
$( "#proto-btn" ).click(function(e){
    e.preventDefault();
    showPrototype();
});

Answer 1

I don't know if it will solve your problems at all, but you are definitely missing several var statements you really should have:

var ProtoSCRD = (function($, w, undefined) {
    var testing = function(){
        alert('testing');
        return '';
    };

    var getDom = function(){
        return  $('#prd-order-lines-cnt');
    };

    return {
        testing: testing,
        getDom: getDom
    };
}(jQuery, window));

IMHO, it's best practice to use var for every variable you declare. (Function declarations do so implicitly.)

But I really don't know if this will help solve anything. But it should store everything in its proper scope.

Update

Here's one possible issue: if the document is already ready (say this is loading at the end of the body), then perhaps jQuery is running this synchronously. Have you tried moving the definition of ProtoSCRD above the document.ready block?