Joshua T Kalis he/him/his

jQuery Plugins

Why, and How?


Why?


Portability


Reusability

$("div.special").someCoolPlugin();

$("div.other").someCoolPlugin({different: "options"});

$("div.react").someCoolPlugin(function () {
  // wonderful event handler
});

Abstraction

$(document)
  .ready(function ($) {
    var options = {
      background: "#ABABAB",
      color: "#EFEFEF"
      // other options definitions
    };

    $("#specialObject")
      .find("a")
        .css({
          background: options.background,
          color: options.color
          // other css definitions
        })
        .end()
      .fadeIn(function () {
        // custom callback code here
      });
});

Abstraction

$(document)
  .ready(function () {
    $("#specialObject")
      .customPlugin({
        background: "#ABABAB",
        color: "#EFEFEF"
      });
  });

Name-spacing

var usefulVariable = 0;

var funStuff = function () {
  // perfect feature implementation
};

function eventHandler (event) {
  // respond to user interaction
}

Name-spacing

var myLib = {
  usefulVariable: 0,

  funStuff: function () {
    // perfect feature implementation
  },

  eventHandler: function (event) {
    // respond to user interaction
  }
};

Name-spacing

var myLib = {
  usefulVariable: 0,

  funStuff: function () {
    // perfect feature implementation
  },

  eventHandler: function (event) {
    // respond to user interaction
  }
};

myLib.usefulVariable; // access value = 0
myLib.funStuff(); // call the function

myLib.eventHandler = function () {};
// oops, now the eventHandler has been reassigned

Security

var Wierdo = function (str) {
  var hidden = "blah";

  this.func = function() {
    return hidden + " " + str;
  };
};

Support


Final Reasons


Know These


JavaScript Scope

var foo = "";
var scope = function () {
  foo = "bar";
};

console.log("foo =", foo); // value is ""
scope();
console.log("foo =", foo); // value is "bar"

/* ** */

var baz = "";
var scope = function () {
  var baz = "fiz";
};

console.log("baz =", baz); // value is ""
scope();
console.log("baz =", baz); // value is ""

IIFE

foo = function () {
  // cool things happen in here
};

foo(); // execute the function

IIFE

// step 1
foo = (function () {}); // define the function object

// step 2
foo(); // execute the function object

// step 3
(function () {})(); // execute a function without naming it

Closures

var myAPI = (function (salt) {
  var privateValue = 1.23;

  return {
    calc: function (input) {
      return salt + input * privateValue;
    }
  }
}(2.1));

console.log(myAPI.calc(123.4)); // result is 153.882

Builder Functions

var builder = function (privateValue) {
  return function (input) {
    return input * privateValue;
  };
}
var doubler = builder(2);

console.log(doubler(3)); // result is 6

How?

(function ($) {
  // define private members
  var defaults = {
    // css values
    // numeric settings for: timeouts, effects, etc.
  },
  calc = function () {
    // custom hidden calculations
  };
}(jQuery));

jQuery Plugin

(function ($) {
  // define private members ...

  $.fn.pluginName = function () {
    // inside here the "this" keyword refers to the
    // jQuery collection of objects selected
  };
}(jQuery));

Put it Together

(function ($) {
  // define private members ...

  $.fn.pluginName = function (options) {
    options = $.extend({}, defaults, options);

    // do cool stuff here for plugin...

    return this; // do not break chaining
  };
}(jQuery));

Using the Plugin

$(function () {
  // synonymous with $(document).ready(function ($) {});

  $("a.specificClass")
    .pluginName()
    .click(function () {
      // event handler
    });

  $("a.notherClass")
    .hover(function () {
      // while hovering
    },
    function () {
      // after hovering
    })
    .pluginName()
});

#Winning

... with jQuery


Joshua T Kalis

March 2011