More Advanced JQuery

Twitter: #quintons Github: https://github.com/quintons Stackoverflow: http://stackoverflow.com/users/684855/quinton 'The most misunderstood language has become the worlds most popular programming language'Douglas Crockford - Javascript architect, yahoo 'JavaScript like the browser is starting to move again'Alex Russell - Software engineer, Chrome team and (ECMA)TC39 representative

This will be my notes

Agenda

This will be my notes

Coding conventions and best practices (in brief)

Conditional statement - shorthand

Good example

// single line
var result = (foo === true) ? console.log('true') : console.log('false');

// multiple lines
var result = (foo === true && bar === false) ?
            console.log('true') : me === true ?
            console.log('me true') : console.log('me false');

Bad example

// multiple lines
var result = (foo === true && bar === false) ?
    console.log('true') : me === true ? console.log('me true') :
    console.log('me false');

Opening brace

Good example

function Foo() {
    return {
        'bar': 'shot'
    };
}

Bad Example

function Foo()
{
    return
    {
        'bar': 'shot'
    }
}

Closing brace

Good example

function Foo() {
    return {
        'bar': 'shot'
    };
}

Bad Example

function Foo(){
    return {
            'bar': 'shot'
           }
}

Named function declaration location

Good example

// code...
function namedFunction(){
    return;
}

return {
    'namedFunction': function(){
        return;
    }
}

Bad example

// code...
return {
    'namedFunction': function namedFunction(){
        return;
    }
}

Functions and Constructors

// Constructor always starts with a capital letter
function MyNewConstructor(){
    this.foo = null;
}

// functions start with a small letter
function myNewFunction(){
    return;
}

function expressions can only be used when applied to non-constructor functions Good example

function MyNewConstructor(){
    this.foo = null;
}

Bad example

var MyNewConstructor = function(){
    this.foo = null;
}

Implied private members

Good example

var myObjectLiteral = {
    _privateFoo: function(){},
    _privateBar: function(){}.
    publicBar: function(){}
}

Bad example

var myObjectLiteral = {
    privateFoo: function(){},
    privateBar: function(){},
    publicBar: function(){}
}

Enforcing private members - modular pattern

    var module = (function(){
        var _privateFunction = function(){
            return;
        }

        var _privateMember = null;

        return {
            foo: function(){
                return _privateFunction();
            }
        };
    })()

    module.foo();

Using Comments

// return users full name as string
function getFullName(i){
    return names[i];
}

Do not waffle!

// this will return the users full name as a string
function getFullName(i){
    return names[i];
}

Even better way

/**
 * Return users full name as string
 *
 * @param  {number} pass index of 'names' array
 * @return {string} Return name string
 */
function getFullName(i) {
  return names[i];
};

Naming conventions

Use logical names for functions and variables (don't worry about length...but don't go crazy!)
```
var TheFirstUserNameInThePastArrayFromJSON = getUserName(arr_userNames);
```
Variable names should be nouns (i.e. person, place, thing, event, substance, quality or quantity)
Function names should begin with a verb (i.e. getNames())
Functions that return booleans should begin with 'is' or 'has', such as isValid() or hasItems()
Avoid useless names such as foo or temp

Naming conventions

Camel Casing

what the...???!

var foo = document.getElementById('MyNewID'); // <-- camel 'Id'

var bar = foo.innerHTML(); //<-- capital 'HTML'

var xhr = new XMLHttpResponse(); //<-- camel 'Http'

Variables/functions examples

function Person(name){ //<-- object
    this.name = name;
}

var myPerson = new Person('frank'); //<-- variable

Constants

var MAX_SPEED = 2000000;

Other useful things to know...

Keep HTML out of Javascript

var html = $('<div class="myClass">' + myContent + '</div>'); //<-- better to be in a template.

Keep CSS out of Javscript, exception being class names

var html = $('<div style="width:' + myWidth + ';height:' + myHeight + ';">dollar sit</div>');

don't modify objects you don't own
Avoid global objects
Throw your own errors, don't let Javascript throw them for you
Avoid null comparisions (issue typeof null === 'object')

Other useful things to know...continued

Seperate application logic from event handlers (do not pass the event handler around, it gets garbage collected quickly!)

$('.myButton').on('click', function(event){
    popup(event)
})

var popUp = function(event){
    var that = $('.popup');
    that.css({
        left: event.clientX + 'px',
        top: event.clientY + 'px'
    })
    that.show();
}

// better way...
$('.myButton').on('click', function(event){
    popup(event.clientX, event.clientY)
})

var popUp = function(x, y){
    var that = $('.popup');
    that.css({
        left: x + 'px',
        top: y + 'px'
    })
    that.show();
}

Config data

Separate config data from application logic

all URL's
Any strings that are displayed to the user
Any HTML that needs to be created from javascript
Settings (i.e. items per page)
Repeated unique values
Any value that may change in the future

var globalConfig = {
    initialUrl: '/index',
    companyName: 'foobar',
    timeoutMs: '2000',
    cache: true
}

var fundListConfig = {
    maxItems: 100,
    charLength: 200,
    buyButton: false
}

This will be my notes

function()?

little reminder - function is king

Functions are first class
Can be passed as an argument
Can be returned from a function
Can be assigned to a variable
Can be stored in an object or array
arguments passed by value
Function objects inherit from 'Function.prototype'

Closure - basic example what is happening?

function addMe(a){
    var n = (a*2) || 0;

    return function(b){
        return (n += (b || 0));
    }
}

var myAdd1 = addMe();
myAdd1(5);
var res1 = myAdd1(5); // <-- what is res1?

var myAdd2 = addMe(5);
myAdd2();
myAdd2(5);
var res2 = myAdd2(5); // <-- what is res2?

Closure - example 1 what is happening? what is the error?

function buildList(list) {
    var result = [];
    for (var i = 0; i < list.length; i++) {
        result.push( function() {alert('item' + list[i] + ' ' + list[i])} );
    }
    return result;
}
function testList() {
    var fnlist = buildList([1,2,3]);
    for (var j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}
buildList(['one','two','three','four']);
testList();

Closure - example 1 (fix)

function buildList(list) {
    var result = [];
    for (var i = 0; i < list.length; i++) {
        (function(i){ // <-- an auto executing anynymous function creates scope!
            result.push( function() {alert('item' + list[i] + ' ' + list[i])} );
        })(i);
    }
    return result;
}
function testList() {
    var fnlist = buildList([1,2,3]);
    for (var j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}
buildList(['one','two','three','four']);
testList();

This will be my notes

Dimensions

The box model