POO - Jquery

HTML

<div class="title">DĂ©mo POO avec JQuery</div>
<div>Affiche un super message perso en cliquant sur le message de ton choix</div>
<ul>
<li id="salut">Salut</li>
<li id="coucou">Coucou</li>
</ul>

CSS

div {      width: 100%;     text-align: center;  }
.title  {    color:orange;    font-weight: bold; }

ul {    width: 100px; }
li {    cursor: pointer; }
li:hover {    background-color: lightgrey;    color: orange;  }

JavaScript

var baseComponent = {
    message : "base message",
    showMessage : function(){
        alert(this.message);
    }
};

$(document).ready(function(){
    
    var salut={};
    $.extend(salut, baseComponent);
    $.extend(salut, {message: "salutse"});
    
    var coucou={};
    $.extend(coucou, baseComponent);
    $.extend(coucou, {message: "coucdfesefou"});
    
    $("#salut").on("click", function(){
        salut.showMessage();
    });
    
    $("#coucou").on("click", function(){
        coucou.showMessage();
    });
    
});