Looking for tips on managing hefty Javascript files

Managing my application's 2000 lines of javascript code can be challenging, especially with all the user interaction and jQuery elements. Fortunately, everything is functioning as it should :)

To make things more organized, I decided to split the code into five separate files.

I initially thought that loading all the files would enable them to communicate and share variables in memory. However, I encountered an issue where a variable defined in File A was not recognized in File B.

Additionally, I have some general scripts in File C that I hoped Files A and B could utilize, but it seems this may not be possible.

Any advice on how to address these issues would be greatly appreciated.

UPDATE

The structure of my javascript looks like this:

// FILE A
jQuery(document).ready(function() {

  var currentPage = getURLvar('slpage');

  if ( (currentPage == 'Aa') || (currentPage == 'Bb') ) { 
    init_AA();
  } 
  else if ( (currentPage == 'Cc') || (currentPage == 'Dd') ) {
    init_BB();    
  } else if ( (currentPage == 'Ee') || (currentPage == 'Ff') ) {
    init_CC();    
  }
  (...)

// FILE B
  function init_AA()
  { 
    (...)
  }

  function getURLvar(name)
  {
     //Gets the URL and returns the value of specified paramter.
  }

Answer №1

It is indeed possible to access parts of a script in different files, but the issue you are facing seems to be related to scoping.

If your variable exists in the global namespace (although not recommended), you should be able to access it directly as you attempted.

However, if your variable is scoped inside a method, it will only be accessible within that specific method.

To make the variable accessible where you need it, consider creating a common namespace for your code and scoping your JavaScript accordingly.

For more information, check out these resources:

UPDATE:

Based on the provided code snippet, you could resolve the issue by moving the variable declaration outside the scope of the anonymous function.

 var currentPage;

 jQuery(document).ready(function() {

 currentPage = getURLvar('slpage');
 ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for me to perform cross-site scripting using JavaScript within my personal browser, specifically Firefox?

While watching a Video Tutorial on a certain website, I noticed that the videos were hosted on platform.thinkific.com and displayed in a light theme. However, I prefer Dark Theme, so I decided to invert the color of the video using the filter: invert(90%) ...

JavaScript Memoization: Enhancing Performance Through Caching

Recently, I delved into various JavaScript design patterns and stumbled upon memoization. While it seems like an effective way to prevent redundant value calculations, I can't help but notice a flaw in its implementation. Consider the following code s ...

Having trouble loading Three.js in JavaScript file using npm install?

I am encountering a problem when trying to include Three.js in my JavaScript file without using the HTML script element. The error message I receive is "Uncaught SyntaxError: Cannot use import statement outside a module". Although my Three.js code runs suc ...

How can we effectively transfer a value from TypeScript/Angular?

I am new to TypeScript and Angular, and I'm struggling with assigning a value to a variable within a function and then using that value outside of the function. In regular JavaScript, I would declare the variable first, define its value in the functio ...

How can I make TypeScript properly export function names for closure-compiler?

Here is the TypeScript code I am working with: namespace CompanyName.HtmlTools.Cookie { export function eraseCookie(name:string, path:string) { createCookie(name, "", path, -1); } export function readCookie(name:string) { ...

Issues with Bootstrap 4 (possibly JQuery) - mobile menu navigation items are unresponsive

I've encountered an issue with my Bootstrap4 navbar on mobile screens where the links in the menu don't seem to work. Below is the code I used: <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #E2BA28"> < ...

Refresh FullCalendar in Angular 2 and above

Can someone please assist me with re-rendering or redrawing a full-calendar in Angular using @fullcalendar/resource-timeline? I have updated the data after calling the API and now I need to make sure the calendar reflects these changes. Any guidance on h ...

React approach for managing multiple combobox values

Currently, I'm working on a page where users can upload multiple files and then select the file type for each file from a dropdown menu before submitting. These 'reports' are the uploaded files that are displayed in rows, allowing users to c ...

Clicking on the Material-UI slider that uses multiple useState causes duplication issues

Seeking help to develop a font size and font weight previewer utilizing Material-Ui sliders and useState. Encountering an issue where clicking the first slider after the second results in duplicating the first slider. https://i.sstatic.net/5MAzgtHO.png B ...

When making a variable call outside of a subscriber function, the returned value is 'undefined'

I find myself in a situation where I have to assign a value to a variable inside a subscriber function in Angular. The issue is that the variable returns 'undefined' when called outside of the Subscribe function. Here's what I'm encount ...

When the previous textbox is filled, the cursor will automatically move to the button

Utilizing an RFID reader where students tap their ID to display basic info, a hidden button on the form opens a modal with various purposes for selection. The challenge is shifting focus of cursor to the button and automatically clicking it when the last ...

"Encountered an error with the code example for partitioning routes in Express.js

Note: For those who are new to this, there is an error in the Express documentation example. Make sure to include the next(); statement in your code like so: people.use(function(req, res, next) { next();//This line is necessary for the example to work ...

Experiencing issues on the live server as it appears that Bootstrap is not functioning properly

I am facing an issue with my website where it appears distorted when launched on a live server, despite working fine locally. It seems that the Bootstrap styles are not being applied correctly on the live server and I cannot figure out why. If anyone knows ...

Jquery removes brackets from data following an ajax request

My data text file looks like this: [[1412525998000,"91.83"],[1412525998000,"91.83"],[1412525997000,"90.14"]...ETC However, when I receive this data via an ajax request, something strange happens. The 'data' variable turns into this: 1412525998 ...

Prevent the use of harmful language by implementing jQuery or JavaScript

Is there a way for me to filter certain words (such as "sex") using regex, even when people use variations like "b a d", "b.a.d", or "b/a/d"? How can I prevent these kinds of words from getting through? I'm trying to filter more than just one word - ...

Modifying the $scope within a controller

I need to update the $scope within the controller based on the object that is being clicked. The current code looks like this: var blogApp = angular.module('blogApp', ['ngSanitize', 'ngRoute']); blogApp.controller('blog ...

What Causes the "Do Not Push Route with Duplicated Key" Error in React Native with Redux?

I have successfully integrated Redux into my React Native project, specifically for navigation purposes. Below is the code snippet from my navigation reducer file (navReducer.js): import { PUSH_ROUTE, POP_ROUTE } from '../Constants/ActionTypes' ...

I am encountering an issue with running my Mocha tests. Can anyone provide assistance on how to solve this problem?

https://i.sstatic.net/kLnxs.png Could the issue be with the package.json file or am I not executing the proper command to run it? ...

Focus on selecting each label within a table using JavaScript

In my current setup, I am attempting to customize radio buttons and checkboxes. Array.from(document.querySelectorAll("tr")).forEach((tr,index)=>{ var mark=document.createElement("span"); Array.from(tr.querySelectorAll("input")).forEach((inp,index ...

How to transfer a parameter to a JavaScript function within an Ajax success callback?

While attempting to call the UpdateItem function using AJAX with an anchor tag, I encountered a console error. Error : req is undefined function updateItem(id, desc, vehicleno){ alert("i am here"); $('#ProcessModal').modal(&a ...