Lose Kopplung der UI-Ebene in der Webentwicklung

Dieses Mal werde ich Ihnen die lose Kopplung der UI-Ebene in der Webentwicklung vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung der losen Kopplung der UI-Ebene in der Webentwicklung? sehen.

In der Webentwicklung wird die Benutzeroberfläche durch drei Ebenen definiert, die isoliert sind und miteinander interagieren.

HTML wird verwendet, um die Daten und Semantik der Seite zu definieren.

CSS wird verwendet, um Stile zur Seite hinzuzufügen und visuelle Funktionen zu erstellen.

JS wird verwendet, um Verhalten hinzuzufügen die Seite, um sie interaktiver zu machen

Zur losen Kopplung möchte ich ein paar Worte sagen. Wenn Sie eine Komponente ändern können, ohne andere Komponenten zu ändern, liegt eine lose Kopplung vor. Bei großen Mehrpersonensystemen, bei denen viele Personen an der Codepflege beteiligt sind, ist eine lose Kopplung für die Wartbarkeit des Codes von entscheidender Bedeutung. Sie möchten unbedingt, dass Entwickler den Code anderer Leute nicht beschädigen, wenn sie einen Teil des Codes ändern. Wenn der Inhalt jeder Komponente eines großen Systems begrenzt ist, wird eine lose Kopplung erreicht. Im Wesentlichen muss jede Komponente dünn genug gehalten werden, um eine lockere Kopplung zu gewährleisten. Je weniger man über die Komponenten weiß, desto besser lässt sich das Gesamtsystem bilden.

Eines ist zu beachten: Komponenten, die zusammenarbeiten, können keine „Keine Kopplung“ erreichen. In allen Systemen teilen Komponenten einige Informationen, um ihre Arbeit zu erledigen. Es ist leicht zu verstehen, dass unser Ziel darin besteht, sicherzustellen, dass Änderungen an einer Komponente nicht regelmäßig Auswirkungen auf andere Teile haben.

Wenn eine Web-Benutzeroberfläche lose gekoppelt ist, ist das Debuggen einfach. Probleme im Zusammenhang mit Text oder Struktur können durch Durchsuchen von HTML lokalisiert werden. Wenn ein stilbezogenes Problem auftritt, wissen Sie, dass das Problem im CSS liegt. Bei diesen Verhaltensproblemen schließlich ist Ihre Fähigkeit, direkt zu JS zu gehen, um das Problem zu finden, ein zentraler Bestandteil der Wartbarkeit von Webschnittstellen.

Im WebPage-Zeitalter befürworten wir die Trennung der drei Ebenen von HTML/CSS/JS. Beispielsweise ist es verboten, die Inline-Attribute des DOM zum Binden von Listenern zu verwenden, onclick=handler>test< /button>Wenn Sie so schreiben, werden Sie besprüht. Im WebApp-Zeitalter empfehlen die durch React repräsentierten MVVM- und MVC-Frameworks (streng genommen ist React nur ein Framework, das sich auf die Ansichtsebene konzentriert) jedoch alle, dass Sie HTML, CSS und JS zusammen schreiben, und das können Sie oft auch tun Der Code, der den Ereignis-Listener inline bindet.

Man kommt nicht umhin, sich zu fragen: Machen wir einen Rückschritt?

Die Geschichte dreht sich manchmal, und auf den ersten Blick dachte ich, ich würde zurückgehen. Tatsächlich hat sich die Spirale umgekehrt und steht an einem neuen Ausgangspunkt. ——Yu Bo „Evolution des Web-R&D-Modells“

In der traditionellen WebPage-Ära war die Komponentenunterstützung nicht hoch, sowohl auf Sprachebene als auch auf Framework-Ebene. Denken Sie darüber nach, es gibt kein JS, das dies nicht tut unterstützen nativ Module (vor der ES6-Ära) und jQuery. Um steigende Wartungskosten zu vermeiden, wird daher die Best Practice der dreischichtigen Trennung empfohlen. Mit dem Aufkommen von ES6 und dem Front-End-MV*-Framework hat sich das gesamte Front-End-Entwicklungsmodell geändert. Sie werden feststellen, dass das Frontend nicht nur Seiten schreibt, sondern auch mehr WebApps schreibt. Der Umfang und die Komplexität der Anwendungen unterscheiden sich von denen im WebPage-Zeitalter.

