* jQuery namespaced 'Starter' plugin boilerplate
 * Author: @dougneiner
 * Further changes: @addyosmani
 * Licensed under the MIT license

;(function ( $ ) {
    if (!$.myNamespace) {
        $.myNamespace = {};

    $.myNamespace.myPluginName = function ( el, myFunctionParam, options ) {
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data( "myNamespace.myPluginName" , base );

        base.init = function () {
            base.myFunctionParam = myFunctionParam;

            base.options = $.extend({}, 
            $.myNamespace.myPluginName.defaultOptions, options);

            // Put your initialization code here

        // Sample Function, Uncomment to use
        // base.functionName = function( paramaters ){
        // };
        // Run initializer

    $.myNamespace.myPluginName.defaultOptions = {
        myDefaultValue: ""

    $.fn.mynamespace_myPluginName = function 
        ( myFunctionParam, options ) {
        return this.each(function () {
            (new $.myNamespace.myPluginName(this, 
            myFunctionParam, options));

})( jQuery );


myDefaultValue: "foobar"


A friend on Twitter shared a great E-Book called Essential JavaScript Design Patterns Volume 1.5.1. The Book is a great read on Javascript patterns. As an additional bonus the Author, Addy Osmani (addyosmani.com/blog/), discusses jQuery Patterns. From that he shows a basic template or boilerplate (if you will, right?) of a jQuery Plugin. I know these are all over the internet and you really can find a good starting point for a jQuery Plugin but I felt alongside of the book this was a great example.

Addy Osmani's take on the Namespace jQuery Plugin:

Namespacing your code is a way to avoid collisions with other objects and variables in the global namespace. They’re important because you want to safeguard your plugin from breaking in the event that another script on the page uses the same variable or plugin names as yours. As a good citizen of the global namespace, you must also do your best not to prevent other developers’ scripts from executing because of the same issues.

JavaScript doesn’t really have built-in support for namespaces as other languages do, but it does have objects that can be used to achieve a similar effect. Employing a top-level object as the name of your namespace, you can easily check for the existence of another object on the page with the same name. If such an object does not exist, then we define it; if it does exist, then we simply extend it with our plugin.

Objects (or, rather, object literals) can be used to create nested namespaces, such as namespace.subnamespace.pluginName and so on. But to keep things simple, the namespacing boilerplate below should give you everything you need to get started with these concepts.

Feel free to provide constructive criticism, feedback, thoughts, and what-not. Just wanted to share with the Forrst Community. I just like to share valuable information and I really hope that somebody gets something out of this E-Book as-well as this jQuery Template. (That's my only mission with this post, here).