javascript - 从ajax加载页面时如何避免js函数被覆盖。

Question

例如:

--- a.php ---
<script>
function fun() {
   console.log('this is fun() from a.php');
}
function loadb() {
   $("#loadb").load("b.php");
}
function removeb() {
   $("#loadb").remove();
}
</script>
This is a.php
<input type="button" onclick="fun()" value="echo fun">
<input type="button" onclick="loadb()" value="load b.php">
<input type="button" onclick="removeb()" value="remove b.php">
<div id="loadb"></div>

--- b.php ---
<script>
function fun() {
   console.log('this is fun() from b.php');
}
</script>
This is b.php

在我从 Ajax 加载 b.php 后，a.php 中的“fun()”将被覆盖即使我通过删除 删除了 b.php，b.php 中的 fun() 仍然保留在页面中。

确保 ajax 页面调用它自己的 js 函数的实用方法是什么？

Cos a.php 将加载许多由不同开发人员开发的其他页面他们可能会在页面内部编写自己的js函数，有时他们的函数会有共同的命名，比如:remove(), add()...等等。

我想知道，是否有任何有效的方法可以避免这种情况？

谢谢。

Answer 1

答案很简单。

由于浏览器在将脚本标记附加到 DOM 时所做的操作，因此无法保护函数不被脚本所做的某些分配覆盖。

除了在每个模块中正确解决这个问题之外，您真的没有其他现实的解决方案:

1. 在每个模块中正确命名您的公共(public)函数
2. 使用 Self Executing Function 在每个模块中限定您的私有(private)函数模式