javascript levelup by lee brandt
Post on 23-Jan-2018
733 Views
Preview:
TRANSCRIPT
Lee Brandt
Director R&D @PaigeLabs
Programmer
Teacher
Star of Finding Bigfoot
JavaScript, All day, every day
Keeper of Keys and Grounds @Hogwarts
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
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
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
top related