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

Include a specific version of JQuery and a plugin without conflicting with the page's JavaScript library?

本文关键字：冲突 JavaScript JQuery 版本 包括 插件      更新时间：2023-10-18

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，它为他们做一切。

有可能做到这一点吗？你会怎么做？

谢谢！

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

关键代码行是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();

您可以定制jQuery，它不会破坏全局。看看来源：https://github.com/jquery/jquery/blob/master/src/exports.js.你可以修改这行：

window.jQuery = window.$ = jQuery;

像这样：

window.myRedditPluginJquery = jQuery;

然后，当您运行代码时，您需要使用myRedditPluginJquery作为$。类似IIFE:

(function($){
    //your code goes here
    //you also probably have to paste the source code for that plugin here too
})(myRedditPluginJquery);
相关文章：