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.
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"
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/
1