Call a function of a library, outside the library

Question

I have a library that runs in a (function() { ... }) (); scheme ...

// mylibrary.js
(function() {
    function myfunc() { alert('hello'); };

    if (...) 
      return;

    // do something

}) ();

... that I use in a HTML page :

<!DOCTYPE html> 
<html lang="en"> 
<body>  
  <div>Bonjour</div>

  <script src="mylibrary.js"></script>

  <script>
    myfunc();  // scope error !
  </script>

</body>
</html>

How to call the function myfunc() outside the library ? Should I change the (function() { ... }) (); scheme ? (that I used to be able to do some return inside the library)

What is the most common practice?

This is the library i'm speaking about (it's mine and needs to be improved of course!) : https://github.com/josephernest/bigpicture.js/blob/master/bigpicture.js — Basj, Dec 09 '14 at 21:45
as written, you can't. you can publish the functions you need to window, an internal object, or use an exports-bsed exporter like commonJS — dandavis, Dec 09 '14 at 21:45
@dandavis What is the most common practice? (I'd like to avoid third party tools/libraries for exporting)? — Basj, Dec 09 '14 at 22:00
there is no best. you can return an object and assign the outside, like Born2Code's, or you can use a commonJS pattern, or even and AMD pattern if you like async. personally, i think that, for browsers, the module shown by Born2Code is closest to what i would do. — dandavis, Dec 09 '14 at 22:04

score 1 · Answer 1 · answered Dec 09 '14 at 21:54

1

here is how you should do it.

var myApp = (function() {
  var stuff = []; //private

  return { //exposed to public
    myfunc: function(values) {
      alert('You said: ' + values);
    }
  }
}());

myApp.myfunc('Test Me');

answered Dec 09 '14 at 21:54

Born2Code

1,055
6
13

To improve organization of my code / library, can you mention which part of code should be the library, how to call the library from the HTML, etc. ? Thanks in advance @Born2Code ! – Basj Dec 09 '14 at 23:09

Madara's Ghost · Accepted Answer · 2014-12-10T08:19:37.380

1

You want the Revealing Module Pattern:

var module = (function() { // Self invoking function
    var privateVariable = 42; // This variable is private to the module.
    var publicFunction = function() { console.log(42); } // Still not public

    return {
        myPublic: publicFunction // Now it is, notice optional the name change!
    }
})(); //Call itself.

module.myPublic(); // Call by the new name.

In this case, the function is executed and an Object is returned (so module is now an Object), and you simply call functions which are members of that object.

edited Dec 10 '14 at 08:19

answered Dec 10 '14 at 08:14

Madara's Ghost

172,118
50
264
308

Thanks @SecondRikudo for having introduced me to the topic of Patterns. Do you think this variation is correct : http://stackoverflow.com/questions/27397099/slight-variation-of-the-revealing-module-pattern ? – Basj Dec 10 '14 at 09:13

score -1 · Answer 3 · answered Dec 09 '14 at 21:47

-1

If you mean for you function to be globally available, then you can assign it to the window object:

window.myfunc = myfunc;

This is what Mixpanel does:

http://cdn.mxpnl.com/libs/mixpanel-2-latest.js

answered Dec 09 '14 at 21:47

20twoes

27
2

No. Add one one property to the global object (i.e., a namespace) through which a library is accessed . – orb Dec 09 '14 at 21:52
In which line of http://cdn.mxpnl.com/libs/mixpanel-2-latest.js is the export with `window`? – Basj Dec 09 '14 at 21:55
Can you explain what global object are you talking about @orb ? Maybe can you provide an answer? These terms (namespace, property to the global object are not so clear for me yet) – Basj Dec 09 '14 at 23:07
Sorry @Basj, I was incorrect about the [link](http://cdn.mxpnl.com/libs/mixpanel-2-latest.js). Mixpanel assigns to the `window` object in a more indirect way than what I have shown. – 20twoes Dec 10 '14 at 15:44

Call a function of a library, outside the library

3 Answers3