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 のように文字列にコメントを書き込んだりしないようにする必要があります。便利な機能はありますが、手動で記述するものとして考えると、信じられないほどです。誰もが JSON ではなく JS オブジェクトを手動で記述することに慣れているため、不便です。

つまり、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」と書かれています。

もちろん、この問題は一見すると重要ではないように見えるかもしれませんが、それはそれが日常的な問題になるまでのことです。引用符を一度修正したり、カンマを削除したりするのは問題ありませんが、それを毎日手動で行うのは非常に面倒です。したがって、この問題を解決するモジュールの 1 つとして、これらすべてに最適です。

抽象的な例ではなく、仕事で使用される具体的な例を思い出すこともできます。コードアセンブラなどを使用するときに、設定ファイルを設定したことがありますか?同じリンター、プレフィクサー、モジュール ビルダー、さまざまなテキスト エディター - これらはすべて、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 を表示するための小さなテンプレート言語です。これは、フェッチ経由でサーバーに送信され、既成の HTML に処理される カスタマイズ可能な リクエストに基づいています。この言語は構文的にオブジェクトベースであり、JSON5 と統合されています。 JavaScript ファイルのサイズを削減し、最新のフレームワークで書かれたものと同じ UI を表示します。

使用法

「hmpl-js」から hmpl をインポートします。

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>全画面モードに入る</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>
</button>
</div>
<div>
<h2 id="HMPL-を使用する理由">HMPL を使用する理由</h2>

</div>

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

GitHub で表示

以上がHMPL と JSON5 の統合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。