Using function in multiple files

I have created two JavaScri开发者_Python百科pt 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?

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>

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
    }

}

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.

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.

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

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

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