美文网首页我爱编程
jQuery.noConflict()解决多个jQuery版本冲

jQuery.noConflict()解决多个jQuery版本冲

作者: microkof | 来源:发表于2017-05-22 18:06 被阅读572次

    起因

    一些历史遗留项目中会有老的jQuery版本,比如1.7版本,这是一个比较经典的版本,然而后面的1.8版本在api方面有很多的变更,到1.11版本就更是隔了不少版本,一些老插件在新jQ里无法运行,而新写的代码又不被老jQ支持,让很多人很头痛。

    官方解决方案

    官方的解决方案就是jQuery.noConflict(),它的中文官方文档写的比较好,不过可能你看完还是不太懂怎么用,这里再通俗的解释一下。

    使用方法

    先看不用jQuery.noConflict()会有什么问题:

    <script src="jquery-1.7.js"></script>
    <script src="jquery-1.11.js"></script>
    <script>
        // 现在window.$和window.jQuery是1.11版本:
        console.log($().jquery); // => '1.11.0'
        // 接下来的所有代码和插件都只能基于1.11版本,所有只兼容1.7版本的插件都直接挂掉
    </script>
    <script src="myscript.js"></script>
    

    正确姿势:

    <script src="jquery-1.7.js"></script>
    <script src="jquery-1.11.js"></script>
    <script>
        // 现在window.$和window.jQuery是1.11版本:
        console.log($().jquery); // => '1.11.0'
        var __ = jQuery.noConflict(true);
        // 现在window.$和window.jQuery被恢复成1.7版本,只有__才代表1.11版本
        console.log($().jquery); // => '1.7.0'
        // 可以通过 __ 访问1.11版本的jQuery了
        console.log(__.jquery); // => '1.11.0'
    </script>
    <script src="myscript.js"></script>
    

    原理

    从上面代码就可以读懂jQuery.noConflict()的原理:

    1、既然jq两个版本先后加载,就肯定只有一个生效,通常肯定是让老版本在上,新版本在下,让新版本在后面生效。
    2、让生效的那个新版jQ做出一个让步,给自己换个名字比如__,然后把$和jQuery变量名重新交给前一个老版jQ。
    3、这样两个版本的jQ都有了自己的名字,就可以并存了。

    问题

    虽然你写的代码可以用__,但是别人基于1.11版本写的插件不认这个变量,只认jQuery变量,怎么解决呢?

    1、什么也不改,直接先试试,假如基于1.11的插件也可以基于1.7,那就省事了。
    2、万一不行,只能是修改插件了,由于插件都会用自执行函数包裹代码,所以只需修改一处即可:

    (function ($) {
        // 代码体...
    })(jQuery);
    

    将传入的jQuery改成__即可。

    相关文章

      网友评论

        本文标题:jQuery.noConflict()解决多个jQuery版本冲

        本文链接:https://www.haomeiwen.com/subject/ngkixxtx.html