jQuery noConflict

In this simplistic example:

var myFunction = function(obj) {
    console.log($(obj));
}

I am using the $. If I use:

jQuery.noConflict();
var myObj = {X:1};
myFunction(myObj);

Then the $ is no longer valid.

But if I wrap myFunction inside of

jQuery(function($) {
var myFunction = function(obj) {
    console.log($(obj));
}
});

Then it's no longer found. myFunction is in a separate script, so I can't wrap everything in one gigant开发者_如何学JAVAic jQuery(function($) {}.

Try this:

( function($) {
  window.myFunction = function(obj) {
    console.log($(obj));
  }
})(jQuery);

Seperate file:

myFunction({X:1});

The difference is that your code is executed immediately not after the dom is ready and you are placing the function in the global context (window.) so it will be available everywhere.

I don't know what it is your doing, but in this case you may find a JQuery plugin suits you better:

( function($) {
  $.fn.myFunction = function(obj) {
    console.log(this);
  }
})(jQuery);

Seperate file:

jQuery({X:1}).myFunction();

Of course, $( {X:1} ) might do strange things with JQuery - I've never tried it before!

Why not just change your function to do this:

var myFunction = function(obj) {
    console.log(jQuery(obj));
}

You can also do:

var $j = jQuery.noConflict();

var myFunction = function(obj) {
    console.log($j(obj));
}

Then you can use $j everywhere you were using just $.

The solution is not to wrap myFunction() but its contents.

var myFunction = function(obj) {
    (function( $ ) {
        console.log($(obj));
    })( jQuery );
};

var myFunction = function(obj) {
    console.log(jQuery(obj));
}

noConflict just means you can't use $, which is a shorthand for jQuery. You don't need to wrap everything in an onLoad handler (your final example) just because you went in noConflict mode.

Use whatever means you like to transform your existing $ into jQuery. Options include:

• search and replace in your text editor;
• context-wrapping functions around your individual code sections.

You could namespace your external scripts:

var WEB = function ($) {
  return {
      myFunction: function(obj) {
        console.log($(obj));
      }

      // can add more properties / functions here

  };
}(jQuery);

Then your main script could look like this:

jQuery(function($) {
  var myObj = {X:1};
  WEB.myFunction(myObj);
});

Then you do not need to change the $ to jQuery in all external code, and the main script remains small. This works well if you want to modularize your code. It also keeps you from polluting the global namespace with many functions that you want to access across scripts--all your code can be organized under the WEB namespace. You are only adding a single var (WEB) to the global namespace.

You can also use variations of this pattern to hide information about your implementation. See: http://yuiblog.com/blog/2007/06/12/module-pattern/ (Don't miss the comment by Caridy Patiño)

don't use var, because it will be a local variable of the ready() function. use window.myFunction, define myFunction directly, or create the var outside .ready().