2013-04-16 10 views
7

omawiają one koncepcję użycia wzoru elewacji jako piaskownicy podczas tworzenia aplikacji JavaScript o dużej skali, w celu oddzielenia aplikacji od bazowych bibliotek podstawowych.Abonowanie jQuery

To oddzielenie umożliwiłoby teoretycznie wyłączenie biblioteki bazowej bez konieczności przepisywania modułów aplikacji. Jednak w praktyce wydaje się to trudniejsze do wdrożenia.

Istnieją konkretne implementacje tej proponowanej architektury, takie jak AuraJS. Jednak patrząc na źródło wydaje się, że sandbox nadal ma nieszczelne abstrakcje, zwracając obiekty jQuery z niektórych swoich metod.

Nie interesuje mnie specjalnie AuraJS, ale bardziej ogólna koncepcja próbowania abstrakcji biblioteki jak jQuery bez utraty tak dużej funkcjonalności.

Jako przykład powiedzmy, że moja fasada/piaskownica ma metodę domeny .find(selector). Mogę myśleć o 3 opcje co to może powrócić:

  1. jQuery obiekt - To będzie przeciekać jQuery się do modułów spożywających.

  2. Surowy dom element - Utrata funkcjonalności, nikt tak naprawdę nie chce z tym pracować! Bez łańcuchów.

  3. Niestandardowe opakowanie podobne do jQuery - Może być dość skomplikowane, ale wydaje się idealnym rozwiązaniem.

Więc moje pytanie brzmi, jaki sposób abstrakcyjny jak biblioteka jQuery, nie tracąc zbyt wiele funkcji, takich, które mogą być zastąpione w pewnym momencie w przyszłości, przy minimalnym wysiłku?

+0

jQuery jest dość zawiłe wewnętrznie, tworząc abstrakcję taką, że mogłaby zostać zastąpiona przez dowolną (lub nawet jedną) inną bibliotekę wydaje się niezwykle trudna. I o co chodzi? Jeśli uważasz, że możesz chcieć zamienić biblioteki w przyszłości, być może nie powinieneś używać tego, z którego korzystasz w pierwszej kolejności. – RobG

+0

@RobG Zgadzam się, wydaje się to trudne, dlatego właśnie zadaję pytanie. Jednak o wiele mądrzejsi ludzie niż ja przedstawiają te propozycje i podają ich uzasadnione powody (patrz linki do rozmów). –

+0

W architekturze Mikołaja, jeśli zmienisz bibliotekę podstawową, będziesz musiał ponownie napisać rdzeń aplikacji. Gdy znajdziesz się powyżej rdzenia, nie piszesz już kodu, który używa biblioteki. Jeśli używasz jQuery, osoba pisząca moduł nie pisze ** żadnych ** jQuery. – RobG

Odpowiedz

0

Myślę, że pytasz o pisanie kodu bardziej modularnego, ale jquery nie jest dobrym przykładem.

Asynchronous Moduł Definicja http://addyosmani.com/writing-modular-js/

+0

Zobacz linki do rozmów, które podałem. To więcej niż zwykłe pisanie kodu modułowego. –

0

Oto bardzo prosty przykład z wykorzystaniem modułów w architekturze:

<!DOCTYPE html> 
<title>Module play</title> 
<body> 
<script> 

// myCore provides all functionality required by modules 
// Could use a library in here 
var myCore = { 

    getContainer: function() { 
    // code in here to find a suitable container in which to put widgets 
    // This is where different client capabilities will be tested to ensure the 
    // widget behaves in it's user agent context - desktop, phone, tablet, pad, etc. 

    // very simple shortcut 
    return { 
      element: document.body, 

      // This function could use a general purpose library 
      add: function(widget) { 
       this.element.appendChild(widget.getElement()); 
      } 
    }; 

    }, 

    // This function could use a general purpose library 
    getNewWidget: function() { 
    var element = document.createElement('div'); 

    return { 

     getElement: function() { 
     return element; 
     }, 

     display: function(text) { 

     // Tightly couple to itself or not? 
     this.getElement().innerHTML = '<em>' + text + '</em>'; 

     // or 
     element.innerHTML = '<em>' + text + '</em>'; 
     } 
    } 
    } 
}; 

// Missing sandbox layer... 

// Add a module - only uses myCore API (access should be controlled by 
// the sandbox), does not deal with underlying library or host objects 
(function() { 

    // Get a container to add a widget too 
    var container = myCore.getContainer(); 

    // Create a widget 
    var widget = myCore.getNewWidget(); 

    // Add the widget to the container 
    container.add(widget); 

    // Give something to the widget to display 
    widget.display('Hello World'); 

}()); 

</script> 
</body> 

dzięki czemu można zobaczyć, że na poziomie modułu, nie dbają o gospodarzu środowiska lub biblioteki bazowej, po prostu piszesz ECMAScript. Możesz stać się naprawdę defensywny i robić rzeczy takie jak:

(function() { 
    var container, widget; 

    if (!myCore) return; 

    if (myCore.getContainer) { // Some would include an isCallable test too 

     container = myCore.getContainer(); 
    } 

    // getWidget could be a method of container instead so that 
    // everything you need is either a method or property of container 
    // or widget 
    if (myCore.getWidget) { 
     widget = myCore.getWidget(); 
    } 

    ... 
} 

itd., Więc wszystko jest sprawdzane i testowane. Pominięto obsługę błędów, ale mam nadzieję, że przykład jest wystarczający.

+0

Dzięki za tę szczegółową odpowiedź, widzę, skąd przybywasz. Wygląda jednak na to, że zasadniczo przesuwasz funkcjonalność widgetu i zachowanie do rdzenia, pozostawiając rzeczywiste moduły jako naprawdę głupich konsumentów. Sądzę, że jest to zbyt restrykcyjne i nie sądzę, że byłoby to skalowalne dla aplikacji korporacyjnej. Rozumiem, że rdzeń powinien dostarczać zestawy ** funkcjonalności ** (tj. Dom manipulacja/ajax/mediator), które ukrywają implementacje biblioteki podstawowej i są następnie odsłonięte przez piaskownicę, która działa jako spójna warstwa "kleju" pomiędzy modułami i rdzeń. –

+0

Zobacz slajdy 40/51/66 z przemówienia Mikołaja. Nic nie wskazuje na to, że moduły nie mogą sterować domem w ich własnym zakresie. Aby to zrobić, wymagana jest pewna forma "usługi" manipulacji domem z core/sandbox. Zobacz slajdy 105-109 przemówienia Addy na przykład o tym, co mam na myśli. Zasadniczo sandbox powinien zapewniać zestaw "usług" do modułów. Jest to wartość zwracana (jeśli występuje) tych zgłoszeń serwisowych, które trudno mi streścić. –

+0

Sprawdź również źródło [AuraJS] (https://github.com/aurajs/aura/tree/master/lib) (implementacja architektury Nichi Addy). Zobaczysz, jak piaskownice są tworzone z base.js i co widzę jako nieszczelne abstrakcje w tym, co jest zwracane z metod sandbox (głównie obiektów jQuery). Dziękuję za poświęcony czas! –