Last active
September 2, 2019 05:41
-
-
Save LeanSeverino1022/2fab8c7e7ccc82bf56b9e3c5f1f976d5 to your computer and use it in GitHub Desktop.
[Basic Library] usage inspired by jQuery - weird parts #designPatterns
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ;(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