<div id="logindiv">
  <select id="lang">
    <option value="en">English</option>
    <option value="es">Spanish</option>
  </select>
  <input type="button" value="Login" id="login" />
</div>
<h1 id='greeting'></h1>
(function(global, $) {
  var Greetr = function(firstname, lastname, language) {
    return new Greetr.init(firstname, lastname, language);
  }
  var supportedLangs= ['en', 'es'];

  var greetings = {
    en: 'Hello',
    es: 'Hola',
  };

  var formalGreetings = {
    en: 'Greetings',
    es: 'Saludos',
  };

  var logMessages = {
    en: 'Logged in',
    es: 'Iniciar sesión',
  };
  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 (formal) {
        msg = this.formalGreeting();
      } else {
        msg = this.greeting();
      }
      if (console) {
        console.log(msg);
      }
      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();
      }
      $(selector).html(msg);
      return this;
    }
  };
  Greetr.init = function (firstname, lastname, language) {
    var vm = this; // 避免 this 指向亂指
    vm.firstname = firstname || 'Defalut';
    vm.lastname = lastname || 'Defalut';
    vm.language = language || 'en';
  }
  Greetr.init.prototype = Greetr.prototype;

  global.Greetr = global.G$ = Greetr;
}(window, jQuery));

var g = G$('John', 'Doe');
g.greet().setLang('es').greet(true).log();
$('#login').click(function() {
    var loginGrtr = G$('John', 'Doe');
    $('#logindiv').hide();
    loginGrtr.setLang($('#lang').val()).HTMLGreeting('#greeting', true).log();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-3.4.1.js