HMPL-Integration mit JSON5

Die neue Version von HMPL verfügt über eine Integration mit dem JSON5-Modul, was die Arbeit qualitativ um ein Vielfaches verbessern wird! In diesem Artikel möchte ich genauer beschreiben, warum dies getan wurde und warum es notwendig ist.

Über JSON5

Zuallererst ist das seit langem bestehende Problem mit JSON zu erwähnen, das in JavaScript und in der Tat in fast jeder anderen Programmiersprache, die mit diesem Format arbeitet, besteht.

Bei der Arbeit mit Objekten scheint alles bequem und praktisch zu sein. JSON ist sehr praktisch und warum brauchen wir überhaupt zusätzliche Pakete, wenn es JSON.parse und JSON.stringify gibt, die in fast allen Arbeitsfällen nützlich sind? Aber nehmen wir diesen Code:

const user = {
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
};

const jsonString = JSON.stringify(user);

Jetzt geben wir auf der Konsole aus, was wir haben:

console.log(jsonString);

// output - {"id":0,"name":"Tony","age":43,"hobbies":["Building anthill"]}

Wir haben eine scheinbar gewöhnliche Zeichenfolge erhalten, die durch Parsen leicht zurückübersetzt werden kann, und alles ist cool, nur nimmt diese Zeichenfolge „viel“ Platz auf der Festplatte ein, und stellen Sie sich vor, Sie schreiben das alles manuell und nicht in JavaScript durch ein praktisches Objekt? Ja, das ist das Hauptproblem dieser Funktionalität.

Wenn wir dasselbe JavaScript-Objekt nehmen und es normal in einen String schreiben, analysiert JSON.Parse es nicht und gibt einen Fehler aus:

const userString = `{
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
}`

JSON.parse(userString);

// Uncaught SyntaxError: Expected property name or '}' in JSON at position 6 (line 2 column 5)
//   at JSON.parse (<anonymous>)

Um dies zu beheben, müssen wir die Zeichenfolge an das Format anpassen. Dazu müssen wir manuell ständig doppelte Anführungszeichen in die Nähe der Objekteigenschaften schreiben. Wir müssen immer kein Komma am Ende setzen, keine Kommentare in die Zeichenfolge schreiben wie in JS usw. Wir erhalten eine gewisse praktische Funktionalität, aber wenn wir es als etwas betrachten, das wir manuell schreiben, dann ist es einfach unglaublich unpraktisch, da jeder es gewohnt ist, ein JS-Objekt manuell zu schreiben und nicht JSON.

Das JSON5-Modul ermöglicht es Ihnen also, Strings fast wie in JS zu schreiben, ohne dass die oben beschriebenen Probleme auftreten:

import JSON5 from "json5";

const userString = `{
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
}`

JSON5.parse(userString);

/*
{
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
};
*/

Sogar der Slogan des Moduls selbst lautet: „JSON5 – JSON for Humans“.

Natürlich mag das Problem auf den ersten Blick unbedeutend erscheinen, aber nur so lange, bis es zu einem alltäglichen Problem wird. Es ist in Ordnung, Anführungszeichen einmal zu korrigieren und ein Komma zu entfernen, aber es ist unglaublich mühsam, dies jeden Tag manuell zu tun. Daher ist es als eines der Module, das dieses Problem löst, für all dies am besten geeignet.

Sie können sich sogar keine abstrakten Beispiele merken, sondern konkrete Beispiele, die in der Arbeit verwendet werden. Haben Sie jemals eine Konfigurationsdatei konfiguriert, als Sie mit einigen Code-Assemblern oder etwas anderem gearbeitet haben? Die gleichen Linters, Präfixer, Modul-Builder, verschiedene Texteditoren – all das funktioniert, auch über JSON.

Und normalerweise werden solche Dateien manuell von Benutzern gefüllt. Und jetzt müssen solche Momente analysiert werden. Hier ist beispielsweise ein Beispiel für eine Konfiguration:

const user = {
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
};

const jsonString = JSON.stringify(user);

Und ein solches Objekt muss auch auf der Anwendungsseite analysiert werden. Diese Parameter können beliebig und in jedem Format sowie mit Kommentaren und anderen Witzen sein. Das manuelle Schreiben eines solchen Parsers ist nicht kosteneffektiv und einfach unnötig.

Über die Vorteile für HMPL

Das HMPL-Modul basiert auf erweitertem HTML-Markup, an das wir Objekte übergeben und am Ausgang erhalten wir eine fertige Komponente vom Server. Nehmen wir ein Beispiel für den Code:

console.log(jsonString);

// output - {"id":0,"name":"Tony","age":43,"hobbies":["Building anthill"]}

Vor Version 2.2.0 basierte das Modul auf JSON.parse, daher war die ganze Sache völlig unpraktisch. Die Stringify-Funktion wurde eingeführt, die diesen Punkt irgendwie umgangen hat, aber es ist klar, dass es immer noch problematisch sein wird, den JS-Code in separaten .hmpl-Dateien zu schreiben. Hier ist ein Beispiel für stringify und eine Datei:

const userString = `{
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
}`

JSON.parse(userString);

// Uncaught SyntaxError: Expected property name or '}' in JSON at position 6 (line 2 column 5)
//   at JSON.parse (<anonymous>)

mail.hmpl:

import JSON5 from "json5";

const userString = `{
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
}`

JSON5.parse(userString);

/*
{
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
};
*/

Daher denke ich, dass die Integration mit JSON5 der beste Weg ist, um Websites noch schneller und kleiner zu machen. Im Allgemeinen ist es sehr praktisch, da Sie einfach ein Objekt aus JavaScript kopieren und in eine HTML-Datei einfügen können.

---

Das Modul-Repository selbst finden Sie übrigens hier. Es wäre cool, wenn du es mit einem Stern bewertest ☆ wenn du denkst, dass dieses Modul nützlich ist :)

hmpl-Sprache / hmpl

? Serverorientiertes, anpassbares Template für JavaScript

Serverorientiertes anpassbares Template für JavaScript

Website • Dokumentation • Demo-Sandbox • Beispiele

hmpl ist eine kleine Vorlagensprache zum Anzeigen der Benutzeroberfläche vom Server zum Client. Es basiert auf anpassbaren Anfragen, die per Fetch an den Server gesendet und in vorgefertigtes HTML verarbeitet werden. Die Sprache ist syntaktisch objektbasiert und in JSON5 integriert. Reduzieren Sie die Größe Ihrer Javascript-Dateien und zeigen Sie die gleiche Benutzeroberfläche an, als ob sie in einem modernen Framework geschrieben wäre.

Verwendung

hmpl aus „hmpl-js“ importieren;

const templateFn = hmpl.compile(
  `<div>
      <button data-action="increment">
<div>
<div>
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24"><title>Vollbildmodus aufrufen</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24"><title>Vollbildmodus verlassen</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>

Warum HMPL?

Verwenden von…

Auf GitHub ansehen

Das obige ist der detaillierte Inhalt vonHMPL-Integration mit JSON5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!