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

[mchl]

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

[NikitaG]

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

[jazzz13]

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

[NikitaG]

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

[jazzz13]

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

[NikitaG]

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

[philpirj]

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

[Beyondtheclouds]

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

[philpirj]

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

[Beyondtheclouds]

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

[mchl]

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

[Beyondtheclouds]

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

[mchl]

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

[mchl]

Итак, в честь 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]

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

[Beyondtheclouds]

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

[simonoff]

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

[kashey]

Это будет уже не мемоиз а кеш.
Вот, например, нормальный декоратор — мемоизатор, хотя многим выносит мозги.
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);


[philpirj]

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

don't use <source>, Luke

[voftik]

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

[Beyondtheclouds]

я старался :)

[asci]

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

[Beyondtheclouds]

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

[asci]

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

[Beyondtheclouds]

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

[hautamaki]

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

[GreatRash]

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

[bildja]

Если вы о
Daddy.prototype = {
constructor: Daddy,
//...
}, то тут недавно спрашивали: habrahabr.ru/blogs/javascript/132340/#comment_4393309

[Grundiss]

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

[Grundiss]

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

[Beyondtheclouds]

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

[Beyondtheclouds]

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

[GreatRash]

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

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

var Man = function() {
this.hasBalls = true;
}

Man.prototype = {
say: function() {
console.log('Yeah!');
}
};

var Dad = function() {
// как автоматом проставить, чтоб у него были яйца?
// как получить доступ к методу say или переопределить его?
// только передав Man в качестве параметра?
}


[Beyondtheclouds]

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

[Beyondtheclouds]

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

[Floyd]

function calculation(x, y){
var key = x.toString() + y.toString();
У вас вызовы calculation(1, 23) и calculation(12, 3) будут на один и тот же ключ завязаны. Нужен разделитель.

[Beyondtheclouds]

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

[raven]

Кстати, для функций в 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]

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

[HDg]

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

[Beyondtheclouds]

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

[jen777]

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

[tick]

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

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]

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