Erkennung von BEM-Entitäten auf einer HTML-Seite / Sudo Null IT News

Ich verfeinere weiterhin ein kleines PowerShell-Skript, damit es in Shell-Programmen von Windows PowerShell Version 5.1 und PowerShell Version 7 funktioniert (ich arbeite mit dem Betriebssystem Windows 10). Das Skript parst die angegebene Datei mit HTML-Code unter Verwendung der Methoden der Bibliothek HTML Agility Pack und gibt den HTML-Baum der HTML-Seite aus der Datei an die Konsole aus. Bei der Ausgabe eines HTML-Baums an die Konsole verwende ich Farbe, um die Aufmerksamkeit des Benutzers auf die Werte der “Klassen”-Attribute von HTML-Elementen zu lenken. Als nächstes analysiere ich die Namen von BEM-Entitäten auf Übereinstimmung mit der BEM-Methodik („Block, Element, Modifier“). Das Skript kann beim Erlernen der BEM-Methodik, BEM-Benennungsschemata usw. hilfreich sein.

Über das Rendern eines HTML-Baums habe ich im Artikel „PowerShell: Traversing and Rendering an HTML Tree from a File“ geschrieben. Ich habe im Artikel „PowerShell: klassisches BEM-Namensschema und reguläre Ausdrücke“ über die BEM-Methodik und die darin verwendeten Namenskonventionen geschrieben.

In diesem Artikel werde ich folgen klassisches Namensschema in BEM, aber alles hier Gesagte kann leicht mit leichten Modifikationen auf andere Benennungsschemata angewendet werden.

Verfahren

In obigem Artikel habe ich die Funktion testBEMNameClassic beschrieben, bei der anhand einer Reihe von regulären Ausdrücken, die in einer bestimmten Reihenfolge angewendet werden, ein Wort (CSS-Klassenname) aus dem „class“-Attribut eines HTML-Elements auf Fehler in Bezug auf analysiert wird das Benennungsschema in der BEM-Methodik. Diese Funktion gibt die Zahl 0 zurück, wenn keine Fehler gefunden wurden, oder eine Zahl ungleich Null (den Fehlercode), wenn ein Fehler gefunden wurde.

Wenn nach dieser Prüfung ein Fehler gefunden wird, drucke ich eine Fehlermeldung. Wenn der Fehler nicht gefunden wird, können Sie damit beginnen, den Typ der BEM-Entität zu erkennen. In PowerShell-Code könnte dies etwa so aussehen:

