jQuery 无冲突模式

Created: October-14, 2018

在本教程中，你将学习如何避免 jQuery 与其他 JavaScript 库或框架之间的冲突。

将 jQuery 与其他 JavaScript 库一起使用

如你所知，jQuery 使用美元符号（$）作为快捷方式或别名 jQuery 。因此，如果你使用另一个也使用 $ 符号作为快捷方式的 JavaScript 库，以及同一页面上的 jQuery 库，则可能会发生冲突。幸运的是，jQuery 提供了一个特殊的 noConflict() 方法来处理这种情况。

jQuery `noConflict()` 方法

jQuery.noConflict() 方法将 $ 标识符的控制权返回给其他库。以下示例中的 jQuery 代码（第 10 行）将在 jQuery 加载到页面后立即将其置于无冲突模式，并分配新的变量名称 $j 以替换 $ 别名，以避免与原型框架冲突。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/prototype.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript">
// Defining the new alias for jQuery
var $j = jQuery.noConflict();
$j(document).ready(function(){
    // Display an alert message when the element with ID foo is clicked
    $j("#foo").click(function(){
        alert("jQuery is working well with prototype.");
    });
});
 
// Some prototype framework code
document.observe("dom:loaded", function(){
    // Display an alert message when the element with ID bar is clicked
    $(bar).observe('click', function(event){
        alert("Prototype is working well with jQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

注意： 许多 JavaScript 库在函数或变量名使用 $ ，就像 jQuery 一样。比如， mootools ， prototype ， zepto 等。

但是，如果你不想为 jQuery 定义另一个快捷方式，可能是因为你不想修改现有的 jQuery 代码或者你真的想使用 $ 它因为它节省了时间并且易于使用，那么你可以采用另一种快速方式方法 - 只需将 $ 作为参数传递给你的 jQuery(document).ready() 函数，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/prototype.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
    // The dollar sign in here work as an alias to jQuery
    $("#foo").click(function(){
        alert("jQuery is working well with prototype.");
    });
});
 
// Some prototype framework code
document.observe("dom:loaded", function(){
    // The dollar sign in the global scope refer to prototype
    $(bar).observe('click', function(event){
        alert("Prototype is working well with jQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

包括其他库之前的 jQuery

避免冲突的上述解决方案依赖于在加载 prototype.js 之后加载 jQuery。但是，如果在其他库之前包含 jQuery，则可以在 jQuery 代码中使用全名 jQuery ，以避免冲突，而不用调用 jQuery.noConflict()。但在这种情况下， $ 将具有在其他库中定义的含义。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/jquery.js"></script>
<script src="js/prototype.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
    // Use full jQuery function name to reference jQuery
    jQuery("#foo").click(function(){
        alert("jQuery is working well with prototype.");
    });
});
 
// Some prototype framework code
document.observe("dom:loaded", function(){
    // The dollar sign here will have the meaning defined in prototype
    $(bar).observe('click', function(event){
        alert("Prototype is working well with jQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

将 jQuery 与其他 JavaScript 库一起使用

jQuery noConflict() 方法

包括其他库之前的 jQuery

jQuery `noConflict()` 方法