Methods Plugin 0.1

Since my introductory post on the Methods Plugin, I've improved the API and published it to jQuery's Plugin Directory.

The latest 0.1 version now adds 2 methods to jQuery: addMethod for adding methods and methods for retrieving the methods you added. Let's jump into some example code to explain it better. In this example I'll create a function that returns a jQuery object which has custom methods added to it. These methods can only be called by first calling the methods method on the jQuery object.

/**
* A generic productListing widget that can be displayed in a list...
*
* @param {String} tag - A string of HTML that will be converted to a jQuery Object
* @param {Object} data - A JSON Object of all the data, e.g.: {name: string, quantity: integer, price: float, description: string, freeShipping: boolean}
*/
function productListing(tag, data) {
 var $el = $(tag);

 $el
     .addClass("product-listing")
     .append("<h3>" + data.name + "</h3>")
     .append("<p>" + data.description + "</p>")
     .append('<span class="product-listing-quantity" >' + data.quantity + '</span>')
     .append('<span class="product-listing-price" >' + data.price + '</span>')
     // And on and on doing DOM stuff.
     // Now here is the interesting part!
     .addMethod("getQuantity", function () {
         return data.quantity;
     })
     .addMethod("setQuantity", function (quantity) {
         data.quantity = quantity;
         $el.find(".product-listing-quantity").html(quantity);
     })
     .addMethod("freeShipping", function () {
         return data.freeShipping;
     });
}

So now we have a productListing function that returns a jQuery object. This object can be inserted into the DOM, hidden, animated, or anything else you like to do with jQuery. However, you can also call the methods method, which returns a simple object of your functions, and start calling any of the methods you added previously: getQuantity, setQuantity, and freeShipping. If any of these methods does not return a value, the methods object is returned so you can continue to call methods in a chain. You can also call the method end to get back to the jQuery objects scope (included for chainability).

To explain this better, let's get back to code:

// Some data or our productListing
var data = {
  name: "Internet Celebrities Spoon Set",
  description: "Now get the Star Wars Kid on a coffee spoon! These commemorative spoons...",
  quantity: 10,
  price: 19.99,
  freeShipping: false
};

// Create a new productListing object
var commemorativeSpoonSet = productListing("<li/>", data);

// Append it to a DOM node, manipulate it, and call custom methods
$("#products-list")
  .append(commemorativeSpoonSet)
  .hide()
  .methods()
      .setQuantity(20)
      .end()
  .show();

// Look it up in the DOM too
var products = $(".product-listing");

products.each(function (i) {
  if (!$(this).methods().freeShipping())
  {
      $(this).hide();
  }
});

And there you have it. Methods is a small plugin, but hopefully it makes your life as a JavaScript developer a little easier.