JavaScript LevelUp

Ласкаво просимо

Who is THIS freakin’ guy?

Lee Brandt

Director R&D @PaigeLabs

Programmer

Teacher

Star of Finding Bigfoot

JavaScript, All day, every day

Keeper of Keys and Grounds @Hogwarts

IDoSomethingAwesomeJS

Our Agenda

Scope and Closure

Prototypal Inheritance

Modularity

JavaScript Quirks

Tips & Tricks

Asynchronicity

Lexical Scopefunction outerFunction() {

var foo = 5;

function innerFunction(){

foo++;

var bar = 5;

}

console.log(bar);

}

Closure

var add = (function(){

var counter = 0;

return function(number){

console.log(counter += number);

};

})();

for (var i = 0; i < 10; i++) {

add(1);

}

Prototypal Delegation

Object.prototype

.toString()

.valueOf()

.hasOwnProperty()

Prototypal Delegation

var Foo = function(){

// magic

};

var a = new Foo();

var a = Object.create(Foo);

Modularity (AMD)

define(function(){

return function CallMe(){

console.log('Inside module one.');

};

});

define(['FirstModule'], function(mod1){

mod1();

});

FirstModule.js

Main.js

Modularity (CommonJS)

module.exports = function callMe(){

console.log(‘called’);

};

var thingie = require(‘./FirstModule');

thingie();

FirstModule.js

Main.js

Why So Asynchronous?

Asynchronicity Callbacks

function callbackFunction(){

// stuff and such

}

function asynchronousThing(cb){

// asynchronous stuff

cb();

}

asynchronousThing(callbackFunction);

Asynchronicity Promisesfunction asynchronousThing(){

var promise = $q.defer();

if(successful){

promise.resolve(results);

}else{

promise.reject();

}

return promise;

}

Asynchronicity Promises

asynchronousThing()

.progress(function(status){})

.then(function(result){})

.success(function(result){})

.error(function(err){})

.catch(function(err){})

.finally(function(){});

Quirks JavaScript

this != this

unless you bind(), call(), or apply()

function clickHandler(e){

console.log(this === e.currentTarget);

}

(function clickHandler(e){

console.log(this === myThisContext);

}).bind(myThisContext);

Hoisting

console.log(foo); // undefined

console.log(bar); // undefined

var foo = ‘baz';

var bar = 'bam';

console.log(foo); // baz

console.log(bar); // bam

Hoistingfoo(); // I am in foo

bar(); // undefined

// function declaration

function foo(){

console.log('I am in foo');

}

// function expression

var bar = function bar(){

console.log('I am in bar');

}

Tips & Tricks

Use ‘use strict’

use === instead of ==

use a module pattern

truthy and falsy

Bookmark MDN

Namespacing

Revealing Module

function myModule(){

var myPrivateThing = function(){

// does something

};

return {

MyPublicThing: myPrivateThing

};

}

Useful LinksMozilla Developer Network

- https://developer.mozilla.org

ECMA Website

- http://www.ecma-international.org/ecma-262/5.1/

jsbin.com

jsfiddle.com

plnkr.co

codepen.io

Дякую!