Programming To Patterns

How I used to write

How I used to write Classes DatePicker FormValidator Fx Request Slideshow etc...

How I used to write var myApp = { init: function(){ myApp.apples() Classes myApp.orange() DatePicker myApp.lemons() FormValidator }, Fx apples: function(){ Request $$(‘div.apple’).each(function(apple) { Slideshow var form = apple.getElement(‘form’); etc... form.addEvent(‘submit’, funciton(event){ ....}); }); }, orange: function(){ $(‘orange’).getElements(‘li’).each... }, etc...

How I used to write var myApp = { init: function(){ myApp.apples() Classes myApp.orange() DatePicker myApp.lemons() FormValidator }, Fx apples: function(){ Request $$(‘div.apple’).each(function(apple) { Slideshow var form = apple.getElement(‘form’); etc... form.addEvent(‘submit’, funciton(event){ ....}); }); }, orange: function(){ $(‘orange’).getElements(‘li’).each... }, etc... This tends to get out of hand

Banging it out... <script> window.addEvent(‘domready’, function(){ $(‘myForm’).addEvent(‘submit’, function(evt){ evt.preventDefault(); this.send({ onComplete: function(result){ ... }, update: $(‘myContainer’) }); }); }); </script> This is very tempting.

Pros • Writing the logic for a speciﬁc app is fast and furious • The test environment is the app

Pros • Writing the logic for a speciﬁc app is fast and furious • The test environment is the app & Cons • It’s much harder to maintain • A high percentage of code you write for the app isn’t reusable

Using Classes

Using Classes This is how MooTools does it var Human = new Class({ isAlive: true, energy: 1, eat: function(){ this.energy++; } }); Human

Using Classes This is how MooTools does it var Human = new Class({ isAlive: true, energy: 1, eat: function(){ this.energy++; } }); var bob = new Human(); //bob.energy === 1 bob.eat(); //bob.energy === 2 Human bob

Extending Classes

Extending Classes var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; } });

Extending Classes var Human = new Class({ var Ninja = new Class({ initialize: function(name, age){ Extends: Human, this.name = name; initialize: function(side, name, age){ this.age = age; this.side = side; }, this.parent(name, age); isAlive: true, }, energy: 1, energy: 100, eat: function(){ attack: function(target){ this.energy++; this.energy = this.energy - 5; } target.isAlive = false; }); } });

Extending Classes var Human = new Class({ var Ninja = new Class({ initialize: function(name, age){ Extends: Human, this.name = name; initialize: function(side, name, age){ this.age = age; this.side = side; }, this.parent(name, age); isAlive: true, }, energy: 1, energy: 100, eat: function(){ attack: function(target){ this.energy++; this.energy = this.energy - 5; } target.isAlive = false; }); } }); var bob = new Human('Bob', 25);

Extending Classes var Human = new Class({ var Ninja = new Class({ initialize: function(name, age){ Extends: Human, this.name = name; initialize: function(side, name, age){ this.age = age; this.side = side; }, this.parent(name, age); isAlive: true, }, energy: 1, energy: 100, eat: function(){ attack: function(target){ this.energy++; this.energy = this.energy - 5; } target.isAlive = false; }); } }); var bob = new Human('Bob', 25); var blackNinja = new Ninja('evil', 'Nin Tendo', 'unknown'); //blackNinja.isAlive = true //blackNinja.name = 'Nin Tendo' blackNinja.attack(bob); //bob never had a chance

Implementing Classes

Implementing Classes var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; } });

Implementing Classes var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; } }); var Warrior = new Class({ energy: 100, kills: 0, attack: function(target){ if (target.energy < this.energy) { target.isAlive = false; this.kills++; } this.energy = this.energy - 5; } });

Implementing Classes var Human = new Class({ var Ninja = new Class({ initialize: function(name, age){ Extends: Human, this.name = name; Implements: [Warrior], this.age = age; initialize: function(side, name, age){ }, this.side = side; isAlive: true, this.parent(name, age); energy: 1, } eat: function(){ }); this.energy++; } }); var Warrior = new Class({ var Samurai = new Class({ energy: 100, Extends: Human, kills: 0, Implements: [Warrior], attack: function(target){ side: 'good', if (target.energy < this.energy) { energy: 1000 target.isAlive = false; }); this.kills++; } this.energy = this.energy - 5; } });

