Module pattern JS
by Fernando De Leon
August 12, 2016
HTML
<button id="b1">
Press here
</button>
<button id="b2">
access to private functions should give u error
</button>
<div class="a">
Hello
</div>
<div class="b">
Yes
</div>
CSS
div.a {
background-color:red;
}
div.b{
background-color:green;
}
JavaScript
;
(function ($, window, document, undefined) {
var Person = (function() {
var aPrivateVar = "private data";
var status = {
happy:":D",
sad: ":("
}
var myFunction = function(name) {
var retVal = "hi "+name+" here is your private:"+aPrivateVar;
var $a = $("div.a");
$a.hide();
return retVal;
}
var methodToExpose = function(name) {
console.log("hello there "+name);
}
return {
publicVar:"am Public ppl!",
$b:$("div.b"),
publicMethod: function(name) {
aPrivateVar = "Have change";
console.log(myFunction(name+ " "+status.happy));
},
getPrivateVar:function() {
return aPrivateVar;
},
setPrivateVar:function(val) {
aPrivateVar = val;
},
publicMethod2:methodToExpose
};
})();
var Person2 = (function() {
return {
callPerson1:function(name) {
Person.publicMethod(name);
},
callPrivatePerson1:function(name) {
Person.myFunction(name);
}
};
})();
var Person3 = {
aVariable:'notsureifLocalOrPrivate',
callPerson1:function(name) {
Person.publicMethod(name);
}
};
$('#b1').on('click',function() {
Person.setPrivateVar("Yo i changed!");
console.log(Person.publicVar);
console.log("using the getter:"+Person.getPrivateVar());
Person.publicMethod('Nando');
Person.$b.hide();
//console.log("using the getter:"+Person.getPrivateVar());
Person.publicMethod2('Bob');
console.log("going to call Person2!!!!");
Person2.callPerson1('tom');
Person3.callPerson1('Nandooo');
console.log("all is public in person3! "+Person3.aVariable);
});
$('#b2').on('click',function() {
//Person.myFunction('Nando');
Person2.callPrivatePerson1('aaaj');
});
window.Person = Person;
})(jQuery.noConflict(), window, document);