从不同的 .js 文件中访问来自 1 个 .js 源文件 (jqTree) 的变量以覆盖方法

Posted 2023-04-13

【中文标题】从不同的 .js 文件中访问来自 1 个 .js 源文件 (jqTree) 的变量以覆盖方法

【英文标题】：Access variable from 1 .js source file (jqTree), from within different .js file, to override method

【发布时间】：2016-02-19 20:04:16

【问题描述】：

（JS、jQuery 和 jqTree 的新手）

我正在尝试覆盖一个方法 (JqTreeWidget.prototype.openNode) 从一个 .js 文件 (tree.jquery.js) 在另一个（我的拥有custom.js)。

我读过to override a js method in general, I just need to redefine it。因此，我尝试在方法上执行此操作，我认为我无法访问具有原始方法的变量 (JqTreeWidget)。我认为挑战在于原始方法位于tree.jquery.js（源）中，它与我想要进行覆盖的其他custom.js 文件分开。

这个问题的目标是让我在我的custom.js 中写something like this（<reference to JqTreeWidget.prototype.openNode> 将是这个问题的答案）：

var originalMethod = <reference to JqTreeWidget.prototype.openNode>;

// Override of originalMethod
<reference to JqTreeWidget.prototype.openNode> = function( node, slide )
    // my code I want to happen 1st here
    changeAncestorHeightRecursively( node, true);

    // my code is done, and now I'm ready to call the original method
    originalMethod.call( this, node, slide );

我认为这将是进行覆盖的最非侵入性方式，而无需实际侵入 tree.jquery.js 源。

请在http://codepen.io/cellepo/pen/LGoaQx 上查看我的custom.js 单独的源 tree.jquery.js 是在该 codepen 的 JS 设置中外部添加的。

我怎样才能（从我的custom.js 文件中）访问源文件（tree.jquery.js）中的JqTreeWidget 变量？ 有可能吗？ JqTreeWidget 不在tree.jquery.js 范围之外，还是不是全局变量？我希望treeContainer.tree.prototype 会得到它，但到目前为止我还没有运气......

谢谢！

【问题讨论】：

上方的 CodePen，forked & updated with Accepted Answer here.

【参考方案1】：

原型对象可以通过：

jQuery.fn.tree("get_widget_class").prototype

请注意，这不是任何 jQuery 插件的通用解决方案。这是树插件明确实现的。

【讨论】：

看起来这确实得到了原型对象，谢谢！

请注意，参数“get_widget_class”不打算被替换：字面上保留它，并按原样使用此答案中的代码。 （起初我很困惑，以为我需要用我的树的 CSS 选择器替换它，但事实并非如此）

只是好奇：介意解释一下“.fn.tree("get_widget_class")”是如何工作的吗？或者你有这些方法的 API 参考吗？谢谢

jQuery.fn 是所有 jQuery 插件注册其功能的地方。它基本上是所有 jQuery 对象的原型。通过阅读tree.jquery.js 文件可以看到其余部分。我不知道它被记录在任何地方。

非常感谢。我猜在了解了所有这些之后，您可能已经通过文本搜索“fn”或“$.fn”来缩小 tree.jquery.js 的相关部分。不错

【参考方案2】：

我发现了这个 hacky 解决方法。但由于这是一个 hack，我仍然希望找到这个问题中提出的答案（所以请继续回答我在问题中提到的<reference to JqTreeWidget.prototype.openNode>，谢谢）。 ..

如本问题所述，目标包括在custom.js 中从外部覆盖JqTreeWidget.prototype.openNode（来自tree.jquery.js）。因此，对changeAncestorHeightRecursively（我的代码）和JqTreeWidget.prototype.openNode 的调用都将通过custom.js 中的覆盖进行，而tree.jquery.js 源根本不会被修改。

解决方法：

Declare global var in html：

<script type='text/javascript' language="javascript"> changeAncestorHeightRecursively = 1; </script>

在custom.js中，将全局变量设置为函数（我想在JqTreeWidget.prototype.openNode之前调用的那个）：

window.changeAncestorHeightRecursively = changeAncestorHeightRecursively;

调用JqTreeWidget.prototype.openNode开头的全局变量引用函数（破解tree.jquery.js）：

JqTreeWidget.prototype.openNode = function(node, slide) // Only way I could figure out to get this to execute before the rest of this method // (global-var-referenced function in custom.js) changeAncestorHeightRecursively( node, true ); // Rest of original openNode code...

这会从 tree.jquery.js 中调用我的代码函数，而不是从 custom.js 中调用被覆盖的方法。 所以这是 hacky，因为全局 var 和修改 @ 987654340@来源。

这暂时可行，但希望有一个不那么老套的解决方案，如原始问题中所述...谢谢！

【讨论】：

FWIW：理论上这有风险 changeAncestorHeightRecursively 在定义之前被调用（因为我的 custom.js 是最后加载的）。但实际上， JqTreeWidget.prototype.openNode 仅在用户输入时调用。所以当输入发生时，所有的js都会被加载，因为用户必须在输入之前看到加载的页面:)