Какие шаблоны объектно-ориентированного проектирования вы используете в javascript вашего приложения и почему?
Не стесняйтесь размещать код, даже если к нему не прикреплен официальный шаблон дизайна.
Я написал много javascript, но не применил много объектно-ориентированных шаблонов к тому, что делаю, и я уверен, что многого не хватает.
Ответы:
Ниже приведены три популярных шаблона JavaScript. Их легко реализовать из-за закрытий :
Вы также можете проверить:
Следующее - это выступление Google I / O за 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();
Пространства имён
Я также согласен с Эриком Мираглиа в том, что он придерживается пространств имен, поэтому приведенный выше код должен запускаться в своем собственном контексте за пределами объекта окна, это важно, если вы собираетесь запускать свой код как одну из многих параллельных фреймворков / библиотек, выполняющихся в окне браузера.
Это означает, что единственный путь к объекту окна - через ваш собственный объект пространства имен / модуля:
// 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);
ОО шаблоны
Что касается «шаблонов» в смысле Java, я нашел применение только шаблону Singleton (отлично подходит для кеширования) и шаблону Observer для функциональных возможностей, управляемых событиями, таких как назначение некоторых действий, когда пользователь нажимает кнопку.
Пример использования паттерна наблюдателя:
// 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: the Good Parts . Блестящая книга для этого.
Я фанат Модульного паттерна . Это способ реализации расширяемых, независимых (в большинстве случаев) фреймворков.
Пример:
Фреймворк 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
Qпеременная фреймворка или десятки и десятки функций и переменных?
Шаблон singleton часто очень полезен для «инкапсуляции» и организации вещей. Вы даже можете изменить доступность.
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ключевое слово, которое делает возможным доступ к другому публичному члену функции Calculator.