javascript:

create.your.own('library');

Created by Paul Balchin

← → ↑ ↓ navigate

Esc bird's eye view

barbie.com's JavaScript library

Functions attached to object trees.

//SIMPLIFIED EXAMPLE
mattel = {};
mattel.loginreg = {};
mattel.loginreg.variables = {};
mattel.loginreg.login = function(){};
mattel.loginreg.logout = function(){};
mattel.loginreg.isUnder13 = function(){};
mattel.loginreg.isOver13 = function(){};
					

↓

1. There are no advantages to this structure
2. All the functions are public
3. None of the functions can share scope

The humble function

var functionName = function(){
    console.log('called functionName()');
};
					

↓

//CONSOLE
functionName() → 'called functionName()'
						

?

Initialize from within

var functionName = (function(){
    console.log('called functionName()');

    // this is an init()
    $(document).ready(function(){ 
        console.log('called functionName.document.ready()');
    });
}());
					

//CONSOLE
'called functionName()'
'called functionName.document.ready() '
					

↓

1. No need to create separate, public methods
2. Has access to private (and scoped!) methods and properties

Various ways to initialize

var functionName = (function(){
    var a, b, c;
    var functionOne = function(){};
    var functionTwo = function(){};
    var functionThree = function(){};

    // types of inits(): event-driven
    $(document).ready(functionName);
    $(document).on('click',functionName);
    $(window).load(functionName);
    $(window).resize(functionName);
    
    // types of inits(): just call it 
    // (where race conditions don't apply)
    functionOne();
}());
					

Initialize with conditions

var functionName = (function(){
    var doSomethingWithHtml = function(){
        console.log('called functionName.doSomethingWithHtml()');
    };
    var doSomethingWithClick = function(){
        console.log('called functionName.doSomethingWithClick()');
    };

    $(document).ready(function(){
        // limit usage to specific HTML
        if( $('#htmlSelector').length > 0 ){ 
            doSomethingWithHtml();
        }
    });
}());
					

↓

1. Conditional initialization is best practice
2. Proper use of CSS classes and IDs is very useful
3. Functionality is tied to specific HTML, not specific pages

Initialize events

var functionName = (function(){
    var a, b, c;
    var onClickButtonOne = function(){};
    var onClickButtonTwo = function(){};
    var functionThree = function(){};
    var functionFour = function(){};
    
    $(document).ready(function(){
        // list of actions only, do the work above
        $(document).on('click', '#actionButtonOne', onClickButtonOne);
        $(document).on('click', '#actionButtonTwo', onClickButtonTwo);
    });
    $(window).load(function(){
        // list of actions only, do the work above
        functionThree();
    });
}());
					

↓

//CONSOLE
functionName → 'undefined' // Wait. What?
					

You can't build a library on "undefined"

var functionName = (function(){
    console.log('called functionName()');
}());
					

//CONSOLE
'called functionName()'
functionName → 'undefined' // WHAT!?
					

Immediately-invoked functions that return nothing
are fire and forget

If you return nothing, then there's nothing to pass back to the variable name

A function can return one thing

var functionName = (function(){
    console.log('called functionName()');
	
    // return what?
}());
					

That's a pretty limited option.

↓

1. We need the option to return more than one thing
2. We're still looking to build an object-based library

We return an object

var functionName = (function(){
    // everything is private by default
    var a, b, c;
    var functionOne = function(){};
    var functionTwo = function(){};
    var functionThree = function(){};
    
    // except what is returned as public here
    return { 
        FunctionOne: functionOne,
        FunctionTwo: functionTwo
    };
}());
					

//STRUCTURE
functionName → {
    FunctionOne: function (){},
    FunctionTwo: function (){}
}
					

Congratulations!

You've created a JavaScript namespace!

var namespace = (function(){
    var a, b, c;
    var functionOne = function(){};
    var functionTwo = function(){};
    var functionThree = function(){};
    
    return { 
        FunctionOne: functionOne,
        FunctionTwo: functionTwo
    };
}());
					

//STRUCTURE
namespace: {
    FunctionOne: function (){},
    FunctionTwo: function (){}
}
					

1. A group of related variables and functions
2. wrapped in another function (scope!)
3. that looks like an object

Build your library of namespaces

var namespace = (function(){...}());
var namespace.nestedNamespace1 = (function(){...}());
var namespace.nestedNamespace2 = (function(){...}());
var namespace.nestedNamespace2.nestedNamespace2A = (function(){...}());
var namespace.nestedNamespace2.nestedNamespace2B = (function(){...}());
var namespace.nestedNamespace3 = (function(){...}());
                    

//STRUCTURE
namespace: {
    FunctionOne: function (){},
    FunctionTwo: function (){},
    nestedNamespace1: {
        FunctionOne: function (){},
    },
    nestedNamespace2: {
        FunctionOne: function (){},
        FunctionTwo: function (){},
        FunctionThree: function (){},
        NestedNamespace2A: function (){
            FunctionOne: function (){},
            FunctionTwo: function (){},
        },
        NestedNamespace2B: function (){},
    }
}
					

Build each namespace

var namespace = (function(){
    //scoped properties and variables,
    //scoped get/set functions for all public properties,
    //scoped core functions,
    //    for each core function
    //        scoped variables,
    //        exception handling
    //        code
    //initialization(s),
    //public declarations.
}());
                    

A namespace function that returns nothing?

var namespace = (function(){
    //scoped properties and variables,
    // --scoped get/set functions for all public properties,--
    //scoped core functions,
    //    for each core function
    //        scoped variables,
    //        exception handling
    //        code
    //initialization(s),
    // --public declarations.--
}());
                    

1. Public declarations are created to respond to the needs of outside code.
2. It's perfectly valid to build a function that can autonomously react to the outside world, à la fire and forget.
3. But then, what's the point of adding it to the library? Maybe just organization.

Thank You

(And there's more slides further on)

End