When to write a class...

Key Aspects of JS Classes

Key Aspects of JS Classes • Shallow inheritance works best.

Key Aspects of JS Classes • Shallow inheritance works best. • Break up logic into small methods.

Key Aspects of JS Classes • Shallow inheritance works best. • Break up logic into small methods. • Break up functionality into small classes.

Key Aspects of JS Classes • Shallow inheritance works best. • Break up logic into small methods. • Break up functionality into small classes. • Build ‘controller’ classes for grouped functionality.

Key Aspects of JS Classes • Shallow inheritance works best. • Break up logic into small methods. • Break up functionality into small classes. • Build ‘controller’ classes for grouped functionality. • Use options and events liberally.

Key Aspects of JS Classes • Shallow inheritance works best. • Break up logic into small methods. • Break up functionality into small classes. • Build ‘controller’ classes for grouped functionality. • Use options and events liberally. • Don’t be afraid to refactor, but avoid breaking the interface.

Let’s look at that earlier example again ... <script> $(‘myForm’).addEvent(‘submit’, function(evt){ evt.preventDefault(); this.send({ onComplete: function(result){ ... }, update: $(‘myContainer’) }); }); </script>

Program a Pattern var FormUpdater = new Class({ initialize: function(form, container, options) { this.form = $(form); this.container = $(container); this.request = new Request(options); this.attach(); }, attach: function(){ this.form.addEvent(‘submit’, this.send.bind(this)); }, send: function(evt){ if (evt) evt.preventDefault(); this.request.send({ url: this.form.get(‘action’), onComplete: this.onComplete.bind(this) }); }, onComplete: function(responseTxt){ this.container.set(‘html’, responseTxt); } }); new FormUpdater($(‘myForm’), $(‘myContainer’));

...and then extend it var FormUpdater.Append = new Class({ Extends: FormUpdater, onComplete: function(responseTxt){ this.container.adopt( new Element(‘div’, {html: responseTxt}) ); } }); new FormUpdater.Append($(‘myForm’), $(‘myTarget’));

How I write now

How I write now var myApp = { init: function(){ myApp.apples() Classes myApp.orange() DatePicker myApp.lemons() FormValidator }, Fx apples: function(){ Request new AppleGroup($$(‘div.apple’)); Slideshow }, Apple orange: function(){ AppleGroup new Orange($(‘orange’) Orange }, etc... etc...

How I write now var myApp = { init: function(){ myApp.apples() Classes myApp.orange() DatePicker myApp.lemons() FormValidator }, Fx apples: function(){ Request new AppleGroup($$(‘div.apple’)); Slideshow }, Apple orange: function(){ AppleGroup new Orange($(‘orange’) Orange }, etc... etc... I write as little of this as possible

Pros • Small, reusable, readable, generic classes • Only the variables are managed in a speciﬁc application • The footprint between a speciﬁc app and your generic codebase is as small as possible - only instantiation calls

Pros • Small, reusable, readable, generic classes • Only the variables are managed in a speciﬁc application • The footprint between a speciﬁc app and your generic codebase is as small as possible - only instantiation calls & Cons • Requires a bit more skill. • Can often mean more bytes of code in the short term. • Test driven development is a must.

I use MooTools

I use MooTools • MooTools makes JavaScript easier (as do all frameworks).

I use MooTools • MooTools makes JavaScript easier (as do all frameworks). • It encourages you to reuse your work, and to write your code to be ﬂexible for future use.

I use MooTools • MooTools makes JavaScript easier (as do all frameworks). • It encourages you to reuse your work, and to write your code to be ﬂexible for future use. • It is designed to be extended.

I use MooTools • MooTools makes JavaScript easier (as do all frameworks). • It encourages you to reuse your work, and to write your code to be ﬂexible for future use. • It is designed to be extended. • These are qualities of JavaScript really; MooTools just makes the interface more accessible.

Programming To Patterns

by guest2ee5e2c on Dec 01, 2008

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 74

Statistics

Programming To Patterns Presentation Transcript