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

要解决此问题，我们必须将字符串调整为格式。为此，我们必须在对象属性附近手动不断地写入双引号。我们总是不能在末尾添加逗号，不能像在 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>)

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>为什么选择 HMPL？</h2>

</div>

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

在 GitHub 上查看

以上是HMPL 与 JSON5 集成的详细内容。更多信息请关注PHP中文网其他相关文章！