Beyondtheclouds Nov 15 2011 at 13:05

JavaScript паттерны… для чайников

8 min

181K

JavaScript*

+98

Comments 46

mchl Nov 15 2011 at 13:36

javascript singleton дальше не читал

-34

NikitaG Nov 15 2011 at 16:12

можете рассказать почему?

jazzz13 Nov 15 2011 at 19:46

я тоже дочитал только до singleton, и скажу почему: я работаю javascript разработчиком и в понедельник, сразу после рабочего дня, такие статьи читать противопоказано. Но статья полезная вроде :)

NikitaG Nov 15 2011 at 20:31

я не понял — почему противопоказано?

jazzz13 Nov 15 2011 at 20:35

ну как бы утомление сильное, голова болит и прочие вещи. Надо же отдыхать?

NikitaG Nov 15 2011 at 22:24

типо на хабре сиски ищите? а тут singleton? соболезную…

philpirj Nov 16 2011 at 11:40

var singleton = new Singleton_B();
var singleton2 = singleton.clone();

Beyondtheclouds Nov 16 2011 at 12:53

согласен. подумаю что с этим можно сделать.

philpirj Nov 16 2011 at 15:58

Верните человеку карму. Я тоже дальше синглетонов не читал, пока не увидел, что человека заминусовали.

Beyondtheclouds Nov 16 2011 at 17:13

поправил. теперь даже если клонировать его( deepCopy, Shallow copy ) все все-равно будет работать корректно. покрайней мере с реализацией клонирования из jQuery. благодаря вашему комментарию стал немного умнее :)

mchl Nov 17 2011 at 15:13

Но зачем, зачем?

Beyondtheclouds Nov 17 2011 at 15:37

если уж сказал что его можно использовать как обычный объект и нипариться, надо знаичт до конца имплементировать все верно :)

mchl Nov 17 2011 at 15:45

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

mchl Nov 17 2011 at 15:50

Итак, в честь 34 минусов, привожу свой вариант статьи

Паттерны в javascript

Decorator

var Ball = function () {
}

Ball.prototype = new Object()

Ball.prototype.draw = function () {

console.log(«draw ball»)

}

var StripedBall = function () {

Ball.apply(this, arguments)

}

StripedBall.prototype = new Ball()

StripedBall.prototype.draw = function () {

Ball.prototype.draw.apply(this, [])

console.log(«with stripes!»)

}

Factory

Важно понимать, что паттерны в общем случае это все же не готовые классы, это не код, это парадигмы, реализация которых в принципе не так важна

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

var Shapes = { Circle: function ()…?

// i dont think so

var createCircle = funciton ()…

// или

var Shape = function ()…

Shape.createCircle = function ()…

Водицы полили, далее

Singleton

Процитирую автора: это объект, который есть в системе в одном экземпляре

window.singleton = new Objet()

что еще добавить? добавить нечего, увы

Memoization — жевали в комментариях

Mediator — реализация в статье, феерический п@#$%ц, вы только вдумайтесь в эго код. Пацаны с "-34" делают так:

var Daddy = function (kitchen) {

this.kitchen = kitchen

}

Daddy.prototype = new Object()

Daddy.prototype.getBeer = function () {

if (! this.kitchen…

}

var Mammy = function (kitchen) {

…

}

…

var Kitchen = function () {

refrigerator = new BeerStorage(999)

stash = new BeerStorage(888)

…
}

…

Все очень приблизительно, но то что выдал автор вообще уму не постижимо. Коллеги знают о Медиаторе, Медиатор знает о коллегах. Вообще такой пример было бы разумно реализовывать на событиях, которые описаны длаее

Observer — реализовать можно по разному, много хороших разных реализаций, лучше использовать стороннюю, $.on/$.off so on. Хотя реализация в статье, можно сказать, раскрывает суть, сойдет для ознакомления.

P.S. Весь комментарий и код набраны в блокноте, ни разу не проверялись, комментарии ниже так же особо не мониторились. Извините если повторяюсь, и думайте головой, пожалуйста, вы сюда плюсы пришли ставить или свет нести?

simonoff Nov 15 2011 at 13:38

Memoization вообще-то лучше куда-то вне ложить. Или в data в jquery или html5 storage.

Beyondtheclouds Nov 15 2011 at 13:44

Cпасибо. нехотелось просто их впутывать. а чем такой подход плох?

simonoff Nov 15 2011 at 13:55

у вас будет постоянно расти стек. Зачем это вам? Если можно скидывать во внешний сторадж.

kashey Nov 15 2011 at 13:55

Это будет уже не мемоиз а кеш.
Вот, например, нормальный декоратор — мемоизатор, хотя многим выносит мозги.

memoize = function(func, context, single) {

 function memoizeArg (argPos, depth) {

 var cache = {};

 return function () {

 if (argPos == 0 && depth == 0) {

 argPos = arguments.length;

 }

 if (argPos <= 0) {

 if (!(arguments[argPos] in cache)) {

 cache[arguments[argPos]] = func.apply(context, arguments);

 }

 return cache[arguments[argPos]];

 }

 else {

 if (!(arguments[argPos] in cache)) {

 if (single) {

 cache = {};

 }

 cache[arguments[argPos]] = memoizeArg(argPos - 1, depth + 1);

 }

 return cache[arguments[argPos]].apply(this, arguments);

 }

 }

 }



return memoizeArg(func.length - 1, 0);

}

итого..

var calculationFunctor = memoize(calculation);

UFO just landed and posted this here

philpirj Nov 16 2011 at 16:05

Посмотев внимательно, можно заметить, что в комментарии предыдущего оратора присутствует HTML <code>, скорее всего попавший туда из как раз <source>. Увы, в последнее время на хабре что-то у этого тэга сломалось, и я избегаю его. По крайней мере в постах смотрится ужасно. Ваш комментарий лучше бы смотрелся так в сложившейся ситуации:

don't use &ltsource>, Luke

voftik Nov 15 2011 at 13:47

Действительно — для чайников. спасибо за работу.

Beyondtheclouds Nov 15 2011 at 13:49

я старался :)

asci Nov 15 2011 at 13:58

Рекомендую к прочтению www.ozon.ru/context/detail/id/6287517/ (да простят меня боги за ссылку на озон)

Beyondtheclouds Nov 15 2011 at 13:58

читал оригинал. если етсь какието косяки в реализациях буду очень благодарен если укажете

asci Nov 15 2011 at 14:08

Ну реализация фабрики отличается, хотя не скажу что ваша хуже.
Еще неплохо было бы стратегию описать, в остальном все ок, спасибо)

