Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,455 views

Published on

ООП в JavaScript и как CoffeeScript делает жизнь проще

  • Be the first to comment

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

  1. 1. JavaScript - не нужен!CoffeeScript - мимими Евгений Власенко CoffeeScript Developer @ Noveo http://about.me/vlasenko
  2. 2. Область применения ООП в JavaScript Объектно ориентированный подход можно применять везде, где задача сложнее, чем отправить форму на сервер по клику на кнопку. Евгений Власенко, 6 октября 2012JavaScript - не нужен! CoffeeScript - мимими
  3. 3. JavaScript и ООП ● Объект в JavaScript — это просто коллекция пар ключ-значение (ассоциативные массивы, хэши) ● Прототипное наследование — это прекрасно!JavaScript - не нужен! CoffeeScript - мимими
  4. 4. 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 - мимими
  5. 5. Методы объекта экономия памяти - не, не слышал 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 - мимими
  6. 6. Методы объекта 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 - мимими
  7. 7. Выстрел в ногу 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 - мимими
  8. 8. Выстрел в ногу 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 - мимими
  9. 9. И волки целы, и овцы сыты 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 - мимими
  10. 10. Прототипное наследование var Car = function(speed){ this.speed = speed; } var BMW = function(series){ this.series = series; } BMW.prototype = new Car(180);JavaScript - не нужен! CoffeeScript - мимими
  11. 11. Прототипное наследование 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 - мимими
  12. 12. Прототипное наследование 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 - мимими
  13. 13. Прототипное наследование — это прекрасно! 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 - мимими
  14. 14. Реклама CoffeeScript 1. CoffeeScript - это меньше букав 2. Разделение блоков кода отступами 3. Ещё куча вкусностей и приятностей http://coffeescript.org/JavaScript - не нужен! CoffeeScript - мимими
  15. 15. CoffeeScript и ООП CoffeeScript делает за Вас всё, что было сказано выше про JavaScript и ООП.JavaScript - не нужен! CoffeeScript - мимими
  16. 16. Классы в 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; })();JavaScript - не нужен! CoffeeScript - мимими
  17. 17. Наследование в 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);JavaScript - не нужен! CoffeeScript - мимими
  18. 18. Киллер фича CoffeeScript ● В официальной документации о работе с классами написано очень мало ● Реализация ООП подхода в CoffeeScript очень простая и прозрачная Я считаю, именно это является киллер фичей этого языкаJavaScript - не нужен! CoffeeScript - мимими
  19. 19. Вкусности CoffeeScriptJavaScript - не нужен! CoffeeScript - мимими
  20. 20. Статический метод 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; })();JavaScript - не нужен! CoffeeScript - мимими
  21. 21. Забиндим метод на объекте 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 л.JavaScript - не нужен! CoffeeScript - мимими
  22. 22. Забиндим метод на объекте Взгляд изнутри Используется такая связка: __bind = function(fn, me){ return function(){ return fn.apply (me, arguments); }; }; this.printVolume = __bind(this.printVolume, this); Можно писать самим, но зачем, когда это может сделать CoffeeScript.JavaScript - не нужен! CoffeeScript - мимими
  23. 23. Меньше буков class Drink var Drink; constructor: (@volume)-> Drink = (function() { function Drink(volume) { this.volume = volume; } return Drink; })();JavaScript - не нужен! CoffeeScript - мимими
  24. 24. Сахар - параметры по умолчанию class Drink var Drink; constructor: (@volume=0.5)-> Drink = (function() { function Drink(volume) { this.volume = volume != null ? volume : 0.5; } return Drink; })();JavaScript - не нужен! CoffeeScript - мимими
  25. 25. Хотелось бы упомянуть 1. Cake - система сборки CoffeeScript 2. NodeJS - просто NodeJS 3. Презентация о coffeescript с котятками 4. JavaScript-Garden - документация по самым заковыристым темам языка JavaScript 5. browserify - тулза для использования require на клиентеJavaScript - не нужен! CoffeeScript - мимими
  26. 26. Спасибо за внимание Евгений Власенко CoffeeScript Developer @ Noveo http://about.me/vlasenko

×