快速解决jQuery与其他库冲突的方法介绍

160 阅读 0 评论 106 点赞

我是靠谱客的博主寂寞小笼包，最近开发中收集的这篇文章主要介绍快速解决jQuery与其他库冲突的方法介绍，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

通常，当在同一个页面上使用jQuery和其他库时，全局名称$的定义是最大的争论和冲突的焦点。众所周知，jQuery使用$作为jQuery名称的别名，并将其用于jQuery公开的每一个功能，但是其他库，最著名的就是Prototype,也使用$名称。

1. jQuery提供了$.noConflict()实用函数用来放弃对$标识符的占用，以便其他库使用它。

该函数的语法如下：
$.noConflict(jqueryToo)

将标识符$的控制权归还给其他库，允许在页面上混合使用jQuery与其他库。一旦执行了该函数，必须使用jQuery标识符而不是$标识符来调用jQuery的功能，

你也可以放弃jQuery标识符（可选）

应该在包含了jQuery之后，但尚未包含冲突库之前调用这个方法。

尽管使用的是jQuery标识符，但因为$是jQuery的别名，所以在应用$.noConflict()之后所有jQuery的功能依然可用。我们可以定义更短的，但没有冲突的jQuery别名，例如

var $j = jQuery ;

2. 另一个常见的习惯用法是创建一个作用域环境，在该环境中$标识符指向jQuery对象，在扩展jQuery的时候这是个常用技巧，特别是对于插件作者来说，他们不可能对于页面开发者是否已经调用$.noConflict()作出任何假设，当然也不能自行调用此函数以免破坏页面开发者的意愿，

这个习惯用法如下：
(function($) { }) (jQuery);
(function($) { })

这部分声明了一个函数并用圆括号括起来，由此生成一个表达式，这个表达式的结果是对一个匿名函数的引用，这个函数期望传入单个参数并将其命名为$,在函数主体中，可以通过$标识符来引用任何传递给这个函数的东西。因为参数声明优先于全局作用域中任何类似的命名标识符，所以任何在函数外定义的$值在函数内都会被传入的参数所代替。

(jQuery)

在匿名函数上执行函数调用，将jQuery对象作为参数传递

在函数外部不管$标识符是否已经在Prototype或其他库中定义，在函数体内它总是指向jQuery对象。

当使用这个技巧时，外部声明的$在函数体内是不可用的。

3. 第二种的用法的一个变体也经常用于声明就绪处理函数，从而形成了第三种语法，
jQuery( function($){
})

当编写可重用的组件并且这些组件可能会用于已经使用了$.noConflict()的页面时，最好对$的定义采取这种预防措施。