Java Script Structuring - Modular Pattern

Cons: 1. Each instance has its own copy of the method definitions Pro : 1. Simple 2.

by FrictionlessPulley

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="container">
    <div class="page-header">
         <h1>Modular Pattern</h1>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading"> <span class="glyphicon glyphicon-wrench"></span> Settings</div>
        <div class="panel-body">
            <p>Each Panel below represents two instances of <code>Animal</code> objects. The <i>Speak</i> button invokes the <code>Animal.Speak </code> method on each instance. The <i>Switch Speak Definition</i> button updates the definition of the <code>Speak</code> method <em>only</em> for the <code>Dog</code> instance.</p>
            <input type="button" id="change" class="btn btn-primary" value="Switch Speak Definition" />
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">Animal</div>
        <div class="panel-body">
            <p>invokes <code>animal.Speak</code> method</p>
            <!-- This is the HTML DIV which the AnimalSpeak button updates -->
            <div id="animalSpeak"></div>
            <input type="button" id="animalSpeakButton" class="btn btn-primary" value="Speak" />
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">Dog</div>
        <div class="panel-body">
            <p>invokes <code>dog.Speak</code> method</p>
            <!-- This is the HTML DIV which the DogSpeak button updates -->
            <div id="dogSpeak"></div>
            <input type="button" id="dogSpeakButton" class="btn btn-primary" value="Speak" />
        </div>
    </div>
</div>

JavaScript

/* 
    Simple Animal with a function to Speak 
    The speak function simply updates the $element with the latest count.
*/
var Animal = function (elementIdentifier) {
    var _element = $(elementIdentifier);
    var _count = 0;

    var _speak = function () {
        _count = _count + 1;
        _element.addClass('alert alert-success');
        var message = 'Animal Speaking.....<span class="badge">' + _count + '</span> time.';
        _element.html(message);
    };
    return {
        Element: _element,
        Count: _count,
        Speak: _speak
    }
};
/*    Animal Speak function. 
    1. increments count by 1
    2. updates element with comments
*/

$(function () {
    // Change Animal Speak working
    $('#change').on('click', function () {
        _element.addClass('alert alert-success');

        dog.Speak = function () {
            dog.Count = dog.Count + 1;
            dog.Element.addClass('alert alert-success');
            dog.Element.html('Dog Speaking.....<span class="badge">' + dog.Count + '</span> time.');
        };
        alert('Changed Definition of Dog.Speak BUT not Animal.Speak');
    });

    // Make Animal Speak
    var animal = new Animal('#animalSpeak');
    $('#animalSpeakButton').on('click', function () {
        animal.Speak();
    });

    // Make Dog Speak
    var dog = new Animal('#dogSpeak');
    $('#dogSpeakButton').on('click', function () {
        dog.Speak();
    });
});