覆盖 javascript 库函数答案

【问题标题】：Override javascript library function覆盖 javascript 库函数
【发布时间】：2014-08-12 23:33:30
【问题描述】：

我正在尝试修改 jquery UI 微调器的行为，并希望避免破解原始 js 文件。 js文件中有一个名为_doSpin的函数，如果我修改我可以达到我想要的效果（我希望它改变一个百分比的值 - 不像内置的百分比方法向用户呈现一个真实的百分比，但我需要正常的整数按百分比递增或递减，没有 100% 到 0% 的界限）。

但我不想破解原始文件，所以我想从我的页面（使用 ui.spinner.js）中覆盖该函数。我不知道如何从我的 html 页面中访问库文件的命名空间。我已经尝试过来自 stackoverflow 的大量提示，但在我的情况下似乎没有一个有效。库文件以 (function($, undefined) 开头，但我不明白它是如何定义一个命名空间供我在我的 html 页面中定义的，所以我可以“闯入”并覆盖该函数。

顺便说一句，该函数在库文件内部使用，在这种情况下可能无法覆盖它？我不想在我的 html 页面中本地使用它，我调用更高的方法来做我的业务，我只需要更改库内部的工作方式。

【问题讨论】：

标签： javascript jquery overriding spinner

【解决方案1】：

首先，您是否完全确定无法通过指定微调器对象的选项来解决问题？似乎使用min、max 和step 选项，您可以使step 成为您在创建微调器或设置范围时想要的范围的任何百分比。这是the doc 的step 选项。

如果这是一个内部函数（未在公共 API 中公开或作为公共对象上的方法），那么这一切都取决于它的编码方式。如果它没有被放入公共命名空间并且它是在其他一些函数中定义的，那么你就无法重新定义它。函数的内部不是你可以在 Javascript 中从函数外部获得的东西，除非它们以某种方式明确地可供公众访问。

如果它在某处的公共 API 中，那么您可以为 API 所在的任何符号分配一个新函数，这将替换原始函数（通常您首先保存原始函数，以便在需要时仍然可以使用它)。

如果您不向我们展示您想要覆盖的实际代码，我们将无法为您提供更具体的帮助。仅供参考，我在 jQueryUI source repository 中找不到名为 _doSpin 的函数，所以我真的不知道您要在哪个代码中覆盖哪个函数。

编辑：在 Google 搜索中，我发现 another version of a jQuery UI spinner 确实有一个 _doSpin() 方法。在那个版本中，_doSpin() 方法最终作为微调器小部件对象（它用于所有对象的 jQuery UI 对象结构）原型上的方法。我个人对 jQueryUI 没有太多经验，但是通过阅读他们关于小部件工厂的文档，听起来您可以从现有小部件继承并替换原型上的方法。或者，您可能会直接破解原型 - 尽管需要做一些事情来弄清楚 jQueryUI 存储它的方式/位置或获取它的方式。

【讨论】：

您好，感谢您的回答。我没有js经验，因此很困难。我不能使用 step 的原因是因为 step 需要动态更改，尽管也许我可以在鼠标滚轮的每个滴答声上不断更新它，我没有对此进行调查，但这会产生很多事件（不确定是否这很重要）。我使用的版本似乎与我所指的文档不匹配，这是我在您提到此小部件的版本后发现的。它们的细节和可用方法似乎差异很大。最后，这一切似乎都是我开始的黑客行为（续）
考虑不使用这个小部件，而是直接实现功能，这最终使我花费的时间比使用 jquery 小部件要少得多。您的描述让我意识到，深入了解 jquery 小部件并因此成功地将事件侦听器附加到我拥有的文本框的每个实例并直接触发 js 函数的成功路线并非易事。这也更加清晰和准确，因为我能够将数据保存在浮点数组中并避免微调器小部件的舍入。我会为任何偶然发现类似的人发布一个代码 sn-p。

【解决方案2】：

这最终做得更好。

<html>
<script type='text/javascript'> 

var mainarray = [1,2,3,4,5];

function scrolltxtbox (e) {
    var evt=window.event || e;
    var delta=evt.detail ? evt.detail*(-120) : evt.wheelDelta;

    var targ;
    if (evt.target) targ = evt.target;
    else if (evt.srcElement) targ = evt.srcElement;

    (delta<=-120)?multiplier=0.95:multiplier=1.05;

    changeweight(targ.id, multiplier);

    if (evt.preventDefault) 
        evt.preventDefault()
    else return false
}

function changeweight(targid, multiplier) {
    var u = targid.match(/myspinner(.*)/); 
    mainarray[u[1]] = mainarray[u[1]]*multiplier;

    document.getElementById(targid).value = mainarray[u[1]].toPrecision(3);
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" 
var index;

for (index = 0; index < mainarray.length; ++index) {
    document.write('<input type="text" size=6 id="myspinner'+index+'" value='+mainarray[index]+' autocomplete="off"><br>');
    if (window['myspinner'+index].attachEvent) {
        window['myspinner'+index].attachEvent("on"+mousewheelevt, scrolltxtbox);
    } else if (window['myspinner'+index].addEventListener) {
        window['myspinner'+index].addEventListener(mousewheelevt, scrolltxtbox, false);
    }
}           

</script>
</html>

它可能（绝对！）过于冗长，但效果很好。

【讨论】：