Skip to content

Instantly share code, notes, and snippets.

@LeanSeverino1022
Last active September 2, 2019 05:41
Show Gist options
  • Save LeanSeverino1022/2fab8c7e7ccc82bf56b9e3c5f1f976d5 to your computer and use it in GitHub Desktop.
Save LeanSeverino1022/2fab8c7e7ccc82bf56b9e3c5f1f976d5 to your computer and use it in GitHub Desktop.
[Basic Library] usage inspired by jQuery - weird parts #designPatterns
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Library</title>
</head>
<body>
<h1 id="test">[greeting]</h1>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
;(function(global, $) {
//'new' an object
var Greetr = function(firstName, lastName, language) {
return new Greetr.init(firstName, lastName, language);
}
//hidden within scope of the IIFE
var supportedLangs = ['en', 'es'];
//informal greetings
var greetings = {
en: 'Hello',
es: 'Hola'
};
//formal greetings
var formalGreetings = {
en: 'Greetings',
es: 'Saludos'
};
//logger messages
var logMessages = {
en: 'Logged in',
es: 'Logged in - in spanish',
};
//exposed methods
Greetr.prototype = {
fullName: function(){
return this.firstName + ' ' + this.lastName;
},
validate: function(){
if (supportedLangs.indexOf(this.language) === -1) {
throw "Invalid language";
}
},
greeting: function() {
return greetings[this.language] + ' ' + this.firstName + '!';
},
formalGreeting: function() {
return formalGreetings[this.language] + ', ' + this.fullName();
},
greet: function(formal){
var msg;
//if undefined or null it will be coerced to 'false'
if(formal) {
msg = this.formalGreeting();
}
else {
msg = this.greeting();
}
if(console){
console.log(msg);
}
//'this' refers to the calling object at execution time. makes method chainable
return this;
},
log: function(){
if (console) {
console.log(logMessages[this.language] + ': ' + this.fullName());
}
return this;
},
setLang: function(lang) {
this.language = lang;
this.validate();
//make chainable
return this;
},
HTMLGreeting: function(selector, formal) {
if(!$){
throw 'jQuery not loaded';
}
if(!selector){
throw 'Missing jQuery selector';
}
var msg;
if(formal){
msg = this.formalGreeting();
}
else {
msg = this.greeting();
}
$(selector).html(msg);
return this;
}
};
//obj created here, behind the scene we are calling 'new'
Greetr.init = function(firstName = '', lastName ='', language = 'en') {
var self = this;
self.firstName = firstName;
self.lastName = lastName;
self.language = language;
self.validate();
}
//how we don't have to use the new keyword. trick borrowed from jquery
Greetr.init.prototype = Greetr.prototype;
//add our Greetr to the global obj, and provide shorthand '$G'
global.Greetr = global.G$ = Greetr;
}(window, jQuery));
//create a div with id of test
var g = G$('Puyih', 'Severino').HTMLGreeting('#test',true).log();
g.greet().setLang('es').greet(true);
console.log(g);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment