Dipendenza inversione di principio in JavaScript

Question

C'è qualcuno in grado di illustrare Dipendenza inversione di principio in JavaScript jQuery?

Che vorrei sottolineare e spiegare questi 2 punti:

A.Di alto livello i moduli non deve dipendere dal basso livello dei moduli.Entrambi dovrebbero dipendere da astrazioni.

B.Le astrazioni non dovrebbe dipendere dettagli.Dettagli dovrebbe dipendere astrazioni.

Quali sono astrazioni o alto/basso livello di moduli?

Questo sarà di grande aiuto nella mia comprensione, grazie!

Answer 1

Direi che il DIP si applica in JavaScript più o meno allo stesso modo in cui si applica nella maggior parte dei linguaggi di programmazione, ma si deve essere consapevoli del ruolo di battitura anatra. Facciamo un esempio per capire cosa intendo ...

dire Let voglio contattare il server per un po 'di dati. Senza applicare DIP, questa potrebbe apparire come:

$.get("/address/to/data", function (data) {
    $("#thingy1").text(data.property1);
    $("#thingy2").text(data.property2);
});

Con DIP, potrei codice invece scrivere come

fillFromServer("/address/to/data", thingyView);

dove il fillFromServer astrazione può per il caso particolare in cui vogliamo usare Ajax di jQuery essere implementato come

function fillFromServer(url, view) {
    $.get(url, function (data) {
        view.setValues(data);
    });
}

e il view astrazione può essere implementato per il caso particolare di una vista basata su elementi con ID thingy1 e thingy2 il

var thingyView = {
    setValues: function (data) {
        $("#thingy1").text(data.property1);
        $("#thingy2").text(data.property2);
    }
};

Principio A:

• fillFromServer frazione in un modulo di basso livello, manipolazione come fa l'interazione di basso livello tra il server e la vista. Qualcosa di simile, per esempio, un oggetto settingsUpdater sarebbe parte di un modulo di livello più alto, e sarebbe contare su l'astrazione fillFromServer --- non sui dettagli di esso, che sono in questo caso implementato tramite jQuery.
• Similmente, fillFromServer non dipende specificità degli elementi DOM ei relativi ID per svolgere il proprio lavoro; invece, dipende dalla astrazione di un view, che per i suoi scopi è qualsiasi tipo che ha un metodo setValues. (Questo è ciò che si intende per "duck typing".)

Principio B:

Questo è un po 'meno facile da vedere in JavaScript, con la sua anatra tipizzazione; in particolare, qualcosa come view non deriva da (cioè dipendono) qualche tipo viewInterface. Ma possiamo dire che il nostro caso particolare, il thingyView, è un dettaglio che "dipende" dal view astrazione.

Realisticamente, è "dipende" sul fatto che i chiamanti capire che tipo di metodi dovrebbe essere chiamato, vale a dire che i chiamanti sono consapevoli di astrazione appropriato. Nei soliti linguaggi orientati agli oggetti, è più facile vedere la dipendenza di thingyView esplicitamente l'astrazione stessa. In tali lingue, l'astrazione sarebbe incarnato in un'interfaccia (ad esempio, IView in C # o Viewable in Java), e la dipendenza esplicita è tramite l'ereditarietà (class ThingyView : IView o class ThingyView implements Viewable). vale lo stesso sentimento, però.

---

Perché è questo freddo? Beh, diciamo che un giorno ho bisogno di mettere i dati del server in caselle di testo con ID text1 e text2 invece di <span />s con ID thingy1 e thingy2. Inoltre, diciamo che questo codice è stato chiamato molto spesso e test di efficienza ha rivelato che le prestazioni critiche si stava perdendo attraverso l'utilizzo di jQuery. Potrei poi basta creare una nuova "applicazione" di astrazione view, in questo modo:

var textViewNoJQuery = {
   setValues: function (data) {
        document.getElementById("text1").value = data.property1;
        document.getElementById("text2").value = data.property2;
   }
};

Poi ho iniettare questa particolare istanza del astrazione vista nel mio fillFromServer astrazione:

fillFromServer("/address/to/data", textViewNoJQuery);

Ciò ha richiesto non modifiche al codice fillFromServer, perché dipendeva solo dalla astrazione di un view con un metodo setValues, e non sui dettagli del DOM e il modo in cui accedervi. Non solo questo soddisfacente in quanto siamo in grado di riutilizzare il codice, indica anche che abbiamo nettamente separato le nostre preoccupazioni e ha creato molto codice a prova di futuro.

Answer 2

EDIT:

Questo mostra l'utilizzo di TUFFO nelle materie di JavaScript e meno completo jQuery esempio.Tuttavia, la seguente descrizione può essere facilmente applicato a jQuery.Vedere jQuery esempio in basso.

Il modo migliore è quello di prendere il vantaggio della "Scheda Modello", anche un "wrapper".

