JavaScript не нужен, CoffeeScript - мимими

JavaScript - не нужен!CoffeeScript - мимими

Евгений Власенко CoffeeScript Developer @ Noveo

http://about.me/vlasenko



Область применения ООП в JavaScript

Объектно ориентированный подход можно применять везде, где задача сложнее, чем отправить форму на сервер по клику на кнопку.

Евгений Власенко, 6 октября 2012

JavaScript - не нужен! CoffeeScript - мимими

JavaScript и ООП

● Объект в JavaScript — это просто коллекция пар ключ-значение (ассоциативные массивы, хэши)

● Прототипное наследование — это прекрасно!


Object

var Car = function(speed){ this.speed = speed;}

var fast = new Car(180);var slow = new Car(20);

console.log(fast, slow); //{ speed: 180 } { speed: 20 }


Методы объектаэкономия памяти - не, не слышал

var Car = function(speed){ this.speed = speed; // Метод лежит в каждом экземпляре this.printSpeed = function(){ console.log(this.speed + ' км/ч') }}


fast.printSpeed(); // 180 км/чslow.printSpeed(); // 20 км/ч


Методы объекта

var Car = function(speed){ this.speed = speed;}// Метод в прототипе в единственном экземпляре - профитCar.prototype.printSpeed = function(){ console.log(this.speed + ' км/ч');}


fast.printSpeed(); // 180 км/чslow.printSpeed(); // 20 км/ч


Выстрел в ногу

function Hamster() { }Hamster.prototype = {

food: [],found: function(something) {

this.food.push(something);}

}speedy = new Hamster();lazy = new Hamster();

speedy.found("apple");speedy.found("orange");

console.log(speedy.food); // [ 'apple', 'orange' ]console.log(lazy.food); // [ 'apple', 'orange' ]


Выстрел в ногу

function Hamster() { }Hamster.prototype = {

food: [],// при чтении, свойство ищется в цепочке прототиповfound: function(something) {

this.food.push(something);}

}speedy = new Hamster();lazy = new Hamster();


console.log(speedy.food); // [ 'apple', 'orange' ]console.log(lazy.food); // [ 'apple', 'orange' ]


И волки целы, и овцы сыты

function Hamster() { this.food = [ ];}Hamster.prototype = {

found: function(something) {this.food.push(something);

}}speedy = new Hamster();lazy = new Hamster();


console.log(speedy.food); // [ 'apple', 'orange' ]console.log(lazy.food); // [ ]


Прототипное наследование

var Car = function(speed){ this.speed = speed;}var BMW = function(series){ this.series = series;}BMW.prototype = new Car(180);



var Car = function(speed){ this.speed = speed;}var BMW = function(series){ this.series = series;}BMW.prototype = new Car(180);

Мы испортили всё, что можно!● Прототип BMW.prototype● Конструктор BMW.prototype.constructor● В любой момент можем выстрелить в ногу

Можно раскидывать ручками при каждом наследовании, но...



var extend = function(Child, Parent) { var F = function() { } F.prototype = Parent.prototype Child.prototype = new F() Child.prototype.constructor = Child Child.superclass = Parent.prototype}

Всё хорошо, за исключением случая с "хомяком" и "разделяемой" едой.


Прототипное наследование — это прекрасно!

var extend = function (child, parent) { for (var key in parent) { if ({}.hasOwnProperty.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child;}


Реклама CoffeeScript

1. CoffeeScript - это меньше букав

2. Разделение блоков кода отступами

3. Ещё куча вкусностей и приятностей

http://coffeescript.org/


http://coffeescript.org/#language

http://coffeescript.org/#language

CoffeeScript и ООП

CoffeeScript делает за Вас всё, что было сказано выше про JavaScript и ООП.


Классы в CoffeeScript

class Drink constructor: (volume)-> @volume = volume printVolume: ()-> console.log(@volume + ' л.')

var Drink = (function() { function Drink(volume) { this.volume = volume; } Drink.prototype.printVolume = function(){

return console.log(this.volume + ' л.'); }; return Drink;})();


Наследование в CoffeeScript

class Drink constructor: (volume)-> @volume = volume printVolume: ()-> console.log(@volume+' л.')

class Beer extends Drink constructor: (volume, alcohol)-> super(volume) @alcohol = alcohol printAlcohol: ()-> console.log(@alcohol+' %')

var Beer, Drink, __hasProp = {}.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };Drink = (function() { function Drink(volume) { this.volume = volume; } Drink.prototype.printVolume = function() { return console.log(this.volume + ' л.'); }; return Drink;})();Beer = (function(_super) { __extends(Beer, _super); function Beer(volume, alcohol) { Beer.__super__.constructor.call(this, volume); this.alcohol = alcohol; } Beer.prototype.printAlcohol = function() { return console.log(this.alcohol + ' %'); }; return Beer;})(Drink);


Киллер фича CoffeeScript

● В официальной документации о работе с классами написано очень мало

● Реализация ООП подхода в CoffeeScript очень простая и прозрачнаяЯ считаю, именно это является киллер

фичей этого языка


Вкусности CoffeeScript


Статический метод

class Drink constructor: (volume)-> @volume = volume printVolume: ()-> console.log(@volume+' л.') @format: (name)-> 'Drink '+name

var Drink = (function() { function Drink(volume) { this.volume = volume; } Drink.prototype.printVolume = function() { return console.log(this.volume + ' л.'); }; Drink.format = function(name) { return 'Drink ' + name; }; return Drink;})();


Забиндим метод на объекте

class Drink constructor: (volume)-> @volume = volume printVolume: ()=> console.log(@volume+' л.')

drink = new Drink(5)setTimeout(drink.printVolume, 5000)// undefined л.

class Drink constructor: (volume)-> @volume = volume printVolume: ()-> console.log(@volume+' л.')

drink = new Drink(5)setTimeout(drink.printVolume, 5000)// 5 л.


Забиндим метод на объектеВзгляд изнутри

Используется такая связка:

__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };this.printVolume = __bind(this.printVolume, this);

Можно писать самим, но зачем, когда это может сделать CoffeeScript.


Меньше буков

class Drink constructor: (@volume)->

var Drink;Drink = (function() { function Drink(volume) { this.volume = volume; } return Drink;})();


Сахар - параметры по умолчанию

class Drink constructor: (@volume=0.5)->

var Drink;Drink = (function() { function Drink(volume) { this.volume = volume != null ? volume : 0.5; } return Drink;})();


Хотелось бы упомянуть

1. Cake - система сборки CoffeeScript2. NodeJS - просто NodeJS3. Презентация о coffeescript с котятками 4. JavaScript-Garden - документация по

самым заковыристым темам языка JavaScript

5. browserify - тулза для использования require на клиенте


http://coffeescript.org/#cake

http://coffeescript.org/#cake

http://nodejs.org/

http://nodejs.org/

http://bodil.org/coffeescript/

http://javascript-garden

https://github.com/substack/node-browserify

Спасибо за внимание

Евгений Власенко CoffeeScript Developer @ Noveo




Documents

JavaScript не нужен, CoffeeScript - мимими