Using function in multiple files

Question

I have created two JavaScript files. One file is "validators.js" and the other is "UserValidations.js".

Here is the code for validators.js

function isBlankString(value) {
    if (value.replace(/\s/g, "") == "") {
        return true;

    } else {
        return false;
    }
}

In other JavaScript file I have defined function for validating user name like this.

function validateUsername(element) {

    var username = element.value;

    if(value.replace(/\s/g, "") == ""){
        //nothing to validate
        return;
    }else{
        //validation logic
    }

}

Now as it is obvious I should have used isBlankString(value) method to check string length. But I am clueless about how can I use the function defined in other files?

score 13 · Answer 1 · answered Mar 13 '10 at 17:17

The file that provides the function must be included, in your HTML document, before the function is actually used.

Which means that, to be sure, validators.js should be included before UserValidations.js :

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

Sarfraz · Accepted Answer · 2010-03-13T19:35:28.763

7

Make sure that you include your validators.js file first on the page:

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

Now you can use the function of that normally:

function validateUsername(element) {

    var username = element.value;

    if(isBlankString(value)){
        //nothing to validate
        return;
    }else{
        //validation logic
    }

}

edited Mar 13 '10 at 19:35

answered Mar 13 '10 at 17:18

Sarfraz

377,238
77
533
578

2

But, This does not make a good readable js file. It will not be well understandable code file. If sometime forget to add one file, things will be screwed. – vijay.shad Mar 13 '10 at 17:24
I have just given an example; the point is that validtors.js should be on top. – Sarfraz Mar 13 '10 at 17:28
@vijay This is the way that JavaScript (and every other language) is done. The other file is a dependency, if you forget to include it, of course, it wont work. Don't try to change the way that the existing architecture works, just work with it. – Justin Johnson Mar 13 '10 at 18:57
7

To be fair, other languages make the inclusion more explicit. Python has the import statement, in C / C++ you #include. – Adriano Varoli Piazza Mar 13 '10 at 20:20
4

Agree with Adriano. The difference between JS and most other languages is that most others define their dependencies within the source file (or header) whereas JS relies on the HTML to define it. – Steve Claridge Mar 13 '10 at 21:30

score 2 · Answer 3 · edited May 23 '17 at 11:55

One nice method is to develop in multiple js files and then combine them together in your make/build system to create a JavaScript Library.

See this post for further discussion and example makefile: Makefile to combine js files and make a compressed version

You can also compress and minify the javascript to further reduce the file size: See Compressed JavaScript or Best JavaScript compressor

score 2 · Answer 4 · answered Mar 13 '10 at 17:19

2

So long as you have both files included you can just call it. JavaScript has no real concept of namespaces to worry about. You might consider combining the files into one as it saves on the number of http requests sent to the server.

answered Mar 13 '10 at 17:19

stimms

42,945
30
96
149

JavaScript applies scope to variables and function declarations, but there is no default scope per file. – Chris Betti May 01 '12 at 22:02

score 2 · Answer 5 · answered Mar 13 '10 at 21:24

More importantly, you are defining both of your functions in the window object. Its best to globally protect your functions by creating your own namespace:

function isBlankString(value) {
    if (value.replace(/\s/g, "") == "") {
        return true;

    } else {
        return false;
    }
}

you should put all of your objects in your own namespace like

Sarfraz.isBlankString = function (value) {
    if (value.replace(/\s/g, "") == "") {
        return true;

    } else {
        return false;
    }
}

As well as the other function. In reality, they are currently defined as window.isBlankString. If you load other people's javaScript into your page, you are much more likely to be overwritten.

To your main question, both should be loaded before you execute any. Look into using jQuery and the $(document).ready functionality.

Always load your scripts first, then execute. Loading and executing simultaneously invites disaster and is usually not necessary. That way, you don't need to worry about which order you place them in the file.

score 0 · Answer 6 · answered Mar 13 '10 at 17:17

0

I you are in an HTML file just include both files in your HTML.

answered Mar 13 '10 at 17:17

Vasily Korolev

1,781
2
11
9

score 0 · Answer 7 · answered Mar 13 '10 at 18:51

0

Just include both of files to your html page and call functions when you need it. Nothing difficult and hard. Or use two of this functions in one file

answered Mar 13 '10 at 18:51

Artsiom Anisimau

1,139
3
11
26

This doesn't seem to work with external files – Jacob Apr 20 '22 at 19:19

Using function in multiple files

7 Answers7