Enclosing jQuery functions and adding them to global namespace

Question

I am having a lot of issues with jquery. I am managing an older application that used prototype. My new pages don't use prototype, but I am encapsulating things in jquery.noConflict just in case. This however is resulting in me being unable to share functions through different js files.

Order files are loaded:

jquery.js
jquery.commonFuncs.js
jquery.database.js

Example contents of files

commonFuncs.js

var someGlobalVar = "abc";

jQuery.noConflict()(function($){

  function doStuff(x){
     return x;
  }

});

database.js

jQuery.noConflict()(function($){
  var a = 123;
  doStuff(a);
});

Error: doStuff is not defined.

I can kind of understand why encapsulating the function removes it from the global namespace. How can I add it back?

I also have no darn idea why I have to use noConflict if I do not load prototype.js If I completely remove prototype.js and remove the noConflict encapsulation, I get $ is undefined, and I don't know where to start with that. jQuery is clearly loading first. No clue.

Create a global object and assign the functions you're defining as properties on that object. — Madbreaks
– Madbreaks, Commented Dec 17, 2014 at 19:59

AWolf · Accepted Answer · 2014-12-17 20:06:49Z

1

As Madbreaks proposed, something like in the example below should work. (Have a look in the web browser console to see that there's no error message.)

var someGlobalVar = "abc";
var myApp = {};

jQuery.noConflict()(function($){

  function doStuff(x){
     return x;
  }

  myApp.doStuff = doStuff;
}); 

jQuery.noConflict()(function($){
  var a = 123;
  //doStuff(a);
  console.log(myApp.doStuff(a));  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Dec 17, 2014 at 20:06

AWolf

9,0105 gold badges38 silver badges43 bronze badges

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

Comments

Hackerman · Accepted Answer · 2014-12-17 20:06:46Z

0

You can refactor your code like this:

 var someGlobalVar = "abc";
 var doStuff;
 jQuery.noConflict()(function($){

  doStuff = function(x){
     return x;
  }

 });

answered Dec 17, 2014 at 20:06

Hackerman

12.3k2 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

Enclosing jQuery functions and adding them to global namespace

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related