Какие объектно-ориентированные шаблоны проектирования вы используете в своем приложении javascript и почему?
Не стесняйтесь публиковать код, даже если к нему не прилагается формальный шаблон дизайна.
Я написал много javascript, но я не применял много шаблонов, ориентированных на объекты, к тому, что я делаю, и я уверен, что мне не хватает много.
Ниже перечислены три популярных шаблона JavaScript. Они легко реализуемы из-за closures:
Вы также можете проверить:
Ниже приводится сообщение о вводе/выводе Google с 2008 года, представленное Диасом, где он обсуждает некоторые темы из своей книги:
Наследование
Я использую обозначение для наследования, основанное на ExtJS 3, который, как мне кажется, работает довольно близко к подражанию классическому наследованию на Java. Он в основном работает следующим образом:
// Create an 'Animal' class by extending
// the 'Object' class with our magic method
var Animal = Object.extend(Object, {
move : function() {alert('moving...');}
});
// Create a 'Dog' class that extends 'Animal'
var Dog = Object.extend(Animal, {
bark : function() {alert('woof');}
});
// Instantiate Lassie
var lassie = new Dog();
// She can move and bark!
lassie.move();
lassie.bark();
Namespaces
Я также согласен с тем, что Эрик Мираглия придерживается пространств имен, поэтому приведенный выше код следует запускать в его собственном контексте вне объекта окна, это имеет решающее значение, если вы намерены использовать свой код как одну из многих параллельных фреймворков/библиотек, выполняющихся в браузера.
Это означает, что единственный путь к объекту окна - через собственный объект пространства имен/модулей:
// Create a namespace / module for your project
window.MyModule = {};
// Commence scope to prevent littering
// the window object with unwanted variables
(function() {
var Animal = window.MyModule.Animal = Object.extend(Object, {
move: function() {alert('moving...');}
});
// .. more code
})();
Интерфейсы
Вы также можете использовать более продвинутые конструкции ООП, такие как интерфейсы, чтобы улучшить дизайн вашего приложения. Мой подход к этим заключается в том, чтобы улучшить Function.prototype, чтобы получить обозначение вдоль этих строк:
var Dog = Object.extend(Animal, {
bark: function() {
alert('woof');
}
// more methods ..
}).implement(Mammal, Carnivore);
Шаблоны OO
Что касается "Шаблонов" в смысле Java, я нашел применение для Singleton pattern (отлично подходит для кеширования) и шаблон наблюдателя для управляемых событиями функций, таких как назначение некоторых действий, когда пользователь нажимает кнопку.
Примером использования шаблона наблюдателя будет:
// Instantiate object
var lassie = new Animal('Lassie');
// Register listener
lassie.on('eat', function(food) {
this.food += food;
});
// Feed lassie by triggering listener
$('#feeding-button').click(function() {
var food = prompt('How many food units should we give lassie?');
lassie.trigger('eat', [food]);
alert('Lassie has already eaten ' + lassie.food + ' units');
});
И это всего лишь несколько трюков в моей сумке OO JS, надеюсь, что они вам полезны.
Я рекомендую, если вы намереваетесь спуститься по этой дороге, которую вы прочтете Douglas Crockfords Javascript: хорошие части. Его блестящая книга для этого.
Я поклонник шаблона модуля. Это способ реализации расширяемых, независящих (в большинстве случаев) фреймворков.
Пример:
Структура Q определяется следующим образом:
var Q = {};
Чтобы добавить функцию:
Q.test = function(){};
Эти две строки кода используются вместе для формирования модулей. Идея модулей состоит в том, что все они расширяют базовую структуру, в данном случае Q, но не зависят друг от друга (если они разработаны правильно) и могут быть включены в любой порядок.
В модуле вы сначала создаете объект рамки, если он не существует (что является примером шаблона Singleton):
if (!Q)
var Q = {};
Q.myFunction = function(){};
Таким образом, вы можете иметь несколько модулей (например, выше) в отдельных файлах и включать их в любом порядке. Любой из них создаст объект рамки, а затем расширит его. Никакое руководство не должно проверять, существует ли структура. Затем, чтобы проверить, существует ли модуль/функция в пользовательском коде:
if (Q.myFunction)
Q.myFunction();
else
// Use a different approach/method
Синтаксический шаблон часто очень полезен для инкапсуляции и организации. Вы даже можете изменить доступность.
var myInstance = {
method1: function () {
// ...
},
method2: function () {
// ...
}
};
Мне очень нравится jquery шаблон цепочки методов, позволяющий вызывать несколько методов для одного объекта. Это позволяет легко выполнять несколько операций в одной строке кода.
Пример:
$('#nav').click(function() {
$(this).css('color','#f00').fadeOut();
});
Мне действительно нравится шаблон Decorator с плагинами jQuery. Вместо того, чтобы модифицировать плагины для удовлетворения ваших потребностей, напишите собственный плагин, который просто пересылает запросы и добавляет дополнительные параметры и функциональные возможности.
Например, если вам нужно все время передавать набор аргументов по умолчанию, и вам нужно немного другое поведение, связанное с бизнес-логикой, напишите плагин, который делает все, что нужно pre и post. в соответствии с вашими потребностями и передает аргументы по умолчанию, если эти конкретные аргументы не указаны.
Основное преимущество этого заключается в том, что вы можете обновлять свои библиотеки и не беспокоиться о переносе изменений в библиотеке. Ваш код может сломаться, но, по крайней мере, вероятность того, что он не будет.
Один из полезных шаблонов в мире javascript - это шаблон цепочки, который стал популярным в LINQ на первом месте, а также используется в jQuery.
этот шаблон позволяет нам называть разные методы класса цепочки.
основная структура этого шаблона будет выглядеть как
var Calaculator = function (init) {
var result = 0;
this.add = function (x) { result += (init + x); return this; };
this.sub = function (x) { result += (init - x); return this; };
this.mul = function (x) { result += (init * x); return this; };
this.div = function (x) { result += (init / x); return this; };
this.equals = function (callback) {
callback(result);
}
return this;
};
new Calaculator(0)
.add(10)
.mul(2)
.sub(5)
.div(3)
.equals(function (result) {
console.log(result);
});
ключевой идеей этого шаблона является ключевое слово this, что позволяет получить доступ к другому публичному члену функции калькулятора.