Question

在开始之前，我想说明 我不想以任何方式修改jQuery库 ，我只想替换带有自定义函数的$全局值，该函数返回jQuery实例。

换句话说，我希望全局$不等于jQuery，并在完成其他（非jQuery）操作后返回jQuery实例。

如何做到这一点而不破坏或修改jQuery库？

例如，更改$函数，以便在使用常规函数声明返回jQuery实例之前将每个选择器记录到控制台，如下所示：

function $(selector) {
  console.log(selector);
  return jQuery(selector);
}

会引发大量错误，例如引发x is undefined或y is used out of scope。

做完一些研究后，我尝试在$.noConflict(true)函数调用后放置console.log，如下所示：

function $(selector) {
  console.log(selector);
  $.noConflict();
  return jQuery(selector);
}

我得到的错误少于以前，但仍然无法按预期工作。

要使我的代码正常工作，我需要更改什么？

Answer 1

您可以使用jQuery.noConflict()告诉jQuery放弃对$的控制。

console.log("$ === jQuery", $ === jQuery);

jQuery.noConflict();

console.log("$ === jQuery", $ === jQuery);

$ = function() {
  console.log(...arguments);
  return jQuery(...arguments);
}

$("#ChangeMe").text("We still use jQuery")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span id="ChangeMe">Text to change</span>

如果您有多个尝试抓住全局变量的东西，这也会恢复$的原始含义。

//make the function that uses $ first
$ = function() {
  console.log(...arguments);
  return jQuery(...arguments);
}

//include jQuery
let script = document.createElement('script')

script.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js";

script.addEventListener("load", () => {
  console.log("$ === jQuery", $ === jQuery);

  jQuery.noConflict();

  console.log("$ === jQuery", $ === jQuery);

  $("#ChangeMe").text("We still use jQuery")
});

document.body.appendChild(script);

<span id="ChangeMe">Text to change</span>

如果要重新分配 jQuery速记，只需分配方法调用的结果即可：

j = jQuery.noConflict();

console.log(j === jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

您可以通过创建对原始值的引用，然后在以后使用它来实现此目的，就像这样...

var _$ = $;

function $(selector) {
    console.log(selector);
    return _$(selector);
}

如果您希望稍后将所有内容恢复到正常状态，则可以像这样重新引用存储的值...

$ = _$;

注意：下划线只是我的命名约定。您可以随意调用参考变量。

Answer 3

由于没有将jQuery的现有属性和方法添加到新的$函数中，因此出现了这些错误。

我通过使用$释放jQuery.noConflict()命名空间，然后使用jQuery.extend添加jQuery的属性和方法来添加新的$函数，然后再将其公开给全局，从而解决了该问题。范围使用window.$ = $。

这是工作代码：

(function() {
  jQuery.noConflict();
  // do stuff...
  var $ = function() {
    // do some more stuff...
    return jQuery.apply(jQuery, arguments);
  };
  // do even more stuff...
  jQuery.extend($, jQuery);
  window.$ = $;
})();

我还要感谢VLAZ和Archer的帮助。

如何将全局“ $”的值更改为返回jQuery实例的自定义函数？

3 个答案: