同时使用多版本jQuery(MultiVersion Of jQuery)

原创
2014/05/16 21:26
阅读数 138

本文使用RequireJs作为示例,在同一页面使用两个jQuery,jquery-2.0.3.js, jquery-1.7.js。

其实使用普通的script标签也都可以的。思路是:在加载一个版本jQuery时,把$保存在一个全局变量中,然后等待俩个$都加载完成后,想用哪个jQuery就调用它。

<!-- lang: html -->

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>MultiVersion of jQuery</title>
    </head>
    <body>


      <script src="js/require.js"></script>
      <script>
      require.config({
        baseUrl: "js",
        paths: {
          "jquery": "jquery-2.0.3",
          "jquery.scrollable": "jquery.tools.min"
        },
        shim: {
          "jquery.scrollable": {
            deps: ["jquery"]
          }
        },
        map: {
          "jquery.scrollable": {
            "jquery": "jquery-1.7"
          },
          "*":{
            "jquery": "jquery-2.0.3"
          }
        }
      }),
      require(["jquery"], function(){
        console.log("require 1", $.fn.jquery)
        window._$ = $;
      }),
      require(["jquery.scrollable"], function(){
        console.log("require 2", $.fn.jquery),
        console.log("require 2 scrollable", typeof $.fn.scrollable),
        window._$$ = $;
      }),
      require(["jquery"], function(){
        var
          execMain = function(){
            console.log("i can use ", window._$.fn.jquery),
            console.log("i can use ", window._$$.fn.jquery);
          },

          t = setInterval(function(){
            if(window._$ && window._$$) execMain(), t = clearInterval(t);
            else console.log("_$", typeof window._$, "_$$", typeof window._$$);
          }, 10);
      });
      </script>

    </body>
    </html>

    <!-- 输出如下:
    require 1 2.0.3
    _$ function _$$ undefined
    require 2 1.7.2
    require 2 scrollable function
    i can use  2.0.3
    i can use  1.7.2
     -->
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部