Question

I've read these two very nice posts(http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html and http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript) about module pattern in Javascript, but i'm having troubles wrapping my head around how to write it in CoffeeScript.

I want to write a module that can be spread among multiple files, without unintentionally overwriting any of its parts (what first post calls 'Loose Augmentation'), that can be loaded in parallel asynchronously, and each submodule can access the module itself with all its sub modals in private scope.

I think in Javascript i would write it like this, pls correct me if i'm wrong:

var MODULE = (function(parent, $){
  var module = parent || {};

  function privateMethod(){
    console.log('Private method');
  };

  module.publicMethod = function(){
    console.log('Public method');
  };

  return module;
}(MODULE || {}, jQuery));

What i have so far, i'm not sure if this is the proper way to go about this.

@Module = @Module or {}
@Module = do(module=@Module, $=jQuery) ->
    privateMethod = ->
        console.log 'private method'

    anotherPrivateMethod = ->
        console.log 'public method'

    publicMethod: anotherPrivateMethod

This is closer to 'Revealing Module Pattern', but i think i'm not inheriting but overriding.

What will be the equivalent of the Javascript code, that i wrote, in CoffeeScript? And how to write the same with 'Revealing Module Pattern'?

Edit

Following @Billy Moons' answer. Will following be considered as sub module 'Loose Augmentation'?

@Module = ((Module, $) ->
  # this is private method
  name = ->
    console.log 'module name: Module'

  # revealing public methods
  Module.getName = name
  return Module
)(Module or {}, jQuery)

@Module.sub = ((Module, sub, $) ->
  privateMethod = ->
    console.log "#{Module.getName} - sub"

  # reveal public methods
  Module.sub = privateMethod

  return Module.sub
)(Module or {}, Module.sub or {}, jQuery)

which compiles to following javascript:

(function() {
  this.Module = (function(Module, $) {
    var name;
    name = function() {
      return console.log('module name: Module');
    };
    Module.getName = name;
    return Module;
  })(Module || {}, jQuery);

  this.Module.sub = (function(Module, sub, $) {
    var privateMethod;
    privateMethod = function() {
      return console.log("" + Module.getName + " - sub");
    };
    Module.sub = privateMethod;
    return Module.sub;
  })(Module || {}, Module.sub || {}, jQuery);

}).call(this);

Just to remind, i want to be able to spread the submodule/module between multiple files.

Was it helpful?

Solution

Your coffeescript differs from the target javascript. For example, in the coffeescript, you are referring to this when defining your module (by using @).

A more literal translation of your target javascript into coffeescript...

MODULE = ((parent, $)->
  module = parent || {}

  privateMethod = ->
    console.log 'Private method'

  module.publicMethod = ->
    console.log 'Public method'

  module
)(MODULE || {}, jQuery)

Generates this javascript...

var MODULE;

MODULE = (function(parent, $) {
  var module, privateMethod;
  module = parent || {};
  privateMethod = function() {
    return console.log('Private method');
  };
  module.publicMethod = function() {
    return console.log('Public method');
  };
  return module;
})(MODULE || {}, jQuery);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top