Last active
August 10, 2016 18:05
-
-
Save VadimBrodsky/c32c6c7621c858561f382dc624c3bf21 to your computer and use it in GitHub Desktop.
Sample JS library for greetings, as part of the Udemy JS Understand the weird parts course
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
| var g = G$('John', 'Snow'); | |
| // console.log(g); | |
| // g.greet().setLang('es').greet(true).log(); | |
| $('#login').click(function () { | |
| var lang = $('#lang').val(); | |
| g.setLang(lang).HTMLGreeting('#greeting', true).log(); | |
| }); | |
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, $) { | |
| "use strict"; | |
| // "new" an object | |
| var Greetr = function (firstName, lastName, language) { | |
| return new Greetr.init(firstName, lastName, language); | |
| }; | |
| // hidden within the scope of the IIFE and never directly accessible | |
| var supportedLanguages = ["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: "Inicio sesion" | |
| }; | |
| // prototype holds methods | |
| Greetr.prototype = { | |
| // "this" refers to the calling object at execution time | |
| fullName: function() { | |
| return this.firstName + " " + this.lastName; | |
| }, | |
| validate: function () { | |
| // check that it is a valid language | |
| // references the extrnally inaccessible "supportedLangs" within the closure | |
| if (supportedLanguages.indexOf(this.language) === -1) { | |
| throw "Invalid language"; | |
| } | |
| }, | |
| // retreive messages from object by referring to the properties using [] syntax | |
| greeting: function() { | |
| return greetings[this.language] + " " + this.firstName + "!"; | |
| }, | |
| formalGreeting: function() { | |
| return formalGreetings[this.language] + ", " + this.fullName(); | |
| }, | |
| // chainable method return their own containing object | |
| greet: function(formal) { | |
| var msg = formal ? this.formalGreeting() : this.greeting(); | |
| console ? console.log(msg) : null; | |
| return this; | |
| }, | |
| log: function() { | |
| if(console) { | |
| console.log(logMessages[this.language] + ": " + this.fullName()); | |
| } | |
| return this; | |
| }, | |
| setLang: function(lang) { | |
| this.language = lang; | |
| this.validate(); | |
| 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(); | |
| } | |
| // inject the message in the chosen place in the DOM | |
| $(selector).html(msg); | |
| // make chainable | |
| return this; | |
| } | |
| }; | |
| // the actual object is created here, allowing to use "new" without calling "new" | |
| Greetr.init = function(firstName, lastName, language) { | |
| var self = this; | |
| self.firstName = firstName || ""; | |
| self.lastName = lastName || ""; | |
| self.language = language || "en"; | |
| self.validate(); | |
| }; | |
| // like jQuery, to avoid using "new" keyword | |
| Greetr.init.prototype = Greetr.prototype; | |
| // attach the Greetr to the global object, provide shorthand "$G" | |
| global.Greetr = global.G$ = Greetr; | |
| }(window, jQuery)); |
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
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| <title>Greetr Demo</title> | |
| </head> | |
| <body> | |
| <div id="logindiv"> | |
| <select id="lang"> | |
| <option value='en'>English</option> | |
| <option value='es'>Spanish</option> | |
| </select> | |
| <input type="button" name="" id="login" value="Login" /> | |
| <h1 id="greeting"></h1> | |
| </div> | |
| <script src="jquery.js" type="text/javascript" charset="utf-8"></script> | |
| <script src="greetr.js" type="text/javascript" charset="utf-8"></script> | |
| <script src="app.js" type="text/javascript" charset="utf-8"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment