Search code examples
javascriptjqueryjquery-pluginsmodule-pattern

Implementing module pattern in Javascript with dependency on jquery


What is the best way to implement module pattern, while the module code depends on third party libraries like jQuery for example?

var someModule = (function(){
    //private attributes
    var privateVar = 5;

    //private methods
    var privateMethod = function(){
        return 'Private Test';
    };

    return {
        //public attributes
        publicVar: 10,
        //public methods
        publicMethod: function(){
            return ' Followed By Public Test ';
        },

        //let's access the private members
        getData: function(){
            //make ajax call and do some processing and generate output
            return privateMethod() + this.publicMethod() + privateVar;
        }
    }
})(); //the parens here cause the anonymous function to execute and return

someModule.getData();

My question is: I am planning to put all the code in a library like fashion in a javascript file.

As you see in the getData() method, I plan to make ajax calls. I want to use jQuery library for this. Now how do I code a javascript module, while relying on jQuery ?

Should I make my whole library a jQuery plugin instead?


Solution

  • A great tutorial/example can be found here or here. I know this isn't the module pattern, but it offers the same benefits of the revealing module pattern along with allowing you to extend the namespace across files if needed. Below is the code from that example.

    //Self-Executing Anonymous Func: Part 2 (Public & Private)
    (function( skillet, $, undefined ) {
        //Private Property
        var isHot = true;
    
        //Public Property
        skillet.ingredient = "Bacon Strips";
    
        //Public Method
        skillet.fry = function() {
            var oliveOil;
    
            addItem( "\t\n Butter \n\t" );
            addItem( oliveOil );
            console.log( "Frying " + skillet.ingredient );
        };
    
        //Private Method
        function addItem( item ) {
            if ( item !== undefined ) {
                console.log( "Adding " + $.trim(item) );
            }
        }    
    }( window.skillet = window.skillet || {}, jQuery ));
    
    //Public Properties
    console.log( skillet.ingredient ); //Bacon Strips
    
    //Public Methods
    skillet.fry(); //Adding Butter & Frying Bacon Strips
    
    //Adding a Public Property
    skillet.quantity = "12";
    console.log( skillet.quantity ); //12
    
    //Adding New Functionality to the Skillet
    (function( skillet, $, undefined ) {
        //Private Property
        var amountOfGrease = "1 Cup";
    
        //Public Method
        skillet.toString = function() {
            console.log( skillet.quantity + " " + 
                         skillet.ingredient + " & " + 
                         amountOfGrease + " of Grease" );
            console.log( isHot ? "Hot" : "Cold" );
        };    
    }( window.skillet = window.skillet || {}, jQuery ));
    
    try {
        //12 Bacon Strips & 1 Cup of Grease
        skillet.toString(); //Throws Exception
    } catch( e ) {
        console.log( e.message ); //isHot is not defined
    }