Intégration HMPL avec JSON5

La nouvelle version de HMPL est intégrée au module JSON5, ce qui améliorera qualitativement le travail à plusieurs reprises ! Dans cet article, je voudrais décrire plus en détail pourquoi cela a été fait et pourquoi cela est nécessaire.

À propos de JSON5

Tout d'abord, il convient de noter le problème de longue date avec JSON, qui existe en JavaScript, et même dans presque tous les autres langages de programmation fonctionnant avec ce format.

Lorsque vous travaillez avec des objets, il semble que tout soit pratique et pratique. JSON est très pratique et pourquoi avons-nous besoin de packages supplémentaires s'il existe JSON.parse et JSON.stringify, qui seront utiles dans presque tous les cas de travail ? Mais prenons ce code :

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

const jsonString = JSON.stringify(user);

Maintenant, affichons sur la console ce que nous avons obtenu :

console.log(jsonString);

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

Nous avons une chaîne apparemment ordinaire, qui peut facilement être retraduite avec l'analyse et tout est cool, seule cette chaîne prend "beaucoup" d'espace sur le disque, et imaginez aussi si vous écrivez tout cela manuellement, et non en JavaScript via un objet pratique ? Oui, c'est le principal problème de cette fonctionnalité.

Si nous prenons le même objet JavaScript et l'écrivons normalement dans une chaîne, alors JSON.Parse ne l'analysera pas, donnant une erreur :

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>)

Pour résoudre ce problème, nous devrons ajuster la chaîne au format. Pour ce faire, nous devrons constamment écrire manuellement des guillemets doubles à proximité des propriétés de l'objet. Nous devrons toujours ne pas mettre de virgule à la fin, ne pas écrire de commentaires dans la chaîne comme dans JS, etc. Nous obtenons en quelque sorte une fonctionnalité pratique, mais si nous le considérons comme quelque chose que nous écrirons manuellement, alors c'est tout simplement incroyablement peu pratique, car tout le monde est habitué à écrire un objet JS manuellement, et non JSON.

Ainsi, le module JSON5 vous permet d'écrire des chaînes presque comme en JS et de ne pas avoir les problèmes décrits ci-dessus :

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"],
};
*/

Même le slogan du module lui-même dit : "JSON5 – JSON for Humans".

Bien sûr, le problème peut paraître insignifiant à première vue, mais seulement jusqu'à ce qu'il devienne un problème quotidien. Il est normal de corriger les guillemets une fois, de supprimer une virgule, mais le faire manuellement tous les jours est incroyablement fastidieux. Par conséquent, en tant que l'un des modules qui résolvent ce problème, il est le mieux adapté à tout cela.

Vous pouvez même vous souvenir non pas d'exemples abstraits, mais d'exemples spécifiques utilisés dans le travail. Avez-vous déjà configuré un fichier de configuration lorsque vous travaillez avec certains assembleurs de code ou autre chose ? Les mêmes linters, préfixeurs, constructeurs de modules, divers éditeurs de texte - tout cela fonctionne, y compris via JSON.

Et, généralement, ces fichiers sont remplis manuellement par les utilisateurs. Et, maintenant, il est nécessaire d'analyser de tels moments, par exemple, voici un exemple de configuration :

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

const jsonString = JSON.stringify(user);

Et un tel objet doit également être analysé du côté de l'application. Ces paramètres peuvent être n'importe lesquels et dans n'importe quel format, ainsi qu'avec des commentaires et autres blagues. Écrire manuellement un tel analyseur n'est pas rentable et tout simplement inutile.

À propos des avantages pour HMPL

Le module HMPL est basé sur un balisage HTML étendu, auquel nous transmettons des objets, et en sortie nous recevons un composant prêt du serveur. Prenons un exemple de code :

console.log(jsonString);

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

Avant la version 2.2.0, le module était basé sur JSON.parse, donc tout cela était complètement gênant. La fonction stringify a été introduite, qui a en quelque sorte contourné ce point, mais il est clair qu'elle est toujours dans des fichiers .hmpl séparés. Le code js sera problématique à écrire. Voici un exemple de stringify et un fichier :

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"],
};
*/

Par conséquent, je pense que l'intégration avec JSON5 est le meilleur moyen de rendre les sites encore plus rapides et de plus petite taille. Maintenant, c'est généralement très pratique, car vous pouvez simplement copier un objet depuis JavaScript et le coller dans un fichier HTML.

---

Au fait, le référentiel du module lui-même peut être trouvé ici. Ce sera cool si vous le notez avec une étoile ☆ si vous pensez que ce module est utile :)

langage Hmpl / hmpl

? Modèles personnalisables orientés serveur pour JavaScript

Modèle personnalisable orienté serveur pour JavaScript

Site Web • Documentation • Démo Sandbox • Exemples

hmpl est un petit langage de modèle pour afficher l'interface utilisateur du serveur au client. Il est basé sur des requêtes personnalisables envoyées au serveur via fetch et traitées en HTML prêt à l'emploi. Le langage est syntaxiquement basé sur les objets et intégré à JSON5. Réduisez la taille de vos fichiers javascript et affichez la même interface utilisateur comme si elle avait été écrite dans un framework moderne.

Utilisation

importer hmpl depuis "hmpl-js" ;

const templateFn = hmpl.compile(
  `<div>
      <bouton data-action="increment">
<div>
<div>
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24"><title>Entrez en mode plein écran</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>Quitter le mode plein écran</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>

Pourquoi HMPL ?

Utiliser…

Voir sur GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!