11

I have written a bunch of javascript functions in my html file between the tags but now I want all of my functions in a seperate JS file so I can re-use the JS file for other html pages so that I only need to include the JS file.

this is how my functions look like:

function makeStartRefresher(refresh, refreshTime) {
//function code
}
function readData(address){
//function code
}
function writeData(address, value, refreshCallback){....
........
........
........

These are written above my document.ready function, from where I call and use these functions.

Will it work if I just copy these functions to a JS file and include the JS file in my html document, will I be able to call the functions like normal?

Grtz

4

2 Answers 2

35

Just copy your JS functions into a .js file and include it like this in the <head> section of your HTML documents:

<script type="text/javascript" src="mylibrary.js"></script>

The document.ready event won't be fired before all scripts linked that way are loaded and executed, so all functions defined in it will be available when it happens.

To avoid nameclashes with other libraries, you can optionally put all your functions into a global object which serves as a namespace.

// mylibrary.js
var myLibrary = {

    makeStartRefresher: function(refresh, refreshTime) {
    //function code
    },
    readData: function(address){
    //function code
    }
    ...
}

and then when you use functions from your library, refer to them like this:

myLibrary.makeStartRefresher(refresher, 1000);
4
  • BTW, script elements can be pretty much anywhere, they don't have to be in the head though that is a common place to put them to ensure scripts are available before the page is interactive.
    – RobG
    Apr 29, 2013 at 13:30
  • 1
    Oh, note that there already is a myLibrary javascript library.
    – RobG
    Apr 29, 2013 at 13:31
  • @RobG: That library uses a global object API as a namespace and the script files are named mylib-[something].js, so it would be compatible to my example :)
    – Philipp
    Apr 29, 2013 at 13:36
  • with this design, can you do nesting sublibraries like myLibrary.makeStartRefresher.refresh()? and will there be scope issues?
    – harryt
    Aug 7, 2014 at 18:55
23

Ordinary I use something like this to define separate module.

LibName= window.LibName || {};

LibName = function () {

  var yourVar1;
  var yourVar2;


  publicFunc1 = function() {

  };

  privateFunc2 = function() {

  };


  return {
    "publicFuncName" :  publicFunc1
  }

}();

In HTML it could be called like LibName.publicFuncName()

Also, look at Module Pattern here - http://addyosmani.com/resources/essentialjsdesignpatterns/book/

UPD:

Now ES6 is quite ready-for-production and the answer should be updated:

class MyLib {
  constructor() {
    this.foo = 1;
    this.bar = 2;
  }

  myPublicMethod1() {
    return this.foo;
  }

  myPublicMethod2(foo) {
    return foo + this.bar;
  }
}

const instance = new MyLib();
export { instance as MyLib };

And when you need it:

import { MyLib } from './MyLib';
2
  • LibName= window.LibName || {};// This question is completely insane, but I want to ask. is this means using the object if available or creating a new instance if an instance is not present right?
    – Vignesh
    Jun 19, 2014 at 13:16
  • yes, your guess is true Jun 23, 2014 at 12:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.