$err = testBEMNameClassic($class) if ($err) { # Fehlermeldung anzeigen # … } else { # BEM-Entitätstyp erkennen, Ausgabe an die Konsole # … }

Die $class-Variable enthält eines der Wörter aus dem Wert des „class“-Attributs des HTML-Elements. Wenn dieses Attribut mehrere Wörter enthält, werden sie einzeln in einer Schleife analysiert (diese Schleife wird im obigen Code nicht angezeigt). Ich möchte Sie daran erinnern, dass die Wörter im “class”-Attribut eines HTML-Elements durch Leerzeichen (Leerzeichen, horizontaler Tabulator, Zeilenumbruchzeichen) getrennt sind.

Daher können wir in der Phase der Erkennung des Typs einer BEM-Entität davon ausgehen, dass die zur Erkennung eingegebenen Wörter in voller Übereinstimmung mit der Namenskonvention der BEM-Methodik geschrieben wurden. (In unserem Fall ist dies das klassische Namensschema, aber im Skript implementiere ich zwei weitere alternative Namensschemata. Wenn Sie möchten, können Sie zusätzlich zu den implementierten drei Namensschemata weitere hinzufügen.)

Erkennung des BEM-Entitätstyps

Soweit ich weiß, kann es nur sechs Arten von BEM-Entitäten geben:

  • Block;

  • Blockmodifikator boolean;

  • Schlüsselwert-Blockmodifikator;

  • Element;

  • Elementmodifikator boolean;

  • Modifizierer für Schlüsselwertelemente.

Lassen Sie uns den PowerShell-Code zum obigen Code hinzufügen, um den Typ einer BEM-Entität anhand ihres Namens mit regulären Ausdrücken zu erkennen:

# Erkennen des BEM-Entitätstyps, Ausgabe an die Konsole, wenn ($class -cmatch ‘^[a-z-]+$’) { “blockieren” } elseif ($class -cmatch ‘^[a-z-]+_[a-z-]+$’) { “block modifier boolean” } elseif ($class -cmatch ‘^[a-z-]+_[a-z-]+_[a-z-]+$’) { “Key-Value Block Modifier” } elseif ($class -cmatch ‘^[a-z-]+__[a-z-]+$’) { “element” } elseif ($class -cmatch ‘^[a-z-]+__[a-z-]+_[a-z-]+$’) { “element modifier boolean” } elseif ($class -cmatch ‘^[a-z-]+__[a-z-]+_[a-z-]+_[a-z-]+$’) { “key-value element modifier” } else # Wenn dieser Zweig aktiviert ist, bedeutet dies, dass etwas früher nicht # berücksichtigt wurde und Sie die vorherigen Schritte überprüfen sollten, # auch in der Phase der Fehlererkennung { ” weiß nicht was es ist “}

In PowerShell ist der Operator -match einer von mehreren Operatoren Arbeiten mit regulären Ausdrücken. Bei diesem Operator wird die Groß-/Kleinschreibung nicht beachtet. Im obigen Code verwende ich den Operator -cmatch. Der am Anfang des Namens dieses Operators angefügte lateinische Buchstabe c bezeichnet das Wort „Groß-/Kleinschreibung“ (in diesem Fall bedeutet es auf Russisch „Buchstaben“), das heißt, beim Operator -cmatch wird zwischen Groß- und Kleinschreibung unterschieden.

Dies ist für uns wichtig, da das klassische Benennungsschema in der BEM-Methodik die Benennung von BEM-Entitäten nur in lateinischen Kleinbuchstaben zulässt (d. h. es sind nur Kleinbuchstaben (Kleinbuchstaben) zulässig). Neben lateinischen Zeichen können in den Namen auch das Bindestrich-Minuszeichen – und das Unterstrichzeichen _ verwendet werden.

Ich habe die Syntax regulärer Ausdrücke bereits in einem anderen Artikel ein wenig behandelt, aber es schadet nicht, sich daran zu erinnern, dass das ^ (Caret)-Symbol in einem regulären Ausdruck den Beginn einer Zeile anzeigt und das $ (Dollar)-Symbol das Ende einer Zeile. Der reguläre Ausdruck im obigen Code ist in einfache Anführungszeichen eingeschlossen, da die Verwendung von doppelten Anführungszeichen das $-Symbol anders interpretiert, als wir es für reguläre Ausdrücke benötigen (Variablen beginnen mit dem $-Symbol in PowerShell).

Das +-Zeichen in einem regulären Ausdruck hat eine besondere Bedeutung (solche Zeichen werden in regulären Ausdrücken “Quantifizierer” genannt). In diesem Fall bedeutet dies, dass das vorangestellte Zeichen ein- oder mehrmals wiederholt wird. In diesem Fall stehen vor dem +-Zeichen in den regulären Ausdrücken oben eckige Klammern, die ein beliebiges Zeichen aus den darin enthaltenen eckigen Klammern bedeuten. Also der Ausdruck [a-z-]+ bedeutet ein oder mehrere Zeichen, von denen jedes entweder ein kleiner (kleiner) lateinischer Buchstabe oder ein Bindestrich-Minus – sein kann.

Der Bereich der lateinischen Kleinbuchstaben in eckigen Klammern wird durch den Ausdruck az bezeichnet. Da in diesem Fall das Bindestrich-Minus – einen Bereich bezeichnet, kann das Bindestrich-Minus-Symbol selbst entweder am Anfang des Ausdrucks in eckigen Klammern oder am Ende des Ausdrucks in eckigen Klammern (in unserem Fall) angegeben werden.

In Anbetracht dessen, dass der Name jeder BEM-Entität auf einen oder mehrere Zeichensätze reduziert wird [a-z-]+, voneinander getrennt durch die entsprechenden Trennzeichen _ (einfacher Unterstrich) und __ (doppelter Unterstrich), können Sie leicht verschiedene Arten von BEM-Entitäten erkennen:

  1. Blockname enthält nur einen Zeichensatz [a-z-]+, keine Trennzeichen;

  2. Boolescher Blockmodifikatorname enthält zwei Zeichensätze [a-z-]+, voneinander getrennt durch das Trennzeichen _;

  3. Der Modifizierername des Schlüsselwertblocks enthält drei Zeichensätze [a-z-]+, voneinander getrennt durch zwei Trennzeichen _;

  4. Der Elementname enthält zwei Zeichensätze [a-z-]+, voneinander getrennt durch das Trennzeichen __;

  5. Boolescher Elementmodifikatorname enthält drei Zeichensätze [a-z-]+ durch Trennzeichen __ und Trennzeichen _ voneinander getrennt;

  6. Der Modifizierername des Schlüsselwertelements enthält vier Zeichensätze [a-z-]+ durch Trennzeichen __ und zwei _ voneinander getrennt.

Zwei Bemerkungen

Interessanterweise können die sechs Zweige der BEM-Entitätstyperkennung im obigen Code problemlos in beliebiger Reihenfolge neu angeordnet werden. Das heißt, reguläre Ausdrücke in diesen Zweigen hängen nicht von vorherigen regulären Ausdrücken ab. Dies unterscheidet sich davon, wie die Analyse von BEM-Entitätsnamen auf Fehler in der Funktion testBEMNameClassic geschrieben wird. Ich möchte Sie daran erinnern, dass auch eine Reihe relativ kurzer regulärer Ausdrücke der Reihe nach verwendet werden. In der Funktion testBEMNameClassic ist die Reihenfolge wichtig, in der reguläre Ausdrücke verwendet werden.

Außerdem sollten Sie auf den letzten Zweig im obigen Code achten. Wenn ich alles richtig in das Skript geschrieben habe, dann wird dieser Zweig niemals verwendet: Bei jedem Wort aus dem „class“-Attribut des HTML-Elements wird entweder ein Fehler angezeigt (das Wort passt nicht in das Namensschema des BEM Methodik) oder der Typ der BEM-Entität angezeigt. Wenn dieser Zweig immer noch involviert ist, bedeutet dies, dass irgendwo früher im Skript ein Fehler gemacht wurde.

Fazit

Die Arbeit eines Skripts mit BEM-Entitätstyperkennung könnte so aussehen:

Diese kann im Prinzip bereits für das Training genutzt werden. Aber ich bin daran interessiert, eine Suche nach komplexeren Fehlern zu schreiben. Suchen Sie beispielsweise nach Verstößen Zugehörigkeitsprinzip (das Element sollte sich nicht außerhalb des Kontexts seines Blocks befinden) und andere. Dazu ist es theoretisch notwendig, die Namen verschiedener BEM-Entitäten auf demselben Knoten des HTML-Baums sowie auf verschiedenen Knoten abzugleichen.

Similar Posts

Leave a Reply

Your email address will not be published.