Download - JavaScript не нужен, CoffeeScript - мимими
JavaScript - не нужен!CoffeeScript - мимими
Евгений Власенко CoffeeScript Developer @ Noveo
http://about.me/vlasenko
Область применения ООП в JavaScript
Объектно ориентированный подход можно применять везде, где задача сложнее, чем отправить форму на сервер по клику на кнопку.
Евгений Власенко, 6 октября 2012
JavaScript - не нужен! CoffeeScript - мимими
JavaScript и ООП
● Объект в JavaScript — это просто коллекция пар ключ-значение (ассоциативные массивы, хэши)
● Прототипное наследование — это прекрасно!
JavaScript - не нужен! CoffeeScript - мимими
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 }
JavaScript - не нужен! CoffeeScript - мимими
Методы объектаэкономия памяти - не, не слышал
var Car = function(speed){ this.speed = speed; // Метод лежит в каждом экземпляре this.printSpeed = function(){ console.log(this.speed + ' км/ч') }}
var fast = new Car(180);var slow = new Car(20);
fast.printSpeed(); // 180 км/чslow.printSpeed(); // 20 км/ч
JavaScript - не нужен! CoffeeScript - мимими
Методы объекта
var Car = function(speed){ this.speed = speed;}// Метод в прототипе в единственном экземпляре - профитCar.prototype.printSpeed = function(){ console.log(this.speed + ' км/ч');}
var fast = new Car(180);var slow = new Car(20);
fast.printSpeed(); // 180 км/чslow.printSpeed(); // 20 км/ч
JavaScript - не нужен! CoffeeScript - мимими
Выстрел в ногу
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' ]
JavaScript - не нужен! CoffeeScript - мимими
Выстрел в ногу
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' ]
JavaScript - не нужен! CoffeeScript - мимими
И волки целы, и овцы сыты
function Hamster() { this.food = [ ];}Hamster.prototype = {
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); // [ ]
JavaScript - не нужен! CoffeeScript - мимими
Прототипное наследование
var Car = function(speed){ this.speed = speed;}var BMW = function(series){ this.series = series;}BMW.prototype = new Car(180);
JavaScript - не нужен! CoffeeScript - мимими
Прототипное наследование
var Car = function(speed){ this.speed = speed;}var BMW = function(series){ this.series = series;}BMW.prototype = new Car(180);
Мы испортили всё, что можно!● Прототип BMW.prototype● Конструктор BMW.prototype.constructor● В любой момент можем выстрелить в ногу
Можно раскидывать ручками при каждом наследовании, но...
JavaScript - не нужен! CoffeeScript - мимими
Прототипное наследование
var extend = function(Child, Parent) { var F = function() { } F.prototype = Parent.prototype Child.prototype = new F() Child.prototype.constructor = Child Child.superclass = Parent.prototype}
Всё хорошо, за исключением случая с "хомяком" и "разделяемой" едой.
JavaScript - не нужен! CoffeeScript - мимими
Прототипное наследование — это прекрасно!
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;}
JavaScript - не нужен! CoffeeScript - мимими
Реклама CoffeeScript
1. CoffeeScript - это меньше букав
2. Разделение блоков кода отступами
3. Ещё куча вкусностей и приятностей
http://coffeescript.org/
JavaScript - не нужен! CoffeeScript - мимими
CoffeeScript и ООП
CoffeeScript делает за Вас всё, что было сказано выше про JavaScript и ООП.
JavaScript - не нужен! CoffeeScript - мимими
Классы в 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;})();
JavaScript - не нужен! CoffeeScript - мимими
Наследование в 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);
JavaScript - не нужен! CoffeeScript - мимими
Киллер фича CoffeeScript
● В официальной документации о работе с классами написано очень мало
● Реализация ООП подхода в CoffeeScript очень простая и прозрачнаяЯ считаю, именно это является киллер
фичей этого языка
JavaScript - не нужен! CoffeeScript - мимими
Вкусности CoffeeScript
JavaScript - не нужен! 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;})();
JavaScript - не нужен! CoffeeScript - мимими
Забиндим метод на объекте
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 л.
JavaScript - не нужен! CoffeeScript - мимими
Забиндим метод на объектеВзгляд изнутри
Используется такая связка:
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };this.printVolume = __bind(this.printVolume, this);
Можно писать самим, но зачем, когда это может сделать CoffeeScript.
JavaScript - не нужен! CoffeeScript - мимими
Меньше буков
class Drink constructor: (@volume)->
var Drink;Drink = (function() { function Drink(volume) { this.volume = volume; } return Drink;})();
JavaScript - не нужен! CoffeeScript - мимими
Сахар - параметры по умолчанию
class Drink constructor: (@volume=0.5)->
var Drink;Drink = (function() { function Drink(volume) { this.volume = volume != null ? volume : 0.5; } return Drink;})();
JavaScript - не нужен! CoffeeScript - мимими
Хотелось бы упомянуть
1. Cake - система сборки CoffeeScript2. NodeJS - просто NodeJS3. Презентация о coffeescript с котятками 4. JavaScript-Garden - документация по
самым заковыристым темам языка JavaScript
5. browserify - тулза для использования require на клиенте
JavaScript - не нужен! CoffeeScript - мимими
Спасибо за внимание
Евгений Власенко CoffeeScript Developer @ Noveo
http://about.me/vlasenko