S1 Core code example

A simple example of how to namespace and organise core code.

by jamessouth

HTML

<a href="#" class="btn">button</a>

<a href="#" class="btn btn-alert">alert</a>

<a href="#" class="btn btn-error">error</a>

<a href="#" class="btn btn-success">success </a>

CSS

body{
    font-family:arial,serif;
    font-size:16px;
}

.btn{    
    display: inline-block;
    margin:30px;
    padding:8px 16px;
    text-decoration:none;
    font-weight:bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    color:#fff;
    background:#6aa6cc;
    border-radius:5px;
    box-shadow: 2px 2px 2px #bbb;
}

.btn-alert{
    background:#F89406;
}

.btn-error{
    background:#BD362F;
}

.btn-success{
    background:#51A351;
}

JavaScript

(function($){
  
    "use strict";
      
    var s1 = {};
    
    s1.core = {
    
        utils :{
        
            stringContains : function(string, subString, ignoreCase){
                                
                var found = false;

                // Convert to uppercase to ignore casing if required.
                if (ignoreCase) {
                    string = string.toUpperCase();
                    subString = subString.toUpperCase();
                }
            
                found = string.indexOf(subString) >= 0;    
    
                return found;    
            }
        },
        ajax : {}
    };   
    
    s1.tooltips = {
        // All objects and methods here are public.

        createTips : function(){
            console.log("creating tips");        
        },
        
        init : function(){
            this.createTips();
        }
    };
    
    s1.hiddenTips = (function(){
        
        var hiddenTips = {},
        // The createHiddenTips method should be hidden
            createHiddenTips = function(){
            console.log("creating hidden tips");       
        };
        
        hiddenTips.init = function(){
            createHiddenTips ();
        }
                     
        return hiddenTips;
    }());
    
    // Initialisation code
    $(document).ready(function(){
        
        s1.tooltips.init();
        s1.hiddenTips.init();
    });
    
    $(window).load(function(){
        
        // Anything that should be delayed would be initialised here.
        
    });    
    
    // Make it available to the global object.
    window.s1 = s1;
    
}(jQuery));

console.log(s1);

console.log(s1.core.utils.stringContains("testing","test")); // true

console.log(s1.core.utils.stringContains("shouldbefalse","test")); // false