2011-08-04 8 views
6

Tworzę rodzaj biblioteki opartej na mediatorze dla mojej pracy. Tworzymy wiele aplikacji, więc chciałem coś, co można łatwo pobrać i zmodyfikować w zależności od aplikacji. Chcę też, aby tworzenie "widżetów" (z braku lepszego terminu) było łatwe i łatwe do usunięcia bez obawy o złamanie czegokolwiek. Wiele z tych aplikacji, które tworzymy, może być również rozszerzanych przez zewnętrznych programistów tworzących aplikacje lub widżety dla aplikacji.Wzorzec mediatora w JavaScript Pytania

W ten sposób natknąłem się na wzór mediatora. Napisałem coś, co działa tak:

//Extend 
Core.extend('widget',function(params){ 
    alert(params.message); 
}); 

//Load it 
Core.load('widget',{message:'Hello World'}); 

//Remove it 
Core.remove('widget'); 

Mam 3 pytania Tho:

  1. Jak zrobić/powinieneś zająć się manipulacji DOM w ten deseń z JavaScript? Nie chcę, aby programiści mieszali się z DOM poza widżetem.

  2. Jak/powinieneś radzić sobie z żądaniami AJAX. Czy w ogóle możesz coś zrobić? Należy po prostu zaoferować wywołanie AJAX/JSONP w bibliotece (Core w tym przykładzie).

  3. Moje największe pytanie, jak właściwie wchodzisz w interakcję z innymi widżetami? Nie chcę ścisłej pary (oczywiście), ale nie rozumiem, jak wchodziłeś w interakcje z innym widgetem. Na przykład, powiedzmy, że masz pole tekstowe i po przesłaniu wysyła je do bazy danych. W jaki sposób inny widget można nazwać widżetem "osi czasu", teraz, gdy został przesłany, a następnie zaktualizować oś czasu za pomocą tekstu z widżetu pola tekstowego?

=== UPDATE ===

skończyło się na piśmie, to:

http://oscargodson.github.com/Core.js/

+0

To jest masywne pytanie. Czy sprawdziłeś, jak implementowane są widżety YUI? –

+0

Twoim największym pytaniem jest to, co chciałbym wiedzieć. – hamahama

+0

@Whyzee Sprawdź http://oscargodson.github.com/Core.js/ –

Odpowiedz

3

Widgety interakcję z widgetami: Właśnie zakończył budowę to kilka dni temu. Przejrzałem sposób, w jaki go zaimplementowałeś, i oto kilka dodatkowych pomysłów dla Ciebie.

Zaprojektowany system push jest bardzo podobny do systemu zdarzeń DOM jQuery, w którym można emitować i odbierać dowolne zdarzenia. Używałem tego systemu, aby opracować oddzielone od siebie widżety, ale znalazłem je dość niecierpliwe, ponieważ ostatecznie "wypychania" (zdarzenia, emisje, cokolwiek) są poza kontekstem - jak w przypadku słuchaczy nie mają pojęcia, czy to nawet znajduje się w zakresie tego, co chcieli, dopóki nie będą przesłuchiwać wydarzenia.

Rozważmy na przykład, czy każdy element interfejsu użytkownika na stronie internetowej był widgetem w systemie. Na jednej stronie byłoby łatwo 30+. Jeśli każdy miał nacisnąć "załadowany" komunikat, drugi 29 musi go odebrać. Ponadto, jak wspomniano, deweloperzy stron trzecich będą opracowywać dla tego systemu. Następnie obciąża je, aby odfiltrować wiadomości, których nie chcą odbierać.

Podejście, które podjąłem w moim najnowszym systemie komunikacji z widżetami, to podejście, które nazywam podejściem "pubstring"/"substring" (i prawdę mówiąc, jestem pewien, że ktoś inny wpadł na ten pomysł przede mną i ma fajną brzmiącą nazwę). Zasadniczo, gdy widżet "wypycha", to naciśnięcie jest przekształcane w ciąg znaków, który zawiera: dziedzinę (kontekst), typ widżetu, konkretny identyfikator widgetu, niezależnie od tego, jaki jest i konkretna wiadomość.

Powiedzmy na przykład o widżecie z ID 45, wpisz "tweet-list", w sferze "custom" wypycha wiadomość "załadowany". Łańcuch pubu wyświetli: custom.tweet-list.45.loaded.

Po złożeniu subskrypcji są one wprowadzane za pośrednictwem tabeli mieszania, która może opcjonalnie zawierać wartości dla 4 atrybutów (można łatwo dodać więcej poza dziedziną/typ/identyfikator/msg). Słuchanie byłby wtedy jak:

listen({ realm: 'custom', type: 'whatever' }, f); // (where 'f' is a function)

Część słuchacz Twojego ram mogą okazać że tabeli mieszania w „fragmentu”, który byłby wyrażenie regularne wyrażając filtry, dla których stanowi on:

custom\.whatever\.[^\.]+\.[^\.]+

to wyrażenie regularne jest przechowywana jako skompilowanego wyrażenia regularnego do jakiegoś ukrytego tablicy ...

__subscriptions.push(new RegExp(subString));

Wtedy, gdy coś zostało pchnięte (np. opublikowany) szkielet w zasadzie pętli przez tablicę __subscriptions, odpala .test każdego zapisanego podString (regex) i wykonuje wywołanie zwrotne dla tego podString, jeśli pasuje.

Korzystanie z tego systemu nieograniczone filtrowane słuchaczy mogą być stosowane i słuchacze wiedzą, że otrzymywanie powiadomień tylko dla kontekstów oni są zainteresowani

Przykłady:.

// Listen for all messages by widget ID #99 
listen({ id: 99 } ,f); 

// Listen for all messages by widgets in realm clientB 
listen({ realm: 'clientB' }, f); 

// Listen for the data-received push of widgets whose type is tweet-list 
listen({ type: 'tweet-list', message: 'data-received' }, f); 

Ponieważ regex jest naprawdę tylko konkatenacja, regex może być również zawarty w filtrze.

// Listen for any data- message 
listen({ message: 'data-[^\.]+' }, f); 

Piękno tego systemu jest to, że można nadal zachować swój aktualny interfejs do „zachować rzeczy proste” i po prostu sprawdzić na sznurku lub tabeli mieszania dla argument[0]. Innymi słowy ..

// This 
listen('loaded', f); 

// Could be equivalent to this on the backend: 
listen({ message: 'loaded' }, f); 

Wiem, że to było długie, ale mam nadzieję, że dało ci to kilka pomysłów.

+0

** Dziękuję za odpowiedź. ** Właśnie czytam Jacka Lawsona [Mediator.js] (http://thejacklawson.com/2011/06/mediatory-for-modularyzowane-asynchroniczne-programowanie-w-javascript /), które można zobaczyć [plik 300-liniowy js na github] (https://github.com/ajacksified/Mediator.js/blob /master/mediator.js). Czy mógłbyś przekazać mi swoje przemyślenia na ten temat? Próbuję zaplanować lepszy sposób obsługi 4-różnych bąbelków, pod którymi można klikać 8-10 różnych zdarzeń, co wydaje się (moim zdaniem) opanować proste podejście "delegowania zdarzeń". Mam nadzieję, że możesz wyrazić swoją opinię na temat tego linku. – Ricalsin