Question

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 (jQuery) written behind it? What exactly does this do. From my point of view (jQuery) simply doesn’t 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.