10

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?

Improve this question

7 Answers 7

Reset to default
13

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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 } }
Improve this answer

5 Comments

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.
I have just given an example; the point is that validtors.js should be on top.
@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.
To be fair, other languages make the inclusion more explicit. Python has the import statement, in C / C++ you #include.
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.
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.

Improve this answer

1 Comment

JavaScript applies scope to variables and function declarations, but there is no default scope per file.
2

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.

Improve this answer

Comments

2

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

Improve this answer

Comments

0

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

Improve this answer

Comments

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

Improve this answer

1 Comment

This doesn't seem to work with external files

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.