Как изменить значение глобального «$» на пользовательскую функцию, которая возвращает экземпляр jQuery? - PullRequest
Новая
       57

Как изменить значение глобального «$» на пользовательскую функцию, которая возвращает экземпляр jQuery?

2 голосов
/ 08 апреля 2019

Прежде чем начать, я хотел бы прояснить, что Я не хочу каким-либо образом изменять библиотеку jQuery , я просто хочу заменить значение$ global с пользовательской функцией, которая возвращает экземпляр jQuery.

Другими словами, я хочу, чтобы $ global не равнялся 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);
}

Я получил меньше ошибок, чем раньше, но все равно не работает, как ожидалось.

Что делатьЯ должен измениться, чтобы заставить мой код работать?

Ответы [ 3 ]

2 голосов
/ 08 апреля 2019

Вы можете использовать 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>
1 голос
/ 08 апреля 2019

Вы можете сделать это, создав ссылку на исходное значение, а затем использовать ее позже, например так ... 

var _$ = $;

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

Если вы хотите восстановить все в нормальное состояние в какой-то момент позже, выможно просто сослаться на сохраненное значение следующим образом ... 

$ = _$;

Примечание: Подчеркивание - это просто мое соглашение об именах.Вы можете вызывать ссылочную переменную как угодно.

0 голосов
/ 08 апреля 2019

Я получал эти ошибки, потому что я не добавлял существующие свойства и методы 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.$ = $;
})();

IТакже хотелось бы поблагодарить ВЛАЗ и Арчер за помощь.

...