jQuery Utility Boilerplate

Question

I'm trying to create a jQuery plugin from jQuery Boilerplate . I also am wanting to create another utility-type plugin separate from this plugin. I've been up and down Google searching for different methods to create one and such. I have run into many different types and I'm unsure where to start, so I turned to StackOverflow in hopes you can help guide me.

My goal is to call my plugin (utility method/function) and pass some options and data to it and have it return to me some data whether it's an object, a string or an array, depending on the function called.

I'd like to do something like this:

<script>
  var options = {option1: 'value1', option2: 'value2'};
  var output = $.myplugin('methodName', options);
</script>

However, I want to respect plugin namespace, proper jQuery etiquette, etc.

Answer 1

jQuery has two types of utility "plugins" (for lack of a better term). The first is adding a method to the actual jQuery object and is also the easiest to implement, The second is to add to jQuery object instances which expect specific things to happen (chaining, iteration, context management, event, etc.).

Utility functions

This is the easy one because your not manipulating jQuery objects but instead just extending jQuery as if it was any normal JavaScript object. Simply assigning a function to jQuery (or $ for short) does the trick.

jQuery.myNewRadUtility = function myNewRadUtility(input, options) {
  // Do something with input and options
  return someValue; // return what you want
};

// Use it in your other code like so:
$.myNewRadUtility(input, options); // Or what ever you plan on doing

As you can see it's just a function like any other except your assigning it to a property on the jQuery object.

To make things more generic / hybrid approach you can separate the function and write it as if it was generic and then attach it to jQuery in a jQuery specific file or pragmatically.

function myNewRadUtility() {
  // Do one and only one amazing thing here.
}

// If we have jQuery then lets use it.
if (jQuery) {
  jQuery.myNewRadUtility = myNewRadUtility;
}

// Or if you need to massage the input / output to conform to jQuery then
if (jQuery) {
  jQuery.myNewRadUtility = function() {
    // Massage the input here
    var result = myNewRadUtility();
    // Massage the output here
    return result;
  };
}

jQuery plugins

This is a little more advance as you have to consider how jQuery objects expect to be used. First you attach to the prototype as you would above using jQuery's fn property. Then you have to manage the jQuery objects that the utility needs to work with. This means iterate over them. Finally you need to return the same or new instance depending on the purpose of the utility your creating (more often then not just return this ).

jQuery.fn.myNewRadUtility = function myNewRadUtility() {
  return $(this).each(function() {
    // Do something with $(this)
  });
};

// Use it in your other code like so:
$('p').myNewRadUtility();

Obviously there is a lot more to it and there is a lot you can do. But this is the bare minimum to get a taste.

Answer 2

you search something like this ?

jQuery.myPlugin = function(method, args) {
    var myPlug = { 
         method1: function(y) {return y} 
         method2: function(a,b) {/*....*/}


    }; 
    return myPlug[method](arg)
}