Question

At the moment, I have a whole bunch of html + php files with a $(document).ready function in each.

I believe that the way to go is to collate as much of my JS as possible into a single file, and that I will need to namespace the functions.

So, if I have a php file called product_edit, then I would do something like the following:

<script type="text/javascript"> 
    $(document).ready(function(){
        productActions.documentReady(); 
    });
</script>

And then in my single site_scripts file, I could do something like this:

var productActions = {
    documentReady: function() {
        $('#date').change(function() {
            someGlobalFunction();
            productActions.getTerms();
        });

        $('#product_id').change(function() {
            productActions.getTerms();
        }); 
    },

    getTerms: function() {
        //do something here
    }
};

Firstly: Am I going about this in the right way? Is this overall methodology on the right track…or it is nonsense?

Secondly: it seems that my site_scripts file gets cached, so I have to clear my browser cache every single time I make any changes to it. Are there any quick ways around this?

Answer 1

No need to wrap it in an extra function (as the commenters have said)

$(document).ready(productActions.documentReady)

There a lot of different ways to handle caching. For example you may want to put a timestamp on the file when it was saved (we do this automatically in a build script) and then apply far-futures expires headers so it’s only downloaded once.

Also, for your namespace, it’s pretty common practice to have a global namespace in all caps. I work at i.TV and we do something like this:

window.ITV = {pages:{}}
ITV.pages.tvListings = {
   init: function() { } // basic init for page
   prop1: "bla bla bla"
} 

And then we can do some fanciness and in your php do something like this, which is completely re-usable across all of your pages:

var pageName = "<?= $pageName ?>";
if (ITV.pages[pageName]) $(document).ready(ITV.pages[pageName].init);