在前端开发中，我们经常会使用多个JavaScript库。然而，这些库可能会使用相同的全局变量名称，导致冲突和错误。其中最为普遍的就是jQuery和其他JavaScript库之间的冲突。
解决这个问题的最简单方法就是在代码中显式地使用jQuery而不是 $。但这并不是一个理想的解决方案，因为 $ 符号是 jQuery 最常用的标识符，使用 jQuery 会增加代码的复杂性和可读性。
那么如何在 jQuery 中使用 $ 符号而又不会与其他库产生冲突呢？下面是一些实用的方法：
1. 使用立即执行函数
将 jQuery 代码包装在一个立即执行函数中可以有效地避免冲突。这种方式也被称为命名空间保护模式，它的基本思想是创建一个局部作用域，防止变量泄漏到全局作用域中。例如：
(function($) {
// 在这里使用 $ 符号
$(document).ready(function() {
console.log('hello world');
});
})(jQuery);在上面的代码中，我们将 jQuery 对象传递给立即执行函数，并将其绑定到 $ 参数上。这样，在函数内部，我们就可以使用 $ 符号了。而在函数外部，$ 仍然会被其他库绑定使用，不会产生冲突。
2. 使用 jQuery.noConflict()
jQuery 提供了一个 noConflict() 方法，让您自己指定一个变量来代替 $ 符号，以避免与其他库的冲突。例如：
var jq = jQuery.noConflict();
// 在这里使用 jq 代替 $
jq(document).ready(function() {
console.log('hello world');
});在上面的代码中，我们将 jQuery 对象的 $ 变量释放，并将其赋值给一个局部变量 jq。现在，在代码中我们可以使用 jq 来代替 $ 符号了。
3. 使用闭包并返回对象
另一种常见的方式是将 jQuery 包装在一个闭包中，同时在闭包的最后返回一个包含需要使用的方法的对象。这种方式不仅可以避免冲突，还可以隐藏不必要的方法和属性，提高代码的安全性。例如：
-- -------------------- ---- -------
--- ----- - ----------- -
-- ----- - --
--- ---- - ------------
-------- ------ -
--------------------- -
------------------ --------
---
-
------ -
----- ----
--
-----
-- ----- ------------ --- -------------------
-------------在上面的代码中，我们将 jQuery 对象包装在一个闭包中，将 $ 变量赋值给局部变量 $doc。然后我们定义了一个名为 init() 的方法，并将其包含在返回的对象内。最后，我们在全局作用域中创建了一个名为 mylib 的变量，并将返回的对象赋值给它。
现在，在代码中我们可以使用 mylib.init() 来代替 $doc.ready() 方法，而且不会与其他库产生冲突。
总结
以上是三种常见的在 jQuery 中使用 $ 符号的方法，使其不会与其他库产生冲突。通过这些技巧，我们可以更加轻松地编写清晰、简洁和易于维护的代码。
代码示例: https://codepen.io/chatgpt/pen/BaZvMxN
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3841