在自定义库中包含JQuery。 如何解决冲突问题。

Question

I am developing a new JS library. I want to include JQuery as core part of it.

My library is supposed to work on all kind of websites, so in those sites JQuery may be already included with different version , may have some other library which may conflict with JQuery inside my library.

jQuery.noConflict();  

may not be a complete solution , since it will remove variables from the global scope. My library don't want to change any other settings by user.

So how can i avoid these issues

• Conflict with other library ? ( $ alias - may be jQuery.noConflict(); ).
• Conflict with other versions of JQuery , if it is already included in the web page.

Thanks in advance. Please don't tell that not include JQuery , use normal JS :)

Answer 1

It's very simple.

First load your preferred jQuery, and get a handle to that by omitting any conflicts from already existing jQuery by using,

    $yourJQ = window.jQuery.noConflict(true);

Use $yourJQ in a anonymous scope in all the functions that you want use your jQuery. Like this,

   (function($){
     // external library code   

    })($yourJQ);

Hope this helps

Also visit http://alexmarandon.com/articles/web_widget_jquery/

Answer 2

Well regardless of whether you remove variables from the global scope or not you will have to do a find & replace to change which library points at which version of jQuery; because they will either use $ or jQuery & conflict in the global scope, anyway. You could try something like this:

Load first version of jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  (function(window,$) {
    window.jQuery_v1 = $;
  })(window,jQuery);
  delete jQuery;
</script>

Load second version of jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  (function(window,$) {
    window.jQuery_v2 = $;
  })(window,jQuery);
  delete jQuery;
</script>

Use both versions of jQuery

<script type="text/javascript">
  // this is now one version of jQuery
  console.log(jQuery_v1);
  // this is now another version of jQuery
  console.log(jQuery_v2);
</script>