jQuery scope with multiple functions

Question

I have a tool that allows a user to create a dashboard and add widgets to it. Each widget is its own JS file that is loaded into the page.

To keep things the same across the board, I create a function called load which is triggered when the document is ready.

The problem is, each of the other modules that are included all have the same function called load which is causing problems.

While I can change the function name to something unique, I would like to see if its possible to keep them all the same where they are locked down to the scope of the file they are in?

/*
Module Details: Department Links - A collection of links specific to the users department or selected department
*/

$(function() {

  // Define our moduleID
  var moduleID = 1;

  // Load our module
  load(moduleID, '', false);

  // Create a event for dropdown change
  $('body').on('select2-selecting', '#Department_' + moduleID, function (e) {
    // When the user picks a department, reload this module and fetch those department links.
    load(moduleID, e.val, true);
  });

});

/*
  Load the module
  @moduleID: required.
  @departmentID: if not passed, the SP will use the viewers departmentID.
  @reload: passed when changing the dropdown so we only render the new data and not the whole module
*/
function load(moduleID, departmentID, reload){

    ... Do other stuff here
}

I guess my question is.. With multiple functions called load in the various js files included, how can I trigger the one specific to its own file?

Can you explain a little more? May be including the content of a sample file and the code snippet above interacting with the same — binariedMe
– binariedMe, Commented Jul 4, 2016 at 17:57
Two words: module loader. (Like Rollup, Browserify, RequireJS, Webpack, etc.) — gcampbell
– gcampbell, Commented Jul 4, 2016 at 17:57
@binariedMe - Each module (js include) is structured the same way. On ready it fires the load function which does something to the DOM. Imagine having 5 js includes all with the same function name called load. Typically this shouldn't be an issue as I think they are all within their own scope of the file but I don't believe mine is set up as such. It's calling load and triggering it in the other files that also contain that function instead of just its own. — SBB
– SBB, Commented Jul 4, 2016 at 18:00
See there is nothing like file scope at least in javascript. Code snippet imported from various files are concatenated and then execution occurs as per configuration of import. What you can do in this case is that you can wrap content of each file in a self-invoking function to isolate scope. — binariedMe
– binariedMe, Commented Jul 4, 2016 at 18:02
@binariedMe I tried wrapping the whole thing in the self-invoking function but something goes wrong. The load function interacts with the DOM so I think it is trying to make changes before its actually ready. Unless I am missing something.. — SBB
– SBB, Commented Jul 4, 2016 at 18:18

Mr. Noddy · Accepted Answer · 2016-07-04 18:30:18Z

1

@binariedMe is correct.. There is nothing like file scope in JavaScript.. You can do like if you have any object which is separate in every file so you can write as follows...

`Object.load = function (){
      // do stuff
 }`

And you can call object.load for every module you are loading...!!

answered Jul 4, 2016 at 18:30

Mr. Noddy

1,5902 gold badges16 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SBB Over a year ago

This may be something I could do - any chance you could tweak this fiddle to show its placement? jsfiddle.net/ep6vurfL

Mr. Noddy Over a year ago

Is department is unique object there... Cause if it is global then we can have like department.load=function(){ //do stuff here}

SBB Over a year ago

well my goal was to not have to specify anything specific to the actual module it self such as a naming convention like that. I basically want to create a "template" that I can just copy and use when needed. So regardless of what it was called, if they could all be the same in each JS include, it wouldnt matter to me.

binariedMe · Accepted Answer · 2016-07-05 16:34:24Z

0

The problem may be because you would be declaring load function in each js file globally. I have created a plunker with the same setup and each load function is working isolated to other. Please check the plunker here https://plnkr.co/edit/uZJ8FFwJMfEvPsWAFWwE?p=preview

(function(){ //stuffs of each file
    // Don't put any global variable unless you want no scope isolation for the same.
 })();

answered Jul 5, 2016 at 16:34

binariedMe

4,3291 gold badge20 silver badges34 bronze badges

Collectives™ on Stack Overflow

jQuery scope with multiple functions

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related