Питер Сейбель, автор практического общего LISP, однажды сказал, что если вам нужен шаблон, что -то должно быть неправильным. Проблема, которую он упомянул, относится к необходимости искать и суммировать общее решение из -за неотъемлемых недостатков языка.
Будь то слабый или сильный тип, статический или динамичный язык, императивный или описательный язык, каждый язык имеет свои преимущества и недостатки. Ямайский спортсмен имеет некоторые преимущества в спринте и даже в боксе, но не хватает некоторых в практике йоги.
Чернокнижники и теневые священники могут легко быть превосходным вспомогательным, в то время как вражеская магия, летящая с Мейконом на спине, была бы немного неловкой. Чтобы переключиться на программу, может потребоваться много усилий, чтобы реализовать декоратор на статическом языке. Поскольку JS может бросить методы на объекты в любое время, рисунок декоратора становится бесполезным в JS.
Есть довольно много книг о моделях дизайна JavaScript. «Pro Javascript Design Patterns» - это классическая книга, но примеры в нем довольно многослов, поэтому, основываясь на коде, который я написал на работе, я суммирую свое понимание. Если мое понимание предвзято, пожалуйста, обязательно исправьте это.
1. Синглтон режим
Определение синглтонского шаблона заключается в создании уникального экземпляра класса, но сам JS - это «бесклассовый» язык. Многие статьи, в которых рассказывается о шаблоне дизайна JS, используется {} в качестве синглтона и имеет смысл. Поскольку есть много способов генерировать объекты JS, давайте посмотрим на другого более значимого Синглтона.
Существует общее требование, что при нажатии кнопки на странице необходимо появиться слой маски. Например, когда вы нажимаете на web.qq.com, чтобы войти в систему.
Этот код, который генерирует серый фоновый слой маски, легко написать.
Кода -копия выглядит следующим образом:
var createMask = function () {
возвратный документ, body.appendchild (document.createElement (div));
}
$ ('button') .click (function () {
Var mask = createMask ();
Mask.show ();
})
Проблема в том, что этот слой маски является глобально уникальным, поэтому каждый раз, когда вы называете CreateMask, будет создан новый DIV, хотя его можно удалить при скрытии слоя маски. Тем не менее, это, очевидно, неразумно делать это.
Давайте посмотрим на второе решение, создайте этот Div в начале страницы. Затем обратитесь на это с переменной.
Кода -копия выглядит следующим образом:
var mask = document.body.appendchild (document.createElement ("div '));
$ ("кнопка ') .click (function () {
Mask.show ();
})
Это не означает, что на странице будет создано только только девта с масками, но последует другая проблема. Может быть, нам никогда не понадобится этот слой маски, который будет тратить Div, и вы должны быть очень скупыми в отношении любой работы узла DOM.
Если вы можете использовать переменную, определите, был ли создан Div?
Кода -копия выглядит следующим образом:
вар маска;
var createMask = function () {
if (маска) вернуть маску;
еще{
Маска = документ, body.appendchild (document.createElement (div));
вернуть маску;
}
}
Это выглядит хорошо, но здесь я выполнил функцию, которая генерирует один объект столбца. Давайте внимательно посмотрим на то, что не так с этим кодом.
Прежде всего, эта функция имеет определенные побочные эффекты. Функция изменяет ссылку на маску внешней переменной в корпусе функции. В проекте сотрудничества с несколькими людьми CreateMask является небезопасной функцией. С другой стороны, глобальная переменная маска не является необходимой. Давайте улучшим это.
Кода -копия выглядит следующим образом:
var createMask = function () {
вар маска;
return function () {
вернуть маску || (mask = document.body.appendchild (document.createElement ('div')))))
}
} ()
Простое закрытие используется для обертывания маски переменной, по крайней мере, для функции CreateMask, оно закрыто.
Может быть, когда я вижу это, я думаю, что шаблон синглтона слишком прост. Действительно, некоторые шаблоны дизайна очень просты. Даже если я никогда не обращал внимания на концепцию шаблонов дизайна, я использовал некоторые шаблоны дизайна в своем ежедневном коде, не зная об этом. Так же, как когда я понял, что такое тележка старика, я думал об этом много лет назад, оказалось, что это тележка старика.
23 шаблона проектирования в GOF также являются шаблонами, которые существовали и неоднократно используются в разработке программного обеспечения. Если программист не четко понимает, что он использовал определенные шаблоны, то он может пропустить более подходящий дизайн в следующий раз (этот отрывок происходит из «мира программирования в Мацумото».
Давайте вернемся к теме, в предыдущем Синглтоне все еще есть свои недостатки. Его можно использовать только для создания слоев маски. Что если мне нужно написать функцию, чтобы создать уникальный объект XHR? Могу я найти общую синглтонную обертку?
Функции в JS являются первым типом, что означает, что функции также могут быть переданы в виде параметров. Давайте посмотрим на окончательный код.
Кода -копия выглядит следующим образом:
var singleton = function (fn) {
var result;
return function () {
Вернуть результат || (result = fn .apply (это, аргументы));
}
}
var createmask = singleton (function () {
return document.body.appendchild (document.createElement ('div'));
})
Используйте переменную для сохранения первого возвращаемого значения. Если он был назначен, переменная будет возвращена сначала при последующих вызовах. Код, который действительно создает слой маски, передается в односложную обертку через функцию обратного вызова. Этот метод на самом деле называется режимом моста. Что касается режима моста, он станет чуть позже.
Однако функция Singleton не идеальна, всегда требуется переменная результат, чтобы зарегистрировать ссылку на Div. К сожалению, функциональных характеристик JS недостаточно, чтобы полностью устранить объявления и заявления.