Beyondtheclouds Nov 15 2011 at 14:14

я, может быть, потом еще одну статью про паттерны сделаю :) а некоторые реализации в той книжке мне показались не самыми удачными. например тот-же Decorator. если найду мыло автора обязательно спрошу про это — вдруг ответит :)

hautamaki Nov 15 2011 at 14:03

Плюс вам. Паттерны — это весело.

GreatRash Nov 15 2011 at 15:05

Спасибо за паттерны. Очень полезно.
Есть вопрос: зачем переопределять конструктор?

bildja Nov 15 2011 at 15:33

Если вы о

Daddy.prototype = {

 constructor: Daddy,

 //...

}

, то тут недавно спрашивали: habrahabr.ru/blogs/javascript/132340/#comment_4393309

Grundiss Nov 15 2011 at 18:35

По той ссылке не ходите — ~~там вирусы~~ там я плохо написал :)
В общем, как только вы пишите
Daddy.prototype = {
все! Карабах! Вы затерли напрочь все, что раньше было в прототипе, в том числе и конструктор. И не мешало бы его восстановить. Честно-то сказать, единственное зачем это надо, так исключительно для корректной работы оператора typeof, все остальное само по себе работает. Или я не совсем прав, м, ребят?

Grundiss Nov 15 2011 at 18:37

Ололо! Не typeof, а instanceof!

Beyondtheclouds Nov 15 2011 at 20:14

круто обьясняешь :)) нет instanceof вообще не при делах — я обьяснял в той ветке :)

Beyondtheclouds Nov 15 2011 at 20:15

всмысле только что обьяснил %)

GreatRash Nov 16 2011 at 12:39

А вот до меня не дошло, что вы там писали в той ветке. Если все, что надо работает и так, зачем переопределять constructor заново?

И еще вопрос: как в паттерне Decorator реализовать наследование? Допустим у меня есть класс мужик, как мне от него сделать классы Папа и Сын?

var Man = function() {

 this.hasBalls = true;

}



Man.prototype = {

 say: function() {

 console.log('Yeah!');

 }

};



var Dad = function() {

 // как автоматом проставить, чтоб у него были яйца?

 // как получить доступ к методу say или переопределить его?

 // только передав Man в качестве параметра?

}

Beyondtheclouds Nov 16 2011 at 17:16

простите, неочень понял вопрос — если надо отнаследовать смотрите статью про наследование или экстенд. какое отношение к наследованию имеет декоратор?

Beyondtheclouds Nov 16 2011 at 17:19

все работает до тех пор, пока мы не захотим обратиться к полю constructor. которое есть у каждого объекта. если не переопределять — там будет конструктор Object

Floyd Nov 15 2011 at 16:33

function calculation(x, y){

 var key = x.toString() + y.toString();

У вас вызовы calculation(1, 23) и calculation(12, 3) будут на один и тот же ключ завязаны. Нужен разделитель.

Beyondtheclouds Nov 15 2011 at 16:44

Спасибо огромное — поправил :)

raven Nov 15 2011 at 16:43

Кстати, для функций в js можно писать декораторы так же, как и для python'а (кроме синтаксического сахара, кончно):

<code class="javascript">
function decorator(fn) {
  function decoratorInner(arg) {
    console.log('decorator');
    return fn(arg);
  }
  
  return decoratorInner;
};

function test(arg) {
  console.log('test ' + arg);
  return 'test result';
};

console.log(test('#test arg'));

var decoratedTest = decorator(test);
console.log(decoratedTest('#decorated test arg'));
</code>

Beyondtheclouds Nov 15 2011 at 16:45

Спасибо огромное. когда будет чуток побольше времени — разберусь в коде напишу примеры и добавлю в статью.

HDg Nov 15 2011 at 16:50

Для чайников отлично, спасибо :)
P.S. Крокфорд советует не переносить открывающиеся фигурные скобки на новую строку. Причина — semicolon insertion. Да и смотрятся они на той же строке приятнее :)

Beyondtheclouds Nov 15 2011 at 16:55

угу я знаю, надо переучиваться. спасибо за совет :)

jen777 Nov 15 2011 at 18:00

Большое спасибо за статью и за ваш труд. Очень полезная статья для начинающих.
Буду исспользовать как дополнительный ресурс для изучения патернов.

tick Nov 15 2011 at 18:01

Тщательнее надо — инициализация красным, а вывод зеленым.

var ball2 = new StripedBall( new SpeckledBall( new Ball({ radius:100, color:«red»})));

ball2.draw();

ball drawn with radius:100 and color: green
and with dots!
and with stripes

Beyondtheclouds Nov 15 2011 at 18:19

спасибо огромное, поправил.

UFO just landed and posted this here

Show the best of all time