Edit in JSFiddle

//==================  Parent Module =====================//

var baseClass = (function () {
    var SecretVal = "34"; //
    return {
        showAlert: function () {
            alert("The Secret Val is " + SecretVal);
        },
        addRedBorder: function () {
            $(this.$).css("border", "3px solid red");
        }
    };
})();

//============  Child Derived from Parent =================//

var IntermidiateClass = choona.extendModule(baseClass, {
    addBlueBorder: function () {
        $(this.$).css("border", "5px solid blue");
    },
    start: function(){
    
    }
});

//==========   Final Module Derived from Child  =============//
var FinalModule = choona.extendModule(IntermidiateClass, {
    start: function () {
        var self = this;
        this.addRedBorder();
        $(this.$).find("#add").click(function () {
            self.addBlueBorder();
        });
        $(this.$).find("#addred").click(function () {
            self.addRedBorder();
        });
        $(this.$).find("#show").click(function () {
            self.showAlert();
        });
    },
    end: function () {
    }
});
//==========   Init Module/App  ========================//
choona.startApp({
    id: "applicationContainer",
    module: FinalModule
});

<div id="applicationContainer">
    <div class="box">
        	<h1>Demo for Inheritance of Modules</h1>

        <p>The Show function will be called from Base module, when you click it</p>
        <button id="show">Show Alert</button>
        <p>The Add Blue Border function will be called from Base module, when you click it</p>
        <button id="add">Add Blue Border</button>
        <button id="addred">Add Red Border</button>
        <p>This pattern is very much important.</p>
        <p>Example usecase : Think a UI-less base module which do core job of DataProcessing, validations etc and the Derived Module can handle the UI logic and bindings etc</p>
    </div>
</div>

.box {
    background-color: #FBEBFF;
    padding: 15px;
}