current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free.
up vote 0 down vote favorite
1

I have a class written on a project I'm working on that I've been told is using the module pattern, but it's doing things a little differently than the examples I've seen. It basically takes this form:

(function ($, document, window, undefined) {

    var module = {
        foo : bar,

        aMethod : function (arg) {
            className.bMethod(arg);
        },
        bMethod : function (arg) {
            console.log('spoons');
        }
    };
    window.ajaxTable = ajaxTable;

})(jQuery, document, window);

I get what's going on here. But I'm not sure how this relates to most of the definitions I've seen of the module (or revealing?) module pattern. like this one from briancray

var module = (function () {
    // private variables and functions
    var foo = 'bar';

    // constructor
    var module = function () {
    };

    // prototype
    module.prototype = {
        constructor: module,
        something: function () {
        }
    };

    // return module
    return module;
})();

var my_module = new module();

Is the first example basically like the second except everything is in the constructor? I'm just wrapping my head around patterns and the little things at the beginnings and endings always make me not sure what I should be doing.

share|improve this question

2 Answers 2

up vote -1 down vote

Here is the way I implement the modular pattern when using it with jQuery, but it could be another library for you.

// IIFE - Immediately Invoked Function Expression
  (function(yourcode) {

    // The global jQuery object is passed as a parameter
    yourcode(window.jQuery, window, document);

  }(function($, window, document) {

    // The $ is now locally scoped 

   // Listen for the jQuery ready event on the document
   $(function() {

     // The DOM is ready!

   });

   // The rest of the code goes here!


  }));

Here is a great free resource from Addy Osmani on the different design patterns. Very helpful. http://addyosmani.com/resources/essentialjsdesignpatterns/book/

share|improve this answer
    
Programmers is about conceptual questions and answers are expected to explain things. Throwing code dumps instead of explanation is like copying code from IDE to whiteboard: it may look familiar and even sometimes be understandable, but it feels weird... just weird. Whiteboard doesn't have compiler –  gnat Aug 22 '14 at 18:47
    
Thanks for the info gnat. Will do. –  Jerry Aug 22 '14 at 19:15
up vote 1 down vote

It's really a weird example, I've never seen a usage of a constructor to create a module this way. I would higly recommend you using the first solution, it creates just one scope and one object and that's all you need. The second one is used mainly when you need to export some constructor. And then you are allowed to use new Constructor() multiple times. However the first solution can be a little bit altered:

var module = new (function ($, document, window, undefined) {
  this.property = "hello";
})(jQuery, document, window);

console.log(module.property);

This allow you to create an IIFE which itself is a constructor so you get a new object based on this constructor. If you don't like the object literal based solution, this is a way to go.

Also you can take a look at AMD (using RequireJS) or CommonJS (using Node.js or Browserify) specifications which allows you to move every single module to its own file. Lots of libraries use these patterns. I prefer CommonJS and it's very simple. You have a file which represents a module and which has 3 additional predefined variables. They are exports, module and require.

// a.js
exports.property = "hello"; // Basically the same as the example above

// b.js
module.exports = function () { // Something similar to exporting a custom object
  console.log("hello");
};

// c.js
var a = require("./a"), b = require("./b"); // Loading these modules

console.log(a.property); // logs "hello"
b(); // also logs "hello"
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.