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

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。

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

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的帮助。