如何在每个HTML页面上分别执行jQuery / Ajax加载

Question

Please I have few html pages that i include some js scripts after the body . My script are working fine and successful. However, it gets messy putting the two together as the project grow. I then took the js in to an individual files . The problem is, now i reference all the files and the js codes became available for each and every html page.

I have events where I check each page load , because i want to execute or start my file on the page load . Now this page loads fire on every page load . Example below,

(function() {

    $(this).on('load', function(){
        console.log("the init is");
        var g = true;

        if(g    === false)
            window.location = '/';

        init();
    });


    var init = function(){
        $('#btnAdd').on('click',function(e){
            e.preventDefault();
            e.stopPropagation();
            alert("Butoon click");
        });
    };

})();

Before when I embed a similar code above, it fires when my page is executed and my load became the entry point as I wanted . But now I moved them to separate html file and reference them which most have the same or similar functions. Now when i visit very html page, the onload method fires regardless , because they are all reference and available for each page.

Please is there any way I can refactor my code to separate every js file for a separate html page/url. How do I make jQuery or ajax load call with reference to the url? How do I make each file fires when its respective html/url is requested from server or loading? Any help would be appreciated

Answer 1

There are a couple common approaches to executing different page initialization code on different pages.

1. You can break the page-specific initialization code and supporting code into separate script files and only include them in <script> tags on the actual pages where they are needed.

2. You can use a common script file that is loaded across many pages and then within the page initialization code, you can check which page is loaded and then decide in your code which code is appropriate to run.

3. You can use a single common script file that includes a separate function for each separate page that needs unique initialization, but no code that calls those functions and then add one unique initialization function call to each individual page in the body of the page. This allows for the most efficient browser caching of script files and loading of fewer script files (it lets you combine and minimize most of your scripts).

For the second option, you can detect which page is loaded in your Javascript a number of different ways.

1. You can detect a class name on a known tag (like the body tag).
2. You can set a unique JS variable in each page that the initialization code can test.
3. You can look for the existence of certain HTML tags in the page that uniquely indicate which type of page it is. This works well when you want a particular initialization function to run on a bunch of pages that all have a certain common element.

Here's an example of option 1 (detect class name on body tag).

var m = document.body.className.match(/pageType_([^\s]+)/);
if (m) {
    switch(m[1]) {
        case "home":
            // code here
            break;
        case "category":
            // code here
            break;
        case "product":
            // code here
            break;
        default:
            // code here
            break;
    }
}

Here's an example of option 2 (set unique JS variable in each page):

    <script>
    // somewhere in each unique page
    var pageType = "home";
    </script>

    <script>
    // common script file
    switch(pageType) {
        case "home":
            // code here
            break;
        case "category":
            // code here
            break;
        case "product":
            // code here
            break;
        default:
            // code here
            break;
    }
    </script>

Here's a scheme for detecting which unique tag exists and calling the appropriate initialization function:

 if (document.getElementById("home")) {
      initHome();
 } else if (document.getElementById("category") {
      initCategory();
 }