jQuery basics

This is the summary of “Fundamentals of Great jQuery Development”, which is available at http://vimeo.com/18511621.

javascript is a functional language, not in a useful way, but because it treats function as its first-class citizen. It is also Object-oriented language, as it treats everything as object.

function declaration
This is what people use most of the time.

function foo(p1) {
    p1();
}

function expression
This doesn’t have name and is anonymous.

foo(function () {});

function expression with name

foo(function f1(), "test" {});

json literals

var o = {
    foo: 1,
    bar: "test",
    alpha: {
        damian: function () { }
    }
};

Here o is an object.

constructor
“new” means you create a new object based on its protytype.
If you mean a class, capitalise the first letter as convention.

function Animal() {
    this.breed = "domestic tabby";
    this.smellsLike = "candy";
}
Animal.prototype = {
    member1: function() { },
    member2: ""
};

var f = new Animal(); // create a new animal based on the prototype.
f.member1
var f = Animal(); // this makes breed and smellsLike global scope, possibly overriding other breed.

Scope
In javascript, a variable’s scope is function-level. A variable is accessible within a function, even though it is declared within a block

function () {
    var i = 0;
    for (var j = 0; j <= 10; j++) {
        var x = 'test'; 
    }
    x = 20; //this x is visible outside of the for block
}
x = 20: // x is not visible outside of function

Global variable or function is bad, because you cannot guarantee that only your javascript would run in the browser. You have multiple javascript from 3rd party, grease-monkey plugins, …

So, don’t declare a function in the global scope. Instead, create anonymous function and immediately execute it.

(function() {
    var i = 'test'; //as long as you use 'var', it is safe.
    this.alert('hi'); // this is global window
    
}())

//If you want to pass window object
(function (w) {
    var i = 'test';
}(window))

this

function foo() {
    this //this is an global object
}

function Foo() {
    this // not an global object, but this function.
}
var f = new Foo();


//this can be resued depending on the context.
function foo() {
    alert(this.hi); //In this case, this becomes the function, not global.
}
foo.call({ hi: 'test' });
foo.call({ hi: 123 });

Closure
A closure is a function that references a variable that isn’t contained within its own immediate scope.

// this variable is out of the scope;
function foo() {
    var myVar = 1;

    return function() { 
        return myVar.toString();
    };
}

var myFunc = foo();
myFunc(); //This access myVar, which is outside of the function boundary. This looks trivial, but event handler takes advantage of closure.
jQuery basics

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s