Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Framework for creating specialized jQuery plugins
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.gitignore
README.markdown
jquery.pluginizer.js

README.markdown

jQuery.Pluginizer

jQuery.Pluginizer is a kind of "meta-plugin" for jQuery: a plugin that simplifies creation of other plugins. It works especially well in complex web applications, where it allows to easily modularize pieces of JavaScript which are used to render interactive elements on page.

Example

Let's say we have some sort of dynamically loaded list of items - for example, a stream of events from social network such as Twitter:

<ul class="stream">
    <li>Creating a polaroid photo viewer with #CSS3 and #jQuery http://dld.bz/Czwu</li>
    <li>50 Useful New jQuery Techniques and Tutorials - Smashing Magazine http://bit.ly/rsQP11 #jquery</li>
    <li>Simplest SOAP example using Javascript - Stack Overflow http://bit.ly/mT2iyW #jQuery #javascript</li>
    <li class="loader"><a href="#">Load more</a></li>
</ul>

Besides some HTML markup, the stream also needs some JavaScript to handle user interaction and make AJAX requests. We can use jQuery.Pluginizer to easily turn this logic into dedicated jQuery plugin which we'll then apply to the DOM above:

$.pluginize('stream', function(data) {
    var $stream = this;
    var $loader = $stream.find('.loader');

    var loaderLink_click = function(event) {
        var ajaxArgs = data.time ? { time: data.time } : {};
        $.getJSON('/api/stream/load', ajaxArgs).done(function(items) {
            $.each(items, function() {
                var $li = $('<li/>').html(this.text);
                $stream.insertBefore($loader);
            });
            if (items.length > 0)
                data.time = items[items.length - 1].time;
        });
    };

    return {
        init: function() {
            data.time = null;
            $loader.find('a').on('click', loaderLink_click);
        };
    };
});

$(document).ready(function() {
    $('.stream').stream();
});

Thanks to this encapsulation, we can now effortlessly use our stream on multiple pages - or possibly even more than once on single page.

Pluginizing your code

$.pluginize is the sole function exposed by jQuery.Pluginizer:

$.pluginize = function(name, methods, initialData)
  • name - Plugin name, and also a name for function that will be attached to $() objects. Should be unique. Using valid JavaScript identifiers is recommended.
  • methods - Methods exposed by the plugin.
  • initialData - Plugin's initial data.

The methods parameter can be either a JavaScript object or a function returning such object.

If it's a function, it can accept a single argument: an object that can be populated with plugin-specific data. It will be stored as properly namespaced $.data within DOM element. This data object is initialized using initialData argument, if present.

The DOM element itself ($-wrapped) will be accessible through this inside the methods function.

Using the plugin

$.pluginize adds a function of with given name to jQuery $() objects. Calling it can either initialize the plugin functionality for given DOM object (using the init method), or one of the other methods:

$.pluginize('foo', ...);

$('.items').foo();              // initializes the plugin 'foo' for every element with class 'items'
// $('.items').foo('init');         // equivalent to the call above
$('.items').foo('load');            // invoke 'load' method of 'foo' plugin
$('.items:last').foo('addItems', items);    // call 'addItems' method with parameter

License

jQuery.Pluginizer uses the MIT license.

Something went wrong with that request. Please try again.