Implementing module pattern in Javascript with dep

问题:

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?

回答1:

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
}

回答2:

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.