Penyepaduan HMPL dengan JSON5

Versi baharu HMPL mempunyai penyepaduan dengan modul JSON5, yang akan meningkatkan kerja secara kualitatif beberapa kali! Dalam artikel ini, saya ingin menerangkan dengan lebih terperinci mengapa ini dilakukan dan mengapa ia perlu.

Mengenai JSON5

Pertama sekali, perlu diperhatikan masalah lama dengan JSON, yang wujud dalam JavaScript, dan sememangnya dalam hampir mana-mana bahasa pengaturcaraan lain yang berfungsi dengan format ini.

Apabila bekerja dengan objek, nampaknya semuanya mudah dan praktikal. JSON sangat mudah dan mengapa kita memerlukan pakej tambahan sama sekali jika terdapat JSON.parse dan JSON.stringify, yang akan berguna dalam hampir semua kes kerja? Tetapi, mari ambil kod ini:

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

const jsonString = JSON.stringify(user);

Sekarang, mari kita keluarkan kepada konsol apa yang kita dapat:

console.log(jsonString);

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

Kami mendapat rentetan yang kelihatan biasa, yang boleh diterjemahkan kembali dengan mudah dengan penghuraian dan semuanya keren, hanya rentetan ini mengambil "banyak" ruang pada cakera, dan juga bayangkan jika anda menulis semua ini secara manual, dan bukan dalam JavaScript melalui objek yang mudah? Ya, ini adalah masalah utama dengan fungsi ini.

Jika kita mengambil objek JavaScript yang sama dan menulisnya seperti biasa dalam rentetan, maka JSON.Parse tidak akan menghuraikannya, memberikan ralat:

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

Untuk membetulkannya, kami perlu melaraskan rentetan kepada format. Untuk melakukan ini, kita perlu sentiasa menulis petikan berganda secara manual berhampiran sifat objek. Kami sentiasa perlu tidak meletakkan koma pada penghujung, bukan menulis komen dalam rentetan seperti dalam JS, dll. Kami jenis mendapat fungsi yang mudah, tetapi jika kami menganggapnya sebagai sesuatu yang kami akan tulis secara manual, maka ia adalah sangat luar biasa. menyusahkan, kerana semua orang biasa menulis objek JS secara manual, dan bukan JSON.

Jadi, modul JSON5 membolehkan anda menulis rentetan hampir seperti dalam JS dan tidak mempunyai masalah yang diterangkan di atas:

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

Malah slogan modul itu sendiri mengatakan: "JSON5 – JSON untuk Manusia".

Sudah tentu, masalah itu mungkin kelihatan tidak penting pada pandangan pertama, tetapi hanya sehingga ia menjadi isu harian. Tidak mengapa untuk membetulkan petikan sekali, buang koma, tetapi melakukannya secara manual setiap hari adalah sangat membosankan. Oleh itu, sebagai salah satu modul yang menyelesaikan masalah ini, ia adalah yang paling sesuai untuk semua ini.

Anda juga boleh mengingati bukan contoh abstrak, tetapi contoh khusus yang digunakan dalam kerja. Pernahkah anda mengkonfigurasi fail konfigurasi apabila bekerja dengan beberapa pemasang kod atau sesuatu yang lain? Linters, awalan, pembina modul, pelbagai editor teks yang sama - semua ini berfungsi, termasuk melalui JSON.

Dan, biasanya, fail sebegitu diisi secara manual oleh pengguna. Dan, kini terdapat keperluan untuk menghuraikan detik sedemikian, sebagai contoh, berikut ialah contoh konfigurasi:

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

const jsonString = JSON.stringify(user);

Dan, objek sedemikian juga perlu dihuraikan pada bahagian aplikasi. Parameter ini boleh menjadi apa-apa dan dalam sebarang format, serta dengan komen dan jenaka lain. Menulis penghurai sedemikian secara manual tidak menjimatkan kos dan tidak perlu.

Mengenai faedah untuk HMPL

Modul HMPL adalah berdasarkan penanda HTML lanjutan, yang mana kami menghantar objek, dan pada output kami menerima komponen sedia daripada pelayan. Mari kita ambil contoh kod:

console.log(jsonString);

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

Sebelum versi 2.2.0, modul adalah berdasarkan JSON.parse, jadi keseluruhan perkara ini menyusahkan sepenuhnya. Fungsi stringify telah diperkenalkan, yang entah bagaimana memintas titik ini, tetapi jelas bahawa ia masih dalam kod .hmpl fail js yang berasingan akan menjadi masalah untuk ditulis. Berikut ialah contoh stringify dan fail:

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

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

Oleh itu, saya berpendapat bahawa penyepaduan dengan JSON5 ialah cara terbaik untuk menjadikan tapak lebih pantas dan bersaiz lebih kecil. Kini, ia secara amnya sangat mudah, kerana anda hanya boleh menyalin objek daripada JavaScript dan menampalnya ke dalam fail HTML.

---

Dengan cara ini, repositori modul itu sendiri boleh didapati di sini. Ia akan menjadi keren jika anda menilai dengan bintang ☆ jika anda rasa modul ini berguna :)

hmpl-bahasa / hmpl

? Templat tersuai berorientasikan pelayan untuk JavaScript

Templat tersuai berorientasikan pelayan untuk JavaScript

Laman Web • Dokumentasi • Demo Kotak Pasir • Contoh

hmpl ialah bahasa templat kecil untuk memaparkan UI dari pelayan ke pelanggan. Ia berdasarkan permintaan boleh disesuaikan yang dihantar ke pelayan melalui pengambilan dan diproses menjadi HTML siap pakai. Bahasa ini berasaskan objek secara sintaksis dan disepadukan dengan JSON5. Kecilkan saiz fail javascript anda dan paparkan UI yang sama seolah-olah ia ditulis dalam rangka kerja moden.

Penggunaan

import hmpl daripada "hmpl-js";

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>Masukkan mod skrin penuh</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>Keluar daripada mod skrin penuh</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>

Kenapa HMPL?

Menggunakan…

Lihat di GitHub

Atas ialah kandungan terperinci Penyepaduan HMPL dengan JSON5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!