daniel.steigerwald.cz

1. Třídy, dědičnost a OOP v Javascriptu daniel.steigerwald.cz

2. OOP v Javascriptu? • ano, jednoduše • avšak bez osvěty 

3. Javascript Ninjové™ • milión špatných článků • jQuery nenabízí nic, protože jQuery je DSL pro DOM • funkcionální versus objektový přístup

4. Javascript je sexy! • rychlé prototypování • elegance a pružnost • DSL included

5. Třídy In object-oriented programming, a class is a construct that is used as a blueprint (or template) to create objects of that class. This blueprint describes the state and behavior that the objects of the class all share. An object of a given class is called an instance of the class. • má Javascript třídy? • prototype FTW!

6. Třída správně - prototype var Person = function(name) {     this.name = name; }; Person.CLASSNAME = 'ui-person'; Person.prototype = {     getName: function() {         return this.name;     } }; var joe = new Person('Joe'); document.title = joe.getName();

7. Třída špatně 1. - closure var Person = function(p_name) {     var name = p_name;     return {         getName: function() {             return name;         }     }; }; Person.CLASSNAME = 'ui-person'; var joe = Person('Joe'); document.title = joe.getName();

8. Třída špatně 2. - Crockford  var Person = function(name) {     this.name = name;     this.getName = function() {         return this.name;     }; }; Person.CLASSNAME = 'ui-person'; var joe = new Person('Joe'); document.title = joe.getName();

9. Dědičnost • prototype FTW! • helpery • rozdíl mezi klasickou a prototypovou dědičností

10. Dědičnost správně - prototype var $extend = function(child, parent) {     var F = function() { };     F.prototype = parent.prototype;     child.prototype = new F; }; var Person = function(name) {     this.name = name; }; Person.prototype.getName = function() { return this.name; }; var Employee = function(name, salary) {     Person.call(this, name);     this.salary = salary; }; $extend(Employee, Person); Employee.prototype.getSalary = function() { return this.salary; }; Employee.prototype.getName = function() {      return 'Zeměstnanec: ' + Person.prototype.getName.call(this);  }; var joe = new Employee('Joe'); document.title = joe.getName();

11. Dědičnost špatně • kopírování properties, tj. generované objekty • oddělení konstruktorů a inicializátorů • čistě objektová dědičnost • hierarchie dědičnosti živá

12. Kompozice/agregace, mixování • dědičnost jako špatný code reuse • mixování jako náhrada vícenásobné dědičnosti • prototype FTW, opět SomeClass.prototype.someBuggyMethod = function() {     // fix this shit; }; SomeClass.prototype.missingMethod = function() {     // brave new method; };

13. Prototype - na co pozor • Object prototype nikdy nemodifikovat • Do not modify objects you don’t own (ostatní nativní) Object.prototype.alert = function() {     alert(this); }; (5).alert(); Array.prototype.each = function(fn, context) {     for (var i = 0, l = this.length; i < l; i++) {         fn.call(context || this, this[i], i, this);     } }; [1, 2].each(function(item) {     alert(item); });

14. Javascript DSL == Syntax Sugar • DSL • functions as first class objects • object literals • syntax sugar pro • třídy • dědičnost • mixování • události • AOP • ... a další (attributes, rules and validations, mutators method...)

15. OOP DSL příklad var Person = $class({     constructor: function(name) {         this.name = name;     },     getName: function() { return this.name; } }); var Serializable = {     serialize: function() { return JSON.stringify(this); } }; var Employee = $class({     Extends: Person,     Mixins: Serializable,     constructor: function(name, salary) {         Person.call(this, name);         this.salary = salary;     },     getName: function() {         return 'Employee: ' + Person.prototype.getName.call(this);     } });

16. Co nabízí JS frameworky? • vlastní syntax • vychytávky • události/callbacky • attributy/accessors metody • nic (jQuery)

17. Otázky? Děkuji za pozornost, daniel@steigerwald.cz