advanced javascript techniques
DESCRIPTION
TRANSCRIPT
![Page 1: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/1.jpg)
Advanced JavaScript Techniques
@hoatle – eXo Platform
![Page 2: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/2.jpg)
Agenda
OOP (Object Oriented Programming) Scope Closure Context (this, arguments...)
![Page 3: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/3.jpg)
OOP Object = data structure = properties + methods
var myPresent = { slides: 30, currentSlide: 17, previousSlide: function() { this.current--; }, nextSlide: function() { this.current++; }}
myPresent.slides; //30myPresent.currentSlide; //17myPresent.previousSlide();myPresent.currentSlide; //16myPresent.nextSlide();
![Page 4: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/4.jpg)
OOP
3 primary goals of oop: Encapsulation Polymorphism Inheritance
![Page 5: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/5.jpg)
Encapsulation: Hiding properties (private):
myPresent.slides; //not available
myPresent.currentSlide; //not available
Accessing by methods only:
myPresent.getSlides();
myPresent.getCurrentSlide();
myPresent.nextSlide();
myPresent.previousSlide();
![Page 6: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/6.jpg)
Polymorphism
Ability of one type, A, to appear as and be used like another type, Bfunction getPresent(type) { if (type === 'special') { return new SpecialPresent(); } else if (type === 'normal')) { return new NormalPresent(); } else { throw new Error('type for Present is not specified'); }}var mySpecialPresent = getPresent('special');var myNormalPresent = getPresent('normal');methods can be called: getSlides(), getCurrentSlide(); previous(); next();
![Page 7: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/7.jpg)
Inheritance
code reuse (sub class)var Present = Class.extend({ init: function() { this.slides = 30; this.currentSlide = 17; }, getSlides: function() { return this.slides; }, getCurrentSlide: function() { return this.currentSlide; }, previous: function() { this.currentSlide--; }, next: function() { this.currentSlide++; }});
var SpecialPresent = Present.extend({ init: function() { this._super(); this.specialPresent = 21; }, getSpecialPresent: function() { return this.specialPresent; }});
var specialPresent = new SpecialPresent();specialPresent.getSlides(); //30specialPresent.getSpecialPresent(); //21speicalPresent.next();specialPresent.getCurrentSlide(); //18
Simple inheritance by John Resig
![Page 8: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/8.jpg)
Psedoclassical vs Prototypal schoolfunction Present() { var slides = 30, currentSlide = 17; this.getSlides = function() { return slides; } this.getCurrentSlide = function() { return currentSlide; } this.setCurrentSlide = function(i) { currentSlide = i; }}Present.prototype.previous = function() { this.setCurrentSlide((this.getCurrentSlide())--);}Present.prototype.next = function() { this.setCurrentSlide((this.getCurrentSlide())++);}
var myPresent = new Present();myPresent.next();myPresent.getSlides();
![Page 9: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/9.jpg)
Psedoclassical vs Prototypal schoolvar Present = (function() { var slides = 30, currentSlide = 17; return { getSlides: function() { return slides; }, getCurrentSlide: function() { return currentSlide; }, previous: function() { currentSlide--; }, nextd: function() { currentSlide++; } };})();
function clone(obj) { var F = function() {}; F.prototype = obj; return new F();}var myPresent = clone(Present);myPresent.next();myPresent.getSlides();
![Page 10: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/10.jpg)
Psedoclassical vs Prototypal school Google Closure lib Not really classical
util js version 2?
Raphaël truly natural js: object
prototypal inheritance
“I have been writing JavaScript for 8 years now, and I have never once found need to use an uber function. The super idea is fairly important in the classical pattern, but it appears to be unnecessary in the prototypal and functional patterns. I now see my early attempts to support the classical model in JavaScript as a mistake.” - Douglas Crockford
![Page 11: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/11.jpg)
Scope Avoid global scope Use namespace Use function wrapper
![Page 12: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/12.jpg)
Avoid global scopefunction test() { i = 3;}test();alert(i) //3
function test() { var i = 3;}test();alert(i); //undefined
function Present() {}
//what if other lib also define Present ??function?
(function() { function Present() { //implement here } //expose window.mylib = window.mylib || {}; window.mylib.Present = Present;})();
![Page 13: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/13.jpg)
Closure
Inner function can access outer function and variable after the outer function executed
Function scope
![Page 14: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/14.jpg)
Context
this
arguments
![Page 15: Advanced Javascript Techniques](https://reader036.vdocument.in/reader036/viewer/2022081413/546d0cacaf795912528b556f/html5/thumbnails/15.jpg)
Thanks for your attention!
Questions?