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

Question

在开始之前，我想说明一下 我不想以任何方式修改 jQuery 库 ，我只想用 return 是 jQuery 实例的自定义函数替换 $ 全局变量的值。

换句话说，我希望 $ 全局不等于 jQuery 并且 return 一个 jQuery 实例在完成其他操作后（非 jQuery) 东西.

如何在不破坏或修改 jQuery 库的情况下执行此操作？

例如，更改 $ 函数，以便它在 returning 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

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

var _$ = $;

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

如果你想在以后的某个时候恢复一切正常，你可以像这样重新引用存储的值...

$ = _$;

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

Answer 2

您可以使用 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>

如果要重新赋值jQueryshorthand，只需赋值方法调用的结果：

j = jQuery.noConflict();

console.log(j === jQuery);

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

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.$ = $;
})();

我还要感谢 and 的帮助。

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

How do I change the value of the global "$" to a custom function that returns a jQuery instance?

javascript

jquery

global

global-variables

dollar-sign