在进行V3的二次开发时,很可能要引入其它版本的JQuery插件,这些插件引用的版本可能比全站引用的版本要低。V3引用的JQuery版本是2.0.3。如果你引入的是1.8.3,兼容问题立刻出现,场面将十分混乱,尖叫与失控不可避免。
下面总结一个小技巧,合理利用Jquery提供的noConflict()来解决网站兼容性问题,又不影响整站使用。
举例:需要引入jQuery 1.8.3版本和一个jqExample.min.js插件。
1. 如果将jquery-1.8.3-min.js引入放置在jquery 2.0.3之前,那么jqExample插件将失效;因此jquery-1.8.3-min.js必须放在jquery 2.0.3之后。
2. 当jquery-1.8.3-min.js的引入放在jquery-2.0.3-min.js之后,又出现一个问题,页面很多功能会失效,如全站消息调用,搜索框调用,包括弹出消息提示窗的关闭等等。因此必须规定jquery 1.8.3的生效范围。
3. 引入noConflict()方法来释放1.8.3版本对jquery变量$的控制权,并重新命名新的变量名称来执行插件任务,如下:
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
var $jq183 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="__JS__/jqExample.min.js"></script>
使用新的变量名称$jq183获得1.8.3版本的控制权,释放JQuery对变量$的控制。
4. 修改插件jqExample中凡是使用Jquery或使用$的引用,将其替换为$jq183,如:
(function($) {
$(function() {
});
})(jQuery);替换为:
(function($) {
$jq183(function() {
});
})(jq183);或是将这种形式:
(function(a) {
... ...
})(JQuery);替换为:
(function(a) {
... ...
})($jq183);
5. 然后在页面引用插件的地方进行相应的替换,如:
<script type="text/javascript">
$(".classname").exmapleMathed({
... ...
})
</script>
替换为:
<script type="text/javascript">
$jq183(".classname").exmapleMathed({
... ...
})
</script>
这样就能够解决临时引入一个和整站JQuery版本不一致的JQuery插件,造成的JQuery版本冲突的问题。