2

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它为他们做所有事情。

有可能完成这项工作吗？你会怎么做？

谢谢！

4

2 回答 2

5

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

代码的关键行是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();
于 2012-07-15T12:46:08.083 回答
4

您可以制作一个不会破坏全局变量的 jQuery 自定义构建。看看源代码：https ://github.com/jquery/jquery/blob/master/src/exports.js 。您可以修改这一行：

window.jQuery = window.$ = jQuery;

变成这样：

window.myRedditPluginJquery = jQuery;

然后当你运行你的代码时，你需要使用myRedditPluginJqueryas $。像这样的 IIFE：

(function($){
    //your code goes here
    //you also probably have to paste the source code for that plugin here too
})(myRedditPluginJquery);
于 2012-07-15T11:30:27.410 回答