Jakich wzorców projektowych zorientowanych obiektowo używasz w javascript swojej aplikacji i dlaczego?
Zapraszam do wysłania kodu pocztowego, nawet jeśli nie ma do niego dołączonego formalnego wzoru projektowego.
Napisałem wiele skryptów JavaScript, ale nie zastosowałem zbyt wielu wzorców obiektowych do tego, co robię, i jestem pewien, że wiele mi brakuje.
Odpowiedzi:
Poniżej przedstawiono trzy popularne wzorce JavaScript. Są one łatwe do wdrożenia z powodu zamknięć :
Możesz również sprawdzić:
Poniżej znajduje się wykład Google I / O z 2008 r. Wygłoszony przez Diaza, w którym omawia niektóre tematy ze swojej książki:
Dziedzictwo
Używam notacji do dziedziczenia opartej na ExtJS 3 , który, moim zdaniem , działa bardzo podobnie do emulacji klasycznego dziedziczenia w Javie. Zasadniczo działa w następujący sposób:
// 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();
Przestrzenie nazw
Zgadzam się również z Erikiem Miraglia co do trzymania się przestrzeni nazw, więc powyższy kod powinien być uruchamiany w swoim własnym kontekście poza obiektem okna, jest to krytyczne, jeśli zamierzasz działać jako jeden z wielu współbieżnych frameworków / bibliotek wykonujących się w oknie przeglądarki.
Oznacza to, że jedyną drogą do obiektu okna jest własna przestrzeń nazw / obiekt modułu:
// 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
})();
Interfejsy
Możesz także skorzystać z większej liczby zaawansowanych konstrukcji OOP, takich jak interfejsy, aby ulepszyć projekt aplikacji. Moje podejście do tego polega na wzmocnieniu znaku Function.prototypew celu uzyskania notacji w następujący sposób:
var Dog = Object.extend(Animal, {
bark: function() {
alert('woof');
}
// more methods ..
}).implement(Mammal, Carnivore);
OO Patterns
Jeśli chodzi o `` wzorce '' w sensie Java, znalazłem zastosowanie tylko dla wzorca Singleton (świetnego do buforowania) i wzorca Observer do funkcji sterowanych zdarzeniami, takich jak przypisywanie niektórych akcji, gdy użytkownik kliknie przycisk.
Przykład wykorzystania wzorca obserwatora wyglądałby następująco:
// 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');
});
A to tylko kilka sztuczek w mojej torbie z OO JS, mam nadzieję, że ci się przydadzą.
Jeśli zamierzasz pójść tą drogą, polecam przeczytać Douglas Crockfords Javascript: The Good Parts . To świetna książka do tego wszystkiego.
Jestem fanem Module Pattern . Jest to sposób na implementację rozszerzalnych, niezależnych (w większości przypadków) frameworków.
Przykład:
Ramy,, Qsą zdefiniowane w następujący sposób:
var Q = {};
Aby dodać funkcję:
Q.test = function(){};
Te dwa wiersze kodu są używane razem do tworzenia modułów . Idea stojąca za modułami polega na tym, że w tym przypadku wszystkie one rozszerzają podstawową strukturę, Qale nie są od siebie zależne (jeśli zostały prawidłowo zaprojektowane) i mogą być dołączane w dowolnej kolejności.
W module najpierw tworzysz obiekt frameworka, jeśli nie istnieje (co jest przykładem wzorca Singleton ):
if (!Q)
var Q = {};
Q.myFunction = function(){};
W ten sposób możesz mieć wiele modułów (takich jak powyższy) w oddzielnych plikach i dołączać je w dowolnej kolejności. Każdy z nich utworzy obiekt szkieletu, a następnie go rozszerzy. Nie ma potrzeby ręcznego sprawdzania, czy ramy istnieją. Następnie, aby sprawdzić, czy moduł / funkcja istnieje w kodzie niestandardowym:
if (Q.myFunction)
Q.myFunction();
else
// Use a different approach/method
Qzmienna frameworka, czy dziesiątki funkcji i zmiennych?
Wzorzec singleton jest często bardzo pomocny w przypadku „hermetyzacji” i organizacji. Możesz nawet zmienić dostępność.
var myInstance = {
method1: function () {
// ...
},
method2: function () {
// ...
}
};
Bardzo podoba mi się wzorzec łączenia metod w jquery , umożliwiający wywołanie kilku metod na jednym obiekcie. Ułatwia to wykonanie kilku operacji w jednej linii kodu.
Przykład:
$('#nav').click(function() {
$(this).css('color','#f00').fadeOut();
});
Bardzo podoba mi się wzorzec Decorator z wtyczkami jQuery. Zamiast modyfikować wtyczki, aby spełnić Twoje potrzeby, napisz niestandardową wtyczkę, która po prostu przekazuje żądania i dodaje dodatkowe parametry i funkcje.
Na przykład, jeśli musisz przez cały czas przekazywać zestaw domyślnych argumentów i potrzebujesz nieco innego zachowania, które wiąże się z logiką biznesową, napisz wtyczkę, która zrobi wszystko prei postzadziała, aby spełnić Twoje potrzeby i przekaże domyślne argumenty jeśli te konkretne argumenty nie są określone.
Główną zaletą tego jest to, że możesz aktualizować swoje biblioteki i nie martwić się o przenoszenie zmian w bibliotekach. Twój kod może się zepsuć, ale jest przynajmniej szansa, że tak się nie stanie.
Jednym z przydatnych wzorców w świecie javascript jest łańcuchowy wzorzec, który jest spopularyzowany przez LINQ w pierwszej kolejności, a także jest używany w jQuery.
ten wzorzec umożliwia nam wywoływanie różnych metod klasy w sposób łańcuchowy.
główna struktura tego wzoru byłaby następująca
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);
});
Kluczową ideą tego wzorca jest thissłowo kluczowe, które umożliwia dostęp do innego publicznego członka funkcji Kalkulatora.