在不与页面的 JavaScript 库冲突的情况下包含特定版本的 JQuery 和插件？

Question

TL;DR：我想包含一个特定版本的 JQuery 和一个特定的 JQuery 插件，该插件与我在多个不同站点上包含 jQuery 相关联，我对它们使用的 JavaScript 库/插件一无所知，没有冲突。可能的？如何？

整个故事：假设我想构建一个 Reddit 平台，通过在页面上包含http://myredditplatform.com/reddit.js和<a href="" data-reddit-thread-id="1234"></a>散布元素，多个站点可以链接到 Reddit 线程。一旦用户点击这样的链接，我就会在一个漂亮的模态窗口中打开 reddit。

现在，因为我希望 Reddit 平台体验在使用我的脚本的所有站点上保持一致，所以我希望所有站点都使用我的特定模式插件，并且我想以我的特定方式设置链接的样式。

但是我永远无法确定其他站点使用的是什么 Javascript 库或插件，所以我必须确保在reddit.js加载 JQuery 时，它不能与页面上的其他库发生冲突，并且reddit.js加载时，例如，prettyPhoto插件应该只关联使用我包含的 jQuery 库。

但我也希望我的平台被广泛采用，所以我不想对站点设置更多限制，例如必须使用 jQuery，或者必须加载 PrettyPhoto。我只希望他们包含这个 JS 文件，reddit.js它为他们做所有事情。

是否有可能使这项工作？你会怎么做？

谢谢！

Answer 1

下面是我的小部件加载器的精简版本，它基本上可以满足您的需求。

关键的代码行是 jquery1_8_2 = jQuery.noConflict(true);

更多信息在这里：http : //api.jquery.com/jQuery.noConflict/

var myWidgetLoader = function() {

   this.start = function() {
      this.getScript('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', function(){

         jquery1_8_2 = jQuery.noConflict(true);  // true = unconflict all jQuery vars, including "jQuery"
         (function(jQuery) {
            var $ = jQuery;
            // do stuff that uses jQuery
         })(jquery1_8_2);

      });
   }

   this.getScript = function(url, success) {
      var script = document.createElement('script');
      script.src = url;
      var head = document.getElementsByTagName('head')[0], done=false;
      script.onload = script.onreadystatechange = function(){
         if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
            done = true;
            success();
         }
      };
      head.appendChild(script);
   }

}

myWidgetLoader.start();