简体   繁体   English

在JavaScript中调用函数(在具有相同名称和参数的不同文件中)?

[英]Function (in different files with same name and argument) calling in JavaScript?

I have two seprate .JS files ie abc.js and xyz.js, in both JS files I have one method like: 我有两个单独的.JS文件,即abc.js和xyz.js,在这两个JS文件中,我都有一种方法,例如:

abc.js abc.js

function OpenPopup(url){
//Code
}

xyz.js xyz.js

function OpenPopup(url){
// some different implementation
}

Then I have inculde these two files on a HTML page like: 然后,我将这两个文件灌入HTML页面,例如:

<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, 当我尝试在某个事件上打开功能时,请说任何按钮的onclick(如上述),

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? 1) 哪个文件被调用的方法(即abc.js的OpenPopup或xyz.js的OpenPopup)与文件的函数名及其参数相同?

2) If, say OpenPopup of abc.js called. 2) 如果说OpenPopup的abc.js被调用。 Then how explicitly I can call the OpenPopup function of xyz.js file? 那么,如何明确地调用xyz.js文件的OpenPopup函数呢?

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 脚本abc.js

var abc = function(){
return {
    OpenPopup : function(){
        //Code goes here
    }
}
}

Script xyz.js 脚本xyz.js

var xyz = function(){
return {
    OpenPopup : function(){
        //Code goes here
    }
}

} }

You'll be able to call OpenPopup like this : 您将可以像这样调用OpenPopup:

abc().OpenPopup();
xyz().OpenPopup();
  1. 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. 在这种情况下,由于您的<script>元素没有结束标记,因此根本不会分析第二个脚本。

  2. 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. 通过在与该函数相同的作用域内定义一个与现有函数同名的新函数,您已经覆盖了该函数,并将对其进行垃圾回收。

u may try this (not tested): 您可以尝试此操作(未经测试):

abc.js: abc.js:

(function(window, document){
  function OpenPopup(url){
    //Code
  }
  window.abc = {};
  window.abc.OpenPopup = OpenPopup;
})(window, document);

xyz.js: xyz.js:

(function(window, document){
  function OpenPopup(url){
    //Code
  }
  window.xyz = {};
  window.xyz.OpenPopup = OpenPopup;
})(window, document);

html html

<button onclick="abc.OpenPopup(url)">Try abc.js</button>
<button onclick="xyz.OpenPopup(url)">Try xyz.js</button>

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. 最后,您的代码也会出错,就像您尚未定义“ url”的函数调用中一样,因此会引发错误,即未定义url。

Correct code is given below: Try it 正确的代码如下:尝试一下

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM