HMPL 與 JSON5 集成

新版HMPL與JSON5模組集成，將使工作品質提升數倍！在這篇文章中，我想更詳細地描述為什麼這樣做以及為什麼有必要。

關於 JSON5

首先，值得注意的是 JSON 長期存在的問題，它存在於 JavaScript 中，實際上也存在於幾乎所有使用這種格式的其他程式語言中。

在與物體打交道時，似乎一切都方便又實用。 JSON 非常方便，如果有 JSON.parse 和 JSON.stringify ，為什麼我們還需要額外的包，它們幾乎在所有工作情況下都很有用？但是，讓我們來看看這段程式碼：

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

const jsonString = JSON.stringify(user);

現在，讓我們將得到的內容輸出到控制台：

console.log(jsonString);

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

我們得到了一個看似普通的字串，可以很容易地通過解析將其翻譯回來，一切都很酷，只是這個字符串佔用了磁碟上的“大量”空間，並且想像一下，如果您手動編寫所有這些，而不是在JavaScript 中通過一個方便的物件？是的，這是此功能的主要問題。

如果我們採用相同的 JavaScript 物件並將其正常寫入字串中，則 JSON.Parse 將不會解析它，並給出錯誤：

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

要解決此問題，我們必須將字串調整為格式。為此，我們必須在物件屬性附近手動不斷地寫入雙引號。我們總是無法在末尾加上逗號，不能像在 JS 中那樣在字串中寫註解等。我們獲得了一些方便的功能，但如果我們將其視為我們將手動編寫的東西，那麼這簡直令人難以置信不方便，因為大家都習慣手動寫JS對象，而不是JSON。

所以，JSON5模組允許你像在JS中一樣編寫字串，並且不會出現上述問題：

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

甚至模組本身的口號也寫著：「JSON5 – JSON for Humans」。

當然，這個問題乍看之下似乎微不足道，但直到它成為一個日常問題。修正一次引號、刪除逗號是可以的，但每天手動執行此操作非常乏味。因此，作為解決這個問題的模組之一，它是最適合這一切的。

你甚至可以記住的不是抽象的例子，而是工作中使用的具體例子。您在使用某些程式碼彙編器或其他東西時是否已配置過設定檔？相同的 linter、前綴、模組建構器、各種文字編輯器 - 所有這些都有效，包括透過 JSON。

而且，通常這些文件是由使用者手動填寫的。並且，現在需要解析這樣的時刻，例如，這裡是一個配置範例：

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

const jsonString = JSON.stringify(user);

而且，這樣的物件也需要在應用程式端進行解析。這些參數可以是任意的、任意格式的，也可以帶有評論和其他笑話。手動編寫這樣的解析器並不划算，而且根本沒有必要。

關於HMPL 的優勢

HMPL 模組基於擴展的 HTML 標記，我們向其傳遞對象，並在輸出處從伺服器接收準備好的元件。我們以程式碼為例：

console.log(jsonString);

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

在2.2.0版本之前，模組是基於JSON.parse的，所以這整件事情完全不方便。引入了stringify函數，它以某種方式繞過了這一點，但很明顯，它仍然在單獨的.hmpl檔案中，js程式碼編寫起來會出現問題。這是 stringify 和文件的範例：

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

因此，我認為與 JSON5 整合是讓網站更快、更小的最佳方式。現在，它通常非常方便，因為您只需從 JavaScript 複製物件並將其貼上到 HTML 文件中即可。

---

順便說一句，模組儲存庫本身可以在這裡找到。如果你覺得這個模組有用的話，給它打個星就很酷了 :)

hmpl語言 / 漢普

？面向伺服器的可自訂 JavaScript 模板

面向伺服器的 JavaScript 可自訂模板

網站 • 文件 • 示範沙箱 • 範例

hmpl 是一種小型模板語言，用於從伺服器到客戶端顯示 UI。它基於透過 fetch 發送到伺服器並處理為現成 HTML 的可自訂請求。該語言在語法上是基於物件的，並與 JSON5 整合。減少 JavaScript 檔案的大小並顯示相同的 UI，就像在現代框架中編寫的一樣。

用法

從「hmpl-js」導入hmpl；

const templateFn = hmpl.compile(
  `<div>;
      
<div>
<div>
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24"><title>進入全螢幕模式</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>退出全螢幕模式</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>
<div>
<h2 id="為什麼要選擇-HMPL">為什麼要選擇 HMPL？ </h2>

</div>

<p dir="auto">使用…</p>

在 GitHub 上查看

以上是HMPL 與 JSON5 集成的詳細內容。更多資訊請關注PHP中文網其他相關文章！