Jakie są przykłady implementacji wzorców projektowych przy użyciu JavaScript?

Question

Jestem średnio wprawnym programistą używającym JavaScript, ale nie jestem guru. Wiem, że potrafisz zrobić z nim całkiem potężne rzeczy, po prostu nie widziałem zbyt wiele poza zwykłą manipulacją DOM. Zastanawiam się, czy ludzie mogą podać przykłady tradycyjnych koncepcji wzorniczych, takich jak Metoda Fabryki, Singleton, itp., Używając JavaScript. W jakich przypadkach te wzorce byłyby używane w Internecie?

Answer 1

Po prostu chciałem dodać mój ulubiony wzór JavaScript, którego nauczyłem się od Pro JavaScript Design Patterns, które już polecił Jonathan Rauch.

Jest to wzór singleton przestrzeni nazw. Zasadniczo tworzysz przestrzenie nazw za pomocą singletonów, które pozwalają ukrywać metody i zmienne przed zewnętrznym użyciem. Ukryte/odkryte metody są faktycznie ukryte, ponieważ są zdefiniowane w zamknięciu.

var com = window.com || {}; 
com.mynamespace = com.mynamespace || {}; 
com.mynamespace.newpackage = (function() { 
    var myPrivateVariable = "hidden"; 
    var myPublicVariable = "exposed"; 

    function myPrivateMethod() { 
     return "also hidden"; 
    } 

    function myPublicMethod() { 
     return "also exposed"; 
    } 

    return { 
     myPublicMethod: myPublicMethod, 
     myPublicVariable: myPublicVariable 
    }; 
})(); 

Answer 2

Podejrzewam, że może - oto przykład Singleton:

The singleton design pattern in JavaScript

Answer 3

@jamting:

The singleton design pattern in JavaScript

Oh my god. Nie wiem co powiedzieć.

To OP: tak, oczywiście możesz w pewnym sensie, ale niektóre wzorce, jak przyzwyczaiłeś się do nich, nie są tak widoczne, jak w Javie. Na przykład, Singleton musiałby być jedynie przedmiotem:

var singleton = { 
    sayHello: function() { 
     alert("Hello!") 
    } 
}; 

Wikipedia ma przykład Factory w JS.

Answer 4

Oczywiście, że mogą. Oto książka na ten temat:
Pro JavaScript Design Patterns
Oto przykład wzorca fabryczne:
Factory pattern in Javascript

Answer 5

Nickolay poruszył, ale wzorce projektowe nie są zgodne między językami, które drastyczne różnice. Czytałem wcześniej (i zgadzam się z), że wzorzec projektu często jest oznaką brakujących funkcji w języku.

Jako doskonały przykład, „Fabryka” wzór jest zupełnie niepotrzebne w niektórych językach Ruby jako przykład mam na myśli (bo budowa obiektu jest tylko metoda na przykład klasa):

# create a factory for MyObject 
my_factory = MyObject 
instance_1 = my_factory.new 

# change the factory to another class 
my_factory = MyOtherObject 
instance_2 = my_factory.new 

Zawsze, gdy stosujesz wzorzec projektowy do innego języka, niż został pierwotnie opracowany, upewnij się, że rozważasz, czy jest to NAPRAWDĘ konieczne i jakie sposoby możesz ulepszyć dzięki nowym dostępnym funkcjom językowym. Wzorce projektowe są tylko wskazówką, należy zawsze zastanowić się, czy zamierzone użycie naprawdę wymaga wzoru, lub czy można go w lepszy sposób adoptować w twoim przypadku.

Answer 6

Niedawno używane Bernie's Better Animation Class sprawia, że ​​szerokie wykorzystanie Wzorca Strategy projektu. Bernie wykonuje świetną robotę opisując, dlaczego należy stosować Wzór Strategiczny, ale niestety nie wyjaśnia dokładnie, jak działa kod. Z drugiej strony, korzystając z odwołania do wzorców projektowych, zapoznaj się z kodem i komentarzami w pliku animator.js, aby uzyskać dobry przykład użycia wzorca strategii.

Przykład:

// This object controls the progress of the animation 
ex1 = new Animator(); 
// The Animator's subjects define its behaviour 
ex1.addSubject(updateButton); 
function updateButton(value) { 
    $('ex1Button').innerHTML = "Progress: " + Math.round(value * 100) + "%"; 
} 

// now click below: each click to the button calls ex1.toggle() 

Answer 7

Chciałbym dodać tu co ja badali jako grupa z dyskusji na temat wzorców projektowych zarówno w C# i JavaScript. To, co mi się wydaje podczas spotkania, to to, że facet z C# pisze kody w JavaScript i to samo dla faceta JavaScript. Po opuszczeniu spotkania próbuję dowiedzieć się więcej w domu i robić blogi tutaj http://tech.wowkhmer.com/category/Design-Patterns.aspx zarówno dla języka C#, jak i JavaScript.

Answer 8

Listen do Justina Diaza mówiący o wzorze dla Javascript. Dyskusja opiera się również na wspomnianej wyżej książce Pro Javascript Techniques. Rozmowa jest około 45 min w Google I/O

Answer 9

What is this practice called in JavaScript?

To samo wezwanie Pattern Design. Nigdy go nie widziałem, dopóki nie zacząłem JavaScriptingu.

Answer 10

Jest dobry darmo rezerwuj przez Addy Osmani, wprowadzenie wzorców projektowych javascript: Essential JavaScript Design Patterns For Beginners, Volume 1