Function (in different files with same name and argument) calling in JavaScript?
Question
I have two seprate .JS files ie abc.js and xyz.js, in both JS files I have one method like:
abc.js
function OpenPopup(url){
//Code
}
xyz.js
function OpenPopup(url){
// some different implementation
}
Then I have inculde these two files on a HTML page like:
<html>
<head>
<script src="abc.js" id="file1"> </script>
<script src="xyz.js" id="file2"> </script>
</head>
<body>
<button onclick="OpenPopup(url)">Try it</button>
</body>
</html>
When I tried to open function on some event say onclick of any button (like above) then,
1) Which method of which files gets called ie OpenPopup of abc.js or OpenPopup of xyz.js as in both files function name and its argument are same?
2) If, say OpenPopup of abc.js called. Then how explicitly I can call the OpenPopup function of xyz.js file?
4 answers
solution1
2 ACCPTED 2014-04-08 09:33:17
I was working on the same two weeks ago, turns out that the last function loaded will override the others, you can't really predict witch one will override the other as the scripts are not loading synchronously but in perfect cases, the last function contained in the last script will override.
Now about loading functions following the file name, I've tried a "namespacing" technique, I've managed to make something like this :
Script abc.js
var abc = function(){
return {
OpenPopup : function(){
//Code goes here
}
}
}
Script xyz.js
var xyz = function(){
return {
OpenPopup : function(){
//Code goes here
}
}
}
You'll be able to call OpenPopup like this :
abc().OpenPopup();
xyz().OpenPopup();
solution2
1 2014-04-08 09:21:21
Normally the last one to be defined will be the one that gets called. In this case, since you haven't got an end tag for your
<script>element, the second script won't be parsed at all.You can't. By defining a new function with the same name as an existing function, in the same scope as that function, you have overwritten it and it will be garbage collected.
solution3
1
u may try this (not tested):
abc.js:
(function(window, document){
function OpenPopup(url){
//Code
}
window.abc = {};
window.abc.OpenPopup = OpenPopup;
})(window, document);
xyz.js:
(function(window, document){
function OpenPopup(url){
//Code
}
window.xyz = {};
window.xyz.OpenPopup = OpenPopup;
})(window, document);
html
<button onclick="abc.OpenPopup(url)">Try abc.js</button>
<button onclick="xyz.OpenPopup(url)">Try xyz.js</button>
solution4
0 2014-04-08 09:32:20
Firstly, you have to close your tag as will not work here. Secondly, you are only overwriting your method under the same scope. Lastly, your code will through error also as in the functional call you have not defined 'url' so the error will be raised that url is undefined.
Correct code is given below: Try it
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.