Un Adattatore è fondamentalmente un modo di avvolgere un oggetto o di un modulo in modo che fornisce lo stesso interfaccia coerente per la sua dipendenti.In questo modo, il dipendente di classe (di solito un di livello superiore classe) possono scambiare facilmente i moduli dello stesso tipo.

Un esempio di questo potrebbe essere un ad alto livello (o supra modulo che dipende dalla Geo/Mappatura dei moduli.

Consente di analizzare il presente.Se il nostro supra modulo è già in uso in GoogleMaps, ma poi decide di gestione più economico per andare con LeafletMaps -- non vogliamo riscrivere ogni chiamata di metodo da gMap.showMap(user, latLong) per leaflet.render(apiSecret,latLong, user), et al.Questo sarebbe un incubo di avere alla porta della nostra applicazione da un quadro ad un altro in questo modo.

Quello che vogliamo:Ci vorrebbe un "wrapper" che fornisce lo stesso coerentemente interfaccia la supra modulo -- e fare questo per ogni inferiore a livello di modulo (o infra modulo).

Qui è un variare semplice esempio:

var infra1 = (function(){
    function alertMessage(message){
        alert(message);
    }

    return {
        notify: alertMessage
    };
})();

var infra2 = (function(){
    function logMessage(message){
        console.log(message);
    }

    return {
        notify: logMessage
    };
})();


var Supra = function(writer){
    var notifier = writer;
    function writeMessage(msg){
        notifier.notify(msg);
    }

    this.writeNotification = writeMessage;
};


var supra;

supra = new Supra(infra1);
supra.writeNotification('This is a message');

supra = new Supra(infra2);
supra.writeNotification('This is a message');

Si noti che non importa che tipo di livello inferiore del modulo di "scrivere" possiamo usare (in questo caso infra1 e infra2), non dobbiamo riscrivere qualsiasi di attuazione del nostro alto livello di modulo, Supra.Questo perché DIP prende vantaggio di due Software diversi Principi di Progettazione:"Cio" (Inversion of Control) e "DI" (Dependency Injection).

La migliore analogia che ho incontrato è l'immagine mostrata di seguito.

Ogni sorgente elettrica si basa su un interfaccia specifiche per i tipi di cose che hanno bisogno di inserire in esso.

jQuery Descrizione:

Questo modello può essere facilmente applicato all'utilizzo di framework come jQuery.Un esempio potrebbe essere il semplice DOM-Query di gestire.Siamo in grado di utilizzare i DIP per consentire disaccoppiamento in modo che se mai dovessimo decidere di passare quadri o fare affidamento sui nativi DOM-metodi di Query, la manutenzione è facile:

var jQ = (function($){

    return {
        getElement: $
    };
})(jQuery);

var nativeModule = (function(){

    return {
        getElement: document.querySelector
    };
})();


var SupraDOMQuery = function(api){
    var helper = api, thus = this;

    function queryDOM(selector){
        el = helper.getElement(selector);
        return thus;
    }

    this.get = queryDOM;
};


var DOM;

DOM = new SupraDOMQuery(jQ);
DOM.get('#id.class');

DOM = new SupraDOMQuery(nativeModule);
DOM.get('#id.class');

Ovviamente, in questo esempio, avrebbe bisogno di grandezze di più funzionalità, al fine di essere pratico, ma spero che si ottiene il punto attraverso.

In sostanza, le differenze tra una Scheda e una Facciata diventato un po ' banale.In una Facciata, si sta guardando probabilmente un singolo modulo che avvolge un API o un altro modulo;considerando che un Adattatore crea un coerente Facciata API per ognuno dei suoi moduli, e sfrutta questa tecnica per ovviare a stretto accoppiamento.

La maggior parte di JavaScript Design Pattern libri sulla Scheda Modello;quello che in particolare va oltre un 'jQuery Adattatore' è Imparare JavaScript Modelli Di Progettazione da Addy Osmani pubblicato da O'Reilly -- qui.Tuttavia, ho anche consigliare cercando in Pro JavaScript Modelli Di Progettazione da Dustin Diaz e Ross Harmes pubblicato da Apress -- check it out.Tuttavia, penso che sia importante capire il contesto in cui abbiamo in programma di implementare TUFFO in relazione a jQuery.

Spero che questo aiuta a chiarire le cose :)

Answer 3

Trovato alcune illustrazioni utili qui .

Answer 4

Dipendenza principio di inversione in JavaScript jQuery

Non c'è nessun qualsiasi collegamento tra DI e jQuery. DI è tutto la struttura e l'applicazione di montaggio da compoents. jQuery è un wrapper a portata di mano intorno DOM, niente di più, non ha alcuna struttura o componenti.

È possibile utilizzare DI all'assemblaggio delle applicazioni JavaScript, ma sarebbe sembra molto lo stesso, non importa cosa si usa jQuery o meno.