javascript - 如何将全局 "$"的值更改为返回 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>