Beispiel und Update für die Erstellung von HTML5+CSS3-Headern

Beim letzten Mal haben wir uns zwei Header-Layouts ausgedacht, ein Flexbox-Layout und ein Float-Layout. Nach Rücksprache mit den Kollegen, die die Rekonstruktion durchführten, haben wir uns schließlich für das Float-Layout entschieden.

Tatsächlich erfordert die Layoutauswahl nicht meine Aufmerksamkeit. Meine Teilnahme oder einige Meinungen sind größtenteils Selbstverbesserungen, aber es ist nicht unbedingt wahr, dass die HTML-Struktur vollständig von CSS gesteuert wird.

Während des Codierungsprozesses der Header-Komponente kam es zu wiederholten Diskussionen und Auseinandersetzungen mit meinen Refactoring-Kollegen zu einigen Themen. Lassen Sie uns heute über das Layout und die Funktionsimplementierung der Header-Komponente sowie die Koordination zwischen JS und CSS sprechen.

Die Header-Komponente selbst ist eine alte Komponente. Lassen Sie uns besprechen, wie diese Art von alter Komponente erneuert werden kann.

Ursprüngliche Struktur

Der Kollege, der es am Anfang umgestaltet hat, hat mir eine fertige Seite gegeben:

Wir haben einige dieser kleinen Erfahrungen besprochen und das Designteam informiert, und sie haben Änderungen vorgenommen, die reibungslos verliefen. Dann habe ich fröhlich mit dem Coden begonnen. Dies ist die Struktur eines der HTML-Blöcke:

 <header class="cm-header" style="top: 50px;">
   <span class="fl cm-header-icon icon-back"></span>
   <span class="fr cm-header-btn">Bestätigen</span>
   <span class="fr cm-header-icon"><i class="icon-home"></i></span>
   <span class="fr cm-header-icon"><i class="icond-list"></i></span>
   <h1 Klasse="cm-Seitentitel">
     Seitentitel</h1>
 </header>

Abgesehen vom Text im h1-Tag, der sehr kompliziert sein kann, werden wir später darüber sprechen. Die Schaltflächen haben folgende Funktionen:

① Zweite Reihe: Zurück-Button
② Dritte Zeile: Bestätigen

PS: Die linke Seite verwendet Float-Layout, daher befindet sich das erste Element ganz rechts

③ Vierte Zeile: Home-Tag
④ Fünfte Zeile: drei Punkte, klicken Sie, um eine Seitenleiste anzuzeigen

Das Obige ist die Implementierung von HTML, aber für Programmierer hat der Header neben Schaltflächen (btn) nur Symbole, sodass die obige Struktur von JS im Allgemeinen nicht akzeptiert wird.

Die von Jser benötigte Struktur

Nach Rücksprache mit meinen Refactoring-Kollegen ist der Grund folgender:

① Da der Fallback speziell ist, gibt es einen zusätzlichen Stil, aber ich erinnere mich nicht, welcher es ist.
② Das Symbol stellt das Hintergrundbild dar, das Symbol d stellt die CSS3-Zeichnung dar. Die CSS3-Zeichnung weist eine hohe Skalierbarkeit auf, z. B. durch Farbwechsel usw.
③ ......

Die Diskussion zwischen den beiden Seiten war damals ziemlich intensiv, aber der Refactoring-Kollege war nicht damit einverstanden, alle Icons in Icons zu ändern, also wurde der Plan verworfen. Nach einer Diskussionsrunde sah die Struktur folgendermaßen aus:

<header class="cm-header" style="top: 50px;">
   <span class="fl cm-header-icon"><i class="icon-back"></i></span>
   <span class="fr cm-header-btn">Bestätigen</span>
   <span class="fr cm-header-icon"><i class="icon-home"></i></span>
   <span class="fr cm-header-icon"><i class="icond-list"></i></span>
   <h1 Klasse="cm-Seitentitel">
     Seitentitel</h1>
 </header>

Ich nahm eine kleine Änderung vor, um die Struktur von „Zurück“ mit anderen Symbolschaltflächen zu vereinheitlichen, und begann dann fröhlich mit dem Coden.

