Implementing module pattern in Javascript with dependency on jquery

Question

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?

Bob Stein · Accepted Answer · 2015-12-21 16:43:26Z

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
}

Didier Ghys · Accepted Answer · 2015-02-04 13:53:38Z

0

You can try something like this:

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
          $.ajax( /* ... */ );
              return privateMethod() + this.publicMethod() + privateVar;
          }
     }
 })(jQuery); //the parens here cause the anonymous function to execute and return

someModule.getData();

Just make sure jQuery.js is included before this code is executed.

edited Feb 4, 2015 at 13:53

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

answered Jan 3, 2012 at 19:46

Matt Bradley

4,5031 gold badge22 silver badges13 bronze badges

2 Comments

Satish Over a year ago

That's the way I am going right now. I think may be I put a error check condition to look for Jquery, in the module initialization/constructor?

hamczu Over a year ago

I will not work due to asynchronous nature of AJAX. Instead of returning a value you should pass callback function to getData method.

Collectives™ on Stack Overflow

Implementing module pattern in Javascript with dependency on jquery

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related