jQuery笔记——工具函数——兼容JavaScript库

71 阅读 0 评论 47 点赞

我是靠谱客的博主冷傲衬衫，最近开发中收集的这篇文章主要介绍jQuery笔记——工具函数——兼容JavaScript库，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jQuery在1.3.6版本开始就引入了JavaScript库兼容机制，即在同一个页面可以使用多个JavaScript库。

一般来说，$变量易发生冲突，因为在不同JavaScript库中都使用了$标识符，但是它们在不同的库中所表示的语义是不同的。

JQuery.noConfict( [removeAll] ) 能够放弃对&变量的控制，让给其他库或者脚本使用。

removeAll：判断是否从全局范围内去除所有jQuery变量的布尔值，包括jQuery本身。

因为$只是jQuery的别名，所以应用JQuery.noConfict( ) 函数以后，jQuery的全部功能依然可以使用，但是此时就不能用$了，只能用jQuery。

测试1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>兼容JavaScript库</title>
    <script type="text/javascript">
        var $ = function(){
            alert("其他库别名");
        }
    </script>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();                                 //恢复$变量    没有这句弹出“jQuery库别名”，有这句弹出“其他库别名”
        $(function(){
            alert("jQuery库别名");
        })
    </script>
</head>
<body>
</body>
</html>

通过这种方式可以保证jQuery不会与其他库的$对象发生冲突，在运行JQuery.noConfict( ) 函数以后，就只能使用jQuery变量访问jQuery对象。例如：再要用到$()的地方，就必须换成jQuery（）。

注意：noConfict( ) 函数必须在导入jQuery库之后，并且再倒入另一个导致冲突的库之前使用。当然也应当在其他冲突的库被使用之前，除非jQuery库是最后一个导入的。

如果jQuery命名空间也发生了冲突可以使用jQuery.noConflict(deep)函数进行解决，它是noConflict()函数的高级版本。当参数deep为true时，该函数能够把jQuery和$的控制权都交还给原来的库，因此将完全重新定义jQuery。

测试2：定义全局变量jQuerySelf暂存jQuery名字空间，并通过jQuery.noConflict(true);函数恢复jQuery最初的命名空间语义。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>兼容JavaScript库2</title>
    <script type="text/javascript">
        var jQuery = function(){
            alert("其他库别名");
        }
    </script>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        //把jQuery库另存为jQuerySelf
        var jQuerySelf = jQuery.noConflict(true);
        jQuery(function(){                                //将执行其他库名字空间
            alert("jQuery库名");
        });
        jQuerySelf(function(){                            //将执行jQuery库名字空间
            alert("jQuery库名")
        })
    </script>
</head>
<body>
</body>
</html>