Successfully reported this slideshow.

Advanced Javascript Techniques

534 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Advanced Javascript Techniques

  1. 1. Advanced JavaScript Techniques @hoatle – eXo Platform
  2. 2. Agenda  OOP (Object Oriented Programming)  Scope  Closure  Context (this, arguments...)
  3. 3. OOP  Object = data structure = properties + methods var myPresent = { slides: 30, currentSlide: 17, previousSlide: function() { this.current--; }, nextSlide: function() { this.current++; } } myPresent.slides; //30 myPresent.currentSlide; //17 myPresent.previousSlide(); myPresent.currentSlide; //16 myPresent.nextSlide();
  4. 4. OOP 3 primary goals of oop:  Encapsulation  Polymorphism  Inheritance
  5. 5. Encapsulation:  Hiding properties (private): myPresent.slides; //not available myPresent.currentSlide; //not available  Accessing by methods only: myPresent.getSlides(); myPresent.getCurrentSlide(); myPresent.nextSlide(); myPresent.previousSlide();
  6. 6. Polymorphism Ability of one type, A, to appear as and be used like another type, B function 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();
  7. 7. 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(); //30 specialPresent.getSpecialPresent(); //21 speicalPresent.next(); specialPresent.getCurrentSlide(); //18 Simple inheritance by John Resig
  8. 8. Psedoclassical vs Prototypal school function 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();
  9. 9. Psedoclassical vs Prototypal school var 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();
  10. 10. 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
  11. 11. Scope  Avoid global scope  Use namespace  Use function wrapper
  12. 12. Avoid global scope function 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; })();
  13. 13. Closure  Inner function can access outer function and variable after the outer function executed  Function scope
  14. 14. Context  this  arguments
  15. 15. Thanks for your attention! Questions?

×