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

Prezentace na téma: "Daniel.steigerwald.cz Třídy, dědičnost a OOP v Javascriptu."— Transkript prezentace:

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

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 o functions as first class objects o object literals syntax sugar pro o třídy o dědičnost o mixování o události o AOP o... 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 o události/callbacky o attributy/accessors metody nic (jQuery)

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