Vorwort
Die Verwendung von Knoten zum trennen vorderen und hinteren Endentwicklungsmodell bringt einige Leistungs- und Entwicklungsprozessvorteile, steht aber auch mit vielen Herausforderungen. Nach der komplexen Geschäfts- und technischen Architektur von Taobao muss sich das Backend auf Java verlassen, um die Infrastruktur aufzubauen und relevante Geschäftsoberflächen für das Front-End bereitzustellen. Eine der wichtigsten Knotenaufgaben in der gesamten Umgebung ist es, diese Geschäftsoberflächen zu stellten, um die Integration von Daten in das Front-End (Knotenseite und die Browser-Seite) für die Seitenwiedergabe zu erleichtern. Wie man in der Agenturarbeit gute Arbeit leistet, sodass nach der Vorder- und Rückendeentwicklung immer noch nahtlos mit dem Prozess verbunden werden kann, ist ein Problem, das wir berücksichtigen müssen. In diesem Artikel werden dieses Problem erörtert und Lösungen vorgeschlagen.
Da das Backend eine Vielzahl von Schnittstellen bietet, haben Entwickler möglicherweise auch eine Vielzahl von Möglichkeiten, um Node-Side-Code zu schreiben, um auf diese Schnittstellen zuzugreifen. Wenn wir keine einheitliche Architekturverarbeitung in Methoden und Verwendung von Schnittstellenzugriffszugriffsgründen und -nutzung durchführen, werden die folgenden Probleme bewirkt:
1. Jeder Entwickler verwendet seinen eigenen Codestil, um Schnittstellenzugriffscode zu schreiben, was zu Verwirrung im Projektverzeichnis und im Codierungsstil führt, was es relativ schwierig macht, es zu warten.
2. Jeder Entwickler schreibt seine eigene Scheindatenmethode. Nach Abschluss der Entwicklung muss er den Code manuell ändern, um das Schein zu entfernen.
3. Um das Wechsel verschiedener Umgebungen der Schnittstelle (täglich, vorab, online) zu verwirklichen, kann jeder Entwickler einige Konfigurationsdateien beibehalten.
4. Die Datenschnittstelle kann nicht einfach von verschiedenen Geschäftsmodellen wiederverwendet werden.
5. Die Beschreibungsvereinbarung für die Datenschnittstelle ist in jeder Ecke des Codes verstreut, was möglicherweise nicht mit den vom Backend -Personal vereinbarten Schnittstellendokumenten übereinstimmt.
6. Nach der Verteilung des gesamten Projekts sind die Kosten für die Verbindung von Schnittstellen oder die Prüfung der Regression immer noch sehr hoch und müssen jeden Schnittstellenanbieter und Benutzer einbeziehen.
Wir hoffen daher, dass ein solcher Rahmen, der den Mechanismus dieses Rahmens verwendet, um alle externen Schnittstellen zu beschreiben, die von Ingenieurprojekten abhängig sind, diese auf einheitliche Weise verwalten und flexible Schnittstellenmodellierung und Anrufmethoden sowie eine bequeme Online-Umgebung und Produktionsumgebungsschaltmethoden bereitstellen können, um die Entwicklung der Front und der Back-End-Entwicklung und Entwicklung nahtlos zu kombinieren. ModelProxy ist ein leichtes Rahmen, das solchen Anforderungen entspricht. Es ist eine der Kernkomponenten des Midway -Frameworks und kann auch allein verwendet werden. Die Verwendung von ModellProxy kann die folgenden Vorteile bringen:
1. Verschiedene Entwickler haben einheitliche Methoden für den Zugriffscode für einheitliche Schnittstellen, klare Bedeutung und reduzieren Wartungsschwierigkeiten.
2. Das Framework nimmt den Factory + Singleton -Modus an, um mehrere Multiplexing der Schnittstellenkonfiguration gleichzeitig zu realisieren. Und Entwickler können ihre eigenen Geschäftsmodelle (Abhängigkeitsinjektion) anpassen und zusammenstellen.
3. Es kann problemlos online-, tägliche und vor dem Ausstellungsumgebungen wechseln.
4. Eingebaute Mock-Motoren wie Flussmotoren und MockJs, die Scheindaten liefern, sind sehr bequem.
5. Verwenden Sie Interface -Konfigurationsdateien, um die Beschreibungen der Schnittstellenabhängigkeit einheitlich zu verwalten, um nicht in verschiedenen Codes verstreut zu werden.
6. Unterstützt die Modellfreigabe auf der Browserseite, mit der Front-End-Daten rendern. Der gesamte Proxy -Prozess ist für den Browser transparent.
7. Die Grenzflächenkonfigurationsdatei selbst ist ein strukturiertes Beschreibungsdokument, und das Dokument kann automatisch mit der Flusswerkzeugsammlung generiert werden. Es kann auch für zugehörige Automatisierungsschnittstellenprüfung verwendet werden, um im gesamten Entwicklungsprozess eine geschlossene Schleife zu bilden.
ModellProxy -Arbeitsprinzip -Diagramm und verwandtes Entwicklungsprozessdiagramm
In der obigen Abbildung muss der Entwickler zunächst alle Abhängigkeiten der Backend -Schnittstelle im Projekt beschreiben und an die Konfigurationsdatei interface.json gemäß dem angegebenen JSON -Format schreiben. Bei Bedarf muss eine Regeldatei für jede Schnittstelle geschrieben werden, dh im Teil der Schnittstelle Regeln Teil der Abbildung. Diese Regeldatei wird verwendet, um Daten während der Entwicklungsphase zu verspotteten oder das Flusswerkzeugsatz zu verwenden, um die Schnittstelle während der gemeinsamen Debugging -Phase zu überprüfen. Der Inhalt der Regeldatei hängt davon ab, welche Mock-Engine verwendet wird (z. B. Mockjs, Flussmock usw.). Nach Abschluss der Konfiguration können Sie Ihr eigenes Geschäftsmodell im Code entsprechend Ihren Anforderungen erstellen.
Hier ist ein einfaches Beispiel:
【Beispiel 1】
Der erste Schritt besteht darin, die Schnittstellenkonfigurationsdatei interface.json im Projektverzeichnis zu erstellen und die JSON -Definition der Hauptsuche hinzuzufügen.
Die Codekopie lautet wie folgt:
{
"Titel": "Pad Taobao Project Data Interface Collection Definition",
"Version": "1.0.0",
"Motor": "Mockjs",
"RuleBase": "./Interfacerules/",
"Status": "Online",
"Schnittstellen": [{{{{
"Name": "Hauptsuchschnittstelle",
"ID": "Search.getItems",
"urls": {
"Online": "http://smtaobao.com/client/search.do"
}
}]
}
Schritt 2 Erstellen und verwenden Sie das Modell im Code
Die Codekopie lautet wie folgt:
// Modul einführen
var modelProxy = require ('modelProxy');
// Globale Initialisierung führt die Konfigurationsdateien der Schnittstelle ein (Hinweis: Initialisierungsarbeit nur einmal)
ModelProxy.init ('./interface.json');
// Weitere Erstellungsmodus finden Sie im folgenden Artikel
var searchModel = new modelProxy ({{
SearchItems: 'Search.getItems' // benutzerdefinierte Methodenname: Die in der Konfigurationsdatei definierte Schnittstellen -ID
});
// Modell verwenden, Hinweis: Die für das Aufrufen der Methode erforderlichen Parameter sind die für die tatsächlichen Schnittstelle erforderlichen Parameter.
SearchModel.searchitems ({q: 'iPhone6'})
//! Beachten Sie, dass Sie die gemessene Methode aufrufen müssen, um die Rückruffunktion anzugeben, um die Daten zu erhalten, die erhalten werden, indem Sie SuchItems asynchron oben aufrufen!
.Done (Funktion (Daten) {
console.log (Daten);
})
.Error (Funktion (err) {
console.log (err);
});
Der Merkmalsreichtum von ModelProxy besteht darin, dass es verschiedene Formen von Profilen unterstützt, um Geschäftsmodelle zu erstellen, für die Unternehmen erforderlich sind:
Erstellen eines Objekts mit der Schnittstellen -ID> nimmt das Wort nach dem letzten '.' Anzahl der ID als Methodenname
Die Codekopie lautet wie folgt:
ModelProxy.create ('Search.getItem');
Verwenden Sie den Schlüsselwert JSON -Objekt> benutzerdefinierte Methodenname: Schnittstellen -ID
Die Codekopie lautet wie folgt:
ModelProxy.create ({{
GetName: 'Session.getusername',
getMycarts: 'cart.getCarts' '
});
Verwenden Sie Array -Formular> Nehmen Sie das Wort nach dem letzten. Nummer als Methodame
Die im folgenden Beispiel generierten Methodenaufrufnamen sind: cart_getItem, getItem, schlagen Sie GetName vor
Die Codekopie lautet wie folgt:
ModelProxy.create (['cart.getItem', 'Search.getItem', 'Search.sugest', 'Session.user.getName']);
Präfixformular> Alle Schnittstellen -IDs, die das Präfix erfüllen
Die Codekopie lautet wie folgt:
ModelProxy.create ('such.*');
Gleichzeitig können Sie diese Modelle mithilfe dieser Modelle auf einfache Weise zusammenführen
[Beispiel 2] Anfrage zusammenführen
Die Codekopie lautet wie folgt:
var model = new modelProxy ('such.*');
// Anforderung zusammenführen (die unten aufgerufene Modellmethode wird bei der Konfiguration der Schnittstellen -ID angegeben, mit Ausnahme von ausgeführt).
model.sugest ({q: 'weiblich'})
.List ({Keyword: 'iPhone6'})
.GetNav ({Key: 'Populäre Kleidung'})
.Done (Funktion (Data1, Data2, Data3) {
// Die Reihenfolge der Parameter stimmt mit der Reihenfolge der Methodenaufrufe überein
Console.log (Data1, Data2, Data3);
});
[Beispiel 3] Abhängigkeitsanforderung
Die Codekopie lautet wie folgt:
var model = new modelProxy ({{
GetUser: 'Session.getuser',
GetMyorderList: 'order.getOrder' '
});
// Erhalten Sie zuerst die Benutzer -ID und erhalten Sie dann die Bestellliste basierend auf der ID -Nummer
model.getUser ({sid: 'fdkaldjfgsakls0322yf8'})
.Done (Funktion (Daten) {
var uid = data.uid;
// sekundäre Datenanforderung hängt von der ersten erhaltenen ID -Nummer ab
this.getMyorderList ({id: uid})
.Done (Funktion (Daten) {
console.log (Daten);
});
});
Darüber hinaus kann ModellProxy nicht nur auf der Knotenseite, sondern auch auf der Browserseite verwendet werden. Stellen Sie einfach die vom offiziellen Paket bereitgestellten ModellProxy-Client.js in die Seite ein.
[Beispiel 4] Verwenden von ModellProxy auf der Browserseite
Die Codekopie lautet wie folgt:
<!-stellte das ModelProxy-Modul vor, das selbst ein Standardmodul ist, das von Kissy-> eingekapselt ist
<script src = "modelProxy-client.js"> </script>
<script type = "text/javaScript">
Kissy.use ("modelProxy", Funktion (s, modelProxy) {
//! Konfigurieren Sie den grundlegenden Pfad, der mit dem im zweiten Schritt konfigurierten Intercept -Pfad übereinstimmt!
// und es gibt eine globale Konfiguration und nur einmal!
ModelProxy.configBase ('/model/');
// Erstellen Sie ein Modell
var searchModel = modelProxy.create ('such.*');
SearchModel
.List ({q: 'ihpone6'})
.List ({q: 'shangchao'})
.Sugst ({q: 'i'})
.GetNav ({q: 'Skateboard'})
.Done (Funktion (Data1, Data2, Data3, Data4) {
console.log ({{
"list_ihpone6": data1,
"list_shockSuit": data2,
"Vorschlag_i": Data3,
"GetNav_Skateboard": Data4
});
});
});
</script>
Gleichzeitig kann ModelProxy mit Midway-XTPL, einer weiteren Kernkomponente von Midway, verwendet werden, um die vollständige Freigabe von Daten, Vorlagen und damit verbundenen Rendering-Prozessen auf der Browser- und Serverseite zu realisieren. Ausführliche Tutorials und Dokumentation zu ModelProxy finden Sie unter https://github.com/purejs/modelproxy
Zusammenfassen
ModelProxy existiert als konfiguriertes leichte Framework, das freundschaftliche Schnittstellenmodellbaugruppen- und -nutzungsmethoden bietet und gleichzeitig das Problem der Schnittstellenverbrauchsspezifikation bei der Trennung von Front-End- und Back-End-Entwicklungsmodi löst. Während des gesamten Projektentwicklungsprozesses muss die Schnittstelle immer einmal definiert und beschrieben werden, und die Front-End-Entwickler können sie verweisen. Gleichzeitig wird das Flusswerkzeug verwendet, um automatisch Dokumente zu generieren, einen Vertrag mit den Back-End-Entwicklern zu bilden und damit verbundene automatisierte Tests durchzuführen, wodurch der gesamte Software-Engineering-Entwicklungsprozess erheblich optimiert wird.
【Hinweis】 Fluss ist ein allgemeiner Begriff für die von Alibaba Group entwickelten und von der Alibaba-Gruppe entwickelten und verwandten Tools für die Front-End Unified Interface.