Question 244387 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to avoid writing the same function on every individual page script without using globals

I am building a multi-page web-app in HTML/CSS/JS/jQuery + Vite.js. This is a question about best practices.

There are over 24 pages in the app, so it’s a fairly large codebase. I have been building the whole thing myself (for a small startup) and attempting to follow best practices so that it’s not a nightmare for another developer to take over someday. One issue I keep running into is how to deal with basic functions that every page uses, such as checkLogin (runs on page load) or hideSections(arr) (pass in array of dom elements to hide). In those scenarios, is it better to define the functions over and over on each page, or to define it globally in a main script that all pages can access? While I’m aware that globals are bad, I’m struggling with how to avoid potentially having to make changes to one function over and over on each individual page script.

How can I be mindful of scoping, maintainability, readability, and all the other issues associated with global variables, while also avoiding rewriting the same function and having to make edits on every individual page script?

Tags:

4

Answers


  1. 0

    Write the function in a module.

    Import it from the module in each other module you want to use it.

    Login or Signup to reply.
  2. 0

    …is it better to define the functions over and over on each page, or
    to define it globally in a main script that all pages can access?

    …I’m aware that globals are bad, I…

    There is a difference between global "variables" and "globally accessible functions". Globally accessible functions (functions accessed via .js library files) are certainly not bad. Global variables are.

    If you need function reuse, absolutely put it into a .js library file and reference that file from all pages that need the function. And, when you write the functions in that .js file, use the module pattern or define your own namespace to access the function(s).

    Module Pattern:

    (function(){
  // This is an Immediately Invoked Function Expression (IIFE)
  // It's an anonymous function wrapped up as an expression to
  // be executed immediately. Since it's anonymous, there's no
  // worry about contaminating the global namespace.
  console.log("Hello from the IIFE");
})();

    Custom Namespace:

    // Start with the Module pattern...
(function(){
  // The following is NOT accessible from the Global (window) scope
  let obj = {};  // new object
  let func1 = function(){ console.log("Hello from func1."); }
  let func2 = function(){ console.log("Hello from func2."); }

  // Add functions to object
  obj.func1 = func1;
  obj.func2 = func2;
  
  // Except for this:
  //Set up custom namespace in the Global scope
  window.CustomNamespaceNameHere = obj;
})();

// Now you can access your custom functions from the Global scope
// with a high degree of confidence that you haven't contaminated
// the Global (window) scope:
CustomNamespaceNameHere.func1();
CustomNamespaceNameHere.func2();
    Login or Signup to reply.
  3. 0

    the best solution for this in my perspective is using import/export, for example: utils.js will contain all your utilities functions and you can import specific functions from it, here is a small code snippet

    HTML:

    <script type="module">
    import {checkLogin} from "./utils.js"
    checkLogin();
</script>

    utils.js:

    function checkLogin() {
    console.log("hello");
}
export {checkLogin}

    or you can make a folder for functions, name each file as function name and export it, now you can import each function by name

    Login or Signup to reply.
  4. 0

    One solutions would be to use some Context API such as the react context api or Redux. You could wrap it all with the context provider.

    example:

    <Context.Provider>
    <YourApp/>
<Context.Provider/>

    The context would run the function every time it renders, and you could use useMemo() avoiding innecesary renders for better performance.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search