12
votes

Principe d'inversion de dépendance en JavaScript

Est-ce que quelqu'un est capable d'illustrer Principe d'inversion de dépendance dans Javascript JQuery?

qui mettrait en évidence et expliquer ces 2 points:

a. Les modules de haut niveau ne doivent pas dépendre des modules de bas niveau. Les deux doivent dépendre des abstractions.

b. Les abstractions ne doivent pas dépendre des détails. Les détails doivent dépendre des abstractions.

Quelles sont les abstractions ou les modules de niveau élevé / bas?

Cela aidera vraiment à ma compréhension, merci!


5 commentaires

Ne plonge pas pour " Traitement de l'image numérique "?


@Nishant: Peut-être que si vous étiez dans le domaine de la photographie ... dans le développement de logiciels Agile moderne, il représente le principe de dépendance d'inversion.


@Domenic, @nishant: Je suppose que la meilleure chose à faire est d'ajouter une étiquette de non-acronyme pour préciser ce que cette question concerne.


FreshbrewedCode.com/Deekgreer/2012/01 / 22 / ...


Vous pouvez utiliser inversify.io


4 Réponses :


35
votes

Je dirais que la DIP s'applique à JavaScript de la même manière que celle qui s'applique dans la plupart des langages de programmation, mais vous devez être conscient du rôle de dactylographie du canard. Faisons un exemple pour voir ce que je veux dire ...

Disons que je veux contacter le serveur pour certaines données. Sans appliquer de plongée, cela pourrait ressembler à: p>

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


3 commentaires

Merci pour la réponse longue mais complète, je vais prendre un peu de temps pour digérer cela. très apprécié +1.


En outre, v. Bon exemple où le détail est complètement dépouillé de la fonction abstraite, les deux concepts que je n'étais pas sûr avant, mais peut s'identifier avec maintenant :)


Cela serait-il également un bon exemple du principe ouvert / fermé connexe?



0
votes

Principe d'inversion de dépendance dans Javascript JQuery

Il n'y a aucune connexion entre DI et JQuery. DI est tout sur la structure et l'assemblage d'applications des composants. JQuery est une enveloppe pratique autour du DOM, rien de plus, il n'a aucune structure ni de composants.

Vous pouvez utiliser DI pour assembler votre application JavaScript, mais cela ressemblerait beaucoup à la même chose que vous utilisez JQuery ou non.


1 commentaires

Alexey, j'ai voté parce qu'il s'agit d'une note importante à considérer. Cependant, dans JavaScript, DI & IOO s'écarte radicalement à partir de la norme que JS ne prend pas en charge les interfaces. Entre mon exemple et AMD (tel que le module natif-chargeur), DI est applicable. Ainsi, DIP a été implémenté dans JQuery et RAW-JavaScript à l'aide d'un adaptateur. La question la plus importante à poser est: «Dans quel contexte le plan de BCM planifie-t-il de la mise en œuvre par rapport à JQuery?». Si c'est strictement jQuery, nous devrions tous prendre note de votre réponse (et peu importe); Sinon, il existe plusieurs possibilités. Thx pour noter sur la DI de JQ.



6
votes

EDIT:

Ceci indique l'utilisation de la plongée dans le javascript brut et un exemple moins complet jQuery. Cependant, la description suivante peut être facilement appliquée à JQuery. Voir exemple jQuery en bas.

Le meilleur moyen est de tirer parti du "motif de l'adaptateur" - également appelé "wrapper".

un adaptateur est essentiellement un moyen de Envelopper un objet ou un module de manière à fournir la même interface cohérente à ses dépendants . De cette façon, la classe dépendante (généralement une classe de niveau supérieur de niveau supérieur) peut facilement échanger des modules du même type.

Un exemple de ce serait un niveau élevé (ou supra ) module dépend des modules Geo / Mapping.

permet d'analyser cela. Si notre module supra utilise déjà des googlemaps, mais la direction décide que son moins cher à partir avec des feuilles de déplacement - nous ne voulons pas avoir à réécrire chaque appel de méthode de gmap.showmap (utilisateur, letlong) à < Code> Leaflet.Render (Apisecret, Latlong, utilisateur) , et al. Ce serait un cauchemar de devoir porter notre application d'un cadre à une autre de cette façon.

Ce que nous voulons: nous aimerions une "wrapper" qui fournit la même interface cohérente au module supra - et faites ceci pour chaque module modulaire de niveau inférieur (ou infra module).

Voici un exemple simple: xxx

Notez que peu importe le type de module de niveau inférieur "écrire" que nous utilisons (dans ce cas infra1 et infra2 ), nous n'avons pas à réécrire de la mise en œuvre de notre module de haut niveau, supra . En effet, le trempette tire parti de deux principes de conception de logiciels différents: "COI" (inversion de contrôle) et "DI" (injection de dépendance).

La meilleure analogie que j'ai rencontrée est la photo montrée Ci-dessous.

Entrez la description de l'image ici Chaque source électrique repose sur une interface spécifique pour les types de choses qui doivent se brancher.

jQuery Description:

Ce modèle peut être facilement appliqué à l'utilisation de cadres tels que JQuery. Un exemple serait la simple poignée de la requête DOM. Nous pouvons utiliser Tremper pour permettre à Call-couplage de sorte que si nous décidons jamais de changer de frameworks ou de s'appuyer sur des méthodes de requête DOM-Native, la maintenance est facile: xxx

évidemment, cet exemple aurait besoin d'une magnitude de plus de fonctionnalités pour être pratiques, mais j'espère que cela obtient le point à travers.

Fondamentalement, les différences entre un adaptateur et une façade deviennent un peu triviales. Dans une façade, vous regardez probablement un module unique qui enveloppe une API ou un autre module; ATTENDU QUE un adaptateur crée une API de façade cohérente pour chacun de ses modules et exploite cette technique pour éviter le couplage serré.

La plupart des carnets de modèles de conception JavaScript vont sur le motif de l'adaptateur; Celui qui passe spécifiquement sur un «adaptateur JQuery» est apprendre les modèles de conception JavaScript par addy osmani publié par O'Reilly - ici . Cependant, je conseille également de regarder dans les modèles de conception pro JavaScript par Dustin Diaz et Ross Harbe Publié par apress - Vérifiez-le . Néanmoins, je pense qu'il est important de comprendre le contexte dans lequel nous prévoyons de mettre en œuvre la plongée par rapport à jQuery.

J'espère que cela aidera à clarifier les choses :)


0 commentaires

1
votes

Voici ma compréhension et j'apprécierais les commentaires. Le test clé est «qui a le pouvoir».

dans une implémentation traditionnelle forte> p>

Code de niveau élevé (HL) Code -> Code de niveau bas (LL). P>

donc par exemple p >

code ll em> p> xxx pré>

code hl em> p> xxx pré> Ici le code LL a le pouvoir. Changez le nom de la fonction LL par exemple, les pauses de code HL. P>

avec inversion de dépendance strong> p>

Code de haut niveau (HL) Code -> Interface de service HL / LL

où le code HL est également propriétaire de l'interface de service. Donc par exemple p>

code hl em> p> xxx pré>

code ll: em> p>

HLdoOutputSI.register('alert', function(text)  { alert(message); });
HLdoOutputSI.register('console', function(text) { console.log(message); }


0 commentaires