If you can't read please download the document
Upload
hoat-le
View
1.052
Download
3
Embed Size (px)
DESCRIPTION
at #barcampsaigon 2009
Citation preview
2. Agenda
3. Scope 4. Closure 5. Context (this, arguments...) 6. OOP
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. OOP
8. Polymorphism 9. Inheritance 10. Encapsulation:
11. myPresent.currentSlide; //not available Accessing by methods only:
12. myPresent.getCurrentSlide(); 13. myPresent.nextSlide(); 14. myPresent.previousSlide(); 15. Polymorphism
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. Inheritance
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. 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. 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. Psedoclassical vs Prototypal school
20. Not really classical util js version 2?
21. 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 22. Scope
23. Use namespace 24. Use function wrapper 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. Closure
27. Function scope 28. Context
29. arguments 30. Thanks for your attention!