JSFiddle - React, Tailwind, and code Playground

by dhoerster

HTML

Revealing Module Pattern with Composition
<br/><hr/>

JavaScript

function BaseAgile(){
    this.sayHi = function() { alert('hello'); };
}

var Agile = Agile || {};  //new object creation...top level namespace

Agile.Team = function() {
};

Agile.Team.prototype = (function() {
    var members = [],
        baseStuff = new BaseAgile(),
        addMember = function(devName) { 
            members.push(devName); 
            alert('Welcome ' + devName); 
        },
        displayMembers = function() {
            alert(members);
        };
    
    return {
        add : addMember,
        display : displayMembers,
        hi : baseStuff.sayHi  //composition of base methods
    };
}());

Agile.Office = function(address){
    this.address = address;
};

Agile.Office.prototype = (function() {
    var companyName = "AgileWays",
        displayName = function() { alert(companyName + ' is located at ' + this.address); };
    
    return {
        displayInfo : displayName
    };
}());

var myAgileTeam = new Agile.Team(),
    myOffice = new Agile.Office('Metropolis');
myAgileTeam.add('Dave');
myAgileTeam.add('Joe');
myAgileTeam.display();
myOffice.displayInfo();
myAgileTeam.hi();