Advanced JavaScript Techniques

1,281 views
1,170 views

Published on

at #barcampsaigon 2009

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
1,281
On SlideShare
0
From Embeds
0
Number of Embeds
115
Actions
Shares
0
Downloads
22
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Advanced JavaScript Techniques

  1. 1. Advanced JavaScript Techniques @hoatle – eXo Platform
  2. 2. Agenda <ul><li>OOP (Object Oriented Programming)
  3. 3. Scope
  4. 4. Closure
  5. 5. Context (this, arguments...) </li></ul>
  6. 6. OOP <ul><li>Object = data structure = properties + methods </li></ul>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();
  7. 7. OOP <ul>3 primary goals of oop: <li>Encapsulation
  8. 8. Polymorphism
  9. 9. Inheritance </li></ul>
  10. 10. Encapsulation: <ul><li>Hiding properties (private): </li><ul><li>myPresent.slides; //not available
  11. 11. myPresent.currentSlide; //not available </li></ul><li>Accessing by methods only: </li><ul><li>myPresent.getSlides();
  12. 12. myPresent.getCurrentSlide();
  13. 13. myPresent.nextSlide();
  14. 14. myPresent.previousSlide(); </li></ul></ul>
  15. 15. Polymorphism <ul>Ability of one type, A, to appear as and be used like another type, B </ul>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();
  16. 16. Inheritance <ul>code reuse (sub class) </ul>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
  17. 17. 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();
  18. 18. 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();
  19. 19. Psedoclassical vs Prototypal school <ul><li>Google Closure lib
  20. 20. Not really classical util js version 2? </li></ul><ul><li>Raphaël
  21. 21. truly natural js: object prototypal inheritance </li></ul>“ 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
  22. 22. Scope <ul><li>Avoid global scope
  23. 23. Use namespace
  24. 24. Use function wrapper </li></ul>
  25. 25. 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; })();
  26. 26. Closure <ul><li>Inner function can access outer function and variable after the outer function executed
  27. 27. Function scope </li></ul>
  28. 28. Context <ul><li>this
  29. 29. arguments </li></ul>
  30. 30. Thanks for your attention! <ul>Questions? </ul>

×