<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();
});
This Pen doesn't use any external CSS resources.