在页面中包含两次的脚本中调用函数

Posted 2023-02-22

【中文标题】在页面中包含两次的脚本中调用函数

【英文标题】：Calling a function in a script which is included twice in a page

【发布时间】：2012-07-29 08:02:24

【问题描述】：

今天，我读到一个关于 the danger in including the same JavaScript library twice 的问题。我创建了一个小项目，通过单击链接调用的函数中的简单警报来测试它。我使用 jquery 来帮助我将事件处理程序绑定到这样的点击：

案例 1

javascript：

$(document).ready(function () 
    $("#TestLink").click(function() 
        alert("Message");
    );
);

html:

<p>
   <a id="TestLink">Click here</a>
</p>

现在，当我单击链接时，消息会显示两次。我知道 jquery 绑定了一个事件处理程序两次，因为对脚本的引用被添加了两次。

在另一种情况下，我将代码更改为如下所示：

案例 2

Javascript：

function showMessage() 
    alert("Message");

HTML：

<script type="text/javascript" src="@Url.Content("~/Scripts/Test.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Test.js")"></script>

<p>
   <a onclick="showMessage();" id="TestLink">Click here</a>
</p>

当我点击链接时，即使我包含了两次脚本，消息也只会显示一次。

我的问题：

在情况1中，同一个脚本被多次添加时，两次绑定事件处理程序的过程是如何完成的？我只想要更多关于事件钩子的详细信息，当一个相同的脚本被添加不止一次时；文章、参考资料等...

在情况2中，浏览器如何解决必须选择使用哪个脚本来调用函数的冲突？

【参考方案1】：

在第一种情况下，事件被绑定了两次。有时希望这样做。如果您想要一个 div 上的单击事件，以及同一个 div 上不相关的另一个单击事件，您可能希望这两个函数都执行。这就是为什么点击事件都会触发并调用函数的原因。在这种情况下，它是被调用两次的同一个函数！在一个事件上绑定两个函数的有用场景示例：

您可能想知道用户是否处于活动状态。上的点击事件 身体会告诉你的。但是，如果覆盖处于活动状态，您希望 删除覆盖。这两个函数都在点击事件上执行 身体。

在第二种情况下，您在 javascript 的第一个包含中声明的函数被第二个 javascript 中的相同函数覆盖。第一个声明消失了。因此该函数只被调用一次：

var test = function() 
  alert('first one!');

var test = function() 
  alert('second one!');

test(); // second one!

【讨论】：

+1。在情况 2 中没有需要解决的冲突； showMessage 的第二个声明会覆盖第一个声明，因此 JavaScript 引擎只有一个 showMessage 可供选择。