Structuring JavaScript(s)

In my project I have a variety of jQuery, PHP and so on, I quickly realized that much of my jQuery needed to go in a separate JavaScript file so that it is inserted appropriately in to my page - this is fine.

I am however a little confused by the naming. I started out with two pages in two different project files, that seemed logical, in each one I created a JS file with a different name (one was asset.js the other jq.ja). When I export however my script is renamed to script.min.js.

This perplexed me for a while as my exports from each project were competing with each other, whichever one I exported last would overwrite script.min.js and I'd effectively lose any code from the other project. I have now merged my pages in to one project which eliminates this problem but now I feel I have jQuery code that is page specific which will all run regardless of which page I am on - correct?

My question is how should I structure my jQuery scripts / code, for example in my

$(document).ready( function ()

I initialize several dataTables - these however are not all on the same html.php page. Should I have a function per page that is specific to that page?

Thanks for all of the help so far, BS is saving me hours and the support forum has been excellent.

posting to bump this up as I don't have an answer, but just in case the post got lost in the shuffle, hopefully someone will answer you as I would like to know as well. I'm not good with the Javascript code stuff myself either so although I can usually get what I need working, it's not intuitive to me either.

Thanks Jo, still confused and have a console littered with errors trying to manipulate elements that are in a different page. Any suggestions would be most welcome!

As I have looked in to this I'm thinking that BSS doesn't differentiate scripts at all so basically everything runs for every page in the project, when using jQuery this is problematic as it'll often be looking for elements that don't exist int eh current page.

I think that for now my solution will be to use the location object in my document.ready, for example:

$(document).ready(function(){
    console.log("Document ready for "+location);
    console.log("Document ready for "+location.host);
    console.log("Document ready for "+location.pathname)
    ....

pathname is the actual path to the file which I plan to use to identify which page I am on then have conditional logic to execute jQuery functions just for that page. Painful but it should get it done.

Although I have no idea what you just said HAHAHA, you are correct on the "doesn't differentiate scripts". All CSS and JS currently are added to the head of all pages. I believe they are working on some things to help with this part, but I don't know what the priority of that is so not sure when we'll see that update. Glad you found a work around for it. :)

Don't forget to rearrange the order of your JS as needed as well.