MODULE PATTERNS - ??????????????????

by lasha

HTML

<pre id="pre"></pre>

JavaScript

// app.js

// easy namespaces.
var App = App || {}; App.UI = {};

App.UI.SingletonModal = (function ($) {
    var module = {};

    module.toggle = function () {
        $("#pre").append("singleton:parent:toggle\n");
    };

    return module;
}(window.jQuery));

App.UI.PrototypeModal = (function ($) {
    // constructor.
    var module = function (a) {
        this.a = a || "prototype:parent:a";
    };

    module.prototype.constructor = module;
        
    module.prototype.toggle = function () {
        $("#pre").append(this.a + " -> prototype:parent:toggle\n");
    };

    return module;
}(window.jQuery));

// some_controller.js
var SomeSingletonModal = (function (parent, $) {
    var module = {};
    
    // override.
    var toggle = parent.toggle;
    module.toggle = function () {
        toggle();
        $("#pre").append("singleton:child:toggle\n");
    };
    
    return module;
}(App.UI.SingletonModal || {}, window.jQuery));

var SomePrototypeModal = (function (parent, $) {    
    // constructor
    function module(a) {
        parent.call(this, a);
    };
    module.prototype = new parent;
    module.prototype.constructor = module;
    
    // override.    
    module.prototype.toggle = function () {
        $("#pre").append("prototype:child:toggle\n");
        parent.prototype.toggle.call(this);        
    };
    
    return module;
}(App.UI.PrototypeModal || {}, window.jQuery));

// inspect.
console.log(SomeSingletonModal);
// call method.
SomeSingletonModal.toggle();

// create some instances.
var protoModal1 = new SomePrototypeModal();
// inspect.
console.log(protoModal1);
// call method.
protoModal1.toggle();

var protoModal2 = new SomePrototypeModal("instance:a");
// inspect.
console.log(protoModal2);
// call method.
protoModal2.toggle();