包含特定版本的JQuery和插件，而不会与页面的JavaScript库冲突？

问题描述

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

TL;DR: I want to include a specific version of JQuery and a specific JQuery plugin that is associated with my inclusion of jQuery on multiple different sites where I know nothing about the JavaScript libraries/plugins used by them, without conflicts. Possible? How?

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

The whole story: Let's say I want to build a Reddit platform where multiple sites can link to Reddit threads by including http://myredditplatform.com/reddit.js and having <a href="" data-reddit-thread-id="1234"></a> elements littered on the page. Once a user clicks on a link like that, I open reddit in a beautiful modal window.

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

Now because I want Reddit Platform experience to be consistent across all sites that use my script, I want all sites to use my particular modal plugin and I want to style the links in my particular fashion.

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

But I can never be sure what Javascript library or plugins the other sites are using, so I must make sure that when reddit.js loads JQuery, it must not conflict with other libraries on the page and when reddit.js loads, for example, prettyPhoto plugin it should only be associated with the jQuery library included by me.

但我也希望我的平台得到广泛采用，所以我不想对网站施加更多限制，就像你必须拥有jQuery一样，或者你必须拥有prettyPhoto加载。我只是希望他们包含这一个JS文件， reddit.js ，它为他们做了一切。

But I also want widespread adoption for my platform, so I don't want to place any more restrictions on the sites like you must have jQuery, or you must have prettyPhoto loaded. I just want them to include this one JS file, reddit.js which does everything for them.

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

Is it possible to make this work? How would you go about it?

谢谢！

推荐答案

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

Below is a stripped down version of my widget loader which does basically what you want.

代码的关键行是 jquery1_8_2 = jQuery.noConflict（true）;

更多信息：

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();

这篇关于包含特定版本的JQuery和插件，而不会与页面的JavaScript库冲突？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！