-1

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?

(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);
Improve this question
0

2 Answers 2

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Technically this syntax is called Immediately-invoked function expression (IIFE): en.wikipedia.org/wiki/Immediately-invoked_function_expression
-1

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.