How can I reuse code from one JavaScript file in another?

Question

Say I had 2 JavaScript files, f1.js and f2.js respectively and one HTML page called index.html.

I use the script tag to use the code from f1.js in my index.html. But, I want f1.js to use some code from f2.js. So, the hierarchy is like this - index.html <--- f1.js <--- f2.js.

i.e. f2.js is a pseudo-random generator and has a function which creates a random seed, and I want to use this in my code for f1.js.

Code example:

index.html - how I call f1.js in the html page (my code)

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

f1.js - my code

function hello() {
    Math.seedrandom("1"); // this is the method I want to reuse from f2.js
    alert("hello: " + Math.random());
}

f2.js - code I want to use (via the link below)

Math.seedrandom();

How can I do this?

Edit: the file I want to reuse can be found her - http://davidbau.com/encode/seedrandom.js

It's a custom random seed generator tool which has a function: Math.seedrandom("") that I want to use.

Generally - Including f2.js before f1.js will work. However, if you have modularized the js then you need different approach. Try the obvious solution first if it works then great else you will need to code snippet of files. — Nikhil Aggarwal
– Nikhil Aggarwal, Commented Dec 15, 2015 at 13:21
Is the random seed function available globally from f2, or does the API for the generator allow access to that function? If so, put the call to f2 before the call to f1 in your HTML file, and call the function from f1. — Andy
– Andy, Commented Dec 15, 2015 at 13:22
@nikhil Hey, thanks for the swift response. I've tried a few methods but none seem to work. I'm basically trying to import/use a file that deals with random seed generation that is written by someone else, in my own JS code. — user1930227
– user1930227, Commented Dec 15, 2015 at 13:23
@Andy I've tested the function on its own but just having trouble getting it to work with getting my JS file to call it. The file I want to use code from is this - davidbau.com/encode/seedrandom.js Which has a method called "Math.seedrandom()" which is what I want to use. — user1930227
– user1930227, Commented Dec 15, 2015 at 13:26
Why don't you want more than one JS call? Anyway, if you just want to have f1, just copy this code to the top of f1 before any other code and it should work. — Andy
– Andy, Commented Dec 15, 2015 at 13:57

Daniel Lizik · Accepted Answer · 2015-12-15 14:39:11Z

3

If you want to use a global module pattern:

index.html

<head>
    <script src="f1.js"></script>
    <script src="f2.js"></script>
</head>

f1.js

function hello() {
    //some stuff
}

f2.js

(function(privateHello) {//now it's private

    privateHello(); //invoke private instance

})(hello); //inject global variable

If you don't like this pattern, look into require.js, or a backend bundler like browserify or webpack.

The global module pattern might be used more like this, however.

f1.js

var _functions = (function() {
    return {
        fn_a: function() { /* do something */ },
        fn_b: function() { /* do something else */ }
    };
})();

fs2.js

(function(methods) {
    methods.fn_a(); //do something
    methods.fn_b(); //do something else
})(_functions);

edited Dec 15, 2015 at 14:39

answered Dec 15, 2015 at 14:26

Daniel Lizik

3,1422 gold badges24 silver badges44 bronze badges

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

1 Comment

ujeenator Over a year ago

I personally recommend browserify - for clean plain code (unlike require.js) and simplicity (unlike webpack)

ujeenator · Accepted Answer · 2015-12-15 14:18:46Z

1

Maybe this what you want:

<!DOCTYPE html>
<script src=//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.3.10/seedrandom.min.js>
</script>
<script>
  function hello(){
    Math.seedrandom("1");
    alert("hello: " + Math.random());
  }
</script>
<button onclick="hello()">Run seedrandom</button>

edited Dec 15, 2015 at 14:18

answered Dec 15, 2015 at 14:09

ujeenator

28.9k2 gold badges27 silver badges28 bronze badges

Comments

Rishi · Accepted Answer · 2015-12-15 13:29:16Z

-1

What you need to do is, link the html to the f1.js file first, and then link it to the f2.js file. This will allow you to call the function from the f1.js file. But make sure to implement f2.js first.

answered Dec 15, 2015 at 13:29

Rishi

4097 silver badges23 bronze badges

1 Comment

user1930227 Over a year ago

@Rishi Thanks for the response! I've included the file whose code I want to reuse in the body of the question above. So you're saying, I use the script tag to load that first, then load my own JSfile?

Collectives™ on Stack Overflow

How can I reuse code from one JavaScript file in another?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related