后续脚本加载是否可以删除早期脚本中已加载的函数？答案

【问题标题】：Is it possible for a subsequent script load to remove an already-loaded function in an earlier script?后续脚本加载是否可以删除早期脚本中已加载的函数？
【发布时间】：2017-08-22 12:24:54
【问题描述】：

我对两个具有非常相似内容的页面之间的差异感到困惑。两个页面都加载相同的脚本集：

<script type="text/javascript" src="scripts/modernizr.min.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js?v=1.8.3"></script>
<script type="text/javascript" src="scripts/jquery.colorbox.min.js"></script>
<script type="text/javascript" src="scripts/jquery.tools.min.js"></script>
<script type="text/javascript" src="scripts/URI.js"></script>

然后他们就有了这个$(document).ready():

    $(document).ready(function () {
        $(".profileImage").tooltip({
            position: 'top right',
            relative: true,
            offset: [50, 0]
        }).dynamic();
    });

在一页上，这很好用。在另一页上，一旦事件触发，我就会得到以下信息：

未捕获的类型错误：$(...).tooltip 不是函数

在有效的页面上，我已经能够确定（通过暂停和进入）.tooltip() 是jquery.tools.min.js 的一部分

Edit/Update3（删除 1 和 2，因为它们可能具有误导性）

这两个页面都来自应用程序的不同部分，该应用程序实现了在线论坛之类的功能

在一切正常的页面上，只有来自论坛用户的消息和他们的头像图像。在不起作用的页面上，该页面还包括一个用 javascript 和 html5 编写的统计/图形绘制设备

我注意到，通过在调试器中每个页面的document.ready 中的同一点暂停，在有效的页面上，jQuery 是 1.8.3 版，并且 jquery-tools 中的所有方法都可以调用

在不起作用的页面上，jQuery版本是1.9.1

我的推测是包括统计/柱状图绘制设备已经完全替换了页面前面加载的jquery1.8.3+jquery-tools库，用jquery1.9.1+NO_TOOLS，所以选择器仍然有效的原因（jquery的工作），但 .tooltip() 功能（jquery-tools 工作）现在不存在

虽然我不太确定该怎么做 - 拥有一个拥有自己的 jquery 设置的页面，然后在其上包含其他也使用和加载 jquery（不同版本）等的东西的正常解决方案是什么？

【问题讨论】：

你的 html 是什么样子的？
你想看哪些位？（生成的页面 html 可能非常大......）
需要Minimal, Complete, and Verifiable example
确实如此，但我怀疑我能否将这个庞大的生产系统转变为 MCVE，以证明问题所在；让您登录它会更相关，这样您就可以看到它的运行情况......
最后，我的问题似乎很简单——“我有这个scriptX.js，它调用functionX()，一切正常，直到我在同一页面上包含另一个scriptY.js，此时@ 987654332@ 完全消失，对functionX() 的调用导致'functionX is not defined'崩溃-scriptY 是如何实现的？"

标签： jquery jquery-tools

【解决方案1】：

如果jQuery 被重新加载，它将替换$ 别名和jQuery 命名空间，因此jQuery.fn.tooltip 将不再存在。

您应该在重新加载jQuery 1.9.1 后尝试重新加载jQuery.toolbox。

您可以像这样动态地执行此操作 (https://stackoverflow.com/a/950146/2776550)：

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

var myPrettyCode = function() {

   // Here, do what ever you want
};

loadScript("my_lovely_script.js", myPrettyCode);

尽管如此，您应该努力在您的应用程序中只包含一个 jQuery 的副本和版本。

【讨论】：

【解决方案2】：

jQuery.fn.tooltip = null 或 jQuery.fn.tooltip = undefined 甚至 delete jQuery.fn.tooltip 将删除以下演示中降级的功能：

<!DOCTYPE html>
<html lang="en">

<head>

  <title>Reduxtagram</title>
</head>
<body>
<h1>messages</h1>
<div id="messages-placeholder"></div>
<h1>Errors</h1>
<div id="errors-placeholder"></div>

<script>

	function html(id, inner){
		var el = document.getElementById(id);
		el.innerHTML += inner + " ------------------- ";
	}
	function logError(error){
		html("errors-placeholder", error);
	}
	function logMsg(msg){
		html("messages-placeholder", msg);
	}
	var myNamespace= {};
	myNamespace.myFunctionToNull = function(){ 
		logMsg("myFunctionToNull was called");	
	};
	myNamespace.myFunctionToUndefined = function(){ 
		logMsg("myFunctionToUndefined was called");	
	};
	myNamespace.myFunctionToDelete = function(){ 
		logMsg("myFunctionToDelete was called");	
	};
	
	myNamespace.myFunctionToNull();
	myNamespace.myFunctionToUndefined();
	myNamespace.myFunctionToDelete();
	
	myNamespace.myFunctionToNull = null;
	myNamespace.myFunctionToUndefined = undefined;
	delete myNamespace.myFunctionToDelete;
	
	try{
		myNamespace.myFunctionToNull();
	}
	catch(e)
	{
		logError(e);
	}
	try{
		myNamespace.myFunctionToUndefined();
	}
	catch(e)
	{
		logError(e);
	}
	try{
		myNamespace.myFunctionToDelete();
	}
	catch(e)
	{
		logError(e);
	}
</script>

</body>

</html>

您应该找到脚本中删除tooltip 函数的部分并更正它。

您也可以尝试重新排序脚本，例如，将<script type="text/javascript" src="scripts/jquery.tools.min.js"></script> 放在最后一个位置。

【讨论】：

它有帮助，但我想我找到了更多与问题相关的信息。我将发布对问题的编辑..