Tatsächlich waren „gut“ und „schlecht“ schon immer relativ, da jeder unterschiedliche Maßstäbe für „gut“ und „schlecht“ hat. Es ist besser, aus der eigenen Perspektive zu überlegen: Wie lässt sich eine gute Rekonstruktion durchführen?
Schauen wir uns zunächst das am häufigsten vorkommende zweispaltige Layout an:
Grundlegender HTML-Code:
Schauen wir uns die spezifische CSS-Codeimplementierung an (Ränder ignorieren):
Offensichtlich gibt es viele CSS-Lösungen, um ein zweispaltiges Layout (mit einer festen Breite für die linke Spalte) zu erreichen und dabei die gleiche HTML-Struktur beizubehalten. Die wichtigsten Richtungen sind die Verwendung von Floats oder keine und eine feste oder variable Breite für die rechte Spalte:
Qzone, Pengyou.com und Facebook haben alle schwebende linke Spalten. Der einzige Unterschied besteht in der Art und Weise, wie die rechte Spalte geschrieben wird. Qzone hat eine feste Breite für die rechte Spalte und lässt sie schweben, während Pengyou.com und Facebook keine feste Breite für die rechte Spalte haben und sie nicht schweben lassen. Stattdessen verwenden sie das Prinzip, einen BFC zu erstellen und hasLayout für niedrigere IE-Versionen auszulösen, damit die rechte Spalte ihre Breite anpasst.
Sowohl Yahoo- als auch Google-Spalten verwenden keine Floating-Spalten. Der einzige Unterschied besteht darin, dass Yahoo absolute Positionierung verwendet, während Google Inline-Block verwendet. Google hat angekündigt, dass einige seiner Produkte die Unterstützung für IE8 aufgeben werden, sodass Google mutig Inline-Block verwenden kann, um das Layout zu implementieren, ohne viele Hacks für andere Browser mit niedrigeren Versionen schreiben zu müssen.
Gibt es darunter die beste Lösung? Jede der oben genannten Lösungen hat ihre eigenen Vor- und Nachteile und kann für einen bestimmten Projekthintergrund geeignet sein. In ähnlicher Weise kann die ausgewählte Lösung auch mit der Benutzergruppe zusammenhängen. Obwohl die Wahl einer Lösung aus Anwendersicht nicht erkennbar ist, können wir eine Lösung deshalb nicht einfach so verwenden.
Um die Wartbarkeit und Nutzbarkeit des Projekts im späteren Stadium zu erleichtern, müssen wir die beste Lösung wählen. Wenn wir nicht einmal die grundlegenden Kenntnisse wie BFC und hasLayout verstehen, können wir dies nicht tun. Gleichzeitig müssen wir unsere eigene Positionierung klarstellen: Wir sind nicht nur ein „Bildschneider“ oder „Künstler“, wir können einige Benutzergruppen mit Behinderungen nicht ignorieren und wir müssen den Projektcode eleganter und benutzerfreundlicher gestalten. Obwohl die grundlegenden Aufgaben der Rekonstruktion darin bestehen, PSD in HTML + CSS + JS zu konvertieren, sollten Sie wissen, dass dies allein noch keine gute Rekonstruktion ist. Bessere Kommunikationsfähigkeiten, mehr Austausch, Nachdenken und Zusammenfassen sowie die richtige Beachtung einiger Front-End-Dynamiken sind alles, was wir tun müssen. Das Wichtigste ist natürlich, dass wir eine optimistische Einstellung und eine glückliche Mentalität haben müssen. Im Folgenden werde ich näher darauf eingehen, wie man eine gute Rekonstruktion durchführt. Natürlich ist dies nur meine persönliche Meinung und ich freue mich über Ihre Kommentare.
Aus beruflicher Sicht:
Klare Selbstpositionierung
Derzeit gibt es in China nicht viele Leute, die das Front-End in Rekonstruktion und JS-Entwicklung unterteilen. Obwohl PS eine unverzichtbare Software für die Rekonstruktion ist, sollten Sie wissen, dass Rekonstruktion nicht „Bildschnitt“ ist und Bildschnitt nur ein Teil des Rekonstruktionsarbeitsinhalts ist. Nur weil wir Refactoring betreiben, gibt es für uns keinen Grund, keine anderen Technologien zu erlernen, denn Sie wissen, dass Sie nicht Ihr ganzes Leben lang Refactoring betreiben werden. JS kann nicht verworfen werden, und Sie müssen auch mit neuen Front-End-Technologien vertraut sein. Beim Refactoring einer Seite sollte die meiste Zeit für das Extrahieren von Seitenmodulen, die Optimierung der Leistung sowie die Untersuchung der Wartbarkeit und Benutzerfreundlichkeit aufgewendet werden, während die geringste Menge an Zeit für die Codeimplementierung aufgewendet werden sollte. Vielleicht wird die von Ihnen geschriebene Seite von Millionen von Benutzern verwendet, und möglicherweise gibt es hier Benutzer mit Behinderungen. Sie müssen daher die Gefühle und Erfahrungen verschiedener Benutzer berücksichtigen und sich nicht nur auf die Vollständigkeit des Codes beschränken.
Konzentrieren Sie sich auf grundlegende Front-End-Kenntnisse
Die Grundkenntnisse des Frontends sind wie das Fundament eines Hauses. Wenn das Fundament nicht gut gelegt ist, kann es bei einem leichten Erdbeben einstürzen. Gleichzeitig ist es wie die Türen einer Burg. Wenn die Tür nicht gut gebaut ist, kann sie durch feindliches Gewehrfeuer sofort zerstört werden. Daher ist die Schaffung einer soliden Grundlage der Grundstein für das Erlernen weiterer Kenntnisse im Vorfeld. Sie können mehr Zeit damit verbringen, die Eigenschaften von CSS-Attributen, die Semantik von HTML-Tags, die Grundkenntnisse von JS und W3C-Spezifikationen (Blockformatierungskontext, Stapelkontext, Boxmodell usw.) zu lernen und zu festigen, sodass Sie eine Front-End-Technologielösung richtig und sinnvoll verwenden können.
Spitzentechnologie richtig behandeln
Das Internet entwickelt sich rasant und auch die Front-End-Technologie wird sehr schnell aktualisiert. Als wir CSS2 lernten, war CSS3 bereits weltweit verbreitet. Als wir CSS3 lernten, stand CSS4 bereits auf der Tagesordnung. An der Front gibt es immer einen endlosen Lernprozess, daher müssen wir eine neue Technologie, wenn sie entsteht, gründlich prüfen.
Behalten Sie Ihre Leidenschaft für das Lernen bei, während Sie Ihre Arbeit gut machen. Sie können versuchen, neue Technologien zu nutzen, aber verstehen Sie bitte zuerst, warum Sie diese neue Technologie nutzen möchten. Welche Verbesserungen können wir durch den Einsatz dieser Technologie erzielen? In der Front-End-Technologie gibt es nie die beste technische Lösung, sondern nur die am besten geeignete technische Lösung. Das Neueste ist nicht unbedingt das Beste und das Alte nicht unbedingt das Schlechteste. Folgen Sie nicht blind dem Trend, neue Technologien zu erlernen. Sie müssen wissen, ob das Gelernte anwendbar ist. (Anmerkung des Autors: Tatsächlich handelt es sich meistens nicht um eine neue Technologie, sondern um eine Technologie, die es schon lange gibt. Es handelt sich lediglich um eine neue Front-End-Lösung oder einen neuen Standard, der gefördert wurde, wie beispielsweise CSS3, das tatsächlich erst 2003 geboren wurde.)
Bessere Kommunikationsfähigkeiten
Jeden Tag haben wir möglicherweise mit unterschiedlichen Leuten in den Bereichen Entwicklung, Produkt, Design, Interaktion, Tests usw. zu tun. Dies erfordert von uns bessere Kommunikations- und Koordinationsfähigkeiten, den Schwerpunkt auf bessere Kommunikationsfähigkeiten und die Reduzierung der Kommunikationskosten. „Alles basiert auf dem Nutzerwert.“ Genau dieses Konzept braucht die Internetbranche. Neben der Aufrichtigkeit in der Kommunikation mit anderen Kollegen muss man auch mehr an die Nutzer denken: Müssen wir das wirklich tun?
Nehmen Sie gezielt an technischen Foren teil
Wenn Sie in einem kleinen Unternehmen bleiben, in dem es nicht viele Front-End-Mitarbeiter gibt und keine gute Atmosphäre herrscht, können wir unser Netzwerk nur auf zwei Arten erweitern: über das Internet und über Foren. Das Internet, beispielsweise QQ-Gruppen, Blue Ideal usw., und persönliche Foren sind zweifellos die authentischste Möglichkeit, Ihr Netzwerk zu erweitern. Tatsächlich gibt es im aktuellen inländischen Umfeld so viele technische Front-End-Foren, dass ich sie nicht einmal alle zählen kann. Es ist derzeit besonders wichtig, selektiv an einem Forum teilzunehmen, und Sie sollten nicht an jedem Forum teilnehmen, unabhängig davon, ob Sie es verstehen oder nicht und ob es kostenlos oder kostenpflichtig ist. Tatsächlich ist das Wichtigste, dasjenige auszuwählen, das zu Ihnen passt.
Fokus auf Browser-Anbieter
Vor zehn Jahren dominierte der Internet Explorer den Großteil der Welt. Heute sind andere große Browserhersteller in den Kampf um globale Marktanteile eingestiegen. Der Browser ist das unverzichtbarste Front-End. Wenn Sie die Aktionen und Muster der Browserhersteller im Auge behalten, können Sie eine zukunftsweisende Perspektive gewinnen. Entwicklerbibliotheken einiger Browserhersteller: MSDN von Microsoft, MDN von Firefox, Entwicklerbibliothek von Google und Entwicklerbibliothek von Opera. Darüber hinaus können Sie auch auf die Werbeaktivitäten verschiedener Browserhersteller achten. Firefox China wird bei jeder Veröffentlichung einer neuen Version Werbeaktionen durchführen. Auch für Microsofts neuesten IE10 gab es bei seiner Einführung Werbeaktionen in China. Sie können sich über die Funktionen dieser neuen Browserversionen und ihre Unterstützung für CSS3\HTML5 informieren.
Mehr Verantwortung und Teilen
Normalerweise übernehme ich mehr Zusatzarbeit, zum Beispiel mache ich einige sinnvolle Vorschläge zur Neustrukturierung der Zusammenarbeitsstandards und Kodierungsstandards des Teams und erstelle einige Dokumente, die anderen Kollegen dabei helfen, schneller und effizienter Fortschritte zu machen. Wenn ich bei meiner Arbeit auf gute Arbeitsmethoden oder Forschungsergebnisse zu neuen Technologien stoße, kann ich diese mit Ihnen teilen. Die Teamatmosphäre bei der Neugestaltung ist sehr wichtig. Niemand möchte in einem Team bleiben, in dem er den ganzen Tag nur Code schreibt. Das ist weder für den Einzelnen noch für das Team gut.
Weitere Gedanken und Schlussfolgerungen
Mit Denken ist der „Bewusstseinsstrom“ gemeint, also unsere Gedanken und Ideen während des Rekonstruktionsprozesses. Wie wir denken, bestimmt, was wir tun.
Was das Refactoring betrifft, beginnen viele Leute, nachdem sie den Entwurf erhalten haben, Bilder auszuschneiden und verwenden alle möglichen „Tricks“, um verschiedene Anforderungen zu erfüllen. Wir führen nach Erhalt des Entwurfs nicht einmal eine sorgfältige Analyse durch: Wie erstelle ich eine vernünftige Architektur, wie entferne ich geeignete Module, wie verwende ich einen eleganteren Weg und leichten Code, um die Anforderungen der Seite zu erfüllen?
Vielleicht ist es das aktuelle Umfeld, das uns dazu drängt, weiter voranzuschreiten: In den meisten Front-End-Foren wird über eine bestimmte Technologie gesprochen, man vertieft sich in die Implementierung eines bestimmten technischen Details und spricht über Leistungsoptimierung, aber nur wenige sprechen darüber, wie man eine Front-End-Lösung sinnvoll auswählt, wie man beim Refactoring in einer Reihe unterschiedlicher Szenarien auftretende Probleme löst und, was am wichtigsten ist, über unsere eigene berufliche Zukunftsperspektive: Sind wir bereit, für den Rest unseres Lebens Code zu schreiben?
Die Zusammenfassung wird auch als „Review“ bezeichnet, was so viel bedeutet wie Überprüfung. Die Überprüfung ist insbesondere beim Refactoring wichtig. Durch regelmäßige Projektüberprüfungen können Probleme im Projekt aufgedeckt und deren erneutes Auftreten in der Zukunft vermieden werden.
Natürlich ist die Projektüberprüfung ein Aspekt, aber wichtiger ist die Überprüfung auf Codeebene. Unregelmäßige Überprüfungen können uns dazu ermutigen, die Details einiger Codes eleganter zu kontrollieren. Überprüfungen können nicht nur die Qualität des Codes verbessern, sondern auch den Teamgeist stärken und die technischen Fähigkeiten des Teams insgesamt verbessern. Dies ist offensichtlich eine sehr bedeutsame Sache. Teammitglieder können gemeinsam den Code der anderen überprüfen und die Schwächen und Stärken jedes Einzelnen herausfinden. Andernfalls wären wir nur miserable Programmierer, die sich nur auf ihren eigenen Code konzentrieren.
Aus der Perspektive des Lebens:
Weiterlesen
Informationen im Internet sind fragmentiert. Wenn wir nicht gut darin sind, die Fragmente zu sortieren, ist ein gedrucktes Buch besonders wichtig, um unsere Seele zu trösten. Manchmal können Menschen sich durch das Leben und die Arbeit überfordert fühlen. In solchen Momenten müssen wir einen Weg finden, Stress abzubauen. Lesen ist eine gute Möglichkeit.
Bleib bei einer Sportart
Wenn Sie bei der Arbeit zu beschäftigt sind, denken Sie daran, Ihre Arbeitsmethoden zu ändern, die Prioritäten Ihrer Bedürfnisse zu ordnen und sich etwas Zeit zum Entspannen zu nehmen. Diese Entspannung muss es Ihren Muskeln und Knochen ermöglichen, sich zu bewegen, beispielsweise beim Badmintonspielen, Joggen oder im Fitnessstudio. Nur wenn Sie Ihren Körper stärken, haben Sie mehr Energie, um Monster zu töten und im Level aufzusteigen.
Behalten Sie eine optimistische Lebenseinstellung bei
Wenn es uns gelingt, die winzigen Glückspartikel im Leben einzufangen, werden wir immer glücklich leben. Letztes Mal hörte ich mir einen Beitrag über das Leben bei Tencent Health Gas Station an, in dem es hieß: „Das Leben ist wie Hühnersuppe kochen, manchmal muss man etwas Würze und Dip-Sauce hinzufügen.“ Tatsächlich sollen diese Dip-Saucen dazu dienen, das kleine Glück im Leben zu entdecken und eine optimistische, aufgeschlossene und fröhliche Front-End-Person zu sein. Passen Sie die Balance zwischen Arbeit und Leben an, damit Sie sich nicht so müde fühlen.
Nun, es ist wirklich nicht einfach, eine gute Rekonstruktion durchzuführen, sowohl aus beruflicher Sicht als auch aus Lebensperspektive. Es ist unabdingbar, eine optimistische, enthusiastische und positive Einstellung beizubehalten, weiter zu lernen und ein einfaches und glückliches Leben zu führen. Das ist genug.
Tatsächlich überarbeiten Sie nicht nur den Code, sondern auch Ihr Leben!