React ist ein sehr typischer Vertreter. Es schlägt vor, JSX zum Schreiben von HTML zu verwenden und die Seitenstruktur und Seitenlogik direkt zusammen zu schreiben. Wenn dies in die WebPage-Ära eingeordnet würde, würde es meiner Meinung nach direkt als typisches Anti-Pattern-Lehrmaterial angesehen werden, aber in der WebApp-Ära wird es von den meisten Menschen akzeptiert und verwendet. Durch die vom React-Team vorgeschlagene Einbeziehung von CSS in JS möchten sie auch CSS in JS schreiben, sodass die Front-End-Entwicklung vollständig von JS dominiert wird und die Komponentisierung gründlicher erfolgt (ich habe keine eingehende Recherche und kein Verständnis von CSS in JS durchgeführt). , und es gibt keine wirklich großen praktischen Erfahrungen im Projekt, daher behalte ich jetzt immer noch eine abwartende Haltung bei und verwende weiterhin das bisherige SASS und LESS für die CSS-Entwicklung.

Obwohl sich die Entwicklungsmodelle der beiden Web-Ära dramatisch verändert haben, gibt es immer noch einige allgemeine Prinzipien, die Sie hinsichtlich des dreischichtigen losen Kopplungsdesigns befolgen müssen:

Extrahieren Sie JS aus CSS. Frühe IE8- und frühere Browser erlaubten das Schreiben von JS in CSS (wenn Sie kein Beispiel schreiben, ist dies ein Anti-Muster, es ist besser, wenn Sie sich nicht daran erinnern können, was zu Leistungsproblemen führt, und was noch beängstigender ist). dass es in Zukunft schwierig sein wird, es aufrechtzuerhalten. Aber ich glaube, dass keiner von Ihnen hier Zugriff auf diese Art von Code haben wird, was in Ordnung ist.

CSS aus JS extrahieren. Es bedeutet nicht, dass Sie CSS in JS nicht ändern dürfen. Stattdessen können Sie den Stil indirekt ändern, indem Sie die Klasse ändern. Siehe das folgende Beispiel:

// 不好的写法element.style.color = 'red';
element.style.left = '10px';
element.style.top = '100px';
element.style.visibility = 'visible';// 好的写法.reveal {  color: red;
  left: 10px;
  top: 100px;
  visibility: visible;
}
element.classList.add('.reveal');

Weil der CSS-Klassenname zu einer Kommunikationsbrücke zwischen CSS und JS werden kann. Im Lebenszyklus der Seite kann JS den Klassennamen des Elements nach Belieben hinzufügen und löschen. Der durch className definierte Stil befindet sich im CSS-Code. Stile in CSS können jederzeit geändert werden, ohne dass JS aktualisiert werden muss. JS sollte Stile nicht direkt manipulieren, um eine lose Kopplung mit CSS aufrechtzuerhalten.

Es gibt eine Situation, in der die Verwendung des Stilattributs akzeptabel ist: wenn Sie ein Element auf der Seite relativ zu einem anderen Element positionieren oder die gesamte Seite neu positionieren müssen. Diese Berechnung kann nicht in CSS durchgeführt werden, daher können Sie style.top, style.left, style.bottom und style.rght verwenden, um das Element korrekt zu positionieren. Definieren Sie die Standardattribute dieses Elements in CSS und ändern Sie diese Standardwerte in Javascript.

Angesichts der aktuellen Situation, in der das Front-End HTML und JS zusammen geschrieben hat, werde ich nicht auf die Praxis der Trennung der beiden im Originalbuch eingehen. Aber denken Sie bei all dem Unsinn daran: Vorhersehbarkeit führt zu schnellerem Testen und Entwickeln, und wenn Sie wissen (anstatt zu raten), wo Sie mit dem Debuggen von Fehlern beginnen müssen, lässt sich das Problem schneller lösen und die Gesamtqualität Ihres Codes ist höher.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man JS zur Referenz- und Wertübergabe verwendet

Wie man einen Knoten erstellt .js-Schnittstelle

Das obige ist der detaillierte Inhalt vonLose Kopplung der UI-Ebene in der Webentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!