SOOJS Class Example

This is a very very simple example of using SOOJS "classes"

by bladnman

HTML

<input type=button id="barkSpike" value="Bark Spike" class="runButton">
<input type=button id="countSpike" value="Count Barks Spike" class="runButton">
<div id="log" class="log"></div>

CSS

.runButton {
    width:   125px;
    margin:  20px;
}
.log {
   padding:10px; 
    margin: 20px; 
    border: 1px dotted #ccc; 
    color:#888; 
    font-face: arial; 
    font-size:12px; 
    background: #fbfbfb; 
}

JavaScript

(function () {
    spike = new Dog("Spike");
    spike.requests.bark();
})();

function barkSpike() {
    spike.requests.bark();
}
function countBarksSpike() {
    spike.requests.countBarks();
}




function Dog(inName) {
    var my             = this;
    
    // name is public
    my.name            = inName;

    // bark count is private
    var barkCount      = 0;
    
    
    
    /* ---++---     ---++---
     *     R E Q U E S T S
     */
    var requests = {
        isValid                    : function() {
            return true;
        },
        
        bark   : function () {
            debug(my.name + " says [BARK]");
            barkCount++;
        },
        
        countBarks   : function () {
            
            debug(my.name + " counts his barks...");
            var message = "";
            
            for (var i=0; i < barkCount; i++ ) {
                message += "[BARK]";
            }
            
            debug(message);
            debug();
        }
    };


    /* ---++---     ---++---
     *     D E F I N E
     *     P U B L I C
     */
    my.requests                 = requests;


};







$("#barkSpike").live('click', function() {
    barkSpike();
});
$("#countSpike").live('click', function() {
    countBarksSpike();
});





















/* ************************************ 
 _____ ___ __  __ ___ _      _ _____ ___ 
|_   _| __|  \/  | _ \ |    /_\_   _| __|
  | | | _|| |\/| |  _/ |__ / _ \| | | _| 
  |_| |___|_|  |_|_| |____/_/ \_\_| |___|
                                         

ignore all of this... it's to do all the "display"
work here in JSFiddle

************************************  */
function debug(message, value) {
    var outMessage = message;

    if (typeof value !== "undefined" && value !== null) {
        outMessage += "&nbsp;&nbsp;&nbsp;&nbsp;[" + value + "]";
    }
    if ($("#log").html() != "") {
        $("#log").append("<br>");
    }
    $("#log").append(outMessage);

    if...