JavaScript / JQuery = Strange function definition , Syntax never seen before?

Question

Hello,

below is a function from JQueryTools and I have never seen the following definition before and do not understand whats the purpose of it:

(function (b) { ....})(jQuery);

Why the round () braces around the function definition, and why is (JQeuery) written behind it? What exectly does this do. From my point of view (jQuery) simply doesnt have any function here?? Where can I learn more about this syntax and purpose?

thanks very much. Frank

(function(b) {
 b.fn.wheel = function(e) {
  return this[e ? "bind" : "trigger"]("wheel", e)
 };
 b.event.special.wheel = {
  setup : function() {
   b.event.add(this, d, c, {})
  },
  teardown : function() {
   b.event.remove(this, d, c)
  }
 };
 var d = !b.browser.mozilla ? "mousewheel" : "DOMMouseScroll"
   + (b.browser.version < "1.9" ? " mousemove" : "");
 function c(e) {
  switch (e.type) {
  case "mousemove":
   return b.extend(e.data, {
    clientX : e.clientX,
    clientY : e.clientY,
    pageX : e.pageX,
    pageY : e.pageY
   });
  case "DOMMouseScroll":
   b.extend(e, e.data);
   e.delta = -e.detail / 3;
   break;
  case "mousewheel":
   e.delta = e.wheelDelta / 120;
   break
  }
  e.type = "wheel";
  return b.event.handle.call(this, e, e.delta)
 }
 var a = b.tools.scrollable;
 a.plugins = a.plugins || {};
 a.plugins.mousewheel = {
  version : "1.0.1",
  conf : {
   api : false,
   speed : 50
  }
 };
 b.fn.mousewheel = function(f) {
  var g = b.extend( {}, a.plugins.mousewheel.conf), e;
  if (typeof f == "number") {
   f = {
    speed : f
   }
  }
  f = b.extend(g, f);
  this.each(function() {
   var h = b(this).scrollable();
   if (h) {
    e = h
   }
   h.getRoot().wheel(function(i, j) {
    h.move(j < 0 ? 1 : -1, f.speed || 50);
    return false
   })
  });
  return f.api ? e : this
 }
})(jQuery);

Answer 1

It's defining an anonymous function inline and then immediately calling that function, passing the jQuery argument in.

It's essentially equivalent to

function anonymous(b) {
   ...
}

anonymous(jQuery);

except that it has several advantages/differences:

• this presumably one-off function does not require a name
• the function will not affect the global namespace and there cannot be any name clashes, nor can any other code "accidentally" reference it.
• it's a briefer syntax which in some trivial situations is often clearer that explicitly defining a trivial function and then referring it.

In fact, the pros, cons and reasoning are similar to something like anonymous inner classes in Java, if you're familiar with that.

The reason for the brackets around the function definition is simply because of the precedence of the way tokens bind in Javascript; they're needed to enclose the function definition as separate from its argument. Without them the code would not be syntactically correct.

Answer 2

This function runs immediately and is passed jQuery as a parameter named ‘$’. Since ‘$’ is a local variable, we can assume that it always refers to the jQuery library rather than another library that grabbed the global ‘$’ variable first. Source - "How to Develop a jQuery Plugin"

The article I referred to used the typical $ variable. In this case, the plugin author chose to use b. This is meant to prevent conflict with other Javascript libraries that may be trying to use the same global variable.