加载具有相同变量/函数的多个脚本答案

【问题标题】：Loading multiple scripts with same variables/functions加载具有相同变量/函数的多个脚本
【发布时间】：2011-08-01 12:22:24
【问题描述】：

是否可以在 JS 中加载具有相同变量/函数的多个脚本，而不会覆盖变量的旧值。例如，为每个加载的脚本创建一个自己的范围/沙箱或对象。

要加载的文件：

脚本1：

<script>
function init() {
    do something...
}
</script>

脚本2：

<script>
function init() {
    do something...
}
</script>

加载调用script1.init()或script2.init()后，这可能吗？

【问题讨论】：

标签： javascript function

【解决方案1】：

您可以使用自调用匿名函数包装每一段代码，这将有效地为该段命名。

(function() {
    function init() {
        // do something...
     }
})();

init(); // ReferenceError

但是，如果您无法更改代码，第二个init 将覆盖第一个定义。

不过……

加载调用script1.init()或script2.init()后，这可能吗？

...令人困惑。您是否已经将init() 作为对象的方法？如果是这样，它们不会相互覆盖。

【讨论】：

我想从任何源服务器加载代码，并创建一个对象来防止代码被覆盖，但我要加载的代码是不可更改的。

【解决方案2】：

很遗憾，没有。单个页面上有一个全局范围。

但是，通过使用类似模块模式的东西，您可以创建一个虚假的命名空间：

例如：

var script1 = (function() {
    var that = {};
    that.init = function() { 
      do something...
    };

    more functions...

    return that;
})();

然后使用 script1.init() 调用它；

您可以了解更多关于模块模式here。

【讨论】：

问题是我想写一个站点，用户可以将他/她自己的插件添加到站点，插件的代码是从任何来源加载的，但我不想在 iframe 中加载代码。您的解决方案的问题是用户必须以给定的设计模式编写代码，但我希望他们让他们以自己想要的方式编写代码。
在这种情况下，您可能需要研究 jsfiddle 等网站如何实现沙盒。