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 }


Методы объекта
экономия памяти - не, не слышал
this.speed = speed;
// Метод лежит в каждом экземпляре
this.printSpeed = function(){
console.log(this.speed + ' км/ч')
}
}


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


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

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() { }
food: [],
// при чтении, свойство ищется в цепочке прототипов
}
}


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


И волки целы, и овцы сыты
function Hamster() {
this.food = [ ];
}
}
}


console.log(lazy.food); // [ ]


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

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



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/


CoffeeScript и ООП

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


Классы в CoffeeScript

class Drink var Drink = (function() {
constructor: (volume)-> function Drink(volume) {
@volume = volume this.volume = volume;
printVolume: ()-> }
console.log(@volume + ' л.') Drink.prototype.printVolume = function(){
return console.log(this.volume + '
л.');
};
return Drink;
})();


Наследование в CoffeeScript
var Beer, Drink,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.ca
class Drink function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; chi
parent.prototype; return child; };
constructor: (volume)-> Drink = (function() {
@volume = volume function Drink(volume) {
this.volume = volume;
printVolume: ()-> }

console.log(@volume+' л.') Drink.prototype.printVolume = function() {
return console.log(this.volume + ' л.');
};
return Drink;
class Beer extends Drink })();
constructor: (volume, alcohol)-> Beer = (function(_super) {
__extends(Beer, _super);
super(volume) function Beer(volume, alcohol) {
@alcohol = alcohol Beer.__super__.constructor.call(this, volume);
this.alcohol = alcohol;
printAlcohol: ()-> }
Beer.prototype.printAlcohol = function() {
console.log(@alcohol+' %')
return console.log(this.alcohol + ' %');
};
return Beer;
})(Drink);


Киллер фича CoffeeScript

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


Вкусности CoffeeScript


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

class Drink var Drink = (function() {
constructor: (volume)-> function Drink(volume) {
@volume = volume this.volume = volume;
printVolume: ()-> }
console.log(@volume+' л.') Drink.prototype.printVolume = function()
@format: (name)-> {
'Drink '+name return console.log(this.volume + ' л.');
};
Drink.format = function(name) {
return 'Drink ' + name;
};
return Drink;
})();


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

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

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


Забиндим метод на объекте
Взгляд изнутри
Используется такая связка:

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

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


Меньше буков

class Drink var Drink;
constructor: (@volume)-> Drink = (function() {
function Drink(volume) {
this.volume = volume;
}
return Drink;
})();


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

class Drink var Drink;
constructor: (@volume=0.5)-> Drink = (function() {
function Drink(volume) {
this.volume = volume != null ?
volume : 0.5;
}
return Drink;
})();


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

1. Cake - система сборки CoffeeScript
2. NodeJS - просто NodeJS
3. Презентация о coffeescript с котятками
4. JavaScript-Garden - документация по
самым заковыристым темам языка
JavaScript
5. browserify - тулза для использования
require на клиенте


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

Евгений Власенко
CoffeeScript Developer @ Noveo
http://about.me/vlasenko

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

Recommended

Recommended

More Related Content

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

Similar to JavaScript не нужен, CoffeeScript - мимими (20)

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