PS: Bitte beachten Sie, dass die Tags „icond“ und „icon type“ in unterschiedlichem Ausmaß im Header erscheinen und nicht gesteuert werden können.

Strukturelle Probleme

Da der Firmenkopf schon immer vorhanden war, musste ich bei der Erstellung zwei Aspekte berücksichtigen:

① Praktisch für die Erweiterung, aber Schnittstellenkompatibilität ist erforderlich
② Es ist notwendig, ein gemeinsames Debugging mit Hybrid über den Tagnamen jedes Tags durchzuführen

Mit anderen Worten, der Name jedes Tags ist festgelegt und sogar die Rückrufe einiger Tags sind eingeschränkt. Meine Datenstruktur ist wie folgt:

 {
 links: [],
 Mitte: [],
 Rechts: [
   {
     'Tagname': 'Home', Rückruf: Funktion () {
       Konsole.log('Rückkehr');
     }
   },
   { 'tagname': 'Suche' },
   {
     'tagname': 'Liste', Rückruf: Funktion (e) {
        //......
     }
   },
   { 'tagname': 'tel', 'number': '56973144' },
   {
     'Tagname': 'Commit', 'Wert': 'Anmelden', Rückruf: Funktion () {
       console.log('Anmelden');
     }
   },
   {
     'tagname': 'benutzerdefiniert', 'Wert': 'Anpassung',
     itemFn: Funktion () {
       return '<span class="cm-header-btn fr js_custom">Anpassung</span>';
     },
     Rückruf: Funktion () {
       console.log('Anpassung');
     }
   }

Wie Sie sehen, gibt es für jeden Tagnamen eine Schaltfläche, aber jetzt kommt das Problem: Wir wissen nicht, ob ein Tagname ein Symbol oder ein Icond sein soll

Anhand der Existenz des Wertefelds können wir jedoch feststellen, ob es ein i-Untertag haben sollte. Wie lösen wir dieses Problem?

Stellen Sie eine Zuordnungsbeziehung zwischen Tagname und Klassenname her, zum Beispiel:

 var Karte = {
   'Home': 'Symbol',
   'Liste': 'Symbol'
 }

Natürlich ist dieser Ansatz sehr unpraktisch. Wenn die kleinen Symbole als Symbole vereinheitlicht werden, kann ich den Code in der Vorlage folgendermaßen vereinheitlichen:

 <span class="cm-header-icon <%=dir %> js_<%=item.tagname %>" >
   <% wenn(Artikel.Wert) { %>
     <%=Artikel.Wert %>
   <% } sonst { %>
     <i class="icon-<%=item.tagname %>"></i>
   <% } %>
 </span>

Durch die Hinzufügung einer Mapping-Beziehung wurde mein Code jedoch hässlich und die Geschäftslogik kompliziert. Also suchte ich mit diesen Überlegungen erneut einen Refactoring-Kollegen auf. Der Refactoring-Kollege war auch sehr einfühlsam und erklärte sich sofort bereit, dies zu ändern:

 <header class="cm-header" style="top: 50px;">
   <span class="fl cm-header-icon"><i class="icon-back"></i></span>
   <span class="fr cm-header-btn">Bestätigen</span>
   <span class="fr cm-header-icon"><i class="icon-home"></i></span>
   <span class="fr cm-header-icon"><i class="icon-list"></i></span>
   <h1 Klasse="cm-Seitentitel">
     Seitentitel</h1>
 </header> 

Ohne den Stil in h1 zu berücksichtigen, ist es für uns wirklich einfach, den obigen Code zu erhalten! ! !

 <header class="cm-header">
 <%
 var i = 0, länge = 0, j = 0, keyagain = 0;
 var links = links;
 var right = right.reverse();
 var Element = null;
 var dir;
 var btnObj = null;
 %>
 <%für(keyagain=0; keyagain < 2; keyagain++) { %>
   <% 
     wenn(keyagain == 0) { dir = 'fl'; btnObj = links; } sonst { dir = 'fr'; btnObj = rechts; }
   %>
   <% für(i = 0, len = btnObj.length; i < len; i++) { %>
     <% Element = btnObj[i]; %>
     <%wenn(Typ des Elements.itemFn == 'Funktion') { %>
       <%=item.itemFn() %>
     <%} sonst { %>
       <span class="cm-header-icon <%=dir %> js_<%=item.tagname %>" >
         <% wenn(Artikel.Wert) { %>
           <%=Artikel.Wert %>
         <% } sonst { %>
           <i class="icon-<%=item.tagname %>"></i>
         <% } %>
       </span>
     <%} %>
   <%} %>
 <%} %>
 </header> 

PS: Aus der Code-Farbgebung geht hervor, dass die in js verwendeten Wörter „left“ und „right“ Schlüsselwörter sind, die verarbeitet werden müssen …

Maßgeschneiderte Anforderungen

Wie Sie sehen, können wir mit einer Schleife problemlos Schaltflächen links und rechts generieren, aber das Problem tritt sofort auf. Was ist, wenn wir es erweitern müssen? Es treten die folgenden Probleme auf:

① Das Standard-Tel-Tag ist das A-Tag, hier ist es jedoch das Span-Tag

<a href="tel:56973144" class="cm-header-btn fr js_tel "><i class="icon-tel"></i></a>

② Die Zurück-Schaltfläche wird normalerweise in ein A-Tag umgewandelt, um das Problem des falschen Todes zu lösen, das durch Javascript-Fehler in Hybrid verursacht wird

Um es ganz deutlich zu sagen: Auch wenn die Beschriftungsschaltflächen eine einheitliche Struktur aufweisen sollten, müssen sie weiterhin individuell angepasst werden können.
Die Anpassungsarbeit wird hier der itemFn-Funktion jedes Tags zugewiesen. Sie gibt einen String mit bestimmten Regeln zurück. Hier ist ein Codeausschnitt:

 handleSpecialParam: Funktion (Daten) {
   var k, i, Länge, Element;
   für (k in Daten) {
     wenn (_.isArray(data[k])) {
       für (i = 0, Länge = Daten[k].Länge; i < Länge; i++) {
         Element = Daten[k][i];
         wenn (diese['customtHandle_' + item.tagname]) {
           dies['customtHandle_' + item.tagname](daten[k][i], k);
         } //Wenn
       } //für
     } //Wenn
   } //für
 },
 
 _getDir: Funktion (Dir) {
   var kv = { links: 'fl', rechts: 'fr' };
   return kv[dir];
 },
 
 //Logik der Zurück-Schaltfläche handhaben customtHandle_back: function (item, dir) {
   dir = this._getDir(dir);
   Element.itemFn = Funktion () {
     var str = '<a href="http://m.ctrip.com/html5/" class="cm-header-btn ' + dir + ' js_' + item.tagname + ' " >';
     wenn (Artikel.Wert) {
       str += Artikel.Wert + '</a>';
     } anders {
       str += '<i class="icon-' + item.tagname + '"></i></a>';
     }
     gibt str zurück;
   };
 }, 

Wenn Sie feststellen, dass eine Schaltfläche Ihren Anforderungen nicht entspricht oder angepasste Anforderungen hat, können Sie eine Möglichkeit finden, deren itemFn festzulegen. Zu diesem Zeitpunkt kann dieser Code direkt in die initialisierte JSON-Zeichenfolge geschrieben werden.

Verschiedene Titel

Wenn es um Titel geht, werden Sie feststellen, dass die Leistung unterschiedlich ist. Derzeit werden im Allgemeinen je nach Typ unterschiedliche HTML-Strukturen generiert. Das Framework bietet mehrere Standardoptionen. Wenn es nicht unterstützt wird, können Sie itemFn selbst anpassen.

 <% Element = Mitte; %>
 <%wenn(Typ des Elements.itemFn == 'Funktion') { %>
   <%=item.itemFn() %>
 <%} sonst wenn(item.tagname=='Titel' || item.tagname=='Untertitel') { %>
   <h1 Klasse="cm-Seitentitel js_<%=item.tagname %>" >
     <%if(Typ von(item.value) == 'Objekt' && item.title.value == 2) { %>
       <span class="cm-title-l"><%=item.value[0]%></span>
       <span class="cm-title-s"><%=item.value[1]%></span>
     <%} sonst { %>
       <%=Artikel.Wert %>
     <%} %>
   </h1>
 <%} sonst wenn(item.tagname=='select'){ %>
   <h1 Klasse="cm-page-select-title js_<%=item.tagname %>" >
     <%=Artikel.Wert %>
   </h1>
 <%} sonst wenn(item.tagname=='tabs') { %>
   <h1 Klasse="cm-page-tabs-title js_<%=item.tagname %>" >
     <%für(j = 0; j < item.data.items.length; j++) { %>
       <span data-key="<%=item.data.items[j].id %>" class="<%if(item.data.index===j){ %>aktiv<%} %>" ><%=item.data.items[j].name %></span>
     <% } %>
   </h1>
 <% } sonst{ %>
 
 <%} %> 

Implementierung der Ereignisbindung

Die Header-Komponente selbst erbt von der Klasse Abstract.View. Setzen Sie also einfach

diese.events = {}

Das Ereignis kann als Ereignisproxy an das Stammelement gebunden werden, und das Ereignis im Header ist im Allgemeinen ein Klickereignis:

 setEventsParam: Funktion () {
   var Element, Daten = dieses.Datenmodell.links.concat(dieses.Datenmodell.rechts).concat(dieses.Datenmodell.Mitte);
 
   für (var i = 0, len = Datenlänge; i < len; i++) {
     Element = Daten[i];
     wenn (_.isFunction(item.callback)) {
       this.events['click .js_' + item.tagname] = $.proxy(item.callback, this.viewScope);
     }
   }
 }, 

Zu beachten ist hierbei, dass der Event-Binding-Hook unser Tagname ist, der eindeutig ist. Wir werden für jeden Tag dynamisch eine Klasse „.js_tagname“ generieren, um die Event-Bindung zu erleichtern.

Kompatibilität mit alten Schnittstellen

Wie bereits erwähnt, handelt es sich bei dieser Komponente um eine Überarbeitung einer alten Komponente, sodass sie bereits von verschiedenen Geschäftsteams verwendet wurde. Ursprünglich hieß sie beispielsweise so:

 dies.header.set({
   Titel: „Grundlegende Header-Verwendung“,
   Untertitel: 'Mittlerer Untertitel',
   zurück: wahr,
   Backtext: 'Abbrechen',
   tel: { Nummer: 1111 },
   Zuhause: wahr,
   Suche: wahr,
   btn: { Titel: "Anmelden", ID: "confirmBtn", Klassenname: "header_r" },
   Ereignisse: {
     returnHandler: Funktion () {
       console.log('zurück');
     },
     homeHandler: Funktion (e) {
     }
   }
 }); 

Nun erwarten wir, dass die aufrufende Methode wie folgt aussieht:

dies.header.set({
  links: [],
  Mitte: {},
  Rechts: [
    { tagname: 'home', rückruf: funktion () { } },
    { tagname: 'tagname', value: 'value', data: {}, itemFn: function(){}, callback: function () { } }
  ]
}); 

Was sollten wir jetzt tun? Natürlich gibt es keinen Aufbau ohne Zerstörung, erst Zerstörung und dann Aufbau, natürlich sind vom Business-Team Veränderungen gefordert! ! ! Dann wurde ich gnadenlos kritisiert, also machte ich die Schnittstelle kompatibel
Bei der Aufarbeitung alter Komponenten ist die Schnittstellenkompatibilität ein Muss. Sofern der zugrunde liegende Mechanismus nicht gestört ist und die Störung störende Ergebnisse bringen kann, ist eine Änderung der Schnittstelle nicht zu empfehlen!
Dabei wird oben die neue Schnittstelle aufgerufen, unten die alte. Die Auswirkung ist folgende:

Dies ist das Ende dieses Artikels über Beispiele und Updates zur Erstellung von HTML5+CSS3-Headern. Weitere relevante Beispiele für Header finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!